[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":31898,"doc-\u002Fdocs\u002Fcomponents\u002Fchrome":82700,"doc-surr-\u002Fdocs\u002Fcomponents\u002Fchrome":82889},[4,199,1525,2248,2486,4448,5511,6127,7605,10240,12239,15014,17296,20962,25841,26205,26840,27482,28379,28996,29574,30116,30703,31225],{"id":5,"title":6,"body":7,"category":188,"description":189,"exclude":190,"extension":191,"forceFramework":190,"icon":192,"meta":193,"navigation":194,"path":195,"seo":196,"stem":197,"__hash__":198},"guide\u002Fdocs\u002Fguide\u002F0.index.md","What is shaders?",{"type":8,"value":9,"toc":177},"minimark",[10,14,18,22,27,30,33,52,61,65,68,71,91,95,103,106,110,113,136,139,143,146,149,153,156,170,174],[11,12,6],"h1",{"id":13},"what-is-shaders",[15,16,17],"p",{},"Shaders is a design platform for creating production-ready WebGPU effects. It lets developers and design engineers build interactive backgrounds, logo effects, image effects, and other GPU-powered visuals without writing a line of shader code.",[19,20],"shader-demo",{":preset":21},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0},\"color\":\"#0f0f12\"}},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.54,\"y\":0.77},\"fontFamily\":\"Geist\",\"fontSize\":0.39,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"welcome\"}},{\"type\":\"LightEdge\",\"props\":{\"bloom\":0.52,\"center\":{\"x\":0.22,\"y\":0.36},\"intensity\":1,\"pulse\":0.34,\"scale\":1.6111,\"shape\":{\"type\":\"metaballs3D\",\"ballRadius\":0.16,\"spread\":0.2,\"blend\":0.12,\"speed\":1,\"rotX\":0,\"rotY\":0,\"rotZ\":0},\"shapeType\":\"metaballs3D\",\"softness\":1,\"spots\":4,\"spotSize\":0.43,\"thickness\":0.26}}]}",[23,24,26],"h2",{"id":25},"design-first-code-second","Design first. Code second.",[15,28,29],{},"Most people start in the design editor, not in code.",[15,31,32],{},"In the editor you can:",[34,35,36,40,43,46,49],"ul",{},[37,38,39],"li",{},"Visually build effects by adding and arranging layers",[37,41,42],{},"Combine layers to create something more complex than any single effect",[37,44,45],{},"Adjust properties with sliders, color pickers, and other visual controls",[37,47,48],{},"Experiment quickly, trying ideas without touching a text editor",[37,50,51],{},"Preview instantly, with every change reflected in real time",[15,53,54,55,60],{},"Once you're happy with the result, you export clean components for your framework of choice, or use the ",[56,57,59],"a",{"href":58},"\u002Fdocs\u002Fguide\u002Fmcp","MCP"," to have your AI coding agent install the effect directly into your project. For most people, the editor is where the actual work of building an effect happens.",[23,62,64],{"id":63},"production-ready-from-day-one","Production-ready from day one",[15,66,67],{},"What you export is code you can drop straight into your project, not a video or an image. It's written in the same simple, declarative component structure you use throughout Shaders, so it reads clearly and stays easy to adjust once it's in your codebase.",[15,69,70],{},"Export to:",[34,72,73,76,79,82,85,88],{},[37,74,75],{},"Vue",[37,77,78],{},"React",[37,80,81],{},"Svelte",[37,83,84],{},"Solid",[37,86,87],{},"JavaScript",[37,89,90],{},"Framer",[23,92,94],{"id":93},"how-shaders-works","How Shaders works",[15,96,97,98,102],{},"Under the hood, a ",[99,100,101],"code",{},"\u003CShader>"," component renders to a single canvas element, no matter how many layers you nest inside it. Those layers are combined by our own render engine, built on TypeGPU for performance, which compiles everything down to WebGPU.",[15,104,105],{},"Props stay reactive, so changing a value updates the effect instantly without recompiling anything.",[23,107,109],{"id":108},"what-can-i-build","What can I build?",[15,111,112],{},"Almost anything visual. A few examples to get you thinking:",[34,114,115,118,121,124,127,130,133],{},[37,116,117],{},"Hero backgrounds and animated gradients",[37,119,120],{},"Cursor-reactive interactions",[37,122,123],{},"Logo effects and image effects",[37,125,126],{},"Glass, distortion, and lighting effects",[37,128,129],{},"Procedural shapes",[37,131,132],{},"Masking, blending, and text effects",[37,134,135],{},"Animated UI decoration",[15,137,138],{},"These building blocks show up everywhere from landing pages and product showcases to portfolio sites and full marketing websites. Every effect is built by combining a handful of simple components, and new components keep expanding what's possible.",[23,140,142],{"id":141},"no-shader-experience-required","No shader experience required",[15,144,145],{},"You don't need to know GLSL, WGSL, or any graphics programming to use Shaders. If you're comfortable with everyday frontend development or visual design tools, you already have what you need to get started.",[15,147,148],{},"The component-based approach also scales with you. As you get more comfortable, composing and layering effects lets you build results that look more sophisticated than the individual pieces suggest.",[23,150,152],{"id":151},"supported-frameworks","Supported frameworks",[15,154,155],{},"Shaders ships dedicated integrations for Vue, React, Svelte, Solid, JavaScript, and Framer, so you can use it with the framework or platform you're already building in.",[15,157,158,162,163,169],{},[159,160,161],"strong",{},"Building in Framer?"," You don't need npm or any of the code guides here — everything works through the ",[56,164,168],{"href":165,"rel":166},"https:\u002F\u002Fshaders.com\u002Fframer",[167],"nofollow","official Shaders plugin for Framer",". Browse your shaders and the preset library, then drop effects straight onto your Framer canvas, no code required.",[23,171,173],{"id":172},"browser-support","Browser support",[15,175,176],{},"Shaders runs on WebGPU, the modern successor to WebGL, now shipping in every major browser. Across telemetry from 145,000+ sessions on 1,000+ production domains, more than 99% of user devices run it without issue. And on the rare device that doesn't support it, the canvas simply stays empty — your layout and the rest of your page carry on exactly as normal.",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,182,183,184,185,186,187],{"id":25,"depth":179,"text":26},{"id":63,"depth":179,"text":64},{"id":93,"depth":179,"text":94},{"id":108,"depth":179,"text":109},{"id":141,"depth":179,"text":142},{"id":151,"depth":179,"text":152},{"id":172,"depth":179,"text":173},"concepts","A design platform for creating production-ready WebGPU effects",null,"md","hand-wave",{},true,"\u002Fdocs\u002Fguide",{"title":6,"description":189},"docs\u002Fguide\u002F0.index","tljpUYFl1uZaqTdHradMgrA4VY1wPQeNSChUAPMo8FE",{"id":200,"title":201,"body":202,"category":188,"description":1516,"exclude":1517,"extension":191,"forceFramework":190,"icon":1519,"meta":1520,"navigation":194,"path":1521,"seo":1522,"stem":1523,"__hash__":1524},"guide\u002Fdocs\u002Fguide\u002F1.quickstart.md","Quickstart",{"type":8,"value":203,"toc":1507},[204,207,211,235,238,242,245,320,324,330,576,579,591,595,598,1147,1150,1154,1162,1464,1468,1471,1475,1503],[11,205,201],{"id":206},"quickstart",[23,208,210],{"id":209},"installation","Installation",[212,213,217],"pre",{"className":214,"code":215,"language":216,"meta":178,"style":178},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash",[99,218,219],{"__ignoreMap":178},[220,221,224,228,232],"span",{"class":222,"line":223},"line",1,[220,225,227],{"class":226},"svObZ","npm",[220,229,231],{"class":230},"sU2Wk"," install",[220,233,234],{"class":230}," shaders\n",[15,236,237],{},"Shaders is a single package regardless of your framework. No framework-specific adapters needed.",[23,239,241],{"id":240},"import-your-components","Import your components",[15,243,244],{},"Import from the entry point that matches your framework:",[246,247,249,272,288,304],"code-group",{":tabs":248},"[\"Vue\", \"React\", \"Svelte\", \"Solid\"]",[212,250,254],{"className":251,"code":252,"language":253,"meta":178,"style":178},"language-javascript shiki shiki-themes github-dark","import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fvue'\n","javascript",[99,255,256],{"__ignoreMap":178},[220,257,258,262,266,269],{"class":222,"line":223},[220,259,261],{"class":260},"snl16","import",[220,263,265],{"class":264},"s95oV"," { Shader, LinearGradient, CursorTrail } ",[220,267,268],{"class":260},"from",[220,270,271],{"class":230}," 'shaders\u002Fvue'\n",[212,273,275],{"className":251,"code":274,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n",[99,276,277],{"__ignoreMap":178},[220,278,279,281,283,285],{"class":222,"line":223},[220,280,261],{"class":260},[220,282,265],{"class":264},[220,284,268],{"class":260},[220,286,287],{"class":230}," 'shaders\u002Freact'\n",[212,289,291],{"className":251,"code":290,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsvelte'\n",[99,292,293],{"__ignoreMap":178},[220,294,295,297,299,301],{"class":222,"line":223},[220,296,261],{"class":260},[220,298,265],{"class":264},[220,300,268],{"class":260},[220,302,303],{"class":230}," 'shaders\u002Fsvelte'\n",[212,305,307],{"className":251,"code":306,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsolid'\n",[99,308,309],{"__ignoreMap":178},[220,310,311,313,315,317],{"class":222,"line":223},[220,312,261],{"class":260},[220,314,265],{"class":264},[220,316,268],{"class":260},[220,318,319],{"class":230}," 'shaders\u002Fsolid'\n",[23,321,323],{"id":322},"your-first-shader","Your first shader",[15,325,326,327,329],{},"Wrap your effects in a ",[99,328,101],{}," component and add children inside:",[246,331,332,407,466,522],{":tabs":248},[212,333,337],{"className":334,"code":335,"language":336,"meta":178,"style":178},"language-vue-html shiki shiki-themes github-dark","\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","vue-html",[99,338,339,360,387,397],{"__ignoreMap":178},[220,340,341,344,348,351,354,357],{"class":222,"line":223},[220,342,343],{"class":264},"\u003C",[220,345,347],{"class":346},"s4JwU","Shader",[220,349,350],{"class":226}," class",[220,352,353],{"class":264},"=",[220,355,356],{"class":230},"\"w-full h-64\"",[220,358,359],{"class":264},">\n",[220,361,362,365,368,371,373,376,379,381,384],{"class":222,"line":179},[220,363,364],{"class":264}," \u003C",[220,366,367],{"class":346},"LinearGradient",[220,369,370],{"class":226}," colorA",[220,372,353],{"class":264},[220,374,375],{"class":230},"\"#0f172a\"",[220,377,378],{"class":226}," colorB",[220,380,353],{"class":264},[220,382,383],{"class":230},"\"#7c3aed\"",[220,385,386],{"class":264}," \u002F>\n",[220,388,390,392,395],{"class":222,"line":389},3,[220,391,364],{"class":264},[220,393,394],{"class":346},"CursorTrail",[220,396,386],{"class":264},[220,398,400,403,405],{"class":222,"line":399},4,[220,401,402],{"class":264},"\u003C\u002F",[220,404,347],{"class":346},[220,406,359],{"class":264},[212,408,412],{"className":409,"code":410,"language":411,"meta":178,"style":178},"language-jsx shiki shiki-themes github-dark","\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","jsx",[99,413,414,430,450,458],{"__ignoreMap":178},[220,415,416,418,421,424,426,428],{"class":222,"line":223},[220,417,343],{"class":264},[220,419,347],{"class":420},"sDLfK",[220,422,423],{"class":226}," className",[220,425,353],{"class":260},[220,427,356],{"class":230},[220,429,359],{"class":264},[220,431,432,434,436,438,440,442,444,446,448],{"class":222,"line":179},[220,433,364],{"class":264},[220,435,367],{"class":420},[220,437,370],{"class":226},[220,439,353],{"class":260},[220,441,375],{"class":230},[220,443,378],{"class":226},[220,445,353],{"class":260},[220,447,383],{"class":230},[220,449,386],{"class":264},[220,451,452,454,456],{"class":222,"line":389},[220,453,364],{"class":264},[220,455,394],{"class":420},[220,457,386],{"class":264},[220,459,460,462,464],{"class":222,"line":399},[220,461,402],{"class":264},[220,463,347],{"class":420},[220,465,359],{"class":264},[212,467,470],{"className":468,"code":335,"language":469,"meta":178,"style":178},"language-tsx shiki shiki-themes github-dark","tsx",[99,471,472,486,506,514],{"__ignoreMap":178},[220,473,474,476,478,480,482,484],{"class":222,"line":223},[220,475,343],{"class":264},[220,477,347],{"class":420},[220,479,350],{"class":226},[220,481,353],{"class":260},[220,483,356],{"class":230},[220,485,359],{"class":264},[220,487,488,490,492,494,496,498,500,502,504],{"class":222,"line":179},[220,489,364],{"class":264},[220,491,367],{"class":420},[220,493,370],{"class":226},[220,495,353],{"class":260},[220,497,375],{"class":230},[220,499,378],{"class":226},[220,501,353],{"class":260},[220,503,383],{"class":230},[220,505,386],{"class":264},[220,507,508,510,512],{"class":222,"line":389},[220,509,364],{"class":264},[220,511,394],{"class":420},[220,513,386],{"class":264},[220,515,516,518,520],{"class":222,"line":399},[220,517,402],{"class":264},[220,519,347],{"class":420},[220,521,359],{"class":264},[212,523,524],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,525,526,540,560,568],{"__ignoreMap":178},[220,527,528,530,532,534,536,538],{"class":222,"line":223},[220,529,343],{"class":264},[220,531,347],{"class":420},[220,533,350],{"class":226},[220,535,353],{"class":260},[220,537,356],{"class":230},[220,539,359],{"class":264},[220,541,542,544,546,548,550,552,554,556,558],{"class":222,"line":179},[220,543,364],{"class":264},[220,545,367],{"class":420},[220,547,370],{"class":226},[220,549,353],{"class":260},[220,551,375],{"class":230},[220,553,378],{"class":226},[220,555,353],{"class":260},[220,557,383],{"class":230},[220,559,386],{"class":264},[220,561,562,564,566],{"class":222,"line":389},[220,563,364],{"class":264},[220,565,394],{"class":420},[220,567,386],{"class":264},[220,569,570,572,574],{"class":222,"line":399},[220,571,402],{"class":264},[220,573,347],{"class":420},[220,575,359],{"class":264},[19,577],{":preset":578},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[15,580,581,583,584,587,588,590],{},[99,582,101],{}," renders a ",[99,585,586],{},"\u003Ccanvas>"," element. The child components are visual layers — evaluated top to bottom, blended together on the GPU. The class or style you apply to ",[99,589,101],{}," controls the canvas size and position.",[23,592,594],{"id":593},"sizing-the-canvas","Sizing the canvas",[15,596,597],{},"The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works — Tailwind classes, inline styles, or a custom class:",[246,599,600,734,877,1014],{":tabs":248},[212,601,603],{"className":334,"code":602,"language":336,"meta":178,"style":178},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Aspect ratio with fluid width -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,604,605,611,626,634,642,648,654,671,680,689,694,700,716,725],{"__ignoreMap":178},[220,606,607],{"class":222,"line":223},[220,608,610],{"class":609},"sAwPA","\u003C!-- Fill the viewport -->\n",[220,612,613,615,617,619,621,624],{"class":222,"line":179},[220,614,343],{"class":264},[220,616,347],{"class":346},[220,618,350],{"class":226},[220,620,353],{"class":264},[220,622,623],{"class":230},"\"w-screen h-screen\"",[220,625,359],{"class":264},[220,627,628,630,632],{"class":222,"line":389},[220,629,364],{"class":264},[220,631,367],{"class":346},[220,633,386],{"class":264},[220,635,636,638,640],{"class":222,"line":399},[220,637,402],{"class":264},[220,639,347],{"class":346},[220,641,359],{"class":264},[220,643,645],{"class":222,"line":644},5,[220,646,647],{"emptyLinePlaceholder":194},"\n",[220,649,651],{"class":222,"line":650},6,[220,652,653],{"class":609},"\u003C!-- Fixed dimensions -->\n",[220,655,657,659,661,664,666,669],{"class":222,"line":656},7,[220,658,343],{"class":264},[220,660,347],{"class":346},[220,662,663],{"class":226}," style",[220,665,353],{"class":264},[220,667,668],{"class":230},"\"width: 600px; height: 400px;\"",[220,670,359],{"class":264},[220,672,674,676,678],{"class":222,"line":673},8,[220,675,364],{"class":264},[220,677,367],{"class":346},[220,679,386],{"class":264},[220,681,683,685,687],{"class":222,"line":682},9,[220,684,402],{"class":264},[220,686,347],{"class":346},[220,688,359],{"class":264},[220,690,692],{"class":222,"line":691},10,[220,693,647],{"emptyLinePlaceholder":194},[220,695,697],{"class":222,"line":696},11,[220,698,699],{"class":609},"\u003C!-- Aspect ratio with fluid width -->\n",[220,701,703,705,707,709,711,714],{"class":222,"line":702},12,[220,704,343],{"class":264},[220,706,347],{"class":346},[220,708,350],{"class":226},[220,710,353],{"class":264},[220,712,713],{"class":230},"\"w-full aspect-video\"",[220,715,359],{"class":264},[220,717,719,721,723],{"class":222,"line":718},13,[220,720,364],{"class":264},[220,722,367],{"class":346},[220,724,386],{"class":264},[220,726,728,730,732],{"class":222,"line":727},14,[220,729,402],{"class":264},[220,731,347],{"class":346},[220,733,359],{"class":264},[212,735,737],{"className":409,"code":736,"language":411,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,738,739,750,764,772,780,784,793,818,826,834,838,847,861,869],{"__ignoreMap":178},[220,740,741,744,747],{"class":222,"line":223},[220,742,743],{"class":264},"{",[220,745,746],{"class":609},"\u002F* Fill the viewport *\u002F",[220,748,749],{"class":264},"}\n",[220,751,752,754,756,758,760,762],{"class":222,"line":179},[220,753,343],{"class":264},[220,755,347],{"class":420},[220,757,423],{"class":226},[220,759,353],{"class":260},[220,761,623],{"class":230},[220,763,359],{"class":264},[220,765,766,768,770],{"class":222,"line":389},[220,767,364],{"class":264},[220,769,367],{"class":420},[220,771,386],{"class":264},[220,773,774,776,778],{"class":222,"line":399},[220,775,402],{"class":264},[220,777,347],{"class":420},[220,779,359],{"class":264},[220,781,782],{"class":222,"line":644},[220,783,647],{"emptyLinePlaceholder":194},[220,785,786,788,791],{"class":222,"line":650},[220,787,743],{"class":264},[220,789,790],{"class":609},"\u002F* Fixed dimensions *\u002F",[220,792,749],{"class":264},[220,794,795,797,799,801,803,806,809,812,815],{"class":222,"line":656},[220,796,343],{"class":264},[220,798,347],{"class":420},[220,800,663],{"class":226},[220,802,353],{"class":260},[220,804,805],{"class":264},"{{ width: ",[220,807,808],{"class":230},"'600px'",[220,810,811],{"class":264},", height: ",[220,813,814],{"class":230},"'400px'",[220,816,817],{"class":264}," }}>\n",[220,819,820,822,824],{"class":222,"line":673},[220,821,364],{"class":264},[220,823,367],{"class":420},[220,825,386],{"class":264},[220,827,828,830,832],{"class":222,"line":682},[220,829,402],{"class":264},[220,831,347],{"class":420},[220,833,359],{"class":264},[220,835,836],{"class":222,"line":691},[220,837,647],{"emptyLinePlaceholder":194},[220,839,840,842,845],{"class":222,"line":696},[220,841,743],{"class":264},[220,843,844],{"class":609},"\u002F* Aspect ratio with fluid width *\u002F",[220,846,749],{"class":264},[220,848,849,851,853,855,857,859],{"class":222,"line":702},[220,850,343],{"class":264},[220,852,347],{"class":420},[220,854,423],{"class":226},[220,856,353],{"class":260},[220,858,713],{"class":230},[220,860,359],{"class":264},[220,862,863,865,867],{"class":222,"line":718},[220,864,364],{"class":264},[220,866,367],{"class":420},[220,868,386],{"class":264},[220,870,871,873,875],{"class":222,"line":727},[220,872,402],{"class":264},[220,874,347],{"class":420},[220,876,359],{"class":264},[212,878,879],{"className":468,"code":602,"language":469,"meta":178,"style":178},[99,880,881,892,906,914,922,926,935,949,957,965,969,984,998,1006],{"__ignoreMap":178},[220,882,883,886,889],{"class":222,"line":223},[220,884,885],{"class":260},"\u003C!--",[220,887,888],{"class":264}," Fill the viewport ",[220,890,891],{"class":260},"-->\n",[220,893,894,896,898,900,902,904],{"class":222,"line":179},[220,895,343],{"class":264},[220,897,347],{"class":420},[220,899,350],{"class":226},[220,901,353],{"class":260},[220,903,623],{"class":230},[220,905,359],{"class":264},[220,907,908,910,912],{"class":222,"line":389},[220,909,364],{"class":264},[220,911,367],{"class":420},[220,913,386],{"class":264},[220,915,916,918,920],{"class":222,"line":399},[220,917,402],{"class":264},[220,919,347],{"class":420},[220,921,359],{"class":264},[220,923,924],{"class":222,"line":644},[220,925,647],{"emptyLinePlaceholder":194},[220,927,928,930,933],{"class":222,"line":650},[220,929,885],{"class":260},[220,931,932],{"class":264}," Fixed dimensions ",[220,934,891],{"class":260},[220,936,937,939,941,943,945,947],{"class":222,"line":656},[220,938,343],{"class":264},[220,940,347],{"class":420},[220,942,663],{"class":226},[220,944,353],{"class":260},[220,946,668],{"class":230},[220,948,359],{"class":264},[220,950,951,953,955],{"class":222,"line":673},[220,952,364],{"class":264},[220,954,367],{"class":420},[220,956,386],{"class":264},[220,958,959,961,963],{"class":222,"line":682},[220,960,402],{"class":264},[220,962,347],{"class":420},[220,964,359],{"class":264},[220,966,967],{"class":222,"line":691},[220,968,647],{"emptyLinePlaceholder":194},[220,970,971,973,976,979,982],{"class":222,"line":696},[220,972,885],{"class":260},[220,974,975],{"class":264}," Aspect ratio ",[220,977,978],{"class":260},"with",[220,980,981],{"class":264}," fluid width ",[220,983,891],{"class":260},[220,985,986,988,990,992,994,996],{"class":222,"line":702},[220,987,343],{"class":264},[220,989,347],{"class":420},[220,991,350],{"class":226},[220,993,353],{"class":260},[220,995,713],{"class":230},[220,997,359],{"class":264},[220,999,1000,1002,1004],{"class":222,"line":718},[220,1001,364],{"class":264},[220,1003,367],{"class":420},[220,1005,386],{"class":264},[220,1007,1008,1010,1012],{"class":222,"line":727},[220,1009,402],{"class":264},[220,1011,347],{"class":420},[220,1013,359],{"class":264},[212,1015,1017],{"className":468,"code":1016,"language":469,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,1018,1019,1027,1041,1049,1057,1061,1069,1089,1097,1105,1109,1117,1131,1139],{"__ignoreMap":178},[220,1020,1021,1023,1025],{"class":222,"line":223},[220,1022,743],{"class":264},[220,1024,746],{"class":609},[220,1026,749],{"class":264},[220,1028,1029,1031,1033,1035,1037,1039],{"class":222,"line":179},[220,1030,343],{"class":264},[220,1032,347],{"class":420},[220,1034,350],{"class":226},[220,1036,353],{"class":260},[220,1038,623],{"class":230},[220,1040,359],{"class":264},[220,1042,1043,1045,1047],{"class":222,"line":389},[220,1044,364],{"class":264},[220,1046,367],{"class":420},[220,1048,386],{"class":264},[220,1050,1051,1053,1055],{"class":222,"line":399},[220,1052,402],{"class":264},[220,1054,347],{"class":420},[220,1056,359],{"class":264},[220,1058,1059],{"class":222,"line":644},[220,1060,647],{"emptyLinePlaceholder":194},[220,1062,1063,1065,1067],{"class":222,"line":650},[220,1064,743],{"class":264},[220,1066,790],{"class":609},[220,1068,749],{"class":264},[220,1070,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":222,"line":656},[220,1072,343],{"class":264},[220,1074,347],{"class":420},[220,1076,663],{"class":226},[220,1078,353],{"class":260},[220,1080,805],{"class":264},[220,1082,808],{"class":230},[220,1084,811],{"class":264},[220,1086,814],{"class":230},[220,1088,817],{"class":264},[220,1090,1091,1093,1095],{"class":222,"line":673},[220,1092,364],{"class":264},[220,1094,367],{"class":420},[220,1096,386],{"class":264},[220,1098,1099,1101,1103],{"class":222,"line":682},[220,1100,402],{"class":264},[220,1102,347],{"class":420},[220,1104,359],{"class":264},[220,1106,1107],{"class":222,"line":691},[220,1108,647],{"emptyLinePlaceholder":194},[220,1110,1111,1113,1115],{"class":222,"line":696},[220,1112,743],{"class":264},[220,1114,844],{"class":609},[220,1116,749],{"class":264},[220,1118,1119,1121,1123,1125,1127,1129],{"class":222,"line":702},[220,1120,343],{"class":264},[220,1122,347],{"class":420},[220,1124,350],{"class":226},[220,1126,353],{"class":260},[220,1128,713],{"class":230},[220,1130,359],{"class":264},[220,1132,1133,1135,1137],{"class":222,"line":718},[220,1134,364],{"class":264},[220,1136,367],{"class":420},[220,1138,386],{"class":264},[220,1140,1141,1143,1145],{"class":222,"line":727},[220,1142,402],{"class":264},[220,1144,347],{"class":420},[220,1146,359],{"class":264},[15,1148,1149],{},"The canvas automatically resizes when its CSS dimensions change — no manual resize calls needed.",[23,1151,1153],{"id":1152},"configuring-components","Configuring components",[15,1155,1156,1157,1161],{},"Each component accepts props that control its appearance. Browse the ",[56,1158,1160],{"href":1159},"\u002Fdocs\u002Fcomponents","Component Docs"," for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:",[246,1163,1164,1243,1319,1392],{":tabs":248},[212,1165,1167],{"className":334,"code":1166,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1168,1169,1183,1190,1200,1210,1220,1230,1235],{"__ignoreMap":178},[220,1170,1171,1173,1175,1177,1179,1181],{"class":222,"line":223},[220,1172,343],{"class":264},[220,1174,347],{"class":346},[220,1176,350],{"class":226},[220,1178,353],{"class":264},[220,1180,356],{"class":230},[220,1182,359],{"class":264},[220,1184,1185,1187],{"class":222,"line":179},[220,1186,364],{"class":264},[220,1188,1189],{"class":346},"LinearGradient\n",[220,1191,1192,1195,1197],{"class":222,"line":389},[220,1193,1194],{"class":226}," colorA",[220,1196,353],{"class":264},[220,1198,1199],{"class":230},"\"#ff6b6b\"\n",[220,1201,1202,1205,1207],{"class":222,"line":399},[220,1203,1204],{"class":226}," colorB",[220,1206,353],{"class":264},[220,1208,1209],{"class":230},"\"#4ecdc4\"\n",[220,1211,1212,1215,1217],{"class":222,"line":644},[220,1213,1214],{"class":226}," :angle",[220,1216,353],{"class":264},[220,1218,1219],{"class":230},"\"45\"\n",[220,1221,1222,1225,1227],{"class":222,"line":650},[220,1223,1224],{"class":226}," color-space",[220,1226,353],{"class":264},[220,1228,1229],{"class":230},"\"oklch\"\n",[220,1231,1232],{"class":222,"line":656},[220,1233,1234],{"class":264}," \u002F>\n",[220,1236,1237,1239,1241],{"class":222,"line":673},[220,1238,402],{"class":264},[220,1240,347],{"class":346},[220,1242,359],{"class":264},[212,1244,1246],{"className":409,"code":1245,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1247,1248,1262,1268,1276,1284,1298,1307,1311],{"__ignoreMap":178},[220,1249,1250,1252,1254,1256,1258,1260],{"class":222,"line":223},[220,1251,343],{"class":264},[220,1253,347],{"class":420},[220,1255,423],{"class":226},[220,1257,353],{"class":260},[220,1259,356],{"class":230},[220,1261,359],{"class":264},[220,1263,1264,1266],{"class":222,"line":179},[220,1265,364],{"class":264},[220,1267,1189],{"class":420},[220,1269,1270,1272,1274],{"class":222,"line":389},[220,1271,1194],{"class":226},[220,1273,353],{"class":260},[220,1275,1199],{"class":230},[220,1277,1278,1280,1282],{"class":222,"line":399},[220,1279,1204],{"class":226},[220,1281,353],{"class":260},[220,1283,1209],{"class":230},[220,1285,1286,1289,1291,1293,1296],{"class":222,"line":644},[220,1287,1288],{"class":226}," angle",[220,1290,353],{"class":260},[220,1292,743],{"class":264},[220,1294,1295],{"class":420},"45",[220,1297,749],{"class":264},[220,1299,1300,1303,1305],{"class":222,"line":650},[220,1301,1302],{"class":226}," colorSpace",[220,1304,353],{"class":260},[220,1306,1229],{"class":230},[220,1308,1309],{"class":222,"line":656},[220,1310,1234],{"class":264},[220,1312,1313,1315,1317],{"class":222,"line":673},[220,1314,402],{"class":264},[220,1316,347],{"class":420},[220,1318,359],{"class":264},[212,1320,1322],{"className":468,"code":1321,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1323,1324,1338,1344,1352,1360,1372,1380,1384],{"__ignoreMap":178},[220,1325,1326,1328,1330,1332,1334,1336],{"class":222,"line":223},[220,1327,343],{"class":264},[220,1329,347],{"class":420},[220,1331,350],{"class":226},[220,1333,353],{"class":260},[220,1335,356],{"class":230},[220,1337,359],{"class":264},[220,1339,1340,1342],{"class":222,"line":179},[220,1341,364],{"class":264},[220,1343,1189],{"class":420},[220,1345,1346,1348,1350],{"class":222,"line":389},[220,1347,1194],{"class":226},[220,1349,353],{"class":260},[220,1351,1199],{"class":230},[220,1353,1354,1356,1358],{"class":222,"line":399},[220,1355,1204],{"class":226},[220,1357,353],{"class":260},[220,1359,1209],{"class":230},[220,1361,1362,1364,1366,1368,1370],{"class":222,"line":644},[220,1363,1288],{"class":226},[220,1365,353],{"class":260},[220,1367,743],{"class":264},[220,1369,1295],{"class":420},[220,1371,749],{"class":264},[220,1373,1374,1376,1378],{"class":222,"line":650},[220,1375,1302],{"class":226},[220,1377,353],{"class":260},[220,1379,1229],{"class":230},[220,1381,1382],{"class":222,"line":656},[220,1383,1234],{"class":264},[220,1385,1386,1388,1390],{"class":222,"line":673},[220,1387,402],{"class":264},[220,1389,347],{"class":420},[220,1391,359],{"class":264},[212,1393,1394],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,1395,1396,1410,1416,1424,1432,1444,1452,1456],{"__ignoreMap":178},[220,1397,1398,1400,1402,1404,1406,1408],{"class":222,"line":223},[220,1399,343],{"class":264},[220,1401,347],{"class":420},[220,1403,350],{"class":226},[220,1405,353],{"class":260},[220,1407,356],{"class":230},[220,1409,359],{"class":264},[220,1411,1412,1414],{"class":222,"line":179},[220,1413,364],{"class":264},[220,1415,1189],{"class":420},[220,1417,1418,1420,1422],{"class":222,"line":389},[220,1419,1194],{"class":226},[220,1421,353],{"class":260},[220,1423,1199],{"class":230},[220,1425,1426,1428,1430],{"class":222,"line":399},[220,1427,1204],{"class":226},[220,1429,353],{"class":260},[220,1431,1209],{"class":230},[220,1433,1434,1436,1438,1440,1442],{"class":222,"line":644},[220,1435,1288],{"class":226},[220,1437,353],{"class":260},[220,1439,743],{"class":264},[220,1441,1295],{"class":420},[220,1443,749],{"class":264},[220,1445,1446,1448,1450],{"class":222,"line":650},[220,1447,1302],{"class":226},[220,1449,353],{"class":260},[220,1451,1229],{"class":230},[220,1453,1454],{"class":222,"line":656},[220,1455,1234],{"class":264},[220,1457,1458,1460,1462],{"class":222,"line":673},[220,1459,402],{"class":264},[220,1461,347],{"class":420},[220,1463,359],{"class":264},[23,1465,1467],{"id":1466},"using-with-ssr-frameworks","Using with SSR frameworks",[15,1469,1470],{},"Shaders uses WebGPU, which requires a browser environment. If you're using Nuxt, Next.js, SvelteKit, or SolidStart, see the framework-specific SSR guide for your setup.",[23,1472,1474],{"id":1473},"next-steps","Next steps",[34,1476,1477,1484,1491,1498],{},[37,1478,1479,1483],{},[56,1480,1482],{"href":1481},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing Effects"," — stack and nest components for complex results",[37,1485,1486,1490],{},[56,1487,1489],{"href":1488},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout & Positioning"," — position the canvas in your UI",[37,1492,1493,1497],{},[56,1494,1496],{"href":1495},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props & Reactivity"," — bind state and animate props",[37,1499,1500,1502],{},[56,1501,1160],{"href":1159}," — browse all available shaders",[1504,1505,1506],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":1508},[1509,1510,1511,1512,1513,1514,1515],{"id":209,"depth":179,"text":210},{"id":240,"depth":179,"text":241},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":1466,"depth":179,"text":1467},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect",[1518],"js","rocket",{},"\u002Fdocs\u002Fguide\u002Fquickstart",{"title":201,"description":1516},"docs\u002Fguide\u002F1.quickstart","Qy5aUJ4DcUgHPKGddDTVC0xlY3cmFxYRJk7xfpnPymY",{"id":1526,"title":1527,"body":1528,"category":2240,"description":2241,"exclude":190,"extension":191,"forceFramework":190,"icon":2242,"meta":2243,"navigation":194,"path":2244,"seo":2245,"stem":2246,"__hash__":2247},"guide\u002Fdocs\u002Fguide\u002F10.color-space.md","Color Space",{"type":8,"value":1529,"toc":2236},[1530,1533,1537,1544,1555,1793,1833,1837,1851,1872,1889,1912,1916,1919,1929,1939,2125,2220,2233],[11,1531,1527],{"id":1532},"color-space",[19,1534],{":preset":1535,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#ffffff\"}},{\"type\":\"Repeater\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"count\":64,\"hueShift\":10,\"instanceRotation\":-92,\"instanceScale\":1.015,\"jitterScale\":{\"axis\":\"x\",\"type\":\"mouse\",\"momentum\":0.3,\"outputMin\":0,\"outputMax\":0.655,\"smoothing\":0.45},\"mode\":\"linear\",\"spacing\":0},\"children\":[{\"type\":\"Beam\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"endPosition\":{\"x\":0.82,\"y\":0.9},\"endSoftness\":20,\"endThickness\":0.1,\"insideColor\":\"#7a8ff5\",\"startPosition\":{\"x\":0.68,\"y\":0.37},\"startSoftness\":0.3,\"startThickness\":0.1}}]},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"color\":\"#000000\",\"fontFamily\":\"Geist\",\"fontSize\":0.050833333333333335,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"colors\",\"visible\":true}}]}","aces",[15,1538,1539,1540,1543],{},"By default, Shaders uses ",[159,1541,1542],{},"Display P3 linear"," color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.",[15,1545,1546,1547,1550,1551,1554],{},"To match your design tool exactly, set ",[99,1548,1549],{},"colorSpace"," to ",[99,1552,1553],{},"'srgb'",":",[246,1556,1558,1604,1646,1686,1726],{":tabs":1557},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[212,1559,1561],{"className":334,"code":1560,"language":336,"meta":178,"style":178},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1562,1563,1579,1596],{"__ignoreMap":178},[220,1564,1565,1567,1569,1572,1574,1577],{"class":222,"line":223},[220,1566,343],{"class":264},[220,1568,347],{"class":346},[220,1570,1571],{"class":226}," color-space",[220,1573,353],{"class":264},[220,1575,1576],{"class":230},"\"srgb\"",[220,1578,359],{"class":264},[220,1580,1581,1583,1586,1589,1591,1594],{"class":222,"line":179},[220,1582,364],{"class":264},[220,1584,1585],{"class":346},"SolidColor",[220,1587,1588],{"class":226}," color",[220,1590,353],{"class":264},[220,1592,1593],{"class":230},"\"#5b18ca\"",[220,1595,386],{"class":264},[220,1597,1598,1600,1602],{"class":222,"line":389},[220,1599,402],{"class":264},[220,1601,347],{"class":346},[220,1603,359],{"class":264},[212,1605,1607],{"className":409,"code":1606,"language":411,"meta":178,"style":178},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1608,1609,1624,1638],{"__ignoreMap":178},[220,1610,1611,1613,1615,1618,1620,1622],{"class":222,"line":223},[220,1612,343],{"class":264},[220,1614,347],{"class":420},[220,1616,1617],{"class":226}," colorSpace",[220,1619,353],{"class":260},[220,1621,1576],{"class":230},[220,1623,359],{"class":264},[220,1625,1626,1628,1630,1632,1634,1636],{"class":222,"line":179},[220,1627,364],{"class":264},[220,1629,1585],{"class":420},[220,1631,1588],{"class":226},[220,1633,353],{"class":260},[220,1635,1593],{"class":230},[220,1637,386],{"class":264},[220,1639,1640,1642,1644],{"class":222,"line":389},[220,1641,402],{"class":264},[220,1643,347],{"class":420},[220,1645,359],{"class":264},[212,1647,1648],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1649,1650,1664,1678],{"__ignoreMap":178},[220,1651,1652,1654,1656,1658,1660,1662],{"class":222,"line":223},[220,1653,343],{"class":264},[220,1655,347],{"class":420},[220,1657,1617],{"class":226},[220,1659,353],{"class":260},[220,1661,1576],{"class":230},[220,1663,359],{"class":264},[220,1665,1666,1668,1670,1672,1674,1676],{"class":222,"line":179},[220,1667,364],{"class":264},[220,1669,1585],{"class":420},[220,1671,1588],{"class":226},[220,1673,353],{"class":260},[220,1675,1593],{"class":230},[220,1677,386],{"class":264},[220,1679,1680,1682,1684],{"class":222,"line":389},[220,1681,402],{"class":264},[220,1683,347],{"class":420},[220,1685,359],{"class":264},[212,1687,1688],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1689,1690,1704,1718],{"__ignoreMap":178},[220,1691,1692,1694,1696,1698,1700,1702],{"class":222,"line":223},[220,1693,343],{"class":264},[220,1695,347],{"class":420},[220,1697,1617],{"class":226},[220,1699,353],{"class":260},[220,1701,1576],{"class":230},[220,1703,359],{"class":264},[220,1705,1706,1708,1710,1712,1714,1716],{"class":222,"line":179},[220,1707,364],{"class":264},[220,1709,1585],{"class":420},[220,1711,1588],{"class":226},[220,1713,353],{"class":260},[220,1715,1593],{"class":230},[220,1717,386],{"class":264},[220,1719,1720,1722,1724],{"class":222,"line":389},[220,1721,402],{"class":264},[220,1723,347],{"class":420},[220,1725,359],{"class":264},[212,1727,1729],{"className":251,"code":1728,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,1730,1731,1751,1761,1766,1783,1788],{"__ignoreMap":178},[220,1732,1733,1736,1739,1742,1745,1748],{"class":222,"line":223},[220,1734,1735],{"class":260},"const",[220,1737,1738],{"class":420}," shader",[220,1740,1741],{"class":260}," =",[220,1743,1744],{"class":260}," await",[220,1746,1747],{"class":226}," createShader",[220,1749,1750],{"class":264},"(canvas, {\n",[220,1752,1753,1756,1758],{"class":222,"line":179},[220,1754,1755],{"class":264}," colorSpace: ",[220,1757,1553],{"class":230},[220,1759,1760],{"class":264},",\n",[220,1762,1763],{"class":222,"line":389},[220,1764,1765],{"class":264}," components: [\n",[220,1767,1768,1771,1774,1777,1780],{"class":222,"line":399},[220,1769,1770],{"class":264}," { type: ",[220,1772,1773],{"class":230},"'SolidColor'",[220,1775,1776],{"class":264},", props: { color: ",[220,1778,1779],{"class":230},"'#5b18ca'",[220,1781,1782],{"class":264}," } }\n",[220,1784,1785],{"class":222,"line":644},[220,1786,1787],{"class":264}," ]\n",[220,1789,1790],{"class":222,"line":650},[220,1791,1792],{"class":264},"})\n",[1794,1795,1796,1809],"table",{},[1797,1798,1799],"thead",{},[1800,1801,1802,1806],"tr",{},[1803,1804,1805],"th",{},"Value",[1803,1807,1808],{},"Description",[1810,1811,1812,1823],"tbody",{},[1800,1813,1814,1820],{},[1815,1816,1817],"td",{},[99,1818,1819],{},"p3-linear",[1815,1821,1822],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1800,1824,1825,1830],{},[1815,1826,1827],{},[99,1828,1829],{},"srgb",[1815,1831,1832],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1834,1836],{"id":1835},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1838,1839,1840,1842,1843,1845,1846,1850],{},"The ",[99,1841,1549],{}," prop on ",[99,1844,101],{}," controls the ",[1847,1848,1849],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1852,1853,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871],{},"Several gradient and color components also have their own ",[99,1855,1549],{}," prop that controls how colors ",[1847,1858,1859],{},"interpolate between stops"," (for example, between ",[99,1862,1863],{},"colorA"," and ",[99,1866,1867],{},"colorB"," in a ",[99,1870,367],{},"). These are two separate concepts:",[34,1873,1874,1883],{},[37,1875,1876,1879,1880,1882],{},[159,1877,1878],{},"Output color space"," — set on the root ",[99,1881,101],{},", affects the entire canvas output",[37,1884,1885,1888],{},[159,1886,1887],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1890,1891,1892,1895,1896,1895,1899,1895,1902,1895,1905,1895,1908,1911],{},"Available interpolation modes (where supported): ",[99,1893,1894],{},"linear",", ",[99,1897,1898],{},"oklch",[99,1900,1901],{},"oklab",[99,1903,1904],{},"hsl",[99,1906,1907],{},"hsv",[99,1909,1910],{},"lch",". See individual component docs for options.",[23,1913,1915],{"id":1914},"tone-mapping","Tone mapping",[19,1917],{":preset":1918,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#16171a\"}},{\"type\":\"Prism\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"beamColor\":\"#f0f0f0\",\"beamWidth\":0.002,\"endFalloff\":1.4,\"intensity\":2.45,\"position\":{\"x\":0,\"y\":0.5},\"saturation\":0.96,\"softness\":0.2,\"speed\":0.13,\"splitPosition\":{\"x\":0.33,\"y\":0.5},\"spread\":0.93,\"startFalloff\":0}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"blur\":20,\"center\":{\"x\":0.4,\"y\":0.5},\"edgeSoftness\":0.8,\"fresnel\":0,\"fresnelSoftness\":0.6,\"highlight\":0,\"highlightSoftness\":0.1,\"innerZoom\":0.5,\"lightAngle\":172,\"refraction\":0.41,\"scale\":0.5571594449767269,\"shape\":{\"depth\":0.425,\"bevel\":0.03,\"rotX\":0,\"rotY\":-80,\"rotZ\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"type\":\"svg\",\"svgUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FvIlF2DpaDiin.svg\",\"geometry\":\"extrude\"},\"shapeSdfUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FDODKZwnr2rPw_sdf.bin\",\"shapeType\":\"svgExtrude3D\",\"thickness\":1}},{\"type\":\"Text\",\"props\":{\"blendMode\":\"difference\",\"center\":{\"x\":0.73,\"y\":0.5},\"fontFamily\":\"Geist\",\"letterSpacing\":-0.045,\"text\":\"tone mapping\"}},{\"type\":\"Halftone\",\"props\":{\"blackAngle\":131,\"cyanAngle\":241,\"frequency\":183,\"magentaAngle\":165,\"misprint\":0.004,\"opacity\":0.05,\"style\":\"cmyk\",\"yellowAngle\":76}}]}",[15,1920,1921,1922,1925,1926,1928],{},"When you layer additive blend modes like ",[99,1923,1924],{},"linearDodge"," or build up bright glows, color channels can exceed 1.0 (HDR values). In the default ",[99,1927,1894],{}," mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.",[15,1930,1931,1932,1935,1936,1938],{},"Set ",[99,1933,1934],{},"toneMapping"," on the root ",[99,1937,101],{}," component:",[246,1940,1941,1975,2013,2047,2081],{":tabs":1557},[212,1942,1944],{"className":334,"code":1943,"language":336,"meta":178,"style":178},"\u003CShader tone-mapping=\"aces\">\n \u003C!-- your components -->\n\u003C\u002FShader>\n",[99,1945,1946,1962,1967],{"__ignoreMap":178},[220,1947,1948,1950,1952,1955,1957,1960],{"class":222,"line":223},[220,1949,343],{"class":264},[220,1951,347],{"class":346},[220,1953,1954],{"class":226}," tone-mapping",[220,1956,353],{"class":264},[220,1958,1959],{"class":230},"\"aces\"",[220,1961,359],{"class":264},[220,1963,1964],{"class":222,"line":179},[220,1965,1966],{"class":609}," \u003C!-- your components -->\n",[220,1968,1969,1971,1973],{"class":222,"line":389},[220,1970,402],{"class":264},[220,1972,347],{"class":346},[220,1974,359],{"class":264},[212,1976,1978],{"className":409,"code":1977,"language":411,"meta":178,"style":178},"\u003CShader toneMapping=\"aces\">\n {\u002F* your components *\u002F}\n\u003C\u002FShader>\n",[99,1979,1980,1995,2005],{"__ignoreMap":178},[220,1981,1982,1984,1986,1989,1991,1993],{"class":222,"line":223},[220,1983,343],{"class":264},[220,1985,347],{"class":420},[220,1987,1988],{"class":226}," toneMapping",[220,1990,353],{"class":260},[220,1992,1959],{"class":230},[220,1994,359],{"class":264},[220,1996,1997,2000,2003],{"class":222,"line":179},[220,1998,1999],{"class":264}," {",[220,2001,2002],{"class":609},"\u002F* your components *\u002F",[220,2004,749],{"class":264},[220,2006,2007,2009,2011],{"class":222,"line":389},[220,2008,402],{"class":264},[220,2010,347],{"class":420},[220,2012,359],{"class":264},[212,2014,2015],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2016,2017,2031,2039],{"__ignoreMap":178},[220,2018,2019,2021,2023,2025,2027,2029],{"class":222,"line":223},[220,2020,343],{"class":264},[220,2022,347],{"class":420},[220,2024,1988],{"class":226},[220,2026,353],{"class":260},[220,2028,1959],{"class":230},[220,2030,359],{"class":264},[220,2032,2033,2035,2037],{"class":222,"line":179},[220,2034,1999],{"class":264},[220,2036,2002],{"class":609},[220,2038,749],{"class":264},[220,2040,2041,2043,2045],{"class":222,"line":389},[220,2042,402],{"class":264},[220,2044,347],{"class":420},[220,2046,359],{"class":264},[212,2048,2049],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2050,2051,2065,2073],{"__ignoreMap":178},[220,2052,2053,2055,2057,2059,2061,2063],{"class":222,"line":223},[220,2054,343],{"class":264},[220,2056,347],{"class":420},[220,2058,1988],{"class":226},[220,2060,353],{"class":260},[220,2062,1959],{"class":230},[220,2064,359],{"class":264},[220,2066,2067,2069,2071],{"class":222,"line":179},[220,2068,1999],{"class":264},[220,2070,2002],{"class":609},[220,2072,749],{"class":264},[220,2074,2075,2077,2079],{"class":222,"line":389},[220,2076,402],{"class":264},[220,2078,347],{"class":420},[220,2080,359],{"class":264},[212,2082,2084],{"className":251,"code":2083,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n toneMapping: 'aces',\n components: [\u002F* ... *\u002F]\n})\n",[99,2085,2086,2100,2110,2121],{"__ignoreMap":178},[220,2087,2088,2090,2092,2094,2096,2098],{"class":222,"line":223},[220,2089,1735],{"class":260},[220,2091,1738],{"class":420},[220,2093,1741],{"class":260},[220,2095,1744],{"class":260},[220,2097,1747],{"class":226},[220,2099,1750],{"class":264},[220,2101,2102,2105,2108],{"class":222,"line":179},[220,2103,2104],{"class":264}," toneMapping: ",[220,2106,2107],{"class":230},"'aces'",[220,2109,1760],{"class":264},[220,2111,2112,2115,2118],{"class":222,"line":389},[220,2113,2114],{"class":264}," components: [",[220,2116,2117],{"class":609},"\u002F* ... *\u002F",[220,2119,2120],{"class":264},"]\n",[220,2122,2123],{"class":222,"line":399},[220,2124,1792],{"class":264},[1794,2126,2127,2136],{},[1797,2128,2129],{},[1800,2130,2131,2133],{},[1803,2132,1805],{},[1803,2134,2135],{},"Character",[1810,2137,2138,2147,2161,2171,2180,2190,2200,2210],{},[1800,2139,2140,2144],{},[1815,2141,2142],{},[99,2143,1894],{},[1815,2145,2146],{},"No compression (default). Values pass through as-is.",[1800,2148,2149,2154],{},[1815,2150,2151],{},[99,2152,2153],{},"reinhard",[1815,2155,2156,2157,2160],{},"Classic ",[99,2158,2159],{},"x \u002F (1 + x)"," curve. Gentle, natural roll-off.",[1800,2162,2163,2168],{},[1815,2164,2165],{},[99,2166,2167],{},"cineon",[1815,2169,2170],{},"Optimized filmic curve. Warm, contrasty highlights.",[1800,2172,2173,2177],{},[1815,2174,2175],{},[99,2176,1536],{},[1815,2178,2179],{},"ACES Filmic. Industry-standard cinematic look — punchy colors, slightly darker overall.",[1800,2181,2182,2187],{},[1815,2183,2184],{},[99,2185,2186],{},"agx",[1815,2188,2189],{},"AgX. Modern operator with the best hue accuracy at high saturation.",[1800,2191,2192,2197],{},[1815,2193,2194],{},[99,2195,2196],{},"neutral",[1815,2198,2199],{},"Khronos Neutral. Accurate, minimal stylization.",[1800,2201,2202,2207],{},[1815,2203,2204],{},[99,2205,2206],{},"hable",[1815,2208,2209],{},"Uncharted 2 \u002F Hable. Warm, smooth whites with a filmic shoulder.",[1800,2211,2212,2217],{},[1815,2213,2214],{},[99,2215,2216],{},"unreal",[1815,2218,2219],{},"Unreal Engine curve. Bright and smooth.",[15,2221,2222,1864,2224,2226,2227,2229,2230,2232],{},[99,2223,1934],{},[99,2225,1549],{}," are independent — they can be combined freely. ",[99,2228,1934],{}," compresses the brightness range of the final image; ",[99,2231,1549],{}," controls the color gamut used for output.",[1504,2234,2235],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":2237},[2238,2239],{"id":1835,"depth":179,"text":1836},{"id":1914,"depth":179,"text":1915},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"\u002Fdocs\u002Fguide\u002Fcolor-space",{"title":1527,"description":2241},"docs\u002Fguide\u002F10.color-space","W8MzsN0s4f5yEfaxEb0_FCLb6CsNfC8O_RAnfSLf-dM",{"id":2249,"title":2250,"body":2251,"category":2240,"description":2479,"exclude":190,"extension":191,"forceFramework":190,"icon":2480,"meta":2481,"navigation":194,"path":2482,"seo":2483,"stem":2484,"__hash__":2485},"guide\u002Fdocs\u002Fguide\u002F11.telemetry.md","Telemetry",{"type":8,"value":2252,"toc":2477},[2253,2256,2259,2270,2273,2474],[11,2254,2250],{"id":2255},"telemetry",[15,2257,2258],{},"Shaders collects anonymous usage data to help improve the library. This includes the domain where the shader is installed and runtime FPS data. No personal information is captured.",[15,2260,2261,2262,2265,2266,2269],{},"Telemetry is ",[159,2263,2264],{},"automatically disabled"," when running on ",[99,2267,2268],{},"localhost"," or in development environments.",[15,2271,2272],{},"To disable it explicitly in production:",[246,2274,2275,2312,2352,2388,2424],{":tabs":1557},[212,2276,2278],{"className":334,"code":2277,"language":336,"meta":178,"style":178},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2279,2280,2296,2304],{"__ignoreMap":178},[220,2281,2282,2284,2286,2289,2291,2294],{"class":222,"line":223},[220,2283,343],{"class":264},[220,2285,347],{"class":346},[220,2287,2288],{"class":226}," :disable-telemetry",[220,2290,353],{"class":264},[220,2292,2293],{"class":230},"\"true\"",[220,2295,359],{"class":264},[220,2297,2298,2300,2302],{"class":222,"line":179},[220,2299,364],{"class":264},[220,2301,367],{"class":346},[220,2303,386],{"class":264},[220,2305,2306,2308,2310],{"class":222,"line":389},[220,2307,402],{"class":264},[220,2309,347],{"class":346},[220,2311,359],{"class":264},[212,2313,2315],{"className":409,"code":2314,"language":411,"meta":178,"style":178},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2316,2317,2336,2344],{"__ignoreMap":178},[220,2318,2319,2321,2323,2326,2328,2330,2333],{"class":222,"line":223},[220,2320,343],{"class":264},[220,2322,347],{"class":420},[220,2324,2325],{"class":226}," disableTelemetry",[220,2327,353],{"class":260},[220,2329,743],{"class":264},[220,2331,2332],{"class":420},"true",[220,2334,2335],{"class":264},"}>\n",[220,2337,2338,2340,2342],{"class":222,"line":179},[220,2339,364],{"class":264},[220,2341,367],{"class":420},[220,2343,386],{"class":264},[220,2345,2346,2348,2350],{"class":222,"line":389},[220,2347,402],{"class":264},[220,2349,347],{"class":420},[220,2351,359],{"class":264},[212,2353,2354],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2355,2356,2372,2380],{"__ignoreMap":178},[220,2357,2358,2360,2362,2364,2366,2368,2370],{"class":222,"line":223},[220,2359,343],{"class":264},[220,2361,347],{"class":420},[220,2363,2325],{"class":226},[220,2365,353],{"class":260},[220,2367,743],{"class":264},[220,2369,2332],{"class":420},[220,2371,2335],{"class":264},[220,2373,2374,2376,2378],{"class":222,"line":179},[220,2375,364],{"class":264},[220,2377,367],{"class":420},[220,2379,386],{"class":264},[220,2381,2382,2384,2386],{"class":222,"line":389},[220,2383,402],{"class":264},[220,2385,347],{"class":420},[220,2387,359],{"class":264},[212,2389,2390],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2391,2392,2408,2416],{"__ignoreMap":178},[220,2393,2394,2396,2398,2400,2402,2404,2406],{"class":222,"line":223},[220,2395,343],{"class":264},[220,2397,347],{"class":420},[220,2399,2325],{"class":226},[220,2401,353],{"class":260},[220,2403,743],{"class":264},[220,2405,2332],{"class":420},[220,2407,2335],{"class":264},[220,2409,2410,2412,2414],{"class":222,"line":179},[220,2411,364],{"class":264},[220,2413,367],{"class":420},[220,2415,386],{"class":264},[220,2417,2418,2420,2422],{"class":222,"line":389},[220,2419,402],{"class":264},[220,2421,347],{"class":420},[220,2423,359],{"class":264},[212,2425,2427],{"className":251,"code":2426,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,2428,2429,2443,2452,2456,2466,2470],{"__ignoreMap":178},[220,2430,2431,2433,2435,2437,2439,2441],{"class":222,"line":223},[220,2432,1735],{"class":260},[220,2434,1738],{"class":420},[220,2436,1741],{"class":260},[220,2438,1744],{"class":260},[220,2440,1747],{"class":226},[220,2442,1750],{"class":264},[220,2444,2445,2448,2450],{"class":222,"line":179},[220,2446,2447],{"class":264}," disableTelemetry: ",[220,2449,2332],{"class":420},[220,2451,1760],{"class":264},[220,2453,2454],{"class":222,"line":389},[220,2455,1765],{"class":264},[220,2457,2458,2460,2463],{"class":222,"line":399},[220,2459,1770],{"class":264},[220,2461,2462],{"class":230},"'LinearGradient'",[220,2464,2465],{"class":264},", props: {} }\n",[220,2467,2468],{"class":222,"line":644},[220,2469,1787],{"class":264},[220,2471,2472],{"class":222,"line":650},[220,2473,1792],{"class":264},[1504,2475,2476],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":2478},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"\u002Fdocs\u002Fguide\u002Ftelemetry",{"title":2250,"description":2479},"docs\u002Fguide\u002F11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2487,"title":2488,"body":2489,"category":2240,"description":4441,"exclude":190,"extension":191,"forceFramework":190,"icon":4442,"meta":4443,"navigation":194,"path":4444,"seo":4445,"stem":4446,"__hash__":4447},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":4430},[2491,2494,2497,2501,2506,3261,3266,3271,3285,3292,3296,3312,3316,3322,3325,3329,3339,4073,4077,4083,4364,4368,4371,4427],[11,2492,2488],{"id":2493},"hooks-events",[15,2495,2496],{},"Shaders provides lifecycle hooks that let you respond to key moments in the rendering pipeline. This is useful for orchestrating UI transitions, hiding loading states, or triggering animations once the shader is ready.",[23,2498,2500],{"id":2499},"onready","onReady",[15,2502,1839,2503,2505],{},[99,2504,2500],{}," hook fires once after the GPU has compiled the shader and the first frame is ready to render. This is the ideal moment to fade in the shader, remove a loading skeleton, or start a dependent animation.",[246,2507,2508,2671,2842,2971,3121],{":tabs":1557},[212,2509,2511],{"className":334,"code":2510,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @ready=\"onShaderReady\" :style=\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst visible = ref(false)\n\nfunction onShaderReady() {\n visible.value = true\n}\n\u003C\u002Fscript>\n",[99,2512,2513,2522,2546,2563,2572,2580,2584,2596,2608,2612,2633,2637,2648,2658,2662],{"__ignoreMap":178},[220,2514,2515,2517,2520],{"class":222,"line":223},[220,2516,343],{"class":264},[220,2518,2519],{"class":346},"template",[220,2521,359],{"class":264},[220,2523,2524,2526,2528,2531,2533,2536,2539,2541,2544],{"class":222,"line":179},[220,2525,364],{"class":264},[220,2527,347],{"class":346},[220,2529,2530],{"class":226}," @ready",[220,2532,353],{"class":264},[220,2534,2535],{"class":230},"\"onShaderReady\"",[220,2537,2538],{"class":226}," :style",[220,2540,353],{"class":264},[220,2542,2543],{"class":230},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[220,2545,359],{"class":264},[220,2547,2548,2551,2554,2556,2558,2561],{"class":222,"line":389},[220,2549,2550],{"class":264}," \u003C",[220,2552,2553],{"class":346},"Circle",[220,2555,1588],{"class":226},[220,2557,353],{"class":264},[220,2559,2560],{"class":230},"\"#ff0088\"",[220,2562,386],{"class":264},[220,2564,2565,2568,2570],{"class":222,"line":399},[220,2566,2567],{"class":264}," \u003C\u002F",[220,2569,347],{"class":346},[220,2571,359],{"class":264},[220,2573,2574,2576,2578],{"class":222,"line":644},[220,2575,402],{"class":264},[220,2577,2519],{"class":346},[220,2579,359],{"class":264},[220,2581,2582],{"class":222,"line":650},[220,2583,647],{"emptyLinePlaceholder":194},[220,2585,2586,2588,2591,2594],{"class":222,"line":656},[220,2587,343],{"class":264},[220,2589,2590],{"class":346},"script",[220,2592,2593],{"class":226}," setup",[220,2595,359],{"class":264},[220,2597,2598,2600,2603,2605],{"class":222,"line":673},[220,2599,261],{"class":260},[220,2601,2602],{"class":264}," { ref } ",[220,2604,268],{"class":260},[220,2606,2607],{"class":230}," 'vue'\n",[220,2609,2610],{"class":222,"line":682},[220,2611,647],{"emptyLinePlaceholder":194},[220,2613,2614,2616,2619,2621,2624,2627,2630],{"class":222,"line":691},[220,2615,1735],{"class":260},[220,2617,2618],{"class":420}," visible",[220,2620,1741],{"class":260},[220,2622,2623],{"class":226}," ref",[220,2625,2626],{"class":264},"(",[220,2628,2629],{"class":420},"false",[220,2631,2632],{"class":264},")\n",[220,2634,2635],{"class":222,"line":696},[220,2636,647],{"emptyLinePlaceholder":194},[220,2638,2639,2642,2645],{"class":222,"line":702},[220,2640,2641],{"class":260},"function",[220,2643,2644],{"class":226}," onShaderReady",[220,2646,2647],{"class":264},"() {\n",[220,2649,2650,2653,2655],{"class":222,"line":718},[220,2651,2652],{"class":264}," visible.value ",[220,2654,353],{"class":260},[220,2656,2657],{"class":420}," true\n",[220,2659,2660],{"class":222,"line":727},[220,2661,749],{"class":264},[220,2663,2665,2667,2669],{"class":222,"line":2664},15,[220,2666,402],{"class":264},[220,2668,2590],{"class":346},[220,2670,359],{"class":264},[212,2672,2674],{"className":409,"code":2673,"language":411,"meta":178,"style":178},"import { useState } from 'react'\n\nfunction App() {\n const [visible, setVisible] = useState(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2675,2676,2688,2692,2701,2731,2735,2743,2750,2773,2804,2809,2824,2833,2838],{"__ignoreMap":178},[220,2677,2678,2680,2683,2685],{"class":222,"line":223},[220,2679,261],{"class":260},[220,2681,2682],{"class":264}," { useState } ",[220,2684,268],{"class":260},[220,2686,2687],{"class":230}," 'react'\n",[220,2689,2690],{"class":222,"line":179},[220,2691,647],{"emptyLinePlaceholder":194},[220,2693,2694,2696,2699],{"class":222,"line":389},[220,2695,2641],{"class":260},[220,2697,2698],{"class":226}," App",[220,2700,2647],{"class":264},[220,2702,2703,2706,2709,2712,2714,2717,2720,2722,2725,2727,2729],{"class":222,"line":399},[220,2704,2705],{"class":260}," const",[220,2707,2708],{"class":264}," [",[220,2710,2711],{"class":420},"visible",[220,2713,1895],{"class":264},[220,2715,2716],{"class":420},"setVisible",[220,2718,2719],{"class":264},"] ",[220,2721,353],{"class":260},[220,2723,2724],{"class":226}," useState",[220,2726,2626],{"class":264},[220,2728,2629],{"class":420},[220,2730,2632],{"class":264},[220,2732,2733],{"class":222,"line":644},[220,2734,647],{"emptyLinePlaceholder":194},[220,2736,2737,2740],{"class":222,"line":650},[220,2738,2739],{"class":260}," return",[220,2741,2742],{"class":264}," (\n",[220,2744,2745,2747],{"class":222,"line":656},[220,2746,2550],{"class":264},[220,2748,2749],{"class":420},"Shader\n",[220,2751,2752,2755,2757,2760,2763,2766,2768,2770],{"class":222,"line":673},[220,2753,2754],{"class":226}," onReady",[220,2756,353],{"class":260},[220,2758,2759],{"class":264},"{() ",[220,2761,2762],{"class":260},"=>",[220,2764,2765],{"class":226}," setVisible",[220,2767,2626],{"class":264},[220,2769,2332],{"class":420},[220,2771,2772],{"class":264},")}\n",[220,2774,2775,2778,2780,2783,2786,2789,2792,2795,2798,2801],{"class":222,"line":682},[220,2776,2777],{"class":226}," style",[220,2779,353],{"class":260},[220,2781,2782],{"class":264},"{{ opacity: visible ",[220,2784,2785],{"class":260},"?",[220,2787,2788],{"class":420}," 1",[220,2790,2791],{"class":260}," :",[220,2793,2794],{"class":420}," 0",[220,2796,2797],{"class":264},", transition: ",[220,2799,2800],{"class":230},"'opacity 0.5s'",[220,2802,2803],{"class":264}," }}\n",[220,2805,2806],{"class":222,"line":691},[220,2807,2808],{"class":264}," >\n",[220,2810,2811,2814,2816,2818,2820,2822],{"class":222,"line":696},[220,2812,2813],{"class":264}," \u003C",[220,2815,2553],{"class":420},[220,2817,1588],{"class":226},[220,2819,353],{"class":260},[220,2821,2560],{"class":230},[220,2823,386],{"class":264},[220,2825,2826,2829,2831],{"class":222,"line":702},[220,2827,2828],{"class":264}," \u003C\u002F",[220,2830,347],{"class":420},[220,2832,359],{"class":264},[220,2834,2835],{"class":222,"line":718},[220,2836,2837],{"class":264}," )\n",[220,2839,2840],{"class":222,"line":727},[220,2841,749],{"class":264},[212,2843,2847],{"className":2844,"code":2845,"language":2846,"meta":178,"style":178},"language-svelte shiki shiki-themes github-dark","\u003Cscript>\n let visible = $state(false)\n\u003C\u002Fscript>\n\n\u003CShader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition=\"opacity 0.5s\">\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n","svelte",[99,2848,2849,2857,2879,2887,2891,2949,2963],{"__ignoreMap":178},[220,2850,2851,2853,2855],{"class":222,"line":223},[220,2852,343],{"class":264},[220,2854,2590],{"class":346},[220,2856,359],{"class":264},[220,2858,2859,2862,2865,2867,2870,2873,2875,2877],{"class":222,"line":179},[220,2860,2861],{"class":260}," let",[220,2863,2864],{"class":264}," visible ",[220,2866,353],{"class":260},[220,2868,2869],{"class":264}," $",[220,2871,2872],{"class":226},"state",[220,2874,2626],{"class":264},[220,2876,2629],{"class":420},[220,2878,2632],{"class":264},[220,2880,2881,2883,2885],{"class":222,"line":389},[220,2882,402],{"class":264},[220,2884,2590],{"class":346},[220,2886,359],{"class":264},[220,2888,2889],{"class":222,"line":399},[220,2890,647],{"emptyLinePlaceholder":194},[220,2892,2893,2895,2897,2900,2903,2905,2907,2909,2912,2915,2917,2919,2922,2925,2927,2929,2931,2933,2935,2937,2939,2942,2944,2947],{"class":222,"line":644},[220,2894,343],{"class":264},[220,2896,347],{"class":420},[220,2898,2899],{"class":226}," onready",[220,2901,2902],{"class":264},"={() ",[220,2904,2762],{"class":260},[220,2906,2864],{"class":264},[220,2908,353],{"class":260},[220,2910,2911],{"class":420}," true",[220,2913,2914],{"class":264},"} ",[220,2916,1504],{"class":226},[220,2918,1554],{"class":264},[220,2920,2921],{"class":420},"opacity",[220,2923,2924],{"class":264},"={visible ",[220,2926,2785],{"class":260},[220,2928,2788],{"class":420},[220,2930,2791],{"class":260},[220,2932,2794],{"class":420},[220,2934,2914],{"class":264},[220,2936,1504],{"class":226},[220,2938,1554],{"class":264},[220,2940,2941],{"class":420},"transition",[220,2943,353],{"class":264},[220,2945,2946],{"class":230},"\"opacity 0.5s\"",[220,2948,359],{"class":264},[220,2950,2951,2953,2955,2957,2959,2961],{"class":222,"line":650},[220,2952,364],{"class":264},[220,2954,2553],{"class":420},[220,2956,1588],{"class":226},[220,2958,353],{"class":264},[220,2960,2560],{"class":230},[220,2962,386],{"class":264},[220,2964,2965,2967,2969],{"class":222,"line":656},[220,2966,402],{"class":264},[220,2968,347],{"class":420},[220,2970,359],{"class":264},[212,2972,2974],{"className":468,"code":2973,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\n\nfunction App() {\n const [visible, setVisible] = createSignal(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible() ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2975,2976,2988,2992,3000,3025,3029,3035,3041,3059,3087,3091,3105,3113,3117],{"__ignoreMap":178},[220,2977,2978,2980,2983,2985],{"class":222,"line":223},[220,2979,261],{"class":260},[220,2981,2982],{"class":264}," { createSignal } ",[220,2984,268],{"class":260},[220,2986,2987],{"class":230}," 'solid-js'\n",[220,2989,2990],{"class":222,"line":179},[220,2991,647],{"emptyLinePlaceholder":194},[220,2993,2994,2996,2998],{"class":222,"line":389},[220,2995,2641],{"class":260},[220,2997,2698],{"class":226},[220,2999,2647],{"class":264},[220,3001,3002,3004,3006,3008,3010,3012,3014,3016,3019,3021,3023],{"class":222,"line":399},[220,3003,2705],{"class":260},[220,3005,2708],{"class":264},[220,3007,2711],{"class":420},[220,3009,1895],{"class":264},[220,3011,2716],{"class":420},[220,3013,2719],{"class":264},[220,3015,353],{"class":260},[220,3017,3018],{"class":226}," createSignal",[220,3020,2626],{"class":264},[220,3022,2629],{"class":420},[220,3024,2632],{"class":264},[220,3026,3027],{"class":222,"line":644},[220,3028,647],{"emptyLinePlaceholder":194},[220,3030,3031,3033],{"class":222,"line":650},[220,3032,2739],{"class":260},[220,3034,2742],{"class":264},[220,3036,3037,3039],{"class":222,"line":656},[220,3038,2550],{"class":264},[220,3040,2749],{"class":420},[220,3042,3043,3045,3047,3049,3051,3053,3055,3057],{"class":222,"line":673},[220,3044,2754],{"class":226},[220,3046,353],{"class":260},[220,3048,2759],{"class":264},[220,3050,2762],{"class":260},[220,3052,2765],{"class":226},[220,3054,2626],{"class":264},[220,3056,2332],{"class":420},[220,3058,2772],{"class":264},[220,3060,3061,3063,3065,3068,3070,3073,3075,3077,3079,3081,3083,3085],{"class":222,"line":682},[220,3062,2777],{"class":226},[220,3064,353],{"class":260},[220,3066,3067],{"class":264},"{{ opacity: ",[220,3069,2711],{"class":226},[220,3071,3072],{"class":264},"() ",[220,3074,2785],{"class":260},[220,3076,2788],{"class":420},[220,3078,2791],{"class":260},[220,3080,2794],{"class":420},[220,3082,2797],{"class":264},[220,3084,2800],{"class":230},[220,3086,2803],{"class":264},[220,3088,3089],{"class":222,"line":691},[220,3090,2808],{"class":264},[220,3092,3093,3095,3097,3099,3101,3103],{"class":222,"line":696},[220,3094,2813],{"class":264},[220,3096,2553],{"class":420},[220,3098,1588],{"class":226},[220,3100,353],{"class":260},[220,3102,2560],{"class":230},[220,3104,386],{"class":264},[220,3106,3107,3109,3111],{"class":222,"line":702},[220,3108,2828],{"class":264},[220,3110,347],{"class":420},[220,3112,359],{"class":264},[220,3114,3115],{"class":222,"line":718},[220,3116,2837],{"class":264},[220,3118,3119],{"class":222,"line":727},[220,3120,749],{"class":264},[212,3122,3125],{"className":3123,"code":3124,"language":1518,"meta":178,"style":178},"language-js shiki shiki-themes github-dark","const canvas = document.getElementById('my-canvas')\n\n\u002F\u002F Start hidden\ncanvas.style.opacity = '0'\ncanvas.style.transition = 'opacity 0.5s'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }\n ]\n}, {\n onReady: () => {\n canvas.style.opacity = '1'\n }\n})\n",[99,3126,3127,3149,3153,3158,3168,3178,3182,3196,3200,3220,3224,3229,3242,3252,3257],{"__ignoreMap":178},[220,3128,3129,3131,3134,3136,3139,3142,3144,3147],{"class":222,"line":223},[220,3130,1735],{"class":260},[220,3132,3133],{"class":420}," canvas",[220,3135,1741],{"class":260},[220,3137,3138],{"class":264}," document.",[220,3140,3141],{"class":226},"getElementById",[220,3143,2626],{"class":264},[220,3145,3146],{"class":230},"'my-canvas'",[220,3148,2632],{"class":264},[220,3150,3151],{"class":222,"line":179},[220,3152,647],{"emptyLinePlaceholder":194},[220,3154,3155],{"class":222,"line":389},[220,3156,3157],{"class":609},"\u002F\u002F Start hidden\n",[220,3159,3160,3163,3165],{"class":222,"line":399},[220,3161,3162],{"class":264},"canvas.style.opacity ",[220,3164,353],{"class":260},[220,3166,3167],{"class":230}," '0'\n",[220,3169,3170,3173,3175],{"class":222,"line":644},[220,3171,3172],{"class":264},"canvas.style.transition ",[220,3174,353],{"class":260},[220,3176,3177],{"class":230}," 'opacity 0.5s'\n",[220,3179,3180],{"class":222,"line":650},[220,3181,647],{"emptyLinePlaceholder":194},[220,3183,3184,3186,3188,3190,3192,3194],{"class":222,"line":656},[220,3185,1735],{"class":260},[220,3187,1738],{"class":420},[220,3189,1741],{"class":260},[220,3191,1744],{"class":260},[220,3193,1747],{"class":226},[220,3195,1750],{"class":264},[220,3197,3198],{"class":222,"line":673},[220,3199,1765],{"class":264},[220,3201,3202,3204,3207,3210,3213,3215,3218],{"class":222,"line":682},[220,3203,1770],{"class":264},[220,3205,3206],{"class":230},"'Circle'",[220,3208,3209],{"class":264},", id: ",[220,3211,3212],{"class":230},"'c1'",[220,3214,1776],{"class":264},[220,3216,3217],{"class":230},"'#ff0088'",[220,3219,1782],{"class":264},[220,3221,3222],{"class":222,"line":691},[220,3223,1787],{"class":264},[220,3225,3226],{"class":222,"line":696},[220,3227,3228],{"class":264},"}, {\n",[220,3230,3231,3234,3237,3239],{"class":222,"line":702},[220,3232,3233],{"class":226}," onReady",[220,3235,3236],{"class":264},": () ",[220,3238,2762],{"class":260},[220,3240,3241],{"class":264}," {\n",[220,3243,3244,3247,3249],{"class":222,"line":718},[220,3245,3246],{"class":264}," canvas.style.opacity ",[220,3248,353],{"class":260},[220,3250,3251],{"class":230}," '1'\n",[220,3253,3254],{"class":222,"line":727},[220,3255,3256],{"class":264}," }\n",[220,3258,3259],{"class":222,"line":2664},[220,3260,1792],{"class":264},[3262,3263,3265],"h3",{"id":3264},"timing","Timing",[15,3267,3268,3270],{},[99,3269,2500],{}," fires after the shader's node tree has been compiled into a GPU pipeline and is actively rendering. This means:",[34,3272,3273,3276,3279,3282],{},[37,3274,3275],{},"The WebGPU renderer is initialized",[37,3277,3278],{},"All child shader components have registered",[37,3280,3281],{},"The composed shader pipeline has been compiled",[37,3283,3284],{},"The first frame is ready to display",[15,3286,3287,3288,3291],{},"The callback fires ",[159,3289,3290],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3262,3293,3295],{"id":3294},"notes","Notes",[34,3297,3298,3303],{},[37,3299,3300,3302],{},[99,3301,2500],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[37,3304,3305,3306,3308,3309,3311],{},"If the ",[99,3307,101],{}," component starts off-screen and initializes lazily when scrolled into view, ",[99,3310,2500],{}," fires after that deferred initialization completes",[23,3313,3315],{"id":3314},"unsupported-browsers","Unsupported browsers",[15,3317,3318,3319,3321],{},"Shaders is WebGPU-only. On a browser or driver that can't provide a working GPU device — an\nolder Safari, Firefox with WebGPU still behind a flag, a blocklisted or exhausted driver — the\ncanvas simply stays transparent. ",[99,3320,2500],{}," never fires, nothing is written to the console, and\nthe rest of your page is completely unaffected.",[15,3323,3324],{},"If you want to render your own fallback instead of empty space, you have two options.",[3262,3326,3328],{"id":3327},"check-before-you-mount","Check before you mount",[15,3330,3331,3334,3335,3338],{},[99,3332,3333],{},"isWebGPUSupported()"," is a synchronous check for whether the browser exposes WebGPU at all.\n",[99,3336,3337],{},"getWebGPUSupport()"," goes further and actually asks for an adapter, so it also catches\nblocklisted drivers — its result is cached for the page.",[246,3340,3341,3529,3698,3818,3991],{":tabs":1557},[212,3342,3344],{"className":334,"code":3343,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader v-if=\"supported\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv v-else class=\"fallback\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fvue'\n\nconst supported = ref(false)\nonMounted(async () => {\n supported.value = (await getWebGPUSupport()).supported\n})\n\u003C\u002Fscript>\n",[99,3345,3346,3354,3370,3384,3392,3415,3423,3427,3437,3448,3459,3463,3480,3497,3516,3520],{"__ignoreMap":178},[220,3347,3348,3350,3352],{"class":222,"line":223},[220,3349,343],{"class":264},[220,3351,2519],{"class":346},[220,3353,359],{"class":264},[220,3355,3356,3358,3360,3363,3365,3368],{"class":222,"line":179},[220,3357,364],{"class":264},[220,3359,347],{"class":346},[220,3361,3362],{"class":226}," v-if",[220,3364,353],{"class":264},[220,3366,3367],{"class":230},"\"supported\"",[220,3369,359],{"class":264},[220,3371,3372,3374,3376,3378,3380,3382],{"class":222,"line":389},[220,3373,2550],{"class":264},[220,3375,2553],{"class":346},[220,3377,1588],{"class":226},[220,3379,353],{"class":264},[220,3381,2560],{"class":230},[220,3383,386],{"class":264},[220,3385,3386,3388,3390],{"class":222,"line":399},[220,3387,2567],{"class":264},[220,3389,347],{"class":346},[220,3391,359],{"class":264},[220,3393,3394,3396,3399,3402,3404,3406,3409,3413],{"class":222,"line":644},[220,3395,364],{"class":264},[220,3397,3398],{"class":346},"div",[220,3400,3401],{"class":226}," v-else",[220,3403,350],{"class":226},[220,3405,353],{"class":264},[220,3407,3408],{"class":230},"\"fallback\"",[220,3410,3412],{"class":3411},"s6RL2"," \u002F",[220,3414,359],{"class":264},[220,3416,3417,3419,3421],{"class":222,"line":650},[220,3418,402],{"class":264},[220,3420,2519],{"class":346},[220,3422,359],{"class":264},[220,3424,3425],{"class":222,"line":656},[220,3426,647],{"emptyLinePlaceholder":194},[220,3428,3429,3431,3433,3435],{"class":222,"line":673},[220,3430,343],{"class":264},[220,3432,2590],{"class":346},[220,3434,2593],{"class":226},[220,3436,359],{"class":264},[220,3438,3439,3441,3444,3446],{"class":222,"line":682},[220,3440,261],{"class":260},[220,3442,3443],{"class":264}," { ref, onMounted } ",[220,3445,268],{"class":260},[220,3447,2607],{"class":230},[220,3449,3450,3452,3455,3457],{"class":222,"line":691},[220,3451,261],{"class":260},[220,3453,3454],{"class":264}," { Shader, Circle, getWebGPUSupport } ",[220,3456,268],{"class":260},[220,3458,271],{"class":230},[220,3460,3461],{"class":222,"line":696},[220,3462,647],{"emptyLinePlaceholder":194},[220,3464,3465,3467,3470,3472,3474,3476,3478],{"class":222,"line":702},[220,3466,1735],{"class":260},[220,3468,3469],{"class":420}," supported",[220,3471,1741],{"class":260},[220,3473,2623],{"class":226},[220,3475,2626],{"class":264},[220,3477,2629],{"class":420},[220,3479,2632],{"class":264},[220,3481,3482,3485,3487,3490,3493,3495],{"class":222,"line":718},[220,3483,3484],{"class":226},"onMounted",[220,3486,2626],{"class":264},[220,3488,3489],{"class":260},"async",[220,3491,3492],{"class":264}," () ",[220,3494,2762],{"class":260},[220,3496,3241],{"class":264},[220,3498,3499,3502,3504,3507,3510,3513],{"class":222,"line":727},[220,3500,3501],{"class":264}," supported.value ",[220,3503,353],{"class":260},[220,3505,3506],{"class":264}," (",[220,3508,3509],{"class":260},"await",[220,3511,3512],{"class":226}," getWebGPUSupport",[220,3514,3515],{"class":264},"()).supported\n",[220,3517,3518],{"class":222,"line":2664},[220,3519,1792],{"class":264},[220,3521,3523,3525,3527],{"class":222,"line":3522},16,[220,3524,402],{"class":264},[220,3526,2590],{"class":346},[220,3528,359],{"class":264},[212,3530,3532],{"className":409,"code":3531,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Freact'\n\nfunction App() {\n const [supported, setSupported] = useState(false)\n useEffect(() => {\n getWebGPUSupport().then(({ supported }) => setSupported(supported))\n }, [])\n\n return supported\n ? \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n : \u003Cdiv className=\"fallback\" \u002F>\n}\n",[99,3533,3534,3545,3555,3559,3567,3593,3605,3633,3638,3642,3649,3677,3694],{"__ignoreMap":178},[220,3535,3536,3538,3541,3543],{"class":222,"line":223},[220,3537,261],{"class":260},[220,3539,3540],{"class":264}," { useState, useEffect } ",[220,3542,268],{"class":260},[220,3544,2687],{"class":230},[220,3546,3547,3549,3551,3553],{"class":222,"line":179},[220,3548,261],{"class":260},[220,3550,3454],{"class":264},[220,3552,268],{"class":260},[220,3554,287],{"class":230},[220,3556,3557],{"class":222,"line":389},[220,3558,647],{"emptyLinePlaceholder":194},[220,3560,3561,3563,3565],{"class":222,"line":399},[220,3562,2641],{"class":260},[220,3564,2698],{"class":226},[220,3566,2647],{"class":264},[220,3568,3569,3571,3573,3576,3578,3581,3583,3585,3587,3589,3591],{"class":222,"line":644},[220,3570,2705],{"class":260},[220,3572,2708],{"class":264},[220,3574,3575],{"class":420},"supported",[220,3577,1895],{"class":264},[220,3579,3580],{"class":420},"setSupported",[220,3582,2719],{"class":264},[220,3584,353],{"class":260},[220,3586,2724],{"class":226},[220,3588,2626],{"class":264},[220,3590,2629],{"class":420},[220,3592,2632],{"class":264},[220,3594,3595,3598,3601,3603],{"class":222,"line":650},[220,3596,3597],{"class":226}," useEffect",[220,3599,3600],{"class":264},"(() ",[220,3602,2762],{"class":260},[220,3604,3241],{"class":264},[220,3606,3607,3610,3613,3616,3619,3622,3625,3627,3630],{"class":222,"line":656},[220,3608,3609],{"class":226}," getWebGPUSupport",[220,3611,3612],{"class":264},"().",[220,3614,3615],{"class":226},"then",[220,3617,3618],{"class":264},"(({ ",[220,3620,3575],{"class":3621},"s9osk",[220,3623,3624],{"class":264}," }) ",[220,3626,2762],{"class":260},[220,3628,3629],{"class":226}," setSupported",[220,3631,3632],{"class":264},"(supported))\n",[220,3634,3635],{"class":222,"line":673},[220,3636,3637],{"class":264}," }, [])\n",[220,3639,3640],{"class":222,"line":682},[220,3641,647],{"emptyLinePlaceholder":194},[220,3643,3644,3646],{"class":222,"line":691},[220,3645,2739],{"class":260},[220,3647,3648],{"class":264}," supported\n",[220,3650,3651,3654,3657,3659,3662,3664,3666,3668,3670,3673,3675],{"class":222,"line":696},[220,3652,3653],{"class":260}," ?",[220,3655,3656],{"class":264}," \u003C",[220,3658,347],{"class":420},[220,3660,3661],{"class":264},">\u003C",[220,3663,2553],{"class":420},[220,3665,1588],{"class":226},[220,3667,353],{"class":260},[220,3669,2560],{"class":230},[220,3671,3672],{"class":264}," \u002F>\u003C\u002F",[220,3674,347],{"class":420},[220,3676,359],{"class":264},[220,3678,3679,3682,3684,3686,3688,3690,3692],{"class":222,"line":702},[220,3680,3681],{"class":260}," :",[220,3683,3656],{"class":264},[220,3685,3398],{"class":346},[220,3687,423],{"class":226},[220,3689,353],{"class":260},[220,3691,3408],{"class":230},[220,3693,386],{"class":264},[220,3695,3696],{"class":222,"line":718},[220,3697,749],{"class":264},[212,3699,3701],{"className":468,"code":3700,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n\n let supported = $state(false)\n getWebGPUSupport().then((info) => { supported = info.supported })\n\u003C\u002Fscript>\n\n{#if supported}\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n{:else}\n \u003Cdiv class=\"fallback\">\u003C\u002Fdiv>\n{\u002Fif}\n",[99,3702,3703,3711,3716,3720,3725,3735,3743,3747,3758,3780,3790,3809],{"__ignoreMap":178},[220,3704,3705,3707,3709],{"class":222,"line":223},[220,3706,343],{"class":264},[220,3708,2590],{"class":346},[220,3710,359],{"class":264},[220,3712,3713],{"class":222,"line":179},[220,3714,3715],{"class":264}," import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n",[220,3717,3718],{"class":222,"line":389},[220,3719,647],{"emptyLinePlaceholder":194},[220,3721,3722],{"class":222,"line":399},[220,3723,3724],{"class":264}," let supported = $state(false)\n",[220,3726,3727,3730,3732],{"class":222,"line":644},[220,3728,3729],{"class":264}," getWebGPUSupport().then((info) => { supported ",[220,3731,353],{"class":260},[220,3733,3734],{"class":264}," info.supported })\n",[220,3736,3737,3739,3741],{"class":222,"line":650},[220,3738,402],{"class":264},[220,3740,2590],{"class":346},[220,3742,359],{"class":264},[220,3744,3745],{"class":222,"line":656},[220,3746,647],{"emptyLinePlaceholder":194},[220,3748,3749,3752,3755],{"class":222,"line":673},[220,3750,3751],{"class":264},"{#",[220,3753,3754],{"class":260},"if",[220,3756,3757],{"class":264}," supported}\n",[220,3759,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":222,"line":682},[220,3761,364],{"class":264},[220,3763,347],{"class":420},[220,3765,3661],{"class":264},[220,3767,2553],{"class":420},[220,3769,1588],{"class":226},[220,3771,353],{"class":260},[220,3773,2560],{"class":230},[220,3775,3672],{"class":264},[220,3777,347],{"class":420},[220,3779,359],{"class":264},[220,3781,3782,3785,3788],{"class":222,"line":691},[220,3783,3784],{"class":264},"{:",[220,3786,3787],{"class":260},"else",[220,3789,749],{"class":264},[220,3791,3792,3794,3796,3798,3800,3802,3805,3807],{"class":222,"line":696},[220,3793,364],{"class":264},[220,3795,3398],{"class":346},[220,3797,350],{"class":226},[220,3799,353],{"class":260},[220,3801,3408],{"class":230},[220,3803,3804],{"class":264},">\u003C\u002F",[220,3806,3398],{"class":346},[220,3808,359],{"class":264},[220,3810,3811,3813,3816],{"class":222,"line":702},[220,3812,743],{"class":264},[220,3814,3815],{"class":260},"\u002Fif",[220,3817,749],{"class":264},[212,3819,3821],{"className":409,"code":3820,"language":411,"meta":178,"style":178},"import { createSignal, onMount, Show } from 'solid-js'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsolid'\n\nfunction App() {\n const [supported, setSupported] = createSignal(false)\n onMount(async () => setSupported((await getWebGPUSupport()).supported))\n\n return (\n \u003CShow when={supported()} fallback={\u003Cdiv class=\"fallback\" \u002F>}>\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n \u003C\u002FShow>\n )\n}\n",[99,3822,3823,3834,3844,3848,3856,3880,3905,3909,3915,3953,3975,3983,3987],{"__ignoreMap":178},[220,3824,3825,3827,3830,3832],{"class":222,"line":223},[220,3826,261],{"class":260},[220,3828,3829],{"class":264}," { createSignal, onMount, Show } ",[220,3831,268],{"class":260},[220,3833,2987],{"class":230},[220,3835,3836,3838,3840,3842],{"class":222,"line":179},[220,3837,261],{"class":260},[220,3839,3454],{"class":264},[220,3841,268],{"class":260},[220,3843,319],{"class":230},[220,3845,3846],{"class":222,"line":389},[220,3847,647],{"emptyLinePlaceholder":194},[220,3849,3850,3852,3854],{"class":222,"line":399},[220,3851,2641],{"class":260},[220,3853,2698],{"class":226},[220,3855,2647],{"class":264},[220,3857,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878],{"class":222,"line":644},[220,3859,2705],{"class":260},[220,3861,2708],{"class":264},[220,3863,3575],{"class":420},[220,3865,1895],{"class":264},[220,3867,3580],{"class":420},[220,3869,2719],{"class":264},[220,3871,353],{"class":260},[220,3873,3018],{"class":226},[220,3875,2626],{"class":264},[220,3877,2629],{"class":420},[220,3879,2632],{"class":264},[220,3881,3882,3885,3887,3889,3891,3893,3895,3898,3900,3902],{"class":222,"line":650},[220,3883,3884],{"class":226}," onMount",[220,3886,2626],{"class":264},[220,3888,3489],{"class":260},[220,3890,3492],{"class":264},[220,3892,2762],{"class":260},[220,3894,3629],{"class":226},[220,3896,3897],{"class":264},"((",[220,3899,3509],{"class":260},[220,3901,3512],{"class":226},[220,3903,3904],{"class":264},"()).supported))\n",[220,3906,3907],{"class":222,"line":656},[220,3908,647],{"emptyLinePlaceholder":194},[220,3910,3911,3913],{"class":222,"line":673},[220,3912,2739],{"class":260},[220,3914,2742],{"class":264},[220,3916,3917,3919,3922,3925,3927,3929,3931,3934,3937,3939,3942,3944,3946,3948,3950],{"class":222,"line":682},[220,3918,2550],{"class":264},[220,3920,3921],{"class":420},"Show",[220,3923,3924],{"class":226}," when",[220,3926,353],{"class":260},[220,3928,743],{"class":264},[220,3930,3575],{"class":226},[220,3932,3933],{"class":264},"()} ",[220,3935,3936],{"class":226},"fallback",[220,3938,353],{"class":260},[220,3940,3941],{"class":264},"{\u003C",[220,3943,3398],{"class":346},[220,3945,350],{"class":226},[220,3947,353],{"class":260},[220,3949,3408],{"class":230},[220,3951,3952],{"class":264}," \u002F>}>\n",[220,3954,3955,3957,3959,3961,3963,3965,3967,3969,3971,3973],{"class":222,"line":691},[220,3956,2813],{"class":264},[220,3958,347],{"class":420},[220,3960,3661],{"class":264},[220,3962,2553],{"class":420},[220,3964,1588],{"class":226},[220,3966,353],{"class":260},[220,3968,2560],{"class":230},[220,3970,3672],{"class":264},[220,3972,347],{"class":420},[220,3974,359],{"class":264},[220,3976,3977,3979,3981],{"class":222,"line":696},[220,3978,2828],{"class":264},[220,3980,3921],{"class":420},[220,3982,359],{"class":264},[220,3984,3985],{"class":222,"line":702},[220,3986,2837],{"class":264},[220,3988,3989],{"class":222,"line":718},[220,3990,749],{"class":264},[212,3992,3994],{"className":3123,"code":3993,"language":1518,"meta":178,"style":178},"import { createShader, getWebGPUSupport } from 'shaders\u002Fjs'\n\nconst { supported } = await getWebGPUSupport()\nif (supported) {\n await createShader(canvas, preset)\n} else {\n canvas.replaceWith(fallbackElement)\n}\n",[99,3995,3996,4008,4012,4033,4040,4050,4058,4069],{"__ignoreMap":178},[220,3997,3998,4000,4003,4005],{"class":222,"line":223},[220,3999,261],{"class":260},[220,4001,4002],{"class":264}," { createShader, getWebGPUSupport } ",[220,4004,268],{"class":260},[220,4006,4007],{"class":230}," 'shaders\u002Fjs'\n",[220,4009,4010],{"class":222,"line":179},[220,4011,647],{"emptyLinePlaceholder":194},[220,4013,4014,4016,4019,4021,4024,4026,4028,4030],{"class":222,"line":389},[220,4015,1735],{"class":260},[220,4017,4018],{"class":264}," { ",[220,4020,3575],{"class":420},[220,4022,4023],{"class":264}," } ",[220,4025,353],{"class":260},[220,4027,1744],{"class":260},[220,4029,3512],{"class":226},[220,4031,4032],{"class":264},"()\n",[220,4034,4035,4037],{"class":222,"line":399},[220,4036,3754],{"class":260},[220,4038,4039],{"class":264}," (supported) {\n",[220,4041,4042,4045,4047],{"class":222,"line":644},[220,4043,4044],{"class":260}," await",[220,4046,1747],{"class":226},[220,4048,4049],{"class":264},"(canvas, preset)\n",[220,4051,4052,4054,4056],{"class":222,"line":650},[220,4053,2914],{"class":264},[220,4055,3787],{"class":260},[220,4057,3241],{"class":264},[220,4059,4060,4063,4066],{"class":222,"line":656},[220,4061,4062],{"class":264}," canvas.",[220,4064,4065],{"class":226},"replaceWith",[220,4067,4068],{"class":264},"(fallbackElement)\n",[220,4070,4071],{"class":222,"line":673},[220,4072,749],{"class":264},[3262,4074,4076],{"id":4075},"react-to-it-after-the-fact","React to it after the fact",[15,4078,1839,4079,4082],{},[99,4080,4081],{},"unavailable"," event fires at most once if the GPU can't be used — either because it was\nnever available, or because it became unusable later (device loss with no recovery, an\nout-of-memory refusal, a driver that can't run the compiled pipeline). By the time it fires the\ncanvas has already been cleared and every GPU resource released.",[246,4084,4085,4144,4203,4254,4303],{":tabs":1557},[212,4086,4088],{"className":334,"code":4087,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @unavailable=\"showFallback = true\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,4089,4090,4098,4114,4128,4136],{"__ignoreMap":178},[220,4091,4092,4094,4096],{"class":222,"line":223},[220,4093,343],{"class":264},[220,4095,2519],{"class":346},[220,4097,359],{"class":264},[220,4099,4100,4102,4104,4107,4109,4112],{"class":222,"line":179},[220,4101,364],{"class":264},[220,4103,347],{"class":346},[220,4105,4106],{"class":226}," @unavailable",[220,4108,353],{"class":264},[220,4110,4111],{"class":230},"\"showFallback = true\"",[220,4113,359],{"class":264},[220,4115,4116,4118,4120,4122,4124,4126],{"class":222,"line":389},[220,4117,2550],{"class":264},[220,4119,2553],{"class":346},[220,4121,1588],{"class":226},[220,4123,353],{"class":264},[220,4125,2560],{"class":230},[220,4127,386],{"class":264},[220,4129,4130,4132,4134],{"class":222,"line":399},[220,4131,2567],{"class":264},[220,4133,347],{"class":346},[220,4135,359],{"class":264},[220,4137,4138,4140,4142],{"class":222,"line":644},[220,4139,402],{"class":264},[220,4141,2519],{"class":346},[220,4143,359],{"class":264},[212,4145,4147],{"className":409,"code":4146,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={(reason) => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4148,4149,4181,4195],{"__ignoreMap":178},[220,4150,4151,4153,4155,4158,4160,4163,4166,4169,4171,4174,4176,4178],{"class":222,"line":223},[220,4152,343],{"class":264},[220,4154,347],{"class":420},[220,4156,4157],{"class":226}," onUnavailable",[220,4159,353],{"class":260},[220,4161,4162],{"class":264},"{(",[220,4164,4165],{"class":3621},"reason",[220,4167,4168],{"class":264},") ",[220,4170,2762],{"class":260},[220,4172,4173],{"class":226}," setShowFallback",[220,4175,2626],{"class":264},[220,4177,2332],{"class":420},[220,4179,4180],{"class":264},")}>\n",[220,4182,4183,4185,4187,4189,4191,4193],{"class":222,"line":179},[220,4184,364],{"class":264},[220,4186,2553],{"class":420},[220,4188,1588],{"class":226},[220,4190,353],{"class":260},[220,4192,2560],{"class":230},[220,4194,386],{"class":264},[220,4196,4197,4199,4201],{"class":222,"line":389},[220,4198,402],{"class":264},[220,4200,347],{"class":420},[220,4202,359],{"class":264},[212,4204,4206],{"className":468,"code":4205,"language":469,"meta":178,"style":178},"\u003CShader onunavailable={() => (showFallback = true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4207,4208,4232,4246],{"__ignoreMap":178},[220,4209,4210,4212,4214,4217,4219,4221,4223,4226,4228,4230],{"class":222,"line":223},[220,4211,343],{"class":264},[220,4213,347],{"class":420},[220,4215,4216],{"class":226}," onunavailable",[220,4218,353],{"class":260},[220,4220,2759],{"class":264},[220,4222,2762],{"class":260},[220,4224,4225],{"class":264}," (showFallback ",[220,4227,353],{"class":260},[220,4229,2911],{"class":420},[220,4231,4180],{"class":264},[220,4233,4234,4236,4238,4240,4242,4244],{"class":222,"line":179},[220,4235,364],{"class":264},[220,4237,2553],{"class":420},[220,4239,1588],{"class":226},[220,4241,353],{"class":260},[220,4243,2560],{"class":230},[220,4245,386],{"class":264},[220,4247,4248,4250,4252],{"class":222,"line":389},[220,4249,402],{"class":264},[220,4251,347],{"class":420},[220,4253,359],{"class":264},[212,4255,4257],{"className":409,"code":4256,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={() => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4258,4259,4281,4295],{"__ignoreMap":178},[220,4260,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279],{"class":222,"line":223},[220,4262,343],{"class":264},[220,4264,347],{"class":420},[220,4266,4157],{"class":226},[220,4268,353],{"class":260},[220,4270,2759],{"class":264},[220,4272,2762],{"class":260},[220,4274,4173],{"class":226},[220,4276,2626],{"class":264},[220,4278,2332],{"class":420},[220,4280,4180],{"class":264},[220,4282,4283,4285,4287,4289,4291,4293],{"class":222,"line":179},[220,4284,364],{"class":264},[220,4286,2553],{"class":420},[220,4288,1588],{"class":226},[220,4290,353],{"class":260},[220,4292,2560],{"class":230},[220,4294,386],{"class":264},[220,4296,4297,4299,4301],{"class":222,"line":389},[220,4298,402],{"class":264},[220,4300,347],{"class":420},[220,4302,359],{"class":264},[212,4304,4306],{"className":3123,"code":4305,"language":1518,"meta":178,"style":178},"await createShader(canvas, preset, {\n onError: (reason) => {\n \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n showFallback(reason)\n }\n})\n",[99,4307,4308,4317,4333,4338,4343,4348,4356,4360],{"__ignoreMap":178},[220,4309,4310,4312,4314],{"class":222,"line":223},[220,4311,3509],{"class":260},[220,4313,1747],{"class":226},[220,4315,4316],{"class":264},"(canvas, preset, {\n",[220,4318,4319,4322,4325,4327,4329,4331],{"class":222,"line":179},[220,4320,4321],{"class":226}," onError",[220,4323,4324],{"class":264},": (",[220,4326,4165],{"class":3621},[220,4328,4168],{"class":264},[220,4330,2762],{"class":260},[220,4332,3241],{"class":264},[220,4334,4335],{"class":222,"line":389},[220,4336,4337],{"class":609}," \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n",[220,4339,4340],{"class":222,"line":399},[220,4341,4342],{"class":609}," \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n",[220,4344,4345],{"class":222,"line":644},[220,4346,4347],{"class":609}," \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n",[220,4349,4350,4353],{"class":222,"line":650},[220,4351,4352],{"class":226}," showFallback",[220,4354,4355],{"class":264},"(reason)\n",[220,4357,4358],{"class":222,"line":656},[220,4359,3256],{"class":264},[220,4361,4362],{"class":222,"line":673},[220,4363,1792],{"class":264},[3262,4365,4367],{"id":4366},"debugging","Debugging",[15,4369,4370],{},"Shaders keeps quiet in production on purpose — an embedded background effect must never fill\na host page's console with errors the visitor can do nothing about. When you need to see what\nthe renderer is actually doing, switch diagnostics on:",[212,4372,4374],{"className":3123,"code":4373,"language":1518,"meta":178,"style":178},"localStorage.setItem('shaders:debug', '1') \u002F\u002F persists for the origin\n\u002F\u002F or, in code:\nimport { setShadersDebug } from 'shaders\u002Fvue'\nsetShadersDebug(true)\n",[99,4375,4376,4400,4405,4416],{"__ignoreMap":178},[220,4377,4378,4381,4384,4386,4389,4391,4394,4397],{"class":222,"line":223},[220,4379,4380],{"class":264},"localStorage.",[220,4382,4383],{"class":226},"setItem",[220,4385,2626],{"class":264},[220,4387,4388],{"class":230},"'shaders:debug'",[220,4390,1895],{"class":264},[220,4392,4393],{"class":230},"'1'",[220,4395,4396],{"class":264},") ",[220,4398,4399],{"class":609},"\u002F\u002F persists for the origin\n",[220,4401,4402],{"class":222,"line":179},[220,4403,4404],{"class":609},"\u002F\u002F or, in code:\n",[220,4406,4407,4409,4412,4414],{"class":222,"line":389},[220,4408,261],{"class":260},[220,4410,4411],{"class":264}," { setShadersDebug } ",[220,4413,268],{"class":260},[220,4415,271],{"class":230},[220,4417,4418,4421,4423,4425],{"class":222,"line":399},[220,4419,4420],{"class":226},"setShadersDebug",[220,4422,2626],{"class":264},[220,4424,2332],{"class":420},[220,4426,2632],{"class":264},[1504,4428,4429],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":4431},[4432,4436],{"id":2499,"depth":179,"text":2500,"children":4433},[4434,4435],{"id":3264,"depth":389,"text":3265},{"id":3294,"depth":389,"text":3295},{"id":3314,"depth":179,"text":3315,"children":4437},[4438,4439,4440],{"id":3327,"depth":389,"text":3328},{"id":4075,"depth":389,"text":4076},{"id":4366,"depth":389,"text":4367},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":4441},"docs\u002Fguide\u002F12.hooks-events","5swX9Xt3mdKh2Ke08B_93ih7fjlcaeZgbTwEfxtu2To",{"id":4449,"title":4450,"body":4451,"category":2240,"description":5505,"exclude":190,"extension":191,"forceFramework":190,"icon":5506,"meta":5507,"navigation":194,"path":58,"seo":5508,"stem":5509,"__hash__":5510},"guide\u002Fdocs\u002Fguide\u002F13.mcp.md","Shaders MCP",{"type":8,"value":4452,"toc":5495},[4453,4456,4459,4471,4475,4478,4482,4485,4501,4508,4511,4515,4518,4523,4526,4531,4794,4796,4800,4807,4816,4818,4822,4825,4837,4840,5245,5249,5252,5258,5264,5270,5276,5279,5318,5369,5412,5452,5456,5459,5462,5465,5469,5471,5475,5481,5484,5492],[11,4454,4450],{"id":4455},"shaders-mcp",[19,4457],{":preset":4458},"{\"components\":[{\"type\":\"ImageTexture\",\"props\":{\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002F0oExGojy9aDN.png\"}},{\"type\":\"Glass\",\"props\":{\"aberration\":0.63,\"center\":{\"type\":\"mouse-position\",\"originX\":0.5,\"originY\":0.5,\"reach\":0.6,\"smoothing\":0.3,\"momentum\":0.45},\"edgeSoftness\":0.15,\"fresnel\":0.25,\"fresnelColor\":\"#96abf2\",\"fresnelSoftness\":0.15,\"innerZoom\":1.5,\"refraction\":1.38,\"shape\":{\"type\":\"circleSDF\",\"radius\":0.5},\"thickness\":1}},{\"type\":\"Sharpness\",\"props\":{\"sharpness\":0.5}}]}",[15,4460,4461,4462,4466,4467,4470],{},"The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. Connecting works on any account, free included. A ",[56,4463,4465],{"href":4464},"\u002Fpricing","Core"," subscription lets your agent ship your own design-editor creations to production; ",[56,4468,4469],{"href":4464},"Pro"," additionally unlocks the full library of curated presets and sections.",[23,4472,4474],{"id":4473},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,4476,4477],{},"Most MCP clients support OAuth — just add the server URL, and you'll be redirected to sign in with your Shaders account. No API key needed.",[3262,4479,4481],{"id":4480},"quick-install-via-cli-recommended","Quick install via CLI (recommended)",[15,4483,4484],{},"One command detects the coding agents on your machine — Cursor, Claude Code, Codex, VS Code, Windsurf, Antigravity, and more — and writes the right MCP config for each:",[212,4486,4488],{"className":214,"code":4487,"language":216,"meta":178,"style":178},"npx shaders@latest install-mcp\n",[99,4489,4490],{"__ignoreMap":178},[220,4491,4492,4495,4498],{"class":222,"line":223},[220,4493,4494],{"class":226},"npx",[220,4496,4497],{"class":230}," shaders@latest",[220,4499,4500],{"class":230}," install-mcp\n",[15,4502,4503,4504,4507],{},"Then open your agent and connect — you'll be prompted to sign in to your Shaders account the first time it connects. Run ",[99,4505,4506],{},"npx shaders@latest install-mcp --help"," for options (specific agents, global vs. project config).",[4509,4510],"hr",{},[3262,4512,4514],{"id":4513},"manual-configuration","Manual configuration",[15,4516,4517],{},"If you'd rather set things up yourself, add the server to your tool directly:",[15,4519,4520],{},[159,4521,4522],{},"Cursor",[4524,4525],"cursor-install-button",{},[15,4527,4528],{},[159,4529,4530],{},"Other tools",[246,4532,4534,4562,4618,4657,4684,4743],{":tabs":4533},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4535,4537],{"className":214,"code":4536,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp\n",[99,4538,4539],{"__ignoreMap":178},[220,4540,4541,4544,4547,4550,4553,4556,4559],{"class":222,"line":223},[220,4542,4543],{"class":226},"claude",[220,4545,4546],{"class":230}," mcp",[220,4548,4549],{"class":230}," add",[220,4551,4552],{"class":420}," --transport",[220,4554,4555],{"class":230}," http",[220,4557,4558],{"class":230}," shaders",[220,4560,4561],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp\n",[212,4563,4567],{"className":4564,"code":4565,"language":4566,"meta":178,"style":178},"language-json shiki shiki-themes github-dark","\u002F\u002F .windsurf\u002Fmcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n","json",[99,4568,4569,4574,4579,4587,4594,4605,4610,4614],{"__ignoreMap":178},[220,4570,4571],{"class":222,"line":223},[220,4572,4573],{"class":609},"\u002F\u002F .windsurf\u002Fmcp_config.json\n",[220,4575,4576],{"class":222,"line":179},[220,4577,4578],{"class":264},"{\n",[220,4580,4581,4584],{"class":222,"line":389},[220,4582,4583],{"class":420}," \"mcpServers\"",[220,4585,4586],{"class":264},": {\n",[220,4588,4589,4592],{"class":222,"line":399},[220,4590,4591],{"class":420}," \"shaders\"",[220,4593,4586],{"class":264},[220,4595,4596,4599,4602],{"class":222,"line":644},[220,4597,4598],{"class":420}," \"serverUrl\"",[220,4600,4601],{"class":264},": ",[220,4603,4604],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[220,4606,4607],{"class":222,"line":650},[220,4608,4609],{"class":264}," }\n",[220,4611,4612],{"class":222,"line":656},[220,4613,3256],{"class":264},[220,4615,4616],{"class":222,"line":673},[220,4617,749],{"class":264},[212,4619,4621],{"className":4564,"code":4620,"language":4566,"meta":178,"style":178},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n}\n",[99,4622,4623,4628,4632,4644,4653],{"__ignoreMap":178},[220,4624,4625],{"class":222,"line":223},[220,4626,4627],{"class":609},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n",[220,4629,4630],{"class":222,"line":179},[220,4631,4578],{"class":264},[220,4633,4634,4637,4639,4642],{"class":222,"line":389},[220,4635,4636],{"class":420}," \"name\"",[220,4638,4601],{"class":264},[220,4640,4641],{"class":230},"\"shaders\"",[220,4643,1760],{"class":264},[220,4645,4646,4649,4651],{"class":222,"line":399},[220,4647,4648],{"class":420}," \"url\"",[220,4650,4601],{"class":264},[220,4652,4604],{"class":230},[220,4654,4655],{"class":222,"line":644},[220,4656,749],{"class":264},[212,4658,4662],{"className":4659,"code":4660,"language":4661,"meta":178,"style":178},"language-toml shiki shiki-themes github-dark","# ~\u002F.codex\u002Fconfig.toml\n[mcp_servers.shaders]\nenabled = true\nurl = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n","toml",[99,4663,4664,4669,4674,4679],{"__ignoreMap":178},[220,4665,4666],{"class":222,"line":223},[220,4667,4668],{},"# ~\u002F.codex\u002Fconfig.toml\n",[220,4670,4671],{"class":222,"line":179},[220,4672,4673],{},"[mcp_servers.shaders]\n",[220,4675,4676],{"class":222,"line":389},[220,4677,4678],{},"enabled = true\n",[220,4680,4681],{"class":222,"line":399},[220,4682,4683],{},"url = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[212,4685,4687],{"className":4564,"code":4686,"language":4566,"meta":178,"style":178},"\u002F\u002F Antigravity MCP settings\n{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4688,4689,4694,4698,4704,4710,4722,4731,4735,4739],{"__ignoreMap":178},[220,4690,4691],{"class":222,"line":223},[220,4692,4693],{"class":609},"\u002F\u002F Antigravity MCP settings\n",[220,4695,4696],{"class":222,"line":179},[220,4697,4578],{"class":264},[220,4699,4700,4702],{"class":222,"line":389},[220,4701,4583],{"class":420},[220,4703,4586],{"class":264},[220,4705,4706,4708],{"class":222,"line":399},[220,4707,4591],{"class":420},[220,4709,4586],{"class":264},[220,4711,4712,4715,4717,4720],{"class":222,"line":644},[220,4713,4714],{"class":420}," \"type\"",[220,4716,4601],{"class":264},[220,4718,4719],{"class":230},"\"http\"",[220,4721,1760],{"class":264},[220,4723,4724,4727,4729],{"class":222,"line":650},[220,4725,4726],{"class":420}," \"url\"",[220,4728,4601],{"class":264},[220,4730,4604],{"class":230},[220,4732,4733],{"class":222,"line":656},[220,4734,4609],{"class":264},[220,4736,4737],{"class":222,"line":673},[220,4738,3256],{"class":264},[220,4740,4741],{"class":222,"line":682},[220,4742,749],{"class":264},[212,4744,4746],{"className":4564,"code":4745,"language":4566,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4747,4748,4752,4758,4764,4774,4782,4786,4790],{"__ignoreMap":178},[220,4749,4750],{"class":222,"line":223},[220,4751,4578],{"class":264},[220,4753,4754,4756],{"class":222,"line":179},[220,4755,4583],{"class":420},[220,4757,4586],{"class":264},[220,4759,4760,4762],{"class":222,"line":389},[220,4761,4591],{"class":420},[220,4763,4586],{"class":264},[220,4765,4766,4768,4770,4772],{"class":222,"line":399},[220,4767,4714],{"class":420},[220,4769,4601],{"class":264},[220,4771,4719],{"class":230},[220,4773,1760],{"class":264},[220,4775,4776,4778,4780],{"class":222,"line":644},[220,4777,4726],{"class":420},[220,4779,4601],{"class":264},[220,4781,4604],{"class":230},[220,4783,4784],{"class":222,"line":650},[220,4785,4609],{"class":264},[220,4787,4788],{"class":222,"line":656},[220,4789,3256],{"class":264},[220,4791,4792],{"class":222,"line":673},[220,4793,749],{"class":264},[4509,4795],{},[23,4797,4799],{"id":4798},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,4801,4802],{},[4803,4804],"img",{"alt":4805,"src":4806},"Bolt connector","\u002Fimages\u002Fdocs\u002Fbolt-connector-active.png",[15,4808,4809,4810,4815],{},"Shaders has an official connector on ",[56,4811,4814],{"href":4812,"rel":4813},"https:\u002F\u002Fbolt.new",[167],"bolt.new"," — just open the \"Connectors\" panel, find Shaders, and log in with your Shaders account. No configuration needed. Once enabled, any request to add or edit a shader will use Shaders MCP.",[4509,4817],{},[23,4819,4821],{"id":4820},"using-an-api-key-instead","Using an API key instead",[15,4823,4824],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[15,4826,4827,4828,4832,4833,4836],{},"The same key works for the ",[56,4829,4831],{"href":4830},"\u002Fdocs\u002Fguide\u002Fregistry","shadcn registry",", which lets you install any preset or section from the command line with ",[99,4834,4835],{},"npx shadcn add",".",[4838,4839],"api-keys",{},[246,4841,4843,4871,4942,5007,5064,5099,5174],{":tabs":4842},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4844,4846],{"className":214,"code":4845,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp --header \"Authorization: Bearer YOUR_API_KEY\"\n",[99,4847,4848],{"__ignoreMap":178},[220,4849,4850,4852,4854,4856,4858,4860,4862,4865,4868],{"class":222,"line":223},[220,4851,4543],{"class":226},[220,4853,4546],{"class":230},[220,4855,4549],{"class":230},[220,4857,4552],{"class":420},[220,4859,4555],{"class":230},[220,4861,4558],{"class":230},[220,4863,4864],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp",[220,4866,4867],{"class":420}," --header",[220,4869,4870],{"class":230}," \"Authorization: Bearer YOUR_API_KEY\"\n",[212,4872,4874],{"className":4564,"code":4873,"language":4566,"meta":178,"style":178},"\u002F\u002F .cursor\u002Fmcp.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,4875,4876,4881,4885,4891,4897,4908,4915,4925,4930,4934,4938],{"__ignoreMap":178},[220,4877,4878],{"class":222,"line":223},[220,4879,4880],{"class":609},"\u002F\u002F .cursor\u002Fmcp.json\n",[220,4882,4883],{"class":222,"line":179},[220,4884,4578],{"class":264},[220,4886,4887,4889],{"class":222,"line":389},[220,4888,4583],{"class":420},[220,4890,4586],{"class":264},[220,4892,4893,4895],{"class":222,"line":399},[220,4894,4591],{"class":420},[220,4896,4586],{"class":264},[220,4898,4899,4901,4903,4906],{"class":222,"line":644},[220,4900,4726],{"class":420},[220,4902,4601],{"class":264},[220,4904,4905],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"",[220,4907,1760],{"class":264},[220,4909,4910,4913],{"class":222,"line":650},[220,4911,4912],{"class":420}," \"headers\"",[220,4914,4586],{"class":264},[220,4916,4917,4920,4922],{"class":222,"line":656},[220,4918,4919],{"class":420}," \"Authorization\"",[220,4921,4601],{"class":264},[220,4923,4924],{"class":230},"\"Bearer YOUR_API_KEY\"\n",[220,4926,4927],{"class":222,"line":673},[220,4928,4929],{"class":264}," }\n",[220,4931,4932],{"class":222,"line":682},[220,4933,4609],{"class":264},[220,4935,4936],{"class":222,"line":691},[220,4937,3256],{"class":264},[220,4939,4940],{"class":222,"line":696},[220,4941,749],{"class":264},[212,4943,4945],{"className":4564,"code":4944,"language":4566,"meta":178,"style":178},"\u002F\u002F .windsurf\u002Fmcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,4946,4947,4951,4955,4961,4967,4977,4983,4991,4995,4999,5003],{"__ignoreMap":178},[220,4948,4949],{"class":222,"line":223},[220,4950,4573],{"class":609},[220,4952,4953],{"class":222,"line":179},[220,4954,4578],{"class":264},[220,4956,4957,4959],{"class":222,"line":389},[220,4958,4583],{"class":420},[220,4960,4586],{"class":264},[220,4962,4963,4965],{"class":222,"line":399},[220,4964,4591],{"class":420},[220,4966,4586],{"class":264},[220,4968,4969,4971,4973,4975],{"class":222,"line":644},[220,4970,4598],{"class":420},[220,4972,4601],{"class":264},[220,4974,4905],{"class":230},[220,4976,1760],{"class":264},[220,4978,4979,4981],{"class":222,"line":650},[220,4980,4912],{"class":420},[220,4982,4586],{"class":264},[220,4984,4985,4987,4989],{"class":222,"line":656},[220,4986,4919],{"class":420},[220,4988,4601],{"class":264},[220,4990,4924],{"class":230},[220,4992,4993],{"class":222,"line":673},[220,4994,4929],{"class":264},[220,4996,4997],{"class":222,"line":682},[220,4998,4609],{"class":264},[220,5000,5001],{"class":222,"line":691},[220,5002,3256],{"class":264},[220,5004,5005],{"class":222,"line":696},[220,5006,749],{"class":264},[212,5008,5010],{"className":4564,"code":5009,"language":4566,"meta":178,"style":178},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n}\n",[99,5011,5012,5016,5020,5030,5040,5047,5056,5060],{"__ignoreMap":178},[220,5013,5014],{"class":222,"line":223},[220,5015,4627],{"class":609},[220,5017,5018],{"class":222,"line":179},[220,5019,4578],{"class":264},[220,5021,5022,5024,5026,5028],{"class":222,"line":389},[220,5023,4636],{"class":420},[220,5025,4601],{"class":264},[220,5027,4641],{"class":230},[220,5029,1760],{"class":264},[220,5031,5032,5034,5036,5038],{"class":222,"line":399},[220,5033,4648],{"class":420},[220,5035,4601],{"class":264},[220,5037,4905],{"class":230},[220,5039,1760],{"class":264},[220,5041,5042,5045],{"class":222,"line":644},[220,5043,5044],{"class":420}," \"headers\"",[220,5046,4586],{"class":264},[220,5048,5049,5052,5054],{"class":222,"line":650},[220,5050,5051],{"class":420}," \"Authorization\"",[220,5053,4601],{"class":264},[220,5055,4924],{"class":230},[220,5057,5058],{"class":222,"line":656},[220,5059,3256],{"class":264},[220,5061,5062],{"class":222,"line":673},[220,5063,749],{"class":264},[212,5065,5067],{"className":4659,"code":5066,"language":4661,"meta":178,"style":178},"# ~\u002F.codex\u002Fconfig.toml\n[mcp_servers.shaders]\nenabled = true\nurl = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n\n[mcp_servers.shaders.http_headers]\nAuthorization = \"Bearer YOUR_API_KEY\"\n",[99,5068,5069,5073,5077,5081,5085,5089,5094],{"__ignoreMap":178},[220,5070,5071],{"class":222,"line":223},[220,5072,4668],{},[220,5074,5075],{"class":222,"line":179},[220,5076,4673],{},[220,5078,5079],{"class":222,"line":389},[220,5080,4678],{},[220,5082,5083],{"class":222,"line":399},[220,5084,4683],{},[220,5086,5087],{"class":222,"line":644},[220,5088,647],{"emptyLinePlaceholder":194},[220,5090,5091],{"class":222,"line":650},[220,5092,5093],{},"[mcp_servers.shaders.http_headers]\n",[220,5095,5096],{"class":222,"line":656},[220,5097,5098],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[212,5100,5102],{"className":4564,"code":5101,"language":4566,"meta":178,"style":178},"\u002F\u002F Antigravity MCP settings\n{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,5103,5104,5108,5112,5118,5124,5134,5144,5150,5158,5162,5166,5170],{"__ignoreMap":178},[220,5105,5106],{"class":222,"line":223},[220,5107,4693],{"class":609},[220,5109,5110],{"class":222,"line":179},[220,5111,4578],{"class":264},[220,5113,5114,5116],{"class":222,"line":389},[220,5115,4583],{"class":420},[220,5117,4586],{"class":264},[220,5119,5120,5122],{"class":222,"line":399},[220,5121,4591],{"class":420},[220,5123,4586],{"class":264},[220,5125,5126,5128,5130,5132],{"class":222,"line":644},[220,5127,4714],{"class":420},[220,5129,4601],{"class":264},[220,5131,4719],{"class":230},[220,5133,1760],{"class":264},[220,5135,5136,5138,5140,5142],{"class":222,"line":650},[220,5137,4726],{"class":420},[220,5139,4601],{"class":264},[220,5141,4905],{"class":230},[220,5143,1760],{"class":264},[220,5145,5146,5148],{"class":222,"line":656},[220,5147,4912],{"class":420},[220,5149,4586],{"class":264},[220,5151,5152,5154,5156],{"class":222,"line":673},[220,5153,4919],{"class":420},[220,5155,4601],{"class":264},[220,5157,4924],{"class":230},[220,5159,5160],{"class":222,"line":682},[220,5161,4929],{"class":264},[220,5163,5164],{"class":222,"line":691},[220,5165,4609],{"class":264},[220,5167,5168],{"class":222,"line":696},[220,5169,3256],{"class":264},[220,5171,5172],{"class":222,"line":702},[220,5173,749],{"class":264},[212,5175,5177],{"className":4564,"code":5176,"language":4566,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,5178,5179,5183,5189,5195,5205,5215,5221,5229,5233,5237,5241],{"__ignoreMap":178},[220,5180,5181],{"class":222,"line":223},[220,5182,4578],{"class":264},[220,5184,5185,5187],{"class":222,"line":179},[220,5186,4583],{"class":420},[220,5188,4586],{"class":264},[220,5190,5191,5193],{"class":222,"line":389},[220,5192,4591],{"class":420},[220,5194,4586],{"class":264},[220,5196,5197,5199,5201,5203],{"class":222,"line":399},[220,5198,4714],{"class":420},[220,5200,4601],{"class":264},[220,5202,4719],{"class":230},[220,5204,1760],{"class":264},[220,5206,5207,5209,5211,5213],{"class":222,"line":644},[220,5208,4726],{"class":420},[220,5210,4601],{"class":264},[220,5212,4905],{"class":230},[220,5214,1760],{"class":264},[220,5216,5217,5219],{"class":222,"line":650},[220,5218,4912],{"class":420},[220,5220,4586],{"class":264},[220,5222,5223,5225,5227],{"class":222,"line":656},[220,5224,4919],{"class":420},[220,5226,4601],{"class":264},[220,5228,4924],{"class":230},[220,5230,5231],{"class":222,"line":673},[220,5232,4929],{"class":264},[220,5234,5235],{"class":222,"line":682},[220,5236,4609],{"class":264},[220,5238,5239],{"class":222,"line":691},[220,5240,3256],{"class":264},[220,5242,5243],{"class":222,"line":696},[220,5244,749],{"class":264},[23,5246,5248],{"id":5247},"start-prompting","Start prompting",[15,5250,5251],{},"Once connected, your agent gains access to the following capabilities:",[15,5253,5254,5257],{},[159,5255,5256],{},"Browse and retrieve your shaders"," — list all effects saved to your Shaders account, then pull ready-to-use component code for any of them in your framework of choice (Vue, React, Svelte, Solid, or vanilla JS). Great for picking up a design you built in the editor and dropping it straight into your codebase.",[15,5259,5260,5263],{},[159,5261,5262],{},"Explore the Pro preset library"," — search and retrieve Pro collections and presets, complete with code exports, thumbnail previews, and additional context. Watch your agent find, install and customize from a high-quality starting point.",[15,5265,5266,5269],{},[159,5267,5268],{},"Modify and connect props to state"," — make changes to your shaders and presets in-code, then wire up props to reactive state in your framework of choice for compelling interactive effects.",[15,5271,5272,5275],{},[159,5273,5274],{},"Generate SDF from your SVG files"," — certain shape effects (like Glass, Emboss, or Neon) require what's called an \"SDF\" (Signed Distance Field) to work. You can just tell your agent to generate one for you from any SVG file in your codebase or from a public URL. It will generate and store the resulting SDF back in your codebase. In most cases, you won't have to worry about this, the agent knows it's needed and will just ask you which SVG you want to use.",[15,5277,5278],{},"Example prompts to get started:",[212,5280,5282],{"className":214,"code":5281,"language":216,"meta":178,"style":178},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[99,5283,5284],{"__ignoreMap":178},[220,5285,5286,5289,5292,5295,5297,5300,5303,5306,5309,5312,5315],{"class":222,"line":223},[220,5287,5288],{"class":226},"Install",[220,5290,5291],{"class":230}," my",[220,5293,5294],{"class":230}," \"Landing Hero\"",[220,5296,1738],{"class":230},[220,5298,5299],{"class":230}," in",[220,5301,5302],{"class":230}," the",[220,5304,5305],{"class":230}," hero",[220,5307,5308],{"class":230}," section",[220,5310,5311],{"class":230}," as",[220,5313,5314],{"class":230}," a",[220,5316,5317],{"class":230}," background.\n",[212,5319,5321],{"className":214,"code":5320,"language":216,"meta":178,"style":178},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[99,5322,5323],{"__ignoreMap":178},[220,5324,5325,5328,5330,5332,5335,5337,5340,5343,5346,5349,5352,5355,5358,5360,5363,5366],{"class":222,"line":223},[220,5326,5327],{"class":226},"Add",[220,5329,5314],{"class":230},[220,5331,1738],{"class":230},[220,5333,5334],{"class":230}," to",[220,5336,5302],{"class":230},[220,5338,5339],{"class":230}," background",[220,5341,5342],{"class":230}," of",[220,5344,5345],{"class":230}," this",[220,5347,5348],{"class":230}," card,",[220,5350,5351],{"class":230}," something",[220,5353,5354],{"class":230}," blue",[220,5356,5357],{"class":230}," with",[220,5359,5314],{"class":230},[220,5361,5362],{"class":230}," subtle",[220,5364,5365],{"class":230}," flowing",[220,5367,5368],{"class":230}," animation.\n",[212,5370,5372],{"className":214,"code":5371,"language":216,"meta":178,"style":178},"Make the circle in this shader get bigger as we scroll past the section.\n",[99,5373,5374],{"__ignoreMap":178},[220,5375,5376,5379,5381,5384,5386,5388,5390,5393,5396,5398,5401,5404,5407,5409],{"class":222,"line":223},[220,5377,5378],{"class":226},"Make",[220,5380,5302],{"class":230},[220,5382,5383],{"class":230}," circle",[220,5385,5299],{"class":230},[220,5387,5345],{"class":230},[220,5389,1738],{"class":230},[220,5391,5392],{"class":230}," get",[220,5394,5395],{"class":230}," bigger",[220,5397,5311],{"class":230},[220,5399,5400],{"class":230}," we",[220,5402,5403],{"class":230}," scroll",[220,5405,5406],{"class":230}," past",[220,5408,5302],{"class":230},[220,5410,5411],{"class":230}," section.\n",[212,5413,5415],{"className":214,"code":5414,"language":216,"meta":178,"style":178},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[99,5416,5417],{"__ignoreMap":178},[220,5418,5419,5421,5423,5426,5428,5430,5433,5436,5439,5442,5445,5447,5449],{"class":222,"line":223},[220,5420,5327],{"class":226},[220,5422,5291],{"class":230},[220,5424,5425],{"class":230}," logo.svg",[220,5427,5311],{"class":230},[220,5429,5314],{"class":230},[220,5431,5432],{"class":230}," liquid",[220,5434,5435],{"class":230}," glass",[220,5437,5438],{"class":230}," effect",[220,5440,5441],{"class":230}," on",[220,5443,5444],{"class":230}," top",[220,5446,5342],{"class":230},[220,5448,5345],{"class":230},[220,5450,5451],{"class":230}," shader.\n",[23,5453,5455],{"id":5454},"pro-knowledge-base","Pro knowledge base",[15,5457,5458],{},"Beyond account access, Shaders Pro MCP includes an exclusive knowledge base of expert notes added into your agent's context — detailed guidance on advanced composition patterns that aren't part of the public documentation. Your agent reads these automatically when relevant, so you get higher-quality implementations out of the box rather than having to work through trial and error.",[15,5460,5461],{},"Certain collections and presets also provide additional contextual information, which makes it easier for your agent to understand how to best implement the specific look of that effect.",[15,5463,5464],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[5466,5467],"pro-callout",{"message":5468},"Make your agent a shader expert...",[4509,5470],{},[11,5472,5474],{"id":5473},"mcp-for-business","MCP for business",[15,5476,5477],{},[4803,5478],{"alt":5479,"src":5480},"Wonder UI","\u002Fimages\u002Fdocs\u002Fwonder-ui.jpg",[15,5482,5483],{},"We work with companies building design tools, AI site builders, visual editors, and code generators. If your product acts as an agent, Shaders MCP can plug in as a creative layer — giving your users access to production-ready WebGPU effects without them ever leaving your platform.",[15,5485,5486,5487,5491],{},"We're open to partnerships and custom integrations. Reach out at ",[56,5488,5490],{"href":5489},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[1504,5493,5494],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":178,"searchDepth":179,"depth":179,"links":5496},[5497,5501,5502,5503,5504],{"id":4473,"depth":179,"text":4474,"children":5498},[5499,5500],{"id":4480,"depth":389,"text":4481},{"id":4513,"depth":389,"text":4514},{"id":4798,"depth":179,"text":4799},{"id":4820,"depth":179,"text":4821},{"id":5247,"depth":179,"text":5248},{"id":5454,"depth":179,"text":5455},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},{"title":4450,"description":5505},"docs\u002Fguide\u002F13.mcp","YHiq9w5VdAqwFQyW_7SckMQ0wGWaoxjmbwuApSqRkq4",{"id":5512,"title":5513,"body":5514,"category":2240,"description":6121,"exclude":190,"extension":191,"forceFramework":190,"icon":6122,"meta":6123,"navigation":194,"path":4830,"seo":6124,"stem":6125,"__hash__":6126},"guide\u002Fdocs\u002Fguide\u002F14.registry.md","shadcn Registry",{"type":8,"value":5515,"toc":6108},[5516,5519,5527,5544,5551,5555,5559,5562,5564,5575,5595,5598,5602,5613,5870,5888,5892,5899,5915,5921,5928,5932,5935,5951,5954,5958,5961,5975,5981,5985,6015,6018,6022,6047,6055,6073,6082,6086,6089,6102,6105],[11,5517,5513],{"id":5518},"shadcn-registry",[15,5520,5521,5522,5526],{},"Every preset and section on Shaders is also a ",[56,5523,4831],{"href":5524,"rel":5525},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fregistry",[167]," item. Point the shadcn CLI at the Shaders registry once, and you can pull any effect into your codebase with a single command:",[212,5528,5530],{"className":214,"code":5529,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Faurora-hero\n",[99,5531,5532],{"__ignoreMap":178},[220,5533,5534,5536,5539,5541],{"class":222,"line":223},[220,5535,4494],{"class":226},[220,5537,5538],{"class":230}," shadcn",[220,5540,4549],{"class":230},[220,5542,5543],{"class":230}," @shaders\u002Faurora-hero\n",[15,5545,5546,5547,5550],{},"The CLI writes real source files into your project — a component for a preset, a full block for a section — with imports from the ",[99,5548,5549],{},"shaders"," package. Nothing is bundled from our servers at runtime, and nothing in the installed code points back at us.",[23,5552,5554],{"id":5553},"setup","Setup",[3262,5556,5558],{"id":5557},"_1-create-an-api-key-and-add-it-to-your-environment","1. Create an API key and add it to your environment",[15,5560,5561],{},"Free items install with no key at all. Paid items need a personal API key belonging to an account that owns them. Any signed-in Shaders account can create keys — you don't need Pro to hold one.",[4838,5563],{},[15,5565,5566,5567,5570,5571,5574],{},"Put the key in ",[99,5568,5569],{},".env.local"," (or wherever your project keeps local secrets — the CLI expands ",[99,5572,5573],{},"${SHADERS_API_KEY}"," from your environment):",[212,5576,5578],{"className":214,"code":5577,"language":216,"meta":178,"style":178},"# .env.local\nSHADERS_API_KEY=sk_live_your_key_here\n",[99,5579,5580,5585],{"__ignoreMap":178},[220,5581,5582],{"class":222,"line":223},[220,5583,5584],{"class":609},"# .env.local\n",[220,5586,5587,5590,5592],{"class":222,"line":179},[220,5588,5589],{"class":264},"SHADERS_API_KEY",[220,5591,353],{"class":260},[220,5593,5594],{"class":230},"sk_live_your_key_here\n",[15,5596,5597],{},"Don't commit the key. It is tied to your account and can be revoked at any time from the same panel that created it.",[3262,5599,5601],{"id":5600},"_2-register-the-namespace","2. Register the namespace",[15,5603,5604,5605,5608,5609,5612],{},"Add a ",[99,5606,5607],{},"@shaders"," registry to your project's ",[99,5610,5611],{},"components.json",", referencing the key you just created. The framework lives in the URL, so pick the segment that matches your stack:",[246,5614,5615,5684,5746,5808],{":tabs":248},[212,5616,5618],{"className":4564,"code":5617,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5619,5620,5625,5629,5636,5643,5654,5672,5676,5680],{"__ignoreMap":178},[220,5621,5622],{"class":222,"line":223},[220,5623,5624],{"class":609},"\u002F\u002F components.json\n",[220,5626,5627],{"class":222,"line":179},[220,5628,4578],{"class":264},[220,5630,5631,5634],{"class":222,"line":389},[220,5632,5633],{"class":420}," \"registries\"",[220,5635,4586],{"class":264},[220,5637,5638,5641],{"class":222,"line":399},[220,5639,5640],{"class":420}," \"@shaders\"",[220,5642,4586],{"class":264},[220,5644,5645,5647,5649,5652],{"class":222,"line":644},[220,5646,4726],{"class":420},[220,5648,4601],{"class":264},[220,5650,5651],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\"",[220,5653,1760],{"class":264},[220,5655,5656,5658,5661,5664,5666,5669],{"class":222,"line":650},[220,5657,4912],{"class":420},[220,5659,5660],{"class":264},": { ",[220,5662,5663],{"class":420},"\"Authorization\"",[220,5665,4601],{"class":264},[220,5667,5668],{"class":230},"\"Bearer ${SHADERS_API_KEY}\"",[220,5670,5671],{"class":264}," }\n",[220,5673,5674],{"class":222,"line":656},[220,5675,4609],{"class":264},[220,5677,5678],{"class":222,"line":673},[220,5679,3256],{"class":264},[220,5681,5682],{"class":222,"line":682},[220,5683,749],{"class":264},[212,5685,5687],{"className":4564,"code":5686,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5688,5689,5693,5697,5703,5709,5720,5734,5738,5742],{"__ignoreMap":178},[220,5690,5691],{"class":222,"line":223},[220,5692,5624],{"class":609},[220,5694,5695],{"class":222,"line":179},[220,5696,4578],{"class":264},[220,5698,5699,5701],{"class":222,"line":389},[220,5700,5633],{"class":420},[220,5702,4586],{"class":264},[220,5704,5705,5707],{"class":222,"line":399},[220,5706,5640],{"class":420},[220,5708,4586],{"class":264},[220,5710,5711,5713,5715,5718],{"class":222,"line":644},[220,5712,4726],{"class":420},[220,5714,4601],{"class":264},[220,5716,5717],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\"",[220,5719,1760],{"class":264},[220,5721,5722,5724,5726,5728,5730,5732],{"class":222,"line":650},[220,5723,4912],{"class":420},[220,5725,5660],{"class":264},[220,5727,5663],{"class":420},[220,5729,4601],{"class":264},[220,5731,5668],{"class":230},[220,5733,5671],{"class":264},[220,5735,5736],{"class":222,"line":656},[220,5737,4609],{"class":264},[220,5739,5740],{"class":222,"line":673},[220,5741,3256],{"class":264},[220,5743,5744],{"class":222,"line":682},[220,5745,749],{"class":264},[212,5747,5749],{"className":4564,"code":5748,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5750,5751,5755,5759,5765,5771,5782,5796,5800,5804],{"__ignoreMap":178},[220,5752,5753],{"class":222,"line":223},[220,5754,5624],{"class":609},[220,5756,5757],{"class":222,"line":179},[220,5758,4578],{"class":264},[220,5760,5761,5763],{"class":222,"line":389},[220,5762,5633],{"class":420},[220,5764,4586],{"class":264},[220,5766,5767,5769],{"class":222,"line":399},[220,5768,5640],{"class":420},[220,5770,4586],{"class":264},[220,5772,5773,5775,5777,5780],{"class":222,"line":644},[220,5774,4726],{"class":420},[220,5776,4601],{"class":264},[220,5778,5779],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\"",[220,5781,1760],{"class":264},[220,5783,5784,5786,5788,5790,5792,5794],{"class":222,"line":650},[220,5785,4912],{"class":420},[220,5787,5660],{"class":264},[220,5789,5663],{"class":420},[220,5791,4601],{"class":264},[220,5793,5668],{"class":230},[220,5795,5671],{"class":264},[220,5797,5798],{"class":222,"line":656},[220,5799,4609],{"class":264},[220,5801,5802],{"class":222,"line":673},[220,5803,3256],{"class":264},[220,5805,5806],{"class":222,"line":682},[220,5807,749],{"class":264},[212,5809,5811],{"className":4564,"code":5810,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5812,5813,5817,5821,5827,5833,5844,5858,5862,5866],{"__ignoreMap":178},[220,5814,5815],{"class":222,"line":223},[220,5816,5624],{"class":609},[220,5818,5819],{"class":222,"line":179},[220,5820,4578],{"class":264},[220,5822,5823,5825],{"class":222,"line":389},[220,5824,5633],{"class":420},[220,5826,4586],{"class":264},[220,5828,5829,5831],{"class":222,"line":399},[220,5830,5640],{"class":420},[220,5832,4586],{"class":264},[220,5834,5835,5837,5839,5842],{"class":222,"line":644},[220,5836,4726],{"class":420},[220,5838,4601],{"class":264},[220,5840,5841],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\"",[220,5843,1760],{"class":264},[220,5845,5846,5848,5850,5852,5854,5856],{"class":222,"line":650},[220,5847,4912],{"class":420},[220,5849,5660],{"class":264},[220,5851,5663],{"class":420},[220,5853,4601],{"class":264},[220,5855,5668],{"class":230},[220,5857,5671],{"class":264},[220,5859,5860],{"class":222,"line":656},[220,5861,4609],{"class":264},[220,5863,5864],{"class":222,"line":673},[220,5865,3256],{"class":264},[220,5867,5868],{"class":222,"line":682},[220,5869,749],{"class":264},[15,5871,5872,5873,5876,5877,5880,5881,1864,5884,5887],{},"Use the official ",[99,5874,5875],{},"shadcn"," CLI — it is a framework-agnostic file writer, and it is the CLI that understands the ",[99,5878,5879],{},"registries"," config block. The ",[99,5882,5883],{},"shadcn-vue",[99,5885,5886],{},"shadcn-svelte"," forks have their own CLIs and do not read this configuration.",[23,5889,5891],{"id":5890},"installing-presets","Installing presets",[15,5893,5894,5895,5898],{},"Preset items are named ",[99,5896,5897],{},"\u003Ccollection-slug>-\u003Cvariant>",", matching the collection slug and the variant number shown on the preset page:",[212,5900,5902],{"className":214,"code":5901,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fliquid-chrome-2\n",[99,5903,5904],{"__ignoreMap":178},[220,5905,5906,5908,5910,5912],{"class":222,"line":223},[220,5907,4494],{"class":226},[220,5909,5538],{"class":230},[220,5911,4549],{"class":230},[220,5913,5914],{"class":230}," @shaders\u002Fliquid-chrome-2\n",[15,5916,5917,5918,5920],{},"You get a single component file that renders that exact preset, with all non-default props inlined and ",[99,5919,5549],{}," added to your dependencies. From there it's ordinary source code — change the props, wire them to state, compose it with other effects.",[15,5922,5923,5924,5927],{},"Every preset page on the site has an ",[159,5925,5926],{},"Install with shadcn"," link that shows you the exact command for that variant.",[23,5929,5931],{"id":5930},"installing-sections","Installing sections",[15,5933,5934],{},"Sections are complete, designed page sections rather than a single effect, so they install as a block — layout, copy, and the shader composition together:",[212,5936,5938],{"className":214,"code":5937,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fprism-pricing\n",[99,5939,5940],{"__ignoreMap":178},[220,5941,5942,5944,5946,5948],{"class":222,"line":223},[220,5943,4494],{"class":226},[220,5945,5538],{"class":230},[220,5947,4549],{"class":230},[220,5949,5950],{"class":230}," @shaders\u002Fprism-pricing\n",[15,5952,5953],{},"Sections are hand-authored in Vue and ported to React, Svelte, and Solid, so the same slug works in all four namespaces.",[3262,5955,5957],{"id":5956},"section-assets-and-follow-up-steps","Section assets and follow-up steps",[15,5959,5960],{},"The shadcn CLI can only transport text, so a section install arrives in two parts:",[34,5962,5963,5969],{},[37,5964,5965,5968],{},[159,5966,5967],{},"Code and SVG logos"," are written directly into your project.",[37,5970,5971,5974],{},[159,5972,5973],{},"Binary assets"," — images, video, and SDF files — are fetched once by a small downloader the item ships with. If you are running the install through a coding agent, it will run this for you; otherwise the CLI prints the command.",[15,5976,5977,5978,5980],{},"After the files land, the CLI prints a requirements checklist for that specific section: which logo to swap in, which demo image or video to replace, and whether a shape effect needs an SDF generated from your own SVG. Generating an SDF is a one-liner for any agent connected to ",[56,5979,4450],{"href":58}," — ask it to generate an SDF from your logo and it will handle the rest.",[23,5982,5984],{"id":5983},"free-vs-paid","Free vs paid",[1794,5986,5987,5997],{},[1797,5988,5989],{},[1800,5990,5991,5994],{},[1803,5992,5993],{},"Item",[1803,5995,5996],{},"What's needed",[1810,5998,5999,6007],{},[1800,6000,6001,6004],{},[1815,6002,6003],{},"Free preset or section",[1815,6005,6006],{},"Nothing — installs without a key",[1800,6008,6009,6012],{},[1815,6010,6011],{},"Paid preset or section",[1815,6013,6014],{},"An API key on an account with Shaders Pro, or a single purchase of that item",[15,6016,6017],{},"Entitlement is checked server-side on every install, so the command itself is public — you can share it, put it in a README, or hand it to an agent. It simply won't complete for an account that doesn't own the item.",[23,6019,6021],{"id":6020},"troubleshooting","Troubleshooting",[15,6023,6024,6029,6030,6032,6033,6036,6037,6040,6041,6043,6044,4836],{},[159,6025,6026],{},[99,6027,6028],{},"401 Unauthorized"," — the registry couldn't read a valid key. Either ",[99,6031,5589],{}," isn't set in the environment the CLI is running in, or the key has been revoked. Check that the variable resolves (",[99,6034,6035],{},"echo $SHADERS_API_KEY",") and that the ",[99,6038,6039],{},"Authorization"," header in ",[99,6042,5611],{}," is spelled ",[99,6045,6046],{},"Bearer ${SHADERS_API_KEY}",[15,6048,6049,6054],{},[159,6050,6051],{},[99,6052,6053],{},"403 Forbidden"," — the key is valid but the account isn't entitled to that item. The response body includes a link to unlock it, either with Pro or as a single purchase. If you just bought it, the entitlement can take a moment to propagate; retry once.",[15,6056,6057,6062,6063,6065,6066,6072],{},[159,6058,6059],{},[99,6060,6061],{},"404 Not Found"," — the item name is wrong. Preset names are ",[99,6064,5897],{}," and section names are the section slug exactly as it appears in the URL on shaders.com. You can list everything available at ",[56,6067,6070],{"href":6068,"rel":6069},"https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json",[167],[99,6071,6068],{},", which is public and needs no key.",[15,6074,6075,6078,6079,6081],{},[159,6076,6077],{},"Installed files are for the wrong framework"," — the framework comes from the URL, not from your project. Check the segment in ",[99,6080,5611],{}," matches your stack.",[23,6083,6085],{"id":6084},"browsing-the-registry","Browsing the registry",[15,6087,6088],{},"The index is public:",[212,6090,6092],{"className":214,"code":6091,"language":216,"meta":178,"style":178},"curl https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[99,6093,6094],{"__ignoreMap":178},[220,6095,6096,6099],{"class":222,"line":223},[220,6097,6098],{"class":226},"curl",[220,6100,6101],{"class":230}," https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[15,6103,6104],{},"Every entry carries a title, description, category, thumbnail, and whether it's free or paid — enough to build your own picker, or to let an agent browse the catalogue before choosing what to install.",[1504,6106,6107],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":178,"searchDepth":179,"depth":179,"links":6109},[6110,6114,6115,6118,6119,6120],{"id":5553,"depth":179,"text":5554,"children":6111},[6112,6113],{"id":5557,"depth":389,"text":5558},{"id":5600,"depth":389,"text":5601},{"id":5890,"depth":179,"text":5891},{"id":5930,"depth":179,"text":5931,"children":6116},[6117],{"id":5956,"depth":389,"text":5957},{"id":5983,"depth":179,"text":5984},{"id":6020,"depth":179,"text":6021},{"id":6084,"depth":179,"text":6085},"Install any Shaders preset or section straight into your project with the shadcn CLI","terminal",{},{"title":5513,"description":6121},"docs\u002Fguide\u002F14.registry","HSE0sG5XJcGlPkMnxnc2zLwpah9usnfvUGE5YdszqFY",{"id":6128,"title":1482,"body":6129,"category":188,"description":7599,"exclude":190,"extension":191,"forceFramework":190,"icon":7600,"meta":7601,"navigation":194,"path":1481,"seo":7602,"stem":7603,"__hash__":7604},"guide\u002Fdocs\u002Fguide\u002F2.composing-effects.md",{"type":8,"value":6130,"toc":7595},[6131,6134,6140,6144,6151,6594,6597,6601,6618,7040,7043,7052,7589,7592],[11,6132,1482],{"id":6133},"composing-effects",[15,6135,6136,6137,6139],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[99,6138,101],{}," component is the root of your effect. Every instance of this renders its own GPU canvas. Visual output is created by stacking child components.",[23,6141,6143],{"id":6142},"stacking-components","Stacking Components",[15,6145,6146,6147,6150],{},"Components are evaluated ",[159,6148,6149],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[246,6152,6153,6236,6332,6422,6512],{":tabs":1557},[212,6154,6156],{"className":334,"code":6155,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- Bottom layer -->\n \u003CLinearGradient \u002F>\n\n \u003C!-- Middle layer -->\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" \u002F>\n\n \u003C!-- Top layer -->\n \u003CGlassTiles \u002F>\n\u003C\u002FShader>\n",[99,6157,6158,6166,6171,6179,6183,6188,6210,6214,6219,6228],{"__ignoreMap":178},[220,6159,6160,6162,6164],{"class":222,"line":223},[220,6161,343],{"class":264},[220,6163,347],{"class":346},[220,6165,359],{"class":264},[220,6167,6168],{"class":222,"line":179},[220,6169,6170],{"class":609}," \u003C!-- Bottom layer -->\n",[220,6172,6173,6175,6177],{"class":222,"line":389},[220,6174,364],{"class":264},[220,6176,367],{"class":346},[220,6178,386],{"class":264},[220,6180,6181],{"class":222,"line":399},[220,6182,647],{"emptyLinePlaceholder":194},[220,6184,6185],{"class":222,"line":644},[220,6186,6187],{"class":609}," \u003C!-- Middle layer -->\n",[220,6189,6190,6192,6194,6196,6198,6200,6203,6205,6208],{"class":222,"line":650},[220,6191,364],{"class":264},[220,6193,2553],{"class":346},[220,6195,1588],{"class":226},[220,6197,353],{"class":264},[220,6199,2560],{"class":230},[220,6201,6202],{"class":226}," radius",[220,6204,353],{"class":264},[220,6206,6207],{"class":230},"\"0.8\"",[220,6209,386],{"class":264},[220,6211,6212],{"class":222,"line":656},[220,6213,647],{"emptyLinePlaceholder":194},[220,6215,6216],{"class":222,"line":673},[220,6217,6218],{"class":609}," \u003C!-- Top layer -->\n",[220,6220,6221,6223,6226],{"class":222,"line":682},[220,6222,364],{"class":264},[220,6224,6225],{"class":346},"GlassTiles",[220,6227,386],{"class":264},[220,6229,6230,6232,6234],{"class":222,"line":691},[220,6231,402],{"class":264},[220,6233,347],{"class":346},[220,6235,359],{"class":264},[212,6237,6239],{"className":409,"code":6238,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* Bottom layer *\u002F}\n \u003CLinearGradient \u002F>\n\n {\u002F* Middle layer *\u002F}\n \u003CCircle color=\"#ff0088\" radius={0.8} \u002F>\n\n {\u002F* Top layer *\u002F}\n \u003CGlassTiles \u002F>\n\u003C\u002FShader>\n",[99,6240,6241,6249,6258,6266,6270,6279,6303,6307,6316,6324],{"__ignoreMap":178},[220,6242,6243,6245,6247],{"class":222,"line":223},[220,6244,343],{"class":264},[220,6246,347],{"class":420},[220,6248,359],{"class":264},[220,6250,6251,6253,6256],{"class":222,"line":179},[220,6252,1999],{"class":264},[220,6254,6255],{"class":609},"\u002F* Bottom layer *\u002F",[220,6257,749],{"class":264},[220,6259,6260,6262,6264],{"class":222,"line":389},[220,6261,364],{"class":264},[220,6263,367],{"class":420},[220,6265,386],{"class":264},[220,6267,6268],{"class":222,"line":399},[220,6269,647],{"emptyLinePlaceholder":194},[220,6271,6272,6274,6277],{"class":222,"line":644},[220,6273,1999],{"class":264},[220,6275,6276],{"class":609},"\u002F* Middle layer *\u002F",[220,6278,749],{"class":264},[220,6280,6281,6283,6285,6287,6289,6291,6293,6295,6297,6300],{"class":222,"line":650},[220,6282,364],{"class":264},[220,6284,2553],{"class":420},[220,6286,1588],{"class":226},[220,6288,353],{"class":260},[220,6290,2560],{"class":230},[220,6292,6202],{"class":226},[220,6294,353],{"class":260},[220,6296,743],{"class":264},[220,6298,6299],{"class":420},"0.8",[220,6301,6302],{"class":264},"} \u002F>\n",[220,6304,6305],{"class":222,"line":656},[220,6306,647],{"emptyLinePlaceholder":194},[220,6308,6309,6311,6314],{"class":222,"line":673},[220,6310,1999],{"class":264},[220,6312,6313],{"class":609},"\u002F* Top layer *\u002F",[220,6315,749],{"class":264},[220,6317,6318,6320,6322],{"class":222,"line":682},[220,6319,364],{"class":264},[220,6321,6225],{"class":420},[220,6323,386],{"class":264},[220,6325,6326,6328,6330],{"class":222,"line":691},[220,6327,402],{"class":264},[220,6329,347],{"class":420},[220,6331,359],{"class":264},[212,6333,6334],{"className":468,"code":6238,"language":469,"meta":178,"style":178},[99,6335,6336,6344,6352,6360,6364,6372,6394,6398,6406,6414],{"__ignoreMap":178},[220,6337,6338,6340,6342],{"class":222,"line":223},[220,6339,343],{"class":264},[220,6341,347],{"class":420},[220,6343,359],{"class":264},[220,6345,6346,6348,6350],{"class":222,"line":179},[220,6347,1999],{"class":264},[220,6349,6255],{"class":609},[220,6351,749],{"class":264},[220,6353,6354,6356,6358],{"class":222,"line":389},[220,6355,364],{"class":264},[220,6357,367],{"class":420},[220,6359,386],{"class":264},[220,6361,6362],{"class":222,"line":399},[220,6363,647],{"emptyLinePlaceholder":194},[220,6365,6366,6368,6370],{"class":222,"line":644},[220,6367,1999],{"class":264},[220,6369,6276],{"class":609},[220,6371,749],{"class":264},[220,6373,6374,6376,6378,6380,6382,6384,6386,6388,6390,6392],{"class":222,"line":650},[220,6375,364],{"class":264},[220,6377,2553],{"class":420},[220,6379,1588],{"class":226},[220,6381,353],{"class":260},[220,6383,2560],{"class":230},[220,6385,6202],{"class":226},[220,6387,353],{"class":260},[220,6389,743],{"class":264},[220,6391,6299],{"class":420},[220,6393,6302],{"class":264},[220,6395,6396],{"class":222,"line":656},[220,6397,647],{"emptyLinePlaceholder":194},[220,6399,6400,6402,6404],{"class":222,"line":673},[220,6401,1999],{"class":264},[220,6403,6313],{"class":609},[220,6405,749],{"class":264},[220,6407,6408,6410,6412],{"class":222,"line":682},[220,6409,364],{"class":264},[220,6411,6225],{"class":420},[220,6413,386],{"class":264},[220,6415,6416,6418,6420],{"class":222,"line":691},[220,6417,402],{"class":264},[220,6419,347],{"class":420},[220,6421,359],{"class":264},[212,6423,6424],{"className":468,"code":6238,"language":469,"meta":178,"style":178},[99,6425,6426,6434,6442,6450,6454,6462,6484,6488,6496,6504],{"__ignoreMap":178},[220,6427,6428,6430,6432],{"class":222,"line":223},[220,6429,343],{"class":264},[220,6431,347],{"class":420},[220,6433,359],{"class":264},[220,6435,6436,6438,6440],{"class":222,"line":179},[220,6437,1999],{"class":264},[220,6439,6255],{"class":609},[220,6441,749],{"class":264},[220,6443,6444,6446,6448],{"class":222,"line":389},[220,6445,364],{"class":264},[220,6447,367],{"class":420},[220,6449,386],{"class":264},[220,6451,6452],{"class":222,"line":399},[220,6453,647],{"emptyLinePlaceholder":194},[220,6455,6456,6458,6460],{"class":222,"line":644},[220,6457,1999],{"class":264},[220,6459,6276],{"class":609},[220,6461,749],{"class":264},[220,6463,6464,6466,6468,6470,6472,6474,6476,6478,6480,6482],{"class":222,"line":650},[220,6465,364],{"class":264},[220,6467,2553],{"class":420},[220,6469,1588],{"class":226},[220,6471,353],{"class":260},[220,6473,2560],{"class":230},[220,6475,6202],{"class":226},[220,6477,353],{"class":260},[220,6479,743],{"class":264},[220,6481,6299],{"class":420},[220,6483,6302],{"class":264},[220,6485,6486],{"class":222,"line":656},[220,6487,647],{"emptyLinePlaceholder":194},[220,6489,6490,6492,6494],{"class":222,"line":673},[220,6491,1999],{"class":264},[220,6493,6313],{"class":609},[220,6495,749],{"class":264},[220,6497,6498,6500,6502],{"class":222,"line":682},[220,6499,364],{"class":264},[220,6501,6225],{"class":420},[220,6503,386],{"class":264},[220,6505,6506,6508,6510],{"class":222,"line":691},[220,6507,402],{"class":264},[220,6509,347],{"class":420},[220,6511,359],{"class":264},[212,6513,6515],{"className":251,"code":6514,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n \u002F\u002F Bottom layer\n { type: 'LinearGradient', props: {} },\n \u002F\u002F Middle layer\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } },\n \u002F\u002F Top layer\n { type: 'GlassTiles', props: {} }\n ]\n})\n",[99,6516,6517,6531,6535,6540,6549,6554,6572,6577,6586,6590],{"__ignoreMap":178},[220,6518,6519,6521,6523,6525,6527,6529],{"class":222,"line":223},[220,6520,1735],{"class":260},[220,6522,1738],{"class":420},[220,6524,1741],{"class":260},[220,6526,1744],{"class":260},[220,6528,1747],{"class":226},[220,6530,1750],{"class":264},[220,6532,6533],{"class":222,"line":179},[220,6534,1765],{"class":264},[220,6536,6537],{"class":222,"line":389},[220,6538,6539],{"class":609}," \u002F\u002F Bottom layer\n",[220,6541,6542,6544,6546],{"class":222,"line":399},[220,6543,1770],{"class":264},[220,6545,2462],{"class":230},[220,6547,6548],{"class":264},", props: {} },\n",[220,6550,6551],{"class":222,"line":644},[220,6552,6553],{"class":609}," \u002F\u002F Middle layer\n",[220,6555,6556,6558,6560,6562,6564,6567,6569],{"class":222,"line":650},[220,6557,1770],{"class":264},[220,6559,3206],{"class":230},[220,6561,1776],{"class":264},[220,6563,3217],{"class":230},[220,6565,6566],{"class":264},", radius: ",[220,6568,6299],{"class":420},[220,6570,6571],{"class":264}," } },\n",[220,6573,6574],{"class":222,"line":656},[220,6575,6576],{"class":609}," \u002F\u002F Top layer\n",[220,6578,6579,6581,6584],{"class":222,"line":673},[220,6580,1770],{"class":264},[220,6582,6583],{"class":230},"'GlassTiles'",[220,6585,2465],{"class":264},[220,6587,6588],{"class":222,"line":682},[220,6589,1787],{"class":264},[220,6591,6592],{"class":222,"line":691},[220,6593,1792],{"class":264},[19,6595],{":preset":6596},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,6598,6600],{"id":6599},"nesting-components","Nesting Components",[15,6602,6603,6604,6607,6608,6611,6612,6615,6616,1938],{},"Notice how the ",[99,6605,6606],{},"\u003CGlassTiles>"," component in the above example applies to all of the sibling layers rendered before it. If you wanted to ",[1847,6609,6610],{},"only"," apply glass tiles to the ",[99,6613,6614],{},"\u003CCircle>"," component, you can nest it inside the ",[99,6617,6606],{},[246,6619,6620,6699,6788,6874,6960],{":tabs":1557},[212,6621,6623],{"className":334,"code":6622,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- This gradient is NOT affected -->\n \u003CLinearGradient \u002F>\n\n \u003C!-- Only the Circle inside has glass tiles applied -->\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,6624,6625,6633,6638,6646,6650,6655,6663,6683,6691],{"__ignoreMap":178},[220,6626,6627,6629,6631],{"class":222,"line":223},[220,6628,343],{"class":264},[220,6630,347],{"class":346},[220,6632,359],{"class":264},[220,6634,6635],{"class":222,"line":179},[220,6636,6637],{"class":609}," \u003C!-- This gradient is NOT affected -->\n",[220,6639,6640,6642,6644],{"class":222,"line":389},[220,6641,364],{"class":264},[220,6643,367],{"class":346},[220,6645,386],{"class":264},[220,6647,6648],{"class":222,"line":399},[220,6649,647],{"emptyLinePlaceholder":194},[220,6651,6652],{"class":222,"line":644},[220,6653,6654],{"class":609}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[220,6656,6657,6659,6661],{"class":222,"line":650},[220,6658,364],{"class":264},[220,6660,6225],{"class":346},[220,6662,359],{"class":264},[220,6664,6665,6667,6669,6671,6673,6675,6677,6679,6681],{"class":222,"line":656},[220,6666,2550],{"class":264},[220,6668,2553],{"class":346},[220,6670,1588],{"class":226},[220,6672,353],{"class":264},[220,6674,2560],{"class":230},[220,6676,6202],{"class":226},[220,6678,353],{"class":264},[220,6680,6207],{"class":230},[220,6682,386],{"class":264},[220,6684,6685,6687,6689],{"class":222,"line":673},[220,6686,2567],{"class":264},[220,6688,6225],{"class":346},[220,6690,359],{"class":264},[220,6692,6693,6695,6697],{"class":222,"line":682},[220,6694,402],{"class":264},[220,6696,347],{"class":346},[220,6698,359],{"class":264},[212,6700,6702],{"className":409,"code":6701,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* This gradient is NOT affected *\u002F}\n \u003CLinearGradient \u002F>\n\n {\u002F* Only the Circle inside has glass tiles applied *\u002F}\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius={0.8} \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,6703,6704,6712,6721,6729,6733,6742,6750,6772,6780],{"__ignoreMap":178},[220,6705,6706,6708,6710],{"class":222,"line":223},[220,6707,343],{"class":264},[220,6709,347],{"class":420},[220,6711,359],{"class":264},[220,6713,6714,6716,6719],{"class":222,"line":179},[220,6715,1999],{"class":264},[220,6717,6718],{"class":609},"\u002F* This gradient is NOT affected *\u002F",[220,6720,749],{"class":264},[220,6722,6723,6725,6727],{"class":222,"line":389},[220,6724,364],{"class":264},[220,6726,367],{"class":420},[220,6728,386],{"class":264},[220,6730,6731],{"class":222,"line":399},[220,6732,647],{"emptyLinePlaceholder":194},[220,6734,6735,6737,6740],{"class":222,"line":644},[220,6736,1999],{"class":264},[220,6738,6739],{"class":609},"\u002F* Only the Circle inside has glass tiles applied *\u002F",[220,6741,749],{"class":264},[220,6743,6744,6746,6748],{"class":222,"line":650},[220,6745,364],{"class":264},[220,6747,6225],{"class":420},[220,6749,359],{"class":264},[220,6751,6752,6754,6756,6758,6760,6762,6764,6766,6768,6770],{"class":222,"line":656},[220,6753,2550],{"class":264},[220,6755,2553],{"class":420},[220,6757,1588],{"class":226},[220,6759,353],{"class":260},[220,6761,2560],{"class":230},[220,6763,6202],{"class":226},[220,6765,353],{"class":260},[220,6767,743],{"class":264},[220,6769,6299],{"class":420},[220,6771,6302],{"class":264},[220,6773,6774,6776,6778],{"class":222,"line":673},[220,6775,2567],{"class":264},[220,6777,6225],{"class":420},[220,6779,359],{"class":264},[220,6781,6782,6784,6786],{"class":222,"line":682},[220,6783,402],{"class":264},[220,6785,347],{"class":420},[220,6787,359],{"class":264},[212,6789,6790],{"className":468,"code":6701,"language":469,"meta":178,"style":178},[99,6791,6792,6800,6808,6816,6820,6828,6836,6858,6866],{"__ignoreMap":178},[220,6793,6794,6796,6798],{"class":222,"line":223},[220,6795,343],{"class":264},[220,6797,347],{"class":420},[220,6799,359],{"class":264},[220,6801,6802,6804,6806],{"class":222,"line":179},[220,6803,1999],{"class":264},[220,6805,6718],{"class":609},[220,6807,749],{"class":264},[220,6809,6810,6812,6814],{"class":222,"line":389},[220,6811,364],{"class":264},[220,6813,367],{"class":420},[220,6815,386],{"class":264},[220,6817,6818],{"class":222,"line":399},[220,6819,647],{"emptyLinePlaceholder":194},[220,6821,6822,6824,6826],{"class":222,"line":644},[220,6823,1999],{"class":264},[220,6825,6739],{"class":609},[220,6827,749],{"class":264},[220,6829,6830,6832,6834],{"class":222,"line":650},[220,6831,364],{"class":264},[220,6833,6225],{"class":420},[220,6835,359],{"class":264},[220,6837,6838,6840,6842,6844,6846,6848,6850,6852,6854,6856],{"class":222,"line":656},[220,6839,2550],{"class":264},[220,6841,2553],{"class":420},[220,6843,1588],{"class":226},[220,6845,353],{"class":260},[220,6847,2560],{"class":230},[220,6849,6202],{"class":226},[220,6851,353],{"class":260},[220,6853,743],{"class":264},[220,6855,6299],{"class":420},[220,6857,6302],{"class":264},[220,6859,6860,6862,6864],{"class":222,"line":673},[220,6861,2567],{"class":264},[220,6863,6225],{"class":420},[220,6865,359],{"class":264},[220,6867,6868,6870,6872],{"class":222,"line":682},[220,6869,402],{"class":264},[220,6871,347],{"class":420},[220,6873,359],{"class":264},[212,6875,6876],{"className":468,"code":6701,"language":469,"meta":178,"style":178},[99,6877,6878,6886,6894,6902,6906,6914,6922,6944,6952],{"__ignoreMap":178},[220,6879,6880,6882,6884],{"class":222,"line":223},[220,6881,343],{"class":264},[220,6883,347],{"class":420},[220,6885,359],{"class":264},[220,6887,6888,6890,6892],{"class":222,"line":179},[220,6889,1999],{"class":264},[220,6891,6718],{"class":609},[220,6893,749],{"class":264},[220,6895,6896,6898,6900],{"class":222,"line":389},[220,6897,364],{"class":264},[220,6899,367],{"class":420},[220,6901,386],{"class":264},[220,6903,6904],{"class":222,"line":399},[220,6905,647],{"emptyLinePlaceholder":194},[220,6907,6908,6910,6912],{"class":222,"line":644},[220,6909,1999],{"class":264},[220,6911,6739],{"class":609},[220,6913,749],{"class":264},[220,6915,6916,6918,6920],{"class":222,"line":650},[220,6917,364],{"class":264},[220,6919,6225],{"class":420},[220,6921,359],{"class":264},[220,6923,6924,6926,6928,6930,6932,6934,6936,6938,6940,6942],{"class":222,"line":656},[220,6925,2550],{"class":264},[220,6927,2553],{"class":420},[220,6929,1588],{"class":226},[220,6931,353],{"class":260},[220,6933,2560],{"class":230},[220,6935,6202],{"class":226},[220,6937,353],{"class":260},[220,6939,743],{"class":264},[220,6941,6299],{"class":420},[220,6943,6302],{"class":264},[220,6945,6946,6948,6950],{"class":222,"line":673},[220,6947,2567],{"class":264},[220,6949,6225],{"class":420},[220,6951,359],{"class":264},[220,6953,6954,6956,6958],{"class":222,"line":682},[220,6955,402],{"class":264},[220,6957,347],{"class":420},[220,6959,359],{"class":264},[212,6961,6963],{"className":251,"code":6962,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n \u002F\u002F This gradient is NOT affected\n { type: 'LinearGradient', props: {} },\n \u002F\u002F Only the Circle inside has glass tiles applied\n { type: 'GlassTiles', props: {}, children: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } }\n ]}\n ]\n})\n",[99,6964,6965,6979,6983,6988,6996,7001,7010,7027,7032,7036],{"__ignoreMap":178},[220,6966,6967,6969,6971,6973,6975,6977],{"class":222,"line":223},[220,6968,1735],{"class":260},[220,6970,1738],{"class":420},[220,6972,1741],{"class":260},[220,6974,1744],{"class":260},[220,6976,1747],{"class":226},[220,6978,1750],{"class":264},[220,6980,6981],{"class":222,"line":179},[220,6982,1765],{"class":264},[220,6984,6985],{"class":222,"line":389},[220,6986,6987],{"class":609}," \u002F\u002F This gradient is NOT affected\n",[220,6989,6990,6992,6994],{"class":222,"line":399},[220,6991,1770],{"class":264},[220,6993,2462],{"class":230},[220,6995,6548],{"class":264},[220,6997,6998],{"class":222,"line":644},[220,6999,7000],{"class":609}," \u002F\u002F Only the Circle inside has glass tiles applied\n",[220,7002,7003,7005,7007],{"class":222,"line":650},[220,7004,1770],{"class":264},[220,7006,6583],{"class":230},[220,7008,7009],{"class":264},", props: {}, children: [\n",[220,7011,7012,7015,7017,7019,7021,7023,7025],{"class":222,"line":656},[220,7013,7014],{"class":264}," { type: ",[220,7016,3206],{"class":230},[220,7018,1776],{"class":264},[220,7020,3217],{"class":230},[220,7022,6566],{"class":264},[220,7024,6299],{"class":420},[220,7026,1782],{"class":264},[220,7028,7029],{"class":222,"line":673},[220,7030,7031],{"class":264}," ]}\n",[220,7033,7034],{"class":222,"line":682},[220,7035,1787],{"class":264},[220,7037,7038],{"class":222,"line":691},[220,7039,1792],{"class":264},[19,7041],{":preset":7042},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,7044,7045,7046,7048,7049,7051],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[99,7047,367],{},") don't accept children, whereas components that apply effects (such as ",[99,7050,6225],{},") do. The component reference in this documentation shows if the particular component accepts children.",[246,7053,7054,7157,7271,7381,7491],{":tabs":1557},[212,7055,7057],{"className":334,"code":7056,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- Unaffected -->\n \u003CLinearGradient \u002F>\n\n \u003C!-- Nested effects apply only to Circle -->\n \u003CGridDistortion radius=\"2\">\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" \u002F>\n \u003C\u002FGlassTiles>\n \u003C\u002FGridDistortion>\n\u003C\u002FShader>\n",[99,7058,7059,7067,7072,7080,7084,7089,7105,7113,7133,7141,7149],{"__ignoreMap":178},[220,7060,7061,7063,7065],{"class":222,"line":223},[220,7062,343],{"class":264},[220,7064,347],{"class":346},[220,7066,359],{"class":264},[220,7068,7069],{"class":222,"line":179},[220,7070,7071],{"class":609}," \u003C!-- Unaffected -->\n",[220,7073,7074,7076,7078],{"class":222,"line":389},[220,7075,364],{"class":264},[220,7077,367],{"class":346},[220,7079,386],{"class":264},[220,7081,7082],{"class":222,"line":399},[220,7083,647],{"emptyLinePlaceholder":194},[220,7085,7086],{"class":222,"line":644},[220,7087,7088],{"class":609}," \u003C!-- Nested effects apply only to Circle -->\n",[220,7090,7091,7093,7096,7098,7100,7103],{"class":222,"line":650},[220,7092,364],{"class":264},[220,7094,7095],{"class":346},"GridDistortion",[220,7097,6202],{"class":226},[220,7099,353],{"class":264},[220,7101,7102],{"class":230},"\"2\"",[220,7104,359],{"class":264},[220,7106,7107,7109,7111],{"class":222,"line":656},[220,7108,2550],{"class":264},[220,7110,6225],{"class":346},[220,7112,359],{"class":264},[220,7114,7115,7117,7119,7121,7123,7125,7127,7129,7131],{"class":222,"line":673},[220,7116,2813],{"class":264},[220,7118,2553],{"class":346},[220,7120,1588],{"class":226},[220,7122,353],{"class":264},[220,7124,2560],{"class":230},[220,7126,6202],{"class":226},[220,7128,353],{"class":264},[220,7130,6207],{"class":230},[220,7132,386],{"class":264},[220,7134,7135,7137,7139],{"class":222,"line":682},[220,7136,2828],{"class":264},[220,7138,6225],{"class":346},[220,7140,359],{"class":264},[220,7142,7143,7145,7147],{"class":222,"line":691},[220,7144,2567],{"class":264},[220,7146,7095],{"class":346},[220,7148,359],{"class":264},[220,7150,7151,7153,7155],{"class":222,"line":696},[220,7152,402],{"class":264},[220,7154,347],{"class":346},[220,7156,359],{"class":264},[212,7158,7160],{"className":409,"code":7159,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* Unaffected *\u002F}\n \u003CLinearGradient \u002F>\n\n {\u002F* Nested effects apply only to Circle *\u002F}\n \u003CGridDistortion radius={2}>\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius={0.8} \u002F>\n \u003C\u002FGlassTiles>\n \u003C\u002FGridDistortion>\n\u003C\u002FShader>\n",[99,7161,7162,7170,7179,7187,7191,7200,7217,7225,7247,7255,7263],{"__ignoreMap":178},[220,7163,7164,7166,7168],{"class":222,"line":223},[220,7165,343],{"class":264},[220,7167,347],{"class":420},[220,7169,359],{"class":264},[220,7171,7172,7174,7177],{"class":222,"line":179},[220,7173,1999],{"class":264},[220,7175,7176],{"class":609},"\u002F* Unaffected *\u002F",[220,7178,749],{"class":264},[220,7180,7181,7183,7185],{"class":222,"line":389},[220,7182,364],{"class":264},[220,7184,367],{"class":420},[220,7186,386],{"class":264},[220,7188,7189],{"class":222,"line":399},[220,7190,647],{"emptyLinePlaceholder":194},[220,7192,7193,7195,7198],{"class":222,"line":644},[220,7194,1999],{"class":264},[220,7196,7197],{"class":609},"\u002F* Nested effects apply only to Circle *\u002F",[220,7199,749],{"class":264},[220,7201,7202,7204,7206,7208,7210,7212,7215],{"class":222,"line":650},[220,7203,364],{"class":264},[220,7205,7095],{"class":420},[220,7207,6202],{"class":226},[220,7209,353],{"class":260},[220,7211,743],{"class":264},[220,7213,7214],{"class":420},"2",[220,7216,2335],{"class":264},[220,7218,7219,7221,7223],{"class":222,"line":656},[220,7220,2550],{"class":264},[220,7222,6225],{"class":420},[220,7224,359],{"class":264},[220,7226,7227,7229,7231,7233,7235,7237,7239,7241,7243,7245],{"class":222,"line":673},[220,7228,2813],{"class":264},[220,7230,2553],{"class":420},[220,7232,1588],{"class":226},[220,7234,353],{"class":260},[220,7236,2560],{"class":230},[220,7238,6202],{"class":226},[220,7240,353],{"class":260},[220,7242,743],{"class":264},[220,7244,6299],{"class":420},[220,7246,6302],{"class":264},[220,7248,7249,7251,7253],{"class":222,"line":682},[220,7250,2828],{"class":264},[220,7252,6225],{"class":420},[220,7254,359],{"class":264},[220,7256,7257,7259,7261],{"class":222,"line":691},[220,7258,2567],{"class":264},[220,7260,7095],{"class":420},[220,7262,359],{"class":264},[220,7264,7265,7267,7269],{"class":222,"line":696},[220,7266,402],{"class":264},[220,7268,347],{"class":420},[220,7270,359],{"class":264},[212,7272,7273],{"className":468,"code":7159,"language":469,"meta":178,"style":178},[99,7274,7275,7283,7291,7299,7303,7311,7327,7335,7357,7365,7373],{"__ignoreMap":178},[220,7276,7277,7279,7281],{"class":222,"line":223},[220,7278,343],{"class":264},[220,7280,347],{"class":420},[220,7282,359],{"class":264},[220,7284,7285,7287,7289],{"class":222,"line":179},[220,7286,1999],{"class":264},[220,7288,7176],{"class":609},[220,7290,749],{"class":264},[220,7292,7293,7295,7297],{"class":222,"line":389},[220,7294,364],{"class":264},[220,7296,367],{"class":420},[220,7298,386],{"class":264},[220,7300,7301],{"class":222,"line":399},[220,7302,647],{"emptyLinePlaceholder":194},[220,7304,7305,7307,7309],{"class":222,"line":644},[220,7306,1999],{"class":264},[220,7308,7197],{"class":609},[220,7310,749],{"class":264},[220,7312,7313,7315,7317,7319,7321,7323,7325],{"class":222,"line":650},[220,7314,364],{"class":264},[220,7316,7095],{"class":420},[220,7318,6202],{"class":226},[220,7320,353],{"class":260},[220,7322,743],{"class":264},[220,7324,7214],{"class":420},[220,7326,2335],{"class":264},[220,7328,7329,7331,7333],{"class":222,"line":656},[220,7330,2550],{"class":264},[220,7332,6225],{"class":420},[220,7334,359],{"class":264},[220,7336,7337,7339,7341,7343,7345,7347,7349,7351,7353,7355],{"class":222,"line":673},[220,7338,2813],{"class":264},[220,7340,2553],{"class":420},[220,7342,1588],{"class":226},[220,7344,353],{"class":260},[220,7346,2560],{"class":230},[220,7348,6202],{"class":226},[220,7350,353],{"class":260},[220,7352,743],{"class":264},[220,7354,6299],{"class":420},[220,7356,6302],{"class":264},[220,7358,7359,7361,7363],{"class":222,"line":682},[220,7360,2828],{"class":264},[220,7362,6225],{"class":420},[220,7364,359],{"class":264},[220,7366,7367,7369,7371],{"class":222,"line":691},[220,7368,2567],{"class":264},[220,7370,7095],{"class":420},[220,7372,359],{"class":264},[220,7374,7375,7377,7379],{"class":222,"line":696},[220,7376,402],{"class":264},[220,7378,347],{"class":420},[220,7380,359],{"class":264},[212,7382,7383],{"className":468,"code":7159,"language":469,"meta":178,"style":178},[99,7384,7385,7393,7401,7409,7413,7421,7437,7445,7467,7475,7483],{"__ignoreMap":178},[220,7386,7387,7389,7391],{"class":222,"line":223},[220,7388,343],{"class":264},[220,7390,347],{"class":420},[220,7392,359],{"class":264},[220,7394,7395,7397,7399],{"class":222,"line":179},[220,7396,1999],{"class":264},[220,7398,7176],{"class":609},[220,7400,749],{"class":264},[220,7402,7403,7405,7407],{"class":222,"line":389},[220,7404,364],{"class":264},[220,7406,367],{"class":420},[220,7408,386],{"class":264},[220,7410,7411],{"class":222,"line":399},[220,7412,647],{"emptyLinePlaceholder":194},[220,7414,7415,7417,7419],{"class":222,"line":644},[220,7416,1999],{"class":264},[220,7418,7197],{"class":609},[220,7420,749],{"class":264},[220,7422,7423,7425,7427,7429,7431,7433,7435],{"class":222,"line":650},[220,7424,364],{"class":264},[220,7426,7095],{"class":420},[220,7428,6202],{"class":226},[220,7430,353],{"class":260},[220,7432,743],{"class":264},[220,7434,7214],{"class":420},[220,7436,2335],{"class":264},[220,7438,7439,7441,7443],{"class":222,"line":656},[220,7440,2550],{"class":264},[220,7442,6225],{"class":420},[220,7444,359],{"class":264},[220,7446,7447,7449,7451,7453,7455,7457,7459,7461,7463,7465],{"class":222,"line":673},[220,7448,2813],{"class":264},[220,7450,2553],{"class":420},[220,7452,1588],{"class":226},[220,7454,353],{"class":260},[220,7456,2560],{"class":230},[220,7458,6202],{"class":226},[220,7460,353],{"class":260},[220,7462,743],{"class":264},[220,7464,6299],{"class":420},[220,7466,6302],{"class":264},[220,7468,7469,7471,7473],{"class":222,"line":682},[220,7470,2828],{"class":264},[220,7472,6225],{"class":420},[220,7474,359],{"class":264},[220,7476,7477,7479,7481],{"class":222,"line":691},[220,7478,2567],{"class":264},[220,7480,7095],{"class":420},[220,7482,359],{"class":264},[220,7484,7485,7487,7489],{"class":222,"line":696},[220,7486,402],{"class":264},[220,7488,347],{"class":420},[220,7490,359],{"class":264},[212,7492,7494],{"className":251,"code":7493,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n \u002F\u002F Unaffected\n { type: 'LinearGradient', props: {} },\n \u002F\u002F Nested effects apply only to Circle\n { type: 'GridDistortion', props: { radius: 2 }, children: [\n { type: 'GlassTiles', props: {}, children: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } }\n ]}\n ]}\n ]\n})\n",[99,7495,7496,7510,7514,7519,7527,7532,7547,7555,7572,7577,7581,7585],{"__ignoreMap":178},[220,7497,7498,7500,7502,7504,7506,7508],{"class":222,"line":223},[220,7499,1735],{"class":260},[220,7501,1738],{"class":420},[220,7503,1741],{"class":260},[220,7505,1744],{"class":260},[220,7507,1747],{"class":226},[220,7509,1750],{"class":264},[220,7511,7512],{"class":222,"line":179},[220,7513,1765],{"class":264},[220,7515,7516],{"class":222,"line":389},[220,7517,7518],{"class":609}," \u002F\u002F Unaffected\n",[220,7520,7521,7523,7525],{"class":222,"line":399},[220,7522,1770],{"class":264},[220,7524,2462],{"class":230},[220,7526,6548],{"class":264},[220,7528,7529],{"class":222,"line":644},[220,7530,7531],{"class":609}," \u002F\u002F Nested effects apply only to Circle\n",[220,7533,7534,7536,7539,7542,7544],{"class":222,"line":650},[220,7535,1770],{"class":264},[220,7537,7538],{"class":230},"'GridDistortion'",[220,7540,7541],{"class":264},", props: { radius: ",[220,7543,7214],{"class":420},[220,7545,7546],{"class":264}," }, children: [\n",[220,7548,7549,7551,7553],{"class":222,"line":656},[220,7550,7014],{"class":264},[220,7552,6583],{"class":230},[220,7554,7009],{"class":264},[220,7556,7557,7560,7562,7564,7566,7568,7570],{"class":222,"line":673},[220,7558,7559],{"class":264}," { type: ",[220,7561,3206],{"class":230},[220,7563,1776],{"class":264},[220,7565,3217],{"class":230},[220,7567,6566],{"class":264},[220,7569,6299],{"class":420},[220,7571,1782],{"class":264},[220,7573,7574],{"class":222,"line":682},[220,7575,7576],{"class":264}," ]}\n",[220,7578,7579],{"class":222,"line":691},[220,7580,7031],{"class":264},[220,7582,7583],{"class":222,"line":696},[220,7584,1787],{"class":264},[220,7586,7587],{"class":222,"line":702},[220,7588,1792],{"class":264},[19,7590],{":preset":7591},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1504,7593,7594],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":7596},[7597,7598],{"id":6142,"depth":179,"text":6143},{"id":6599,"depth":179,"text":6600},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1482,"description":7599},"docs\u002Fguide\u002F2.composing-effects","8iGEh0rUsm94EkWDy_CXuYFrlYCqmsE45V-2nLvIP4A",{"id":7606,"title":7607,"body":7608,"category":10232,"description":10233,"exclude":190,"extension":191,"forceFramework":190,"icon":10234,"meta":10235,"navigation":194,"path":10236,"seo":10237,"stem":10238,"__hash__":10239},"guide\u002Fdocs\u002Fguide\u002F3.blending-masking.md","Blending & Masking",{"type":8,"value":7609,"toc":10222},[7610,7613,7616,7620,7631,7974,7977,7982,8077,8081,8084,8659,8662,8665,8679,8994,8997,9000,9004,9015,9036,9047,9051,9066,9072,9481,9484,9489,9493,9500,9534,10217,10220],[11,7611,7607],{"id":7612},"blending-masking",[15,7614,7615],{},"Beyond stacking and nesting, you have precise control over how components combine and interact. Blend modes determine how layers mix together, while masks let you selectively show or hide portions of your effects.",[23,7617,7619],{"id":7618},"blend-modes","Blend Modes",[15,7621,7622,7623,7626,7627,7630],{},"Every component has a ",[99,7624,7625],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[99,7628,7629],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[246,7632,7633,7700,7773,7843,7913],{":tabs":1557},[212,7634,7636],{"className":334,"code":7635,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003C!-- Multiply darkens by multiplying colors -->\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" blendMode=\"multiply\" \u002F>\n\u003C\u002FShader>\n",[99,7637,7638,7646,7654,7658,7663,7692],{"__ignoreMap":178},[220,7639,7640,7642,7644],{"class":222,"line":223},[220,7641,343],{"class":264},[220,7643,347],{"class":346},[220,7645,359],{"class":264},[220,7647,7648,7650,7652],{"class":222,"line":179},[220,7649,364],{"class":264},[220,7651,367],{"class":346},[220,7653,386],{"class":264},[220,7655,7656],{"class":222,"line":389},[220,7657,647],{"emptyLinePlaceholder":194},[220,7659,7660],{"class":222,"line":399},[220,7661,7662],{"class":609}," \u003C!-- Multiply darkens by multiplying colors -->\n",[220,7664,7665,7667,7669,7671,7673,7675,7677,7679,7682,7685,7687,7690],{"class":222,"line":644},[220,7666,364],{"class":264},[220,7668,2553],{"class":346},[220,7670,1588],{"class":226},[220,7672,353],{"class":264},[220,7674,2560],{"class":230},[220,7676,6202],{"class":226},[220,7678,353],{"class":264},[220,7680,7681],{"class":230},"\"0.5\"",[220,7683,7684],{"class":226}," blendMode",[220,7686,353],{"class":264},[220,7688,7689],{"class":230},"\"multiply\"",[220,7691,386],{"class":264},[220,7693,7694,7696,7698],{"class":222,"line":650},[220,7695,402],{"class":264},[220,7697,347],{"class":346},[220,7699,359],{"class":264},[212,7701,7703],{"className":409,"code":7702,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n {\u002F* Multiply darkens by multiplying colors *\u002F}\n \u003CCircle color=\"#ff0088\" radius={0.5} blendMode=\"multiply\" \u002F>\n\u003C\u002FShader>\n",[99,7704,7705,7713,7721,7725,7734,7765],{"__ignoreMap":178},[220,7706,7707,7709,7711],{"class":222,"line":223},[220,7708,343],{"class":264},[220,7710,347],{"class":420},[220,7712,359],{"class":264},[220,7714,7715,7717,7719],{"class":222,"line":179},[220,7716,364],{"class":264},[220,7718,367],{"class":420},[220,7720,386],{"class":264},[220,7722,7723],{"class":222,"line":389},[220,7724,647],{"emptyLinePlaceholder":194},[220,7726,7727,7729,7732],{"class":222,"line":399},[220,7728,1999],{"class":264},[220,7730,7731],{"class":609},"\u002F* Multiply darkens by multiplying colors *\u002F",[220,7733,749],{"class":264},[220,7735,7736,7738,7740,7742,7744,7746,7748,7750,7752,7755,7757,7759,7761,7763],{"class":222,"line":644},[220,7737,364],{"class":264},[220,7739,2553],{"class":420},[220,7741,1588],{"class":226},[220,7743,353],{"class":260},[220,7745,2560],{"class":230},[220,7747,6202],{"class":226},[220,7749,353],{"class":260},[220,7751,743],{"class":264},[220,7753,7754],{"class":420},"0.5",[220,7756,2914],{"class":264},[220,7758,7625],{"class":226},[220,7760,353],{"class":260},[220,7762,7689],{"class":230},[220,7764,386],{"class":264},[220,7766,7767,7769,7771],{"class":222,"line":650},[220,7768,402],{"class":264},[220,7770,347],{"class":420},[220,7772,359],{"class":264},[212,7774,7775],{"className":468,"code":7702,"language":469,"meta":178,"style":178},[99,7776,7777,7785,7793,7797,7805,7835],{"__ignoreMap":178},[220,7778,7779,7781,7783],{"class":222,"line":223},[220,7780,343],{"class":264},[220,7782,347],{"class":420},[220,7784,359],{"class":264},[220,7786,7787,7789,7791],{"class":222,"line":179},[220,7788,364],{"class":264},[220,7790,367],{"class":420},[220,7792,386],{"class":264},[220,7794,7795],{"class":222,"line":389},[220,7796,647],{"emptyLinePlaceholder":194},[220,7798,7799,7801,7803],{"class":222,"line":399},[220,7800,1999],{"class":264},[220,7802,7731],{"class":609},[220,7804,749],{"class":264},[220,7806,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7829,7831,7833],{"class":222,"line":644},[220,7808,364],{"class":264},[220,7810,2553],{"class":420},[220,7812,1588],{"class":226},[220,7814,353],{"class":260},[220,7816,2560],{"class":230},[220,7818,6202],{"class":226},[220,7820,353],{"class":260},[220,7822,743],{"class":264},[220,7824,7754],{"class":420},[220,7826,2914],{"class":264},[220,7828,7625],{"class":226},[220,7830,353],{"class":260},[220,7832,7689],{"class":230},[220,7834,386],{"class":264},[220,7836,7837,7839,7841],{"class":222,"line":650},[220,7838,402],{"class":264},[220,7840,347],{"class":420},[220,7842,359],{"class":264},[212,7844,7845],{"className":468,"code":7702,"language":469,"meta":178,"style":178},[99,7846,7847,7855,7863,7867,7875,7905],{"__ignoreMap":178},[220,7848,7849,7851,7853],{"class":222,"line":223},[220,7850,343],{"class":264},[220,7852,347],{"class":420},[220,7854,359],{"class":264},[220,7856,7857,7859,7861],{"class":222,"line":179},[220,7858,364],{"class":264},[220,7860,367],{"class":420},[220,7862,386],{"class":264},[220,7864,7865],{"class":222,"line":389},[220,7866,647],{"emptyLinePlaceholder":194},[220,7868,7869,7871,7873],{"class":222,"line":399},[220,7870,1999],{"class":264},[220,7872,7731],{"class":609},[220,7874,749],{"class":264},[220,7876,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903],{"class":222,"line":644},[220,7878,364],{"class":264},[220,7880,2553],{"class":420},[220,7882,1588],{"class":226},[220,7884,353],{"class":260},[220,7886,2560],{"class":230},[220,7888,6202],{"class":226},[220,7890,353],{"class":260},[220,7892,743],{"class":264},[220,7894,7754],{"class":420},[220,7896,2914],{"class":264},[220,7898,7625],{"class":226},[220,7900,353],{"class":260},[220,7902,7689],{"class":230},[220,7904,386],{"class":264},[220,7906,7907,7909,7911],{"class":222,"line":650},[220,7908,402],{"class":264},[220,7910,347],{"class":420},[220,7912,359],{"class":264},[212,7914,7916],{"className":251,"code":7915,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Circle', props: { color: '#ff0088', radius: 0.5, blendMode: 'multiply' } }\n ]\n})\n",[99,7917,7918,7932,7936,7944,7966,7970],{"__ignoreMap":178},[220,7919,7920,7922,7924,7926,7928,7930],{"class":222,"line":223},[220,7921,1735],{"class":260},[220,7923,1738],{"class":420},[220,7925,1741],{"class":260},[220,7927,1744],{"class":260},[220,7929,1747],{"class":226},[220,7931,1750],{"class":264},[220,7933,7934],{"class":222,"line":179},[220,7935,1765],{"class":264},[220,7937,7938,7940,7942],{"class":222,"line":389},[220,7939,1770],{"class":264},[220,7941,2462],{"class":230},[220,7943,6548],{"class":264},[220,7945,7946,7948,7950,7952,7954,7956,7958,7961,7964],{"class":222,"line":399},[220,7947,1770],{"class":264},[220,7949,3206],{"class":230},[220,7951,1776],{"class":264},[220,7953,3217],{"class":230},[220,7955,6566],{"class":264},[220,7957,7754],{"class":420},[220,7959,7960],{"class":264},", blendMode: ",[220,7962,7963],{"class":230},"'multiply'",[220,7965,1782],{"class":264},[220,7967,7968],{"class":222,"line":644},[220,7969,1787],{"class":264},[220,7971,7972],{"class":222,"line":650},[220,7973,1792],{"class":264},[19,7975],{":preset":7976},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,7978,7979],{},[159,7980,7981],{},"Available blend modes:",[34,7983,7984,7991,8008,8024,8038,8049,8066],{},[37,7985,7986,4601,7989],{},[159,7987,7988],{},"Basic",[99,7990,7629],{},[37,7992,7993,4601,7996,1895,7999,1895,8002,1895,8005],{},[159,7994,7995],{},"Darkening",[99,7997,7998],{},"multiply",[99,8000,8001],{},"darken",[99,8003,8004],{},"colorBurn",[99,8006,8007],{},"linearBurn",[37,8009,8010,4601,8013,1895,8016,1895,8019,1895,8022],{},[159,8011,8012],{},"Lightening",[99,8014,8015],{},"screen",[99,8017,8018],{},"lighten",[99,8020,8021],{},"colorDodge",[99,8023,1924],{},[37,8025,8026,4601,8029,1895,8032,1895,8035],{},[159,8027,8028],{},"Contrast",[99,8030,8031],{},"overlay",[99,8033,8034],{},"softLight",[99,8036,8037],{},"hardLight",[37,8039,8040,4601,8043,1895,8046],{},[159,8041,8042],{},"Difference",[99,8044,8045],{},"difference",[99,8047,8048],{},"exclusion",[37,8050,8051,4601,8054,1895,8057,1895,8060,1895,8063],{},[159,8052,8053],{},"Color",[99,8055,8056],{},"hue",[99,8058,8059],{},"saturation",[99,8061,8062],{},"color",[99,8064,8065],{},"luminosity",[37,8067,8068,4601,8071,1895,8074],{},[159,8069,8070],{},"Color Space Blending",[99,8072,8073],{},"normal-oklab",[99,8075,8076],{},"normal-oklch",[3262,8078,8080],{"id":8079},"combining-blend-modes","Combining Blend Modes",[15,8082,8083],{},"Use different blend modes on multiple layers to create complex interactions:",[246,8085,8086,8191,8318,8438,8558],{":tabs":1557},[212,8087,8089],{"className":334,"code":8088,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#00ffff\" radius=\"0.6\" :center=\"{ x: 0.4, y: 0.5 }\" blendMode=\"screen\" \u002F>\n \u003CCircle color=\"#ff00ff\" radius=\"0.6\" :center=\"{ x: 0.6, y: 0.5 }\" blendMode=\"difference\" \u002F>\n\u003C\u002FShader>\n",[99,8090,8091,8099,8107,8111,8148,8183],{"__ignoreMap":178},[220,8092,8093,8095,8097],{"class":222,"line":223},[220,8094,343],{"class":264},[220,8096,347],{"class":346},[220,8098,359],{"class":264},[220,8100,8101,8103,8105],{"class":222,"line":179},[220,8102,364],{"class":264},[220,8104,367],{"class":346},[220,8106,386],{"class":264},[220,8108,8109],{"class":222,"line":389},[220,8110,647],{"emptyLinePlaceholder":194},[220,8112,8113,8115,8117,8119,8121,8124,8126,8128,8131,8134,8136,8139,8141,8143,8146],{"class":222,"line":399},[220,8114,364],{"class":264},[220,8116,2553],{"class":346},[220,8118,1588],{"class":226},[220,8120,353],{"class":264},[220,8122,8123],{"class":230},"\"#00ffff\"",[220,8125,6202],{"class":226},[220,8127,353],{"class":264},[220,8129,8130],{"class":230},"\"0.6\"",[220,8132,8133],{"class":226}," :center",[220,8135,353],{"class":264},[220,8137,8138],{"class":230},"\"{ x: 0.4, y: 0.5 }\"",[220,8140,7684],{"class":226},[220,8142,353],{"class":264},[220,8144,8145],{"class":230},"\"screen\"",[220,8147,386],{"class":264},[220,8149,8150,8152,8154,8156,8158,8161,8163,8165,8167,8169,8171,8174,8176,8178,8181],{"class":222,"line":644},[220,8151,364],{"class":264},[220,8153,2553],{"class":346},[220,8155,1588],{"class":226},[220,8157,353],{"class":264},[220,8159,8160],{"class":230},"\"#ff00ff\"",[220,8162,6202],{"class":226},[220,8164,353],{"class":264},[220,8166,8130],{"class":230},[220,8168,8133],{"class":226},[220,8170,353],{"class":264},[220,8172,8173],{"class":230},"\"{ x: 0.6, y: 0.5 }\"",[220,8175,7684],{"class":226},[220,8177,353],{"class":264},[220,8179,8180],{"class":230},"\"difference\"",[220,8182,386],{"class":264},[220,8184,8185,8187,8189],{"class":222,"line":650},[220,8186,402],{"class":264},[220,8188,347],{"class":346},[220,8190,359],{"class":264},[212,8192,8194],{"className":409,"code":8193,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#00ffff\" radius={0.6} center={{ x: 0.4, y: 0.5 }} blendMode=\"screen\" \u002F>\n \u003CCircle color=\"#ff00ff\" radius={0.6} center={{ x: 0.6, y: 0.5 }} blendMode=\"difference\" \u002F>\n\u003C\u002FShader>\n",[99,8195,8196,8204,8212,8216,8266,8310],{"__ignoreMap":178},[220,8197,8198,8200,8202],{"class":222,"line":223},[220,8199,343],{"class":264},[220,8201,347],{"class":420},[220,8203,359],{"class":264},[220,8205,8206,8208,8210],{"class":222,"line":179},[220,8207,364],{"class":264},[220,8209,367],{"class":420},[220,8211,386],{"class":264},[220,8213,8214],{"class":222,"line":389},[220,8215,647],{"emptyLinePlaceholder":194},[220,8217,8218,8220,8222,8224,8226,8228,8230,8232,8234,8237,8239,8242,8244,8247,8250,8253,8255,8258,8260,8262,8264],{"class":222,"line":399},[220,8219,364],{"class":264},[220,8221,2553],{"class":420},[220,8223,1588],{"class":226},[220,8225,353],{"class":260},[220,8227,8123],{"class":230},[220,8229,6202],{"class":226},[220,8231,353],{"class":260},[220,8233,743],{"class":264},[220,8235,8236],{"class":420},"0.6",[220,8238,2914],{"class":264},[220,8240,8241],{"class":226},"center",[220,8243,353],{"class":260},[220,8245,8246],{"class":264},"{{ x: ",[220,8248,8249],{"class":420},"0.4",[220,8251,8252],{"class":264},", y: ",[220,8254,7754],{"class":420},[220,8256,8257],{"class":264}," }} ",[220,8259,7625],{"class":226},[220,8261,353],{"class":260},[220,8263,8145],{"class":230},[220,8265,386],{"class":264},[220,8267,8268,8270,8272,8274,8276,8278,8280,8282,8284,8286,8288,8290,8292,8294,8296,8298,8300,8302,8304,8306,8308],{"class":222,"line":644},[220,8269,364],{"class":264},[220,8271,2553],{"class":420},[220,8273,1588],{"class":226},[220,8275,353],{"class":260},[220,8277,8160],{"class":230},[220,8279,6202],{"class":226},[220,8281,353],{"class":260},[220,8283,743],{"class":264},[220,8285,8236],{"class":420},[220,8287,2914],{"class":264},[220,8289,8241],{"class":226},[220,8291,353],{"class":260},[220,8293,8246],{"class":264},[220,8295,8236],{"class":420},[220,8297,8252],{"class":264},[220,8299,7754],{"class":420},[220,8301,8257],{"class":264},[220,8303,7625],{"class":226},[220,8305,353],{"class":260},[220,8307,8180],{"class":230},[220,8309,386],{"class":264},[220,8311,8312,8314,8316],{"class":222,"line":650},[220,8313,402],{"class":264},[220,8315,347],{"class":420},[220,8317,359],{"class":264},[212,8319,8320],{"className":468,"code":8193,"language":469,"meta":178,"style":178},[99,8321,8322,8330,8338,8342,8386,8430],{"__ignoreMap":178},[220,8323,8324,8326,8328],{"class":222,"line":223},[220,8325,343],{"class":264},[220,8327,347],{"class":420},[220,8329,359],{"class":264},[220,8331,8332,8334,8336],{"class":222,"line":179},[220,8333,364],{"class":264},[220,8335,367],{"class":420},[220,8337,386],{"class":264},[220,8339,8340],{"class":222,"line":389},[220,8341,647],{"emptyLinePlaceholder":194},[220,8343,8344,8346,8348,8350,8352,8354,8356,8358,8360,8362,8364,8366,8368,8370,8372,8374,8376,8378,8380,8382,8384],{"class":222,"line":399},[220,8345,364],{"class":264},[220,8347,2553],{"class":420},[220,8349,1588],{"class":226},[220,8351,353],{"class":260},[220,8353,8123],{"class":230},[220,8355,6202],{"class":226},[220,8357,353],{"class":260},[220,8359,743],{"class":264},[220,8361,8236],{"class":420},[220,8363,2914],{"class":264},[220,8365,8241],{"class":226},[220,8367,353],{"class":260},[220,8369,8246],{"class":264},[220,8371,8249],{"class":420},[220,8373,8252],{"class":264},[220,8375,7754],{"class":420},[220,8377,8257],{"class":264},[220,8379,7625],{"class":226},[220,8381,353],{"class":260},[220,8383,8145],{"class":230},[220,8385,386],{"class":264},[220,8387,8388,8390,8392,8394,8396,8398,8400,8402,8404,8406,8408,8410,8412,8414,8416,8418,8420,8422,8424,8426,8428],{"class":222,"line":644},[220,8389,364],{"class":264},[220,8391,2553],{"class":420},[220,8393,1588],{"class":226},[220,8395,353],{"class":260},[220,8397,8160],{"class":230},[220,8399,6202],{"class":226},[220,8401,353],{"class":260},[220,8403,743],{"class":264},[220,8405,8236],{"class":420},[220,8407,2914],{"class":264},[220,8409,8241],{"class":226},[220,8411,353],{"class":260},[220,8413,8246],{"class":264},[220,8415,8236],{"class":420},[220,8417,8252],{"class":264},[220,8419,7754],{"class":420},[220,8421,8257],{"class":264},[220,8423,7625],{"class":226},[220,8425,353],{"class":260},[220,8427,8180],{"class":230},[220,8429,386],{"class":264},[220,8431,8432,8434,8436],{"class":222,"line":650},[220,8433,402],{"class":264},[220,8435,347],{"class":420},[220,8437,359],{"class":264},[212,8439,8440],{"className":468,"code":8193,"language":469,"meta":178,"style":178},[99,8441,8442,8450,8458,8462,8506,8550],{"__ignoreMap":178},[220,8443,8444,8446,8448],{"class":222,"line":223},[220,8445,343],{"class":264},[220,8447,347],{"class":420},[220,8449,359],{"class":264},[220,8451,8452,8454,8456],{"class":222,"line":179},[220,8453,364],{"class":264},[220,8455,367],{"class":420},[220,8457,386],{"class":264},[220,8459,8460],{"class":222,"line":389},[220,8461,647],{"emptyLinePlaceholder":194},[220,8463,8464,8466,8468,8470,8472,8474,8476,8478,8480,8482,8484,8486,8488,8490,8492,8494,8496,8498,8500,8502,8504],{"class":222,"line":399},[220,8465,364],{"class":264},[220,8467,2553],{"class":420},[220,8469,1588],{"class":226},[220,8471,353],{"class":260},[220,8473,8123],{"class":230},[220,8475,6202],{"class":226},[220,8477,353],{"class":260},[220,8479,743],{"class":264},[220,8481,8236],{"class":420},[220,8483,2914],{"class":264},[220,8485,8241],{"class":226},[220,8487,353],{"class":260},[220,8489,8246],{"class":264},[220,8491,8249],{"class":420},[220,8493,8252],{"class":264},[220,8495,7754],{"class":420},[220,8497,8257],{"class":264},[220,8499,7625],{"class":226},[220,8501,353],{"class":260},[220,8503,8145],{"class":230},[220,8505,386],{"class":264},[220,8507,8508,8510,8512,8514,8516,8518,8520,8522,8524,8526,8528,8530,8532,8534,8536,8538,8540,8542,8544,8546,8548],{"class":222,"line":644},[220,8509,364],{"class":264},[220,8511,2553],{"class":420},[220,8513,1588],{"class":226},[220,8515,353],{"class":260},[220,8517,8160],{"class":230},[220,8519,6202],{"class":226},[220,8521,353],{"class":260},[220,8523,743],{"class":264},[220,8525,8236],{"class":420},[220,8527,2914],{"class":264},[220,8529,8241],{"class":226},[220,8531,353],{"class":260},[220,8533,8246],{"class":264},[220,8535,8236],{"class":420},[220,8537,8252],{"class":264},[220,8539,7754],{"class":420},[220,8541,8257],{"class":264},[220,8543,7625],{"class":226},[220,8545,353],{"class":260},[220,8547,8180],{"class":230},[220,8549,386],{"class":264},[220,8551,8552,8554,8556],{"class":222,"line":650},[220,8553,402],{"class":264},[220,8555,347],{"class":420},[220,8557,359],{"class":264},[212,8559,8561],{"className":251,"code":8560,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Circle', props: { color: '#00ffff', radius: 0.6, center: { x: 0.4, y: 0.5 }, blendMode: 'screen' } },\n { type: 'Circle', props: { color: '#ff00ff', radius: 0.6, center: { x: 0.6, y: 0.5 }, blendMode: 'difference' } }\n ]\n})\n",[99,8562,8563,8577,8581,8589,8621,8651,8655],{"__ignoreMap":178},[220,8564,8565,8567,8569,8571,8573,8575],{"class":222,"line":223},[220,8566,1735],{"class":260},[220,8568,1738],{"class":420},[220,8570,1741],{"class":260},[220,8572,1744],{"class":260},[220,8574,1747],{"class":226},[220,8576,1750],{"class":264},[220,8578,8579],{"class":222,"line":179},[220,8580,1765],{"class":264},[220,8582,8583,8585,8587],{"class":222,"line":389},[220,8584,1770],{"class":264},[220,8586,2462],{"class":230},[220,8588,6548],{"class":264},[220,8590,8591,8593,8595,8597,8600,8602,8604,8607,8609,8611,8613,8616,8619],{"class":222,"line":399},[220,8592,1770],{"class":264},[220,8594,3206],{"class":230},[220,8596,1776],{"class":264},[220,8598,8599],{"class":230},"'#00ffff'",[220,8601,6566],{"class":264},[220,8603,8236],{"class":420},[220,8605,8606],{"class":264},", center: { x: ",[220,8608,8249],{"class":420},[220,8610,8252],{"class":264},[220,8612,7754],{"class":420},[220,8614,8615],{"class":264}," }, blendMode: ",[220,8617,8618],{"class":230},"'screen'",[220,8620,6571],{"class":264},[220,8622,8623,8625,8627,8629,8632,8634,8636,8638,8640,8642,8644,8646,8649],{"class":222,"line":644},[220,8624,1770],{"class":264},[220,8626,3206],{"class":230},[220,8628,1776],{"class":264},[220,8630,8631],{"class":230},"'#ff00ff'",[220,8633,6566],{"class":264},[220,8635,8236],{"class":420},[220,8637,8606],{"class":264},[220,8639,8236],{"class":420},[220,8641,8252],{"class":264},[220,8643,7754],{"class":420},[220,8645,8615],{"class":264},[220,8647,8648],{"class":230},"'difference'",[220,8650,1782],{"class":264},[220,8652,8653],{"class":222,"line":650},[220,8654,1787],{"class":264},[220,8656,8657],{"class":222,"line":656},[220,8658,1792],{"class":264},[19,8660],{":preset":8661},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#00ffff\",\"radius\":0.6,\"center\":{\"x\":0.4,\"y\":0.5},\"blendMode\":\"screen\"}},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff00ff\",\"radius\":0.6,\"center\":{\"x\":0.6,\"y\":0.5},\"blendMode\":\"difference\"}}]}",[23,8663,8664],{"id":2921},"Opacity",[15,8666,8667,8668,8670,8671,8674,8675,8678],{},"Control layer transparency with the ",[99,8669,2921],{}," prop. Values range from ",[99,8672,8673],{},"0"," (fully transparent) to ",[99,8676,8677],{},"1"," (fully opaque):",[246,8680,8681,8741,8806,8870,8934],{":tabs":1557},[212,8682,8684],{"className":334,"code":8683,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" opacity=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,8685,8686,8694,8702,8706,8733],{"__ignoreMap":178},[220,8687,8688,8690,8692],{"class":222,"line":223},[220,8689,343],{"class":264},[220,8691,347],{"class":346},[220,8693,359],{"class":264},[220,8695,8696,8698,8700],{"class":222,"line":179},[220,8697,364],{"class":264},[220,8699,367],{"class":346},[220,8701,386],{"class":264},[220,8703,8704],{"class":222,"line":389},[220,8705,647],{"emptyLinePlaceholder":194},[220,8707,8708,8710,8712,8714,8716,8718,8720,8722,8724,8727,8729,8731],{"class":222,"line":399},[220,8709,364],{"class":264},[220,8711,2553],{"class":346},[220,8713,1588],{"class":226},[220,8715,353],{"class":264},[220,8717,2560],{"class":230},[220,8719,6202],{"class":226},[220,8721,353],{"class":264},[220,8723,6207],{"class":230},[220,8725,8726],{"class":226}," opacity",[220,8728,353],{"class":264},[220,8730,7681],{"class":230},[220,8732,386],{"class":264},[220,8734,8735,8737,8739],{"class":222,"line":644},[220,8736,402],{"class":264},[220,8738,347],{"class":346},[220,8740,359],{"class":264},[212,8742,8744],{"className":409,"code":8743,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#ff0088\" radius={0.8} opacity={0.5} \u002F>\n\u003C\u002FShader>\n",[99,8745,8746,8754,8762,8766,8798],{"__ignoreMap":178},[220,8747,8748,8750,8752],{"class":222,"line":223},[220,8749,343],{"class":264},[220,8751,347],{"class":420},[220,8753,359],{"class":264},[220,8755,8756,8758,8760],{"class":222,"line":179},[220,8757,364],{"class":264},[220,8759,367],{"class":420},[220,8761,386],{"class":264},[220,8763,8764],{"class":222,"line":389},[220,8765,647],{"emptyLinePlaceholder":194},[220,8767,8768,8770,8772,8774,8776,8778,8780,8782,8784,8786,8788,8790,8792,8794,8796],{"class":222,"line":399},[220,8769,364],{"class":264},[220,8771,2553],{"class":420},[220,8773,1588],{"class":226},[220,8775,353],{"class":260},[220,8777,2560],{"class":230},[220,8779,6202],{"class":226},[220,8781,353],{"class":260},[220,8783,743],{"class":264},[220,8785,6299],{"class":420},[220,8787,2914],{"class":264},[220,8789,2921],{"class":226},[220,8791,353],{"class":260},[220,8793,743],{"class":264},[220,8795,7754],{"class":420},[220,8797,6302],{"class":264},[220,8799,8800,8802,8804],{"class":222,"line":644},[220,8801,402],{"class":264},[220,8803,347],{"class":420},[220,8805,359],{"class":264},[212,8807,8808],{"className":468,"code":8743,"language":469,"meta":178,"style":178},[99,8809,8810,8818,8826,8830,8862],{"__ignoreMap":178},[220,8811,8812,8814,8816],{"class":222,"line":223},[220,8813,343],{"class":264},[220,8815,347],{"class":420},[220,8817,359],{"class":264},[220,8819,8820,8822,8824],{"class":222,"line":179},[220,8821,364],{"class":264},[220,8823,367],{"class":420},[220,8825,386],{"class":264},[220,8827,8828],{"class":222,"line":389},[220,8829,647],{"emptyLinePlaceholder":194},[220,8831,8832,8834,8836,8838,8840,8842,8844,8846,8848,8850,8852,8854,8856,8858,8860],{"class":222,"line":399},[220,8833,364],{"class":264},[220,8835,2553],{"class":420},[220,8837,1588],{"class":226},[220,8839,353],{"class":260},[220,8841,2560],{"class":230},[220,8843,6202],{"class":226},[220,8845,353],{"class":260},[220,8847,743],{"class":264},[220,8849,6299],{"class":420},[220,8851,2914],{"class":264},[220,8853,2921],{"class":226},[220,8855,353],{"class":260},[220,8857,743],{"class":264},[220,8859,7754],{"class":420},[220,8861,6302],{"class":264},[220,8863,8864,8866,8868],{"class":222,"line":644},[220,8865,402],{"class":264},[220,8867,347],{"class":420},[220,8869,359],{"class":264},[212,8871,8872],{"className":468,"code":8743,"language":469,"meta":178,"style":178},[99,8873,8874,8882,8890,8894,8926],{"__ignoreMap":178},[220,8875,8876,8878,8880],{"class":222,"line":223},[220,8877,343],{"class":264},[220,8879,347],{"class":420},[220,8881,359],{"class":264},[220,8883,8884,8886,8888],{"class":222,"line":179},[220,8885,364],{"class":264},[220,8887,367],{"class":420},[220,8889,386],{"class":264},[220,8891,8892],{"class":222,"line":389},[220,8893,647],{"emptyLinePlaceholder":194},[220,8895,8896,8898,8900,8902,8904,8906,8908,8910,8912,8914,8916,8918,8920,8922,8924],{"class":222,"line":399},[220,8897,364],{"class":264},[220,8899,2553],{"class":420},[220,8901,1588],{"class":226},[220,8903,353],{"class":260},[220,8905,2560],{"class":230},[220,8907,6202],{"class":226},[220,8909,353],{"class":260},[220,8911,743],{"class":264},[220,8913,6299],{"class":420},[220,8915,2914],{"class":264},[220,8917,2921],{"class":226},[220,8919,353],{"class":260},[220,8921,743],{"class":264},[220,8923,7754],{"class":420},[220,8925,6302],{"class":264},[220,8927,8928,8930,8932],{"class":222,"line":644},[220,8929,402],{"class":264},[220,8931,347],{"class":420},[220,8933,359],{"class":264},[212,8935,8937],{"className":251,"code":8936,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8, opacity: 0.5 } }\n ]\n})\n",[99,8938,8939,8953,8957,8965,8986,8990],{"__ignoreMap":178},[220,8940,8941,8943,8945,8947,8949,8951],{"class":222,"line":223},[220,8942,1735],{"class":260},[220,8944,1738],{"class":420},[220,8946,1741],{"class":260},[220,8948,1744],{"class":260},[220,8950,1747],{"class":226},[220,8952,1750],{"class":264},[220,8954,8955],{"class":222,"line":179},[220,8956,1765],{"class":264},[220,8958,8959,8961,8963],{"class":222,"line":389},[220,8960,1770],{"class":264},[220,8962,2462],{"class":230},[220,8964,6548],{"class":264},[220,8966,8967,8969,8971,8973,8975,8977,8979,8982,8984],{"class":222,"line":399},[220,8968,1770],{"class":264},[220,8970,3206],{"class":230},[220,8972,1776],{"class":264},[220,8974,3217],{"class":230},[220,8976,6566],{"class":264},[220,8978,6299],{"class":420},[220,8980,8981],{"class":264},", opacity: ",[220,8983,7754],{"class":420},[220,8985,1782],{"class":264},[220,8987,8988],{"class":222,"line":644},[220,8989,1787],{"class":264},[220,8991,8992],{"class":222,"line":650},[220,8993,1792],{"class":264},[19,8995],{":preset":8996},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,8998,8999],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,9001,9003],{"id":9002},"visibility","Visibility",[15,9005,7622,9006,9008,9009,9011,9012,9014],{},[99,9007,2711],{}," prop that defaults to ",[99,9010,2332],{},". Setting it to ",[99,9013,2629],{}," completely removes the component from the composition, as if it wasn't there at all:",[212,9016,9018],{"className":409,"code":9017,"language":411,"meta":178,"style":178},"\u003CCircle visible={false} \u002F>\n",[99,9019,9020],{"__ignoreMap":178},[220,9021,9022,9024,9026,9028,9030,9032,9034],{"class":222,"line":223},[220,9023,343],{"class":264},[220,9025,2553],{"class":420},[220,9027,2618],{"class":226},[220,9029,353],{"class":260},[220,9031,743],{"class":264},[220,9033,2629],{"class":420},[220,9035,6302],{"class":264},[15,9037,9038,9039,9042,9043,9046],{},"This is different from ",[99,9040,9041],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[99,9044,9045],{},"visible={false}"," when you want a component to exist in the tree (perhaps as a mask source) but not appear in the final output.",[23,9048,9050],{"id":9049},"masking","Masking",[15,9052,9053,9054,9057,9058,9061,9062,9065],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[99,9055,9056],{},"id"," property (",[99,9059,9060],{},"string",") and then set ",[99,9063,9064],{},"maskSource"," to that ID on another component to use it as a mask.",[15,9067,9068,9069,9071],{},"Masks typically have ",[99,9070,9045],{}," so they don't appear in the final output—they only control visibility of other components:",[246,9073,9074,9154,9243,9329,9415],{":tabs":1557},[212,9075,9077],{"className":334,"code":9076,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- This circle acts as the mask -->\n \u003CCircle id=\"myMask\" radius=\"0.8\" :visible=\"false\" \u002F>\n\n \u003C!-- This gradient is masked by the circle -->\n \u003CLinearGradient maskSource=\"myMask\" \u002F>\n\u003C\u002FShader>\n",[99,9078,9079,9087,9092,9122,9126,9131,9146],{"__ignoreMap":178},[220,9080,9081,9083,9085],{"class":222,"line":223},[220,9082,343],{"class":264},[220,9084,347],{"class":346},[220,9086,359],{"class":264},[220,9088,9089],{"class":222,"line":179},[220,9090,9091],{"class":609}," \u003C!-- This circle acts as the mask -->\n",[220,9093,9094,9096,9098,9101,9103,9106,9108,9110,9112,9115,9117,9120],{"class":222,"line":389},[220,9095,364],{"class":264},[220,9097,2553],{"class":346},[220,9099,9100],{"class":226}," id",[220,9102,353],{"class":264},[220,9104,9105],{"class":230},"\"myMask\"",[220,9107,6202],{"class":226},[220,9109,353],{"class":264},[220,9111,6207],{"class":230},[220,9113,9114],{"class":226}," :visible",[220,9116,353],{"class":264},[220,9118,9119],{"class":230},"\"false\"",[220,9121,386],{"class":264},[220,9123,9124],{"class":222,"line":399},[220,9125,647],{"emptyLinePlaceholder":194},[220,9127,9128],{"class":222,"line":644},[220,9129,9130],{"class":609}," \u003C!-- This gradient is masked by the circle -->\n",[220,9132,9133,9135,9137,9140,9142,9144],{"class":222,"line":650},[220,9134,364],{"class":264},[220,9136,367],{"class":346},[220,9138,9139],{"class":226}," maskSource",[220,9141,353],{"class":264},[220,9143,9105],{"class":230},[220,9145,386],{"class":264},[220,9147,9148,9150,9152],{"class":222,"line":656},[220,9149,402],{"class":264},[220,9151,347],{"class":346},[220,9153,359],{"class":264},[212,9155,9157],{"className":409,"code":9156,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* This circle acts as the mask *\u002F}\n \u003CCircle id=\"myMask\" radius={0.8} visible={false} \u002F>\n\n {\u002F* This gradient is masked by the circle *\u002F}\n \u003CLinearGradient maskSource=\"myMask\" \u002F>\n\u003C\u002FShader>\n",[99,9158,9159,9167,9176,9208,9212,9221,9235],{"__ignoreMap":178},[220,9160,9161,9163,9165],{"class":222,"line":223},[220,9162,343],{"class":264},[220,9164,347],{"class":420},[220,9166,359],{"class":264},[220,9168,9169,9171,9174],{"class":222,"line":179},[220,9170,1999],{"class":264},[220,9172,9173],{"class":609},"\u002F* This circle acts as the mask *\u002F",[220,9175,749],{"class":264},[220,9177,9178,9180,9182,9184,9186,9188,9190,9192,9194,9196,9198,9200,9202,9204,9206],{"class":222,"line":389},[220,9179,364],{"class":264},[220,9181,2553],{"class":420},[220,9183,9100],{"class":226},[220,9185,353],{"class":260},[220,9187,9105],{"class":230},[220,9189,6202],{"class":226},[220,9191,353],{"class":260},[220,9193,743],{"class":264},[220,9195,6299],{"class":420},[220,9197,2914],{"class":264},[220,9199,2711],{"class":226},[220,9201,353],{"class":260},[220,9203,743],{"class":264},[220,9205,2629],{"class":420},[220,9207,6302],{"class":264},[220,9209,9210],{"class":222,"line":399},[220,9211,647],{"emptyLinePlaceholder":194},[220,9213,9214,9216,9219],{"class":222,"line":644},[220,9215,1999],{"class":264},[220,9217,9218],{"class":609},"\u002F* This gradient is masked by the circle *\u002F",[220,9220,749],{"class":264},[220,9222,9223,9225,9227,9229,9231,9233],{"class":222,"line":650},[220,9224,364],{"class":264},[220,9226,367],{"class":420},[220,9228,9139],{"class":226},[220,9230,353],{"class":260},[220,9232,9105],{"class":230},[220,9234,386],{"class":264},[220,9236,9237,9239,9241],{"class":222,"line":656},[220,9238,402],{"class":264},[220,9240,347],{"class":420},[220,9242,359],{"class":264},[212,9244,9245],{"className":468,"code":9156,"language":469,"meta":178,"style":178},[99,9246,9247,9255,9263,9295,9299,9307,9321],{"__ignoreMap":178},[220,9248,9249,9251,9253],{"class":222,"line":223},[220,9250,343],{"class":264},[220,9252,347],{"class":420},[220,9254,359],{"class":264},[220,9256,9257,9259,9261],{"class":222,"line":179},[220,9258,1999],{"class":264},[220,9260,9173],{"class":609},[220,9262,749],{"class":264},[220,9264,9265,9267,9269,9271,9273,9275,9277,9279,9281,9283,9285,9287,9289,9291,9293],{"class":222,"line":389},[220,9266,364],{"class":264},[220,9268,2553],{"class":420},[220,9270,9100],{"class":226},[220,9272,353],{"class":260},[220,9274,9105],{"class":230},[220,9276,6202],{"class":226},[220,9278,353],{"class":260},[220,9280,743],{"class":264},[220,9282,6299],{"class":420},[220,9284,2914],{"class":264},[220,9286,2711],{"class":226},[220,9288,353],{"class":260},[220,9290,743],{"class":264},[220,9292,2629],{"class":420},[220,9294,6302],{"class":264},[220,9296,9297],{"class":222,"line":399},[220,9298,647],{"emptyLinePlaceholder":194},[220,9300,9301,9303,9305],{"class":222,"line":644},[220,9302,1999],{"class":264},[220,9304,9218],{"class":609},[220,9306,749],{"class":264},[220,9308,9309,9311,9313,9315,9317,9319],{"class":222,"line":650},[220,9310,364],{"class":264},[220,9312,367],{"class":420},[220,9314,9139],{"class":226},[220,9316,353],{"class":260},[220,9318,9105],{"class":230},[220,9320,386],{"class":264},[220,9322,9323,9325,9327],{"class":222,"line":656},[220,9324,402],{"class":264},[220,9326,347],{"class":420},[220,9328,359],{"class":264},[212,9330,9331],{"className":468,"code":9156,"language":469,"meta":178,"style":178},[99,9332,9333,9341,9349,9381,9385,9393,9407],{"__ignoreMap":178},[220,9334,9335,9337,9339],{"class":222,"line":223},[220,9336,343],{"class":264},[220,9338,347],{"class":420},[220,9340,359],{"class":264},[220,9342,9343,9345,9347],{"class":222,"line":179},[220,9344,1999],{"class":264},[220,9346,9173],{"class":609},[220,9348,749],{"class":264},[220,9350,9351,9353,9355,9357,9359,9361,9363,9365,9367,9369,9371,9373,9375,9377,9379],{"class":222,"line":389},[220,9352,364],{"class":264},[220,9354,2553],{"class":420},[220,9356,9100],{"class":226},[220,9358,353],{"class":260},[220,9360,9105],{"class":230},[220,9362,6202],{"class":226},[220,9364,353],{"class":260},[220,9366,743],{"class":264},[220,9368,6299],{"class":420},[220,9370,2914],{"class":264},[220,9372,2711],{"class":226},[220,9374,353],{"class":260},[220,9376,743],{"class":264},[220,9378,2629],{"class":420},[220,9380,6302],{"class":264},[220,9382,9383],{"class":222,"line":399},[220,9384,647],{"emptyLinePlaceholder":194},[220,9386,9387,9389,9391],{"class":222,"line":644},[220,9388,1999],{"class":264},[220,9390,9218],{"class":609},[220,9392,749],{"class":264},[220,9394,9395,9397,9399,9401,9403,9405],{"class":222,"line":650},[220,9396,364],{"class":264},[220,9398,367],{"class":420},[220,9400,9139],{"class":226},[220,9402,353],{"class":260},[220,9404,9105],{"class":230},[220,9406,386],{"class":264},[220,9408,9409,9411,9413],{"class":222,"line":656},[220,9410,402],{"class":264},[220,9412,347],{"class":420},[220,9414,359],{"class":264},[212,9416,9418],{"className":251,"code":9417,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'myMask', props: { radius: 0.8, visible: false } },\n { type: 'LinearGradient', props: { maskSource: 'myMask' } }\n ]\n})\n",[99,9419,9420,9434,9438,9460,9473,9477],{"__ignoreMap":178},[220,9421,9422,9424,9426,9428,9430,9432],{"class":222,"line":223},[220,9423,1735],{"class":260},[220,9425,1738],{"class":420},[220,9427,1741],{"class":260},[220,9429,1744],{"class":260},[220,9431,1747],{"class":226},[220,9433,1750],{"class":264},[220,9435,9436],{"class":222,"line":179},[220,9437,1765],{"class":264},[220,9439,9440,9442,9444,9446,9449,9451,9453,9456,9458],{"class":222,"line":389},[220,9441,1770],{"class":264},[220,9443,3206],{"class":230},[220,9445,3209],{"class":264},[220,9447,9448],{"class":230},"'myMask'",[220,9450,7541],{"class":264},[220,9452,6299],{"class":420},[220,9454,9455],{"class":264},", visible: ",[220,9457,2629],{"class":420},[220,9459,6571],{"class":264},[220,9461,9462,9464,9466,9469,9471],{"class":222,"line":399},[220,9463,1770],{"class":264},[220,9465,2462],{"class":230},[220,9467,9468],{"class":264},", props: { maskSource: ",[220,9470,9448],{"class":230},[220,9472,1782],{"class":264},[220,9474,9475],{"class":222,"line":644},[220,9476,1787],{"class":264},[220,9478,9479],{"class":222,"line":650},[220,9480,1792],{"class":264},[19,9482],{":preset":9483},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,9485,9486,9487,4836],{},"Note that layer order doesn't matter for masking, you can render the mask on top or below of the layer that's using it. Most of the time this won't matter anyway, as you'll likely have the mask layer set to ",[99,9488,9045],{},[3262,9490,9492],{"id":9491},"mask-types","Mask Types",[15,9494,9495,9496,9499],{},"Control how the mask is interpreted with the ",[99,9497,9498],{},"maskType"," prop:",[34,9501,9502,9510,9518,9526],{},[37,9503,9504,9509],{},[159,9505,9506],{},[99,9507,9508],{},"alpha",": Uses the mask's alpha channel (default)",[37,9511,9512,9517],{},[159,9513,9514],{},[99,9515,9516],{},"alphaInverted",": Uses the inverted alpha channel",[37,9519,9520,9525],{},[159,9521,9522],{},[99,9523,9524],{},"luminance",": Uses the mask's brightness",[37,9527,9528,9533],{},[159,9529,9530],{},[99,9531,9532],{},"luminanceInverted",": Uses the inverted brightness",[246,9535,9536,9685,9833,9977,10121],{":tabs":1557},[212,9537,9539],{"className":334,"code":9538,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003C!-- Hidden checkerboard mask controls visibility -->\n \u003CCheckerboard\n id=\"mask\"\n colorA=\"#ffffff\"\n colorB=\"#111111\"\n :visible=\"false\"\n \u002F>\n\n \u003C!-- Visible where mask is bright -->\n \u003CCircle\n color=\"#ff0088\"\n radius=\"0.8\"\n maskSource=\"mask\"\n maskType=\"luminance\"\n \u002F>\n\u003C\u002FShader>\n",[99,9540,9541,9549,9557,9561,9566,9573,9583,9592,9601,9611,9615,9619,9624,9631,9641,9651,9660,9671,9676],{"__ignoreMap":178},[220,9542,9543,9545,9547],{"class":222,"line":223},[220,9544,343],{"class":264},[220,9546,347],{"class":346},[220,9548,359],{"class":264},[220,9550,9551,9553,9555],{"class":222,"line":179},[220,9552,364],{"class":264},[220,9554,367],{"class":346},[220,9556,386],{"class":264},[220,9558,9559],{"class":222,"line":389},[220,9560,647],{"emptyLinePlaceholder":194},[220,9562,9563],{"class":222,"line":399},[220,9564,9565],{"class":609}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[220,9567,9568,9570],{"class":222,"line":644},[220,9569,364],{"class":264},[220,9571,9572],{"class":346},"Checkerboard\n",[220,9574,9575,9578,9580],{"class":222,"line":650},[220,9576,9577],{"class":226}," id",[220,9579,353],{"class":264},[220,9581,9582],{"class":230},"\"mask\"\n",[220,9584,9585,9587,9589],{"class":222,"line":656},[220,9586,1194],{"class":226},[220,9588,353],{"class":264},[220,9590,9591],{"class":230},"\"#ffffff\"\n",[220,9593,9594,9596,9598],{"class":222,"line":673},[220,9595,1204],{"class":226},[220,9597,353],{"class":264},[220,9599,9600],{"class":230},"\"#111111\"\n",[220,9602,9603,9606,9608],{"class":222,"line":682},[220,9604,9605],{"class":226}," :visible",[220,9607,353],{"class":264},[220,9609,9610],{"class":230},"\"false\"\n",[220,9612,9613],{"class":222,"line":691},[220,9614,1234],{"class":264},[220,9616,9617],{"class":222,"line":696},[220,9618,647],{"emptyLinePlaceholder":194},[220,9620,9621],{"class":222,"line":702},[220,9622,9623],{"class":609}," \u003C!-- Visible where mask is bright -->\n",[220,9625,9626,9628],{"class":222,"line":718},[220,9627,364],{"class":264},[220,9629,9630],{"class":346},"Circle\n",[220,9632,9633,9636,9638],{"class":222,"line":727},[220,9634,9635],{"class":226}," color",[220,9637,353],{"class":264},[220,9639,9640],{"class":230},"\"#ff0088\"\n",[220,9642,9643,9646,9648],{"class":222,"line":2664},[220,9644,9645],{"class":226}," radius",[220,9647,353],{"class":264},[220,9649,9650],{"class":230},"\"0.8\"\n",[220,9652,9653,9656,9658],{"class":222,"line":3522},[220,9654,9655],{"class":226}," maskSource",[220,9657,353],{"class":264},[220,9659,9582],{"class":230},[220,9661,9663,9666,9668],{"class":222,"line":9662},17,[220,9664,9665],{"class":226}," maskType",[220,9667,353],{"class":264},[220,9669,9670],{"class":230},"\"luminance\"\n",[220,9672,9674],{"class":222,"line":9673},18,[220,9675,1234],{"class":264},[220,9677,9679,9681,9683],{"class":222,"line":9678},19,[220,9680,402],{"class":264},[220,9682,347],{"class":346},[220,9684,359],{"class":264},[212,9686,9688],{"className":409,"code":9687,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n {\u002F* Hidden checkerboard mask controls visibility *\u002F}\n \u003CCheckerboard\n id=\"mask\"\n colorA=\"#ffffff\"\n colorB=\"#111111\"\n visible={false}\n \u002F>\n\n {\u002F* Visible where mask is bright *\u002F}\n \u003CCircle\n color=\"#ff0088\"\n radius={0.8}\n maskSource=\"mask\"\n maskType=\"luminance\"\n \u002F>\n\u003C\u002FShader>\n",[99,9689,9690,9698,9706,9710,9719,9725,9733,9741,9749,9762,9766,9770,9779,9785,9793,9805,9813,9821,9825],{"__ignoreMap":178},[220,9691,9692,9694,9696],{"class":222,"line":223},[220,9693,343],{"class":264},[220,9695,347],{"class":420},[220,9697,359],{"class":264},[220,9699,9700,9702,9704],{"class":222,"line":179},[220,9701,364],{"class":264},[220,9703,367],{"class":420},[220,9705,386],{"class":264},[220,9707,9708],{"class":222,"line":389},[220,9709,647],{"emptyLinePlaceholder":194},[220,9711,9712,9714,9717],{"class":222,"line":399},[220,9713,1999],{"class":264},[220,9715,9716],{"class":609},"\u002F* Hidden checkerboard mask controls visibility *\u002F",[220,9718,749],{"class":264},[220,9720,9721,9723],{"class":222,"line":644},[220,9722,364],{"class":264},[220,9724,9572],{"class":420},[220,9726,9727,9729,9731],{"class":222,"line":650},[220,9728,9577],{"class":226},[220,9730,353],{"class":260},[220,9732,9582],{"class":230},[220,9734,9735,9737,9739],{"class":222,"line":656},[220,9736,1194],{"class":226},[220,9738,353],{"class":260},[220,9740,9591],{"class":230},[220,9742,9743,9745,9747],{"class":222,"line":673},[220,9744,1204],{"class":226},[220,9746,353],{"class":260},[220,9748,9600],{"class":230},[220,9750,9751,9754,9756,9758,9760],{"class":222,"line":682},[220,9752,9753],{"class":226}," visible",[220,9755,353],{"class":260},[220,9757,743],{"class":264},[220,9759,2629],{"class":420},[220,9761,749],{"class":264},[220,9763,9764],{"class":222,"line":691},[220,9765,1234],{"class":264},[220,9767,9768],{"class":222,"line":696},[220,9769,647],{"emptyLinePlaceholder":194},[220,9771,9772,9774,9777],{"class":222,"line":702},[220,9773,1999],{"class":264},[220,9775,9776],{"class":609},"\u002F* Visible where mask is bright *\u002F",[220,9778,749],{"class":264},[220,9780,9781,9783],{"class":222,"line":718},[220,9782,364],{"class":264},[220,9784,9630],{"class":420},[220,9786,9787,9789,9791],{"class":222,"line":727},[220,9788,9635],{"class":226},[220,9790,353],{"class":260},[220,9792,9640],{"class":230},[220,9794,9795,9797,9799,9801,9803],{"class":222,"line":2664},[220,9796,9645],{"class":226},[220,9798,353],{"class":260},[220,9800,743],{"class":264},[220,9802,6299],{"class":420},[220,9804,749],{"class":264},[220,9806,9807,9809,9811],{"class":222,"line":3522},[220,9808,9655],{"class":226},[220,9810,353],{"class":260},[220,9812,9582],{"class":230},[220,9814,9815,9817,9819],{"class":222,"line":9662},[220,9816,9665],{"class":226},[220,9818,353],{"class":260},[220,9820,9670],{"class":230},[220,9822,9823],{"class":222,"line":9673},[220,9824,1234],{"class":264},[220,9826,9827,9829,9831],{"class":222,"line":9678},[220,9828,402],{"class":264},[220,9830,347],{"class":420},[220,9832,359],{"class":264},[212,9834,9835],{"className":468,"code":9687,"language":469,"meta":178,"style":178},[99,9836,9837,9845,9853,9857,9865,9871,9879,9887,9895,9907,9911,9915,9923,9929,9937,9949,9957,9965,9969],{"__ignoreMap":178},[220,9838,9839,9841,9843],{"class":222,"line":223},[220,9840,343],{"class":264},[220,9842,347],{"class":420},[220,9844,359],{"class":264},[220,9846,9847,9849,9851],{"class":222,"line":179},[220,9848,364],{"class":264},[220,9850,367],{"class":420},[220,9852,386],{"class":264},[220,9854,9855],{"class":222,"line":389},[220,9856,647],{"emptyLinePlaceholder":194},[220,9858,9859,9861,9863],{"class":222,"line":399},[220,9860,1999],{"class":264},[220,9862,9716],{"class":609},[220,9864,749],{"class":264},[220,9866,9867,9869],{"class":222,"line":644},[220,9868,364],{"class":264},[220,9870,9572],{"class":420},[220,9872,9873,9875,9877],{"class":222,"line":650},[220,9874,9577],{"class":226},[220,9876,353],{"class":260},[220,9878,9582],{"class":230},[220,9880,9881,9883,9885],{"class":222,"line":656},[220,9882,1194],{"class":226},[220,9884,353],{"class":260},[220,9886,9591],{"class":230},[220,9888,9889,9891,9893],{"class":222,"line":673},[220,9890,1204],{"class":226},[220,9892,353],{"class":260},[220,9894,9600],{"class":230},[220,9896,9897,9899,9901,9903,9905],{"class":222,"line":682},[220,9898,9753],{"class":226},[220,9900,353],{"class":260},[220,9902,743],{"class":264},[220,9904,2629],{"class":420},[220,9906,749],{"class":264},[220,9908,9909],{"class":222,"line":691},[220,9910,1234],{"class":264},[220,9912,9913],{"class":222,"line":696},[220,9914,647],{"emptyLinePlaceholder":194},[220,9916,9917,9919,9921],{"class":222,"line":702},[220,9918,1999],{"class":264},[220,9920,9776],{"class":609},[220,9922,749],{"class":264},[220,9924,9925,9927],{"class":222,"line":718},[220,9926,364],{"class":264},[220,9928,9630],{"class":420},[220,9930,9931,9933,9935],{"class":222,"line":727},[220,9932,9635],{"class":226},[220,9934,353],{"class":260},[220,9936,9640],{"class":230},[220,9938,9939,9941,9943,9945,9947],{"class":222,"line":2664},[220,9940,9645],{"class":226},[220,9942,353],{"class":260},[220,9944,743],{"class":264},[220,9946,6299],{"class":420},[220,9948,749],{"class":264},[220,9950,9951,9953,9955],{"class":222,"line":3522},[220,9952,9655],{"class":226},[220,9954,353],{"class":260},[220,9956,9582],{"class":230},[220,9958,9959,9961,9963],{"class":222,"line":9662},[220,9960,9665],{"class":226},[220,9962,353],{"class":260},[220,9964,9670],{"class":230},[220,9966,9967],{"class":222,"line":9673},[220,9968,1234],{"class":264},[220,9970,9971,9973,9975],{"class":222,"line":9678},[220,9972,402],{"class":264},[220,9974,347],{"class":420},[220,9976,359],{"class":264},[212,9978,9979],{"className":468,"code":9687,"language":469,"meta":178,"style":178},[99,9980,9981,9989,9997,10001,10009,10015,10023,10031,10039,10051,10055,10059,10067,10073,10081,10093,10101,10109,10113],{"__ignoreMap":178},[220,9982,9983,9985,9987],{"class":222,"line":223},[220,9984,343],{"class":264},[220,9986,347],{"class":420},[220,9988,359],{"class":264},[220,9990,9991,9993,9995],{"class":222,"line":179},[220,9992,364],{"class":264},[220,9994,367],{"class":420},[220,9996,386],{"class":264},[220,9998,9999],{"class":222,"line":389},[220,10000,647],{"emptyLinePlaceholder":194},[220,10002,10003,10005,10007],{"class":222,"line":399},[220,10004,1999],{"class":264},[220,10006,9716],{"class":609},[220,10008,749],{"class":264},[220,10010,10011,10013],{"class":222,"line":644},[220,10012,364],{"class":264},[220,10014,9572],{"class":420},[220,10016,10017,10019,10021],{"class":222,"line":650},[220,10018,9577],{"class":226},[220,10020,353],{"class":260},[220,10022,9582],{"class":230},[220,10024,10025,10027,10029],{"class":222,"line":656},[220,10026,1194],{"class":226},[220,10028,353],{"class":260},[220,10030,9591],{"class":230},[220,10032,10033,10035,10037],{"class":222,"line":673},[220,10034,1204],{"class":226},[220,10036,353],{"class":260},[220,10038,9600],{"class":230},[220,10040,10041,10043,10045,10047,10049],{"class":222,"line":682},[220,10042,9753],{"class":226},[220,10044,353],{"class":260},[220,10046,743],{"class":264},[220,10048,2629],{"class":420},[220,10050,749],{"class":264},[220,10052,10053],{"class":222,"line":691},[220,10054,1234],{"class":264},[220,10056,10057],{"class":222,"line":696},[220,10058,647],{"emptyLinePlaceholder":194},[220,10060,10061,10063,10065],{"class":222,"line":702},[220,10062,1999],{"class":264},[220,10064,9776],{"class":609},[220,10066,749],{"class":264},[220,10068,10069,10071],{"class":222,"line":718},[220,10070,364],{"class":264},[220,10072,9630],{"class":420},[220,10074,10075,10077,10079],{"class":222,"line":727},[220,10076,9635],{"class":226},[220,10078,353],{"class":260},[220,10080,9640],{"class":230},[220,10082,10083,10085,10087,10089,10091],{"class":222,"line":2664},[220,10084,9645],{"class":226},[220,10086,353],{"class":260},[220,10088,743],{"class":264},[220,10090,6299],{"class":420},[220,10092,749],{"class":264},[220,10094,10095,10097,10099],{"class":222,"line":3522},[220,10096,9655],{"class":226},[220,10098,353],{"class":260},[220,10100,9582],{"class":230},[220,10102,10103,10105,10107],{"class":222,"line":9662},[220,10104,9665],{"class":226},[220,10106,353],{"class":260},[220,10108,9670],{"class":230},[220,10110,10111],{"class":222,"line":9673},[220,10112,1234],{"class":264},[220,10114,10115,10117,10119],{"class":222,"line":9678},[220,10116,402],{"class":264},[220,10118,347],{"class":420},[220,10120,359],{"class":264},[212,10122,10124],{"className":251,"code":10123,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Checkerboard', id: 'mask', props: { colorA: '#ffffff', colorB: '#111111', visible: false } },\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8, maskSource: 'mask', maskType: 'luminance' } }\n ]\n})\n",[99,10125,10126,10140,10144,10152,10182,10209,10213],{"__ignoreMap":178},[220,10127,10128,10130,10132,10134,10136,10138],{"class":222,"line":223},[220,10129,1735],{"class":260},[220,10131,1738],{"class":420},[220,10133,1741],{"class":260},[220,10135,1744],{"class":260},[220,10137,1747],{"class":226},[220,10139,1750],{"class":264},[220,10141,10142],{"class":222,"line":179},[220,10143,1765],{"class":264},[220,10145,10146,10148,10150],{"class":222,"line":389},[220,10147,1770],{"class":264},[220,10149,2462],{"class":230},[220,10151,6548],{"class":264},[220,10153,10154,10156,10159,10161,10164,10167,10170,10173,10176,10178,10180],{"class":222,"line":399},[220,10155,1770],{"class":264},[220,10157,10158],{"class":230},"'Checkerboard'",[220,10160,3209],{"class":264},[220,10162,10163],{"class":230},"'mask'",[220,10165,10166],{"class":264},", props: { colorA: ",[220,10168,10169],{"class":230},"'#ffffff'",[220,10171,10172],{"class":264},", colorB: ",[220,10174,10175],{"class":230},"'#111111'",[220,10177,9455],{"class":264},[220,10179,2629],{"class":420},[220,10181,6571],{"class":264},[220,10183,10184,10186,10188,10190,10192,10194,10196,10199,10201,10204,10207],{"class":222,"line":644},[220,10185,1770],{"class":264},[220,10187,3206],{"class":230},[220,10189,1776],{"class":264},[220,10191,3217],{"class":230},[220,10193,6566],{"class":264},[220,10195,6299],{"class":420},[220,10197,10198],{"class":264},", maskSource: ",[220,10200,10163],{"class":230},[220,10202,10203],{"class":264},", maskType: ",[220,10205,10206],{"class":230},"'luminance'",[220,10208,1782],{"class":264},[220,10210,10211],{"class":222,"line":650},[220,10212,1787],{"class":264},[220,10214,10215],{"class":222,"line":656},[220,10216,1792],{"class":264},[19,10218],{":preset":10219},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Checkerboard\",\"id\":\"mask\",\"props\":{\"colorA\":\"#ffffff\",\"colorB\":\"#111111\",\"visible\":false}},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"maskSource\":\"mask\",\"maskType\":\"luminance\"}}]}",[1504,10221,7594],{},{"title":178,"searchDepth":179,"depth":179,"links":10223},[10224,10227,10228,10229],{"id":7618,"depth":179,"text":7619,"children":10225},[10226],{"id":8079,"depth":389,"text":8080},{"id":2921,"depth":179,"text":8664},{"id":9002,"depth":179,"text":9003},{"id":9049,"depth":179,"text":9050,"children":10230},[10231],{"id":9491,"depth":389,"text":9492},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"\u002Fdocs\u002Fguide\u002Fblending-masking",{"title":7607,"description":10233},"docs\u002Fguide\u002F3.blending-masking","YqBfXcyRMRK8pVXV7hqZ8VYJ-jMY9RGTV6Vuw9caP1A",{"id":10241,"title":1496,"body":10242,"category":10232,"description":12233,"exclude":190,"extension":191,"forceFramework":190,"icon":12234,"meta":12235,"navigation":194,"path":1495,"seo":12236,"stem":12237,"__hash__":12238},"guide\u002Fdocs\u002Fguide\u002F4.props-reactivity.md",{"type":8,"value":10243,"toc":12226},[10244,10247,10250,10254,10257,10474,10477,10481,10484,11643,11646,11651,11654,11658,11661,11666,11709,11714,11753,11758,11809,11814,11840,11843,11847,11850,11856,12186,12190,12193,12197,12200,12220,12223],[11,10245,1496],{"id":10246},"props-reactivity",[15,10248,10249],{},"Every shader component accepts props that control its appearance and behavior. These props are fully reactive—change a value in your component state, and the shader updates instantly.",[23,10251,10253],{"id":10252},"basic-props","Basic Props",[15,10255,10256],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[246,10258,10259,10300,10343,10385,10427],{":tabs":1557},[212,10260,10262],{"className":334,"code":10261,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,10263,10264,10272,10292],{"__ignoreMap":178},[220,10265,10266,10268,10270],{"class":222,"line":223},[220,10267,343],{"class":264},[220,10269,347],{"class":346},[220,10271,359],{"class":264},[220,10273,10274,10276,10278,10280,10282,10284,10286,10288,10290],{"class":222,"line":179},[220,10275,364],{"class":264},[220,10277,2553],{"class":346},[220,10279,1588],{"class":226},[220,10281,353],{"class":264},[220,10283,2560],{"class":230},[220,10285,6202],{"class":226},[220,10287,353],{"class":264},[220,10289,7681],{"class":230},[220,10291,386],{"class":264},[220,10293,10294,10296,10298],{"class":222,"line":389},[220,10295,402],{"class":264},[220,10297,347],{"class":346},[220,10299,359],{"class":264},[212,10301,10303],{"className":409,"code":10302,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} \u002F>\n\u003C\u002FShader>\n",[99,10304,10305,10313,10335],{"__ignoreMap":178},[220,10306,10307,10309,10311],{"class":222,"line":223},[220,10308,343],{"class":264},[220,10310,347],{"class":420},[220,10312,359],{"class":264},[220,10314,10315,10317,10319,10321,10323,10325,10327,10329,10331,10333],{"class":222,"line":179},[220,10316,364],{"class":264},[220,10318,2553],{"class":420},[220,10320,1588],{"class":226},[220,10322,353],{"class":260},[220,10324,2560],{"class":230},[220,10326,6202],{"class":226},[220,10328,353],{"class":260},[220,10330,743],{"class":264},[220,10332,7754],{"class":420},[220,10334,6302],{"class":264},[220,10336,10337,10339,10341],{"class":222,"line":389},[220,10338,402],{"class":264},[220,10340,347],{"class":420},[220,10342,359],{"class":264},[212,10344,10345],{"className":468,"code":10302,"language":469,"meta":178,"style":178},[99,10346,10347,10355,10377],{"__ignoreMap":178},[220,10348,10349,10351,10353],{"class":222,"line":223},[220,10350,343],{"class":264},[220,10352,347],{"class":420},[220,10354,359],{"class":264},[220,10356,10357,10359,10361,10363,10365,10367,10369,10371,10373,10375],{"class":222,"line":179},[220,10358,364],{"class":264},[220,10360,2553],{"class":420},[220,10362,1588],{"class":226},[220,10364,353],{"class":260},[220,10366,2560],{"class":230},[220,10368,6202],{"class":226},[220,10370,353],{"class":260},[220,10372,743],{"class":264},[220,10374,7754],{"class":420},[220,10376,6302],{"class":264},[220,10378,10379,10381,10383],{"class":222,"line":389},[220,10380,402],{"class":264},[220,10382,347],{"class":420},[220,10384,359],{"class":264},[212,10386,10387],{"className":468,"code":10302,"language":469,"meta":178,"style":178},[99,10388,10389,10397,10419],{"__ignoreMap":178},[220,10390,10391,10393,10395],{"class":222,"line":223},[220,10392,343],{"class":264},[220,10394,347],{"class":420},[220,10396,359],{"class":264},[220,10398,10399,10401,10403,10405,10407,10409,10411,10413,10415,10417],{"class":222,"line":179},[220,10400,364],{"class":264},[220,10402,2553],{"class":420},[220,10404,1588],{"class":226},[220,10406,353],{"class":260},[220,10408,2560],{"class":230},[220,10410,6202],{"class":226},[220,10412,353],{"class":260},[220,10414,743],{"class":264},[220,10416,7754],{"class":420},[220,10418,6302],{"class":264},[220,10420,10421,10423,10425],{"class":222,"line":389},[220,10422,402],{"class":264},[220,10424,347],{"class":420},[220,10426,359],{"class":264},[212,10428,10430],{"className":251,"code":10429,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.5 } }\n ]\n})\n",[99,10431,10432,10446,10450,10466,10470],{"__ignoreMap":178},[220,10433,10434,10436,10438,10440,10442,10444],{"class":222,"line":223},[220,10435,1735],{"class":260},[220,10437,1738],{"class":420},[220,10439,1741],{"class":260},[220,10441,1744],{"class":260},[220,10443,1747],{"class":226},[220,10445,1750],{"class":264},[220,10447,10448],{"class":222,"line":179},[220,10449,1765],{"class":264},[220,10451,10452,10454,10456,10458,10460,10462,10464],{"class":222,"line":389},[220,10453,1770],{"class":264},[220,10455,3206],{"class":230},[220,10457,1776],{"class":264},[220,10459,3217],{"class":230},[220,10461,6566],{"class":264},[220,10463,7754],{"class":420},[220,10465,1782],{"class":264},[220,10467,10468],{"class":222,"line":399},[220,10469,1787],{"class":264},[220,10471,10472],{"class":222,"line":644},[220,10473,1792],{"class":264},[15,10475,10476],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,10478,10480],{"id":10479},"reactive-props","Reactive Props",[15,10482,10483],{},"Bind props to your component's state, and the shader updates automatically when the state changes. This happens efficiently—prop changes update GPU uniforms directly without recompiling shaders.",[246,10485,10486,10718,11007,11228,11501],{":tabs":1557},[212,10487,10489],{"className":334,"code":10488,"language":336,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Fvue'\n\nconst angle = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cbutton @click=\"angle += 45\">Rotate +45°\u003C\u002Fbutton>\n \u003Cbutton @click=\"angle -= 45\">Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton @click=\"angle = 0\">Reset\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius=\"0.8\" :visible=\"false\" \u002F>\n \u003CLinearGradient :angle=\"angle\" maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,10490,10491,10501,10511,10522,10526,10543,10551,10555,10563,10571,10593,10613,10633,10641,10645,10653,10680,10702,10710],{"__ignoreMap":178},[220,10492,10493,10495,10497,10499],{"class":222,"line":223},[220,10494,343],{"class":264},[220,10496,2590],{"class":346},[220,10498,2593],{"class":226},[220,10500,359],{"class":264},[220,10502,10503,10505,10507,10509],{"class":222,"line":179},[220,10504,261],{"class":260},[220,10506,2602],{"class":264},[220,10508,268],{"class":260},[220,10510,2607],{"class":230},[220,10512,10513,10515,10518,10520],{"class":222,"line":389},[220,10514,261],{"class":260},[220,10516,10517],{"class":264}," { Shader, LinearGradient, Circle } ",[220,10519,268],{"class":260},[220,10521,271],{"class":230},[220,10523,10524],{"class":222,"line":399},[220,10525,647],{"emptyLinePlaceholder":194},[220,10527,10528,10530,10533,10535,10537,10539,10541],{"class":222,"line":644},[220,10529,1735],{"class":260},[220,10531,10532],{"class":420}," angle",[220,10534,1741],{"class":260},[220,10536,2623],{"class":226},[220,10538,2626],{"class":264},[220,10540,8673],{"class":420},[220,10542,2632],{"class":264},[220,10544,10545,10547,10549],{"class":222,"line":650},[220,10546,402],{"class":264},[220,10548,2590],{"class":346},[220,10550,359],{"class":264},[220,10552,10553],{"class":222,"line":656},[220,10554,647],{"emptyLinePlaceholder":194},[220,10556,10557,10559,10561],{"class":222,"line":673},[220,10558,343],{"class":264},[220,10560,2519],{"class":346},[220,10562,359],{"class":264},[220,10564,10565,10567,10569],{"class":222,"line":682},[220,10566,364],{"class":264},[220,10568,3398],{"class":346},[220,10570,359],{"class":264},[220,10572,10573,10575,10578,10581,10583,10586,10589,10591],{"class":222,"line":691},[220,10574,2550],{"class":264},[220,10576,10577],{"class":346},"button",[220,10579,10580],{"class":226}," @click",[220,10582,353],{"class":264},[220,10584,10585],{"class":230},"\"angle += 45\"",[220,10587,10588],{"class":264},">Rotate +45°\u003C\u002F",[220,10590,10577],{"class":346},[220,10592,359],{"class":264},[220,10594,10595,10597,10599,10601,10603,10606,10609,10611],{"class":222,"line":696},[220,10596,2550],{"class":264},[220,10598,10577],{"class":346},[220,10600,10580],{"class":226},[220,10602,353],{"class":264},[220,10604,10605],{"class":230},"\"angle -= 45\"",[220,10607,10608],{"class":264},">Rotate -45°\u003C\u002F",[220,10610,10577],{"class":346},[220,10612,359],{"class":264},[220,10614,10615,10617,10619,10621,10623,10626,10629,10631],{"class":222,"line":702},[220,10616,2550],{"class":264},[220,10618,10577],{"class":346},[220,10620,10580],{"class":226},[220,10622,353],{"class":264},[220,10624,10625],{"class":230},"\"angle = 0\"",[220,10627,10628],{"class":264},">Reset\u003C\u002F",[220,10630,10577],{"class":346},[220,10632,359],{"class":264},[220,10634,10635,10637,10639],{"class":222,"line":718},[220,10636,2567],{"class":264},[220,10638,3398],{"class":346},[220,10640,359],{"class":264},[220,10642,10643],{"class":222,"line":727},[220,10644,647],{"emptyLinePlaceholder":194},[220,10646,10647,10649,10651],{"class":222,"line":2664},[220,10648,364],{"class":264},[220,10650,347],{"class":346},[220,10652,359],{"class":264},[220,10654,10655,10657,10659,10661,10663,10666,10668,10670,10672,10674,10676,10678],{"class":222,"line":3522},[220,10656,2550],{"class":264},[220,10658,2553],{"class":346},[220,10660,9100],{"class":226},[220,10662,353],{"class":264},[220,10664,10665],{"class":230},"\"mask\"",[220,10667,6202],{"class":226},[220,10669,353],{"class":264},[220,10671,6207],{"class":230},[220,10673,9114],{"class":226},[220,10675,353],{"class":264},[220,10677,9119],{"class":230},[220,10679,386],{"class":264},[220,10681,10682,10684,10686,10689,10691,10694,10696,10698,10700],{"class":222,"line":9662},[220,10683,2550],{"class":264},[220,10685,367],{"class":346},[220,10687,10688],{"class":226}," :angle",[220,10690,353],{"class":264},[220,10692,10693],{"class":230},"\"angle\"",[220,10695,9139],{"class":226},[220,10697,353],{"class":264},[220,10699,10665],{"class":230},[220,10701,386],{"class":264},[220,10703,10704,10706,10708],{"class":222,"line":9673},[220,10705,2567],{"class":264},[220,10707,347],{"class":346},[220,10709,359],{"class":264},[220,10711,10712,10714,10716],{"class":222,"line":9678},[220,10713,402],{"class":264},[220,10715,2519],{"class":346},[220,10717,359],{"class":264},[212,10719,10721],{"className":409,"code":10720,"language":411,"meta":178,"style":178},"import { useState } from 'react'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Freact'\n\nfunction MyComponent() {\n const [angle, setAngle] = useState(0)\n\n return (\n \u003C>\n \u003Cdiv>\n \u003Cbutton onClick={() => setAngle(a => a + 45)}>Rotate +45°\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(a => a - 45)}>Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(0)}>Reset\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} \u002F>\n \u003CLinearGradient angle={angle} maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n \u003C\u002F>\n )\n}\n",[99,10722,10723,10733,10743,10747,10756,10782,10786,10792,10797,10805,10847,10883,10910,10919,10923,10931,10963,10984,10992,10997,11002],{"__ignoreMap":178},[220,10724,10725,10727,10729,10731],{"class":222,"line":223},[220,10726,261],{"class":260},[220,10728,2682],{"class":264},[220,10730,268],{"class":260},[220,10732,2687],{"class":230},[220,10734,10735,10737,10739,10741],{"class":222,"line":179},[220,10736,261],{"class":260},[220,10738,10517],{"class":264},[220,10740,268],{"class":260},[220,10742,287],{"class":230},[220,10744,10745],{"class":222,"line":389},[220,10746,647],{"emptyLinePlaceholder":194},[220,10748,10749,10751,10754],{"class":222,"line":399},[220,10750,2641],{"class":260},[220,10752,10753],{"class":226}," MyComponent",[220,10755,2647],{"class":264},[220,10757,10758,10760,10762,10765,10767,10770,10772,10774,10776,10778,10780],{"class":222,"line":644},[220,10759,2705],{"class":260},[220,10761,2708],{"class":264},[220,10763,10764],{"class":420},"angle",[220,10766,1895],{"class":264},[220,10768,10769],{"class":420},"setAngle",[220,10771,2719],{"class":264},[220,10773,353],{"class":260},[220,10775,2724],{"class":226},[220,10777,2626],{"class":264},[220,10779,8673],{"class":420},[220,10781,2632],{"class":264},[220,10783,10784],{"class":222,"line":650},[220,10785,647],{"emptyLinePlaceholder":194},[220,10787,10788,10790],{"class":222,"line":656},[220,10789,2739],{"class":260},[220,10791,2742],{"class":264},[220,10793,10794],{"class":222,"line":673},[220,10795,10796],{"class":264}," \u003C>\n",[220,10798,10799,10801,10803],{"class":222,"line":682},[220,10800,2813],{"class":264},[220,10802,3398],{"class":346},[220,10804,359],{"class":264},[220,10806,10807,10810,10812,10815,10817,10819,10821,10824,10826,10828,10831,10834,10837,10840,10843,10845],{"class":222,"line":691},[220,10808,10809],{"class":264}," \u003C",[220,10811,10577],{"class":346},[220,10813,10814],{"class":226}," onClick",[220,10816,353],{"class":260},[220,10818,2759],{"class":264},[220,10820,2762],{"class":260},[220,10822,10823],{"class":226}," setAngle",[220,10825,2626],{"class":264},[220,10827,56],{"class":3621},[220,10829,10830],{"class":260}," =>",[220,10832,10833],{"class":264}," a ",[220,10835,10836],{"class":260},"+",[220,10838,10839],{"class":420}," 45",[220,10841,10842],{"class":264},")}>Rotate +45°\u003C\u002F",[220,10844,10577],{"class":346},[220,10846,359],{"class":264},[220,10848,10849,10851,10853,10855,10857,10859,10861,10863,10865,10867,10869,10871,10874,10876,10879,10881],{"class":222,"line":696},[220,10850,10809],{"class":264},[220,10852,10577],{"class":346},[220,10854,10814],{"class":226},[220,10856,353],{"class":260},[220,10858,2759],{"class":264},[220,10860,2762],{"class":260},[220,10862,10823],{"class":226},[220,10864,2626],{"class":264},[220,10866,56],{"class":3621},[220,10868,10830],{"class":260},[220,10870,10833],{"class":264},[220,10872,10873],{"class":260},"-",[220,10875,10839],{"class":420},[220,10877,10878],{"class":264},")}>Rotate -45°\u003C\u002F",[220,10880,10577],{"class":346},[220,10882,359],{"class":264},[220,10884,10885,10887,10889,10891,10893,10895,10897,10899,10901,10903,10906,10908],{"class":222,"line":702},[220,10886,10809],{"class":264},[220,10888,10577],{"class":346},[220,10890,10814],{"class":226},[220,10892,353],{"class":260},[220,10894,2759],{"class":264},[220,10896,2762],{"class":260},[220,10898,10823],{"class":226},[220,10900,2626],{"class":264},[220,10902,8673],{"class":420},[220,10904,10905],{"class":264},")}>Reset\u003C\u002F",[220,10907,10577],{"class":346},[220,10909,359],{"class":264},[220,10911,10912,10915,10917],{"class":222,"line":718},[220,10913,10914],{"class":264}," \u003C\u002F",[220,10916,3398],{"class":346},[220,10918,359],{"class":264},[220,10920,10921],{"class":222,"line":727},[220,10922,647],{"emptyLinePlaceholder":194},[220,10924,10925,10927,10929],{"class":222,"line":2664},[220,10926,2813],{"class":264},[220,10928,347],{"class":420},[220,10930,359],{"class":264},[220,10932,10933,10935,10937,10939,10941,10943,10945,10947,10949,10951,10953,10955,10957,10959,10961],{"class":222,"line":3522},[220,10934,10809],{"class":264},[220,10936,2553],{"class":420},[220,10938,9100],{"class":226},[220,10940,353],{"class":260},[220,10942,10665],{"class":230},[220,10944,6202],{"class":226},[220,10946,353],{"class":260},[220,10948,743],{"class":264},[220,10950,6299],{"class":420},[220,10952,2914],{"class":264},[220,10954,2711],{"class":226},[220,10956,353],{"class":260},[220,10958,743],{"class":264},[220,10960,2629],{"class":420},[220,10962,6302],{"class":264},[220,10964,10965,10967,10969,10971,10973,10976,10978,10980,10982],{"class":222,"line":9662},[220,10966,10809],{"class":264},[220,10968,367],{"class":420},[220,10970,10532],{"class":226},[220,10972,353],{"class":260},[220,10974,10975],{"class":264},"{angle} ",[220,10977,9064],{"class":226},[220,10979,353],{"class":260},[220,10981,10665],{"class":230},[220,10983,386],{"class":264},[220,10985,10986,10988,10990],{"class":222,"line":9673},[220,10987,10914],{"class":264},[220,10989,347],{"class":420},[220,10991,359],{"class":264},[220,10993,10994],{"class":222,"line":9678},[220,10995,10996],{"class":264}," \u003C\u002F>\n",[220,10998,11000],{"class":222,"line":10999},20,[220,11001,2837],{"class":264},[220,11003,11005],{"class":222,"line":11004},21,[220,11006,749],{"class":264},[212,11008,11010],{"className":468,"code":11009,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n\n let angle = 0\n\u003C\u002Fscript>\n\n\u003Cdiv>\n \u003Cbutton on:click={() => angle += 45}>Rotate +45°\u003C\u002Fbutton>\n \u003Cbutton on:click={() => angle -= 45}>Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton on:click={() => angle = 0}>Reset\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} \u002F>\n \u003CLinearGradient {angle} maskSource=\"mask\" \u002F>\n\u003C\u002FShader>\n",[99,11011,11012,11020,11025,11029,11034,11042,11046,11054,11088,11120,11151,11159,11163,11171,11203,11220],{"__ignoreMap":178},[220,11013,11014,11016,11018],{"class":222,"line":223},[220,11015,343],{"class":264},[220,11017,2590],{"class":346},[220,11019,359],{"class":264},[220,11021,11022],{"class":222,"line":179},[220,11023,11024],{"class":264}," import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n",[220,11026,11027],{"class":222,"line":389},[220,11028,647],{"emptyLinePlaceholder":194},[220,11030,11031],{"class":222,"line":399},[220,11032,11033],{"class":264}," let angle = 0\n",[220,11035,11036,11038,11040],{"class":222,"line":644},[220,11037,402],{"class":264},[220,11039,2590],{"class":346},[220,11041,359],{"class":264},[220,11043,11044],{"class":222,"line":650},[220,11045,647],{"emptyLinePlaceholder":194},[220,11047,11048,11050,11052],{"class":222,"line":656},[220,11049,343],{"class":264},[220,11051,3398],{"class":346},[220,11053,359],{"class":264},[220,11055,11056,11058,11060,11062,11064,11067,11069,11071,11073,11076,11079,11081,11084,11086],{"class":222,"line":673},[220,11057,364],{"class":264},[220,11059,10577],{"class":346},[220,11061,5441],{"class":226},[220,11063,1554],{"class":264},[220,11065,11066],{"class":226},"click",[220,11068,353],{"class":260},[220,11070,2759],{"class":264},[220,11072,2762],{"class":260},[220,11074,11075],{"class":264}," angle ",[220,11077,11078],{"class":260},"+=",[220,11080,10839],{"class":420},[220,11082,11083],{"class":264},"}>Rotate +45°\u003C\u002F",[220,11085,10577],{"class":346},[220,11087,359],{"class":264},[220,11089,11090,11092,11094,11096,11098,11100,11102,11104,11106,11108,11111,11113,11116,11118],{"class":222,"line":682},[220,11091,364],{"class":264},[220,11093,10577],{"class":346},[220,11095,5441],{"class":226},[220,11097,1554],{"class":264},[220,11099,11066],{"class":226},[220,11101,353],{"class":260},[220,11103,2759],{"class":264},[220,11105,2762],{"class":260},[220,11107,11075],{"class":264},[220,11109,11110],{"class":260},"-=",[220,11112,10839],{"class":420},[220,11114,11115],{"class":264},"}>Rotate -45°\u003C\u002F",[220,11117,10577],{"class":346},[220,11119,359],{"class":264},[220,11121,11122,11124,11126,11128,11130,11132,11134,11136,11138,11140,11142,11144,11147,11149],{"class":222,"line":691},[220,11123,364],{"class":264},[220,11125,10577],{"class":346},[220,11127,5441],{"class":226},[220,11129,1554],{"class":264},[220,11131,11066],{"class":226},[220,11133,353],{"class":260},[220,11135,2759],{"class":264},[220,11137,2762],{"class":260},[220,11139,11075],{"class":264},[220,11141,353],{"class":260},[220,11143,2794],{"class":420},[220,11145,11146],{"class":264},"}>Reset\u003C\u002F",[220,11148,10577],{"class":346},[220,11150,359],{"class":264},[220,11152,11153,11155,11157],{"class":222,"line":696},[220,11154,402],{"class":264},[220,11156,3398],{"class":346},[220,11158,359],{"class":264},[220,11160,11161],{"class":222,"line":702},[220,11162,647],{"emptyLinePlaceholder":194},[220,11164,11165,11167,11169],{"class":222,"line":718},[220,11166,343],{"class":264},[220,11168,347],{"class":420},[220,11170,359],{"class":264},[220,11172,11173,11175,11177,11179,11181,11183,11185,11187,11189,11191,11193,11195,11197,11199,11201],{"class":222,"line":727},[220,11174,364],{"class":264},[220,11176,2553],{"class":420},[220,11178,9100],{"class":226},[220,11180,353],{"class":260},[220,11182,10665],{"class":230},[220,11184,6202],{"class":226},[220,11186,353],{"class":260},[220,11188,743],{"class":264},[220,11190,6299],{"class":420},[220,11192,2914],{"class":264},[220,11194,2711],{"class":226},[220,11196,353],{"class":260},[220,11198,743],{"class":264},[220,11200,2629],{"class":420},[220,11202,6302],{"class":264},[220,11204,11205,11207,11209,11212,11214,11216,11218],{"class":222,"line":2664},[220,11206,364],{"class":264},[220,11208,367],{"class":420},[220,11210,11211],{"class":264}," {angle} ",[220,11213,9064],{"class":226},[220,11215,353],{"class":260},[220,11217,10665],{"class":230},[220,11219,386],{"class":264},[220,11221,11222,11224,11226],{"class":222,"line":3522},[220,11223,402],{"class":264},[220,11225,347],{"class":420},[220,11227,359],{"class":264},[212,11229,11231],{"className":468,"code":11230,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Fsolid'\n\nfunction MyComponent() {\n const [angle, setAngle] = createSignal(0)\n\n return (\n \u003C>\n \u003Cdiv>\n \u003Cbutton onClick={() => setAngle(a => a + 45)}>Rotate +45°\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(a => a - 45)}>Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(0)}>Reset\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} \u002F>\n \u003CLinearGradient angle={angle()} maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n \u003C\u002F>\n )\n}\n",[99,11232,11233,11243,11253,11257,11265,11289,11293,11299,11303,11311,11345,11379,11405,11413,11417,11425,11457,11481,11489,11493,11497],{"__ignoreMap":178},[220,11234,11235,11237,11239,11241],{"class":222,"line":223},[220,11236,261],{"class":260},[220,11238,2982],{"class":264},[220,11240,268],{"class":260},[220,11242,2987],{"class":230},[220,11244,11245,11247,11249,11251],{"class":222,"line":179},[220,11246,261],{"class":260},[220,11248,10517],{"class":264},[220,11250,268],{"class":260},[220,11252,319],{"class":230},[220,11254,11255],{"class":222,"line":389},[220,11256,647],{"emptyLinePlaceholder":194},[220,11258,11259,11261,11263],{"class":222,"line":399},[220,11260,2641],{"class":260},[220,11262,10753],{"class":226},[220,11264,2647],{"class":264},[220,11266,11267,11269,11271,11273,11275,11277,11279,11281,11283,11285,11287],{"class":222,"line":644},[220,11268,2705],{"class":260},[220,11270,2708],{"class":264},[220,11272,10764],{"class":420},[220,11274,1895],{"class":264},[220,11276,10769],{"class":420},[220,11278,2719],{"class":264},[220,11280,353],{"class":260},[220,11282,3018],{"class":226},[220,11284,2626],{"class":264},[220,11286,8673],{"class":420},[220,11288,2632],{"class":264},[220,11290,11291],{"class":222,"line":650},[220,11292,647],{"emptyLinePlaceholder":194},[220,11294,11295,11297],{"class":222,"line":656},[220,11296,2739],{"class":260},[220,11298,2742],{"class":264},[220,11300,11301],{"class":222,"line":673},[220,11302,10796],{"class":264},[220,11304,11305,11307,11309],{"class":222,"line":682},[220,11306,2813],{"class":264},[220,11308,3398],{"class":346},[220,11310,359],{"class":264},[220,11312,11313,11315,11317,11319,11321,11323,11325,11327,11329,11331,11333,11335,11337,11339,11341,11343],{"class":222,"line":691},[220,11314,10809],{"class":264},[220,11316,10577],{"class":346},[220,11318,10814],{"class":226},[220,11320,353],{"class":260},[220,11322,2759],{"class":264},[220,11324,2762],{"class":260},[220,11326,10823],{"class":226},[220,11328,2626],{"class":264},[220,11330,56],{"class":3621},[220,11332,10830],{"class":260},[220,11334,10833],{"class":264},[220,11336,10836],{"class":260},[220,11338,10839],{"class":420},[220,11340,10842],{"class":264},[220,11342,10577],{"class":346},[220,11344,359],{"class":264},[220,11346,11347,11349,11351,11353,11355,11357,11359,11361,11363,11365,11367,11369,11371,11373,11375,11377],{"class":222,"line":696},[220,11348,10809],{"class":264},[220,11350,10577],{"class":346},[220,11352,10814],{"class":226},[220,11354,353],{"class":260},[220,11356,2759],{"class":264},[220,11358,2762],{"class":260},[220,11360,10823],{"class":226},[220,11362,2626],{"class":264},[220,11364,56],{"class":3621},[220,11366,10830],{"class":260},[220,11368,10833],{"class":264},[220,11370,10873],{"class":260},[220,11372,10839],{"class":420},[220,11374,10878],{"class":264},[220,11376,10577],{"class":346},[220,11378,359],{"class":264},[220,11380,11381,11383,11385,11387,11389,11391,11393,11395,11397,11399,11401,11403],{"class":222,"line":702},[220,11382,10809],{"class":264},[220,11384,10577],{"class":346},[220,11386,10814],{"class":226},[220,11388,353],{"class":260},[220,11390,2759],{"class":264},[220,11392,2762],{"class":260},[220,11394,10823],{"class":226},[220,11396,2626],{"class":264},[220,11398,8673],{"class":420},[220,11400,10905],{"class":264},[220,11402,10577],{"class":346},[220,11404,359],{"class":264},[220,11406,11407,11409,11411],{"class":222,"line":718},[220,11408,10914],{"class":264},[220,11410,3398],{"class":346},[220,11412,359],{"class":264},[220,11414,11415],{"class":222,"line":727},[220,11416,647],{"emptyLinePlaceholder":194},[220,11418,11419,11421,11423],{"class":222,"line":2664},[220,11420,2813],{"class":264},[220,11422,347],{"class":420},[220,11424,359],{"class":264},[220,11426,11427,11429,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455],{"class":222,"line":3522},[220,11428,10809],{"class":264},[220,11430,2553],{"class":420},[220,11432,9100],{"class":226},[220,11434,353],{"class":260},[220,11436,10665],{"class":230},[220,11438,6202],{"class":226},[220,11440,353],{"class":260},[220,11442,743],{"class":264},[220,11444,6299],{"class":420},[220,11446,2914],{"class":264},[220,11448,2711],{"class":226},[220,11450,353],{"class":260},[220,11452,743],{"class":264},[220,11454,2629],{"class":420},[220,11456,6302],{"class":264},[220,11458,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477,11479],{"class":222,"line":9662},[220,11460,10809],{"class":264},[220,11462,367],{"class":420},[220,11464,10532],{"class":226},[220,11466,353],{"class":260},[220,11468,743],{"class":264},[220,11470,10764],{"class":226},[220,11472,3933],{"class":264},[220,11474,9064],{"class":226},[220,11476,353],{"class":260},[220,11478,10665],{"class":230},[220,11480,386],{"class":264},[220,11482,11483,11485,11487],{"class":222,"line":9673},[220,11484,10914],{"class":264},[220,11486,347],{"class":420},[220,11488,359],{"class":264},[220,11490,11491],{"class":222,"line":9678},[220,11492,10996],{"class":264},[220,11494,11495],{"class":222,"line":10999},[220,11496,2837],{"class":264},[220,11498,11499],{"class":222,"line":11004},[220,11500,749],{"class":264},[212,11502,11504],{"className":251,"code":11503,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'mask', props: { radius: 0.8, visible: false } },\n { type: 'LinearGradient', id: 'gradient', props: { angle: 0, maskSource: 'mask' } }\n ]\n})\n\n\u002F\u002F Update angle at runtime\nshader.update('gradient', { angle: 45 })\n\n\u002F\u002F Reset angle\nshader.update('gradient', { angle: 0 })\n",[99,11505,11506,11517,11521,11535,11539,11559,11581,11585,11589,11593,11598,11618,11622,11627],{"__ignoreMap":178},[220,11507,11508,11510,11513,11515],{"class":222,"line":223},[220,11509,261],{"class":260},[220,11511,11512],{"class":264}," { createShader } ",[220,11514,268],{"class":260},[220,11516,4007],{"class":230},[220,11518,11519],{"class":222,"line":179},[220,11520,647],{"emptyLinePlaceholder":194},[220,11522,11523,11525,11527,11529,11531,11533],{"class":222,"line":389},[220,11524,1735],{"class":260},[220,11526,1738],{"class":420},[220,11528,1741],{"class":260},[220,11530,1744],{"class":260},[220,11532,1747],{"class":226},[220,11534,1750],{"class":264},[220,11536,11537],{"class":222,"line":399},[220,11538,1765],{"class":264},[220,11540,11541,11543,11545,11547,11549,11551,11553,11555,11557],{"class":222,"line":644},[220,11542,1770],{"class":264},[220,11544,3206],{"class":230},[220,11546,3209],{"class":264},[220,11548,10163],{"class":230},[220,11550,7541],{"class":264},[220,11552,6299],{"class":420},[220,11554,9455],{"class":264},[220,11556,2629],{"class":420},[220,11558,6571],{"class":264},[220,11560,11561,11563,11565,11567,11570,11573,11575,11577,11579],{"class":222,"line":650},[220,11562,1770],{"class":264},[220,11564,2462],{"class":230},[220,11566,3209],{"class":264},[220,11568,11569],{"class":230},"'gradient'",[220,11571,11572],{"class":264},", props: { angle: ",[220,11574,8673],{"class":420},[220,11576,10198],{"class":264},[220,11578,10163],{"class":230},[220,11580,1782],{"class":264},[220,11582,11583],{"class":222,"line":656},[220,11584,1787],{"class":264},[220,11586,11587],{"class":222,"line":673},[220,11588,1792],{"class":264},[220,11590,11591],{"class":222,"line":682},[220,11592,647],{"emptyLinePlaceholder":194},[220,11594,11595],{"class":222,"line":691},[220,11596,11597],{"class":609},"\u002F\u002F Update angle at runtime\n",[220,11599,11600,11603,11606,11608,11610,11613,11615],{"class":222,"line":696},[220,11601,11602],{"class":264},"shader.",[220,11604,11605],{"class":226},"update",[220,11607,2626],{"class":264},[220,11609,11569],{"class":230},[220,11611,11612],{"class":264},", { angle: ",[220,11614,1295],{"class":420},[220,11616,11617],{"class":264}," })\n",[220,11619,11620],{"class":222,"line":702},[220,11621,647],{"emptyLinePlaceholder":194},[220,11623,11624],{"class":222,"line":718},[220,11625,11626],{"class":609},"\u002F\u002F Reset angle\n",[220,11628,11629,11631,11633,11635,11637,11639,11641],{"class":222,"line":727},[220,11630,11602],{"class":264},[220,11632,11605],{"class":226},[220,11634,2626],{"class":264},[220,11636,11569],{"class":230},[220,11638,11612],{"class":264},[220,11640,8673],{"class":420},[220,11642,11617],{"class":264},[15,11644,11645],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[11647,11648],"interactive-shader-demo",{":controls":11649,":preset":11650},"[{\"type\":\"button\",\"label\":\"Rotate +45°\",\"action\":\"increment\",\"prop\":\"angle\",\"value\":45},{\"type\":\"button\",\"label\":\"Rotate -45°\",\"action\":\"increment\",\"prop\":\"angle\",\"value\":-45},{\"type\":\"button\",\"label\":\"Reset\",\"action\":\"set\",\"prop\":\"angle\",\"value\":0}]","{\"components\":[{\"type\":\"Circle\",\"id\":\"mask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"angle\":0,\"maskSource\":\"mask\"}}]}",[15,11652,11653],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,11655,11657],{"id":11656},"common-reactive-props","Common Reactive Props",[15,11659,11660],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,11662,11663,1554],{},[159,11664,11665],{},"Position and Size",[212,11667,11671],{"className":11668,"code":11669,"language":11670,"meta":178,"style":178},"language-vue shiki shiki-themes github-dark","\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" \u002F>\n","vue",[99,11672,11673],{"__ignoreMap":178},[220,11674,11675,11677,11679,11681,11684,11686,11689,11692,11694,11696,11698,11700,11702,11705,11707],{"class":222,"line":223},[220,11676,343],{"class":264},[220,11678,2553],{"class":346},[220,11680,2791],{"class":264},[220,11682,11683],{"class":226},"radius",[220,11685,353],{"class":264},[220,11687,11688],{"class":230},"\"",[220,11690,11691],{"class":264},"size",[220,11693,11688],{"class":230},[220,11695,2791],{"class":264},[220,11697,8241],{"class":226},[220,11699,353],{"class":264},[220,11701,11688],{"class":230},[220,11703,11704],{"class":264},"{ x: posX, y: posY }",[220,11706,11688],{"class":230},[220,11708,386],{"class":264},[15,11710,11711,1554],{},[159,11712,11713],{},"Colors",[212,11715,11717],{"className":11668,"code":11716,"language":11670,"meta":178,"style":178},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" \u002F>\n",[99,11718,11719],{"__ignoreMap":178},[220,11720,11721,11723,11725,11727,11729,11731,11733,11736,11738,11740,11742,11744,11746,11749,11751],{"class":222,"line":223},[220,11722,343],{"class":264},[220,11724,367],{"class":346},[220,11726,2791],{"class":264},[220,11728,1863],{"class":226},[220,11730,353],{"class":264},[220,11732,11688],{"class":230},[220,11734,11735],{"class":264},"startColor",[220,11737,11688],{"class":230},[220,11739,2791],{"class":264},[220,11741,1867],{"class":226},[220,11743,353],{"class":264},[220,11745,11688],{"class":230},[220,11747,11748],{"class":264},"endColor",[220,11750,11688],{"class":230},[220,11752,386],{"class":264},[15,11754,11755,1554],{},[159,11756,11757],{},"Intensity and Strength",[212,11759,11761],{"className":11668,"code":11760,"language":11670,"meta":178,"style":178},"\u003CBlur :intensity=\"blurAmount\" \u002F>\n\u003CGlow :strength=\"glowPower\" \u002F>\n",[99,11762,11763,11786],{"__ignoreMap":178},[220,11764,11765,11767,11770,11772,11775,11777,11779,11782,11784],{"class":222,"line":223},[220,11766,343],{"class":264},[220,11768,11769],{"class":346},"Blur",[220,11771,2791],{"class":264},[220,11773,11774],{"class":226},"intensity",[220,11776,353],{"class":264},[220,11778,11688],{"class":230},[220,11780,11781],{"class":264},"blurAmount",[220,11783,11688],{"class":230},[220,11785,386],{"class":264},[220,11787,11788,11790,11793,11795,11798,11800,11802,11805,11807],{"class":222,"line":179},[220,11789,343],{"class":264},[220,11791,11792],{"class":346},"Glow",[220,11794,2791],{"class":264},[220,11796,11797],{"class":226},"strength",[220,11799,353],{"class":264},[220,11801,11688],{"class":230},[220,11803,11804],{"class":264},"glowPower",[220,11806,11688],{"class":230},[220,11808,386],{"class":264},[15,11810,11811,1554],{},[159,11812,11813],{},"Angles and Rotation",[212,11815,11817],{"className":11668,"code":11816,"language":11670,"meta":178,"style":178},"\u003CLinearGradient :angle=\"rotation\" \u002F>\n",[99,11818,11819],{"__ignoreMap":178},[220,11820,11821,11823,11825,11827,11829,11831,11833,11836,11838],{"class":222,"line":223},[220,11822,343],{"class":264},[220,11824,367],{"class":346},[220,11826,2791],{"class":264},[220,11828,10764],{"class":226},[220,11830,353],{"class":264},[220,11832,11688],{"class":230},[220,11834,11835],{"class":264},"rotation",[220,11837,11688],{"class":230},[220,11839,386],{"class":264},[15,11841,11842],{},"Every numerical prop, color prop, and position prop can be reactive. Bind them to sliders, scroll position, mouse coordinates, or any other dynamic value.",[23,11844,11846],{"id":11845},"animating-props","Animating Props",[15,11848,11849],{},"Props aren't just for user interactions—they're perfect for animations too. Animation libraries like Motion make it easy to create smooth, choreographed transitions.",[15,11851,11852,11855],{},[159,11853,11854],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte\u002FSolid.",[212,11857,11859],{"className":409,"code":11858,"language":411,"meta":178,"style":178},"import { useState } from 'react'\nimport { animate } from 'motion'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Freact'\n\nfunction MyComponent() {\n const [radius, setRadius] = useState(0.6)\n\n async function pulse() {\n \u002F\u002F Grow then shrink with smooth easing\n await animate(radius, 1, {\n duration: 0.5,\n easing: 'ease-out',\n onUpdate: (latest) => setRadius(latest)\n })\n await animate(1, 0.6, {\n duration: 0.5,\n easing: 'ease-in',\n onUpdate: (latest) => setRadius(latest)\n })\n }\n\n return (\n \u003C>\n \u003Cbutton onClick={pulse}>Pulse\u003C\u002Fbutton>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={radius} visible={false} \u002F>\n \u003CLinearGradient maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n \u003C\u002F>\n )\n}\n",[99,11860,11861,11871,11883,11893,11897,11905,11930,11934,11947,11952,11968,11977,11987,12007,12012,12028,12036,12045,12061,12065,12069,12073,12080,12085,12103,12108,12117,12147,12162,12171,12176,12181],{"__ignoreMap":178},[220,11862,11863,11865,11867,11869],{"class":222,"line":223},[220,11864,261],{"class":260},[220,11866,2682],{"class":264},[220,11868,268],{"class":260},[220,11870,2687],{"class":230},[220,11872,11873,11875,11878,11880],{"class":222,"line":179},[220,11874,261],{"class":260},[220,11876,11877],{"class":264}," { animate } ",[220,11879,268],{"class":260},[220,11881,11882],{"class":230}," 'motion'\n",[220,11884,11885,11887,11889,11891],{"class":222,"line":389},[220,11886,261],{"class":260},[220,11888,10517],{"class":264},[220,11890,268],{"class":260},[220,11892,287],{"class":230},[220,11894,11895],{"class":222,"line":399},[220,11896,647],{"emptyLinePlaceholder":194},[220,11898,11899,11901,11903],{"class":222,"line":644},[220,11900,2641],{"class":260},[220,11902,10753],{"class":226},[220,11904,2647],{"class":264},[220,11906,11907,11909,11911,11913,11915,11918,11920,11922,11924,11926,11928],{"class":222,"line":650},[220,11908,2705],{"class":260},[220,11910,2708],{"class":264},[220,11912,11683],{"class":420},[220,11914,1895],{"class":264},[220,11916,11917],{"class":420},"setRadius",[220,11919,2719],{"class":264},[220,11921,353],{"class":260},[220,11923,2724],{"class":226},[220,11925,2626],{"class":264},[220,11927,8236],{"class":420},[220,11929,2632],{"class":264},[220,11931,11932],{"class":222,"line":656},[220,11933,647],{"emptyLinePlaceholder":194},[220,11935,11936,11939,11942,11945],{"class":222,"line":673},[220,11937,11938],{"class":260}," async",[220,11940,11941],{"class":260}," function",[220,11943,11944],{"class":226}," pulse",[220,11946,2647],{"class":264},[220,11948,11949],{"class":222,"line":682},[220,11950,11951],{"class":609}," \u002F\u002F Grow then shrink with smooth easing\n",[220,11953,11954,11957,11960,11963,11965],{"class":222,"line":691},[220,11955,11956],{"class":260}," await",[220,11958,11959],{"class":226}," animate",[220,11961,11962],{"class":264},"(radius, ",[220,11964,8677],{"class":420},[220,11966,11967],{"class":264},", {\n",[220,11969,11970,11973,11975],{"class":222,"line":696},[220,11971,11972],{"class":264}," duration: ",[220,11974,7754],{"class":420},[220,11976,1760],{"class":264},[220,11978,11979,11982,11985],{"class":222,"line":702},[220,11980,11981],{"class":264}," easing: ",[220,11983,11984],{"class":230},"'ease-out'",[220,11986,1760],{"class":264},[220,11988,11989,11992,11994,11997,11999,12001,12004],{"class":222,"line":718},[220,11990,11991],{"class":226}," onUpdate",[220,11993,4324],{"class":264},[220,11995,11996],{"class":3621},"latest",[220,11998,4168],{"class":264},[220,12000,2762],{"class":260},[220,12002,12003],{"class":226}," setRadius",[220,12005,12006],{"class":264},"(latest)\n",[220,12008,12009],{"class":222,"line":727},[220,12010,12011],{"class":264}," })\n",[220,12013,12014,12016,12018,12020,12022,12024,12026],{"class":222,"line":2664},[220,12015,11956],{"class":260},[220,12017,11959],{"class":226},[220,12019,2626],{"class":264},[220,12021,8677],{"class":420},[220,12023,1895],{"class":264},[220,12025,8236],{"class":420},[220,12027,11967],{"class":264},[220,12029,12030,12032,12034],{"class":222,"line":3522},[220,12031,11972],{"class":264},[220,12033,7754],{"class":420},[220,12035,1760],{"class":264},[220,12037,12038,12040,12043],{"class":222,"line":9662},[220,12039,11981],{"class":264},[220,12041,12042],{"class":230},"'ease-in'",[220,12044,1760],{"class":264},[220,12046,12047,12049,12051,12053,12055,12057,12059],{"class":222,"line":9673},[220,12048,11991],{"class":226},[220,12050,4324],{"class":264},[220,12052,11996],{"class":3621},[220,12054,4168],{"class":264},[220,12056,2762],{"class":260},[220,12058,12003],{"class":226},[220,12060,12006],{"class":264},[220,12062,12063],{"class":222,"line":9678},[220,12064,12011],{"class":264},[220,12066,12067],{"class":222,"line":10999},[220,12068,3256],{"class":264},[220,12070,12071],{"class":222,"line":11004},[220,12072,647],{"emptyLinePlaceholder":194},[220,12074,12076,12078],{"class":222,"line":12075},22,[220,12077,2739],{"class":260},[220,12079,2742],{"class":264},[220,12081,12083],{"class":222,"line":12082},23,[220,12084,10796],{"class":264},[220,12086,12088,12090,12092,12094,12096,12099,12101],{"class":222,"line":12087},24,[220,12089,2813],{"class":264},[220,12091,10577],{"class":346},[220,12093,10814],{"class":226},[220,12095,353],{"class":260},[220,12097,12098],{"class":264},"{pulse}>Pulse\u003C\u002F",[220,12100,10577],{"class":346},[220,12102,359],{"class":264},[220,12104,12106],{"class":222,"line":12105},25,[220,12107,647],{"emptyLinePlaceholder":194},[220,12109,12111,12113,12115],{"class":222,"line":12110},26,[220,12112,2813],{"class":264},[220,12114,347],{"class":420},[220,12116,359],{"class":264},[220,12118,12120,12122,12124,12126,12128,12130,12132,12134,12137,12139,12141,12143,12145],{"class":222,"line":12119},27,[220,12121,10809],{"class":264},[220,12123,2553],{"class":420},[220,12125,9100],{"class":226},[220,12127,353],{"class":260},[220,12129,10665],{"class":230},[220,12131,6202],{"class":226},[220,12133,353],{"class":260},[220,12135,12136],{"class":264},"{radius} ",[220,12138,2711],{"class":226},[220,12140,353],{"class":260},[220,12142,743],{"class":264},[220,12144,2629],{"class":420},[220,12146,6302],{"class":264},[220,12148,12150,12152,12154,12156,12158,12160],{"class":222,"line":12149},28,[220,12151,10809],{"class":264},[220,12153,367],{"class":420},[220,12155,9139],{"class":226},[220,12157,353],{"class":260},[220,12159,10665],{"class":230},[220,12161,386],{"class":264},[220,12163,12165,12167,12169],{"class":222,"line":12164},29,[220,12166,10914],{"class":264},[220,12168,347],{"class":420},[220,12170,359],{"class":264},[220,12172,12174],{"class":222,"line":12173},30,[220,12175,10996],{"class":264},[220,12177,12179],{"class":222,"line":12178},31,[220,12180,2837],{"class":264},[220,12182,12184],{"class":222,"line":12183},32,[220,12185,749],{"class":264},[11647,12187],{":controls":12188,":preset":12189},"[{\"type\":\"button\",\"label\":\"Pulse\",\"action\":\"sequence\",\"sequence\":[{\"prop\":\"radius\",\"to\":1,\"duration\":500,\"easing\":\"ease-out\"},{\"prop\":\"radius\",\"to\":0.6,\"duration\":500,\"easing\":\"ease-in\"}]}]","{\"components\":[{\"type\":\"Circle\",\"id\":\"mask\",\"props\":{\"radius\":0.6,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"mask\"}}]}",[15,12191,12192],{},"Motion handles the tweening automatically, giving you smooth animations with minimal code. Because prop updates are efficient, you can animate multiple properties simultaneously without performance concerns.",[23,12194,12196],{"id":12195},"performance-notes","Performance Notes",[15,12198,12199],{},"Reactive props update GPU uniforms directly. This means:",[34,12201,12202,12208,12214],{},[37,12203,12204,12207],{},[159,12205,12206],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[37,12209,12210,12213],{},[159,12211,12212],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[37,12215,12216,12219],{},[159,12217,12218],{},"Frame-rate friendly",": Animate as many props as you need",[15,12221,12222],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1504,12224,12225],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":12227},[12228,12229,12230,12231,12232],{"id":10252,"depth":179,"text":10253},{"id":10479,"depth":179,"text":10480},{"id":11656,"depth":179,"text":11657},{"id":11845,"depth":179,"text":11846},{"id":12195,"depth":179,"text":12196},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1496,"description":12233},"docs\u002Fguide\u002F4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":12240,"title":1489,"body":12241,"category":188,"description":15008,"exclude":190,"extension":191,"forceFramework":190,"icon":15009,"meta":15010,"navigation":194,"path":1488,"seo":15011,"stem":15012,"__hash__":15013},"guide\u002Fdocs\u002Fguide\u002F5.layout-positioning.md",{"type":8,"value":12242,"toc":14992},[12243,12246,12254,12258,12267,12269,12274,12573,12577,12581,12584,13011,13015,13025,13374,13378,13381,13942,13946,13949,14263,14267,14271,14278,14419,14431,14435,14446,14521,14525,14528,14755,14759,14762,14989],[11,12244,1489],{"id":12245},"layout-positioning",[15,12247,1839,12248,12250,12251,12253],{},[99,12249,101],{}," component renders a ",[99,12252,586],{}," element — a standard HTML block element with no intrinsic size. You control its dimensions and position entirely through CSS, the same way you would any other element. Understanding this model unlocks the full range of creative possibilities.",[23,12255,12257],{"id":12256},"the-canvas-model","The canvas model",[15,12259,12260,12261,12263,12264,12266],{},"Every ",[99,12262,101],{}," renders exactly one ",[99,12265,586],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,12268,594],{"id":593},[15,12270,12271,12272,1938],{},"Apply classes or styles directly to the ",[99,12273,101],{},[246,12275,12276,12395,12430,12465,12499],{":tabs":1557},[212,12277,12279],{"className":334,"code":12278,"language":336,"meta":178,"style":178},"\u003C!-- Tailwind -->\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- CSS class -->\n\u003CShader class=\"hero-shader\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Inline -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12280,12281,12286,12300,12308,12316,12320,12325,12340,12348,12356,12360,12365,12379,12387],{"__ignoreMap":178},[220,12282,12283],{"class":222,"line":223},[220,12284,12285],{"class":609},"\u003C!-- Tailwind -->\n",[220,12287,12288,12290,12292,12294,12296,12298],{"class":222,"line":179},[220,12289,343],{"class":264},[220,12291,347],{"class":346},[220,12293,350],{"class":226},[220,12295,353],{"class":264},[220,12297,356],{"class":230},[220,12299,359],{"class":264},[220,12301,12302,12304,12306],{"class":222,"line":389},[220,12303,364],{"class":264},[220,12305,367],{"class":346},[220,12307,386],{"class":264},[220,12309,12310,12312,12314],{"class":222,"line":399},[220,12311,402],{"class":264},[220,12313,347],{"class":346},[220,12315,359],{"class":264},[220,12317,12318],{"class":222,"line":644},[220,12319,647],{"emptyLinePlaceholder":194},[220,12321,12322],{"class":222,"line":650},[220,12323,12324],{"class":609},"\u003C!-- CSS class -->\n",[220,12326,12327,12329,12331,12333,12335,12338],{"class":222,"line":656},[220,12328,343],{"class":264},[220,12330,347],{"class":346},[220,12332,350],{"class":226},[220,12334,353],{"class":264},[220,12336,12337],{"class":230},"\"hero-shader\"",[220,12339,359],{"class":264},[220,12341,12342,12344,12346],{"class":222,"line":673},[220,12343,364],{"class":264},[220,12345,367],{"class":346},[220,12347,386],{"class":264},[220,12349,12350,12352,12354],{"class":222,"line":682},[220,12351,402],{"class":264},[220,12353,347],{"class":346},[220,12355,359],{"class":264},[220,12357,12358],{"class":222,"line":691},[220,12359,647],{"emptyLinePlaceholder":194},[220,12361,12362],{"class":222,"line":696},[220,12363,12364],{"class":609},"\u003C!-- Inline -->\n",[220,12366,12367,12369,12371,12373,12375,12377],{"class":222,"line":702},[220,12368,343],{"class":264},[220,12370,347],{"class":346},[220,12372,663],{"class":226},[220,12374,353],{"class":264},[220,12376,668],{"class":230},[220,12378,359],{"class":264},[220,12380,12381,12383,12385],{"class":222,"line":718},[220,12382,364],{"class":264},[220,12384,367],{"class":346},[220,12386,386],{"class":264},[220,12388,12389,12391,12393],{"class":222,"line":727},[220,12390,402],{"class":264},[220,12392,347],{"class":346},[220,12394,359],{"class":264},[212,12396,12398],{"className":409,"code":12397,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12399,12400,12414,12422],{"__ignoreMap":178},[220,12401,12402,12404,12406,12408,12410,12412],{"class":222,"line":223},[220,12403,343],{"class":264},[220,12405,347],{"class":420},[220,12407,423],{"class":226},[220,12409,353],{"class":260},[220,12411,356],{"class":230},[220,12413,359],{"class":264},[220,12415,12416,12418,12420],{"class":222,"line":179},[220,12417,364],{"class":264},[220,12419,367],{"class":420},[220,12421,386],{"class":264},[220,12423,12424,12426,12428],{"class":222,"line":389},[220,12425,402],{"class":264},[220,12427,347],{"class":420},[220,12429,359],{"class":264},[212,12431,12433],{"className":468,"code":12432,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12434,12435,12449,12457],{"__ignoreMap":178},[220,12436,12437,12439,12441,12443,12445,12447],{"class":222,"line":223},[220,12438,343],{"class":264},[220,12440,347],{"class":420},[220,12442,350],{"class":226},[220,12444,353],{"class":260},[220,12446,356],{"class":230},[220,12448,359],{"class":264},[220,12450,12451,12453,12455],{"class":222,"line":179},[220,12452,364],{"class":264},[220,12454,367],{"class":420},[220,12456,386],{"class":264},[220,12458,12459,12461,12463],{"class":222,"line":389},[220,12460,402],{"class":264},[220,12462,347],{"class":420},[220,12464,359],{"class":264},[212,12466,12467],{"className":468,"code":12432,"language":469,"meta":178,"style":178},[99,12468,12469,12483,12491],{"__ignoreMap":178},[220,12470,12471,12473,12475,12477,12479,12481],{"class":222,"line":223},[220,12472,343],{"class":264},[220,12474,347],{"class":420},[220,12476,350],{"class":226},[220,12478,353],{"class":260},[220,12480,356],{"class":230},[220,12482,359],{"class":264},[220,12484,12485,12487,12489],{"class":222,"line":179},[220,12486,364],{"class":264},[220,12488,367],{"class":420},[220,12490,386],{"class":264},[220,12492,12493,12495,12497],{"class":222,"line":389},[220,12494,402],{"class":264},[220,12496,347],{"class":420},[220,12498,359],{"class":264},[212,12500,12502],{"className":251,"code":12501,"language":253,"meta":178,"style":178},"\u002F\u002F Apply sizing to the canvas element before calling createShader\nconst canvas = document.getElementById('my-shader')\ncanvas.style.width = '100%'\ncanvas.style.height = '400px'\n\nconst shader = await createShader(canvas, { components: [...] })\n",[99,12503,12504,12509,12528,12538,12548,12552],{"__ignoreMap":178},[220,12505,12506],{"class":222,"line":223},[220,12507,12508],{"class":609},"\u002F\u002F Apply sizing to the canvas element before calling createShader\n",[220,12510,12511,12513,12515,12517,12519,12521,12523,12526],{"class":222,"line":179},[220,12512,1735],{"class":260},[220,12514,3133],{"class":420},[220,12516,1741],{"class":260},[220,12518,3138],{"class":264},[220,12520,3141],{"class":226},[220,12522,2626],{"class":264},[220,12524,12525],{"class":230},"'my-shader'",[220,12527,2632],{"class":264},[220,12529,12530,12533,12535],{"class":222,"line":389},[220,12531,12532],{"class":264},"canvas.style.width ",[220,12534,353],{"class":260},[220,12536,12537],{"class":230}," '100%'\n",[220,12539,12540,12543,12545],{"class":222,"line":399},[220,12541,12542],{"class":264},"canvas.style.height ",[220,12544,353],{"class":260},[220,12546,12547],{"class":230}," '400px'\n",[220,12549,12550],{"class":222,"line":644},[220,12551,647],{"emptyLinePlaceholder":194},[220,12553,12554,12556,12558,12560,12562,12564,12567,12570],{"class":222,"line":650},[220,12555,1735],{"class":260},[220,12557,1738],{"class":420},[220,12559,1741],{"class":260},[220,12561,1744],{"class":260},[220,12563,1747],{"class":226},[220,12565,12566],{"class":264},"(canvas, { components: [",[220,12568,12569],{"class":260},"...",[220,12571,12572],{"class":264},"] })\n",[23,12574,12576],{"id":12575},"common-layout-patterns","Common layout patterns",[3262,12578,12580],{"id":12579},"full-page-background","Full-page background",[15,12582,12583],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[246,12585,12586,12661,12738,12804,12877],{":tabs":1557},[212,12587,12589],{"className":334,"code":12588,"language":336,"meta":178,"style":178},"\u003C!-- In your layout or App.vue -->\n\u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n\n\u003Cmain class=\"relative z-10\">\n \u003C!-- Your page content scrolls over the shader -->\n\u003C\u002Fmain>\n",[99,12590,12591,12596,12611,12620,12628,12632,12648,12653],{"__ignoreMap":178},[220,12592,12593],{"class":222,"line":223},[220,12594,12595],{"class":609},"\u003C!-- In your layout or App.vue -->\n",[220,12597,12598,12600,12602,12604,12606,12609],{"class":222,"line":179},[220,12599,343],{"class":264},[220,12601,347],{"class":346},[220,12603,350],{"class":226},[220,12605,353],{"class":264},[220,12607,12608],{"class":230},"\"fixed inset-0 -z-10\"",[220,12610,359],{"class":264},[220,12612,12613,12615,12618],{"class":222,"line":389},[220,12614,364],{"class":264},[220,12616,12617],{"class":346},"Aurora",[220,12619,386],{"class":264},[220,12621,12622,12624,12626],{"class":222,"line":399},[220,12623,402],{"class":264},[220,12625,347],{"class":346},[220,12627,359],{"class":264},[220,12629,12630],{"class":222,"line":644},[220,12631,647],{"emptyLinePlaceholder":194},[220,12633,12634,12636,12639,12641,12643,12646],{"class":222,"line":650},[220,12635,343],{"class":264},[220,12637,12638],{"class":346},"main",[220,12640,350],{"class":226},[220,12642,353],{"class":264},[220,12644,12645],{"class":230},"\"relative z-10\"",[220,12647,359],{"class":264},[220,12649,12650],{"class":222,"line":656},[220,12651,12652],{"class":609}," \u003C!-- Your page content scrolls over the shader -->\n",[220,12654,12655,12657,12659],{"class":222,"line":673},[220,12656,402],{"class":264},[220,12658,12638],{"class":346},[220,12660,359],{"class":264},[212,12662,12664],{"className":409,"code":12663,"language":411,"meta":178,"style":178},"\u003C>\n \u003CShader className=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n \u003C\u002FShader>\n \u003Cmain className=\"relative z-10\">\n {\u002F* Your page content *\u002F}\n \u003C\u002Fmain>\n\u003C\u002F>\n",[99,12665,12666,12671,12685,12693,12701,12715,12725,12733],{"__ignoreMap":178},[220,12667,12668],{"class":222,"line":223},[220,12669,12670],{"class":264},"\u003C>\n",[220,12672,12673,12675,12677,12679,12681,12683],{"class":222,"line":179},[220,12674,364],{"class":264},[220,12676,347],{"class":420},[220,12678,423],{"class":226},[220,12680,353],{"class":260},[220,12682,12608],{"class":230},[220,12684,359],{"class":264},[220,12686,12687,12689,12691],{"class":222,"line":389},[220,12688,2550],{"class":264},[220,12690,12617],{"class":420},[220,12692,386],{"class":264},[220,12694,12695,12697,12699],{"class":222,"line":399},[220,12696,2567],{"class":264},[220,12698,347],{"class":420},[220,12700,359],{"class":264},[220,12702,12703,12705,12707,12709,12711,12713],{"class":222,"line":644},[220,12704,364],{"class":264},[220,12706,12638],{"class":346},[220,12708,423],{"class":226},[220,12710,353],{"class":260},[220,12712,12645],{"class":230},[220,12714,359],{"class":264},[220,12716,12717,12720,12723],{"class":222,"line":650},[220,12718,12719],{"class":264}," {",[220,12721,12722],{"class":609},"\u002F* Your page content *\u002F",[220,12724,749],{"class":264},[220,12726,12727,12729,12731],{"class":222,"line":656},[220,12728,2567],{"class":264},[220,12730,12638],{"class":346},[220,12732,359],{"class":264},[220,12734,12735],{"class":222,"line":673},[220,12736,12737],{"class":264},"\u003C\u002F>\n",[212,12739,12741],{"className":468,"code":12740,"language":469,"meta":178,"style":178},"\u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n\n\u003Cmain class=\"relative z-10\">\n \u003C!-- Your page content -->\n\u003C\u002Fmain>\n",[99,12742,12743,12757,12765,12773,12777,12791,12796],{"__ignoreMap":178},[220,12744,12745,12747,12749,12751,12753,12755],{"class":222,"line":223},[220,12746,343],{"class":264},[220,12748,347],{"class":420},[220,12750,350],{"class":226},[220,12752,353],{"class":260},[220,12754,12608],{"class":230},[220,12756,359],{"class":264},[220,12758,12759,12761,12763],{"class":222,"line":179},[220,12760,364],{"class":264},[220,12762,12617],{"class":420},[220,12764,386],{"class":264},[220,12766,12767,12769,12771],{"class":222,"line":389},[220,12768,402],{"class":264},[220,12770,347],{"class":420},[220,12772,359],{"class":264},[220,12774,12775],{"class":222,"line":399},[220,12776,647],{"emptyLinePlaceholder":194},[220,12778,12779,12781,12783,12785,12787,12789],{"class":222,"line":644},[220,12780,343],{"class":264},[220,12782,12638],{"class":346},[220,12784,350],{"class":226},[220,12786,353],{"class":260},[220,12788,12645],{"class":230},[220,12790,359],{"class":264},[220,12792,12793],{"class":222,"line":650},[220,12794,12795],{"class":264}," \u003C!-- Your page content -->\n",[220,12797,12798,12800,12802],{"class":222,"line":656},[220,12799,402],{"class":264},[220,12801,12638],{"class":346},[220,12803,359],{"class":264},[212,12805,12807],{"className":468,"code":12806,"language":469,"meta":178,"style":178},"\u003C>\n \u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n \u003C\u002FShader>\n \u003Cmain class=\"relative z-10\">\n {\u002F* Your page content *\u002F}\n \u003C\u002Fmain>\n\u003C\u002F>\n",[99,12808,12809,12813,12827,12835,12843,12857,12865,12873],{"__ignoreMap":178},[220,12810,12811],{"class":222,"line":223},[220,12812,12670],{"class":264},[220,12814,12815,12817,12819,12821,12823,12825],{"class":222,"line":179},[220,12816,364],{"class":264},[220,12818,347],{"class":420},[220,12820,350],{"class":226},[220,12822,353],{"class":260},[220,12824,12608],{"class":230},[220,12826,359],{"class":264},[220,12828,12829,12831,12833],{"class":222,"line":389},[220,12830,2550],{"class":264},[220,12832,12617],{"class":420},[220,12834,386],{"class":264},[220,12836,12837,12839,12841],{"class":222,"line":399},[220,12838,2567],{"class":264},[220,12840,347],{"class":420},[220,12842,359],{"class":264},[220,12844,12845,12847,12849,12851,12853,12855],{"class":222,"line":644},[220,12846,364],{"class":264},[220,12848,12638],{"class":346},[220,12850,350],{"class":226},[220,12852,353],{"class":260},[220,12854,12645],{"class":230},[220,12856,359],{"class":264},[220,12858,12859,12861,12863],{"class":222,"line":650},[220,12860,12719],{"class":264},[220,12862,12722],{"class":609},[220,12864,749],{"class":264},[220,12866,12867,12869,12871],{"class":222,"line":656},[220,12868,2567],{"class":264},[220,12870,12638],{"class":346},[220,12872,359],{"class":264},[220,12874,12875],{"class":222,"line":673},[220,12876,12737],{"class":264},[212,12878,12882],{"className":12879,"code":12880,"language":12881,"meta":178,"style":178},"language-html shiki shiki-themes github-dark","\u003Ccanvas id=\"bg\" style=\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\">\u003C\u002Fcanvas>\n\u003Cmain style=\"position:relative;z-index:10;\">Your content\u003C\u002Fmain>\n\n\u003Cscript type=\"module\">\n import { createShader } from 'shaders\u002Fjs'\n const shader = await createShader(document.getElementById('bg'), {\n components: [{ type: 'Aurora', props: {} }]\n })\n\u003C\u002Fscript>\n","html",[99,12883,12884,12911,12931,12935,12951,12962,12987,12998,13003],{"__ignoreMap":178},[220,12885,12886,12888,12891,12893,12895,12898,12900,12902,12905,12907,12909],{"class":222,"line":223},[220,12887,343],{"class":264},[220,12889,12890],{"class":346},"canvas",[220,12892,9100],{"class":226},[220,12894,353],{"class":264},[220,12896,12897],{"class":230},"\"bg\"",[220,12899,663],{"class":226},[220,12901,353],{"class":264},[220,12903,12904],{"class":230},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[220,12906,3804],{"class":264},[220,12908,12890],{"class":346},[220,12910,359],{"class":264},[220,12912,12913,12915,12917,12919,12921,12924,12927,12929],{"class":222,"line":179},[220,12914,343],{"class":264},[220,12916,12638],{"class":346},[220,12918,663],{"class":226},[220,12920,353],{"class":264},[220,12922,12923],{"class":230},"\"position:relative;z-index:10;\"",[220,12925,12926],{"class":264},">Your content\u003C\u002F",[220,12928,12638],{"class":346},[220,12930,359],{"class":264},[220,12932,12933],{"class":222,"line":389},[220,12934,647],{"emptyLinePlaceholder":194},[220,12936,12937,12939,12941,12944,12946,12949],{"class":222,"line":399},[220,12938,343],{"class":264},[220,12940,2590],{"class":346},[220,12942,12943],{"class":226}," type",[220,12945,353],{"class":264},[220,12947,12948],{"class":230},"\"module\"",[220,12950,359],{"class":264},[220,12952,12953,12956,12958,12960],{"class":222,"line":644},[220,12954,12955],{"class":260}," import",[220,12957,11512],{"class":264},[220,12959,268],{"class":260},[220,12961,4007],{"class":230},[220,12963,12964,12966,12968,12970,12972,12974,12977,12979,12981,12984],{"class":222,"line":650},[220,12965,2705],{"class":260},[220,12967,1738],{"class":420},[220,12969,1741],{"class":260},[220,12971,1744],{"class":260},[220,12973,1747],{"class":226},[220,12975,12976],{"class":264},"(document.",[220,12978,3141],{"class":226},[220,12980,2626],{"class":264},[220,12982,12983],{"class":230},"'bg'",[220,12985,12986],{"class":264},"), {\n",[220,12988,12989,12992,12995],{"class":222,"line":656},[220,12990,12991],{"class":264}," components: [{ type: ",[220,12993,12994],{"class":230},"'Aurora'",[220,12996,12997],{"class":264},", props: {} }]\n",[220,12999,13000],{"class":222,"line":673},[220,13001,13002],{"class":264}," })\n",[220,13004,13005,13007,13009],{"class":222,"line":682},[220,13006,402],{"class":264},[220,13008,2590],{"class":346},[220,13010,359],{"class":264},[3262,13012,13014],{"id":13013},"section-background","Section background",[15,13016,13017,13018,1864,13021,13024],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[99,13019,13020],{},"position: relative",[99,13022,13023],{},"overflow: hidden"," to contain the canvas:",[246,13026,13027,13132,13225,13300],{":tabs":248},[212,13028,13030],{"className":334,"code":13029,"language":336,"meta":178,"style":178},"\u003Csection class=\"relative overflow-hidden py-24 px-8\">\n \u003CShader class=\"absolute inset-0 -z-10\">\n \u003CPlasma \u002F>\n \u003C\u002FShader>\n\n \u003Ch2 class=\"relative text-4xl font-bold text-white\">Section Heading\u003C\u002Fh2>\n \u003Cp class=\"relative text-white\u002F80 mt-4\">Content above the shader.\u003C\u002Fp>\n\u003C\u002Fsection>\n",[99,13031,13032,13048,13063,13072,13080,13084,13104,13124],{"__ignoreMap":178},[220,13033,13034,13036,13039,13041,13043,13046],{"class":222,"line":223},[220,13035,343],{"class":264},[220,13037,13038],{"class":346},"section",[220,13040,350],{"class":226},[220,13042,353],{"class":264},[220,13044,13045],{"class":230},"\"relative overflow-hidden py-24 px-8\"",[220,13047,359],{"class":264},[220,13049,13050,13052,13054,13056,13058,13061],{"class":222,"line":179},[220,13051,364],{"class":264},[220,13053,347],{"class":346},[220,13055,350],{"class":226},[220,13057,353],{"class":264},[220,13059,13060],{"class":230},"\"absolute inset-0 -z-10\"",[220,13062,359],{"class":264},[220,13064,13065,13067,13070],{"class":222,"line":389},[220,13066,2550],{"class":264},[220,13068,13069],{"class":346},"Plasma",[220,13071,386],{"class":264},[220,13073,13074,13076,13078],{"class":222,"line":399},[220,13075,2567],{"class":264},[220,13077,347],{"class":346},[220,13079,359],{"class":264},[220,13081,13082],{"class":222,"line":644},[220,13083,647],{"emptyLinePlaceholder":194},[220,13085,13086,13088,13090,13092,13094,13097,13100,13102],{"class":222,"line":650},[220,13087,364],{"class":264},[220,13089,23],{"class":346},[220,13091,350],{"class":226},[220,13093,353],{"class":264},[220,13095,13096],{"class":230},"\"relative text-4xl font-bold text-white\"",[220,13098,13099],{"class":264},">Section Heading\u003C\u002F",[220,13101,23],{"class":346},[220,13103,359],{"class":264},[220,13105,13106,13108,13110,13112,13114,13117,13120,13122],{"class":222,"line":656},[220,13107,364],{"class":264},[220,13109,15],{"class":346},[220,13111,350],{"class":226},[220,13113,353],{"class":264},[220,13115,13116],{"class":230},"\"relative text-white\u002F80 mt-4\"",[220,13118,13119],{"class":264},">Content above the shader.\u003C\u002F",[220,13121,15],{"class":346},[220,13123,359],{"class":264},[220,13125,13126,13128,13130],{"class":222,"line":673},[220,13127,402],{"class":264},[220,13129,13038],{"class":346},[220,13131,359],{"class":264},[212,13133,13135],{"className":409,"code":13134,"language":411,"meta":178,"style":178},"\u003Csection className=\"relative overflow-hidden py-24 px-8\">\n \u003CShader className=\"absolute inset-0 -z-10\">\n \u003CPlasma \u002F>\n \u003C\u002FShader>\n \u003Ch2 className=\"relative text-4xl font-bold text-white\">Section Heading\u003C\u002Fh2>\n \u003Cp className=\"relative text-white\u002F80 mt-4\">Content above the shader.\u003C\u002Fp>\n\u003C\u002Fsection>\n",[99,13136,13137,13151,13165,13173,13181,13199,13217],{"__ignoreMap":178},[220,13138,13139,13141,13143,13145,13147,13149],{"class":222,"line":223},[220,13140,343],{"class":264},[220,13142,13038],{"class":346},[220,13144,423],{"class":226},[220,13146,353],{"class":260},[220,13148,13045],{"class":230},[220,13150,359],{"class":264},[220,13152,13153,13155,13157,13159,13161,13163],{"class":222,"line":179},[220,13154,364],{"class":264},[220,13156,347],{"class":420},[220,13158,423],{"class":226},[220,13160,353],{"class":260},[220,13162,13060],{"class":230},[220,13164,359],{"class":264},[220,13166,13167,13169,13171],{"class":222,"line":389},[220,13168,2550],{"class":264},[220,13170,13069],{"class":420},[220,13172,386],{"class":264},[220,13174,13175,13177,13179],{"class":222,"line":399},[220,13176,2567],{"class":264},[220,13178,347],{"class":420},[220,13180,359],{"class":264},[220,13182,13183,13185,13187,13189,13191,13193,13195,13197],{"class":222,"line":644},[220,13184,364],{"class":264},[220,13186,23],{"class":346},[220,13188,423],{"class":226},[220,13190,353],{"class":260},[220,13192,13096],{"class":230},[220,13194,13099],{"class":264},[220,13196,23],{"class":346},[220,13198,359],{"class":264},[220,13200,13201,13203,13205,13207,13209,13211,13213,13215],{"class":222,"line":650},[220,13202,364],{"class":264},[220,13204,15],{"class":346},[220,13206,423],{"class":226},[220,13208,353],{"class":260},[220,13210,13116],{"class":230},[220,13212,13119],{"class":264},[220,13214,15],{"class":346},[220,13216,359],{"class":264},[220,13218,13219,13221,13223],{"class":222,"line":656},[220,13220,402],{"class":264},[220,13222,13038],{"class":346},[220,13224,359],{"class":264},[212,13226,13228],{"className":468,"code":13227,"language":469,"meta":178,"style":178},"\u003Csection class=\"relative overflow-hidden py-24 px-8\">\n \u003CShader class=\"absolute inset-0 -z-10\">\n \u003CPlasma \u002F>\n \u003C\u002FShader>\n \u003Ch2 class=\"relative text-4xl font-bold text-white\">Section Heading\u003C\u002Fh2>\n\u003C\u002Fsection>\n",[99,13229,13230,13244,13258,13266,13274,13292],{"__ignoreMap":178},[220,13231,13232,13234,13236,13238,13240,13242],{"class":222,"line":223},[220,13233,343],{"class":264},[220,13235,13038],{"class":346},[220,13237,350],{"class":226},[220,13239,353],{"class":260},[220,13241,13045],{"class":230},[220,13243,359],{"class":264},[220,13245,13246,13248,13250,13252,13254,13256],{"class":222,"line":179},[220,13247,364],{"class":264},[220,13249,347],{"class":420},[220,13251,350],{"class":226},[220,13253,353],{"class":260},[220,13255,13060],{"class":230},[220,13257,359],{"class":264},[220,13259,13260,13262,13264],{"class":222,"line":389},[220,13261,2550],{"class":264},[220,13263,13069],{"class":420},[220,13265,386],{"class":264},[220,13267,13268,13270,13272],{"class":222,"line":399},[220,13269,2567],{"class":264},[220,13271,347],{"class":420},[220,13273,359],{"class":264},[220,13275,13276,13278,13280,13282,13284,13286,13288,13290],{"class":222,"line":644},[220,13277,364],{"class":264},[220,13279,23],{"class":346},[220,13281,350],{"class":226},[220,13283,353],{"class":260},[220,13285,13096],{"class":230},[220,13287,13099],{"class":264},[220,13289,23],{"class":346},[220,13291,359],{"class":264},[220,13293,13294,13296,13298],{"class":222,"line":650},[220,13295,402],{"class":264},[220,13297,13038],{"class":346},[220,13299,359],{"class":264},[212,13301,13302],{"className":468,"code":13227,"language":469,"meta":178,"style":178},[99,13303,13304,13318,13332,13340,13348,13366],{"__ignoreMap":178},[220,13305,13306,13308,13310,13312,13314,13316],{"class":222,"line":223},[220,13307,343],{"class":264},[220,13309,13038],{"class":346},[220,13311,350],{"class":226},[220,13313,353],{"class":260},[220,13315,13045],{"class":230},[220,13317,359],{"class":264},[220,13319,13320,13322,13324,13326,13328,13330],{"class":222,"line":179},[220,13321,364],{"class":264},[220,13323,347],{"class":420},[220,13325,350],{"class":226},[220,13327,353],{"class":260},[220,13329,13060],{"class":230},[220,13331,359],{"class":264},[220,13333,13334,13336,13338],{"class":222,"line":389},[220,13335,2550],{"class":264},[220,13337,13069],{"class":420},[220,13339,386],{"class":264},[220,13341,13342,13344,13346],{"class":222,"line":399},[220,13343,2567],{"class":264},[220,13345,347],{"class":420},[220,13347,359],{"class":264},[220,13349,13350,13352,13354,13356,13358,13360,13362,13364],{"class":222,"line":644},[220,13351,364],{"class":264},[220,13353,23],{"class":346},[220,13355,350],{"class":226},[220,13357,353],{"class":260},[220,13359,13096],{"class":230},[220,13361,13099],{"class":264},[220,13363,23],{"class":346},[220,13365,359],{"class":264},[220,13367,13368,13370,13372],{"class":222,"line":650},[220,13369,402],{"class":264},[220,13371,13038],{"class":346},[220,13373,359],{"class":264},[3262,13375,13377],{"id":13376},"card-with-shader-fill","Card with shader fill",[15,13379,13380],{},"A shader used as the visual background of a card or panel:",[246,13382,13383,13543,13689,13816],{":tabs":248},[212,13384,13386],{"className":334,"code":13385,"language":336,"meta":178,"style":178},"\u003Cdiv class=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader class=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" \u002F>\n \u003CGlow :intensity=\"0.4\" color=\"#6366f1\" \u002F>\n \u003C\u002FShader>\n\n \u003C!-- Content sits above the shader -->\n \u003Cdiv class=\"relative z-10\">\n \u003Ch3 class=\"text-xl font-semibold\">Card Title\u003C\u002Fh3>\n \u003Cp class=\"text-white\u002F70 mt-2\">Card description here.\u003C\u002Fp>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,13387,13388,13403,13418,13433,13456,13464,13468,13473,13487,13507,13527,13535],{"__ignoreMap":178},[220,13389,13390,13392,13394,13396,13398,13401],{"class":222,"line":223},[220,13391,343],{"class":264},[220,13393,3398],{"class":346},[220,13395,350],{"class":226},[220,13397,353],{"class":264},[220,13399,13400],{"class":230},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[220,13402,359],{"class":264},[220,13404,13405,13407,13409,13411,13413,13416],{"class":222,"line":179},[220,13406,364],{"class":264},[220,13408,347],{"class":346},[220,13410,350],{"class":226},[220,13412,353],{"class":264},[220,13414,13415],{"class":230},"\"absolute inset-0\"",[220,13417,359],{"class":264},[220,13419,13420,13422,13424,13426,13428,13431],{"class":222,"line":389},[220,13421,2550],{"class":264},[220,13423,1585],{"class":346},[220,13425,1588],{"class":226},[220,13427,353],{"class":264},[220,13429,13430],{"class":230},"\"#1e1b4b\"",[220,13432,386],{"class":264},[220,13434,13435,13437,13439,13442,13444,13447,13449,13451,13454],{"class":222,"line":399},[220,13436,2550],{"class":264},[220,13438,11792],{"class":346},[220,13440,13441],{"class":226}," :intensity",[220,13443,353],{"class":264},[220,13445,13446],{"class":230},"\"0.4\"",[220,13448,1588],{"class":226},[220,13450,353],{"class":264},[220,13452,13453],{"class":230},"\"#6366f1\"",[220,13455,386],{"class":264},[220,13457,13458,13460,13462],{"class":222,"line":644},[220,13459,2567],{"class":264},[220,13461,347],{"class":346},[220,13463,359],{"class":264},[220,13465,13466],{"class":222,"line":650},[220,13467,647],{"emptyLinePlaceholder":194},[220,13469,13470],{"class":222,"line":656},[220,13471,13472],{"class":609}," \u003C!-- Content sits above the shader -->\n",[220,13474,13475,13477,13479,13481,13483,13485],{"class":222,"line":673},[220,13476,364],{"class":264},[220,13478,3398],{"class":346},[220,13480,350],{"class":226},[220,13482,353],{"class":264},[220,13484,12645],{"class":230},[220,13486,359],{"class":264},[220,13488,13489,13491,13493,13495,13497,13500,13503,13505],{"class":222,"line":682},[220,13490,2550],{"class":264},[220,13492,3262],{"class":346},[220,13494,350],{"class":226},[220,13496,353],{"class":264},[220,13498,13499],{"class":230},"\"text-xl font-semibold\"",[220,13501,13502],{"class":264},">Card Title\u003C\u002F",[220,13504,3262],{"class":346},[220,13506,359],{"class":264},[220,13508,13509,13511,13513,13515,13517,13520,13523,13525],{"class":222,"line":691},[220,13510,2550],{"class":264},[220,13512,15],{"class":346},[220,13514,350],{"class":226},[220,13516,353],{"class":264},[220,13518,13519],{"class":230},"\"text-white\u002F70 mt-2\"",[220,13521,13522],{"class":264},">Card description here.\u003C\u002F",[220,13524,15],{"class":346},[220,13526,359],{"class":264},[220,13528,13529,13531,13533],{"class":222,"line":696},[220,13530,2567],{"class":264},[220,13532,3398],{"class":346},[220,13534,359],{"class":264},[220,13536,13537,13539,13541],{"class":222,"line":702},[220,13538,402],{"class":264},[220,13540,3398],{"class":346},[220,13542,359],{"class":264},[212,13544,13546],{"className":409,"code":13545,"language":411,"meta":178,"style":178},"\u003Cdiv className=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader className=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" \u002F>\n \u003CGlow intensity={0.4} color=\"#6366f1\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv className=\"relative z-10\">\n \u003Ch3 className=\"text-xl font-semibold\">Card Title\u003C\u002Fh3>\n \u003Cp className=\"text-white\u002F70 mt-2\">Card description here.\u003C\u002Fp>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,13547,13548,13562,13576,13590,13615,13623,13637,13655,13673,13681],{"__ignoreMap":178},[220,13549,13550,13552,13554,13556,13558,13560],{"class":222,"line":223},[220,13551,343],{"class":264},[220,13553,3398],{"class":346},[220,13555,423],{"class":226},[220,13557,353],{"class":260},[220,13559,13400],{"class":230},[220,13561,359],{"class":264},[220,13563,13564,13566,13568,13570,13572,13574],{"class":222,"line":179},[220,13565,364],{"class":264},[220,13567,347],{"class":420},[220,13569,423],{"class":226},[220,13571,353],{"class":260},[220,13573,13415],{"class":230},[220,13575,359],{"class":264},[220,13577,13578,13580,13582,13584,13586,13588],{"class":222,"line":389},[220,13579,2550],{"class":264},[220,13581,1585],{"class":420},[220,13583,1588],{"class":226},[220,13585,353],{"class":260},[220,13587,13430],{"class":230},[220,13589,386],{"class":264},[220,13591,13592,13594,13596,13599,13601,13603,13605,13607,13609,13611,13613],{"class":222,"line":399},[220,13593,2550],{"class":264},[220,13595,11792],{"class":420},[220,13597,13598],{"class":226}," intensity",[220,13600,353],{"class":260},[220,13602,743],{"class":264},[220,13604,8249],{"class":420},[220,13606,2914],{"class":264},[220,13608,8062],{"class":226},[220,13610,353],{"class":260},[220,13612,13453],{"class":230},[220,13614,386],{"class":264},[220,13616,13617,13619,13621],{"class":222,"line":644},[220,13618,2567],{"class":264},[220,13620,347],{"class":420},[220,13622,359],{"class":264},[220,13624,13625,13627,13629,13631,13633,13635],{"class":222,"line":650},[220,13626,364],{"class":264},[220,13628,3398],{"class":346},[220,13630,423],{"class":226},[220,13632,353],{"class":260},[220,13634,12645],{"class":230},[220,13636,359],{"class":264},[220,13638,13639,13641,13643,13645,13647,13649,13651,13653],{"class":222,"line":656},[220,13640,2550],{"class":264},[220,13642,3262],{"class":346},[220,13644,423],{"class":226},[220,13646,353],{"class":260},[220,13648,13499],{"class":230},[220,13650,13502],{"class":264},[220,13652,3262],{"class":346},[220,13654,359],{"class":264},[220,13656,13657,13659,13661,13663,13665,13667,13669,13671],{"class":222,"line":673},[220,13658,2550],{"class":264},[220,13660,15],{"class":346},[220,13662,423],{"class":226},[220,13664,353],{"class":260},[220,13666,13519],{"class":230},[220,13668,13522],{"class":264},[220,13670,15],{"class":346},[220,13672,359],{"class":264},[220,13674,13675,13677,13679],{"class":222,"line":682},[220,13676,2567],{"class":264},[220,13678,3398],{"class":346},[220,13680,359],{"class":264},[220,13682,13683,13685,13687],{"class":222,"line":691},[220,13684,402],{"class":264},[220,13686,3398],{"class":346},[220,13688,359],{"class":264},[212,13690,13692],{"className":468,"code":13691,"language":469,"meta":178,"style":178},"\u003Cdiv class=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader class=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" \u002F>\n \u003CGlow intensity={0.4} color=\"#6366f1\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv class=\"relative z-10\">\n \u003Ch3 class=\"text-xl font-semibold\">Card Title\u003C\u002Fh3>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,13693,13694,13708,13722,13736,13760,13768,13782,13800,13808],{"__ignoreMap":178},[220,13695,13696,13698,13700,13702,13704,13706],{"class":222,"line":223},[220,13697,343],{"class":264},[220,13699,3398],{"class":346},[220,13701,350],{"class":226},[220,13703,353],{"class":260},[220,13705,13400],{"class":230},[220,13707,359],{"class":264},[220,13709,13710,13712,13714,13716,13718,13720],{"class":222,"line":179},[220,13711,364],{"class":264},[220,13713,347],{"class":420},[220,13715,350],{"class":226},[220,13717,353],{"class":260},[220,13719,13415],{"class":230},[220,13721,359],{"class":264},[220,13723,13724,13726,13728,13730,13732,13734],{"class":222,"line":389},[220,13725,2550],{"class":264},[220,13727,1585],{"class":420},[220,13729,1588],{"class":226},[220,13731,353],{"class":260},[220,13733,13430],{"class":230},[220,13735,386],{"class":264},[220,13737,13738,13740,13742,13744,13746,13748,13750,13752,13754,13756,13758],{"class":222,"line":399},[220,13739,2550],{"class":264},[220,13741,11792],{"class":420},[220,13743,13598],{"class":226},[220,13745,353],{"class":260},[220,13747,743],{"class":264},[220,13749,8249],{"class":420},[220,13751,2914],{"class":264},[220,13753,8062],{"class":226},[220,13755,353],{"class":260},[220,13757,13453],{"class":230},[220,13759,386],{"class":264},[220,13761,13762,13764,13766],{"class":222,"line":644},[220,13763,2567],{"class":264},[220,13765,347],{"class":420},[220,13767,359],{"class":264},[220,13769,13770,13772,13774,13776,13778,13780],{"class":222,"line":650},[220,13771,364],{"class":264},[220,13773,3398],{"class":346},[220,13775,350],{"class":226},[220,13777,353],{"class":260},[220,13779,12645],{"class":230},[220,13781,359],{"class":264},[220,13783,13784,13786,13788,13790,13792,13794,13796,13798],{"class":222,"line":656},[220,13785,2550],{"class":264},[220,13787,3262],{"class":346},[220,13789,350],{"class":226},[220,13791,353],{"class":260},[220,13793,13499],{"class":230},[220,13795,13502],{"class":264},[220,13797,3262],{"class":346},[220,13799,359],{"class":264},[220,13801,13802,13804,13806],{"class":222,"line":673},[220,13803,2567],{"class":264},[220,13805,3398],{"class":346},[220,13807,359],{"class":264},[220,13809,13810,13812,13814],{"class":222,"line":682},[220,13811,402],{"class":264},[220,13813,3398],{"class":346},[220,13815,359],{"class":264},[212,13817,13818],{"className":468,"code":13691,"language":469,"meta":178,"style":178},[99,13819,13820,13834,13848,13862,13886,13894,13908,13926,13934],{"__ignoreMap":178},[220,13821,13822,13824,13826,13828,13830,13832],{"class":222,"line":223},[220,13823,343],{"class":264},[220,13825,3398],{"class":346},[220,13827,350],{"class":226},[220,13829,353],{"class":260},[220,13831,13400],{"class":230},[220,13833,359],{"class":264},[220,13835,13836,13838,13840,13842,13844,13846],{"class":222,"line":179},[220,13837,364],{"class":264},[220,13839,347],{"class":420},[220,13841,350],{"class":226},[220,13843,353],{"class":260},[220,13845,13415],{"class":230},[220,13847,359],{"class":264},[220,13849,13850,13852,13854,13856,13858,13860],{"class":222,"line":389},[220,13851,2550],{"class":264},[220,13853,1585],{"class":420},[220,13855,1588],{"class":226},[220,13857,353],{"class":260},[220,13859,13430],{"class":230},[220,13861,386],{"class":264},[220,13863,13864,13866,13868,13870,13872,13874,13876,13878,13880,13882,13884],{"class":222,"line":399},[220,13865,2550],{"class":264},[220,13867,11792],{"class":420},[220,13869,13598],{"class":226},[220,13871,353],{"class":260},[220,13873,743],{"class":264},[220,13875,8249],{"class":420},[220,13877,2914],{"class":264},[220,13879,8062],{"class":226},[220,13881,353],{"class":260},[220,13883,13453],{"class":230},[220,13885,386],{"class":264},[220,13887,13888,13890,13892],{"class":222,"line":644},[220,13889,2567],{"class":264},[220,13891,347],{"class":420},[220,13893,359],{"class":264},[220,13895,13896,13898,13900,13902,13904,13906],{"class":222,"line":650},[220,13897,364],{"class":264},[220,13899,3398],{"class":346},[220,13901,350],{"class":226},[220,13903,353],{"class":260},[220,13905,12645],{"class":230},[220,13907,359],{"class":264},[220,13909,13910,13912,13914,13916,13918,13920,13922,13924],{"class":222,"line":656},[220,13911,2550],{"class":264},[220,13913,3262],{"class":346},[220,13915,350],{"class":226},[220,13917,353],{"class":260},[220,13919,13499],{"class":230},[220,13921,13502],{"class":264},[220,13923,3262],{"class":346},[220,13925,359],{"class":264},[220,13927,13928,13930,13932],{"class":222,"line":673},[220,13929,2567],{"class":264},[220,13931,3398],{"class":346},[220,13933,359],{"class":264},[220,13935,13936,13938,13940],{"class":222,"line":682},[220,13937,402],{"class":264},[220,13939,3398],{"class":346},[220,13941,359],{"class":264},[3262,13943,13945],{"id":13944},"inline-content-block","Inline content block",[15,13947,13948],{},"A shader that flows naturally in document layout, like an image or video:",[246,13950,13951,14039,14114,14189],{":tabs":248},[212,13952,13954],{"className":334,"code":13953,"language":336,"meta":178,"style":178},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C\u002Fp>\n\n \u003CShader class=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl \u002F>\n \u003C\u002FShader>\n\n \u003Cp>Text after the shader continues here.\u003C\u002Fp>\n\u003C\u002Farticle>\n",[99,13955,13956,13965,13978,13982,13997,14006,14014,14018,14031],{"__ignoreMap":178},[220,13957,13958,13960,13963],{"class":222,"line":223},[220,13959,343],{"class":264},[220,13961,13962],{"class":346},"article",[220,13964,359],{"class":264},[220,13966,13967,13969,13971,13974,13976],{"class":222,"line":179},[220,13968,364],{"class":264},[220,13970,15],{"class":346},[220,13972,13973],{"class":264},">Text before the shader.\u003C\u002F",[220,13975,15],{"class":346},[220,13977,359],{"class":264},[220,13979,13980],{"class":222,"line":389},[220,13981,647],{"emptyLinePlaceholder":194},[220,13983,13984,13986,13988,13990,13992,13995],{"class":222,"line":399},[220,13985,364],{"class":264},[220,13987,347],{"class":346},[220,13989,350],{"class":226},[220,13991,353],{"class":264},[220,13993,13994],{"class":230},"\"w-full aspect-video my-8 rounded-xl\"",[220,13996,359],{"class":264},[220,13998,13999,14001,14004],{"class":222,"line":644},[220,14000,2550],{"class":264},[220,14002,14003],{"class":346},"Swirl",[220,14005,386],{"class":264},[220,14007,14008,14010,14012],{"class":222,"line":650},[220,14009,2567],{"class":264},[220,14011,347],{"class":346},[220,14013,359],{"class":264},[220,14015,14016],{"class":222,"line":656},[220,14017,647],{"emptyLinePlaceholder":194},[220,14019,14020,14022,14024,14027,14029],{"class":222,"line":673},[220,14021,364],{"class":264},[220,14023,15],{"class":346},[220,14025,14026],{"class":264},">Text after the shader continues here.\u003C\u002F",[220,14028,15],{"class":346},[220,14030,359],{"class":264},[220,14032,14033,14035,14037],{"class":222,"line":682},[220,14034,402],{"class":264},[220,14036,13962],{"class":346},[220,14038,359],{"class":264},[212,14040,14042],{"className":409,"code":14041,"language":411,"meta":178,"style":178},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C\u002Fp>\n \u003CShader className=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl \u002F>\n \u003C\u002FShader>\n \u003Cp>Text after the shader continues here.\u003C\u002Fp>\n\u003C\u002Farticle>\n",[99,14043,14044,14052,14064,14078,14086,14094,14106],{"__ignoreMap":178},[220,14045,14046,14048,14050],{"class":222,"line":223},[220,14047,343],{"class":264},[220,14049,13962],{"class":346},[220,14051,359],{"class":264},[220,14053,14054,14056,14058,14060,14062],{"class":222,"line":179},[220,14055,364],{"class":264},[220,14057,15],{"class":346},[220,14059,13973],{"class":264},[220,14061,15],{"class":346},[220,14063,359],{"class":264},[220,14065,14066,14068,14070,14072,14074,14076],{"class":222,"line":389},[220,14067,364],{"class":264},[220,14069,347],{"class":420},[220,14071,423],{"class":226},[220,14073,353],{"class":260},[220,14075,13994],{"class":230},[220,14077,359],{"class":264},[220,14079,14080,14082,14084],{"class":222,"line":399},[220,14081,2550],{"class":264},[220,14083,14003],{"class":420},[220,14085,386],{"class":264},[220,14087,14088,14090,14092],{"class":222,"line":644},[220,14089,2567],{"class":264},[220,14091,347],{"class":420},[220,14093,359],{"class":264},[220,14095,14096,14098,14100,14102,14104],{"class":222,"line":650},[220,14097,364],{"class":264},[220,14099,15],{"class":346},[220,14101,14026],{"class":264},[220,14103,15],{"class":346},[220,14105,359],{"class":264},[220,14107,14108,14110,14112],{"class":222,"line":656},[220,14109,402],{"class":264},[220,14111,13962],{"class":346},[220,14113,359],{"class":264},[212,14115,14117],{"className":468,"code":14116,"language":469,"meta":178,"style":178},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C\u002Fp>\n \u003CShader class=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl \u002F>\n \u003C\u002FShader>\n \u003Cp>Text after the shader continues here.\u003C\u002Fp>\n\u003C\u002Farticle>\n",[99,14118,14119,14127,14139,14153,14161,14169,14181],{"__ignoreMap":178},[220,14120,14121,14123,14125],{"class":222,"line":223},[220,14122,343],{"class":264},[220,14124,13962],{"class":346},[220,14126,359],{"class":264},[220,14128,14129,14131,14133,14135,14137],{"class":222,"line":179},[220,14130,364],{"class":264},[220,14132,15],{"class":346},[220,14134,13973],{"class":264},[220,14136,15],{"class":346},[220,14138,359],{"class":264},[220,14140,14141,14143,14145,14147,14149,14151],{"class":222,"line":389},[220,14142,364],{"class":264},[220,14144,347],{"class":420},[220,14146,350],{"class":226},[220,14148,353],{"class":260},[220,14150,13994],{"class":230},[220,14152,359],{"class":264},[220,14154,14155,14157,14159],{"class":222,"line":399},[220,14156,2550],{"class":264},[220,14158,14003],{"class":420},[220,14160,386],{"class":264},[220,14162,14163,14165,14167],{"class":222,"line":644},[220,14164,2567],{"class":264},[220,14166,347],{"class":420},[220,14168,359],{"class":264},[220,14170,14171,14173,14175,14177,14179],{"class":222,"line":650},[220,14172,364],{"class":264},[220,14174,15],{"class":346},[220,14176,14026],{"class":264},[220,14178,15],{"class":346},[220,14180,359],{"class":264},[220,14182,14183,14185,14187],{"class":222,"line":656},[220,14184,402],{"class":264},[220,14186,13962],{"class":346},[220,14188,359],{"class":264},[212,14190,14191],{"className":468,"code":14116,"language":469,"meta":178,"style":178},[99,14192,14193,14201,14213,14227,14235,14243,14255],{"__ignoreMap":178},[220,14194,14195,14197,14199],{"class":222,"line":223},[220,14196,343],{"class":264},[220,14198,13962],{"class":346},[220,14200,359],{"class":264},[220,14202,14203,14205,14207,14209,14211],{"class":222,"line":179},[220,14204,364],{"class":264},[220,14206,15],{"class":346},[220,14208,13973],{"class":264},[220,14210,15],{"class":346},[220,14212,359],{"class":264},[220,14214,14215,14217,14219,14221,14223,14225],{"class":222,"line":389},[220,14216,364],{"class":264},[220,14218,347],{"class":420},[220,14220,350],{"class":226},[220,14222,353],{"class":260},[220,14224,13994],{"class":230},[220,14226,359],{"class":264},[220,14228,14229,14231,14233],{"class":222,"line":399},[220,14230,2550],{"class":264},[220,14232,14003],{"class":420},[220,14234,386],{"class":264},[220,14236,14237,14239,14241],{"class":222,"line":644},[220,14238,2567],{"class":264},[220,14240,347],{"class":420},[220,14242,359],{"class":264},[220,14244,14245,14247,14249,14251,14253],{"class":222,"line":650},[220,14246,364],{"class":264},[220,14248,15],{"class":346},[220,14250,14026],{"class":264},[220,14252,15],{"class":346},[220,14254,359],{"class":264},[220,14256,14257,14259,14261],{"class":222,"line":656},[220,14258,402],{"class":264},[220,14260,13962],{"class":346},[220,14262,359],{"class":264},[23,14264,14266],{"id":14265},"layering-content-over-shaders","Layering content over shaders",[3262,14268,14270],{"id":14269},"pointer-events","Pointer events",[15,14272,14273,14274,14277],{},"Canvases capture all pointer events by default. Add ",[99,14275,14276],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[246,14279,14280,14316,14351,14385],{":tabs":248},[212,14281,14283],{"className":334,"code":14282,"language":336,"meta":178,"style":178},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14284,14285,14300,14308],{"__ignoreMap":178},[220,14286,14287,14289,14291,14293,14295,14298],{"class":222,"line":223},[220,14288,343],{"class":264},[220,14290,347],{"class":346},[220,14292,350],{"class":226},[220,14294,353],{"class":264},[220,14296,14297],{"class":230},"\"absolute inset-0 pointer-events-none\"",[220,14299,359],{"class":264},[220,14301,14302,14304,14306],{"class":222,"line":179},[220,14303,364],{"class":264},[220,14305,12617],{"class":346},[220,14307,386],{"class":264},[220,14309,14310,14312,14314],{"class":222,"line":389},[220,14311,402],{"class":264},[220,14313,347],{"class":346},[220,14315,359],{"class":264},[212,14317,14319],{"className":409,"code":14318,"language":411,"meta":178,"style":178},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14320,14321,14335,14343],{"__ignoreMap":178},[220,14322,14323,14325,14327,14329,14331,14333],{"class":222,"line":223},[220,14324,343],{"class":264},[220,14326,347],{"class":420},[220,14328,423],{"class":226},[220,14330,353],{"class":260},[220,14332,14297],{"class":230},[220,14334,359],{"class":264},[220,14336,14337,14339,14341],{"class":222,"line":179},[220,14338,364],{"class":264},[220,14340,12617],{"class":420},[220,14342,386],{"class":264},[220,14344,14345,14347,14349],{"class":222,"line":389},[220,14346,402],{"class":264},[220,14348,347],{"class":420},[220,14350,359],{"class":264},[212,14352,14353],{"className":468,"code":14282,"language":469,"meta":178,"style":178},[99,14354,14355,14369,14377],{"__ignoreMap":178},[220,14356,14357,14359,14361,14363,14365,14367],{"class":222,"line":223},[220,14358,343],{"class":264},[220,14360,347],{"class":420},[220,14362,350],{"class":226},[220,14364,353],{"class":260},[220,14366,14297],{"class":230},[220,14368,359],{"class":264},[220,14370,14371,14373,14375],{"class":222,"line":179},[220,14372,364],{"class":264},[220,14374,12617],{"class":420},[220,14376,386],{"class":264},[220,14378,14379,14381,14383],{"class":222,"line":389},[220,14380,402],{"class":264},[220,14382,347],{"class":420},[220,14384,359],{"class":264},[212,14386,14387],{"className":468,"code":14282,"language":469,"meta":178,"style":178},[99,14388,14389,14403,14411],{"__ignoreMap":178},[220,14390,14391,14393,14395,14397,14399,14401],{"class":222,"line":223},[220,14392,343],{"class":264},[220,14394,347],{"class":420},[220,14396,350],{"class":226},[220,14398,353],{"class":260},[220,14400,14297],{"class":230},[220,14402,359],{"class":264},[220,14404,14405,14407,14409],{"class":222,"line":179},[220,14406,364],{"class":264},[220,14408,12617],{"class":420},[220,14410,386],{"class":264},[220,14412,14413,14415,14417],{"class":222,"line":389},[220,14414,402],{"class":264},[220,14416,347],{"class":420},[220,14418,359],{"class":264},[15,14420,14421,14422,1864,14424,14427,14428,14430],{},"Interactive effects like ",[99,14423,394],{},[99,14425,14426],{},"CursorRipples"," still track global mouse position even with ",[99,14429,14276],{}," — they listen on the window rather than the canvas element.",[3262,14432,14434],{"id":14433},"stacking-context-and-z-index","Stacking context and z-index",[15,14436,14437,14440,14441,14443,14444,1554],{},[99,14438,14439],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[99,14442,13020],{}," (or similar) and a higher ",[99,14445,14439],{},[212,14447,14449],{"className":12879,"code":14448,"language":12881,"meta":178,"style":178},"\u003Cdiv class=\"relative\">\n \u003C!-- canvas at z-0 -->\n \u003Ccanvas class=\"absolute inset-0\">\u003C\u002Fcanvas>\n \u003C!-- content above canvas -->\n \u003Cdiv class=\"relative z-10\">I appear above the canvas\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,14450,14451,14466,14471,14489,14494,14513],{"__ignoreMap":178},[220,14452,14453,14455,14457,14459,14461,14464],{"class":222,"line":223},[220,14454,343],{"class":264},[220,14456,3398],{"class":346},[220,14458,350],{"class":226},[220,14460,353],{"class":264},[220,14462,14463],{"class":230},"\"relative\"",[220,14465,359],{"class":264},[220,14467,14468],{"class":222,"line":179},[220,14469,14470],{"class":609}," \u003C!-- canvas at z-0 -->\n",[220,14472,14473,14475,14477,14479,14481,14483,14485,14487],{"class":222,"line":389},[220,14474,364],{"class":264},[220,14476,12890],{"class":346},[220,14478,350],{"class":226},[220,14480,353],{"class":264},[220,14482,13415],{"class":230},[220,14484,3804],{"class":264},[220,14486,12890],{"class":346},[220,14488,359],{"class":264},[220,14490,14491],{"class":222,"line":399},[220,14492,14493],{"class":609}," \u003C!-- content above canvas -->\n",[220,14495,14496,14498,14500,14502,14504,14506,14509,14511],{"class":222,"line":644},[220,14497,364],{"class":264},[220,14499,3398],{"class":346},[220,14501,350],{"class":226},[220,14503,353],{"class":264},[220,14505,12645],{"class":230},[220,14507,14508],{"class":264},">I appear above the canvas\u003C\u002F",[220,14510,3398],{"class":346},[220,14512,359],{"class":264},[220,14514,14515,14517,14519],{"class":222,"line":650},[220,14516,402],{"class":264},[220,14518,3398],{"class":346},[220,14520,359],{"class":264},[23,14522,14524],{"id":14523},"responsive-sizing","Responsive sizing",[15,14526,14527],{},"Shaders responds to any CSS-based resize:",[246,14529,14530,14651,14686,14721],{":tabs":248},[212,14531,14533],{"className":334,"code":14532,"language":336,"meta":178,"style":178},"\u003C!-- Different heights at breakpoints -->\n\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Aspect ratio preserving at any width -->\n\u003CShader class=\"w-full aspect-square md:aspect-video\">\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Dynamic viewport height (mobile-safe) -->\n\u003CShader class=\"w-full h-[100dvh]\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14534,14535,14540,14555,14563,14571,14575,14580,14595,14603,14611,14615,14620,14635,14643],{"__ignoreMap":178},[220,14536,14537],{"class":222,"line":223},[220,14538,14539],{"class":609},"\u003C!-- Different heights at breakpoints -->\n",[220,14541,14542,14544,14546,14548,14550,14553],{"class":222,"line":179},[220,14543,343],{"class":264},[220,14545,347],{"class":346},[220,14547,350],{"class":226},[220,14549,353],{"class":264},[220,14551,14552],{"class":230},"\"w-full h-48 md:h-72 lg:h-screen\"",[220,14554,359],{"class":264},[220,14556,14557,14559,14561],{"class":222,"line":389},[220,14558,364],{"class":264},[220,14560,367],{"class":346},[220,14562,386],{"class":264},[220,14564,14565,14567,14569],{"class":222,"line":399},[220,14566,402],{"class":264},[220,14568,347],{"class":346},[220,14570,359],{"class":264},[220,14572,14573],{"class":222,"line":644},[220,14574,647],{"emptyLinePlaceholder":194},[220,14576,14577],{"class":222,"line":650},[220,14578,14579],{"class":609},"\u003C!-- Aspect ratio preserving at any width -->\n",[220,14581,14582,14584,14586,14588,14590,14593],{"class":222,"line":656},[220,14583,343],{"class":264},[220,14585,347],{"class":346},[220,14587,350],{"class":226},[220,14589,353],{"class":264},[220,14591,14592],{"class":230},"\"w-full aspect-square md:aspect-video\"",[220,14594,359],{"class":264},[220,14596,14597,14599,14601],{"class":222,"line":673},[220,14598,364],{"class":264},[220,14600,14003],{"class":346},[220,14602,386],{"class":264},[220,14604,14605,14607,14609],{"class":222,"line":682},[220,14606,402],{"class":264},[220,14608,347],{"class":346},[220,14610,359],{"class":264},[220,14612,14613],{"class":222,"line":691},[220,14614,647],{"emptyLinePlaceholder":194},[220,14616,14617],{"class":222,"line":696},[220,14618,14619],{"class":609},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[220,14621,14622,14624,14626,14628,14630,14633],{"class":222,"line":702},[220,14623,343],{"class":264},[220,14625,347],{"class":346},[220,14627,350],{"class":226},[220,14629,353],{"class":264},[220,14631,14632],{"class":230},"\"w-full h-[100dvh]\"",[220,14634,359],{"class":264},[220,14636,14637,14639,14641],{"class":222,"line":718},[220,14638,364],{"class":264},[220,14640,12617],{"class":346},[220,14642,386],{"class":264},[220,14644,14645,14647,14649],{"class":222,"line":727},[220,14646,402],{"class":264},[220,14648,347],{"class":346},[220,14650,359],{"class":264},[212,14652,14654],{"className":409,"code":14653,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14655,14656,14670,14678],{"__ignoreMap":178},[220,14657,14658,14660,14662,14664,14666,14668],{"class":222,"line":223},[220,14659,343],{"class":264},[220,14661,347],{"class":420},[220,14663,423],{"class":226},[220,14665,353],{"class":260},[220,14667,14552],{"class":230},[220,14669,359],{"class":264},[220,14671,14672,14674,14676],{"class":222,"line":179},[220,14673,364],{"class":264},[220,14675,367],{"class":420},[220,14677,386],{"class":264},[220,14679,14680,14682,14684],{"class":222,"line":389},[220,14681,402],{"class":264},[220,14683,347],{"class":420},[220,14685,359],{"class":264},[212,14687,14689],{"className":468,"code":14688,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14690,14691,14705,14713],{"__ignoreMap":178},[220,14692,14693,14695,14697,14699,14701,14703],{"class":222,"line":223},[220,14694,343],{"class":264},[220,14696,347],{"class":420},[220,14698,350],{"class":226},[220,14700,353],{"class":260},[220,14702,14552],{"class":230},[220,14704,359],{"class":264},[220,14706,14707,14709,14711],{"class":222,"line":179},[220,14708,364],{"class":264},[220,14710,367],{"class":420},[220,14712,386],{"class":264},[220,14714,14715,14717,14719],{"class":222,"line":389},[220,14716,402],{"class":264},[220,14718,347],{"class":420},[220,14720,359],{"class":264},[212,14722,14723],{"className":468,"code":14688,"language":469,"meta":178,"style":178},[99,14724,14725,14739,14747],{"__ignoreMap":178},[220,14726,14727,14729,14731,14733,14735,14737],{"class":222,"line":223},[220,14728,343],{"class":264},[220,14730,347],{"class":420},[220,14732,350],{"class":226},[220,14734,353],{"class":260},[220,14736,14552],{"class":230},[220,14738,359],{"class":264},[220,14740,14741,14743,14745],{"class":222,"line":179},[220,14742,364],{"class":264},[220,14744,367],{"class":420},[220,14746,386],{"class":264},[220,14748,14749,14751,14753],{"class":222,"line":389},[220,14750,402],{"class":264},[220,14752,347],{"class":420},[220,14754,359],{"class":264},[23,14756,14758],{"id":14757},"other-css-properties","Other CSS properties",[15,14760,14761],{},"The canvas element is fully styleable with standard CSS:",[246,14763,14764,14885,14920,14955],{":tabs":248},[212,14765,14767],{"className":334,"code":14766,"language":336,"meta":178,"style":178},"\u003C!-- Rounded with border -->\n\u003CShader class=\"rounded-2xl border border-white\u002F10 w-full h-48\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Drop shadow -->\n\u003CShader class=\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\">\n \u003CPlasma \u002F>\n\u003C\u002FShader>\n\n\u003C!-- CSS blur (applied after GPU render) -->\n\u003CShader class=\"blur-sm w-full h-32\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14768,14769,14774,14789,14797,14805,14809,14814,14829,14837,14845,14849,14854,14869,14877],{"__ignoreMap":178},[220,14770,14771],{"class":222,"line":223},[220,14772,14773],{"class":609},"\u003C!-- Rounded with border -->\n",[220,14775,14776,14778,14780,14782,14784,14787],{"class":222,"line":179},[220,14777,343],{"class":264},[220,14779,347],{"class":346},[220,14781,350],{"class":226},[220,14783,353],{"class":264},[220,14785,14786],{"class":230},"\"rounded-2xl border border-white\u002F10 w-full h-48\"",[220,14788,359],{"class":264},[220,14790,14791,14793,14795],{"class":222,"line":389},[220,14792,364],{"class":264},[220,14794,367],{"class":346},[220,14796,386],{"class":264},[220,14798,14799,14801,14803],{"class":222,"line":399},[220,14800,402],{"class":264},[220,14802,347],{"class":346},[220,14804,359],{"class":264},[220,14806,14807],{"class":222,"line":644},[220,14808,647],{"emptyLinePlaceholder":194},[220,14810,14811],{"class":222,"line":650},[220,14812,14813],{"class":609},"\u003C!-- Drop shadow -->\n",[220,14815,14816,14818,14820,14822,14824,14827],{"class":222,"line":656},[220,14817,343],{"class":264},[220,14819,347],{"class":346},[220,14821,350],{"class":226},[220,14823,353],{"class":264},[220,14825,14826],{"class":230},"\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\"",[220,14828,359],{"class":264},[220,14830,14831,14833,14835],{"class":222,"line":673},[220,14832,364],{"class":264},[220,14834,13069],{"class":346},[220,14836,386],{"class":264},[220,14838,14839,14841,14843],{"class":222,"line":682},[220,14840,402],{"class":264},[220,14842,347],{"class":346},[220,14844,359],{"class":264},[220,14846,14847],{"class":222,"line":691},[220,14848,647],{"emptyLinePlaceholder":194},[220,14850,14851],{"class":222,"line":696},[220,14852,14853],{"class":609},"\u003C!-- CSS blur (applied after GPU render) -->\n",[220,14855,14856,14858,14860,14862,14864,14867],{"class":222,"line":702},[220,14857,343],{"class":264},[220,14859,347],{"class":346},[220,14861,350],{"class":226},[220,14863,353],{"class":264},[220,14865,14866],{"class":230},"\"blur-sm w-full h-32\"",[220,14868,359],{"class":264},[220,14870,14871,14873,14875],{"class":222,"line":718},[220,14872,364],{"class":264},[220,14874,367],{"class":346},[220,14876,386],{"class":264},[220,14878,14879,14881,14883],{"class":222,"line":727},[220,14880,402],{"class":264},[220,14882,347],{"class":346},[220,14884,359],{"class":264},[212,14886,14888],{"className":409,"code":14887,"language":411,"meta":178,"style":178},"\u003CShader className=\"rounded-2xl border border-white\u002F10 w-full h-48\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14889,14890,14904,14912],{"__ignoreMap":178},[220,14891,14892,14894,14896,14898,14900,14902],{"class":222,"line":223},[220,14893,343],{"class":264},[220,14895,347],{"class":420},[220,14897,423],{"class":226},[220,14899,353],{"class":260},[220,14901,14786],{"class":230},[220,14903,359],{"class":264},[220,14905,14906,14908,14910],{"class":222,"line":179},[220,14907,364],{"class":264},[220,14909,367],{"class":420},[220,14911,386],{"class":264},[220,14913,14914,14916,14918],{"class":222,"line":389},[220,14915,402],{"class":264},[220,14917,347],{"class":420},[220,14919,359],{"class":264},[212,14921,14923],{"className":468,"code":14922,"language":469,"meta":178,"style":178},"\u003CShader class=\"rounded-2xl border border-white\u002F10 w-full h-48\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14924,14925,14939,14947],{"__ignoreMap":178},[220,14926,14927,14929,14931,14933,14935,14937],{"class":222,"line":223},[220,14928,343],{"class":264},[220,14930,347],{"class":420},[220,14932,350],{"class":226},[220,14934,353],{"class":260},[220,14936,14786],{"class":230},[220,14938,359],{"class":264},[220,14940,14941,14943,14945],{"class":222,"line":179},[220,14942,364],{"class":264},[220,14944,367],{"class":420},[220,14946,386],{"class":264},[220,14948,14949,14951,14953],{"class":222,"line":389},[220,14950,402],{"class":264},[220,14952,347],{"class":420},[220,14954,359],{"class":264},[212,14956,14957],{"className":468,"code":14922,"language":469,"meta":178,"style":178},[99,14958,14959,14973,14981],{"__ignoreMap":178},[220,14960,14961,14963,14965,14967,14969,14971],{"class":222,"line":223},[220,14962,343],{"class":264},[220,14964,347],{"class":420},[220,14966,350],{"class":226},[220,14968,353],{"class":260},[220,14970,14786],{"class":230},[220,14972,359],{"class":264},[220,14974,14975,14977,14979],{"class":222,"line":179},[220,14976,364],{"class":264},[220,14978,367],{"class":420},[220,14980,386],{"class":264},[220,14982,14983,14985,14987],{"class":222,"line":389},[220,14984,402],{"class":264},[220,14986,347],{"class":420},[220,14988,359],{"class":264},[1504,14990,14991],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":14993},[14994,14995,14996,15002,15006,15007],{"id":12256,"depth":179,"text":12257},{"id":593,"depth":179,"text":594},{"id":12575,"depth":179,"text":12576,"children":14997},[14998,14999,15000,15001],{"id":12579,"depth":389,"text":12580},{"id":13013,"depth":389,"text":13014},{"id":13376,"depth":389,"text":13377},{"id":13944,"depth":389,"text":13945},{"id":14265,"depth":179,"text":14266,"children":15003},[15004,15005],{"id":14269,"depth":389,"text":14270},{"id":14433,"depth":389,"text":14434},{"id":14523,"depth":179,"text":14524},{"id":14757,"depth":179,"text":14758},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1489,"description":15008},"docs\u002Fguide\u002F5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":15015,"title":15016,"body":15017,"category":10232,"description":17289,"exclude":190,"extension":191,"forceFramework":190,"icon":17290,"meta":17291,"navigation":194,"path":17292,"seo":17293,"stem":17294,"__hash__":17295},"guide\u002Fdocs\u002Fguide\u002F6.transforms.md","Transforms",{"type":8,"value":15018,"toc":17278},[15019,15023,15030,15037,15143,15150,15176,15343,15365,15371,15382,15385,15450,15565,15568,15619,15621,15639,15647,15674,15731,15734,15804,15820,15823,15828,15881,15885,15892,15923,15926,15930,16488,16492,16497,17267,17275],[11,15020,15022],{"id":15021},"transforms-bounding-boxes","Transforms & Bounding Boxes",[15,15024,15025,15026,15029],{},"Every layer in a shader can be positioned, sized, and rotated inside the canvas with a ",[159,15027,15028],{},"bounding box"," — a rectangular frame, just like a layer in a design tool. You move it, resize it, and rotate it, and the layer is drawn to fit.",[15,15031,15032,15033,15036],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A bounding box positions the ",[1847,15034,15035],{},"content within the canvas"," — the layer shifts, scales, or rotates without touching the DOM.",[212,15038,15040],{"className":334,"code":15039,"language":336,"meta":178,"style":178},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n\u003CShader class=\"-translate-x-4\">...\u003C\u002FShader>\n\n\u003C!-- Bounding box: frames one layer inside the canvas -->\n\u003CShader>\n \u003CLinearGradient :bounding-box=\"{\n x: { unit: 'uv', value: 0.25 },\n y: { unit: 'uv', value: 0.25 },\n width: { unit: 'uv', value: 0.5 },\n height: { unit: 'uv', value: 0.5 },\n origin: 'top-left',\n rotation: 0\n }\" \u002F>\n\u003C\u002FShader>\n",[99,15041,15042,15047,15067,15071,15076,15084,15098,15103,15108,15113,15118,15123,15128,15135],{"__ignoreMap":178},[220,15043,15044],{"class":222,"line":223},[220,15045,15046],{"class":609},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n",[220,15048,15049,15051,15053,15055,15057,15060,15063,15065],{"class":222,"line":179},[220,15050,343],{"class":264},[220,15052,347],{"class":346},[220,15054,350],{"class":226},[220,15056,353],{"class":264},[220,15058,15059],{"class":230},"\"-translate-x-4\"",[220,15061,15062],{"class":264},">...\u003C\u002F",[220,15064,347],{"class":346},[220,15066,359],{"class":264},[220,15068,15069],{"class":222,"line":389},[220,15070,647],{"emptyLinePlaceholder":194},[220,15072,15073],{"class":222,"line":399},[220,15074,15075],{"class":609},"\u003C!-- Bounding box: frames one layer inside the canvas -->\n",[220,15077,15078,15080,15082],{"class":222,"line":644},[220,15079,343],{"class":264},[220,15081,347],{"class":346},[220,15083,359],{"class":264},[220,15085,15086,15088,15090,15093,15095],{"class":222,"line":650},[220,15087,364],{"class":264},[220,15089,367],{"class":346},[220,15091,15092],{"class":226}," :bounding-box",[220,15094,353],{"class":264},[220,15096,15097],{"class":230},"\"{\n",[220,15099,15100],{"class":222,"line":656},[220,15101,15102],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15104,15105],{"class":222,"line":673},[220,15106,15107],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15109,15110],{"class":222,"line":682},[220,15111,15112],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15114,15115],{"class":222,"line":691},[220,15116,15117],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15119,15120],{"class":222,"line":696},[220,15121,15122],{"class":230}," origin: 'top-left',\n",[220,15124,15125],{"class":222,"line":702},[220,15126,15127],{"class":230}," rotation: 0\n",[220,15129,15130,15133],{"class":222,"line":718},[220,15131,15132],{"class":230}," }\"",[220,15134,386],{"class":264},[220,15136,15137,15139,15141],{"class":222,"line":727},[220,15138,402],{"class":264},[220,15140,347],{"class":346},[220,15142,359],{"class":264},[23,15144,1839,15146,15149],{"id":15145},"the-boundingbox-prop",[99,15147,15148],{},"boundingBox"," prop",[15,15151,15152,15153,15155,15156,1895,15159,1895,15162,1895,15165,15168,15169,15172,15173,15175],{},"Every renderable component accepts a ",[99,15154,15148],{}," object. It has four required dimensions — ",[99,15157,15158],{},"x",[99,15160,15161],{},"y",[99,15163,15164],{},"width",[99,15166,15167],{},"height"," — plus an optional ",[99,15170,15171],{},"origin",", a ",[99,15174,11835],{},", and a couple of refinements.",[1794,15177,15178,15193],{},[1797,15179,15180],{},[1800,15181,15182,15185,15188,15191],{},[1803,15183,15184],{},"Field",[1803,15186,15187],{},"Type",[1803,15189,15190],{},"Default",[1803,15192,1808],{},[1810,15194,15195,15215,15232,15247,15262,15290,15308,15324],{},[1800,15196,15197,15201,15206,15209],{},[1815,15198,15199],{},[99,15200,15158],{},[1815,15202,15203],{},[99,15204,15205],{},"{ value, unit }",[1815,15207,15208],{},"—",[1815,15210,15211,15212,15214],{},"Horizontal position of the box's anchor corner, measured in the ",[99,15213,15171],{}," frame",[1800,15216,15217,15221,15225,15227],{},[1815,15218,15219],{},[99,15220,15161],{},[1815,15222,15223],{},[99,15224,15205],{},[1815,15226,15208],{},[1815,15228,15229,15230,15214],{},"Vertical position of the box's anchor corner, measured in the ",[99,15231,15171],{},[1800,15233,15234,15238,15242,15244],{},[1815,15235,15236],{},[99,15237,15164],{},[1815,15239,15240],{},[99,15241,15205],{},[1815,15243,15208],{},[1815,15245,15246],{},"Box width",[1800,15248,15249,15253,15257,15259],{},[1815,15250,15251],{},[99,15252,15167],{},[1815,15254,15255],{},[99,15256,15205],{},[1815,15258,15208],{},[1815,15260,15261],{},"Box height",[1800,15263,15264,15268,15272,15277],{},[1815,15265,15266],{},[99,15267,15171],{},[1815,15269,15270],{},[99,15271,9060],{},[1815,15273,15274],{},[99,15275,15276],{},"'top-left'",[1815,15278,15279,15280,15282,15283,15285,15286],{},"Which reference point ",[99,15281,15158],{}," \u002F ",[99,15284,15161],{}," are measured from — see ",[56,15287,15289],{"href":15288},"#origin","Origin",[1800,15291,15292,15296,15301,15305],{},[1815,15293,15294],{},[99,15295,11835],{},[1815,15297,15298],{},[99,15299,15300],{},"number",[1815,15302,15303],{},[99,15304,8673],{},[1815,15306,15307],{},"Rotation in degrees, around the box's geometric center",[1800,15309,15310,15315,15319,15321],{},[1815,15311,15312],{},[99,15313,15314],{},"cornerRadius",[1815,15316,15317],{},[99,15318,15205],{},[1815,15320,15208],{},[1815,15322,15323],{},"Rounds the corners of the clipped region (filter layers only)",[1800,15325,15326,15331,15336,15340],{},[1815,15327,15328],{},[99,15329,15330],{},"lockAspect",[1815,15332,15333],{},[99,15334,15335],{},"boolean",[1815,15337,15338],{},[99,15339,2629],{},[1815,15341,15342],{},"Editor-only hint that locks the resize handles to the box's aspect ratio. Ignored at render time",[15,15344,15345,15346,1895,15348,1895,15350,1895,15352,15354,15355,15357,15358,15361,15362,15364],{},"Each of ",[99,15347,15158],{},[99,15349,15161],{},[99,15351,15164],{},[99,15353,15167],{}," (and ",[99,15356,15314],{},") is a ",[159,15359,15360],{},"dimensional value"," — a ",[99,15363,15205],{}," pair, so you can mix relative and absolute units on the same layer.",[15,15366,15367,15368,15370],{},"When no ",[99,15369,15148],{}," is set, a layer fills the whole canvas. Setting a box is purely opt-in.",[23,15372,15374,15375,15378,15379],{"id":15373},"units-uv-vs-px","Units: ",[99,15376,15377],{},"uv"," (%) vs ",[99,15380,15381],{},"px",[15,15383,15384],{},"Each dimension carries its own unit:",[1794,15386,15387,15397],{},[1797,15388,15389],{},[1800,15390,15391,15394],{},[1803,15392,15393],{},"Unit",[1803,15395,15396],{},"Meaning",[1810,15398,15399,15438],{},[1800,15400,15401,15405],{},[1815,15402,15403],{},[99,15404,15377],{},[1815,15406,15407,15408,1895,15411,15413,15414,15416,15417,15419,15420,15422,15423,15419,15425,15427,15428,15430,15431,3506,15434,15437],{},"A ",[159,15409,15410],{},"fraction of the canvas",[99,15412,8673],{},"–",[99,15415,8677],{},". ",[99,15418,15158],{},"\u002F",[99,15421,15164],{}," are fractions of the canvas width; ",[99,15424,15161],{},[99,15426,15167],{}," of the canvas height. ",[99,15429,7754],{}," = halfway \u002F half the canvas. The Design Editor shows this as a ",[159,15432,15433],{},"percentage",[99,15435,15436],{},"50%",").",[1800,15439,15440,15444],{},[1815,15441,15442],{},[99,15443,15381],{},[1815,15445,15446,15449],{},[159,15447,15448],{},"Device pixels",". A fixed size that stays constant as the canvas resizes — the renderer re-resolves px → uv on every resize. Good for fixed-size logos, badges, and UI chrome.",[212,15451,15453],{"className":334,"code":15452,"language":336,"meta":178,"style":178},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n\u003CGlass :bounding-box=\"{\n x: { unit: 'uv', value: 0.25 },\n y: { unit: 'uv', value: 0.25 },\n width: { unit: 'uv', value: 0.5 },\n height: { unit: 'uv', value: 0.5 },\n origin: 'top-left',\n rotation: 0\n}\" \u002F>\n\n\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n\u003CGlass :bounding-box=\"{\n x: { unit: 'px', value: 24 },\n y: { unit: 'px', value: 24 },\n width: { unit: 'px', value: 200 },\n height: { unit: 'px', value: 200 },\n origin: 'top-left',\n rotation: 0\n}\" \u002F>\n",[99,15454,15455,15460,15473,15478,15483,15488,15493,15498,15503,15510,15514,15519,15531,15536,15541,15546,15551,15555,15559],{"__ignoreMap":178},[220,15456,15457],{"class":222,"line":223},[220,15458,15459],{"class":609},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n",[220,15461,15462,15464,15467,15469,15471],{"class":222,"line":179},[220,15463,343],{"class":264},[220,15465,15466],{"class":346},"Glass",[220,15468,15092],{"class":226},[220,15470,353],{"class":264},[220,15472,15097],{"class":230},[220,15474,15475],{"class":222,"line":389},[220,15476,15477],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15479,15480],{"class":222,"line":399},[220,15481,15482],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15484,15485],{"class":222,"line":644},[220,15486,15487],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15489,15490],{"class":222,"line":650},[220,15491,15492],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15494,15495],{"class":222,"line":656},[220,15496,15497],{"class":230}," origin: 'top-left',\n",[220,15499,15500],{"class":222,"line":673},[220,15501,15502],{"class":230}," rotation: 0\n",[220,15504,15505,15508],{"class":222,"line":682},[220,15506,15507],{"class":230},"}\"",[220,15509,386],{"class":264},[220,15511,15512],{"class":222,"line":691},[220,15513,647],{"emptyLinePlaceholder":194},[220,15515,15516],{"class":222,"line":696},[220,15517,15518],{"class":609},"\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n",[220,15520,15521,15523,15525,15527,15529],{"class":222,"line":702},[220,15522,343],{"class":264},[220,15524,15466],{"class":346},[220,15526,15092],{"class":226},[220,15528,353],{"class":264},[220,15530,15097],{"class":230},[220,15532,15533],{"class":222,"line":718},[220,15534,15535],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15537,15538],{"class":222,"line":727},[220,15539,15540],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15542,15543],{"class":222,"line":2664},[220,15544,15545],{"class":230}," width: { unit: 'px', value: 200 },\n",[220,15547,15548],{"class":222,"line":3522},[220,15549,15550],{"class":230}," height: { unit: 'px', value: 200 },\n",[220,15552,15553],{"class":222,"line":9662},[220,15554,15497],{"class":230},[220,15556,15557],{"class":222,"line":9673},[220,15558,15502],{"class":230},[220,15560,15561,15563],{"class":222,"line":9678},[220,15562,15507],{"class":230},[220,15564,386],{"class":264},[15,15566,15567],{},"Because each property has its own unit, you can mix them — for example a fixed-height bar that always spans the full width:",[212,15569,15571],{"className":334,"code":15570,"language":336,"meta":178,"style":178},"\u003CLinearGradient :bounding-box=\"{\n x: { unit: 'uv', value: 0 },\n y: { unit: 'px', value: 0 },\n width: { unit: 'uv', value: 1 },\n height: { unit: 'px', value: 80 },\n origin: 'top-left',\n rotation: 0\n}\" \u002F>\n",[99,15572,15573,15585,15590,15595,15600,15605,15609,15613],{"__ignoreMap":178},[220,15574,15575,15577,15579,15581,15583],{"class":222,"line":223},[220,15576,343],{"class":264},[220,15578,367],{"class":346},[220,15580,15092],{"class":226},[220,15582,353],{"class":264},[220,15584,15097],{"class":230},[220,15586,15587],{"class":222,"line":179},[220,15588,15589],{"class":230}," x: { unit: 'uv', value: 0 },\n",[220,15591,15592],{"class":222,"line":389},[220,15593,15594],{"class":230}," y: { unit: 'px', value: 0 },\n",[220,15596,15597],{"class":222,"line":399},[220,15598,15599],{"class":230}," width: { unit: 'uv', value: 1 },\n",[220,15601,15602],{"class":222,"line":644},[220,15603,15604],{"class":230}," height: { unit: 'px', value: 80 },\n",[220,15606,15607],{"class":222,"line":650},[220,15608,15497],{"class":230},[220,15610,15611],{"class":222,"line":656},[220,15612,15502],{"class":230},[220,15614,15615,15617],{"class":222,"line":673},[220,15616,15507],{"class":230},[220,15618,386],{"class":264},[23,15620,15289],{"id":15171},[15,15622,1839,15623,15625,15626,15629,15630,1864,15632,15634,15635,15638],{},[99,15624,15171],{}," is the ",[159,15627,15628],{},"reference point"," that ",[99,15631,15158],{},[99,15633,15161],{}," are measured from — the box's anchor corner ",[1847,15636,15637],{},"and"," the frame those coordinates live in. It's a 3×3 grid of nine positions:",[212,15640,15645],{"className":15641,"code":15643,"language":15644},[15642],"language-text","top-left top-center top-right\ncenter-left center center-right\nbottom-left bottom-center bottom-right\n","text",[99,15646,15643],{"__ignoreMap":178},[15,15648,15649,15650,15653,15654,15657,15658,15660,15661,1895,15664,15667,15668,15670,15671,15673],{},"The two axes are independent. The horizontal part picks the X reference (",[99,15651,15652],{},"left"," → from the left edge, ",[99,15655,15656],{},"right"," → from the right edge, ",[99,15659,8241],{}," → a signed offset from the horizontal center). The vertical part does the same for Y (",[99,15662,15663],{},"top",[99,15665,15666],{},"bottom",", or ",[99,15669,8241],{},"). The bare value ",[99,15672,8241],{}," centers both axes.",[34,15675,15676,15686,15702,15717],{},[37,15677,15678,15680,15681,15419,15683,15685],{},[99,15679,15276],{}," (default) — ",[99,15682,15158],{},[99,15684,15161],{}," are measured rightward\u002Fdownward from the top-left corner.",[37,15687,15688,15691,15692,15694,15695,15698,15699,15701],{},[99,15689,15690],{},"'top-right'"," — ",[99,15693,15158],{}," is measured ",[1847,15696,15697],{},"leftward"," from the right edge; ",[99,15700,15161],{}," downward from the top.",[37,15703,15704,15691,15707,15709,15710,15712,15713,15716],{},[99,15705,15706],{},"'bottom-right'",[99,15708,15158],{}," leftward from the right, ",[99,15711,15161],{}," ",[1847,15714,15715],{},"upward"," from the bottom.",[37,15718,15719,15691,15722,15419,15724,15726,15727,15730],{},[99,15720,15721],{},"'center'",[99,15723,15158],{},[99,15725,15161],{}," are signed offsets from the canvas center (",[99,15728,15729],{},"0, 0"," centers the box).",[15,15732,15733],{},"This makes \"pin to a corner\" trivial and resize-stable. A badge 24px in from the top-right corner stays glued there at any canvas size:",[212,15735,15737],{"className":334,"code":15736,"language":336,"meta":178,"style":178},"\u003CImageTexture\n url=\"\u002Fbadge.svg\"\n :bounding-box=\"{\n x: { unit: 'px', value: 24 },\n y: { unit: 'px', value: 24 },\n width: { unit: 'px', value: 96 },\n height: { unit: 'px', value: 96 },\n origin: 'top-right',\n rotation: 0\n }\"\n\u002F>\n",[99,15738,15739,15746,15756,15765,15770,15775,15780,15785,15790,15794,15799],{"__ignoreMap":178},[220,15740,15741,15743],{"class":222,"line":223},[220,15742,343],{"class":264},[220,15744,15745],{"class":346},"ImageTexture\n",[220,15747,15748,15751,15753],{"class":222,"line":179},[220,15749,15750],{"class":226}," url",[220,15752,353],{"class":264},[220,15754,15755],{"class":230},"\"\u002Fbadge.svg\"\n",[220,15757,15758,15761,15763],{"class":222,"line":389},[220,15759,15760],{"class":226}," :bounding-box",[220,15762,353],{"class":264},[220,15764,15097],{"class":230},[220,15766,15767],{"class":222,"line":399},[220,15768,15769],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15771,15772],{"class":222,"line":644},[220,15773,15774],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15776,15777],{"class":222,"line":650},[220,15778,15779],{"class":230}," width: { unit: 'px', value: 96 },\n",[220,15781,15782],{"class":222,"line":656},[220,15783,15784],{"class":230}," height: { unit: 'px', value: 96 },\n",[220,15786,15787],{"class":222,"line":673},[220,15788,15789],{"class":230}," origin: 'top-right',\n",[220,15791,15792],{"class":222,"line":682},[220,15793,15127],{"class":230},[220,15795,15796],{"class":222,"line":691},[220,15797,15798],{"class":230}," }\"\n",[220,15800,15801],{"class":222,"line":696},[220,15802,15803],{"class":264},"\u002F>\n",[15805,15806,15807],"blockquote",{},[15,15808,15809,15712,15812,15814,15815,15419,15817,15819],{},[159,15810,15811],{},"Origin vs. rotation pivot:",[99,15813,15171],{}," only controls where ",[99,15816,15158],{},[99,15818,15161],{}," are measured from. Rotation always pivots around the box's own geometric center, independent of the origin you choose.",[23,15821,15822],{"id":11835},"Rotation",[15,15824,15825,15827],{},[99,15826,11835],{}," spins the box (and its content) around its center, in degrees. Positive values rotate clockwise.",[212,15829,15831],{"className":334,"code":15830,"language":336,"meta":178,"style":178},"\u003CStripes :bounding-box=\"{\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation: 30\n}\" \u002F>\n",[99,15832,15833,15846,15851,15856,15861,15866,15870,15875],{"__ignoreMap":178},[220,15834,15835,15837,15840,15842,15844],{"class":222,"line":223},[220,15836,343],{"class":264},[220,15838,15839],{"class":346},"Stripes",[220,15841,15092],{"class":226},[220,15843,353],{"class":264},[220,15845,15097],{"class":230},[220,15847,15848],{"class":222,"line":179},[220,15849,15850],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,15852,15853],{"class":222,"line":389},[220,15854,15855],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,15857,15858],{"class":222,"line":399},[220,15859,15860],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,15862,15863],{"class":222,"line":644},[220,15864,15865],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,15867,15868],{"class":222,"line":650},[220,15869,15497],{"class":230},[220,15871,15872],{"class":222,"line":656},[220,15873,15874],{"class":230}," rotation: 30\n",[220,15876,15877,15879],{"class":222,"line":673},[220,15878,15507],{"class":230},[220,15880,386],{"class":264},[23,15882,15884],{"id":15883},"how-different-layers-fill-the-box","How different layers fill the box",[15,15886,15887,15888,15891],{},"The box means \"draw this layer here,\" but exactly ",[1847,15889,15890],{},"how"," a layer fills its box depends on the kind of layer:",[34,15893,15894,15904,15910],{},[37,15895,15896,15899,15900,15903],{},[159,15897,15898],{},"Generators"," (gradients, noise, patterns, textures, etc.) ",[159,15901,15902],{},"re-fit"," into the box — the effect lays itself out as if the canvas had been resized to the box, undistorted, then confined to the box rectangle. (A handful of screen-anchored patterns simply confine to the box instead of re-fitting.)",[37,15905,15906,15909],{},[159,15907,15908],{},"Shapes"," (Circle, Star, Blob, and the SDF shape effects like Glass and Crystal) drive their native position\u002Fsize\u002Frotation from the box, so the shape itself moves and scales with the frame.",[37,15911,15912,15915,15916,15919,15920,15922],{},[159,15913,15914],{},"Filters & distortions"," (Blur, Glitch, distortions, …) ",[159,15917,15918],{},"clip"," to the box — the effect is confined to the rectangle, and the untouched layer beneath shows through outside it. This is where ",[99,15921,15314],{}," applies, rounding the clipped region.",[15,15924,15925],{},"In all cases the box is a rotated rectangle, so rotation and corner rounding behave consistently.",[23,15927,15929],{"id":15928},"basic-usage-across-frameworks","Basic usage across frameworks",[246,15931,15932,16006,16131,16242,16352],{":tabs":1557},[212,15933,15935],{"className":334,"code":15934,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient :bounding-box=\"{\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }\" \u002F>\n\u003C\u002FShader>\n",[99,15936,15937,15951,15963,15968,15973,15978,15983,15987,15992,15998],{"__ignoreMap":178},[220,15938,15939,15941,15943,15945,15947,15949],{"class":222,"line":223},[220,15940,343],{"class":264},[220,15942,347],{"class":346},[220,15944,350],{"class":226},[220,15946,353],{"class":264},[220,15948,356],{"class":230},[220,15950,359],{"class":264},[220,15952,15953,15955,15957,15959,15961],{"class":222,"line":179},[220,15954,364],{"class":264},[220,15956,367],{"class":346},[220,15958,15092],{"class":226},[220,15960,353],{"class":264},[220,15962,15097],{"class":230},[220,15964,15965],{"class":222,"line":389},[220,15966,15967],{"class":230}," x: { unit: 'uv', value: 0.1 },\n",[220,15969,15970],{"class":222,"line":399},[220,15971,15972],{"class":230}," y: { unit: 'uv', value: 0.1 },\n",[220,15974,15975],{"class":222,"line":644},[220,15976,15977],{"class":230}," width: { unit: 'uv', value: 0.8 },\n",[220,15979,15980],{"class":222,"line":650},[220,15981,15982],{"class":230}," height: { unit: 'uv', value: 0.8 },\n",[220,15984,15985],{"class":222,"line":656},[220,15986,15122],{"class":230},[220,15988,15989],{"class":222,"line":673},[220,15990,15991],{"class":230}," rotation: 15\n",[220,15993,15994,15996],{"class":222,"line":682},[220,15995,15132],{"class":230},[220,15997,386],{"class":264},[220,15999,16000,16002,16004],{"class":222,"line":691},[220,16001,402],{"class":264},[220,16003,347],{"class":346},[220,16005,359],{"class":264},[212,16007,16009],{"className":409,"code":16008,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n boundingBox={{\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,16010,16011,16025,16031,16041,16058,16071,16084,16097,16106,16114,16119,16123],{"__ignoreMap":178},[220,16012,16013,16015,16017,16019,16021,16023],{"class":222,"line":223},[220,16014,343],{"class":264},[220,16016,347],{"class":420},[220,16018,423],{"class":226},[220,16020,353],{"class":260},[220,16022,356],{"class":230},[220,16024,359],{"class":264},[220,16026,16027,16029],{"class":222,"line":179},[220,16028,364],{"class":264},[220,16030,1189],{"class":420},[220,16032,16033,16036,16038],{"class":222,"line":389},[220,16034,16035],{"class":226}," boundingBox",[220,16037,353],{"class":260},[220,16039,16040],{"class":264},"{{\n",[220,16042,16043,16046,16049,16052,16055],{"class":222,"line":399},[220,16044,16045],{"class":264}," x: { unit: ",[220,16047,16048],{"class":230},"'uv'",[220,16050,16051],{"class":264},", value: ",[220,16053,16054],{"class":420},"0.1",[220,16056,16057],{"class":264}," },\n",[220,16059,16060,16063,16065,16067,16069],{"class":222,"line":644},[220,16061,16062],{"class":264}," y: { unit: ",[220,16064,16048],{"class":230},[220,16066,16051],{"class":264},[220,16068,16054],{"class":420},[220,16070,16057],{"class":264},[220,16072,16073,16076,16078,16080,16082],{"class":222,"line":650},[220,16074,16075],{"class":264}," width: { unit: ",[220,16077,16048],{"class":230},[220,16079,16051],{"class":264},[220,16081,6299],{"class":420},[220,16083,16057],{"class":264},[220,16085,16086,16089,16091,16093,16095],{"class":222,"line":656},[220,16087,16088],{"class":264}," height: { unit: ",[220,16090,16048],{"class":230},[220,16092,16051],{"class":264},[220,16094,6299],{"class":420},[220,16096,16057],{"class":264},[220,16098,16099,16102,16104],{"class":222,"line":673},[220,16100,16101],{"class":264}," origin: ",[220,16103,15276],{"class":230},[220,16105,1760],{"class":264},[220,16107,16108,16111],{"class":222,"line":682},[220,16109,16110],{"class":264}," rotation: ",[220,16112,16113],{"class":420},"15\n",[220,16115,16116],{"class":222,"line":691},[220,16117,16118],{"class":264}," }}\n",[220,16120,16121],{"class":222,"line":696},[220,16122,1234],{"class":264},[220,16124,16125,16127,16129],{"class":222,"line":702},[220,16126,402],{"class":264},[220,16128,347],{"class":420},[220,16130,359],{"class":264},[212,16132,16134],{"className":468,"code":16133,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n boundingBox={{\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,16135,16136,16150,16156,16164,16176,16188,16200,16212,16220,16226,16230,16234],{"__ignoreMap":178},[220,16137,16138,16140,16142,16144,16146,16148],{"class":222,"line":223},[220,16139,343],{"class":264},[220,16141,347],{"class":420},[220,16143,350],{"class":226},[220,16145,353],{"class":260},[220,16147,356],{"class":230},[220,16149,359],{"class":264},[220,16151,16152,16154],{"class":222,"line":179},[220,16153,364],{"class":264},[220,16155,1189],{"class":420},[220,16157,16158,16160,16162],{"class":222,"line":389},[220,16159,16035],{"class":226},[220,16161,353],{"class":260},[220,16163,16040],{"class":264},[220,16165,16166,16168,16170,16172,16174],{"class":222,"line":399},[220,16167,16045],{"class":264},[220,16169,16048],{"class":230},[220,16171,16051],{"class":264},[220,16173,16054],{"class":420},[220,16175,16057],{"class":264},[220,16177,16178,16180,16182,16184,16186],{"class":222,"line":644},[220,16179,16062],{"class":264},[220,16181,16048],{"class":230},[220,16183,16051],{"class":264},[220,16185,16054],{"class":420},[220,16187,16057],{"class":264},[220,16189,16190,16192,16194,16196,16198],{"class":222,"line":650},[220,16191,16075],{"class":264},[220,16193,16048],{"class":230},[220,16195,16051],{"class":264},[220,16197,6299],{"class":420},[220,16199,16057],{"class":264},[220,16201,16202,16204,16206,16208,16210],{"class":222,"line":656},[220,16203,16088],{"class":264},[220,16205,16048],{"class":230},[220,16207,16051],{"class":264},[220,16209,6299],{"class":420},[220,16211,16057],{"class":264},[220,16213,16214,16216,16218],{"class":222,"line":673},[220,16215,16101],{"class":264},[220,16217,15276],{"class":230},[220,16219,1760],{"class":264},[220,16221,16222,16224],{"class":222,"line":682},[220,16223,16110],{"class":264},[220,16225,16113],{"class":420},[220,16227,16228],{"class":222,"line":691},[220,16229,16118],{"class":264},[220,16231,16232],{"class":222,"line":696},[220,16233,1234],{"class":264},[220,16235,16236,16238,16240],{"class":222,"line":702},[220,16237,402],{"class":264},[220,16239,347],{"class":420},[220,16241,359],{"class":264},[212,16243,16244],{"className":468,"code":16133,"language":469,"meta":178,"style":178},[99,16245,16246,16260,16266,16274,16286,16298,16310,16322,16330,16336,16340,16344],{"__ignoreMap":178},[220,16247,16248,16250,16252,16254,16256,16258],{"class":222,"line":223},[220,16249,343],{"class":264},[220,16251,347],{"class":420},[220,16253,350],{"class":226},[220,16255,353],{"class":260},[220,16257,356],{"class":230},[220,16259,359],{"class":264},[220,16261,16262,16264],{"class":222,"line":179},[220,16263,364],{"class":264},[220,16265,1189],{"class":420},[220,16267,16268,16270,16272],{"class":222,"line":389},[220,16269,16035],{"class":226},[220,16271,353],{"class":260},[220,16273,16040],{"class":264},[220,16275,16276,16278,16280,16282,16284],{"class":222,"line":399},[220,16277,16045],{"class":264},[220,16279,16048],{"class":230},[220,16281,16051],{"class":264},[220,16283,16054],{"class":420},[220,16285,16057],{"class":264},[220,16287,16288,16290,16292,16294,16296],{"class":222,"line":644},[220,16289,16062],{"class":264},[220,16291,16048],{"class":230},[220,16293,16051],{"class":264},[220,16295,16054],{"class":420},[220,16297,16057],{"class":264},[220,16299,16300,16302,16304,16306,16308],{"class":222,"line":650},[220,16301,16075],{"class":264},[220,16303,16048],{"class":230},[220,16305,16051],{"class":264},[220,16307,6299],{"class":420},[220,16309,16057],{"class":264},[220,16311,16312,16314,16316,16318,16320],{"class":222,"line":656},[220,16313,16088],{"class":264},[220,16315,16048],{"class":230},[220,16317,16051],{"class":264},[220,16319,6299],{"class":420},[220,16321,16057],{"class":264},[220,16323,16324,16326,16328],{"class":222,"line":673},[220,16325,16101],{"class":264},[220,16327,15276],{"class":230},[220,16329,1760],{"class":264},[220,16331,16332,16334],{"class":222,"line":682},[220,16333,16110],{"class":264},[220,16335,16113],{"class":420},[220,16337,16338],{"class":222,"line":691},[220,16339,16118],{"class":264},[220,16341,16342],{"class":222,"line":696},[220,16343,1234],{"class":264},[220,16345,16346,16348,16350],{"class":222,"line":702},[220,16347,402],{"class":264},[220,16349,347],{"class":420},[220,16351,359],{"class":264},[212,16353,16355],{"className":251,"code":16354,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n props: {\n boundingBox: {\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }\n }\n }\n ]\n})\n",[99,16356,16357,16371,16375,16380,16389,16394,16399,16412,16425,16438,16451,16460,16467,16472,16476,16480,16484],{"__ignoreMap":178},[220,16358,16359,16361,16363,16365,16367,16369],{"class":222,"line":223},[220,16360,1735],{"class":260},[220,16362,1738],{"class":420},[220,16364,1741],{"class":260},[220,16366,1744],{"class":260},[220,16368,1747],{"class":226},[220,16370,1750],{"class":264},[220,16372,16373],{"class":222,"line":179},[220,16374,1765],{"class":264},[220,16376,16377],{"class":222,"line":389},[220,16378,16379],{"class":264}," {\n",[220,16381,16382,16385,16387],{"class":222,"line":399},[220,16383,16384],{"class":264}," type: ",[220,16386,2462],{"class":230},[220,16388,1760],{"class":264},[220,16390,16391],{"class":222,"line":644},[220,16392,16393],{"class":264}," props: {\n",[220,16395,16396],{"class":222,"line":650},[220,16397,16398],{"class":264}," boundingBox: {\n",[220,16400,16401,16404,16406,16408,16410],{"class":222,"line":656},[220,16402,16403],{"class":264}," x: { unit: ",[220,16405,16048],{"class":230},[220,16407,16051],{"class":264},[220,16409,16054],{"class":420},[220,16411,16057],{"class":264},[220,16413,16414,16417,16419,16421,16423],{"class":222,"line":673},[220,16415,16416],{"class":264}," y: { unit: ",[220,16418,16048],{"class":230},[220,16420,16051],{"class":264},[220,16422,16054],{"class":420},[220,16424,16057],{"class":264},[220,16426,16427,16430,16432,16434,16436],{"class":222,"line":682},[220,16428,16429],{"class":264}," width: { unit: ",[220,16431,16048],{"class":230},[220,16433,16051],{"class":264},[220,16435,6299],{"class":420},[220,16437,16057],{"class":264},[220,16439,16440,16443,16445,16447,16449],{"class":222,"line":691},[220,16441,16442],{"class":264}," height: { unit: ",[220,16444,16048],{"class":230},[220,16446,16051],{"class":264},[220,16448,6299],{"class":420},[220,16450,16057],{"class":264},[220,16452,16453,16456,16458],{"class":222,"line":696},[220,16454,16455],{"class":264}," origin: ",[220,16457,15276],{"class":230},[220,16459,1760],{"class":264},[220,16461,16462,16465],{"class":222,"line":702},[220,16463,16464],{"class":264}," rotation: ",[220,16466,16113],{"class":420},[220,16468,16469],{"class":222,"line":718},[220,16470,16471],{"class":264}," }\n",[220,16473,16474],{"class":222,"line":727},[220,16475,4929],{"class":264},[220,16477,16478],{"class":222,"line":2664},[220,16479,4609],{"class":264},[220,16481,16482],{"class":222,"line":3522},[220,16483,1787],{"class":264},[220,16485,16486],{"class":222,"line":9662},[220,16487,1792],{"class":264},[23,16489,16491],{"id":16490},"animating-a-bounding-box","Animating a bounding box",[15,16493,16494,16496],{},[99,16495,15148],{}," is a reactive prop — bind any field to state and it updates live, no recompile:",[246,16498,16500,16752,17054],{":tabs":16499},"[\"Vue\", \"React\", \"JS\"]",[212,16501,16503],{"className":334,"code":16502,"language":336,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nconst rotation = ref(0)\nlet frame\n\nonMounted(() => {\n const animate = () => {\n rotation.value = (rotation.value + 0.5) % 360\n frame = requestAnimationFrame(animate)\n }\n frame = requestAnimationFrame(animate)\n})\nonUnmounted(() => cancelAnimationFrame(frame))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CShader class=\"w-full h-64\">\n \u003CStripes :bounding-box=\"{\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation\n }\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,16504,16505,16515,16526,16530,16547,16555,16559,16569,16583,16606,16619,16623,16634,16638,16653,16661,16665,16673,16687,16699,16704,16709,16714,16719,16724,16729,16736,16744],{"__ignoreMap":178},[220,16506,16507,16509,16511,16513],{"class":222,"line":223},[220,16508,343],{"class":264},[220,16510,2590],{"class":346},[220,16512,2593],{"class":226},[220,16514,359],{"class":264},[220,16516,16517,16519,16522,16524],{"class":222,"line":179},[220,16518,261],{"class":260},[220,16520,16521],{"class":264}," { ref, onMounted, onUnmounted } ",[220,16523,268],{"class":260},[220,16525,2607],{"class":230},[220,16527,16528],{"class":222,"line":389},[220,16529,647],{"emptyLinePlaceholder":194},[220,16531,16532,16534,16537,16539,16541,16543,16545],{"class":222,"line":399},[220,16533,1735],{"class":260},[220,16535,16536],{"class":420}," rotation",[220,16538,1741],{"class":260},[220,16540,2623],{"class":226},[220,16542,2626],{"class":264},[220,16544,8673],{"class":420},[220,16546,2632],{"class":264},[220,16548,16549,16552],{"class":222,"line":644},[220,16550,16551],{"class":260},"let",[220,16553,16554],{"class":264}," frame\n",[220,16556,16557],{"class":222,"line":650},[220,16558,647],{"emptyLinePlaceholder":194},[220,16560,16561,16563,16565,16567],{"class":222,"line":656},[220,16562,3484],{"class":226},[220,16564,3600],{"class":264},[220,16566,2762],{"class":260},[220,16568,3241],{"class":264},[220,16570,16571,16573,16575,16577,16579,16581],{"class":222,"line":673},[220,16572,2705],{"class":260},[220,16574,11959],{"class":226},[220,16576,1741],{"class":260},[220,16578,3492],{"class":264},[220,16580,2762],{"class":260},[220,16582,3241],{"class":264},[220,16584,16585,16588,16590,16593,16595,16598,16600,16603],{"class":222,"line":682},[220,16586,16587],{"class":264}," rotation.value ",[220,16589,353],{"class":260},[220,16591,16592],{"class":264}," (rotation.value ",[220,16594,10836],{"class":260},[220,16596,16597],{"class":420}," 0.5",[220,16599,4168],{"class":264},[220,16601,16602],{"class":260},"%",[220,16604,16605],{"class":420}," 360\n",[220,16607,16608,16611,16613,16616],{"class":222,"line":691},[220,16609,16610],{"class":264}," frame ",[220,16612,353],{"class":260},[220,16614,16615],{"class":226}," requestAnimationFrame",[220,16617,16618],{"class":264},"(animate)\n",[220,16620,16621],{"class":222,"line":696},[220,16622,3256],{"class":264},[220,16624,16625,16628,16630,16632],{"class":222,"line":702},[220,16626,16627],{"class":264}," frame ",[220,16629,353],{"class":260},[220,16631,16615],{"class":226},[220,16633,16618],{"class":264},[220,16635,16636],{"class":222,"line":718},[220,16637,1792],{"class":264},[220,16639,16640,16643,16645,16647,16650],{"class":222,"line":727},[220,16641,16642],{"class":226},"onUnmounted",[220,16644,3600],{"class":264},[220,16646,2762],{"class":260},[220,16648,16649],{"class":226}," cancelAnimationFrame",[220,16651,16652],{"class":264},"(frame))\n",[220,16654,16655,16657,16659],{"class":222,"line":2664},[220,16656,402],{"class":264},[220,16658,2590],{"class":346},[220,16660,359],{"class":264},[220,16662,16663],{"class":222,"line":3522},[220,16664,647],{"emptyLinePlaceholder":194},[220,16666,16667,16669,16671],{"class":222,"line":9662},[220,16668,343],{"class":264},[220,16670,2519],{"class":346},[220,16672,359],{"class":264},[220,16674,16675,16677,16679,16681,16683,16685],{"class":222,"line":9673},[220,16676,364],{"class":264},[220,16678,347],{"class":346},[220,16680,350],{"class":226},[220,16682,353],{"class":264},[220,16684,356],{"class":230},[220,16686,359],{"class":264},[220,16688,16689,16691,16693,16695,16697],{"class":222,"line":9678},[220,16690,2550],{"class":264},[220,16692,15839],{"class":346},[220,16694,15092],{"class":226},[220,16696,353],{"class":264},[220,16698,15097],{"class":230},[220,16700,16701],{"class":222,"line":10999},[220,16702,16703],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,16705,16706],{"class":222,"line":11004},[220,16707,16708],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,16710,16711],{"class":222,"line":12075},[220,16712,16713],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,16715,16716],{"class":222,"line":12082},[220,16717,16718],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,16720,16721],{"class":222,"line":12087},[220,16722,16723],{"class":230}," origin: 'top-left',\n",[220,16725,16726],{"class":222,"line":12105},[220,16727,16728],{"class":230}," rotation\n",[220,16730,16731,16734],{"class":222,"line":12110},[220,16732,16733],{"class":230}," }\"",[220,16735,386],{"class":264},[220,16737,16738,16740,16742],{"class":222,"line":12119},[220,16739,2567],{"class":264},[220,16741,347],{"class":346},[220,16743,359],{"class":264},[220,16745,16746,16748,16750],{"class":222,"line":12149},[220,16747,402],{"class":264},[220,16749,2519],{"class":346},[220,16751,359],{"class":264},[212,16753,16755],{"className":409,"code":16754,"language":411,"meta":178,"style":178},"import { useState, useEffect, useRef } from 'react'\n\nfunction SpinningBox() {\n const [rotation, setRotation] = useState(0)\n const frameRef = useRef(null)\n\n useEffect(() => {\n const animate = () => {\n setRotation(r => (r + 0.5) % 360)\n frameRef.current = requestAnimationFrame(animate)\n }\n frameRef.current = requestAnimationFrame(animate)\n return () => cancelAnimationFrame(frameRef.current)\n }, [])\n\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CStripes\n boundingBox={{\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation\n }}\n \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,16756,16757,16768,16772,16781,16806,16825,16829,16839,16854,16882,16893,16897,16908,16922,16926,16930,16936,16950,16957,16966,16979,16991,17003,17015,17023,17028,17033,17038,17046,17050],{"__ignoreMap":178},[220,16758,16759,16761,16764,16766],{"class":222,"line":223},[220,16760,261],{"class":260},[220,16762,16763],{"class":264}," { useState, useEffect, useRef } ",[220,16765,268],{"class":260},[220,16767,2687],{"class":230},[220,16769,16770],{"class":222,"line":179},[220,16771,647],{"emptyLinePlaceholder":194},[220,16773,16774,16776,16779],{"class":222,"line":389},[220,16775,2641],{"class":260},[220,16777,16778],{"class":226}," SpinningBox",[220,16780,2647],{"class":264},[220,16782,16783,16785,16787,16789,16791,16794,16796,16798,16800,16802,16804],{"class":222,"line":399},[220,16784,2705],{"class":260},[220,16786,2708],{"class":264},[220,16788,11835],{"class":420},[220,16790,1895],{"class":264},[220,16792,16793],{"class":420},"setRotation",[220,16795,2719],{"class":264},[220,16797,353],{"class":260},[220,16799,2724],{"class":226},[220,16801,2626],{"class":264},[220,16803,8673],{"class":420},[220,16805,2632],{"class":264},[220,16807,16808,16810,16813,16815,16818,16820,16823],{"class":222,"line":644},[220,16809,2705],{"class":260},[220,16811,16812],{"class":420}," frameRef",[220,16814,1741],{"class":260},[220,16816,16817],{"class":226}," useRef",[220,16819,2626],{"class":264},[220,16821,16822],{"class":420},"null",[220,16824,2632],{"class":264},[220,16826,16827],{"class":222,"line":650},[220,16828,647],{"emptyLinePlaceholder":194},[220,16830,16831,16833,16835,16837],{"class":222,"line":656},[220,16832,3597],{"class":226},[220,16834,3600],{"class":264},[220,16836,2762],{"class":260},[220,16838,3241],{"class":264},[220,16840,16841,16844,16846,16848,16850,16852],{"class":222,"line":673},[220,16842,16843],{"class":260}," const",[220,16845,11959],{"class":226},[220,16847,1741],{"class":260},[220,16849,3492],{"class":264},[220,16851,2762],{"class":260},[220,16853,3241],{"class":264},[220,16855,16856,16859,16861,16864,16866,16869,16871,16873,16875,16877,16880],{"class":222,"line":682},[220,16857,16858],{"class":226}," setRotation",[220,16860,2626],{"class":264},[220,16862,16863],{"class":3621},"r",[220,16865,10830],{"class":260},[220,16867,16868],{"class":264}," (r ",[220,16870,10836],{"class":260},[220,16872,16597],{"class":420},[220,16874,4168],{"class":264},[220,16876,16602],{"class":260},[220,16878,16879],{"class":420}," 360",[220,16881,2632],{"class":264},[220,16883,16884,16887,16889,16891],{"class":222,"line":691},[220,16885,16886],{"class":264}," frameRef.current ",[220,16888,353],{"class":260},[220,16890,16615],{"class":226},[220,16892,16618],{"class":264},[220,16894,16895],{"class":222,"line":696},[220,16896,4609],{"class":264},[220,16898,16899,16902,16904,16906],{"class":222,"line":702},[220,16900,16901],{"class":264}," frameRef.current ",[220,16903,353],{"class":260},[220,16905,16615],{"class":226},[220,16907,16618],{"class":264},[220,16909,16910,16913,16915,16917,16919],{"class":222,"line":718},[220,16911,16912],{"class":260}," return",[220,16914,3492],{"class":264},[220,16916,2762],{"class":260},[220,16918,16649],{"class":226},[220,16920,16921],{"class":264},"(frameRef.current)\n",[220,16923,16924],{"class":222,"line":727},[220,16925,3637],{"class":264},[220,16927,16928],{"class":222,"line":2664},[220,16929,647],{"emptyLinePlaceholder":194},[220,16931,16932,16934],{"class":222,"line":3522},[220,16933,2739],{"class":260},[220,16935,2742],{"class":264},[220,16937,16938,16940,16942,16944,16946,16948],{"class":222,"line":9662},[220,16939,2550],{"class":264},[220,16941,347],{"class":420},[220,16943,423],{"class":226},[220,16945,353],{"class":260},[220,16947,356],{"class":230},[220,16949,359],{"class":264},[220,16951,16952,16954],{"class":222,"line":9673},[220,16953,2813],{"class":264},[220,16955,16956],{"class":420},"Stripes\n",[220,16958,16959,16962,16964],{"class":222,"line":9678},[220,16960,16961],{"class":226}," boundingBox",[220,16963,353],{"class":260},[220,16965,16040],{"class":264},[220,16967,16968,16970,16972,16974,16977],{"class":222,"line":10999},[220,16969,16403],{"class":264},[220,16971,16048],{"class":230},[220,16973,16051],{"class":264},[220,16975,16976],{"class":420},"0.2",[220,16978,16057],{"class":264},[220,16980,16981,16983,16985,16987,16989],{"class":222,"line":11004},[220,16982,16416],{"class":264},[220,16984,16048],{"class":230},[220,16986,16051],{"class":264},[220,16988,16976],{"class":420},[220,16990,16057],{"class":264},[220,16992,16993,16995,16997,16999,17001],{"class":222,"line":12075},[220,16994,16429],{"class":264},[220,16996,16048],{"class":230},[220,16998,16051],{"class":264},[220,17000,8236],{"class":420},[220,17002,16057],{"class":264},[220,17004,17005,17007,17009,17011,17013],{"class":222,"line":12082},[220,17006,16442],{"class":264},[220,17008,16048],{"class":230},[220,17010,16051],{"class":264},[220,17012,8236],{"class":420},[220,17014,16057],{"class":264},[220,17016,17017,17019,17021],{"class":222,"line":12087},[220,17018,16455],{"class":264},[220,17020,15276],{"class":230},[220,17022,1760],{"class":264},[220,17024,17025],{"class":222,"line":12105},[220,17026,17027],{"class":264}," rotation\n",[220,17029,17030],{"class":222,"line":12110},[220,17031,17032],{"class":264}," }}\n",[220,17034,17035],{"class":222,"line":12119},[220,17036,17037],{"class":264}," \u002F>\n",[220,17039,17040,17042,17044],{"class":222,"line":12149},[220,17041,2828],{"class":264},[220,17043,347],{"class":420},[220,17045,359],{"class":264},[220,17047,17048],{"class":222,"line":12164},[220,17049,2837],{"class":264},[220,17051,17052],{"class":222,"line":12173},[220,17053,749],{"class":264},[212,17055,17057],{"className":251,"code":17056,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stripes', id: 'bars', props: {} }\n ]\n})\n\nlet rotation = 0\nconst animate = () => {\n rotation = (rotation + 0.5) % 360\n shader.update('bars', {\n boundingBox: {\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation\n }\n })\n requestAnimationFrame(animate)\n}\nrequestAnimationFrame(animate)\n",[99,17058,17059,17069,17073,17087,17091,17105,17109,17113,17117,17129,17143,17163,17176,17181,17193,17205,17217,17229,17237,17241,17245,17249,17256,17260],{"__ignoreMap":178},[220,17060,17061,17063,17065,17067],{"class":222,"line":223},[220,17062,261],{"class":260},[220,17064,11512],{"class":264},[220,17066,268],{"class":260},[220,17068,4007],{"class":230},[220,17070,17071],{"class":222,"line":179},[220,17072,647],{"emptyLinePlaceholder":194},[220,17074,17075,17077,17079,17081,17083,17085],{"class":222,"line":389},[220,17076,1735],{"class":260},[220,17078,1738],{"class":420},[220,17080,1741],{"class":260},[220,17082,1744],{"class":260},[220,17084,1747],{"class":226},[220,17086,1750],{"class":264},[220,17088,17089],{"class":222,"line":399},[220,17090,1765],{"class":264},[220,17092,17093,17095,17098,17100,17103],{"class":222,"line":644},[220,17094,1770],{"class":264},[220,17096,17097],{"class":230},"'Stripes'",[220,17099,3209],{"class":264},[220,17101,17102],{"class":230},"'bars'",[220,17104,2465],{"class":264},[220,17106,17107],{"class":222,"line":650},[220,17108,1787],{"class":264},[220,17110,17111],{"class":222,"line":656},[220,17112,1792],{"class":264},[220,17114,17115],{"class":222,"line":673},[220,17116,647],{"emptyLinePlaceholder":194},[220,17118,17119,17121,17124,17126],{"class":222,"line":682},[220,17120,16551],{"class":260},[220,17122,17123],{"class":264}," rotation ",[220,17125,353],{"class":260},[220,17127,17128],{"class":420}," 0\n",[220,17130,17131,17133,17135,17137,17139,17141],{"class":222,"line":691},[220,17132,1735],{"class":260},[220,17134,11959],{"class":226},[220,17136,1741],{"class":260},[220,17138,3492],{"class":264},[220,17140,2762],{"class":260},[220,17142,3241],{"class":264},[220,17144,17145,17148,17150,17153,17155,17157,17159,17161],{"class":222,"line":696},[220,17146,17147],{"class":264}," rotation ",[220,17149,353],{"class":260},[220,17151,17152],{"class":264}," (rotation ",[220,17154,10836],{"class":260},[220,17156,16597],{"class":420},[220,17158,4168],{"class":264},[220,17160,16602],{"class":260},[220,17162,16605],{"class":420},[220,17164,17165,17168,17170,17172,17174],{"class":222,"line":702},[220,17166,17167],{"class":264}," shader.",[220,17169,11605],{"class":226},[220,17171,2626],{"class":264},[220,17173,17102],{"class":230},[220,17175,11967],{"class":264},[220,17177,17178],{"class":222,"line":718},[220,17179,17180],{"class":264}," boundingBox: {\n",[220,17182,17183,17185,17187,17189,17191],{"class":222,"line":727},[220,17184,16045],{"class":264},[220,17186,16048],{"class":230},[220,17188,16051],{"class":264},[220,17190,16976],{"class":420},[220,17192,16057],{"class":264},[220,17194,17195,17197,17199,17201,17203],{"class":222,"line":2664},[220,17196,16062],{"class":264},[220,17198,16048],{"class":230},[220,17200,16051],{"class":264},[220,17202,16976],{"class":420},[220,17204,16057],{"class":264},[220,17206,17207,17209,17211,17213,17215],{"class":222,"line":3522},[220,17208,16075],{"class":264},[220,17210,16048],{"class":230},[220,17212,16051],{"class":264},[220,17214,8236],{"class":420},[220,17216,16057],{"class":264},[220,17218,17219,17221,17223,17225,17227],{"class":222,"line":9662},[220,17220,16088],{"class":264},[220,17222,16048],{"class":230},[220,17224,16051],{"class":264},[220,17226,8236],{"class":420},[220,17228,16057],{"class":264},[220,17230,17231,17233,17235],{"class":222,"line":9673},[220,17232,16101],{"class":264},[220,17234,15276],{"class":230},[220,17236,1760],{"class":264},[220,17238,17239],{"class":222,"line":9678},[220,17240,16728],{"class":264},[220,17242,17243],{"class":222,"line":10999},[220,17244,4609],{"class":264},[220,17246,17247],{"class":222,"line":11004},[220,17248,13002],{"class":264},[220,17250,17251,17254],{"class":222,"line":12075},[220,17252,17253],{"class":226}," requestAnimationFrame",[220,17255,16618],{"class":264},[220,17257,17258],{"class":222,"line":12082},[220,17259,749],{"class":264},[220,17261,17262,17265],{"class":222,"line":12087},[220,17263,17264],{"class":226},"requestAnimationFrame",[220,17266,16618],{"class":264},[15,17268,17269,17270,17274],{},"For continuous animation, you can also reach for a ",[56,17271,17273],{"href":17272},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Prop"," on the underlying layer instead of driving rotation from component code.",[1504,17276,17277],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":17279},[17280,17282,17284,17285,17286,17287,17288],{"id":15145,"depth":179,"text":17281},"The boundingBox prop",{"id":15373,"depth":179,"text":17283},"Units: uv (%) vs px",{"id":15171,"depth":179,"text":15289},{"id":11835,"depth":179,"text":15822},{"id":15883,"depth":179,"text":15884},{"id":15928,"depth":179,"text":15929},{"id":16490,"depth":179,"text":16491},"Position, size, and rotate any layer with a bounding box — using % or px units and a layout-aware origin","arrows-to-circle",{},"\u002Fdocs\u002Fguide\u002Ftransforms",{"title":15016,"description":17289},"docs\u002Fguide\u002F6.transforms","A1nT4tqwMICq_7jLvlS_JTujCDRCF11koD_XEhP5v60",{"id":17297,"title":17298,"body":17299,"category":10232,"description":20956,"exclude":190,"extension":191,"forceFramework":190,"icon":20957,"meta":20958,"navigation":194,"path":17272,"seo":20959,"stem":20960,"__hash__":20961},"guide\u002Fdocs\u002Fguide\u002F7.dynamic-props.md","Dynamic Props",{"type":8,"value":17300,"toc":20948},[17301,17304,17307,17310,17359,17362,17365,17898,17901,17906,18035,18047,18050,18065,18533,18536,18540,18737,18749,18781,18784,18787,19269,19272,19276,19407,19412,19415,19418,19424,20147,20150,20154,20295,20300,20304,20307,20787,20791,20798,20946],[11,17302,17298],{"id":17303},"dynamic-props",[15,17305,17306],{},"Dynamic props let any numeric or position prop respond to time, mouse position, or the visual output of another layer — declared directly as a prop value.",[15,17308,17309],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[212,17311,17313],{"className":334,"code":17312,"language":336,"meta":178,"style":178},"\u003C!-- Static value -->\n\u003CCircle :radius=\"0.5\" \u002F>\n\n\u003C!-- Dynamic prop: animates radius automatically -->\n\u003CCircle :radius=\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\" \u002F>\n",[99,17314,17315,17320,17335,17339,17344],{"__ignoreMap":178},[220,17316,17317],{"class":222,"line":223},[220,17318,17319],{"class":609},"\u003C!-- Static value -->\n",[220,17321,17322,17324,17326,17329,17331,17333],{"class":222,"line":179},[220,17323,343],{"class":264},[220,17325,2553],{"class":346},[220,17327,17328],{"class":226}," :radius",[220,17330,353],{"class":264},[220,17332,7681],{"class":230},[220,17334,386],{"class":264},[220,17336,17337],{"class":222,"line":389},[220,17338,647],{"emptyLinePlaceholder":194},[220,17340,17341],{"class":222,"line":399},[220,17342,17343],{"class":609},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[220,17345,17346,17348,17350,17352,17354,17357],{"class":222,"line":644},[220,17347,343],{"class":264},[220,17349,2553],{"class":346},[220,17351,17328],{"class":226},[220,17353,353],{"class":264},[220,17355,17356],{"class":230},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[220,17358,386],{"class":264},[23,17360,17361],{"id":17361},"auto-animate",[15,17363,17364],{},"Continuously animates a numeric prop between two values over time.",[246,17366,17367,17457,17567,17670,17772],{":tabs":1557},[212,17368,17370],{"className":334,"code":17369,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n :radius=\"{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }\"\n \u002F>\n\u003C\u002FShader>\n",[99,17371,17372,17386,17392,17401,17410,17415,17420,17425,17430,17435,17440,17445,17449],{"__ignoreMap":178},[220,17373,17374,17376,17378,17380,17382,17384],{"class":222,"line":223},[220,17375,343],{"class":264},[220,17377,347],{"class":346},[220,17379,350],{"class":226},[220,17381,353],{"class":264},[220,17383,356],{"class":230},[220,17385,359],{"class":264},[220,17387,17388,17390],{"class":222,"line":179},[220,17389,364],{"class":264},[220,17391,9630],{"class":346},[220,17393,17394,17396,17398],{"class":222,"line":389},[220,17395,9635],{"class":226},[220,17397,353],{"class":264},[220,17399,17400],{"class":230},"\"#6366f1\"\n",[220,17402,17403,17406,17408],{"class":222,"line":399},[220,17404,17405],{"class":226}," :radius",[220,17407,353],{"class":264},[220,17409,15097],{"class":230},[220,17411,17412],{"class":222,"line":644},[220,17413,17414],{"class":230}," type: 'auto-animate',\n",[220,17416,17417],{"class":222,"line":650},[220,17418,17419],{"class":230}," mode: 'ping-pong',\n",[220,17421,17422],{"class":222,"line":656},[220,17423,17424],{"class":230}," outputMin: 0.2,\n",[220,17426,17427],{"class":222,"line":673},[220,17428,17429],{"class":230}," outputMax: 0.6,\n",[220,17431,17432],{"class":222,"line":682},[220,17433,17434],{"class":230}," speed: 0.8,\n",[220,17436,17437],{"class":222,"line":691},[220,17438,17439],{"class":230}," easing: 'sine'\n",[220,17441,17442],{"class":222,"line":696},[220,17443,17444],{"class":230}," }\"\n",[220,17446,17447],{"class":222,"line":702},[220,17448,1234],{"class":264},[220,17450,17451,17453,17455],{"class":222,"line":718},[220,17452,402],{"class":264},[220,17454,347],{"class":346},[220,17456,359],{"class":264},[212,17458,17460],{"className":409,"code":17459,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,17461,17462,17476,17482,17490,17498,17507,17517,17526,17535,17544,17551,17555,17559],{"__ignoreMap":178},[220,17463,17464,17466,17468,17470,17472,17474],{"class":222,"line":223},[220,17465,343],{"class":264},[220,17467,347],{"class":420},[220,17469,423],{"class":226},[220,17471,353],{"class":260},[220,17473,356],{"class":230},[220,17475,359],{"class":264},[220,17477,17478,17480],{"class":222,"line":179},[220,17479,364],{"class":264},[220,17481,9630],{"class":420},[220,17483,17484,17486,17488],{"class":222,"line":389},[220,17485,9635],{"class":226},[220,17487,353],{"class":260},[220,17489,17400],{"class":230},[220,17491,17492,17494,17496],{"class":222,"line":399},[220,17493,9645],{"class":226},[220,17495,353],{"class":260},[220,17497,16040],{"class":264},[220,17499,17500,17502,17505],{"class":222,"line":644},[220,17501,16384],{"class":264},[220,17503,17504],{"class":230},"'auto-animate'",[220,17506,1760],{"class":264},[220,17508,17509,17512,17515],{"class":222,"line":650},[220,17510,17511],{"class":264}," mode: ",[220,17513,17514],{"class":230},"'ping-pong'",[220,17516,1760],{"class":264},[220,17518,17519,17522,17524],{"class":222,"line":656},[220,17520,17521],{"class":264}," outputMin: ",[220,17523,16976],{"class":420},[220,17525,1760],{"class":264},[220,17527,17528,17531,17533],{"class":222,"line":673},[220,17529,17530],{"class":264}," outputMax: ",[220,17532,8236],{"class":420},[220,17534,1760],{"class":264},[220,17536,17537,17540,17542],{"class":222,"line":682},[220,17538,17539],{"class":264}," speed: ",[220,17541,6299],{"class":420},[220,17543,1760],{"class":264},[220,17545,17546,17548],{"class":222,"line":691},[220,17547,11981],{"class":264},[220,17549,17550],{"class":230},"'sine'\n",[220,17552,17553],{"class":222,"line":696},[220,17554,16118],{"class":264},[220,17556,17557],{"class":222,"line":702},[220,17558,1234],{"class":264},[220,17560,17561,17563,17565],{"class":222,"line":718},[220,17562,402],{"class":264},[220,17564,347],{"class":420},[220,17566,359],{"class":264},[212,17568,17570],{"className":468,"code":17569,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,17571,17572,17586,17592,17600,17608,17616,17624,17632,17640,17648,17654,17658,17662],{"__ignoreMap":178},[220,17573,17574,17576,17578,17580,17582,17584],{"class":222,"line":223},[220,17575,343],{"class":264},[220,17577,347],{"class":420},[220,17579,350],{"class":226},[220,17581,353],{"class":260},[220,17583,356],{"class":230},[220,17585,359],{"class":264},[220,17587,17588,17590],{"class":222,"line":179},[220,17589,364],{"class":264},[220,17591,9630],{"class":420},[220,17593,17594,17596,17598],{"class":222,"line":389},[220,17595,9635],{"class":226},[220,17597,353],{"class":260},[220,17599,17400],{"class":230},[220,17601,17602,17604,17606],{"class":222,"line":399},[220,17603,9645],{"class":226},[220,17605,353],{"class":260},[220,17607,16040],{"class":264},[220,17609,17610,17612,17614],{"class":222,"line":644},[220,17611,16384],{"class":264},[220,17613,17504],{"class":230},[220,17615,1760],{"class":264},[220,17617,17618,17620,17622],{"class":222,"line":650},[220,17619,17511],{"class":264},[220,17621,17514],{"class":230},[220,17623,1760],{"class":264},[220,17625,17626,17628,17630],{"class":222,"line":656},[220,17627,17521],{"class":264},[220,17629,16976],{"class":420},[220,17631,1760],{"class":264},[220,17633,17634,17636,17638],{"class":222,"line":673},[220,17635,17530],{"class":264},[220,17637,8236],{"class":420},[220,17639,1760],{"class":264},[220,17641,17642,17644,17646],{"class":222,"line":682},[220,17643,17539],{"class":264},[220,17645,6299],{"class":420},[220,17647,1760],{"class":264},[220,17649,17650,17652],{"class":222,"line":691},[220,17651,11981],{"class":264},[220,17653,17550],{"class":230},[220,17655,17656],{"class":222,"line":696},[220,17657,16118],{"class":264},[220,17659,17660],{"class":222,"line":702},[220,17661,1234],{"class":264},[220,17663,17664,17666,17668],{"class":222,"line":718},[220,17665,402],{"class":264},[220,17667,347],{"class":420},[220,17669,359],{"class":264},[212,17671,17672],{"className":468,"code":17569,"language":469,"meta":178,"style":178},[99,17673,17674,17688,17694,17702,17710,17718,17726,17734,17742,17750,17756,17760,17764],{"__ignoreMap":178},[220,17675,17676,17678,17680,17682,17684,17686],{"class":222,"line":223},[220,17677,343],{"class":264},[220,17679,347],{"class":420},[220,17681,350],{"class":226},[220,17683,353],{"class":260},[220,17685,356],{"class":230},[220,17687,359],{"class":264},[220,17689,17690,17692],{"class":222,"line":179},[220,17691,364],{"class":264},[220,17693,9630],{"class":420},[220,17695,17696,17698,17700],{"class":222,"line":389},[220,17697,9635],{"class":226},[220,17699,353],{"class":260},[220,17701,17400],{"class":230},[220,17703,17704,17706,17708],{"class":222,"line":399},[220,17705,9645],{"class":226},[220,17707,353],{"class":260},[220,17709,16040],{"class":264},[220,17711,17712,17714,17716],{"class":222,"line":644},[220,17713,16384],{"class":264},[220,17715,17504],{"class":230},[220,17717,1760],{"class":264},[220,17719,17720,17722,17724],{"class":222,"line":650},[220,17721,17511],{"class":264},[220,17723,17514],{"class":230},[220,17725,1760],{"class":264},[220,17727,17728,17730,17732],{"class":222,"line":656},[220,17729,17521],{"class":264},[220,17731,16976],{"class":420},[220,17733,1760],{"class":264},[220,17735,17736,17738,17740],{"class":222,"line":673},[220,17737,17530],{"class":264},[220,17739,8236],{"class":420},[220,17741,1760],{"class":264},[220,17743,17744,17746,17748],{"class":222,"line":682},[220,17745,17539],{"class":264},[220,17747,6299],{"class":420},[220,17749,1760],{"class":264},[220,17751,17752,17754],{"class":222,"line":691},[220,17753,11981],{"class":264},[220,17755,17550],{"class":230},[220,17757,17758],{"class":222,"line":696},[220,17759,16118],{"class":264},[220,17761,17762],{"class":222,"line":702},[220,17763,1234],{"class":264},[220,17765,17766,17768,17770],{"class":222,"line":718},[220,17767,402],{"class":264},[220,17769,347],{"class":420},[220,17771,359],{"class":264},[212,17773,17775],{"className":251,"code":17774,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Circle',\n props: {\n color: '#6366f1',\n radius: {\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }\n }\n }\n ]\n})\n",[99,17776,17777,17791,17795,17799,17807,17811,17821,17826,17835,17844,17853,17862,17871,17878,17882,17886,17890,17894],{"__ignoreMap":178},[220,17778,17779,17781,17783,17785,17787,17789],{"class":222,"line":223},[220,17780,1735],{"class":260},[220,17782,1738],{"class":420},[220,17784,1741],{"class":260},[220,17786,1744],{"class":260},[220,17788,1747],{"class":226},[220,17790,1750],{"class":264},[220,17792,17793],{"class":222,"line":179},[220,17794,1765],{"class":264},[220,17796,17797],{"class":222,"line":389},[220,17798,16379],{"class":264},[220,17800,17801,17803,17805],{"class":222,"line":399},[220,17802,16384],{"class":264},[220,17804,3206],{"class":230},[220,17806,1760],{"class":264},[220,17808,17809],{"class":222,"line":644},[220,17810,16393],{"class":264},[220,17812,17813,17816,17819],{"class":222,"line":650},[220,17814,17815],{"class":264}," color: ",[220,17817,17818],{"class":230},"'#6366f1'",[220,17820,1760],{"class":264},[220,17822,17823],{"class":222,"line":656},[220,17824,17825],{"class":264}," radius: {\n",[220,17827,17828,17831,17833],{"class":222,"line":673},[220,17829,17830],{"class":264}," type: ",[220,17832,17504],{"class":230},[220,17834,1760],{"class":264},[220,17836,17837,17840,17842],{"class":222,"line":682},[220,17838,17839],{"class":264}," mode: ",[220,17841,17514],{"class":230},[220,17843,1760],{"class":264},[220,17845,17846,17849,17851],{"class":222,"line":691},[220,17847,17848],{"class":264}," outputMin: ",[220,17850,16976],{"class":420},[220,17852,1760],{"class":264},[220,17854,17855,17858,17860],{"class":222,"line":696},[220,17856,17857],{"class":264}," outputMax: ",[220,17859,8236],{"class":420},[220,17861,1760],{"class":264},[220,17863,17864,17867,17869],{"class":222,"line":702},[220,17865,17866],{"class":264}," speed: ",[220,17868,6299],{"class":420},[220,17870,1760],{"class":264},[220,17872,17873,17876],{"class":222,"line":718},[220,17874,17875],{"class":264}," easing: ",[220,17877,17550],{"class":230},[220,17879,17880],{"class":222,"line":727},[220,17881,16471],{"class":264},[220,17883,17884],{"class":222,"line":2664},[220,17885,4929],{"class":264},[220,17887,17888],{"class":222,"line":3522},[220,17889,4609],{"class":264},[220,17891,17892],{"class":222,"line":9662},[220,17893,1787],{"class":264},[220,17895,17896],{"class":222,"line":9673},[220,17897,1792],{"class":264},[19,17899],{":preset":17900},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":0.2,\"outputMax\":0.6,\"speed\":0.8,\"easing\":\"sine\"}}}]}",[15,17902,17903],{},[159,17904,17905],{},"Properties:",[1794,17907,17908,17921],{},[1797,17909,17910],{},[1800,17911,17912,17915,17917,17919],{},[1803,17913,17914],{},"Prop",[1803,17916,15187],{},[1803,17918,15190],{},[1803,17920,1808],{},[1810,17922,17923,17948,17964,17980,17999],{},[1800,17924,17925,17930,17935,17938],{},[1815,17926,17927],{},[99,17928,17929],{},"mode",[1815,17931,17932],{},[99,17933,17934],{},"'ping-pong' | 'loop'",[1815,17936,17937],{},"required",[1815,17939,17940,17943,17944,17947],{},[99,17941,17942],{},"ping-pong"," oscillates between min and max. ",[99,17945,17946],{},"loop"," advances from min to max then wraps.",[1800,17949,17950,17955,17959,17961],{},[1815,17951,17952],{},[99,17953,17954],{},"outputMin",[1815,17956,17957],{},[99,17958,15300],{},[1815,17960,17937],{},[1815,17962,17963],{},"Value at the start\u002Fbottom of the range.",[1800,17965,17966,17971,17975,17977],{},[1815,17967,17968],{},[99,17969,17970],{},"outputMax",[1815,17972,17973],{},[99,17974,15300],{},[1815,17976,17937],{},[1815,17978,17979],{},"Value at the end\u002Ftop of the range.",[1800,17981,17982,17987,17991,17996],{},[1815,17983,17984],{},[99,17985,17986],{},"speed",[1815,17988,17989],{},[99,17990,15300],{},[1815,17992,17993],{},[99,17994,17995],{},"1.0",[1815,17997,17998],{},"Cycles per second. Negative values reverse the loop direction.",[1800,18000,18001,18006,18010,18015],{},[1815,18002,18003],{},[99,18004,18005],{},"easing",[1815,18007,18008],{},[99,18009,9060],{},[1815,18011,18012],{},[99,18013,18014],{},"'sine'",[1815,18016,18017,18018,18020,18021,1895,18024,1895,18026,1895,18029,1895,18032,4836],{},"Easing curve for ",[99,18019,17942],{}," mode. Options: ",[99,18022,18023],{},"sine",[99,18025,1894],{},[99,18027,18028],{},"quad",[99,18030,18031],{},"expo",[99,18033,18034],{},"bounce",[15,18036,18037,18040,18041,18043,18044,4836],{},[159,18038,18039],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[99,18042,17946],{}," mode and ",[99,18045,18046],{},"outputMin: 0, outputMax: 360",[23,18048,18049],{"id":18049},"mouse-position",[15,18051,18052,18053,18056,18057,1895,18059,15667,18062,4836],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[99,18054,18055],{},"{ x, y }"," coordinates, such as ",[99,18058,8241],{},[99,18060,18061],{},"position",[99,18063,18064],{},"offset",[246,18066,18067,18149,18247,18338,18428],{":tabs":1557},[212,18068,18070],{"className":334,"code":18069,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n :radius=\"0.15\"\n :center=\"{\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }\"\n \u002F>\n\u003C\u002FShader>\n",[99,18071,18072,18086,18092,18100,18109,18118,18123,18128,18133,18137,18141],{"__ignoreMap":178},[220,18073,18074,18076,18078,18080,18082,18084],{"class":222,"line":223},[220,18075,343],{"class":264},[220,18077,347],{"class":346},[220,18079,350],{"class":226},[220,18081,353],{"class":264},[220,18083,356],{"class":230},[220,18085,359],{"class":264},[220,18087,18088,18090],{"class":222,"line":179},[220,18089,364],{"class":264},[220,18091,9630],{"class":346},[220,18093,18094,18096,18098],{"class":222,"line":389},[220,18095,9635],{"class":226},[220,18097,353],{"class":264},[220,18099,17400],{"class":230},[220,18101,18102,18104,18106],{"class":222,"line":399},[220,18103,17405],{"class":226},[220,18105,353],{"class":264},[220,18107,18108],{"class":230},"\"0.15\"\n",[220,18110,18111,18114,18116],{"class":222,"line":644},[220,18112,18113],{"class":226}," :center",[220,18115,353],{"class":264},[220,18117,15097],{"class":230},[220,18119,18120],{"class":222,"line":650},[220,18121,18122],{"class":230}," type: 'mouse-position',\n",[220,18124,18125],{"class":222,"line":656},[220,18126,18127],{"class":230}," smoothing: 0.12,\n",[220,18129,18130],{"class":222,"line":673},[220,18131,18132],{"class":230}," momentum: 0.2\n",[220,18134,18135],{"class":222,"line":682},[220,18136,17444],{"class":230},[220,18138,18139],{"class":222,"line":691},[220,18140,1234],{"class":264},[220,18142,18143,18145,18147],{"class":222,"line":696},[220,18144,402],{"class":264},[220,18146,347],{"class":346},[220,18148,359],{"class":264},[212,18150,18152],{"className":409,"code":18151,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={0.15}\n center={{\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,18153,18154,18168,18174,18182,18195,18204,18213,18223,18231,18235,18239],{"__ignoreMap":178},[220,18155,18156,18158,18160,18162,18164,18166],{"class":222,"line":223},[220,18157,343],{"class":264},[220,18159,347],{"class":420},[220,18161,423],{"class":226},[220,18163,353],{"class":260},[220,18165,356],{"class":230},[220,18167,359],{"class":264},[220,18169,18170,18172],{"class":222,"line":179},[220,18171,364],{"class":264},[220,18173,9630],{"class":420},[220,18175,18176,18178,18180],{"class":222,"line":389},[220,18177,9635],{"class":226},[220,18179,353],{"class":260},[220,18181,17400],{"class":230},[220,18183,18184,18186,18188,18190,18193],{"class":222,"line":399},[220,18185,9645],{"class":226},[220,18187,353],{"class":260},[220,18189,743],{"class":264},[220,18191,18192],{"class":420},"0.15",[220,18194,749],{"class":264},[220,18196,18197,18200,18202],{"class":222,"line":644},[220,18198,18199],{"class":226}," center",[220,18201,353],{"class":260},[220,18203,16040],{"class":264},[220,18205,18206,18208,18211],{"class":222,"line":650},[220,18207,16384],{"class":264},[220,18209,18210],{"class":230},"'mouse-position'",[220,18212,1760],{"class":264},[220,18214,18215,18218,18221],{"class":222,"line":656},[220,18216,18217],{"class":264}," smoothing: ",[220,18219,18220],{"class":420},"0.12",[220,18222,1760],{"class":264},[220,18224,18225,18228],{"class":222,"line":673},[220,18226,18227],{"class":264}," momentum: ",[220,18229,18230],{"class":420},"0.2\n",[220,18232,18233],{"class":222,"line":682},[220,18234,16118],{"class":264},[220,18236,18237],{"class":222,"line":691},[220,18238,1234],{"class":264},[220,18240,18241,18243,18245],{"class":222,"line":696},[220,18242,402],{"class":264},[220,18244,347],{"class":420},[220,18246,359],{"class":264},[212,18248,18250],{"className":468,"code":18249,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={0.15}\n center={{\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,18251,18252,18266,18272,18280,18292,18300,18308,18316,18322,18326,18330],{"__ignoreMap":178},[220,18253,18254,18256,18258,18260,18262,18264],{"class":222,"line":223},[220,18255,343],{"class":264},[220,18257,347],{"class":420},[220,18259,350],{"class":226},[220,18261,353],{"class":260},[220,18263,356],{"class":230},[220,18265,359],{"class":264},[220,18267,18268,18270],{"class":222,"line":179},[220,18269,364],{"class":264},[220,18271,9630],{"class":420},[220,18273,18274,18276,18278],{"class":222,"line":389},[220,18275,9635],{"class":226},[220,18277,353],{"class":260},[220,18279,17400],{"class":230},[220,18281,18282,18284,18286,18288,18290],{"class":222,"line":399},[220,18283,9645],{"class":226},[220,18285,353],{"class":260},[220,18287,743],{"class":264},[220,18289,18192],{"class":420},[220,18291,749],{"class":264},[220,18293,18294,18296,18298],{"class":222,"line":644},[220,18295,18199],{"class":226},[220,18297,353],{"class":260},[220,18299,16040],{"class":264},[220,18301,18302,18304,18306],{"class":222,"line":650},[220,18303,16384],{"class":264},[220,18305,18210],{"class":230},[220,18307,1760],{"class":264},[220,18309,18310,18312,18314],{"class":222,"line":656},[220,18311,18217],{"class":264},[220,18313,18220],{"class":420},[220,18315,1760],{"class":264},[220,18317,18318,18320],{"class":222,"line":673},[220,18319,18227],{"class":264},[220,18321,18230],{"class":420},[220,18323,18324],{"class":222,"line":682},[220,18325,16118],{"class":264},[220,18327,18328],{"class":222,"line":691},[220,18329,1234],{"class":264},[220,18331,18332,18334,18336],{"class":222,"line":696},[220,18333,402],{"class":264},[220,18335,347],{"class":420},[220,18337,359],{"class":264},[212,18339,18340],{"className":468,"code":18249,"language":469,"meta":178,"style":178},[99,18341,18342,18356,18362,18370,18382,18390,18398,18406,18412,18416,18420],{"__ignoreMap":178},[220,18343,18344,18346,18348,18350,18352,18354],{"class":222,"line":223},[220,18345,343],{"class":264},[220,18347,347],{"class":420},[220,18349,350],{"class":226},[220,18351,353],{"class":260},[220,18353,356],{"class":230},[220,18355,359],{"class":264},[220,18357,18358,18360],{"class":222,"line":179},[220,18359,364],{"class":264},[220,18361,9630],{"class":420},[220,18363,18364,18366,18368],{"class":222,"line":389},[220,18365,9635],{"class":226},[220,18367,353],{"class":260},[220,18369,17400],{"class":230},[220,18371,18372,18374,18376,18378,18380],{"class":222,"line":399},[220,18373,9645],{"class":226},[220,18375,353],{"class":260},[220,18377,743],{"class":264},[220,18379,18192],{"class":420},[220,18381,749],{"class":264},[220,18383,18384,18386,18388],{"class":222,"line":644},[220,18385,18199],{"class":226},[220,18387,353],{"class":260},[220,18389,16040],{"class":264},[220,18391,18392,18394,18396],{"class":222,"line":650},[220,18393,16384],{"class":264},[220,18395,18210],{"class":230},[220,18397,1760],{"class":264},[220,18399,18400,18402,18404],{"class":222,"line":656},[220,18401,18217],{"class":264},[220,18403,18220],{"class":420},[220,18405,1760],{"class":264},[220,18407,18408,18410],{"class":222,"line":673},[220,18409,18227],{"class":264},[220,18411,18230],{"class":420},[220,18413,18414],{"class":222,"line":682},[220,18415,16118],{"class":264},[220,18417,18418],{"class":222,"line":691},[220,18419,1234],{"class":264},[220,18421,18422,18424,18426],{"class":222,"line":696},[220,18423,402],{"class":264},[220,18425,347],{"class":420},[220,18427,359],{"class":264},[212,18429,18431],{"className":251,"code":18430,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Circle',\n props: {\n color: '#6366f1',\n radius: 0.15,\n center: {\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }\n }\n }\n ]\n})\n",[99,18432,18433,18447,18451,18455,18463,18467,18475,18484,18489,18497,18506,18513,18517,18521,18525,18529],{"__ignoreMap":178},[220,18434,18435,18437,18439,18441,18443,18445],{"class":222,"line":223},[220,18436,1735],{"class":260},[220,18438,1738],{"class":420},[220,18440,1741],{"class":260},[220,18442,1744],{"class":260},[220,18444,1747],{"class":226},[220,18446,1750],{"class":264},[220,18448,18449],{"class":222,"line":179},[220,18450,1765],{"class":264},[220,18452,18453],{"class":222,"line":389},[220,18454,16379],{"class":264},[220,18456,18457,18459,18461],{"class":222,"line":399},[220,18458,16384],{"class":264},[220,18460,3206],{"class":230},[220,18462,1760],{"class":264},[220,18464,18465],{"class":222,"line":644},[220,18466,16393],{"class":264},[220,18468,18469,18471,18473],{"class":222,"line":650},[220,18470,17815],{"class":264},[220,18472,17818],{"class":230},[220,18474,1760],{"class":264},[220,18476,18477,18480,18482],{"class":222,"line":656},[220,18478,18479],{"class":264}," radius: ",[220,18481,18192],{"class":420},[220,18483,1760],{"class":264},[220,18485,18486],{"class":222,"line":673},[220,18487,18488],{"class":264}," center: {\n",[220,18490,18491,18493,18495],{"class":222,"line":682},[220,18492,17830],{"class":264},[220,18494,18210],{"class":230},[220,18496,1760],{"class":264},[220,18498,18499,18502,18504],{"class":222,"line":691},[220,18500,18501],{"class":264}," smoothing: ",[220,18503,18220],{"class":420},[220,18505,1760],{"class":264},[220,18507,18508,18511],{"class":222,"line":696},[220,18509,18510],{"class":264}," momentum: ",[220,18512,18230],{"class":420},[220,18514,18515],{"class":222,"line":702},[220,18516,16471],{"class":264},[220,18518,18519],{"class":222,"line":718},[220,18520,4929],{"class":264},[220,18522,18523],{"class":222,"line":727},[220,18524,4609],{"class":264},[220,18526,18527],{"class":222,"line":2664},[220,18528,1787],{"class":264},[220,18530,18531],{"class":222,"line":3522},[220,18532,1792],{"class":264},[19,18534],{":preset":18535},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,18537,18538],{},[159,18539,17905],{},[1794,18541,18542,18554],{},[1797,18543,18544],{},[1800,18545,18546,18548,18550,18552],{},[1803,18547,17914],{},[1803,18549,15187],{},[1803,18551,15190],{},[1803,18553,1808],{},[1810,18555,18556,18577,18596,18614,18632,18653,18674,18701,18719],{},[1800,18557,18558,18562,18567,18572],{},[1815,18559,18560],{},[99,18561,15158],{},[1815,18563,18564],{},[99,18565,18566],{},"'mouse' | number",[1815,18568,18569],{},[99,18570,18571],{},"'mouse'",[1815,18573,18574,18576],{},[99,18575,18571],{}," tracks cursor X. A number pins it to that value (0–1).",[1800,18578,18579,18583,18587,18591],{},[1815,18580,18581],{},[99,18582,15161],{},[1815,18584,18585],{},[99,18586,18566],{},[1815,18588,18589],{},[99,18590,18571],{},[1815,18592,18593,18595],{},[99,18594,18571],{}," tracks cursor Y. A number pins it to that value (0–1).",[1800,18597,18598,18603,18607,18611],{},[1815,18599,18600],{},[99,18601,18602],{},"invertX",[1815,18604,18605],{},[99,18606,15335],{},[1815,18608,18609],{},[99,18610,2629],{},[1815,18612,18613],{},"Flips the X direction — cursor moving right moves position left.",[1800,18615,18616,18621,18625,18629],{},[1815,18617,18618],{},[99,18619,18620],{},"invertY",[1815,18622,18623],{},[99,18624,15335],{},[1815,18626,18627],{},[99,18628,2629],{},[1815,18630,18631],{},"Flips the Y direction.",[1800,18633,18634,18639,18643,18647],{},[1815,18635,18636],{},[99,18637,18638],{},"smoothing",[1815,18640,18641],{},[99,18642,15300],{},[1815,18644,18645],{},[99,18646,8673],{},[1815,18648,18649,18650,18652],{},"Lag amount (0–1). ",[99,18651,8673],{}," = instant, higher values = sluggish follow.",[1800,18654,18655,18660,18664,18668],{},[1815,18656,18657],{},[99,18658,18659],{},"momentum",[1815,18661,18662],{},[99,18663,15300],{},[1815,18665,18666],{},[99,18667,8673],{},[1815,18669,18670,18671,18673],{},"Spring bounce (0–1). ",[99,18672,8673],{}," = no overshoot, values near 1 = springy.",[1800,18675,18676,18681,18685,18689],{},[1815,18677,18678],{},[99,18679,18680],{},"reach",[1815,18682,18683],{},[99,18684,15300],{},[1815,18686,18687],{},[99,18688,8677],{},[1815,18690,18691,18692,18694,18695,18697,18698,18700],{},"Displacement scale. ",[99,18693,8677],{}," = 1:1 with cursor. ",[99,18696,7214],{}," = twice the displacement. ",[99,18699,8673],{}," = pinned to origin.",[1800,18702,18703,18708,18712,18716],{},[1815,18704,18705],{},[99,18706,18707],{},"originX",[1815,18709,18710],{},[99,18711,15300],{},[1815,18713,18714],{},[99,18715,7754],{},[1815,18717,18718],{},"X coordinate of the origin point that displacement scales from.",[1800,18720,18721,18726,18730,18734],{},[1815,18722,18723],{},[99,18724,18725],{},"originY",[1815,18727,18728],{},[99,18729,15300],{},[1815,18731,18732],{},[99,18733,7754],{},[1815,18735,18736],{},"Y coordinate of the origin point.",[15,18738,18739,18742,18743,18745,18746,18748],{},[159,18740,18741],{},"Pinning one axis:"," Set ",[99,18744,15158],{}," or ",[99,18747,15161],{}," to a number to fix that axis while the other tracks the mouse:",[212,18750,18752],{"className":334,"code":18751,"language":336,"meta":178,"style":178},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n\u003CCircle :radius=\"0.15\" :center=\"{ type: 'mouse-position', y: 0.5 }\" \u002F>\n",[99,18753,18754,18759],{"__ignoreMap":178},[220,18755,18756],{"class":222,"line":223},[220,18757,18758],{"class":609},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[220,18760,18761,18763,18765,18767,18769,18772,18774,18776,18779],{"class":222,"line":179},[220,18762,343],{"class":264},[220,18764,2553],{"class":346},[220,18766,17328],{"class":226},[220,18768,353],{"class":264},[220,18770,18771],{"class":230},"\"0.15\"",[220,18773,8133],{"class":226},[220,18775,353],{"class":264},[220,18777,18778],{"class":230},"\"{ type: 'mouse-position', y: 0.5 }\"",[220,18780,386],{"class":264},[23,18782,18783],{"id":18783},"mouse",[15,18785,18786],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[246,18788,18789,18871,18970,19065,19159],{":tabs":1557},[212,18790,18792],{"className":334,"code":18791,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n :radius=\"{\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }\"\n \u002F>\n\u003C\u002FShader>\n",[99,18793,18794,18808,18814,18822,18830,18835,18840,18845,18850,18855,18859,18863],{"__ignoreMap":178},[220,18795,18796,18798,18800,18802,18804,18806],{"class":222,"line":223},[220,18797,343],{"class":264},[220,18799,347],{"class":346},[220,18801,350],{"class":226},[220,18803,353],{"class":264},[220,18805,356],{"class":230},[220,18807,359],{"class":264},[220,18809,18810,18812],{"class":222,"line":179},[220,18811,364],{"class":264},[220,18813,9630],{"class":346},[220,18815,18816,18818,18820],{"class":222,"line":389},[220,18817,9635],{"class":226},[220,18819,353],{"class":264},[220,18821,17400],{"class":230},[220,18823,18824,18826,18828],{"class":222,"line":399},[220,18825,17405],{"class":226},[220,18827,353],{"class":264},[220,18829,15097],{"class":230},[220,18831,18832],{"class":222,"line":644},[220,18833,18834],{"class":230}," type: 'mouse',\n",[220,18836,18837],{"class":222,"line":650},[220,18838,18839],{"class":230}," axis: 'x',\n",[220,18841,18842],{"class":222,"line":656},[220,18843,18844],{"class":230}," outputMin: 0.1,\n",[220,18846,18847],{"class":222,"line":673},[220,18848,18849],{"class":230}," outputMax: 0.7,\n",[220,18851,18852],{"class":222,"line":682},[220,18853,18854],{"class":230}," smoothing: 0.1\n",[220,18856,18857],{"class":222,"line":691},[220,18858,17444],{"class":230},[220,18860,18861],{"class":222,"line":696},[220,18862,1234],{"class":264},[220,18864,18865,18867,18869],{"class":222,"line":702},[220,18866,402],{"class":264},[220,18868,347],{"class":346},[220,18870,359],{"class":264},[212,18872,18874],{"className":409,"code":18873,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,18875,18876,18890,18896,18904,18912,18920,18930,18938,18947,18954,18958,18962],{"__ignoreMap":178},[220,18877,18878,18880,18882,18884,18886,18888],{"class":222,"line":223},[220,18879,343],{"class":264},[220,18881,347],{"class":420},[220,18883,423],{"class":226},[220,18885,353],{"class":260},[220,18887,356],{"class":230},[220,18889,359],{"class":264},[220,18891,18892,18894],{"class":222,"line":179},[220,18893,364],{"class":264},[220,18895,9630],{"class":420},[220,18897,18898,18900,18902],{"class":222,"line":389},[220,18899,9635],{"class":226},[220,18901,353],{"class":260},[220,18903,17400],{"class":230},[220,18905,18906,18908,18910],{"class":222,"line":399},[220,18907,9645],{"class":226},[220,18909,353],{"class":260},[220,18911,16040],{"class":264},[220,18913,18914,18916,18918],{"class":222,"line":644},[220,18915,16384],{"class":264},[220,18917,18571],{"class":230},[220,18919,1760],{"class":264},[220,18921,18922,18925,18928],{"class":222,"line":650},[220,18923,18924],{"class":264}," axis: ",[220,18926,18927],{"class":230},"'x'",[220,18929,1760],{"class":264},[220,18931,18932,18934,18936],{"class":222,"line":656},[220,18933,17521],{"class":264},[220,18935,16054],{"class":420},[220,18937,1760],{"class":264},[220,18939,18940,18942,18945],{"class":222,"line":673},[220,18941,17530],{"class":264},[220,18943,18944],{"class":420},"0.7",[220,18946,1760],{"class":264},[220,18948,18949,18951],{"class":222,"line":682},[220,18950,18217],{"class":264},[220,18952,18953],{"class":420},"0.1\n",[220,18955,18956],{"class":222,"line":691},[220,18957,16118],{"class":264},[220,18959,18960],{"class":222,"line":696},[220,18961,1234],{"class":264},[220,18963,18964,18966,18968],{"class":222,"line":702},[220,18965,402],{"class":264},[220,18967,347],{"class":420},[220,18969,359],{"class":264},[212,18971,18973],{"className":468,"code":18972,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,18974,18975,18989,18995,19003,19011,19019,19027,19035,19043,19049,19053,19057],{"__ignoreMap":178},[220,18976,18977,18979,18981,18983,18985,18987],{"class":222,"line":223},[220,18978,343],{"class":264},[220,18980,347],{"class":420},[220,18982,350],{"class":226},[220,18984,353],{"class":260},[220,18986,356],{"class":230},[220,18988,359],{"class":264},[220,18990,18991,18993],{"class":222,"line":179},[220,18992,364],{"class":264},[220,18994,9630],{"class":420},[220,18996,18997,18999,19001],{"class":222,"line":389},[220,18998,9635],{"class":226},[220,19000,353],{"class":260},[220,19002,17400],{"class":230},[220,19004,19005,19007,19009],{"class":222,"line":399},[220,19006,9645],{"class":226},[220,19008,353],{"class":260},[220,19010,16040],{"class":264},[220,19012,19013,19015,19017],{"class":222,"line":644},[220,19014,16384],{"class":264},[220,19016,18571],{"class":230},[220,19018,1760],{"class":264},[220,19020,19021,19023,19025],{"class":222,"line":650},[220,19022,18924],{"class":264},[220,19024,18927],{"class":230},[220,19026,1760],{"class":264},[220,19028,19029,19031,19033],{"class":222,"line":656},[220,19030,17521],{"class":264},[220,19032,16054],{"class":420},[220,19034,1760],{"class":264},[220,19036,19037,19039,19041],{"class":222,"line":673},[220,19038,17530],{"class":264},[220,19040,18944],{"class":420},[220,19042,1760],{"class":264},[220,19044,19045,19047],{"class":222,"line":682},[220,19046,18217],{"class":264},[220,19048,18953],{"class":420},[220,19050,19051],{"class":222,"line":691},[220,19052,16118],{"class":264},[220,19054,19055],{"class":222,"line":696},[220,19056,1234],{"class":264},[220,19058,19059,19061,19063],{"class":222,"line":702},[220,19060,402],{"class":264},[220,19062,347],{"class":420},[220,19064,359],{"class":264},[212,19066,19067],{"className":468,"code":18972,"language":469,"meta":178,"style":178},[99,19068,19069,19083,19089,19097,19105,19113,19121,19129,19137,19143,19147,19151],{"__ignoreMap":178},[220,19070,19071,19073,19075,19077,19079,19081],{"class":222,"line":223},[220,19072,343],{"class":264},[220,19074,347],{"class":420},[220,19076,350],{"class":226},[220,19078,353],{"class":260},[220,19080,356],{"class":230},[220,19082,359],{"class":264},[220,19084,19085,19087],{"class":222,"line":179},[220,19086,364],{"class":264},[220,19088,9630],{"class":420},[220,19090,19091,19093,19095],{"class":222,"line":389},[220,19092,9635],{"class":226},[220,19094,353],{"class":260},[220,19096,17400],{"class":230},[220,19098,19099,19101,19103],{"class":222,"line":399},[220,19100,9645],{"class":226},[220,19102,353],{"class":260},[220,19104,16040],{"class":264},[220,19106,19107,19109,19111],{"class":222,"line":644},[220,19108,16384],{"class":264},[220,19110,18571],{"class":230},[220,19112,1760],{"class":264},[220,19114,19115,19117,19119],{"class":222,"line":650},[220,19116,18924],{"class":264},[220,19118,18927],{"class":230},[220,19120,1760],{"class":264},[220,19122,19123,19125,19127],{"class":222,"line":656},[220,19124,17521],{"class":264},[220,19126,16054],{"class":420},[220,19128,1760],{"class":264},[220,19130,19131,19133,19135],{"class":222,"line":673},[220,19132,17530],{"class":264},[220,19134,18944],{"class":420},[220,19136,1760],{"class":264},[220,19138,19139,19141],{"class":222,"line":682},[220,19140,18217],{"class":264},[220,19142,18953],{"class":420},[220,19144,19145],{"class":222,"line":691},[220,19146,16118],{"class":264},[220,19148,19149],{"class":222,"line":696},[220,19150,1234],{"class":264},[220,19152,19153,19155,19157],{"class":222,"line":702},[220,19154,402],{"class":264},[220,19156,347],{"class":420},[220,19158,359],{"class":264},[212,19160,19162],{"className":251,"code":19161,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Circle',\n props: {\n color: '#6366f1',\n radius: {\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }\n }\n }\n ]\n})\n",[99,19163,19164,19178,19182,19186,19194,19198,19206,19210,19218,19227,19235,19243,19249,19253,19257,19261,19265],{"__ignoreMap":178},[220,19165,19166,19168,19170,19172,19174,19176],{"class":222,"line":223},[220,19167,1735],{"class":260},[220,19169,1738],{"class":420},[220,19171,1741],{"class":260},[220,19173,1744],{"class":260},[220,19175,1747],{"class":226},[220,19177,1750],{"class":264},[220,19179,19180],{"class":222,"line":179},[220,19181,1765],{"class":264},[220,19183,19184],{"class":222,"line":389},[220,19185,16379],{"class":264},[220,19187,19188,19190,19192],{"class":222,"line":399},[220,19189,16384],{"class":264},[220,19191,3206],{"class":230},[220,19193,1760],{"class":264},[220,19195,19196],{"class":222,"line":644},[220,19197,16393],{"class":264},[220,19199,19200,19202,19204],{"class":222,"line":650},[220,19201,17815],{"class":264},[220,19203,17818],{"class":230},[220,19205,1760],{"class":264},[220,19207,19208],{"class":222,"line":656},[220,19209,17825],{"class":264},[220,19211,19212,19214,19216],{"class":222,"line":673},[220,19213,17830],{"class":264},[220,19215,18571],{"class":230},[220,19217,1760],{"class":264},[220,19219,19220,19223,19225],{"class":222,"line":682},[220,19221,19222],{"class":264}," axis: ",[220,19224,18927],{"class":230},[220,19226,1760],{"class":264},[220,19228,19229,19231,19233],{"class":222,"line":691},[220,19230,17848],{"class":264},[220,19232,16054],{"class":420},[220,19234,1760],{"class":264},[220,19236,19237,19239,19241],{"class":222,"line":696},[220,19238,17857],{"class":264},[220,19240,18944],{"class":420},[220,19242,1760],{"class":264},[220,19244,19245,19247],{"class":222,"line":702},[220,19246,18501],{"class":264},[220,19248,18953],{"class":420},[220,19250,19251],{"class":222,"line":718},[220,19252,16471],{"class":264},[220,19254,19255],{"class":222,"line":727},[220,19256,4929],{"class":264},[220,19258,19259],{"class":222,"line":2664},[220,19260,4609],{"class":264},[220,19262,19263],{"class":222,"line":3522},[220,19264,1787],{"class":264},[220,19266,19267],{"class":222,"line":9662},[220,19268,1792],{"class":264},[19,19270],{":preset":19271},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,19273,19274],{},[159,19275,17905],{},[1794,19277,19278,19290],{},[1797,19279,19280],{},[1800,19281,19282,19284,19286,19288],{},[1803,19283,17914],{},[1803,19285,15187],{},[1803,19287,15190],{},[1803,19289,1808],{},[1810,19291,19292,19309,19324,19339,19369,19388],{},[1800,19293,19294,19299,19304,19306],{},[1815,19295,19296],{},[99,19297,19298],{},"axis",[1815,19300,19301],{},[99,19302,19303],{},"'x' | 'y'",[1815,19305,17937],{},[1815,19307,19308],{},"Which pointer axis drives this prop.",[1800,19310,19311,19315,19319,19321],{},[1815,19312,19313],{},[99,19314,17954],{},[1815,19316,19317],{},[99,19318,15300],{},[1815,19320,17937],{},[1815,19322,19323],{},"Output value when axis is at 0 (left or top).",[1800,19325,19326,19330,19334,19336],{},[1815,19327,19328],{},[99,19329,17970],{},[1815,19331,19332],{},[99,19333,15300],{},[1815,19335,17937],{},[1815,19337,19338],{},"Output value when axis is at 1 (right or bottom).",[1800,19340,19341,19346,19350,19354],{},[1815,19342,19343],{},[99,19344,19345],{},"curve",[1815,19347,19348],{},[99,19349,15300],{},[1815,19351,19352],{},[99,19353,8673],{},[1815,19355,19356,19357,1550,19360,19363,19364,19366,19367,4836],{},"Power curve: ",[99,19358,19359],{},"-1",[99,19361,19362],{},"+1",". Negative = biased toward ",[99,19365,17954],{},", positive = toward ",[99,19368,17970],{},[1800,19370,19371,19375,19379,19383],{},[1815,19372,19373],{},[99,19374,18638],{},[1815,19376,19377],{},[99,19378,15300],{},[1815,19380,19381],{},[99,19382,8673],{},[1815,19384,19385,19386,4836],{},"Lag (0–1). Same as ",[99,19387,18049],{},[1800,19389,19390,19394,19398,19402],{},[1815,19391,19392],{},[99,19393,18659],{},[1815,19395,19396],{},[99,19397,15300],{},[1815,19399,19400],{},[99,19401,8673],{},[1815,19403,19404,19405,4836],{},"Spring bounce (0–1). Same as ",[99,19406,18049],{},[15,19408,19409,19411],{},[159,19410,18039],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,19413,19414],{"id":19414},"map",[15,19416,19417],{},"Drives a numeric prop from the visual output (alpha channel or luminance) of another named layer. The source layer's rendered pixels become a control signal.",[15,19419,19420,19421,19423],{},"First, give the source component an ",[99,19422,9056],{},". Then reference that id in the driver:",[246,19425,19426,19564,19710,19847,19983],{":tabs":1557},[212,19427,19429],{"className":334,"code":19428,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003C!-- Source layer: named 'grad' -->\n \u003CLinearGradient\n id=\"grad\"\n color-a=\"#000000\"\n color-b=\"#ffffff\"\n \u002F>\n\n \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n \u003CDotGrid\n :dot-size=\"{\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0.02,\n outputMax: 0.12\n }\"\n \u002F>\n\u003C\u002FShader>\n",[99,19430,19431,19445,19450,19456,19465,19475,19484,19488,19492,19497,19504,19513,19518,19523,19528,19533,19538,19543,19548,19552,19556],{"__ignoreMap":178},[220,19432,19433,19435,19437,19439,19441,19443],{"class":222,"line":223},[220,19434,343],{"class":264},[220,19436,347],{"class":346},[220,19438,350],{"class":226},[220,19440,353],{"class":264},[220,19442,356],{"class":230},[220,19444,359],{"class":264},[220,19446,19447],{"class":222,"line":179},[220,19448,19449],{"class":609}," \u003C!-- Source layer: named 'grad' -->\n",[220,19451,19452,19454],{"class":222,"line":389},[220,19453,364],{"class":264},[220,19455,1189],{"class":346},[220,19457,19458,19460,19462],{"class":222,"line":399},[220,19459,9577],{"class":226},[220,19461,353],{"class":264},[220,19463,19464],{"class":230},"\"grad\"\n",[220,19466,19467,19470,19472],{"class":222,"line":644},[220,19468,19469],{"class":226}," color-a",[220,19471,353],{"class":264},[220,19473,19474],{"class":230},"\"#000000\"\n",[220,19476,19477,19480,19482],{"class":222,"line":650},[220,19478,19479],{"class":226}," color-b",[220,19481,353],{"class":264},[220,19483,9591],{"class":230},[220,19485,19486],{"class":222,"line":656},[220,19487,1234],{"class":264},[220,19489,19490],{"class":222,"line":673},[220,19491,647],{"emptyLinePlaceholder":194},[220,19493,19494],{"class":222,"line":682},[220,19495,19496],{"class":609}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[220,19498,19499,19501],{"class":222,"line":691},[220,19500,364],{"class":264},[220,19502,19503],{"class":346},"DotGrid\n",[220,19505,19506,19509,19511],{"class":222,"line":696},[220,19507,19508],{"class":226}," :dot-size",[220,19510,353],{"class":264},[220,19512,15097],{"class":230},[220,19514,19515],{"class":222,"line":702},[220,19516,19517],{"class":230}," type: 'map',\n",[220,19519,19520],{"class":222,"line":718},[220,19521,19522],{"class":230}," source: 'grad',\n",[220,19524,19525],{"class":222,"line":727},[220,19526,19527],{"class":230}," channel: 'luminance',\n",[220,19529,19530],{"class":222,"line":2664},[220,19531,19532],{"class":230}," inputMin: 0,\n",[220,19534,19535],{"class":222,"line":3522},[220,19536,19537],{"class":230}," inputMax: 1,\n",[220,19539,19540],{"class":222,"line":9662},[220,19541,19542],{"class":230}," outputMin: 0.02,\n",[220,19544,19545],{"class":222,"line":9673},[220,19546,19547],{"class":230}," outputMax: 0.12\n",[220,19549,19550],{"class":222,"line":9678},[220,19551,17444],{"class":230},[220,19553,19554],{"class":222,"line":10999},[220,19555,1234],{"class":264},[220,19557,19558,19560,19562],{"class":222,"line":11004},[220,19559,402],{"class":264},[220,19561,347],{"class":346},[220,19563,359],{"class":264},[212,19565,19567],{"className":409,"code":19566,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n id=\"grad\"\n colorA=\"#000000\"\n colorB=\"#ffffff\"\n \u002F>\n \u003CDotGrid\n dotSize={{\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0.02,\n outputMax: 0.12\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,19568,19569,19583,19589,19597,19605,19613,19617,19623,19632,19641,19651,19660,19669,19678,19687,19694,19698,19702],{"__ignoreMap":178},[220,19570,19571,19573,19575,19577,19579,19581],{"class":222,"line":223},[220,19572,343],{"class":264},[220,19574,347],{"class":420},[220,19576,423],{"class":226},[220,19578,353],{"class":260},[220,19580,356],{"class":230},[220,19582,359],{"class":264},[220,19584,19585,19587],{"class":222,"line":179},[220,19586,364],{"class":264},[220,19588,1189],{"class":420},[220,19590,19591,19593,19595],{"class":222,"line":389},[220,19592,9577],{"class":226},[220,19594,353],{"class":260},[220,19596,19464],{"class":230},[220,19598,19599,19601,19603],{"class":222,"line":399},[220,19600,1194],{"class":226},[220,19602,353],{"class":260},[220,19604,19474],{"class":230},[220,19606,19607,19609,19611],{"class":222,"line":644},[220,19608,1204],{"class":226},[220,19610,353],{"class":260},[220,19612,9591],{"class":230},[220,19614,19615],{"class":222,"line":650},[220,19616,1234],{"class":264},[220,19618,19619,19621],{"class":222,"line":656},[220,19620,364],{"class":264},[220,19622,19503],{"class":420},[220,19624,19625,19628,19630],{"class":222,"line":673},[220,19626,19627],{"class":226}," dotSize",[220,19629,353],{"class":260},[220,19631,16040],{"class":264},[220,19633,19634,19636,19639],{"class":222,"line":682},[220,19635,16384],{"class":264},[220,19637,19638],{"class":230},"'map'",[220,19640,1760],{"class":264},[220,19642,19643,19646,19649],{"class":222,"line":691},[220,19644,19645],{"class":264}," source: ",[220,19647,19648],{"class":230},"'grad'",[220,19650,1760],{"class":264},[220,19652,19653,19656,19658],{"class":222,"line":696},[220,19654,19655],{"class":264}," channel: ",[220,19657,10206],{"class":230},[220,19659,1760],{"class":264},[220,19661,19662,19665,19667],{"class":222,"line":702},[220,19663,19664],{"class":264}," inputMin: ",[220,19666,8673],{"class":420},[220,19668,1760],{"class":264},[220,19670,19671,19674,19676],{"class":222,"line":718},[220,19672,19673],{"class":264}," inputMax: ",[220,19675,8677],{"class":420},[220,19677,1760],{"class":264},[220,19679,19680,19682,19685],{"class":222,"line":727},[220,19681,17521],{"class":264},[220,19683,19684],{"class":420},"0.02",[220,19686,1760],{"class":264},[220,19688,19689,19691],{"class":222,"line":2664},[220,19690,17530],{"class":264},[220,19692,19693],{"class":420},"0.12\n",[220,19695,19696],{"class":222,"line":3522},[220,19697,16118],{"class":264},[220,19699,19700],{"class":222,"line":9662},[220,19701,1234],{"class":264},[220,19703,19704,19706,19708],{"class":222,"line":9673},[220,19705,402],{"class":264},[220,19707,347],{"class":420},[220,19709,359],{"class":264},[212,19711,19713],{"className":468,"code":19712,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n id=\"grad\"\n colorA=\"#000000\"\n colorB=\"#ffffff\"\n \u002F>\n \u003CDotGrid\n dotSize={{\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0.02,\n outputMax: 0.12\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,19714,19715,19729,19735,19743,19751,19759,19763,19769,19777,19785,19793,19801,19809,19817,19825,19831,19835,19839],{"__ignoreMap":178},[220,19716,19717,19719,19721,19723,19725,19727],{"class":222,"line":223},[220,19718,343],{"class":264},[220,19720,347],{"class":420},[220,19722,350],{"class":226},[220,19724,353],{"class":260},[220,19726,356],{"class":230},[220,19728,359],{"class":264},[220,19730,19731,19733],{"class":222,"line":179},[220,19732,364],{"class":264},[220,19734,1189],{"class":420},[220,19736,19737,19739,19741],{"class":222,"line":389},[220,19738,9577],{"class":226},[220,19740,353],{"class":260},[220,19742,19464],{"class":230},[220,19744,19745,19747,19749],{"class":222,"line":399},[220,19746,1194],{"class":226},[220,19748,353],{"class":260},[220,19750,19474],{"class":230},[220,19752,19753,19755,19757],{"class":222,"line":644},[220,19754,1204],{"class":226},[220,19756,353],{"class":260},[220,19758,9591],{"class":230},[220,19760,19761],{"class":222,"line":650},[220,19762,1234],{"class":264},[220,19764,19765,19767],{"class":222,"line":656},[220,19766,364],{"class":264},[220,19768,19503],{"class":420},[220,19770,19771,19773,19775],{"class":222,"line":673},[220,19772,19627],{"class":226},[220,19774,353],{"class":260},[220,19776,16040],{"class":264},[220,19778,19779,19781,19783],{"class":222,"line":682},[220,19780,16384],{"class":264},[220,19782,19638],{"class":230},[220,19784,1760],{"class":264},[220,19786,19787,19789,19791],{"class":222,"line":691},[220,19788,19645],{"class":264},[220,19790,19648],{"class":230},[220,19792,1760],{"class":264},[220,19794,19795,19797,19799],{"class":222,"line":696},[220,19796,19655],{"class":264},[220,19798,10206],{"class":230},[220,19800,1760],{"class":264},[220,19802,19803,19805,19807],{"class":222,"line":702},[220,19804,19664],{"class":264},[220,19806,8673],{"class":420},[220,19808,1760],{"class":264},[220,19810,19811,19813,19815],{"class":222,"line":718},[220,19812,19673],{"class":264},[220,19814,8677],{"class":420},[220,19816,1760],{"class":264},[220,19818,19819,19821,19823],{"class":222,"line":727},[220,19820,17521],{"class":264},[220,19822,19684],{"class":420},[220,19824,1760],{"class":264},[220,19826,19827,19829],{"class":222,"line":2664},[220,19828,17530],{"class":264},[220,19830,19693],{"class":420},[220,19832,19833],{"class":222,"line":3522},[220,19834,16118],{"class":264},[220,19836,19837],{"class":222,"line":9662},[220,19838,1234],{"class":264},[220,19840,19841,19843,19845],{"class":222,"line":9673},[220,19842,402],{"class":264},[220,19844,347],{"class":420},[220,19846,359],{"class":264},[212,19848,19849],{"className":468,"code":19712,"language":469,"meta":178,"style":178},[99,19850,19851,19865,19871,19879,19887,19895,19899,19905,19913,19921,19929,19937,19945,19953,19961,19967,19971,19975],{"__ignoreMap":178},[220,19852,19853,19855,19857,19859,19861,19863],{"class":222,"line":223},[220,19854,343],{"class":264},[220,19856,347],{"class":420},[220,19858,350],{"class":226},[220,19860,353],{"class":260},[220,19862,356],{"class":230},[220,19864,359],{"class":264},[220,19866,19867,19869],{"class":222,"line":179},[220,19868,364],{"class":264},[220,19870,1189],{"class":420},[220,19872,19873,19875,19877],{"class":222,"line":389},[220,19874,9577],{"class":226},[220,19876,353],{"class":260},[220,19878,19464],{"class":230},[220,19880,19881,19883,19885],{"class":222,"line":399},[220,19882,1194],{"class":226},[220,19884,353],{"class":260},[220,19886,19474],{"class":230},[220,19888,19889,19891,19893],{"class":222,"line":644},[220,19890,1204],{"class":226},[220,19892,353],{"class":260},[220,19894,9591],{"class":230},[220,19896,19897],{"class":222,"line":650},[220,19898,1234],{"class":264},[220,19900,19901,19903],{"class":222,"line":656},[220,19902,364],{"class":264},[220,19904,19503],{"class":420},[220,19906,19907,19909,19911],{"class":222,"line":673},[220,19908,19627],{"class":226},[220,19910,353],{"class":260},[220,19912,16040],{"class":264},[220,19914,19915,19917,19919],{"class":222,"line":682},[220,19916,16384],{"class":264},[220,19918,19638],{"class":230},[220,19920,1760],{"class":264},[220,19922,19923,19925,19927],{"class":222,"line":691},[220,19924,19645],{"class":264},[220,19926,19648],{"class":230},[220,19928,1760],{"class":264},[220,19930,19931,19933,19935],{"class":222,"line":696},[220,19932,19655],{"class":264},[220,19934,10206],{"class":230},[220,19936,1760],{"class":264},[220,19938,19939,19941,19943],{"class":222,"line":702},[220,19940,19664],{"class":264},[220,19942,8673],{"class":420},[220,19944,1760],{"class":264},[220,19946,19947,19949,19951],{"class":222,"line":718},[220,19948,19673],{"class":264},[220,19950,8677],{"class":420},[220,19952,1760],{"class":264},[220,19954,19955,19957,19959],{"class":222,"line":727},[220,19956,17521],{"class":264},[220,19958,19684],{"class":420},[220,19960,1760],{"class":264},[220,19962,19963,19965],{"class":222,"line":2664},[220,19964,17530],{"class":264},[220,19966,19693],{"class":420},[220,19968,19969],{"class":222,"line":3522},[220,19970,16118],{"class":264},[220,19972,19973],{"class":222,"line":9662},[220,19974,1234],{"class":264},[220,19976,19977,19979,19981],{"class":222,"line":9673},[220,19978,402],{"class":264},[220,19980,347],{"class":420},[220,19982,359],{"class":264},[212,19984,19986],{"className":251,"code":19985,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n id: 'grad',\n props: { colorA: '#000000', colorB: '#ffffff' }\n },\n {\n type: 'DotGrid',\n props: {\n dotSize: {\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0,\n outputMax: 1\n }\n }\n }\n ]\n})\n",[99,19987,19988,20002,20006,20010,20018,20027,20041,20046,20050,20059,20063,20068,20076,20085,20094,20103,20112,20120,20127,20131,20135,20139,20143],{"__ignoreMap":178},[220,19989,19990,19992,19994,19996,19998,20000],{"class":222,"line":223},[220,19991,1735],{"class":260},[220,19993,1738],{"class":420},[220,19995,1741],{"class":260},[220,19997,1744],{"class":260},[220,19999,1747],{"class":226},[220,20001,1750],{"class":264},[220,20003,20004],{"class":222,"line":179},[220,20005,1765],{"class":264},[220,20007,20008],{"class":222,"line":389},[220,20009,16379],{"class":264},[220,20011,20012,20014,20016],{"class":222,"line":399},[220,20013,16384],{"class":264},[220,20015,2462],{"class":230},[220,20017,1760],{"class":264},[220,20019,20020,20023,20025],{"class":222,"line":644},[220,20021,20022],{"class":264}," id: ",[220,20024,19648],{"class":230},[220,20026,1760],{"class":264},[220,20028,20029,20032,20035,20037,20039],{"class":222,"line":650},[220,20030,20031],{"class":264}," props: { colorA: ",[220,20033,20034],{"class":230},"'#000000'",[220,20036,10172],{"class":264},[220,20038,10169],{"class":230},[220,20040,5671],{"class":264},[220,20042,20043],{"class":222,"line":656},[220,20044,20045],{"class":264}," },\n",[220,20047,20048],{"class":222,"line":673},[220,20049,16379],{"class":264},[220,20051,20052,20054,20057],{"class":222,"line":682},[220,20053,16384],{"class":264},[220,20055,20056],{"class":230},"'DotGrid'",[220,20058,1760],{"class":264},[220,20060,20061],{"class":222,"line":691},[220,20062,16393],{"class":264},[220,20064,20065],{"class":222,"line":696},[220,20066,20067],{"class":264}," dotSize: {\n",[220,20069,20070,20072,20074],{"class":222,"line":702},[220,20071,17830],{"class":264},[220,20073,19638],{"class":230},[220,20075,1760],{"class":264},[220,20077,20078,20081,20083],{"class":222,"line":718},[220,20079,20080],{"class":264}," source: ",[220,20082,19648],{"class":230},[220,20084,1760],{"class":264},[220,20086,20087,20090,20092],{"class":222,"line":727},[220,20088,20089],{"class":264}," channel: ",[220,20091,10206],{"class":230},[220,20093,1760],{"class":264},[220,20095,20096,20099,20101],{"class":222,"line":2664},[220,20097,20098],{"class":264}," inputMin: ",[220,20100,8673],{"class":420},[220,20102,1760],{"class":264},[220,20104,20105,20108,20110],{"class":222,"line":3522},[220,20106,20107],{"class":264}," inputMax: ",[220,20109,8677],{"class":420},[220,20111,1760],{"class":264},[220,20113,20114,20116,20118],{"class":222,"line":9662},[220,20115,17848],{"class":264},[220,20117,8673],{"class":420},[220,20119,1760],{"class":264},[220,20121,20122,20124],{"class":222,"line":9673},[220,20123,17857],{"class":264},[220,20125,20126],{"class":420},"1\n",[220,20128,20129],{"class":222,"line":9678},[220,20130,16471],{"class":264},[220,20132,20133],{"class":222,"line":10999},[220,20134,4929],{"class":264},[220,20136,20137],{"class":222,"line":11004},[220,20138,4609],{"class":264},[220,20140,20141],{"class":222,"line":12075},[220,20142,1787],{"class":264},[220,20144,20145],{"class":222,"line":12082},[220,20146,1792],{"class":264},[19,20148],{":preset":20149},"{\"components\":[{\"type\":\"LinearGradient\",\"id\":\"grad\",\"props\":{\"colorA\":\"#000000\",\"colorB\":\"#ffffff\",\"angle\":45,\"visible\":false}},{\"type\":\"DotGrid\",\"props\":{\"dotSize\":{\"type\":\"map\",\"source\":\"grad\",\"channel\":\"luminance\",\"inputMin\":0,\"inputMax\":1,\"outputMin\":0,\"outputMax\":0.8}}}]}",[15,20151,20152],{},[159,20153,17905],{},[1794,20155,20156,20168],{},[1797,20157,20158],{},[1800,20159,20160,20162,20164,20166],{},[1803,20161,17914],{},[1803,20163,15187],{},[1803,20165,15190],{},[1803,20167,1808],{},[1810,20169,20170,20188,20212,20228,20244,20259,20274],{},[1800,20171,20172,20177,20181,20183],{},[1815,20173,20174],{},[99,20175,20176],{},"source",[1815,20178,20179],{},[99,20180,9060],{},[1815,20182,17937],{},[1815,20184,1839,20185,20187],{},[99,20186,9056],{}," of the source component to sample from.",[1800,20189,20190,20195,20199,20201],{},[1815,20191,20192],{},[99,20193,20194],{},"channel",[1815,20196,20197],{},[99,20198,9060],{},[1815,20200,17937],{},[1815,20202,20203,20204,1895,20206,1895,20208,1895,20210,4836],{},"Which channel to extract. ",[99,20205,9508],{},[99,20207,9516],{},[99,20209,9524],{},[99,20211,9532],{},[1800,20213,20214,20219,20223,20225],{},[1815,20215,20216],{},[99,20217,20218],{},"inputMin",[1815,20220,20221],{},[99,20222,15300],{},[1815,20224,17937],{},[1815,20226,20227],{},"Source values at or below this are treated as 0.",[1800,20229,20230,20235,20239,20241],{},[1815,20231,20232],{},[99,20233,20234],{},"inputMax",[1815,20236,20237],{},[99,20238,15300],{},[1815,20240,17937],{},[1815,20242,20243],{},"Source values at or above this are treated as 1.",[1800,20245,20246,20250,20254,20256],{},[1815,20247,20248],{},[99,20249,17954],{},[1815,20251,20252],{},[99,20253,15300],{},[1815,20255,17937],{},[1815,20257,20258],{},"Output value when input = 0.",[1800,20260,20261,20265,20269,20271],{},[1815,20262,20263],{},[99,20264,17970],{},[1815,20266,20267],{},[99,20268,15300],{},[1815,20270,17937],{},[1815,20272,20273],{},"Output value when input = 1.",[1800,20275,20276,20280,20284,20288],{},[1815,20277,20278],{},[99,20279,19345],{},[1815,20281,20282],{},[99,20283,15300],{},[1815,20285,20286],{},[99,20287,8673],{},[1815,20289,20290,20291,1550,20293,4836],{},"Power curve applied after normalization. ",[99,20292,19359],{},[99,20294,19362],{},[15,20296,1839,20297,20299],{},[99,20298,19414],{}," type causes the source layer to be rendered to a texture (RTT) on first use. This is a one-time cost. The source renders independently and its output is sampled each frame.",[23,20301,20303],{"id":20302},"combining-dynamic-props","Combining dynamic props",[15,20305,20306],{},"Multiple dynamic props can be active on the same component — one per prop:",[246,20308,20309,20415,20542,20665],{":tabs":248},[212,20310,20312],{"className":334,"code":20311,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient color-a=\"#0f172a\" color-b=\"#4f46e5\" \u002F>\n \u003CLensFlare\n :center=\"{ type: 'mouse-position', smoothing: 0.1 }\"\n :intensity=\"{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.4,\n outputMax: 1.0,\n speed: 0.6\n }\"\n \u002F>\n\u003C\u002FShader>\n",[99,20313,20314,20328,20351,20358,20367,20376,20380,20384,20389,20394,20399,20403,20407],{"__ignoreMap":178},[220,20315,20316,20318,20320,20322,20324,20326],{"class":222,"line":223},[220,20317,343],{"class":264},[220,20319,347],{"class":346},[220,20321,350],{"class":226},[220,20323,353],{"class":264},[220,20325,356],{"class":230},[220,20327,359],{"class":264},[220,20329,20330,20332,20334,20337,20339,20341,20344,20346,20349],{"class":222,"line":179},[220,20331,364],{"class":264},[220,20333,367],{"class":346},[220,20335,20336],{"class":226}," color-a",[220,20338,353],{"class":264},[220,20340,375],{"class":230},[220,20342,20343],{"class":226}," color-b",[220,20345,353],{"class":264},[220,20347,20348],{"class":230},"\"#4f46e5\"",[220,20350,386],{"class":264},[220,20352,20353,20355],{"class":222,"line":389},[220,20354,364],{"class":264},[220,20356,20357],{"class":346},"LensFlare\n",[220,20359,20360,20362,20364],{"class":222,"line":399},[220,20361,18113],{"class":226},[220,20363,353],{"class":264},[220,20365,20366],{"class":230},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[220,20368,20369,20372,20374],{"class":222,"line":644},[220,20370,20371],{"class":226}," :intensity",[220,20373,353],{"class":264},[220,20375,15097],{"class":230},[220,20377,20378],{"class":222,"line":650},[220,20379,17414],{"class":230},[220,20381,20382],{"class":222,"line":656},[220,20383,17419],{"class":230},[220,20385,20386],{"class":222,"line":673},[220,20387,20388],{"class":230}," outputMin: 0.4,\n",[220,20390,20391],{"class":222,"line":682},[220,20392,20393],{"class":230}," outputMax: 1.0,\n",[220,20395,20396],{"class":222,"line":691},[220,20397,20398],{"class":230}," speed: 0.6\n",[220,20400,20401],{"class":222,"line":696},[220,20402,17444],{"class":230},[220,20404,20405],{"class":222,"line":702},[220,20406,1234],{"class":264},[220,20408,20409,20411,20413],{"class":222,"line":718},[220,20410,402],{"class":264},[220,20412,347],{"class":346},[220,20414,359],{"class":264},[212,20416,20418],{"className":409,"code":20417,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#4f46e5\" \u002F>\n \u003CLensFlare\n center={{ type: 'mouse-position', smoothing: 0.1 }}\n intensity={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.4,\n outputMax: 1.0,\n speed: 0.6\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,20419,20420,20434,20454,20460,20478,20487,20495,20503,20511,20519,20526,20530,20534],{"__ignoreMap":178},[220,20421,20422,20424,20426,20428,20430,20432],{"class":222,"line":223},[220,20423,343],{"class":264},[220,20425,347],{"class":420},[220,20427,423],{"class":226},[220,20429,353],{"class":260},[220,20431,356],{"class":230},[220,20433,359],{"class":264},[220,20435,20436,20438,20440,20442,20444,20446,20448,20450,20452],{"class":222,"line":179},[220,20437,364],{"class":264},[220,20439,367],{"class":420},[220,20441,370],{"class":226},[220,20443,353],{"class":260},[220,20445,375],{"class":230},[220,20447,378],{"class":226},[220,20449,353],{"class":260},[220,20451,20348],{"class":230},[220,20453,386],{"class":264},[220,20455,20456,20458],{"class":222,"line":389},[220,20457,364],{"class":264},[220,20459,20357],{"class":420},[220,20461,20462,20464,20466,20469,20471,20474,20476],{"class":222,"line":399},[220,20463,18199],{"class":226},[220,20465,353],{"class":260},[220,20467,20468],{"class":264},"{{ type: ",[220,20470,18210],{"class":230},[220,20472,20473],{"class":264},", smoothing: ",[220,20475,16054],{"class":420},[220,20477,2803],{"class":264},[220,20479,20480,20483,20485],{"class":222,"line":644},[220,20481,20482],{"class":226}," intensity",[220,20484,353],{"class":260},[220,20486,16040],{"class":264},[220,20488,20489,20491,20493],{"class":222,"line":650},[220,20490,16384],{"class":264},[220,20492,17504],{"class":230},[220,20494,1760],{"class":264},[220,20496,20497,20499,20501],{"class":222,"line":656},[220,20498,17511],{"class":264},[220,20500,17514],{"class":230},[220,20502,1760],{"class":264},[220,20504,20505,20507,20509],{"class":222,"line":673},[220,20506,17521],{"class":264},[220,20508,8249],{"class":420},[220,20510,1760],{"class":264},[220,20512,20513,20515,20517],{"class":222,"line":682},[220,20514,17530],{"class":264},[220,20516,17995],{"class":420},[220,20518,1760],{"class":264},[220,20520,20521,20523],{"class":222,"line":691},[220,20522,17539],{"class":264},[220,20524,20525],{"class":420},"0.6\n",[220,20527,20528],{"class":222,"line":696},[220,20529,16118],{"class":264},[220,20531,20532],{"class":222,"line":702},[220,20533,1234],{"class":264},[220,20535,20536,20538,20540],{"class":222,"line":718},[220,20537,402],{"class":264},[220,20539,347],{"class":420},[220,20541,359],{"class":264},[212,20543,20545],{"className":468,"code":20544,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#4f46e5\" \u002F>\n \u003CLensFlare\n center={{ type: 'mouse-position', smoothing: 0.1 }}\n intensity={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.4,\n outputMax: 1.0,\n speed: 0.6\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,20546,20547,20561,20581,20587,20603,20611,20619,20627,20635,20643,20649,20653,20657],{"__ignoreMap":178},[220,20548,20549,20551,20553,20555,20557,20559],{"class":222,"line":223},[220,20550,343],{"class":264},[220,20552,347],{"class":420},[220,20554,350],{"class":226},[220,20556,353],{"class":260},[220,20558,356],{"class":230},[220,20560,359],{"class":264},[220,20562,20563,20565,20567,20569,20571,20573,20575,20577,20579],{"class":222,"line":179},[220,20564,364],{"class":264},[220,20566,367],{"class":420},[220,20568,370],{"class":226},[220,20570,353],{"class":260},[220,20572,375],{"class":230},[220,20574,378],{"class":226},[220,20576,353],{"class":260},[220,20578,20348],{"class":230},[220,20580,386],{"class":264},[220,20582,20583,20585],{"class":222,"line":389},[220,20584,364],{"class":264},[220,20586,20357],{"class":420},[220,20588,20589,20591,20593,20595,20597,20599,20601],{"class":222,"line":399},[220,20590,18199],{"class":226},[220,20592,353],{"class":260},[220,20594,20468],{"class":264},[220,20596,18210],{"class":230},[220,20598,20473],{"class":264},[220,20600,16054],{"class":420},[220,20602,2803],{"class":264},[220,20604,20605,20607,20609],{"class":222,"line":644},[220,20606,20482],{"class":226},[220,20608,353],{"class":260},[220,20610,16040],{"class":264},[220,20612,20613,20615,20617],{"class":222,"line":650},[220,20614,16384],{"class":264},[220,20616,17504],{"class":230},[220,20618,1760],{"class":264},[220,20620,20621,20623,20625],{"class":222,"line":656},[220,20622,17511],{"class":264},[220,20624,17514],{"class":230},[220,20626,1760],{"class":264},[220,20628,20629,20631,20633],{"class":222,"line":673},[220,20630,17521],{"class":264},[220,20632,8249],{"class":420},[220,20634,1760],{"class":264},[220,20636,20637,20639,20641],{"class":222,"line":682},[220,20638,17530],{"class":264},[220,20640,17995],{"class":420},[220,20642,1760],{"class":264},[220,20644,20645,20647],{"class":222,"line":691},[220,20646,17539],{"class":264},[220,20648,20525],{"class":420},[220,20650,20651],{"class":222,"line":696},[220,20652,16118],{"class":264},[220,20654,20655],{"class":222,"line":702},[220,20656,1234],{"class":264},[220,20658,20659,20661,20663],{"class":222,"line":718},[220,20660,402],{"class":264},[220,20662,347],{"class":420},[220,20664,359],{"class":264},[212,20666,20667],{"className":468,"code":20544,"language":469,"meta":178,"style":178},[99,20668,20669,20683,20703,20709,20725,20733,20741,20749,20757,20765,20771,20775,20779],{"__ignoreMap":178},[220,20670,20671,20673,20675,20677,20679,20681],{"class":222,"line":223},[220,20672,343],{"class":264},[220,20674,347],{"class":420},[220,20676,350],{"class":226},[220,20678,353],{"class":260},[220,20680,356],{"class":230},[220,20682,359],{"class":264},[220,20684,20685,20687,20689,20691,20693,20695,20697,20699,20701],{"class":222,"line":179},[220,20686,364],{"class":264},[220,20688,367],{"class":420},[220,20690,370],{"class":226},[220,20692,353],{"class":260},[220,20694,375],{"class":230},[220,20696,378],{"class":226},[220,20698,353],{"class":260},[220,20700,20348],{"class":230},[220,20702,386],{"class":264},[220,20704,20705,20707],{"class":222,"line":389},[220,20706,364],{"class":264},[220,20708,20357],{"class":420},[220,20710,20711,20713,20715,20717,20719,20721,20723],{"class":222,"line":399},[220,20712,18199],{"class":226},[220,20714,353],{"class":260},[220,20716,20468],{"class":264},[220,20718,18210],{"class":230},[220,20720,20473],{"class":264},[220,20722,16054],{"class":420},[220,20724,2803],{"class":264},[220,20726,20727,20729,20731],{"class":222,"line":644},[220,20728,20482],{"class":226},[220,20730,353],{"class":260},[220,20732,16040],{"class":264},[220,20734,20735,20737,20739],{"class":222,"line":650},[220,20736,16384],{"class":264},[220,20738,17504],{"class":230},[220,20740,1760],{"class":264},[220,20742,20743,20745,20747],{"class":222,"line":656},[220,20744,17511],{"class":264},[220,20746,17514],{"class":230},[220,20748,1760],{"class":264},[220,20750,20751,20753,20755],{"class":222,"line":673},[220,20752,17521],{"class":264},[220,20754,8249],{"class":420},[220,20756,1760],{"class":264},[220,20758,20759,20761,20763],{"class":222,"line":682},[220,20760,17530],{"class":264},[220,20762,17995],{"class":420},[220,20764,1760],{"class":264},[220,20766,20767,20769],{"class":222,"line":691},[220,20768,17539],{"class":264},[220,20770,20525],{"class":420},[220,20772,20773],{"class":222,"line":696},[220,20774,16118],{"class":264},[220,20776,20777],{"class":222,"line":702},[220,20778,1234],{"class":264},[220,20780,20781,20783,20785],{"class":222,"line":718},[220,20782,402],{"class":264},[220,20784,347],{"class":420},[220,20786,359],{"class":264},[23,20788,20790],{"id":20789},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,20792,20793,20794,20797],{},"In the JavaScript API, ",[99,20795,20796],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[212,20799,20801],{"className":251,"code":20800,"language":253,"meta":178,"style":178},"\u002F\u002F Start with a static value\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c', props: { radius: 0.4 } }\n ]\n})\n\n\u002F\u002F Later: switch to animated\nshader.update('c', {\n radius: {\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.7\n }\n})\n\n\u002F\u002F Later: switch back to static\nshader.update('c', { radius: 0.4 })\n",[99,20802,20803,20808,20822,20826,20843,20847,20851,20855,20860,20872,20877,20886,20895,20904,20912,20916,20920,20924,20929],{"__ignoreMap":178},[220,20804,20805],{"class":222,"line":223},[220,20806,20807],{"class":609},"\u002F\u002F Start with a static value\n",[220,20809,20810,20812,20814,20816,20818,20820],{"class":222,"line":179},[220,20811,1735],{"class":260},[220,20813,1738],{"class":420},[220,20815,1741],{"class":260},[220,20817,1744],{"class":260},[220,20819,1747],{"class":226},[220,20821,1750],{"class":264},[220,20823,20824],{"class":222,"line":389},[220,20825,1765],{"class":264},[220,20827,20828,20830,20832,20834,20837,20839,20841],{"class":222,"line":399},[220,20829,1770],{"class":264},[220,20831,3206],{"class":230},[220,20833,3209],{"class":264},[220,20835,20836],{"class":230},"'c'",[220,20838,7541],{"class":264},[220,20840,8249],{"class":420},[220,20842,1782],{"class":264},[220,20844,20845],{"class":222,"line":644},[220,20846,1787],{"class":264},[220,20848,20849],{"class":222,"line":650},[220,20850,1792],{"class":264},[220,20852,20853],{"class":222,"line":656},[220,20854,647],{"emptyLinePlaceholder":194},[220,20856,20857],{"class":222,"line":673},[220,20858,20859],{"class":609},"\u002F\u002F Later: switch to animated\n",[220,20861,20862,20864,20866,20868,20870],{"class":222,"line":682},[220,20863,11602],{"class":264},[220,20865,11605],{"class":226},[220,20867,2626],{"class":264},[220,20869,20836],{"class":230},[220,20871,11967],{"class":264},[220,20873,20874],{"class":222,"line":691},[220,20875,20876],{"class":264}," radius: {\n",[220,20878,20879,20882,20884],{"class":222,"line":696},[220,20880,20881],{"class":264}," type: ",[220,20883,17504],{"class":230},[220,20885,1760],{"class":264},[220,20887,20888,20891,20893],{"class":222,"line":702},[220,20889,20890],{"class":264}," mode: ",[220,20892,17514],{"class":230},[220,20894,1760],{"class":264},[220,20896,20897,20900,20902],{"class":222,"line":718},[220,20898,20899],{"class":264}," outputMin: ",[220,20901,16976],{"class":420},[220,20903,1760],{"class":264},[220,20905,20906,20909],{"class":222,"line":727},[220,20907,20908],{"class":264}," outputMax: ",[220,20910,20911],{"class":420},"0.7\n",[220,20913,20914],{"class":222,"line":2664},[220,20915,3256],{"class":264},[220,20917,20918],{"class":222,"line":3522},[220,20919,1792],{"class":264},[220,20921,20922],{"class":222,"line":9662},[220,20923,647],{"emptyLinePlaceholder":194},[220,20925,20926],{"class":222,"line":9673},[220,20927,20928],{"class":609},"\u002F\u002F Later: switch back to static\n",[220,20930,20931,20933,20935,20937,20939,20942,20944],{"class":222,"line":9678},[220,20932,11602],{"class":264},[220,20934,11605],{"class":226},[220,20936,2626],{"class":264},[220,20938,20836],{"class":230},[220,20940,20941],{"class":264},", { radius: ",[220,20943,8249],{"class":420},[220,20945,11617],{"class":264},[1504,20947,14991],{},{"title":178,"searchDepth":179,"depth":179,"links":20949},[20950,20951,20952,20953,20954,20955],{"id":17361,"depth":179,"text":17361},{"id":18049,"depth":179,"text":18049},{"id":18783,"depth":179,"text":18783},{"id":19414,"depth":179,"text":19414},{"id":20302,"depth":179,"text":20303},{"id":20789,"depth":179,"text":20790},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":17298,"description":20956},"docs\u002Fguide\u002F7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":20963,"title":20964,"body":20965,"category":10232,"description":25834,"exclude":190,"extension":191,"forceFramework":190,"icon":25835,"meta":25836,"navigation":194,"path":25837,"seo":25838,"stem":25839,"__hash__":25840},"guide\u002Fdocs\u002Fguide\u002F8.shape-effects.md","Shape \u002F SDF Effects",{"type":8,"value":20966,"toc":25778},[20967,20970,20973,20993,20996,21011,21015,21031,21675,21677,21681,21689,21695,21698,21731,21759,21761,21768,21771,21838,21883,21885,21892,21895,21980,22034,22036,22043,22046,22135,22185,22187,22194,22197,22286,22336,22338,22345,22348,22400,22435,22437,22444,22447,22534,22585,22587,22594,22597,22680,22729,22731,22738,22741,22814,22857,22859,22866,22869,22953,23004,23006,23013,23016,23100,23152,23154,23158,23178,23191,23212,23322,23328,23331,23385,23438,23440,23447,23450,23564,23641,23643,23650,23653,23729,23786,23788,23795,23798,23857,23907,23909,23916,23919,24013,24079,24081,24088,24091,24166,24224,24226,24233,24243,24337,24404,24406,24413,24416,24491,24549,24551,24558,24561,24637,24695,24697,24704,24707,24803,24872,24874,24881,24887,24961,25019,25021,25028,25031,25122,25189,25191,25195,25198,25215,25334,25338,25353,25429,25438,25767,25776],[11,20968,20964],{"id":20969},"shape-sdf-effects",[19,20971],{":preset":20972,"toneMapping":1536},"{\"components\":[{\"type\":\"MultiPointGradient\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0},\"colorA\":\"#3772e3\",\"colorB\":\"#f800ff\",\"colorC\":\"#472cd8\",\"colorD\":\"#9922d4\",\"colorE\":\"#2acae8\",\"colorSpace\":\"oklch\",\"positionA\":{\"x\":0.01,\"y\":-0.06},\"positionB\":{\"x\":0.75,\"y\":0.19},\"positionC\":{\"x\":0.27,\"y\":0.8},\"positionD\":{\"x\":1.09,\"y\":1.14}}},{\"type\":\"ImageTexture\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0.42421875},\"y\":{\"unit\":\"uv\",\"value\":0.3625},\"width\":{\"unit\":\"uv\",\"value\":0.1515625},\"height\":{\"unit\":\"uv\",\"value\":0.275},\"origin\":\"top-left\",\"rotation\":0,\"lockAspect\":true},\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FlJovqT3gjKH4.svg\"}},{\"type\":\"Glass\",\"props\":{\"blur\":20,\"fresnel\":0.45,\"fresnelSoftness\":0.56,\"innerZoom\":0.5,\"refraction\":2,\"thickness\":0.17,\"shapeType\":\"prism3D\",\"shape\":{\"type\":\"prism3D\",\"radius\":0.28,\"height\":0.14,\"rotX\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"rotY\":32,\"rotZ\":0}}}]}",[15,20974,20975,20976,1895,20978,20981,20982,20985,20986,20989,20990,20992],{},"Several components — such as ",[159,20977,15466],{},[159,20979,20980],{},"Neon",", and ",[159,20983,20984],{},"Emboss"," — are driven by a ",[1847,20987,20988],{},"shape",". These effects accept a ",[99,20991,20988],{}," prop that describes which shape to use and how it should be configured. They use what is called an \"SDF\" (or \"signed distance field\") texture to render the shape. An SDF is a mathematical representation of a shape that determines the distance from any pixel to the shape's boundary.",[15,20994,20995],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[15,20997,20998,20999,21002,21003,21006,21007,21010],{},"Shapes come in two flavours: flat ",[159,21000,21001],{},"2D"," profiles (circles, stars, rounded rectangles, …) and true ",[159,21004,21005],{},"3D"," primitives (spheres, cubes, toruses, …) that are raymarched into the field, so effects like Glass and Crystal refract through real volume and curvature. You can also ",[159,21008,21009],{},"extrude"," your own SVG into a solid 3D slab.",[23,21012,21014],{"id":21013},"configuration","Configuration",[15,21016,1839,21017,21019,21020,21023,21024,18745,21027,21030],{},[99,21018,20988],{}," prop accepts a configuration object. The only required key is ",[99,21021,21022],{},"type",", which selects one of the built-in shapes, like ",[99,21025,21026],{},"circleSDF",[99,21028,21029],{},"sphere3D",". Everything else is shape-specific and optional (sensible defaults apply).",[246,21032,21033,21107,21252,21376,21500],{":tabs":1557},[212,21034,21036],{"className":334,"code":21035,"language":336,"meta":178,"style":178},"\u003C!-- Circle (default) -->\n\u003CGlass :shape='{ type: \"circleSDF\", radius: 0.35 }' \u002F>\n\n\u003C!-- Six-pointed star -->\n\u003CNeon :shape='{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }' \u002F>\n\n\u003C!-- Rounded rectangle -->\n\u003CEmboss :shape='{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }' \u002F>\n",[99,21037,21038,21043,21059,21063,21068,21083,21087,21092],{"__ignoreMap":178},[220,21039,21040],{"class":222,"line":223},[220,21041,21042],{"class":609},"\u003C!-- Circle (default) -->\n",[220,21044,21045,21047,21049,21052,21054,21057],{"class":222,"line":179},[220,21046,343],{"class":264},[220,21048,15466],{"class":346},[220,21050,21051],{"class":226}," :shape",[220,21053,353],{"class":264},[220,21055,21056],{"class":230},"'{ type: \"circleSDF\", radius: 0.35 }'",[220,21058,386],{"class":264},[220,21060,21061],{"class":222,"line":389},[220,21062,647],{"emptyLinePlaceholder":194},[220,21064,21065],{"class":222,"line":399},[220,21066,21067],{"class":609},"\u003C!-- Six-pointed star -->\n",[220,21069,21070,21072,21074,21076,21078,21081],{"class":222,"line":644},[220,21071,343],{"class":264},[220,21073,20980],{"class":346},[220,21075,21051],{"class":226},[220,21077,353],{"class":264},[220,21079,21080],{"class":230},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[220,21082,386],{"class":264},[220,21084,21085],{"class":222,"line":650},[220,21086,647],{"emptyLinePlaceholder":194},[220,21088,21089],{"class":222,"line":656},[220,21090,21091],{"class":609},"\u003C!-- Rounded rectangle -->\n",[220,21093,21094,21096,21098,21100,21102,21105],{"class":222,"line":673},[220,21095,343],{"class":264},[220,21097,20984],{"class":346},[220,21099,21051],{"class":226},[220,21101,353],{"class":264},[220,21103,21104],{"class":230},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[220,21106,386],{"class":264},[212,21108,21110],{"className":409,"code":21109,"language":411,"meta":178,"style":178},"\u002F\u002F Circle (default)\n\u003CGlass shape={JSON.stringify({ type: \"circleSDF\", radius: 0.35 })} \u002F>\n\n\u002F\u002F Six-pointed star\n\u003CNeon shape={JSON.stringify({ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 })} \u002F>\n\n\u002F\u002F Rounded rectangle\n\u003CEmboss shape={JSON.stringify({ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 })} \u002F>\n",[99,21111,21112,21117,21152,21156,21161,21202,21206,21211],{"__ignoreMap":178},[220,21113,21114],{"class":222,"line":223},[220,21115,21116],{"class":609},"\u002F\u002F Circle (default)\n",[220,21118,21119,21121,21123,21126,21128,21130,21133,21135,21138,21141,21144,21146,21149],{"class":222,"line":179},[220,21120,343],{"class":264},[220,21122,15466],{"class":420},[220,21124,21125],{"class":226}," shape",[220,21127,353],{"class":260},[220,21129,743],{"class":264},[220,21131,21132],{"class":420},"JSON",[220,21134,4836],{"class":264},[220,21136,21137],{"class":226},"stringify",[220,21139,21140],{"class":264},"({ type: ",[220,21142,21143],{"class":230},"\"circleSDF\"",[220,21145,6566],{"class":264},[220,21147,21148],{"class":420},"0.35",[220,21150,21151],{"class":264}," })} \u002F>\n",[220,21153,21154],{"class":222,"line":389},[220,21155,647],{"emptyLinePlaceholder":194},[220,21157,21158],{"class":222,"line":399},[220,21159,21160],{"class":609},"\u002F\u002F Six-pointed star\n",[220,21162,21163,21165,21167,21169,21171,21173,21175,21177,21179,21181,21184,21186,21188,21191,21194,21197,21200],{"class":222,"line":644},[220,21164,343],{"class":264},[220,21166,20980],{"class":420},[220,21168,21125],{"class":226},[220,21170,353],{"class":260},[220,21172,743],{"class":264},[220,21174,21132],{"class":420},[220,21176,4836],{"class":264},[220,21178,21137],{"class":226},[220,21180,21140],{"class":264},[220,21182,21183],{"class":230},"\"starSDF\"",[220,21185,6566],{"class":264},[220,21187,21148],{"class":420},[220,21189,21190],{"class":264},", sides: ",[220,21192,21193],{"class":420},"6",[220,21195,21196],{"class":264},", innerRatio: ",[220,21198,21199],{"class":420},"0.45",[220,21201,21151],{"class":264},[220,21203,21204],{"class":222,"line":650},[220,21205,647],{"emptyLinePlaceholder":194},[220,21207,21208],{"class":222,"line":656},[220,21209,21210],{"class":609},"\u002F\u002F Rounded rectangle\n",[220,21212,21213,21215,21217,21219,21221,21223,21225,21227,21229,21231,21234,21237,21239,21241,21244,21247,21250],{"class":222,"line":673},[220,21214,343],{"class":264},[220,21216,20984],{"class":420},[220,21218,21125],{"class":226},[220,21220,353],{"class":260},[220,21222,743],{"class":264},[220,21224,21132],{"class":420},[220,21226,4836],{"class":264},[220,21228,21137],{"class":226},[220,21230,21140],{"class":264},[220,21232,21233],{"class":230},"\"roundedRectSDF\"",[220,21235,21236],{"class":264},", width: ",[220,21238,8249],{"class":420},[220,21240,811],{"class":264},[220,21242,21243],{"class":420},"0.25",[220,21245,21246],{"class":264},", rounding: ",[220,21248,21249],{"class":420},"0.06",[220,21251,21151],{"class":264},[212,21253,21254],{"className":468,"code":21109,"language":469,"meta":178,"style":178},[99,21255,21256,21260,21288,21292,21296,21332,21336,21340],{"__ignoreMap":178},[220,21257,21258],{"class":222,"line":223},[220,21259,21116],{"class":609},[220,21261,21262,21264,21266,21268,21270,21272,21274,21276,21278,21280,21282,21284,21286],{"class":222,"line":179},[220,21263,343],{"class":264},[220,21265,15466],{"class":420},[220,21267,21125],{"class":226},[220,21269,353],{"class":260},[220,21271,743],{"class":264},[220,21273,21132],{"class":420},[220,21275,4836],{"class":264},[220,21277,21137],{"class":226},[220,21279,21140],{"class":264},[220,21281,21143],{"class":230},[220,21283,6566],{"class":264},[220,21285,21148],{"class":420},[220,21287,21151],{"class":264},[220,21289,21290],{"class":222,"line":389},[220,21291,647],{"emptyLinePlaceholder":194},[220,21293,21294],{"class":222,"line":399},[220,21295,21160],{"class":609},[220,21297,21298,21300,21302,21304,21306,21308,21310,21312,21314,21316,21318,21320,21322,21324,21326,21328,21330],{"class":222,"line":644},[220,21299,343],{"class":264},[220,21301,20980],{"class":420},[220,21303,21125],{"class":226},[220,21305,353],{"class":260},[220,21307,743],{"class":264},[220,21309,21132],{"class":420},[220,21311,4836],{"class":264},[220,21313,21137],{"class":226},[220,21315,21140],{"class":264},[220,21317,21183],{"class":230},[220,21319,6566],{"class":264},[220,21321,21148],{"class":420},[220,21323,21190],{"class":264},[220,21325,21193],{"class":420},[220,21327,21196],{"class":264},[220,21329,21199],{"class":420},[220,21331,21151],{"class":264},[220,21333,21334],{"class":222,"line":650},[220,21335,647],{"emptyLinePlaceholder":194},[220,21337,21338],{"class":222,"line":656},[220,21339,21210],{"class":609},[220,21341,21342,21344,21346,21348,21350,21352,21354,21356,21358,21360,21362,21364,21366,21368,21370,21372,21374],{"class":222,"line":673},[220,21343,343],{"class":264},[220,21345,20984],{"class":420},[220,21347,21125],{"class":226},[220,21349,353],{"class":260},[220,21351,743],{"class":264},[220,21353,21132],{"class":420},[220,21355,4836],{"class":264},[220,21357,21137],{"class":226},[220,21359,21140],{"class":264},[220,21361,21233],{"class":230},[220,21363,21236],{"class":264},[220,21365,8249],{"class":420},[220,21367,811],{"class":264},[220,21369,21243],{"class":420},[220,21371,21246],{"class":264},[220,21373,21249],{"class":420},[220,21375,21151],{"class":264},[212,21377,21378],{"className":468,"code":21109,"language":469,"meta":178,"style":178},[99,21379,21380,21384,21412,21416,21420,21456,21460,21464],{"__ignoreMap":178},[220,21381,21382],{"class":222,"line":223},[220,21383,21116],{"class":609},[220,21385,21386,21388,21390,21392,21394,21396,21398,21400,21402,21404,21406,21408,21410],{"class":222,"line":179},[220,21387,343],{"class":264},[220,21389,15466],{"class":420},[220,21391,21125],{"class":226},[220,21393,353],{"class":260},[220,21395,743],{"class":264},[220,21397,21132],{"class":420},[220,21399,4836],{"class":264},[220,21401,21137],{"class":226},[220,21403,21140],{"class":264},[220,21405,21143],{"class":230},[220,21407,6566],{"class":264},[220,21409,21148],{"class":420},[220,21411,21151],{"class":264},[220,21413,21414],{"class":222,"line":389},[220,21415,647],{"emptyLinePlaceholder":194},[220,21417,21418],{"class":222,"line":399},[220,21419,21160],{"class":609},[220,21421,21422,21424,21426,21428,21430,21432,21434,21436,21438,21440,21442,21444,21446,21448,21450,21452,21454],{"class":222,"line":644},[220,21423,343],{"class":264},[220,21425,20980],{"class":420},[220,21427,21125],{"class":226},[220,21429,353],{"class":260},[220,21431,743],{"class":264},[220,21433,21132],{"class":420},[220,21435,4836],{"class":264},[220,21437,21137],{"class":226},[220,21439,21140],{"class":264},[220,21441,21183],{"class":230},[220,21443,6566],{"class":264},[220,21445,21148],{"class":420},[220,21447,21190],{"class":264},[220,21449,21193],{"class":420},[220,21451,21196],{"class":264},[220,21453,21199],{"class":420},[220,21455,21151],{"class":264},[220,21457,21458],{"class":222,"line":650},[220,21459,647],{"emptyLinePlaceholder":194},[220,21461,21462],{"class":222,"line":656},[220,21463,21210],{"class":609},[220,21465,21466,21468,21470,21472,21474,21476,21478,21480,21482,21484,21486,21488,21490,21492,21494,21496,21498],{"class":222,"line":673},[220,21467,343],{"class":264},[220,21469,20984],{"class":420},[220,21471,21125],{"class":226},[220,21473,353],{"class":260},[220,21475,743],{"class":264},[220,21477,21132],{"class":420},[220,21479,4836],{"class":264},[220,21481,21137],{"class":226},[220,21483,21140],{"class":264},[220,21485,21233],{"class":230},[220,21487,21236],{"class":264},[220,21489,8249],{"class":420},[220,21491,811],{"class":264},[220,21493,21243],{"class":420},[220,21495,21246],{"class":264},[220,21497,21249],{"class":420},[220,21499,21151],{"class":264},[212,21501,21503],{"className":251,"code":21502,"language":253,"meta":178,"style":178},"\u002F\u002F Circle (default)\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shape: { type: 'circleSDF', radius: 0.35 } } }\n ]\n})\n\n\u002F\u002F Six-pointed star\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Neon', props: { shape: { type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 } } }\n ]\n})\n\n\u002F\u002F Rounded rectangle\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Emboss', props: { shape: { type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 } } }\n ]\n})\n",[99,21504,21505,21509,21523,21527,21547,21551,21555,21559,21563,21577,21581,21607,21611,21615,21619,21623,21637,21641,21667,21671],{"__ignoreMap":178},[220,21506,21507],{"class":222,"line":223},[220,21508,21116],{"class":609},[220,21510,21511,21513,21515,21517,21519,21521],{"class":222,"line":179},[220,21512,1735],{"class":260},[220,21514,1738],{"class":420},[220,21516,1741],{"class":260},[220,21518,1744],{"class":260},[220,21520,1747],{"class":226},[220,21522,1750],{"class":264},[220,21524,21525],{"class":222,"line":389},[220,21526,1765],{"class":264},[220,21528,21529,21531,21534,21537,21540,21542,21544],{"class":222,"line":399},[220,21530,1770],{"class":264},[220,21532,21533],{"class":230},"'Glass'",[220,21535,21536],{"class":264},", props: { shape: { type: ",[220,21538,21539],{"class":230},"'circleSDF'",[220,21541,6566],{"class":264},[220,21543,21148],{"class":420},[220,21545,21546],{"class":264}," } } }\n",[220,21548,21549],{"class":222,"line":644},[220,21550,1787],{"class":264},[220,21552,21553],{"class":222,"line":650},[220,21554,1792],{"class":264},[220,21556,21557],{"class":222,"line":656},[220,21558,647],{"emptyLinePlaceholder":194},[220,21560,21561],{"class":222,"line":673},[220,21562,21160],{"class":609},[220,21564,21565,21567,21569,21571,21573,21575],{"class":222,"line":682},[220,21566,1735],{"class":260},[220,21568,1738],{"class":420},[220,21570,1741],{"class":260},[220,21572,1744],{"class":260},[220,21574,1747],{"class":226},[220,21576,1750],{"class":264},[220,21578,21579],{"class":222,"line":691},[220,21580,1765],{"class":264},[220,21582,21583,21585,21588,21590,21593,21595,21597,21599,21601,21603,21605],{"class":222,"line":696},[220,21584,1770],{"class":264},[220,21586,21587],{"class":230},"'Neon'",[220,21589,21536],{"class":264},[220,21591,21592],{"class":230},"'starSDF'",[220,21594,6566],{"class":264},[220,21596,21148],{"class":420},[220,21598,21190],{"class":264},[220,21600,21193],{"class":420},[220,21602,21196],{"class":264},[220,21604,21199],{"class":420},[220,21606,21546],{"class":264},[220,21608,21609],{"class":222,"line":702},[220,21610,1787],{"class":264},[220,21612,21613],{"class":222,"line":718},[220,21614,1792],{"class":264},[220,21616,21617],{"class":222,"line":727},[220,21618,647],{"emptyLinePlaceholder":194},[220,21620,21621],{"class":222,"line":2664},[220,21622,21210],{"class":609},[220,21624,21625,21627,21629,21631,21633,21635],{"class":222,"line":3522},[220,21626,1735],{"class":260},[220,21628,1738],{"class":420},[220,21630,1741],{"class":260},[220,21632,1744],{"class":260},[220,21634,1747],{"class":226},[220,21636,1750],{"class":264},[220,21638,21639],{"class":222,"line":9662},[220,21640,1765],{"class":264},[220,21642,21643,21645,21648,21650,21653,21655,21657,21659,21661,21663,21665],{"class":222,"line":9673},[220,21644,1770],{"class":264},[220,21646,21647],{"class":230},"'Emboss'",[220,21649,21536],{"class":264},[220,21651,21652],{"class":230},"'roundedRectSDF'",[220,21654,21236],{"class":264},[220,21656,8249],{"class":420},[220,21658,811],{"class":264},[220,21660,21243],{"class":420},[220,21662,21246],{"class":264},[220,21664,21249],{"class":420},[220,21666,21546],{"class":264},[220,21668,21669],{"class":222,"line":9678},[220,21670,1787],{"class":264},[220,21672,21673],{"class":222,"line":10999},[220,21674,1792],{"class":264},[4509,21676],{},[23,21678,21680],{"id":21679},"_2d-shapes","2D shapes",[15,21682,21683,21684,15413,21686,21688],{},"These are flat profiles defined directly in the field. All sizes are in UV space (roughly ",[99,21685,8673],{},[99,21687,7754],{}," from the centre to an edge), and rotations are in degrees.",[3262,21690,21692,21693],{"id":21691},"circle-circlesdf","Circle — ",[99,21694,21026],{},[15,21696,21697],{},"A perfect circle. The default shape for all shape effects.",[1794,21699,21700,21712],{},[1797,21701,21702],{},[1800,21703,21704,21706,21708,21710],{},[1803,21705,17914],{},[1803,21707,15187],{},[1803,21709,15190],{},[1803,21711,1808],{},[1810,21713,21714],{},[1800,21715,21716,21720,21724,21728],{},[1815,21717,21718],{},[99,21719,11683],{},[1815,21721,21722],{},[99,21723,15300],{},[1815,21725,21726],{},[99,21727,21148],{},[1815,21729,21730],{},"Circle radius in UV space",[212,21732,21734],{"className":4564,"code":21733,"language":4566,"meta":178,"style":178},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[99,21735,21736],{"__ignoreMap":178},[220,21737,21738,21741,21744,21746,21748,21750,21753,21755,21757],{"class":222,"line":223},[220,21739,21740],{"class":264},"{ ",[220,21742,21743],{"class":420},"\"type\"",[220,21745,4601],{"class":264},[220,21747,21143],{"class":230},[220,21749,1895],{"class":264},[220,21751,21752],{"class":420},"\"radius\"",[220,21754,4601],{"class":264},[220,21756,21148],{"class":420},[220,21758,5671],{"class":264},[4509,21760],{},[3262,21762,21764,21765],{"id":21763},"ellipse-ellipsesdf","Ellipse — ",[99,21766,21767],{},"ellipseSDF",[15,21769,21770],{},"A stretched circle with independent horizontal and vertical radii.",[1794,21772,21773,21785],{},[1797,21774,21775],{},[1800,21776,21777,21779,21781,21783],{},[1803,21778,17914],{},[1803,21780,15187],{},[1803,21782,15190],{},[1803,21784,1808],{},[1810,21786,21787,21804,21821],{},[1800,21788,21789,21793,21797,21801],{},[1815,21790,21791],{},[99,21792,15164],{},[1815,21794,21795],{},[99,21796,15300],{},[1815,21798,21799],{},[99,21800,8249],{},[1815,21802,21803],{},"Horizontal radius (semi-major axis)",[1800,21805,21806,21810,21814,21818],{},[1815,21807,21808],{},[99,21809,15167],{},[1815,21811,21812],{},[99,21813,15300],{},[1815,21815,21816],{},[99,21817,21243],{},[1815,21819,21820],{},"Vertical radius (semi-minor axis)",[1800,21822,21823,21827,21831,21835],{},[1815,21824,21825],{},[99,21826,11835],{},[1815,21828,21829],{},[99,21830,15300],{},[1815,21832,21833],{},[99,21834,8673],{},[1815,21836,21837],{},"Rotation in degrees",[212,21839,21841],{"className":4564,"code":21840,"language":4566,"meta":178,"style":178},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[99,21842,21843],{"__ignoreMap":178},[220,21844,21845,21847,21849,21851,21854,21856,21859,21861,21863,21865,21868,21870,21872,21874,21877,21879,21881],{"class":222,"line":223},[220,21846,21740],{"class":264},[220,21848,21743],{"class":420},[220,21850,4601],{"class":264},[220,21852,21853],{"class":230},"\"ellipseSDF\"",[220,21855,1895],{"class":264},[220,21857,21858],{"class":420},"\"width\"",[220,21860,4601],{"class":264},[220,21862,8249],{"class":420},[220,21864,1895],{"class":264},[220,21866,21867],{"class":420},"\"height\"",[220,21869,4601],{"class":264},[220,21871,21243],{"class":420},[220,21873,1895],{"class":264},[220,21875,21876],{"class":420},"\"rotation\"",[220,21878,4601],{"class":264},[220,21880,8673],{"class":420},[220,21882,5671],{"class":264},[4509,21884],{},[3262,21886,21888,21889],{"id":21887},"polygon-polygonsdf","Polygon — ",[99,21890,21891],{},"polygonSDF",[15,21893,21894],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1794,21896,21897,21909],{},[1797,21898,21899],{},[1800,21900,21901,21903,21905,21907],{},[1803,21902,17914],{},[1803,21904,15187],{},[1803,21906,15190],{},[1803,21908,1808],{},[1810,21910,21911,21928,21946,21964],{},[1800,21912,21913,21917,21921,21925],{},[1815,21914,21915],{},[99,21916,11683],{},[1815,21918,21919],{},[99,21920,15300],{},[1815,21922,21923],{},[99,21924,21148],{},[1815,21926,21927],{},"Distance from center to nearest edge midpoint",[1800,21929,21930,21935,21939,21943],{},[1815,21931,21932],{},[99,21933,21934],{},"sides",[1815,21936,21937],{},[99,21938,15300],{},[1815,21940,21941],{},[99,21942,21193],{},[1815,21944,21945],{},"Number of sides",[1800,21947,21948,21953,21957,21961],{},[1815,21949,21950],{},[99,21951,21952],{},"rounding",[1815,21954,21955],{},[99,21956,15300],{},[1815,21958,21959],{},[99,21960,8673],{},[1815,21962,21963],{},"Corner rounding amount",[1800,21965,21966,21970,21974,21978],{},[1815,21967,21968],{},[99,21969,11835],{},[1815,21971,21972],{},[99,21973,15300],{},[1815,21975,21976],{},[99,21977,8673],{},[1815,21979,21837],{},[212,21981,21983],{"className":4564,"code":21982,"language":4566,"meta":178,"style":178},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,21984,21985],{"__ignoreMap":178},[220,21986,21987,21989,21991,21993,21996,21998,22000,22002,22005,22007,22010,22012,22014,22016,22019,22021,22024,22026,22028,22030,22032],{"class":222,"line":223},[220,21988,21740],{"class":264},[220,21990,21743],{"class":420},[220,21992,4601],{"class":264},[220,21994,21995],{"class":230},"\"polygonSDF\"",[220,21997,1895],{"class":264},[220,21999,21752],{"class":420},[220,22001,4601],{"class":264},[220,22003,22004],{"class":420},"0.3",[220,22006,1895],{"class":264},[220,22008,22009],{"class":420},"\"sides\"",[220,22011,4601],{"class":264},[220,22013,21193],{"class":420},[220,22015,1895],{"class":264},[220,22017,22018],{"class":420},"\"rounding\"",[220,22020,4601],{"class":264},[220,22022,22023],{"class":420},"0.05",[220,22025,1895],{"class":264},[220,22027,21876],{"class":420},[220,22029,4601],{"class":264},[220,22031,8673],{"class":420},[220,22033,5671],{"class":264},[4509,22035],{},[3262,22037,22039,22040],{"id":22038},"star-starsdf","Star — ",[99,22041,22042],{},"starSDF",[15,22044,22045],{},"An N-pointed star with configurable inner\u002Fouter radius ratio.",[1794,22047,22048,22060],{},[1797,22049,22050],{},[1800,22051,22052,22054,22056,22058],{},[1803,22053,17914],{},[1803,22055,15187],{},[1803,22057,15190],{},[1803,22059,1808],{},[1810,22061,22062,22079,22097,22119],{},[1800,22063,22064,22068,22072,22076],{},[1815,22065,22066],{},[99,22067,11683],{},[1815,22069,22070],{},[99,22071,15300],{},[1815,22073,22074],{},[99,22075,21148],{},[1815,22077,22078],{},"Outer tip radius",[1800,22080,22081,22085,22089,22094],{},[1815,22082,22083],{},[99,22084,21934],{},[1815,22086,22087],{},[99,22088,15300],{},[1815,22090,22091],{},[99,22092,22093],{},"5",[1815,22095,22096],{},"Number of points",[1800,22098,22099,22104,22108,22113],{},[1815,22100,22101],{},[99,22102,22103],{},"innerRatio",[1815,22105,22106],{},[99,22107,15300],{},[1815,22109,22110],{},[99,22111,22112],{},"0.382",[1815,22114,22115,22116,22118],{},"Inner vertex radius as a fraction of outer radius — ",[99,22117,22112],{}," gives the classic golden-ratio 5-star",[1800,22120,22121,22125,22129,22133],{},[1815,22122,22123],{},[99,22124,11835],{},[1815,22126,22127],{},[99,22128,15300],{},[1815,22130,22131],{},[99,22132,8673],{},[1815,22134,21837],{},[212,22136,22138],{"className":4564,"code":22137,"language":4566,"meta":178,"style":178},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[99,22139,22140],{"__ignoreMap":178},[220,22141,22142,22144,22146,22148,22150,22152,22154,22156,22158,22160,22162,22164,22166,22168,22171,22173,22175,22177,22179,22181,22183],{"class":222,"line":223},[220,22143,21740],{"class":264},[220,22145,21743],{"class":420},[220,22147,4601],{"class":264},[220,22149,21183],{"class":230},[220,22151,1895],{"class":264},[220,22153,21752],{"class":420},[220,22155,4601],{"class":264},[220,22157,21148],{"class":420},[220,22159,1895],{"class":264},[220,22161,22009],{"class":420},[220,22163,4601],{"class":264},[220,22165,22093],{"class":420},[220,22167,1895],{"class":264},[220,22169,22170],{"class":420},"\"innerRatio\"",[220,22172,4601],{"class":264},[220,22174,22112],{"class":420},[220,22176,1895],{"class":264},[220,22178,21876],{"class":420},[220,22180,4601],{"class":264},[220,22182,8673],{"class":420},[220,22184,5671],{"class":264},[4509,22186],{},[3262,22188,22190,22191],{"id":22189},"flower-flowersdf","Flower — ",[99,22192,22193],{},"flowerSDF",[15,22195,22196],{},"An N-petalled flower with smooth concave valleys between petals.",[1794,22198,22199,22211],{},[1797,22200,22201],{},[1800,22202,22203,22205,22207,22209],{},[1803,22204,17914],{},[1803,22206,15187],{},[1803,22208,15190],{},[1803,22210,1808],{},[1810,22212,22213,22230,22247,22270],{},[1800,22214,22215,22219,22223,22227],{},[1815,22216,22217],{},[99,22218,11683],{},[1815,22220,22221],{},[99,22222,15300],{},[1815,22224,22225],{},[99,22226,21148],{},[1815,22228,22229],{},"Outer petal tip radius",[1800,22231,22232,22236,22240,22244],{},[1815,22233,22234],{},[99,22235,21934],{},[1815,22237,22238],{},[99,22239,15300],{},[1815,22241,22242],{},[99,22243,21193],{},[1815,22245,22246],{},"Number of petals",[1800,22248,22249,22253,22257,22261],{},[1815,22250,22251],{},[99,22252,22103],{},[1815,22254,22255],{},[99,22256,15300],{},[1815,22258,22259],{},[99,22260,7754],{},[1815,22262,22263,22264,22266,22267,22269],{},"Valley depth — ",[99,22265,16976],{}," = deep narrow valleys, ",[99,22268,6299],{}," = subtle scalloped edge",[1800,22271,22272,22276,22280,22284],{},[1815,22273,22274],{},[99,22275,11835],{},[1815,22277,22278],{},[99,22279,15300],{},[1815,22281,22282],{},[99,22283,8673],{},[1815,22285,21837],{},[212,22287,22289],{"className":4564,"code":22288,"language":4566,"meta":178,"style":178},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[99,22290,22291],{"__ignoreMap":178},[220,22292,22293,22295,22297,22299,22302,22304,22306,22308,22310,22312,22314,22316,22318,22320,22322,22324,22326,22328,22330,22332,22334],{"class":222,"line":223},[220,22294,21740],{"class":264},[220,22296,21743],{"class":420},[220,22298,4601],{"class":264},[220,22300,22301],{"class":230},"\"flowerSDF\"",[220,22303,1895],{"class":264},[220,22305,21752],{"class":420},[220,22307,4601],{"class":264},[220,22309,21148],{"class":420},[220,22311,1895],{"class":264},[220,22313,22009],{"class":420},[220,22315,4601],{"class":264},[220,22317,21193],{"class":420},[220,22319,1895],{"class":264},[220,22321,22170],{"class":420},[220,22323,4601],{"class":264},[220,22325,7754],{"class":420},[220,22327,1895],{"class":264},[220,22329,21876],{"class":420},[220,22331,4601],{"class":264},[220,22333,8673],{"class":420},[220,22335,5671],{"class":264},[4509,22337],{},[3262,22339,22341,22342],{"id":22340},"ring-ringsdf","Ring — ",[99,22343,22344],{},"ringSDF",[15,22346,22347],{},"A hollow ring \u002F annulus. The effect applies to the ring material itself, not the interior hole.",[1794,22349,22350,22362],{},[1797,22351,22352],{},[1800,22353,22354,22356,22358,22360],{},[1803,22355,17914],{},[1803,22357,15187],{},[1803,22359,15190],{},[1803,22361,1808],{},[1810,22363,22364,22381],{},[1800,22365,22366,22370,22374,22378],{},[1815,22367,22368],{},[99,22369,11683],{},[1815,22371,22372],{},[99,22373,15300],{},[1815,22375,22376],{},[99,22377,22004],{},[1815,22379,22380],{},"Distance from center to the ring centerline",[1800,22382,22383,22388,22392,22397],{},[1815,22384,22385],{},[99,22386,22387],{},"thickness",[1815,22389,22390],{},[99,22391,15300],{},[1815,22393,22394],{},[99,22395,22396],{},"0.08",[1815,22398,22399],{},"Half-width of the ring on each side of the centerline",[212,22401,22403],{"className":4564,"code":22402,"language":4566,"meta":178,"style":178},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[99,22404,22405],{"__ignoreMap":178},[220,22406,22407,22409,22411,22413,22416,22418,22420,22422,22424,22426,22429,22431,22433],{"class":222,"line":223},[220,22408,21740],{"class":264},[220,22410,21743],{"class":420},[220,22412,4601],{"class":264},[220,22414,22415],{"class":230},"\"ringSDF\"",[220,22417,1895],{"class":264},[220,22419,21752],{"class":420},[220,22421,4601],{"class":264},[220,22423,22004],{"class":420},[220,22425,1895],{"class":264},[220,22427,22428],{"class":420},"\"thickness\"",[220,22430,4601],{"class":264},[220,22432,22396],{"class":420},[220,22434,5671],{"class":264},[4509,22436],{},[3262,22438,22440,22441],{"id":22439},"cross-crosssdf","Cross — ",[99,22442,22443],{},"crossSDF",[15,22445,22446],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1794,22448,22449,22461],{},[1797,22450,22451],{},[1800,22452,22453,22455,22457,22459],{},[1803,22454,17914],{},[1803,22456,15187],{},[1803,22458,15190],{},[1803,22460,1808],{},[1810,22462,22463,22480,22497,22514],{},[1800,22464,22465,22469,22473,22477],{},[1815,22466,22467],{},[99,22468,11691],{},[1815,22470,22471],{},[99,22472,15300],{},[1815,22474,22475],{},[99,22476,21243],{},[1815,22478,22479],{},"Arm half-length",[1800,22481,22482,22486,22490,22494],{},[1815,22483,22484],{},[99,22485,22387],{},[1815,22487,22488],{},[99,22489,15300],{},[1815,22491,22492],{},[99,22493,22396],{},[1815,22495,22496],{},"Arm half-width",[1800,22498,22499,22503,22507,22511],{},[1815,22500,22501],{},[99,22502,21952],{},[1815,22504,22505],{},[99,22506,15300],{},[1815,22508,22509],{},[99,22510,19684],{},[1815,22512,22513],{},"Corner rounding at arm ends and intersections",[1800,22515,22516,22520,22524,22528],{},[1815,22517,22518],{},[99,22519,11835],{},[1815,22521,22522],{},[99,22523,15300],{},[1815,22525,22526],{},[99,22527,8673],{},[1815,22529,22530,22531,22533],{},"Rotation in degrees — use ",[99,22532,1295],{}," for an X shape",[212,22535,22537],{"className":4564,"code":22536,"language":4566,"meta":178,"style":178},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[99,22538,22539],{"__ignoreMap":178},[220,22540,22541,22543,22545,22547,22550,22552,22555,22557,22559,22561,22563,22565,22567,22569,22571,22573,22575,22577,22579,22581,22583],{"class":222,"line":223},[220,22542,21740],{"class":264},[220,22544,21743],{"class":420},[220,22546,4601],{"class":264},[220,22548,22549],{"class":230},"\"crossSDF\"",[220,22551,1895],{"class":264},[220,22553,22554],{"class":420},"\"size\"",[220,22556,4601],{"class":264},[220,22558,21243],{"class":420},[220,22560,1895],{"class":264},[220,22562,22428],{"class":420},[220,22564,4601],{"class":264},[220,22566,22396],{"class":420},[220,22568,1895],{"class":264},[220,22570,22018],{"class":420},[220,22572,4601],{"class":264},[220,22574,19684],{"class":420},[220,22576,1895],{"class":264},[220,22578,21876],{"class":420},[220,22580,4601],{"class":264},[220,22582,8673],{"class":420},[220,22584,5671],{"class":264},[4509,22586],{},[3262,22588,22590,22591],{"id":22589},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[99,22592,22593],{},"roundedRectSDF",[15,22595,22596],{},"A rectangle with uniformly rounded corners.",[1794,22598,22599,22611],{},[1797,22600,22601],{},[1800,22602,22603,22605,22607,22609],{},[1803,22604,17914],{},[1803,22606,15187],{},[1803,22608,15190],{},[1803,22610,1808],{},[1810,22612,22613,22630,22647,22664],{},[1800,22614,22615,22619,22623,22627],{},[1815,22616,22617],{},[99,22618,15164],{},[1815,22620,22621],{},[99,22622,15300],{},[1815,22624,22625],{},[99,22626,21148],{},[1815,22628,22629],{},"Half-width",[1800,22631,22632,22636,22640,22644],{},[1815,22633,22634],{},[99,22635,15167],{},[1815,22637,22638],{},[99,22639,15300],{},[1815,22641,22642],{},[99,22643,21243],{},[1815,22645,22646],{},"Half-height",[1800,22648,22649,22653,22657,22661],{},[1815,22650,22651],{},[99,22652,21952],{},[1815,22654,22655],{},[99,22656,15300],{},[1815,22658,22659],{},[99,22660,22023],{},[1815,22662,22663],{},"Corner rounding radius",[1800,22665,22666,22670,22674,22678],{},[1815,22667,22668],{},[99,22669,11835],{},[1815,22671,22672],{},[99,22673,15300],{},[1815,22675,22676],{},[99,22677,8673],{},[1815,22679,21837],{},[212,22681,22683],{"className":4564,"code":22682,"language":4566,"meta":178,"style":178},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,22684,22685],{"__ignoreMap":178},[220,22686,22687,22689,22691,22693,22695,22697,22699,22701,22703,22705,22707,22709,22711,22713,22715,22717,22719,22721,22723,22725,22727],{"class":222,"line":223},[220,22688,21740],{"class":264},[220,22690,21743],{"class":420},[220,22692,4601],{"class":264},[220,22694,21233],{"class":230},[220,22696,1895],{"class":264},[220,22698,21858],{"class":420},[220,22700,4601],{"class":264},[220,22702,21148],{"class":420},[220,22704,1895],{"class":264},[220,22706,21867],{"class":420},[220,22708,4601],{"class":264},[220,22710,21243],{"class":420},[220,22712,1895],{"class":264},[220,22714,22018],{"class":420},[220,22716,4601],{"class":264},[220,22718,22023],{"class":420},[220,22720,1895],{"class":264},[220,22722,21876],{"class":420},[220,22724,4601],{"class":264},[220,22726,8673],{"class":420},[220,22728,5671],{"class":264},[4509,22730],{},[3262,22732,22734,22735],{"id":22733},"vesica-vesicasdf","Vesica — ",[99,22736,22737],{},"vesicaSDF",[15,22739,22740],{},"A lens \u002F eye shape formed by the intersection of two overlapping circles.",[1794,22742,22743,22755],{},[1797,22744,22745],{},[1800,22746,22747,22749,22751,22753],{},[1803,22748,17914],{},[1803,22750,15187],{},[1803,22752,15190],{},[1803,22754,1808],{},[1810,22756,22757,22774,22798],{},[1800,22758,22759,22763,22767,22771],{},[1815,22760,22761],{},[99,22762,11683],{},[1815,22764,22765],{},[99,22766,15300],{},[1815,22768,22769],{},[99,22770,21148],{},[1815,22772,22773],{},"Radius of each circle",[1800,22775,22776,22781,22785,22789],{},[1815,22777,22778],{},[99,22779,22780],{},"spread",[1815,22782,22783],{},[99,22784,15300],{},[1815,22786,22787],{},[99,22788,7754],{},[1815,22790,22791,22792,22794,22795,22797],{},"Half-distance between circle centers as a fraction of radius — ",[99,22793,8673],{}," = a single circle, ",[99,22796,8677],{}," = an infinitely thin lens",[1800,22799,22800,22804,22808,22812],{},[1815,22801,22802],{},[99,22803,11835],{},[1815,22805,22806],{},[99,22807,15300],{},[1815,22809,22810],{},[99,22811,8673],{},[1815,22813,21837],{},[212,22815,22817],{"className":4564,"code":22816,"language":4566,"meta":178,"style":178},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[99,22818,22819],{"__ignoreMap":178},[220,22820,22821,22823,22825,22827,22830,22832,22834,22836,22838,22840,22843,22845,22847,22849,22851,22853,22855],{"class":222,"line":223},[220,22822,21740],{"class":264},[220,22824,21743],{"class":420},[220,22826,4601],{"class":264},[220,22828,22829],{"class":230},"\"vesicaSDF\"",[220,22831,1895],{"class":264},[220,22833,21752],{"class":420},[220,22835,4601],{"class":264},[220,22837,21148],{"class":420},[220,22839,1895],{"class":264},[220,22841,22842],{"class":420},"\"spread\"",[220,22844,4601],{"class":264},[220,22846,7754],{"class":420},[220,22848,1895],{"class":264},[220,22850,21876],{"class":420},[220,22852,4601],{"class":264},[220,22854,8673],{"class":420},[220,22856,5671],{"class":264},[4509,22858],{},[3262,22860,22862,22863],{"id":22861},"crescent-crescentsdf","Crescent — ",[99,22864,22865],{},"crescentSDF",[15,22867,22868],{},"A crescent \u002F moon shape formed by subtracting a smaller offset circle from a larger one.",[1794,22870,22871,22883],{},[1797,22872,22873],{},[1800,22874,22875,22877,22879,22881],{},[1803,22876,17914],{},[1803,22878,15187],{},[1803,22880,15190],{},[1803,22882,1808],{},[1810,22884,22885,22902,22920,22937],{},[1800,22886,22887,22891,22895,22899],{},[1815,22888,22889],{},[99,22890,11683],{},[1815,22892,22893],{},[99,22894,15300],{},[1815,22896,22897],{},[99,22898,21148],{},[1815,22900,22901],{},"Outer circle radius",[1800,22903,22904,22908,22912,22917],{},[1815,22905,22906],{},[99,22907,22103],{},[1815,22909,22910],{},[99,22911,15300],{},[1815,22913,22914],{},[99,22915,22916],{},"0.75",[1815,22918,22919],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1800,22921,22922,22926,22930,22934],{},[1815,22923,22924],{},[99,22925,18064],{},[1815,22927,22928],{},[99,22929,15300],{},[1815,22931,22932],{},[99,22933,18192],{},[1815,22935,22936],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1800,22938,22939,22943,22947,22951],{},[1815,22940,22941],{},[99,22942,11835],{},[1815,22944,22945],{},[99,22946,15300],{},[1815,22948,22949],{},[99,22950,8673],{},[1815,22952,21837],{},[212,22954,22956],{"className":4564,"code":22955,"language":4566,"meta":178,"style":178},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[99,22957,22958],{"__ignoreMap":178},[220,22959,22960,22962,22964,22966,22969,22971,22973,22975,22977,22979,22981,22983,22985,22987,22990,22992,22994,22996,22998,23000,23002],{"class":222,"line":223},[220,22961,21740],{"class":264},[220,22963,21743],{"class":420},[220,22965,4601],{"class":264},[220,22967,22968],{"class":230},"\"crescentSDF\"",[220,22970,1895],{"class":264},[220,22972,21752],{"class":420},[220,22974,4601],{"class":264},[220,22976,21148],{"class":420},[220,22978,1895],{"class":264},[220,22980,22170],{"class":420},[220,22982,4601],{"class":264},[220,22984,22916],{"class":420},[220,22986,1895],{"class":264},[220,22988,22989],{"class":420},"\"offset\"",[220,22991,4601],{"class":264},[220,22993,18192],{"class":420},[220,22995,1895],{"class":264},[220,22997,21876],{"class":420},[220,22999,4601],{"class":264},[220,23001,8673],{"class":420},[220,23003,5671],{"class":264},[4509,23005],{},[3262,23007,23009,23010],{"id":23008},"trapezoid-trapezoidsdf","Trapezoid — ",[99,23011,23012],{},"trapezoidSDF",[15,23014,23015],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1794,23017,23018,23030],{},[1797,23019,23020],{},[1800,23021,23022,23024,23026,23028],{},[1803,23023,17914],{},[1803,23025,15187],{},[1803,23027,15190],{},[1803,23029,1808],{},[1810,23031,23032,23050,23068,23084],{},[1800,23033,23034,23039,23043,23047],{},[1815,23035,23036],{},[99,23037,23038],{},"bottomWidth",[1815,23040,23041],{},[99,23042,15300],{},[1815,23044,23045],{},[99,23046,21148],{},[1815,23048,23049],{},"Bottom edge half-width",[1800,23051,23052,23057,23061,23065],{},[1815,23053,23054],{},[99,23055,23056],{},"topWidth",[1815,23058,23059],{},[99,23060,15300],{},[1815,23062,23063],{},[99,23064,16976],{},[1815,23066,23067],{},"Top edge half-width",[1800,23069,23070,23074,23078,23082],{},[1815,23071,23072],{},[99,23073,15167],{},[1815,23075,23076],{},[99,23077,15300],{},[1815,23079,23080],{},[99,23081,21243],{},[1815,23083,22646],{},[1800,23085,23086,23090,23094,23098],{},[1815,23087,23088],{},[99,23089,11835],{},[1815,23091,23092],{},[99,23093,15300],{},[1815,23095,23096],{},[99,23097,8673],{},[1815,23099,21837],{},[212,23101,23103],{"className":4564,"code":23102,"language":4566,"meta":178,"style":178},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[99,23104,23105],{"__ignoreMap":178},[220,23106,23107,23109,23111,23113,23116,23118,23121,23123,23125,23127,23130,23132,23134,23136,23138,23140,23142,23144,23146,23148,23150],{"class":222,"line":223},[220,23108,21740],{"class":264},[220,23110,21743],{"class":420},[220,23112,4601],{"class":264},[220,23114,23115],{"class":230},"\"trapezoidSDF\"",[220,23117,1895],{"class":264},[220,23119,23120],{"class":420},"\"bottomWidth\"",[220,23122,4601],{"class":264},[220,23124,21148],{"class":420},[220,23126,1895],{"class":264},[220,23128,23129],{"class":420},"\"topWidth\"",[220,23131,4601],{"class":264},[220,23133,16976],{"class":420},[220,23135,1895],{"class":264},[220,23137,21867],{"class":420},[220,23139,4601],{"class":264},[220,23141,21243],{"class":420},[220,23143,1895],{"class":264},[220,23145,21876],{"class":420},[220,23147,4601],{"class":264},[220,23149,8673],{"class":420},[220,23151,5671],{"class":264},[4509,23153],{},[23,23155,23157],{"id":23156},"_3d-shapes","3D shapes",[15,23159,23160,23161,1895,23163,1895,23165,1895,23167,20981,23170,23173,23174,23177],{},"3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (",[159,23162,15466],{},[159,23164,20980],{},[159,23166,20984],{},[159,23168,23169],{},"ThinFilm",[159,23171,23172],{},"Crystal",") use this to refract, shade, and crease according to the real surface, giving you a physically based 3D object lit inside your design. (",[159,23175,23176],{},"SmokeFill"," treats every shape as a flat fill.)",[15,23179,23180,23181,1895,23184,20981,23187,23190],{},"Every 3D shape is positioned with three independent rotations — ",[99,23182,23183],{},"rotX",[99,23185,23186],{},"rotY",[99,23188,23189],{},"rotZ"," — given in degrees. All sizes are in UV space.",[15805,23192,23193],{},[15,23194,23195,23198,23199,23202,23203,23205,23206,23208,23209,23211],{},[159,23196,23197],{},"Rotation order:"," 3D rotations don't commute — the order they're combined in changes the result. Shaders applies them as a fixed Euler sequence: ",[159,23200,23201],{},"Y first, then X, then Z",". Because the sequence is fixed, the order you list the props in the config has no effect — only the angle values matter. If a combination of angles doesn't land the way you expect, adjust the values rather than trying to reorder them. As a rough mental model, ",[99,23204,23186],{}," is a turntable spin (left\u002Fright), ",[99,23207,23183],{}," tips the shape toward or away from you, and ",[99,23210,23189],{}," rolls it in the screen plane.",[15805,23213,23214,23234],{},[15,23215,23216,23219,23220,23223,23224,23226,23227,1550,23230,23233],{},[159,23217,23218],{},"Tip:"," The size and rotation sub-props of a 3D shape can each be a ",[56,23221,23222],{"href":17272},"dynamic prop"," instead of a number. Set a rotation to an ",[99,23225,17361],{}," config looping from ",[99,23228,23229],{},"-180",[99,23231,23232],{},"180"," for a continuous spin, with no animation code:",[212,23235,23237],{"className":4564,"code":23236,"language":4566,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12,\n \"rotY\": { \"type\": \"auto-animate\", \"mode\": \"loop\", \"outputMin\": -180, \"outputMax\": 180, \"speed\": 0.5 } }\n",[99,23238,23239,23269],{"__ignoreMap":178},[220,23240,23241,23243,23245,23247,23250,23252,23254,23256,23258,23260,23263,23265,23267],{"class":222,"line":223},[220,23242,21740],{"class":264},[220,23244,21743],{"class":420},[220,23246,4601],{"class":264},[220,23248,23249],{"class":230},"\"torus3D\"",[220,23251,1895],{"class":264},[220,23253,21752],{"class":420},[220,23255,4601],{"class":264},[220,23257,22004],{"class":420},[220,23259,1895],{"class":264},[220,23261,23262],{"class":420},"\"tube\"",[220,23264,4601],{"class":264},[220,23266,18220],{"class":420},[220,23268,1760],{"class":264},[220,23270,23271,23274,23276,23278,23280,23283,23285,23288,23290,23293,23295,23298,23300,23302,23304,23307,23309,23311,23313,23316,23318,23320],{"class":222,"line":179},[220,23272,23273],{"class":420}," \"rotY\"",[220,23275,5660],{"class":264},[220,23277,21743],{"class":420},[220,23279,4601],{"class":264},[220,23281,23282],{"class":230},"\"auto-animate\"",[220,23284,1895],{"class":264},[220,23286,23287],{"class":420},"\"mode\"",[220,23289,4601],{"class":264},[220,23291,23292],{"class":230},"\"loop\"",[220,23294,1895],{"class":264},[220,23296,23297],{"class":420},"\"outputMin\"",[220,23299,4601],{"class":264},[220,23301,23229],{"class":420},[220,23303,1895],{"class":264},[220,23305,23306],{"class":420},"\"outputMax\"",[220,23308,4601],{"class":264},[220,23310,23232],{"class":420},[220,23312,1895],{"class":264},[220,23314,23315],{"class":420},"\"speed\"",[220,23317,4601],{"class":264},[220,23319,7754],{"class":420},[220,23321,1782],{"class":264},[3262,23323,23325,23326],{"id":23324},"sphere-sphere3d","Sphere — ",[99,23327,21029],{},[15,23329,23330],{},"A perfect sphere.",[1794,23332,23333,23345],{},[1797,23334,23335],{},[1800,23336,23337,23339,23341,23343],{},[1803,23338,17914],{},[1803,23340,15187],{},[1803,23342,15190],{},[1803,23344,1808],{},[1810,23346,23347,23364],{},[1800,23348,23349,23353,23357,23361],{},[1815,23350,23351],{},[99,23352,11683],{},[1815,23354,23355],{},[99,23356,15300],{},[1815,23358,23359],{},[99,23360,21148],{},[1815,23362,23363],{},"Sphere radius",[1800,23365,23366,23374,23378,23382],{},[1815,23367,23368,15712,23370,15712,23372],{},[99,23369,23183],{},[99,23371,23186],{},[99,23373,23189],{},[1815,23375,23376],{},[99,23377,15300],{},[1815,23379,23380],{},[99,23381,8673],{},[1815,23383,23384],{},"Rotation around each axis, in degrees",[212,23386,23388],{"className":4564,"code":23387,"language":4566,"meta":178,"style":178},"{ \"type\": \"sphere3D\", \"radius\": 0.35, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23389,23390],{"__ignoreMap":178},[220,23391,23392,23394,23396,23398,23401,23403,23405,23407,23409,23411,23414,23416,23418,23420,23423,23425,23427,23429,23432,23434,23436],{"class":222,"line":223},[220,23393,21740],{"class":264},[220,23395,21743],{"class":420},[220,23397,4601],{"class":264},[220,23399,23400],{"class":230},"\"sphere3D\"",[220,23402,1895],{"class":264},[220,23404,21752],{"class":420},[220,23406,4601],{"class":264},[220,23408,21148],{"class":420},[220,23410,1895],{"class":264},[220,23412,23413],{"class":420},"\"rotX\"",[220,23415,4601],{"class":264},[220,23417,8673],{"class":420},[220,23419,1895],{"class":264},[220,23421,23422],{"class":420},"\"rotY\"",[220,23424,4601],{"class":264},[220,23426,8673],{"class":420},[220,23428,1895],{"class":264},[220,23430,23431],{"class":420},"\"rotZ\"",[220,23433,4601],{"class":264},[220,23435,8673],{"class":420},[220,23437,5671],{"class":264},[4509,23439],{},[3262,23441,23443,23444],{"id":23442},"cube-cube3d","Cube — ",[99,23445,23446],{},"cube3D",[15,23448,23449],{},"A box with independent dimensions and rounded edges.",[1794,23451,23452,23464],{},[1797,23453,23454],{},[1800,23455,23456,23458,23460,23462],{},[1803,23457,17914],{},[1803,23459,15187],{},[1803,23461,15190],{},[1803,23463,1808],{},[1810,23465,23466,23485,23503,23521,23538],{},[1800,23467,23468,23473,23477,23482],{},[1815,23469,23470],{},[99,23471,23472],{},"sizeX",[1815,23474,23475],{},[99,23476,15300],{},[1815,23478,23479],{},[99,23480,23481],{},"0.27",[1815,23483,23484],{},"Half-width (X)",[1800,23486,23487,23492,23496,23500],{},[1815,23488,23489],{},[99,23490,23491],{},"sizeY",[1815,23493,23494],{},[99,23495,15300],{},[1815,23497,23498],{},[99,23499,23481],{},[1815,23501,23502],{},"Half-height (Y)",[1800,23504,23505,23510,23514,23518],{},[1815,23506,23507],{},[99,23508,23509],{},"sizeZ",[1815,23511,23512],{},[99,23513,15300],{},[1815,23515,23516],{},[99,23517,23481],{},[1815,23519,23520],{},"Half-depth (Z)",[1800,23522,23523,23527,23531,23535],{},[1815,23524,23525],{},[99,23526,21952],{},[1815,23528,23529],{},[99,23530,15300],{},[1815,23532,23533],{},[99,23534,19684],{},[1815,23536,23537],{},"Edge\u002Fcorner rounding",[1800,23539,23540,23548,23552,23562],{},[1815,23541,23542,15712,23544,15712,23546],{},[99,23543,23183],{},[99,23545,23186],{},[99,23547,23189],{},[1815,23549,23550],{},[99,23551,15300],{},[1815,23553,23554,15282,23557,15282,23560],{},[99,23555,23556],{},"25",[99,23558,23559],{},"35",[99,23561,8673],{},[1815,23563,23384],{},[212,23565,23567],{"className":4564,"code":23566,"language":4566,"meta":178,"style":178},"{ \"type\": \"cube3D\", \"sizeX\": 0.27, \"sizeY\": 0.27, \"sizeZ\": 0.27, \"rounding\": 0.02, \"rotX\": 25, \"rotY\": 35, \"rotZ\": 0 }\n",[99,23568,23569],{"__ignoreMap":178},[220,23570,23571,23573,23575,23577,23580,23582,23585,23587,23589,23591,23594,23596,23598,23600,23603,23605,23607,23609,23611,23613,23615,23617,23619,23621,23623,23625,23627,23629,23631,23633,23635,23637,23639],{"class":222,"line":223},[220,23572,21740],{"class":264},[220,23574,21743],{"class":420},[220,23576,4601],{"class":264},[220,23578,23579],{"class":230},"\"cube3D\"",[220,23581,1895],{"class":264},[220,23583,23584],{"class":420},"\"sizeX\"",[220,23586,4601],{"class":264},[220,23588,23481],{"class":420},[220,23590,1895],{"class":264},[220,23592,23593],{"class":420},"\"sizeY\"",[220,23595,4601],{"class":264},[220,23597,23481],{"class":420},[220,23599,1895],{"class":264},[220,23601,23602],{"class":420},"\"sizeZ\"",[220,23604,4601],{"class":264},[220,23606,23481],{"class":420},[220,23608,1895],{"class":264},[220,23610,22018],{"class":420},[220,23612,4601],{"class":264},[220,23614,19684],{"class":420},[220,23616,1895],{"class":264},[220,23618,23413],{"class":420},[220,23620,4601],{"class":264},[220,23622,23556],{"class":420},[220,23624,1895],{"class":264},[220,23626,23422],{"class":420},[220,23628,4601],{"class":264},[220,23630,23559],{"class":420},[220,23632,1895],{"class":264},[220,23634,23431],{"class":420},[220,23636,4601],{"class":264},[220,23638,8673],{"class":420},[220,23640,5671],{"class":264},[4509,23642],{},[3262,23644,23646,23647],{"id":23645},"torus-torus3d","Torus — ",[99,23648,23649],{},"torus3D",[15,23651,23652],{},"A doughnut ring.",[1794,23654,23655,23667],{},[1797,23656,23657],{},[1800,23658,23659,23661,23663,23665],{},[1803,23660,17914],{},[1803,23662,15187],{},[1803,23664,15190],{},[1803,23666,1808],{},[1810,23668,23669,23686,23704],{},[1800,23670,23671,23675,23679,23683],{},[1815,23672,23673],{},[99,23674,11683],{},[1815,23676,23677],{},[99,23678,15300],{},[1815,23680,23681],{},[99,23682,22004],{},[1815,23684,23685],{},"Ring radius (centre to tube centreline)",[1800,23687,23688,23693,23697,23701],{},[1815,23689,23690],{},[99,23691,23692],{},"tube",[1815,23694,23695],{},[99,23696,15300],{},[1815,23698,23699],{},[99,23700,18220],{},[1815,23702,23703],{},"Tube radius",[1800,23705,23706,23714,23718,23727],{},[1815,23707,23708,15712,23710,15712,23712],{},[99,23709,23183],{},[99,23711,23186],{},[99,23713,23189],{},[1815,23715,23716],{},[99,23717,15300],{},[1815,23719,23720,15282,23723,15282,23725],{},[99,23721,23722],{},"55",[99,23724,8673],{},[99,23726,8673],{},[1815,23728,23384],{},[212,23730,23732],{"className":4564,"code":23731,"language":4566,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12, \"rotX\": 55, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23733,23734],{"__ignoreMap":178},[220,23735,23736,23738,23740,23742,23744,23746,23748,23750,23752,23754,23756,23758,23760,23762,23764,23766,23768,23770,23772,23774,23776,23778,23780,23782,23784],{"class":222,"line":223},[220,23737,21740],{"class":264},[220,23739,21743],{"class":420},[220,23741,4601],{"class":264},[220,23743,23249],{"class":230},[220,23745,1895],{"class":264},[220,23747,21752],{"class":420},[220,23749,4601],{"class":264},[220,23751,22004],{"class":420},[220,23753,1895],{"class":264},[220,23755,23262],{"class":420},[220,23757,4601],{"class":264},[220,23759,18220],{"class":420},[220,23761,1895],{"class":264},[220,23763,23413],{"class":420},[220,23765,4601],{"class":264},[220,23767,23722],{"class":420},[220,23769,1895],{"class":264},[220,23771,23422],{"class":420},[220,23773,4601],{"class":264},[220,23775,8673],{"class":420},[220,23777,1895],{"class":264},[220,23779,23431],{"class":420},[220,23781,4601],{"class":264},[220,23783,8673],{"class":420},[220,23785,5671],{"class":264},[4509,23787],{},[3262,23789,23791,23792],{"id":23790},"octahedron-octahedron3d","Octahedron — ",[99,23793,23794],{},"octahedron3D",[15,23796,23797],{},"An eight-faced diamond\u002Fbipyramid.",[1794,23799,23800,23812],{},[1797,23801,23802],{},[1800,23803,23804,23806,23808,23810],{},[1803,23805,17914],{},[1803,23807,15187],{},[1803,23809,15190],{},[1803,23811,1808],{},[1810,23813,23814,23832],{},[1800,23815,23816,23820,23824,23829],{},[1815,23817,23818],{},[99,23819,11683],{},[1815,23821,23822],{},[99,23823,15300],{},[1815,23825,23826],{},[99,23827,23828],{},"0.42",[1815,23830,23831],{},"Distance from centre to each vertex",[1800,23833,23834,23842,23846,23855],{},[1815,23835,23836,15712,23838,15712,23840],{},[99,23837,23183],{},[99,23839,23186],{},[99,23841,23189],{},[1815,23843,23844],{},[99,23845,15300],{},[1815,23847,23848,15282,23851,15282,23853],{},[99,23849,23850],{},"10",[99,23852,23556],{},[99,23854,8673],{},[1815,23856,23384],{},[212,23858,23860],{"className":4564,"code":23859,"language":4566,"meta":178,"style":178},"{ \"type\": \"octahedron3D\", \"radius\": 0.42, \"rotX\": 10, \"rotY\": 25, \"rotZ\": 0 }\n",[99,23861,23862],{"__ignoreMap":178},[220,23863,23864,23866,23868,23870,23873,23875,23877,23879,23881,23883,23885,23887,23889,23891,23893,23895,23897,23899,23901,23903,23905],{"class":222,"line":223},[220,23865,21740],{"class":264},[220,23867,21743],{"class":420},[220,23869,4601],{"class":264},[220,23871,23872],{"class":230},"\"octahedron3D\"",[220,23874,1895],{"class":264},[220,23876,21752],{"class":420},[220,23878,4601],{"class":264},[220,23880,23828],{"class":420},[220,23882,1895],{"class":264},[220,23884,23413],{"class":420},[220,23886,4601],{"class":264},[220,23888,23850],{"class":420},[220,23890,1895],{"class":264},[220,23892,23422],{"class":420},[220,23894,4601],{"class":264},[220,23896,23556],{"class":420},[220,23898,1895],{"class":264},[220,23900,23431],{"class":420},[220,23902,4601],{"class":264},[220,23904,8673],{"class":420},[220,23906,5671],{"class":264},[4509,23908],{},[3262,23910,23912,23913],{"id":23911},"cylinder-cylinder3d","Cylinder — ",[99,23914,23915],{},"cylinder3D",[15,23917,23918],{},"A capped cylinder with rounded edges.",[1794,23920,23921,23933],{},[1797,23922,23923],{},[1800,23924,23925,23927,23929,23931],{},[1803,23926,17914],{},[1803,23928,15187],{},[1803,23930,15190],{},[1803,23932,1808],{},[1810,23934,23935,23953,23970,23987],{},[1800,23936,23937,23941,23945,23950],{},[1815,23938,23939],{},[99,23940,11683],{},[1815,23942,23943],{},[99,23944,15300],{},[1815,23946,23947],{},[99,23948,23949],{},"0.22",[1815,23951,23952],{},"Cylinder radius",[1800,23954,23955,23959,23963,23968],{},[1815,23956,23957],{},[99,23958,15167],{},[1815,23960,23961],{},[99,23962,15300],{},[1815,23964,23965],{},[99,23966,23967],{},"0.26",[1815,23969,22646],{},[1800,23971,23972,23976,23980,23984],{},[1815,23973,23974],{},[99,23975,21952],{},[1815,23977,23978],{},[99,23979,15300],{},[1815,23981,23982],{},[99,23983,19684],{},[1815,23985,23986],{},"Edge rounding",[1800,23988,23989,23997,24001,24011],{},[1815,23990,23991,15712,23993,15712,23995],{},[99,23992,23183],{},[99,23994,23186],{},[99,23996,23189],{},[1815,23998,23999],{},[99,24000,15300],{},[1815,24002,24003,15282,24006,15282,24008],{},[99,24004,24005],{},"60",[99,24007,8673],{},[99,24009,24010],{},"30",[1815,24012,23384],{},[212,24014,24016],{"className":4564,"code":24015,"language":4566,"meta":178,"style":178},"{ \"type\": \"cylinder3D\", \"radius\": 0.22, \"height\": 0.26, \"rounding\": 0.02, \"rotX\": 60, \"rotY\": 0, \"rotZ\": 30 }\n",[99,24017,24018],{"__ignoreMap":178},[220,24019,24020,24022,24024,24026,24029,24031,24033,24035,24037,24039,24041,24043,24045,24047,24049,24051,24053,24055,24057,24059,24061,24063,24065,24067,24069,24071,24073,24075,24077],{"class":222,"line":223},[220,24021,21740],{"class":264},[220,24023,21743],{"class":420},[220,24025,4601],{"class":264},[220,24027,24028],{"class":230},"\"cylinder3D\"",[220,24030,1895],{"class":264},[220,24032,21752],{"class":420},[220,24034,4601],{"class":264},[220,24036,23949],{"class":420},[220,24038,1895],{"class":264},[220,24040,21867],{"class":420},[220,24042,4601],{"class":264},[220,24044,23967],{"class":420},[220,24046,1895],{"class":264},[220,24048,22018],{"class":420},[220,24050,4601],{"class":264},[220,24052,19684],{"class":420},[220,24054,1895],{"class":264},[220,24056,23413],{"class":420},[220,24058,4601],{"class":264},[220,24060,24005],{"class":420},[220,24062,1895],{"class":264},[220,24064,23422],{"class":420},[220,24066,4601],{"class":264},[220,24068,8673],{"class":420},[220,24070,1895],{"class":264},[220,24072,23431],{"class":420},[220,24074,4601],{"class":264},[220,24076,24010],{"class":420},[220,24078,5671],{"class":264},[4509,24080],{},[3262,24082,24084,24085],{"id":24083},"capsule-capsule3d","Capsule — ",[99,24086,24087],{},"capsule3D",[15,24089,24090],{},"A cylinder with hemispherical caps (a pill).",[1794,24092,24093,24105],{},[1797,24094,24095],{},[1800,24096,24097,24099,24101,24103],{},[1803,24098,17914],{},[1803,24100,15187],{},[1803,24102,15190],{},[1803,24104,1808],{},[1810,24106,24107,24125,24142],{},[1800,24108,24109,24113,24117,24122],{},[1815,24110,24111],{},[99,24112,11683],{},[1815,24114,24115],{},[99,24116,15300],{},[1815,24118,24119],{},[99,24120,24121],{},"0.16",[1815,24123,24124],{},"Capsule radius",[1800,24126,24127,24131,24135,24139],{},[1815,24128,24129],{},[99,24130,15167],{},[1815,24132,24133],{},[99,24134,15300],{},[1815,24136,24137],{},[99,24138,16976],{},[1815,24140,24141],{},"Half-length of the straight section",[1800,24143,24144,24152,24156,24164],{},[1815,24145,24146,15712,24148,15712,24150],{},[99,24147,23183],{},[99,24149,23186],{},[99,24151,23189],{},[1815,24153,24154],{},[99,24155,15300],{},[1815,24157,24158,15282,24160,15282,24162],{},[99,24159,8673],{},[99,24161,8673],{},[99,24163,23559],{},[1815,24165,23384],{},[212,24167,24169],{"className":4564,"code":24168,"language":4566,"meta":178,"style":178},"{ \"type\": \"capsule3D\", \"radius\": 0.16, \"height\": 0.2, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 35 }\n",[99,24170,24171],{"__ignoreMap":178},[220,24172,24173,24175,24177,24179,24182,24184,24186,24188,24190,24192,24194,24196,24198,24200,24202,24204,24206,24208,24210,24212,24214,24216,24218,24220,24222],{"class":222,"line":223},[220,24174,21740],{"class":264},[220,24176,21743],{"class":420},[220,24178,4601],{"class":264},[220,24180,24181],{"class":230},"\"capsule3D\"",[220,24183,1895],{"class":264},[220,24185,21752],{"class":420},[220,24187,4601],{"class":264},[220,24189,24121],{"class":420},[220,24191,1895],{"class":264},[220,24193,21867],{"class":420},[220,24195,4601],{"class":264},[220,24197,16976],{"class":420},[220,24199,1895],{"class":264},[220,24201,23413],{"class":420},[220,24203,4601],{"class":264},[220,24205,8673],{"class":420},[220,24207,1895],{"class":264},[220,24209,23422],{"class":420},[220,24211,4601],{"class":264},[220,24213,8673],{"class":420},[220,24215,1895],{"class":264},[220,24217,23431],{"class":420},[220,24219,4601],{"class":264},[220,24221,23559],{"class":420},[220,24223,5671],{"class":264},[4509,24225],{},[3262,24227,24229,24230],{"id":24228},"cone-cone3d","Cone — ",[99,24231,24232],{},"cone3D",[15,24234,24235,24236,24239,24240,24242],{},"A cone or truncated cone. Set ",[99,24237,24238],{},"topRadius"," above ",[99,24241,8673],{}," to flatten the tip into a frustum.",[1794,24244,24245,24257],{},[1797,24246,24247],{},[1800,24248,24249,24251,24253,24255],{},[1803,24250,17914],{},[1803,24252,15187],{},[1803,24254,15190],{},[1803,24256,1808],{},[1810,24258,24259,24276,24296,24312],{},[1800,24260,24261,24265,24269,24273],{},[1815,24262,24263],{},[99,24264,11683],{},[1815,24266,24267],{},[99,24268,15300],{},[1815,24270,24271],{},[99,24272,22004],{},[1815,24274,24275],{},"Base radius",[1800,24277,24278,24282,24286,24290],{},[1815,24279,24280],{},[99,24281,24238],{},[1815,24283,24284],{},[99,24285,15300],{},[1815,24287,24288],{},[99,24289,19684],{},[1815,24291,24292,24293,24295],{},"Top radius — ",[99,24294,8673],{}," for a sharp point",[1800,24297,24298,24302,24306,24310],{},[1815,24299,24300],{},[99,24301,15167],{},[1815,24303,24304],{},[99,24305,15300],{},[1815,24307,24308],{},[99,24309,22004],{},[1815,24311,22646],{},[1800,24313,24314,24322,24326,24335],{},[1815,24315,24316,15712,24318,15712,24320],{},[99,24317,23183],{},[99,24319,23186],{},[99,24321,23189],{},[1815,24323,24324],{},[99,24325,15300],{},[1815,24327,24328,15282,24330,15282,24332],{},[99,24329,23556],{},[99,24331,8673],{},[99,24333,24334],{},"15",[1815,24336,23384],{},[212,24338,24340],{"className":4564,"code":24339,"language":4566,"meta":178,"style":178},"{ \"type\": \"cone3D\", \"radius\": 0.3, \"topRadius\": 0.02, \"height\": 0.3, \"rotX\": 25, \"rotY\": 0, \"rotZ\": 15 }\n",[99,24341,24342],{"__ignoreMap":178},[220,24343,24344,24346,24348,24350,24353,24355,24357,24359,24361,24363,24366,24368,24370,24372,24374,24376,24378,24380,24382,24384,24386,24388,24390,24392,24394,24396,24398,24400,24402],{"class":222,"line":223},[220,24345,21740],{"class":264},[220,24347,21743],{"class":420},[220,24349,4601],{"class":264},[220,24351,24352],{"class":230},"\"cone3D\"",[220,24354,1895],{"class":264},[220,24356,21752],{"class":420},[220,24358,4601],{"class":264},[220,24360,22004],{"class":420},[220,24362,1895],{"class":264},[220,24364,24365],{"class":420},"\"topRadius\"",[220,24367,4601],{"class":264},[220,24369,19684],{"class":420},[220,24371,1895],{"class":264},[220,24373,21867],{"class":420},[220,24375,4601],{"class":264},[220,24377,22004],{"class":420},[220,24379,1895],{"class":264},[220,24381,23413],{"class":420},[220,24383,4601],{"class":264},[220,24385,23556],{"class":420},[220,24387,1895],{"class":264},[220,24389,23422],{"class":420},[220,24391,4601],{"class":264},[220,24393,8673],{"class":420},[220,24395,1895],{"class":264},[220,24397,23431],{"class":420},[220,24399,4601],{"class":264},[220,24401,24334],{"class":420},[220,24403,5671],{"class":264},[4509,24405],{},[3262,24407,24409,24410],{"id":24408},"pyramid-pyramid3d","Pyramid — ",[99,24411,24412],{},"pyramid3D",[15,24414,24415],{},"A square-based pyramid.",[1794,24417,24418,24430],{},[1797,24419,24420],{},[1800,24421,24422,24424,24426,24428],{},[1803,24423,17914],{},[1803,24425,15187],{},[1803,24427,15190],{},[1803,24429,1808],{},[1810,24431,24432,24449,24466],{},[1800,24433,24434,24438,24442,24446],{},[1815,24435,24436],{},[99,24437,11691],{},[1815,24439,24440],{},[99,24441,15300],{},[1815,24443,24444],{},[99,24445,22004],{},[1815,24447,24448],{},"Base half-width",[1800,24450,24451,24455,24459,24463],{},[1815,24452,24453],{},[99,24454,15167],{},[1815,24456,24457],{},[99,24458,15300],{},[1815,24460,24461],{},[99,24462,21199],{},[1815,24464,24465],{},"Apex height",[1800,24467,24468,24476,24480,24489],{},[1815,24469,24470,15712,24472,15712,24474],{},[99,24471,23183],{},[99,24473,23186],{},[99,24475,23189],{},[1815,24477,24478],{},[99,24479,15300],{},[1815,24481,24482,15282,24485,15282,24487],{},[99,24483,24484],{},"-10",[99,24486,24010],{},[99,24488,8673],{},[1815,24490,23384],{},[212,24492,24494],{"className":4564,"code":24493,"language":4566,"meta":178,"style":178},"{ \"type\": \"pyramid3D\", \"size\": 0.3, \"height\": 0.45, \"rotX\": -10, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24495,24496],{"__ignoreMap":178},[220,24497,24498,24500,24502,24504,24507,24509,24511,24513,24515,24517,24519,24521,24523,24525,24527,24529,24531,24533,24535,24537,24539,24541,24543,24545,24547],{"class":222,"line":223},[220,24499,21740],{"class":264},[220,24501,21743],{"class":420},[220,24503,4601],{"class":264},[220,24505,24506],{"class":230},"\"pyramid3D\"",[220,24508,1895],{"class":264},[220,24510,22554],{"class":420},[220,24512,4601],{"class":264},[220,24514,22004],{"class":420},[220,24516,1895],{"class":264},[220,24518,21867],{"class":420},[220,24520,4601],{"class":264},[220,24522,21199],{"class":420},[220,24524,1895],{"class":264},[220,24526,23413],{"class":420},[220,24528,4601],{"class":264},[220,24530,24484],{"class":420},[220,24532,1895],{"class":264},[220,24534,23422],{"class":420},[220,24536,4601],{"class":264},[220,24538,24010],{"class":420},[220,24540,1895],{"class":264},[220,24542,23431],{"class":420},[220,24544,4601],{"class":264},[220,24546,8673],{"class":420},[220,24548,5671],{"class":264},[4509,24550],{},[3262,24552,24554,24555],{"id":24553},"prism-prism3d","Prism — ",[99,24556,24557],{},"prism3D",[15,24559,24560],{},"A hexagonal prism.",[1794,24562,24563,24575],{},[1797,24564,24565],{},[1800,24566,24567,24569,24571,24573],{},[1803,24568,17914],{},[1803,24570,15187],{},[1803,24572,15190],{},[1803,24574,1808],{},[1810,24576,24577,24595,24613],{},[1800,24578,24579,24583,24587,24592],{},[1815,24580,24581],{},[99,24582,11683],{},[1815,24584,24585],{},[99,24586,15300],{},[1815,24588,24589],{},[99,24590,24591],{},"0.28",[1815,24593,24594],{},"Hexagon radius",[1800,24596,24597,24601,24605,24610],{},[1815,24598,24599],{},[99,24600,15167],{},[1815,24602,24603],{},[99,24604,15300],{},[1815,24606,24607],{},[99,24608,24609],{},"0.14",[1815,24611,24612],{},"Half-depth of the prism",[1800,24614,24615,24623,24627,24635],{},[1815,24616,24617,15712,24619,15712,24621],{},[99,24618,23183],{},[99,24620,23186],{},[99,24622,23189],{},[1815,24624,24625],{},[99,24626,15300],{},[1815,24628,24629,15282,24631,15282,24633],{},[99,24630,23556],{},[99,24632,24010],{},[99,24634,8673],{},[1815,24636,23384],{},[212,24638,24640],{"className":4564,"code":24639,"language":4566,"meta":178,"style":178},"{ \"type\": \"prism3D\", \"radius\": 0.28, \"height\": 0.14, \"rotX\": 25, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24641,24642],{"__ignoreMap":178},[220,24643,24644,24646,24648,24650,24653,24655,24657,24659,24661,24663,24665,24667,24669,24671,24673,24675,24677,24679,24681,24683,24685,24687,24689,24691,24693],{"class":222,"line":223},[220,24645,21740],{"class":264},[220,24647,21743],{"class":420},[220,24649,4601],{"class":264},[220,24651,24652],{"class":230},"\"prism3D\"",[220,24654,1895],{"class":264},[220,24656,21752],{"class":420},[220,24658,4601],{"class":264},[220,24660,24591],{"class":420},[220,24662,1895],{"class":264},[220,24664,21867],{"class":420},[220,24666,4601],{"class":264},[220,24668,24609],{"class":420},[220,24670,1895],{"class":264},[220,24672,23413],{"class":420},[220,24674,4601],{"class":264},[220,24676,23556],{"class":420},[220,24678,1895],{"class":264},[220,24680,23422],{"class":420},[220,24682,4601],{"class":264},[220,24684,24010],{"class":420},[220,24686,1895],{"class":264},[220,24688,23431],{"class":420},[220,24690,4601],{"class":264},[220,24692,8673],{"class":420},[220,24694,5671],{"class":264},[4509,24696],{},[3262,24698,24700,24701],{"id":24699},"ellipsoid-ellipsoid3d","Ellipsoid — ",[99,24702,24703],{},"ellipsoid3D",[15,24705,24706],{},"A sphere with three independent radii.",[1794,24708,24709,24721],{},[1797,24710,24711],{},[1800,24712,24713,24715,24717,24719],{},[1803,24714,17914],{},[1803,24716,15187],{},[1803,24718,15190],{},[1803,24720,1808],{},[1810,24722,24723,24742,24760,24778],{},[1800,24724,24725,24730,24734,24739],{},[1815,24726,24727],{},[99,24728,24729],{},"radiusX",[1815,24731,24732],{},[99,24733,15300],{},[1815,24735,24736],{},[99,24737,24738],{},"0.38",[1815,24740,24741],{},"Radius along X",[1800,24743,24744,24749,24753,24757],{},[1815,24745,24746],{},[99,24747,24748],{},"radiusY",[1815,24750,24751],{},[99,24752,15300],{},[1815,24754,24755],{},[99,24756,23949],{},[1815,24758,24759],{},"Radius along Y",[1800,24761,24762,24767,24771,24775],{},[1815,24763,24764],{},[99,24765,24766],{},"radiusZ",[1815,24768,24769],{},[99,24770,15300],{},[1815,24772,24773],{},[99,24774,22004],{},[1815,24776,24777],{},"Radius along Z",[1800,24779,24780,24788,24792,24801],{},[1815,24781,24782,15712,24784,15712,24786],{},[99,24783,23183],{},[99,24785,23186],{},[99,24787,23189],{},[1815,24789,24790],{},[99,24791,15300],{},[1815,24793,24794,15282,24796,15282,24798],{},[99,24795,8673],{},[99,24797,8673],{},[99,24799,24800],{},"20",[1815,24802,23384],{},[212,24804,24806],{"className":4564,"code":24805,"language":4566,"meta":178,"style":178},"{ \"type\": \"ellipsoid3D\", \"radiusX\": 0.38, \"radiusY\": 0.22, \"radiusZ\": 0.3, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 20 }\n",[99,24807,24808],{"__ignoreMap":178},[220,24809,24810,24812,24814,24816,24819,24821,24824,24826,24828,24830,24833,24835,24837,24839,24842,24844,24846,24848,24850,24852,24854,24856,24858,24860,24862,24864,24866,24868,24870],{"class":222,"line":223},[220,24811,21740],{"class":264},[220,24813,21743],{"class":420},[220,24815,4601],{"class":264},[220,24817,24818],{"class":230},"\"ellipsoid3D\"",[220,24820,1895],{"class":264},[220,24822,24823],{"class":420},"\"radiusX\"",[220,24825,4601],{"class":264},[220,24827,24738],{"class":420},[220,24829,1895],{"class":264},[220,24831,24832],{"class":420},"\"radiusY\"",[220,24834,4601],{"class":264},[220,24836,23949],{"class":420},[220,24838,1895],{"class":264},[220,24840,24841],{"class":420},"\"radiusZ\"",[220,24843,4601],{"class":264},[220,24845,22004],{"class":420},[220,24847,1895],{"class":264},[220,24849,23413],{"class":420},[220,24851,4601],{"class":264},[220,24853,8673],{"class":420},[220,24855,1895],{"class":264},[220,24857,23422],{"class":420},[220,24859,4601],{"class":264},[220,24861,8673],{"class":420},[220,24863,1895],{"class":264},[220,24865,23431],{"class":420},[220,24867,4601],{"class":264},[220,24869,24800],{"class":420},[220,24871,5671],{"class":264},[4509,24873],{},[3262,24875,24877,24878],{"id":24876},"diamond-diamond3d","Diamond — ",[99,24879,24880],{},"diamond3D",[15,24882,24883,24884,24886],{},"A faceted gemstone with a crown and pavilion — the showpiece shape for the ",[159,24885,23172],{}," effect.",[1794,24888,24889,24901],{},[1797,24890,24891],{},[1800,24892,24893,24895,24897,24899],{},[1803,24894,17914],{},[1803,24896,15187],{},[1803,24898,15190],{},[1803,24900,1808],{},[1810,24902,24903,24920,24937],{},[1800,24904,24905,24909,24913,24917],{},[1815,24906,24907],{},[99,24908,11683],{},[1815,24910,24911],{},[99,24912,15300],{},[1815,24914,24915],{},[99,24916,22004],{},[1815,24918,24919],{},"Girdle radius",[1800,24921,24922,24926,24930,24934],{},[1815,24923,24924],{},[99,24925,15167],{},[1815,24927,24928],{},[99,24929,15300],{},[1815,24931,24932],{},[99,24933,23828],{},[1815,24935,24936],{},"Total height (crown + pavilion)",[1800,24938,24939,24947,24951,24959],{},[1815,24940,24941,15712,24943,15712,24945],{},[99,24942,23183],{},[99,24944,23186],{},[99,24946,23189],{},[1815,24948,24949],{},[99,24950,15300],{},[1815,24952,24953,15282,24955,15282,24957],{},[99,24954,24334],{},[99,24956,8673],{},[99,24958,8673],{},[1815,24960,23384],{},[212,24962,24964],{"className":4564,"code":24963,"language":4566,"meta":178,"style":178},"{ \"type\": \"diamond3D\", \"radius\": 0.3, \"height\": 0.42, \"rotX\": 15, \"rotY\": 0, \"rotZ\": 0 }\n",[99,24965,24966],{"__ignoreMap":178},[220,24967,24968,24970,24972,24974,24977,24979,24981,24983,24985,24987,24989,24991,24993,24995,24997,24999,25001,25003,25005,25007,25009,25011,25013,25015,25017],{"class":222,"line":223},[220,24969,21740],{"class":264},[220,24971,21743],{"class":420},[220,24973,4601],{"class":264},[220,24975,24976],{"class":230},"\"diamond3D\"",[220,24978,1895],{"class":264},[220,24980,21752],{"class":420},[220,24982,4601],{"class":264},[220,24984,22004],{"class":420},[220,24986,1895],{"class":264},[220,24988,21867],{"class":420},[220,24990,4601],{"class":264},[220,24992,23828],{"class":420},[220,24994,1895],{"class":264},[220,24996,23413],{"class":420},[220,24998,4601],{"class":264},[220,25000,24334],{"class":420},[220,25002,1895],{"class":264},[220,25004,23422],{"class":420},[220,25006,4601],{"class":264},[220,25008,8673],{"class":420},[220,25010,1895],{"class":264},[220,25012,23431],{"class":420},[220,25014,4601],{"class":264},[220,25016,8673],{"class":420},[220,25018,5671],{"class":264},[4509,25020],{},[3262,25022,25024,25025],{"id":25023},"link-link3d","Link — ",[99,25026,25027],{},"link3D",[15,25029,25030],{},"A rounded chain link.",[1794,25032,25033,25045],{},[1797,25034,25035],{},[1800,25036,25037,25039,25041,25043],{},[1803,25038,17914],{},[1803,25040,15187],{},[1803,25042,15190],{},[1803,25044,1808],{},[1810,25046,25047,25065,25082,25098],{},[1800,25048,25049,25053,25057,25062],{},[1815,25050,25051],{},[99,25052,11683],{},[1815,25054,25055],{},[99,25056,15300],{},[1815,25058,25059],{},[99,25060,25061],{},"0.18",[1815,25063,25064],{},"Inner radius of the link's curve",[1800,25066,25067,25072,25076,25080],{},[1815,25068,25069],{},[99,25070,25071],{},"length",[1815,25073,25074],{},[99,25075,15300],{},[1815,25077,25078],{},[99,25079,18192],{},[1815,25081,24141],{},[1800,25083,25084,25088,25092,25096],{},[1815,25085,25086],{},[99,25087,23692],{},[1815,25089,25090],{},[99,25091,15300],{},[1815,25093,25094],{},[99,25095,22396],{},[1815,25097,23703],{},[1800,25099,25100,25108,25112,25120],{},[1815,25101,25102,15712,25104,15712,25106],{},[99,25103,23183],{},[99,25105,23186],{},[99,25107,23189],{},[1815,25109,25110],{},[99,25111,15300],{},[1815,25113,25114,15282,25116,15282,25118],{},[99,25115,24800],{},[99,25117,24010],{},[99,25119,8673],{},[1815,25121,23384],{},[212,25123,25125],{"className":4564,"code":25124,"language":4566,"meta":178,"style":178},"{ \"type\": \"link3D\", \"radius\": 0.18, \"length\": 0.15, \"tube\": 0.08, \"rotX\": 20, \"rotY\": 30, \"rotZ\": 0 }\n",[99,25126,25127],{"__ignoreMap":178},[220,25128,25129,25131,25133,25135,25138,25140,25142,25144,25146,25148,25151,25153,25155,25157,25159,25161,25163,25165,25167,25169,25171,25173,25175,25177,25179,25181,25183,25185,25187],{"class":222,"line":223},[220,25130,21740],{"class":264},[220,25132,21743],{"class":420},[220,25134,4601],{"class":264},[220,25136,25137],{"class":230},"\"link3D\"",[220,25139,1895],{"class":264},[220,25141,21752],{"class":420},[220,25143,4601],{"class":264},[220,25145,25061],{"class":420},[220,25147,1895],{"class":264},[220,25149,25150],{"class":420},"\"length\"",[220,25152,4601],{"class":264},[220,25154,18192],{"class":420},[220,25156,1895],{"class":264},[220,25158,23262],{"class":420},[220,25160,4601],{"class":264},[220,25162,22396],{"class":420},[220,25164,1895],{"class":264},[220,25166,23413],{"class":420},[220,25168,4601],{"class":264},[220,25170,24800],{"class":420},[220,25172,1895],{"class":264},[220,25174,23422],{"class":420},[220,25176,4601],{"class":264},[220,25178,24010],{"class":420},[220,25180,1895],{"class":264},[220,25182,23431],{"class":420},[220,25184,4601],{"class":264},[220,25186,8673],{"class":420},[220,25188,5671],{"class":264},[4509,25190],{},[23,25192,25194],{"id":25193},"custom-shapes","Custom shapes",[15,25196,25197],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,25199,25200,25201,25204,25205,25208,25209,25211,25212,25214],{},"To use an SVG shape, set ",[99,25202,25203],{},"shapeSdfUrl"," to the URL of an SDF ",[99,25206,25207],{},".bin"," file. The easiest way to get one is the design editor — upload your SVG there, and the code export includes a ready-to-use hosted ",[99,25210,25207],{}," URL. If you work with the ",[56,25213,4450],{"href":58},", your agent can also generate an SDF from any SVG in your project.",[246,25216,25217,25238,25257,25273,25289],{":tabs":1557},[212,25218,25220],{"className":334,"code":25219,"language":336,"meta":178,"style":178},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" \u002F>\n",[99,25221,25222],{"__ignoreMap":178},[220,25223,25224,25226,25228,25231,25233,25236],{"class":222,"line":223},[220,25225,343],{"class":264},[220,25227,15466],{"class":346},[220,25229,25230],{"class":226}," :shapeSdfUrl",[220,25232,353],{"class":264},[220,25234,25235],{"class":230},"\"myLogoUrl\"",[220,25237,386],{"class":264},[212,25239,25241],{"className":409,"code":25240,"language":411,"meta":178,"style":178},"\u003CGlass shapeSdfUrl={myLogoUrl} \u002F>\n",[99,25242,25243],{"__ignoreMap":178},[220,25244,25245,25247,25249,25252,25254],{"class":222,"line":223},[220,25246,343],{"class":264},[220,25248,15466],{"class":420},[220,25250,25251],{"class":226}," shapeSdfUrl",[220,25253,353],{"class":260},[220,25255,25256],{"class":264},"{myLogoUrl} \u002F>\n",[212,25258,25259],{"className":468,"code":25240,"language":469,"meta":178,"style":178},[99,25260,25261],{"__ignoreMap":178},[220,25262,25263,25265,25267,25269,25271],{"class":222,"line":223},[220,25264,343],{"class":264},[220,25266,15466],{"class":420},[220,25268,25251],{"class":226},[220,25270,353],{"class":260},[220,25272,25256],{"class":264},[212,25274,25275],{"className":468,"code":25240,"language":469,"meta":178,"style":178},[99,25276,25277],{"__ignoreMap":178},[220,25278,25279,25281,25283,25285,25287],{"class":222,"line":223},[220,25280,343],{"class":264},[220,25282,15466],{"class":420},[220,25284,25251],{"class":226},[220,25286,353],{"class":260},[220,25288,25256],{"class":264},[212,25290,25292],{"className":251,"code":25291,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shapeSdfUrl: 'https:\u002F\u002Fexample.com\u002Fmy-logo.bin' } }\n ]\n})\n",[99,25293,25294,25308,25312,25326,25330],{"__ignoreMap":178},[220,25295,25296,25298,25300,25302,25304,25306],{"class":222,"line":223},[220,25297,1735],{"class":260},[220,25299,1738],{"class":420},[220,25301,1741],{"class":260},[220,25303,1744],{"class":260},[220,25305,1747],{"class":226},[220,25307,1750],{"class":264},[220,25309,25310],{"class":222,"line":179},[220,25311,1765],{"class":264},[220,25313,25314,25316,25318,25321,25324],{"class":222,"line":389},[220,25315,1770],{"class":264},[220,25317,21533],{"class":230},[220,25319,25320],{"class":264},", props: { shapeSdfUrl: ",[220,25322,25323],{"class":230},"'https:\u002F\u002Fexample.com\u002Fmy-logo.bin'",[220,25325,1782],{"class":264},[220,25327,25328],{"class":222,"line":399},[220,25329,1787],{"class":264},[220,25331,25332],{"class":222,"line":644},[220,25333,1792],{"class":264},[3262,25335,25337],{"id":25336},"extruding-a-custom-svg-into-3d","Extruding a custom SVG into 3D",[15,25339,25340,25341,25343,25344,25346,25347,1550,25349,25352],{},"Custom SVGs aren't limited to flat profiles — they can be extruded into a solid 3D slab with rounded bevels, so volumetric effects (Glass, Neon, Emboss, ThinFilm, Crystal) wrap around your logo as a real object. Alongside ",[99,25342,25203],{},", set the ",[99,25345,20988],{}," config ",[99,25348,21022],{},[99,25350,25351],{},"svgExtrude3D"," and tune the extrusion:",[1794,25354,25355,25367],{},[1797,25356,25357],{},[1800,25358,25359,25361,25363,25365],{},[1803,25360,17914],{},[1803,25362,15187],{},[1803,25364,15190],{},[1803,25366,1808],{},[1810,25368,25369,25387,25405],{},[1800,25370,25371,25376,25380,25384],{},[1815,25372,25373],{},[99,25374,25375],{},"depth",[1815,25377,25378],{},[99,25379,15300],{},[1815,25381,25382],{},[99,25383,18220],{},[1815,25385,25386],{},"Total thickness of the slab along the view axis",[1800,25388,25389,25394,25398,25402],{},[1815,25390,25391],{},[99,25392,25393],{},"bevel",[1815,25395,25396],{},[99,25397,15300],{},[1815,25399,25400],{},[99,25401,19684],{},[1815,25403,25404],{},"Rounded-edge radius on the extruded sides",[1800,25406,25407,25415,25419,25427],{},[1815,25408,25409,15712,25411,15712,25413],{},[99,25410,23183],{},[99,25412,23186],{},[99,25414,23189],{},[1815,25416,25417],{},[99,25418,15300],{},[1815,25420,25421,15282,25423,15282,25425],{},[99,25422,24334],{},[99,25424,24010],{},[99,25426,8673],{},[1815,25428,23384],{},[15,25430,25431,25432,25434,25435,25437],{},"As with the analytic 3D shapes, these sub-props accept ",[56,25433,23222],{"href":17272}," configs (e.g. an ",[99,25436,17361],{}," rotation for a spinning logo).",[246,25439,25440,25476,25549,25611,25673],{":tabs":1557},[212,25441,25443],{"className":334,"code":25442,"language":336,"meta":178,"style":178},"\u003CGlass\n :shapeSdfUrl=\"myLogoUrl\"\n :shape='{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n\u002F>\n",[99,25444,25445,25452,25462,25472],{"__ignoreMap":178},[220,25446,25447,25449],{"class":222,"line":223},[220,25448,343],{"class":264},[220,25450,25451],{"class":346},"Glass\n",[220,25453,25454,25457,25459],{"class":222,"line":179},[220,25455,25456],{"class":226}," :shapeSdfUrl",[220,25458,353],{"class":264},[220,25460,25461],{"class":230},"\"myLogoUrl\"\n",[220,25463,25464,25467,25469],{"class":222,"line":389},[220,25465,25466],{"class":226}," :shape",[220,25468,353],{"class":264},[220,25470,25471],{"class":230},"'{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n",[220,25473,25474],{"class":222,"line":399},[220,25475,15803],{"class":264},[212,25477,25479],{"className":409,"code":25478,"language":411,"meta":178,"style":178},"\u003CGlass\n shapeSdfUrl={myLogoUrl}\n shape={JSON.stringify({ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 })}\n\u002F>\n",[99,25480,25481,25487,25497,25545],{"__ignoreMap":178},[220,25482,25483,25485],{"class":222,"line":223},[220,25484,343],{"class":264},[220,25486,25451],{"class":420},[220,25488,25489,25492,25494],{"class":222,"line":179},[220,25490,25491],{"class":226}," shapeSdfUrl",[220,25493,353],{"class":260},[220,25495,25496],{"class":264},"{myLogoUrl}\n",[220,25498,25499,25502,25504,25506,25508,25510,25512,25514,25517,25520,25522,25525,25527,25530,25532,25535,25537,25540,25542],{"class":222,"line":389},[220,25500,25501],{"class":226}," shape",[220,25503,353],{"class":260},[220,25505,743],{"class":264},[220,25507,21132],{"class":420},[220,25509,4836],{"class":264},[220,25511,21137],{"class":226},[220,25513,21140],{"class":264},[220,25515,25516],{"class":230},"\"svgExtrude3D\"",[220,25518,25519],{"class":264},", depth: ",[220,25521,18220],{"class":420},[220,25523,25524],{"class":264},", bevel: ",[220,25526,19684],{"class":420},[220,25528,25529],{"class":264},", rotX: ",[220,25531,24334],{"class":420},[220,25533,25534],{"class":264},", rotY: ",[220,25536,24010],{"class":420},[220,25538,25539],{"class":264},", rotZ: ",[220,25541,8673],{"class":420},[220,25543,25544],{"class":264}," })}\n",[220,25546,25547],{"class":222,"line":399},[220,25548,15803],{"class":264},[212,25550,25551],{"className":468,"code":25478,"language":469,"meta":178,"style":178},[99,25552,25553,25559,25567,25607],{"__ignoreMap":178},[220,25554,25555,25557],{"class":222,"line":223},[220,25556,343],{"class":264},[220,25558,25451],{"class":420},[220,25560,25561,25563,25565],{"class":222,"line":179},[220,25562,25491],{"class":226},[220,25564,353],{"class":260},[220,25566,25496],{"class":264},[220,25568,25569,25571,25573,25575,25577,25579,25581,25583,25585,25587,25589,25591,25593,25595,25597,25599,25601,25603,25605],{"class":222,"line":389},[220,25570,25501],{"class":226},[220,25572,353],{"class":260},[220,25574,743],{"class":264},[220,25576,21132],{"class":420},[220,25578,4836],{"class":264},[220,25580,21137],{"class":226},[220,25582,21140],{"class":264},[220,25584,25516],{"class":230},[220,25586,25519],{"class":264},[220,25588,18220],{"class":420},[220,25590,25524],{"class":264},[220,25592,19684],{"class":420},[220,25594,25529],{"class":264},[220,25596,24334],{"class":420},[220,25598,25534],{"class":264},[220,25600,24010],{"class":420},[220,25602,25539],{"class":264},[220,25604,8673],{"class":420},[220,25606,25544],{"class":264},[220,25608,25609],{"class":222,"line":399},[220,25610,15803],{"class":264},[212,25612,25613],{"className":468,"code":25478,"language":469,"meta":178,"style":178},[99,25614,25615,25621,25629,25669],{"__ignoreMap":178},[220,25616,25617,25619],{"class":222,"line":223},[220,25618,343],{"class":264},[220,25620,25451],{"class":420},[220,25622,25623,25625,25627],{"class":222,"line":179},[220,25624,25491],{"class":226},[220,25626,353],{"class":260},[220,25628,25496],{"class":264},[220,25630,25631,25633,25635,25637,25639,25641,25643,25645,25647,25649,25651,25653,25655,25657,25659,25661,25663,25665,25667],{"class":222,"line":389},[220,25632,25501],{"class":226},[220,25634,353],{"class":260},[220,25636,743],{"class":264},[220,25638,21132],{"class":420},[220,25640,4836],{"class":264},[220,25642,21137],{"class":226},[220,25644,21140],{"class":264},[220,25646,25516],{"class":230},[220,25648,25519],{"class":264},[220,25650,18220],{"class":420},[220,25652,25524],{"class":264},[220,25654,19684],{"class":420},[220,25656,25529],{"class":264},[220,25658,24334],{"class":420},[220,25660,25534],{"class":264},[220,25662,24010],{"class":420},[220,25664,25539],{"class":264},[220,25666,8673],{"class":420},[220,25668,25544],{"class":264},[220,25670,25671],{"class":222,"line":399},[220,25672,15803],{"class":264},[212,25674,25676],{"className":251,"code":25675,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Glass',\n props: {\n shapeSdfUrl: 'https:\u002F\u002Fexample.com\u002Fmy-logo.bin',\n shape: { type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }\n }\n }\n ]\n})\n",[99,25677,25678,25692,25696,25700,25708,25712,25721,25751,25755,25759,25763],{"__ignoreMap":178},[220,25679,25680,25682,25684,25686,25688,25690],{"class":222,"line":223},[220,25681,1735],{"class":260},[220,25683,1738],{"class":420},[220,25685,1741],{"class":260},[220,25687,1744],{"class":260},[220,25689,1747],{"class":226},[220,25691,1750],{"class":264},[220,25693,25694],{"class":222,"line":179},[220,25695,1765],{"class":264},[220,25697,25698],{"class":222,"line":389},[220,25699,16379],{"class":264},[220,25701,25702,25704,25706],{"class":222,"line":399},[220,25703,16384],{"class":264},[220,25705,21533],{"class":230},[220,25707,1760],{"class":264},[220,25709,25710],{"class":222,"line":644},[220,25711,16393],{"class":264},[220,25713,25714,25717,25719],{"class":222,"line":650},[220,25715,25716],{"class":264}," shapeSdfUrl: ",[220,25718,25323],{"class":230},[220,25720,1760],{"class":264},[220,25722,25723,25726,25729,25731,25733,25735,25737,25739,25741,25743,25745,25747,25749],{"class":222,"line":656},[220,25724,25725],{"class":264}," shape: { type: ",[220,25727,25728],{"class":230},"'svgExtrude3D'",[220,25730,25519],{"class":264},[220,25732,18220],{"class":420},[220,25734,25524],{"class":264},[220,25736,19684],{"class":420},[220,25738,25529],{"class":264},[220,25740,24334],{"class":420},[220,25742,25534],{"class":264},[220,25744,24010],{"class":420},[220,25746,25539],{"class":264},[220,25748,8673],{"class":420},[220,25750,5671],{"class":264},[220,25752,25753],{"class":222,"line":673},[220,25754,4929],{"class":264},[220,25756,25757],{"class":222,"line":682},[220,25758,4609],{"class":264},[220,25760,25761],{"class":222,"line":691},[220,25762,1787],{"class":264},[220,25764,25765],{"class":222,"line":696},[220,25766,1792],{"class":264},[15,25768,25769,25770,25772,25773,25775],{},"The easiest way to produce a working extruded logo (SDF ",[99,25771,25207],{}," plus the matching ",[99,25774,20988],{}," config) is to set it up visually in the design editor and use the code export.",[1504,25777,14991],{},{"title":178,"searchDepth":179,"depth":179,"links":25779},[25780,25781,25805,25831],{"id":21013,"depth":179,"text":21014},{"id":21679,"depth":179,"text":21680,"children":25782},[25783,25785,25787,25789,25791,25793,25795,25797,25799,25801,25803],{"id":21691,"depth":389,"text":25784},"Circle — circleSDF",{"id":21763,"depth":389,"text":25786},"Ellipse — ellipseSDF",{"id":21887,"depth":389,"text":25788},"Polygon — polygonSDF",{"id":22038,"depth":389,"text":25790},"Star — starSDF",{"id":22189,"depth":389,"text":25792},"Flower — flowerSDF",{"id":22340,"depth":389,"text":25794},"Ring — ringSDF",{"id":22439,"depth":389,"text":25796},"Cross — crossSDF",{"id":22589,"depth":389,"text":25798},"Rounded Rectangle — roundedRectSDF",{"id":22733,"depth":389,"text":25800},"Vesica — vesicaSDF",{"id":22861,"depth":389,"text":25802},"Crescent — crescentSDF",{"id":23008,"depth":389,"text":25804},"Trapezoid — trapezoidSDF",{"id":23156,"depth":179,"text":23157,"children":25806},[25807,25809,25811,25813,25815,25817,25819,25821,25823,25825,25827,25829],{"id":23324,"depth":389,"text":25808},"Sphere — sphere3D",{"id":23442,"depth":389,"text":25810},"Cube — cube3D",{"id":23645,"depth":389,"text":25812},"Torus — torus3D",{"id":23790,"depth":389,"text":25814},"Octahedron — octahedron3D",{"id":23911,"depth":389,"text":25816},"Cylinder — cylinder3D",{"id":24083,"depth":389,"text":25818},"Capsule — capsule3D",{"id":24228,"depth":389,"text":25820},"Cone — cone3D",{"id":24408,"depth":389,"text":25822},"Pyramid — pyramid3D",{"id":24553,"depth":389,"text":25824},"Prism — prism3D",{"id":24699,"depth":389,"text":25826},"Ellipsoid — ellipsoid3D",{"id":24876,"depth":389,"text":25828},"Diamond — diamond3D",{"id":25023,"depth":389,"text":25830},"Link — link3D",{"id":25193,"depth":179,"text":25194,"children":25832},[25833],{"id":25336,"depth":389,"text":25337},"How to use and configure the built-in shape system","shapes",{},"\u002Fdocs\u002Fguide\u002Fshape-effects",{"title":20964,"description":25834},"docs\u002Fguide\u002F8.shape-effects","8voA0zvbOTayfVpXuUNLZbCOUaeS0rIgxEOk0y28jTM",{"id":25842,"title":25843,"body":25844,"category":2240,"description":26198,"exclude":190,"extension":191,"forceFramework":190,"icon":26199,"meta":26200,"navigation":194,"path":26201,"seo":26202,"stem":26203,"__hash__":26204},"guide\u002Fdocs\u002Fguide\u002F9.performance.md","Performance",{"type":8,"value":25845,"toc":26192},[25846,25849,25852,25856,25863,25866,25870,25873,25879,25889,25894,25955,25958,25962,25965,25970,25986,25992,26146,26150,26156,26162,26177,26183,26189],[11,25847,25843],{"id":25848},"performance",[15,25850,25851],{},"Shaders runs on the GPU, which means most effects are significantly faster than equivalent CSS or canvas2D solutions. That said, the GPU isn't free — some patterns cost more than others. Understanding what drives GPU cost helps you design effects that stay smooth.",[23,25853,25855],{"id":25854},"the-frame-budget","The frame budget",[15,25857,25858,25859,25862],{},"At 60fps, the GPU has ",[159,25860,25861],{},"16.67ms per frame",". Shaders renders once per frame, compositing all visible layers together. Simple setups render in under 1ms. Complex nesting with multiple effects can push toward that budget.",[15,25864,25865],{},"The renderer automatically drops to ~1fps when the canvas is scrolled out of the viewport — so effects that aren't visible consume almost nothing.",[23,25867,25869],{"id":25868},"generator-vs-filter-effects","Generator vs. filter effects",[15,25871,25872],{},"Effects fall into two broad categories with very different cost profiles:",[15,25874,25875,25878],{},[159,25876,25877],{},"Generator"," components (LinearGradient, Circle, Plasma, Swirl, etc.) create pixels from scratch by evaluating a mathematical function per-pixel. They're extremely fast — a full-screen gradient or noise pattern takes fractions of a millisecond.",[15,25880,25881,25884,25885,25888],{},[159,25882,25883],{},"Filter\u002FEffect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[159,25886,25887],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,25890,25891],{},[159,25892,25893],{},"Rough cost categories:",[1794,25895,25896,25909],{},[1797,25897,25898],{},[1800,25899,25900,25903,25906],{},[1803,25901,25902],{},"Category",[1803,25904,25905],{},"Examples",[1803,25907,25908],{},"Relative cost",[1810,25910,25911,25922,25933,25944],{},[1800,25912,25913,25916,25919],{},[1815,25914,25915],{},"Very light",[1815,25917,25918],{},"SolidColor, LinearGradient, RadialGradient",[1815,25920,25921],{},"~0–0.1ms",[1800,25923,25924,25927,25930],{},[1815,25925,25926],{},"Light",[1815,25928,25929],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1815,25931,25932],{},"~0.1–0.5ms",[1800,25934,25935,25938,25941],{},[1815,25936,25937],{},"Medium",[1815,25939,25940],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1815,25942,25943],{},"~0.5–2ms",[1800,25945,25946,25949,25952],{},[1815,25947,25948],{},"Heavy",[1815,25950,25951],{},"Glass, GlassTiles, multiple nested RTT effects",[1815,25953,25954],{},"~1-2ms+",[15,25956,25957],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,25959,25961],{"id":25960},"render-to-texture-rtt","Render-to-texture (RTT)",[15,25963,25964],{},"RTT is what happens when one effect needs to read the rendered output of another. The renderer first renders the source layer to an intermediate texture, then the effect samples from it.",[15,25966,25967],{},[159,25968,25969],{},"What triggers RTT:",[34,25971,25972,25975,25983],{},[37,25973,25974],{},"Filter\u002Feffect components that need input (Blur, Glass, GlassTiles, etc.)",[37,25976,1839,25977,15712,25979,25982],{},[99,25978,19414],{},[56,25980,25981],{"href":17272},"Prop Driver"," on any component (the source layer is RTT'd)",[37,25984,25985],{},"The masking system when a layer is used as a mask source",[15,25987,25988,25991],{},[159,25989,25990],{},"The cost scales with nesting."," One RTT pass is cheap. Three nested RTT effects means three serial passes. Avoid deep nesting of heavy filter effects:",[212,25993,25995],{"className":334,"code":25994,"language":336,"meta":178,"style":178},"\u003C!-- Avoid: three RTT passes in series -->\n\u003CShader>\n \u003CLinearGradient \u002F>\n \u003CGlassTiles>\n \u003CGlass>\n \u003CBlur :radius=\"20\">\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n \u003C\u002FGlass>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n\n\u003C!-- Better: fewer RTT boundaries -->\n\u003CShader>\n \u003CLinearGradient \u002F>\n \u003CGlassTiles>\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,25996,25997,26002,26010,26018,26026,26034,26049,26057,26065,26073,26081,26089,26093,26098,26106,26114,26122,26130,26138],{"__ignoreMap":178},[220,25998,25999],{"class":222,"line":223},[220,26000,26001],{"class":609},"\u003C!-- Avoid: three RTT passes in series -->\n",[220,26003,26004,26006,26008],{"class":222,"line":179},[220,26005,343],{"class":264},[220,26007,347],{"class":346},[220,26009,359],{"class":264},[220,26011,26012,26014,26016],{"class":222,"line":389},[220,26013,364],{"class":264},[220,26015,367],{"class":346},[220,26017,386],{"class":264},[220,26019,26020,26022,26024],{"class":222,"line":399},[220,26021,364],{"class":264},[220,26023,6225],{"class":346},[220,26025,359],{"class":264},[220,26027,26028,26030,26032],{"class":222,"line":644},[220,26029,2550],{"class":264},[220,26031,15466],{"class":346},[220,26033,359],{"class":264},[220,26035,26036,26038,26040,26042,26044,26047],{"class":222,"line":650},[220,26037,2813],{"class":264},[220,26039,11769],{"class":346},[220,26041,17328],{"class":226},[220,26043,353],{"class":264},[220,26045,26046],{"class":230},"\"20\"",[220,26048,359],{"class":264},[220,26050,26051,26053,26055],{"class":222,"line":656},[220,26052,10809],{"class":264},[220,26054,2553],{"class":346},[220,26056,386],{"class":264},[220,26058,26059,26061,26063],{"class":222,"line":673},[220,26060,10914],{"class":264},[220,26062,11769],{"class":346},[220,26064,359],{"class":264},[220,26066,26067,26069,26071],{"class":222,"line":682},[220,26068,2828],{"class":264},[220,26070,15466],{"class":346},[220,26072,359],{"class":264},[220,26074,26075,26077,26079],{"class":222,"line":691},[220,26076,2567],{"class":264},[220,26078,6225],{"class":346},[220,26080,359],{"class":264},[220,26082,26083,26085,26087],{"class":222,"line":696},[220,26084,402],{"class":264},[220,26086,347],{"class":346},[220,26088,359],{"class":264},[220,26090,26091],{"class":222,"line":702},[220,26092,647],{"emptyLinePlaceholder":194},[220,26094,26095],{"class":222,"line":718},[220,26096,26097],{"class":609},"\u003C!-- Better: fewer RTT boundaries -->\n",[220,26099,26100,26102,26104],{"class":222,"line":727},[220,26101,343],{"class":264},[220,26103,347],{"class":346},[220,26105,359],{"class":264},[220,26107,26108,26110,26112],{"class":222,"line":2664},[220,26109,364],{"class":264},[220,26111,367],{"class":346},[220,26113,386],{"class":264},[220,26115,26116,26118,26120],{"class":222,"line":3522},[220,26117,364],{"class":264},[220,26119,6225],{"class":346},[220,26121,359],{"class":264},[220,26123,26124,26126,26128],{"class":222,"line":9662},[220,26125,2550],{"class":264},[220,26127,2553],{"class":346},[220,26129,386],{"class":264},[220,26131,26132,26134,26136],{"class":222,"line":9673},[220,26133,2567],{"class":264},[220,26135,6225],{"class":346},[220,26137,359],{"class":264},[220,26139,26140,26142,26144],{"class":222,"line":9678},[220,26141,402],{"class":264},[220,26143,347],{"class":346},[220,26145,359],{"class":264},[23,26147,26149],{"id":26148},"practical-tips","Practical tips",[15,26151,26152,26155],{},[159,26153,26154],{},"Use generators as backgrounds."," LinearGradient, Plasma, SimplexNoise, and similar generators are nearly free. Build your base layer with these before adding filter effects on top.",[15,26157,26158,26161],{},[159,26159,26160],{},"Limit nested filter effects."," Each nesting boundary where a filter effect wraps children creates an RTT pass. Three flat filter layers is cheaper than three nested ones.",[15,26163,26164,26167,26168,26170,26171,26173,26174,26176],{},[159,26165,26166],{},"Invisible layers still cost."," A hidden layer with ",[99,26169,9045],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[99,26172,8673],{}," still renders the layer. Use ",[99,26175,9045],{}," to truly exclude layers you don't need.",[15,26178,26179,26182],{},[159,26180,26181],{},"Canvas size matters."," RTT textures scale with the canvas resolution. A full-screen Glass effect on a 4K display will be more expensive than on a 1080p display. This is automatic behavior, not something you control directly, but it's worth knowing for very large canvases.",[15,26184,26185,26188],{},[159,26186,26187],{},"Prefer runtime props over compile-time ones."," Most props update instantly by writing a new GPU uniform value. A small number of props are marked as \"compile-time\" — changing them triggers a shader recompile, which pauses rendering briefly. The component docs flag these where applicable. Avoid animating compile-time props.",[1504,26190,26191],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":178,"searchDepth":179,"depth":179,"links":26193},[26194,26195,26196,26197],{"id":25854,"depth":179,"text":25855},{"id":25868,"depth":179,"text":25869},{"id":25960,"depth":179,"text":25961},{"id":26148,"depth":179,"text":26149},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"\u002Fdocs\u002Fguide\u002Fperformance",{"title":25843,"description":26198},"docs\u002Fguide\u002F9.performance","WHeb5Ts4O503nCOEtFBki43V6NY2rxYTfUc89UhAewM",{"id":26206,"title":201,"body":26207,"category":188,"description":26834,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":26835,"navigation":194,"path":26836,"seo":26837,"stem":26838,"__hash__":26839},"guide\u002Fdocs\u002Fguide\u002Fjs\u002F1.quickstart.md",{"type":8,"value":26208,"toc":26824},[26209,26213,26216,26220,26232,26236,26242,26273,26275,26282,26376,26378,26384,26386,26394,26496,26503,26526,26528,26535,26627,26631,26640,26759,26766,26772,26776,26783,26797,26800,26802,26821],[11,26210,26212],{"id":26211},"quickstart-javascript","Quickstart (JavaScript)",[15,26214,26215],{},"Shaders provides a vanilla JavaScript API that works with any bundler-based JS environment (Vite, Webpack, etc.), Web Components, or plain HTML with an ESM-compatible setup — no framework required.",[23,26217,26219],{"id":26218},"install-the-npm-package","Install the npm package",[212,26221,26222],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26223,26224],{"__ignoreMap":178},[220,26225,26226,26228,26230],{"class":222,"line":223},[220,26227,227],{"class":226},[220,26229,231],{"class":230},[220,26231,234],{"class":230},[23,26233,26235],{"id":26234},"set-up-a-canvas","Set up a canvas",[15,26237,26238,26239,26241],{},"Create a ",[99,26240,586],{}," element in your HTML and give it a size:",[212,26243,26245],{"className":12879,"code":26244,"language":12881,"meta":178,"style":178},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C\u002Fcanvas>\n",[99,26246,26247],{"__ignoreMap":178},[220,26248,26249,26251,26253,26255,26257,26260,26262,26264,26267,26269,26271],{"class":222,"line":223},[220,26250,343],{"class":264},[220,26252,12890],{"class":346},[220,26254,9100],{"class":226},[220,26256,353],{"class":264},[220,26258,26259],{"class":230},"\"my-shader\"",[220,26261,663],{"class":226},[220,26263,353],{"class":264},[220,26265,26266],{"class":230},"\"width: 100%; height: 400px;\"",[220,26268,3804],{"class":264},[220,26270,12890],{"class":346},[220,26272,359],{"class":264},[23,26274,323],{"id":322},[15,26276,26277,26278,26281],{},"Import ",[99,26279,26280],{},"createShader",", pass it the canvas and a list of components:",[212,26283,26285],{"className":251,"code":26284,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst canvas = document.getElementById('my-shader')\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } },\n { type: 'CursorTrail', props: {} }\n ]\n})\n",[99,26286,26287,26297,26301,26319,26323,26337,26341,26359,26368,26372],{"__ignoreMap":178},[220,26288,26289,26291,26293,26295],{"class":222,"line":223},[220,26290,261],{"class":260},[220,26292,11512],{"class":264},[220,26294,268],{"class":260},[220,26296,4007],{"class":230},[220,26298,26299],{"class":222,"line":179},[220,26300,647],{"emptyLinePlaceholder":194},[220,26302,26303,26305,26307,26309,26311,26313,26315,26317],{"class":222,"line":389},[220,26304,1735],{"class":260},[220,26306,3133],{"class":420},[220,26308,1741],{"class":260},[220,26310,3138],{"class":264},[220,26312,3141],{"class":226},[220,26314,2626],{"class":264},[220,26316,12525],{"class":230},[220,26318,2632],{"class":264},[220,26320,26321],{"class":222,"line":399},[220,26322,647],{"emptyLinePlaceholder":194},[220,26324,26325,26327,26329,26331,26333,26335],{"class":222,"line":644},[220,26326,1735],{"class":260},[220,26328,1738],{"class":420},[220,26330,1741],{"class":260},[220,26332,1744],{"class":260},[220,26334,1747],{"class":226},[220,26336,1750],{"class":264},[220,26338,26339],{"class":222,"line":650},[220,26340,1765],{"class":264},[220,26342,26343,26345,26347,26349,26352,26354,26357],{"class":222,"line":656},[220,26344,1770],{"class":264},[220,26346,2462],{"class":230},[220,26348,10166],{"class":264},[220,26350,26351],{"class":230},"'#0f172a'",[220,26353,10172],{"class":264},[220,26355,26356],{"class":230},"'#7c3aed'",[220,26358,6571],{"class":264},[220,26360,26361,26363,26366],{"class":222,"line":673},[220,26362,1770],{"class":264},[220,26364,26365],{"class":230},"'CursorTrail'",[220,26367,2465],{"class":264},[220,26369,26370],{"class":222,"line":682},[220,26371,1787],{"class":264},[220,26373,26374],{"class":222,"line":691},[220,26375,1792],{"class":264},[19,26377],{":preset":578},[15,26379,1839,26380,26383],{},[99,26381,26382],{},"components"," array defines your visual layers, evaluated top to bottom, blended together on the GPU. In this example, we render the linear gradient first, and then the cursor trail effect on top of that.",[23,26385,594],{"id":593},[15,26387,1839,26388,26390,26391,1554],{},[99,26389,586],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[99,26392,26393],{},"ResizeObserver",[212,26395,26397],{"className":12879,"code":26396,"language":12881,"meta":178,"style":178},"\u003C!-- Fixed size -->\n\u003Ccanvas id=\"shader\" style=\"width: 600px; height: 400px;\">\u003C\u002Fcanvas>\n\n\u003C!-- Full viewport -->\n\u003Ccanvas id=\"shader\" style=\"width: 100vw; height: 100dvh;\">\u003C\u002Fcanvas>\n\n\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n\u003Ccanvas id=\"shader\" class=\"w-full aspect-video\">\u003C\u002Fcanvas>\n",[99,26398,26399,26404,26429,26433,26438,26463,26467,26472],{"__ignoreMap":178},[220,26400,26401],{"class":222,"line":223},[220,26402,26403],{"class":609},"\u003C!-- Fixed size -->\n",[220,26405,26406,26408,26410,26412,26414,26417,26419,26421,26423,26425,26427],{"class":222,"line":179},[220,26407,343],{"class":264},[220,26409,12890],{"class":346},[220,26411,9100],{"class":226},[220,26413,353],{"class":264},[220,26415,26416],{"class":230},"\"shader\"",[220,26418,663],{"class":226},[220,26420,353],{"class":264},[220,26422,668],{"class":230},[220,26424,3804],{"class":264},[220,26426,12890],{"class":346},[220,26428,359],{"class":264},[220,26430,26431],{"class":222,"line":389},[220,26432,647],{"emptyLinePlaceholder":194},[220,26434,26435],{"class":222,"line":399},[220,26436,26437],{"class":609},"\u003C!-- Full viewport -->\n",[220,26439,26440,26442,26444,26446,26448,26450,26452,26454,26457,26459,26461],{"class":222,"line":644},[220,26441,343],{"class":264},[220,26443,12890],{"class":346},[220,26445,9100],{"class":226},[220,26447,353],{"class":264},[220,26449,26416],{"class":230},[220,26451,663],{"class":226},[220,26453,353],{"class":264},[220,26455,26456],{"class":230},"\"width: 100vw; height: 100dvh;\"",[220,26458,3804],{"class":264},[220,26460,12890],{"class":346},[220,26462,359],{"class":264},[220,26464,26465],{"class":222,"line":650},[220,26466,647],{"emptyLinePlaceholder":194},[220,26468,26469],{"class":222,"line":656},[220,26470,26471],{"class":609},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[220,26473,26474,26476,26478,26480,26482,26484,26486,26488,26490,26492,26494],{"class":222,"line":673},[220,26475,343],{"class":264},[220,26477,12890],{"class":346},[220,26479,9100],{"class":226},[220,26481,353],{"class":264},[220,26483,26416],{"class":230},[220,26485,350],{"class":226},[220,26487,353],{"class":264},[220,26489,713],{"class":230},[220,26491,3804],{"class":264},[220,26493,12890],{"class":346},[220,26495,359],{"class":264},[15,26497,26498,26499,26502],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[99,26500,26501],{},"shader.resize()"," to sync:",[212,26504,26506],{"className":251,"code":26505,"language":253,"meta":178,"style":178},"canvas.style.height = '600px'\nshader.resize()\n",[99,26507,26508,26517],{"__ignoreMap":178},[220,26509,26510,26512,26514],{"class":222,"line":223},[220,26511,12542],{"class":264},[220,26513,353],{"class":260},[220,26515,26516],{"class":230}," '600px'\n",[220,26518,26519,26521,26524],{"class":222,"line":179},[220,26520,11602],{"class":264},[220,26522,26523],{"class":226},"resize",[220,26525,4032],{"class":264},[23,26527,1153],{"id":1152},[15,26529,26530,26531,26534],{},"Props are passed in the ",[99,26532,26533],{},"props"," object for each component. All prop names are camelCase:",[212,26536,26538],{"className":251,"code":26537,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n props: {\n colorA: '#ff6b6b',\n colorB: '#4ecdc4',\n angle: 45,\n colorSpace: 'oklch'\n }\n }\n ]\n})\n",[99,26539,26540,26554,26558,26562,26570,26574,26584,26594,26603,26611,26615,26619,26623],{"__ignoreMap":178},[220,26541,26542,26544,26546,26548,26550,26552],{"class":222,"line":223},[220,26543,1735],{"class":260},[220,26545,1738],{"class":420},[220,26547,1741],{"class":260},[220,26549,1744],{"class":260},[220,26551,1747],{"class":226},[220,26553,1750],{"class":264},[220,26555,26556],{"class":222,"line":179},[220,26557,1765],{"class":264},[220,26559,26560],{"class":222,"line":389},[220,26561,16379],{"class":264},[220,26563,26564,26566,26568],{"class":222,"line":399},[220,26565,16384],{"class":264},[220,26567,2462],{"class":230},[220,26569,1760],{"class":264},[220,26571,26572],{"class":222,"line":644},[220,26573,16393],{"class":264},[220,26575,26576,26579,26582],{"class":222,"line":650},[220,26577,26578],{"class":264}," colorA: ",[220,26580,26581],{"class":230},"'#ff6b6b'",[220,26583,1760],{"class":264},[220,26585,26586,26589,26592],{"class":222,"line":656},[220,26587,26588],{"class":264}," colorB: ",[220,26590,26591],{"class":230},"'#4ecdc4'",[220,26593,1760],{"class":264},[220,26595,26596,26599,26601],{"class":222,"line":673},[220,26597,26598],{"class":264}," angle: ",[220,26600,1295],{"class":420},[220,26602,1760],{"class":264},[220,26604,26605,26608],{"class":222,"line":682},[220,26606,26607],{"class":264}," colorSpace: ",[220,26609,26610],{"class":230},"'oklch'\n",[220,26612,26613],{"class":222,"line":691},[220,26614,4929],{"class":264},[220,26616,26617],{"class":222,"line":696},[220,26618,4609],{"class":264},[220,26620,26621],{"class":222,"line":702},[220,26622,1787],{"class":264},[220,26624,26625],{"class":222,"line":718},[220,26626,1792],{"class":264},[23,26628,26630],{"id":26629},"updating-at-runtime","Updating at runtime",[15,26632,26633,26634,26636,26637,26639],{},"Assign an ",[99,26635,9056],{}," to any component, then use ",[99,26638,20796],{}," to change its props at any time:",[212,26641,26643],{"className":251,"code":26642,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', id: 'gradient', props: { colorA: '#0f172a', colorB: '#7c3aed', angle: 0 } }\n ]\n})\n\n\u002F\u002F Hook up a slider\ndocument.querySelector('#angle-slider').addEventListener('input', e => {\n shader.update('gradient', { angle: Number(e.target.value) })\n})\n",[99,26644,26645,26659,26663,26688,26692,26696,26700,26705,26737,26755],{"__ignoreMap":178},[220,26646,26647,26649,26651,26653,26655,26657],{"class":222,"line":223},[220,26648,1735],{"class":260},[220,26650,1738],{"class":420},[220,26652,1741],{"class":260},[220,26654,1744],{"class":260},[220,26656,1747],{"class":226},[220,26658,1750],{"class":264},[220,26660,26661],{"class":222,"line":179},[220,26662,1765],{"class":264},[220,26664,26665,26667,26669,26671,26673,26675,26677,26679,26681,26684,26686],{"class":222,"line":389},[220,26666,1770],{"class":264},[220,26668,2462],{"class":230},[220,26670,3209],{"class":264},[220,26672,11569],{"class":230},[220,26674,10166],{"class":264},[220,26676,26351],{"class":230},[220,26678,10172],{"class":264},[220,26680,26356],{"class":230},[220,26682,26683],{"class":264},", angle: ",[220,26685,8673],{"class":420},[220,26687,1782],{"class":264},[220,26689,26690],{"class":222,"line":399},[220,26691,1787],{"class":264},[220,26693,26694],{"class":222,"line":644},[220,26695,1792],{"class":264},[220,26697,26698],{"class":222,"line":650},[220,26699,647],{"emptyLinePlaceholder":194},[220,26701,26702],{"class":222,"line":656},[220,26703,26704],{"class":609},"\u002F\u002F Hook up a slider\n",[220,26706,26707,26710,26713,26715,26718,26720,26723,26725,26728,26730,26733,26735],{"class":222,"line":673},[220,26708,26709],{"class":264},"document.",[220,26711,26712],{"class":226},"querySelector",[220,26714,2626],{"class":264},[220,26716,26717],{"class":230},"'#angle-slider'",[220,26719,15437],{"class":264},[220,26721,26722],{"class":226},"addEventListener",[220,26724,2626],{"class":264},[220,26726,26727],{"class":230},"'input'",[220,26729,1895],{"class":264},[220,26731,26732],{"class":3621},"e",[220,26734,10830],{"class":260},[220,26736,3241],{"class":264},[220,26738,26739,26741,26743,26745,26747,26749,26752],{"class":222,"line":682},[220,26740,17167],{"class":264},[220,26742,11605],{"class":226},[220,26744,2626],{"class":264},[220,26746,11569],{"class":230},[220,26748,11612],{"class":264},[220,26750,26751],{"class":226},"Number",[220,26753,26754],{"class":264},"(e.target.value) })\n",[220,26756,26757],{"class":222,"line":691},[220,26758,1792],{"class":264},[15,26760,26761,26762,26765],{},"When ",[99,26763,26764],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,26767,26768,26769,26771],{},"Browse the ",[56,26770,1160],{"href":1159}," for the full prop reference on every component.",[23,26773,26775],{"id":26774},"cleanup","Cleanup",[15,26777,26778,26779,26782],{},"When you're done, call ",[99,26780,26781],{},"destroy()"," to free GPU resources:",[212,26784,26786],{"className":251,"code":26785,"language":253,"meta":178,"style":178},"shader.destroy()\n",[99,26787,26788],{"__ignoreMap":178},[220,26789,26790,26792,26795],{"class":222,"line":223},[220,26791,11602],{"class":264},[220,26793,26794],{"class":226},"destroy",[220,26796,4032],{"class":264},[15,26798,26799],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,26801,1474],{"id":1473},[34,26803,26804,26808,26812,26817],{},[37,26805,26806,1483],{},[56,26807,1482],{"href":1481},[37,26809,26810,1490],{},[56,26811,1489],{"href":1488},[37,26813,26814,26816],{},[56,26815,17298],{"href":17272}," — animate and mouse-track props declaratively",[37,26818,26819,1502],{},[56,26820,1160],{"href":1159},[1504,26822,26823],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":26825},[26826,26827,26828,26829,26830,26831,26832,26833],{"id":26218,"depth":179,"text":26219},{"id":26234,"depth":179,"text":26235},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":26629,"depth":179,"text":26630},{"id":26774,"depth":179,"text":26775},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart",{"title":201,"description":26834},"docs\u002Fguide\u002Fjs\u002F1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":26841,"title":201,"body":26842,"category":188,"description":27476,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":27477,"navigation":194,"path":27478,"seo":27479,"stem":27480,"__hash__":27481},"guide\u002Fdocs\u002Fguide\u002Freact\u002F1.quickstart.md",{"type":8,"value":26843,"toc":27467},[26844,26848,26852,26854,26866,26870,26884,26886,26889,26943,26945,26952,26954,26967,27101,27115,27117,27120,27192,27199,27427,27432,27436,27440,27448,27450,27464],[11,26845,26847],{"id":26846},"quickstart-react","Quickstart (React)",[26849,26850],"you-tube-embed",{"id":26851},"G7kzM8M7hA4",[23,26853,26219],{"id":26218},[212,26855,26856],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26857,26858],{"__ignoreMap":178},[220,26859,26860,26862,26864],{"class":222,"line":223},[220,26861,227],{"class":226},[220,26863,231],{"class":230},[220,26865,234],{"class":230},[23,26867,26869],{"id":26868},"import-some-components","Import some components",[212,26871,26872],{"className":251,"code":274,"language":253,"meta":178,"style":178},[99,26873,26874],{"__ignoreMap":178},[220,26875,26876,26878,26880,26882],{"class":222,"line":223},[220,26877,261],{"class":260},[220,26879,265],{"class":264},[220,26881,268],{"class":260},[220,26883,287],{"class":230},[23,26885,323],{"id":322},[15,26887,26888],{},"Let's create a very simple shader:",[212,26890,26891],{"className":409,"code":410,"language":411,"meta":178,"style":178},[99,26892,26893,26907,26927,26935],{"__ignoreMap":178},[220,26894,26895,26897,26899,26901,26903,26905],{"class":222,"line":223},[220,26896,343],{"class":264},[220,26898,347],{"class":420},[220,26900,423],{"class":226},[220,26902,353],{"class":260},[220,26904,356],{"class":230},[220,26906,359],{"class":264},[220,26908,26909,26911,26913,26915,26917,26919,26921,26923,26925],{"class":222,"line":179},[220,26910,364],{"class":264},[220,26912,367],{"class":420},[220,26914,370],{"class":226},[220,26916,353],{"class":260},[220,26918,375],{"class":230},[220,26920,378],{"class":226},[220,26922,353],{"class":260},[220,26924,383],{"class":230},[220,26926,386],{"class":264},[220,26928,26929,26931,26933],{"class":222,"line":389},[220,26930,364],{"class":264},[220,26932,394],{"class":420},[220,26934,386],{"class":264},[220,26936,26937,26939,26941],{"class":222,"line":399},[220,26938,402],{"class":264},[220,26940,347],{"class":420},[220,26942,359],{"class":264},[19,26944],{":preset":578},[15,26946,26947,583,26949,26951],{},[99,26948,101],{},[99,26950,586],{}," element. Child components are visual layers evaluated top to bottom, blended together on the GPU. In this example, we render the linear gradient first, and then the cursor trail effect on top of that.",[23,26953,594],{"id":593},[15,26955,1839,26956,26958,26959,18745,26962,26964,26965,590],{},[99,26957,586],{}," has no intrinsic size. The ",[99,26960,26961],{},"className",[99,26963,1504],{}," you apply to ",[99,26966,101],{},[212,26968,26970],{"className":409,"code":26969,"language":411,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fluid with aspect ratio *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,26971,26972,26980,26994,27002,27010,27014,27022,27042,27050,27058,27062,27071,27085,27093],{"__ignoreMap":178},[220,26973,26974,26976,26978],{"class":222,"line":223},[220,26975,743],{"class":264},[220,26977,746],{"class":609},[220,26979,749],{"class":264},[220,26981,26982,26984,26986,26988,26990,26992],{"class":222,"line":179},[220,26983,343],{"class":264},[220,26985,347],{"class":420},[220,26987,423],{"class":226},[220,26989,353],{"class":260},[220,26991,623],{"class":230},[220,26993,359],{"class":264},[220,26995,26996,26998,27000],{"class":222,"line":389},[220,26997,364],{"class":264},[220,26999,367],{"class":420},[220,27001,386],{"class":264},[220,27003,27004,27006,27008],{"class":222,"line":399},[220,27005,402],{"class":264},[220,27007,347],{"class":420},[220,27009,359],{"class":264},[220,27011,27012],{"class":222,"line":644},[220,27013,647],{"emptyLinePlaceholder":194},[220,27015,27016,27018,27020],{"class":222,"line":650},[220,27017,743],{"class":264},[220,27019,790],{"class":609},[220,27021,749],{"class":264},[220,27023,27024,27026,27028,27030,27032,27034,27036,27038,27040],{"class":222,"line":656},[220,27025,343],{"class":264},[220,27027,347],{"class":420},[220,27029,663],{"class":226},[220,27031,353],{"class":260},[220,27033,805],{"class":264},[220,27035,808],{"class":230},[220,27037,811],{"class":264},[220,27039,814],{"class":230},[220,27041,817],{"class":264},[220,27043,27044,27046,27048],{"class":222,"line":673},[220,27045,364],{"class":264},[220,27047,367],{"class":420},[220,27049,386],{"class":264},[220,27051,27052,27054,27056],{"class":222,"line":682},[220,27053,402],{"class":264},[220,27055,347],{"class":420},[220,27057,359],{"class":264},[220,27059,27060],{"class":222,"line":691},[220,27061,647],{"emptyLinePlaceholder":194},[220,27063,27064,27066,27069],{"class":222,"line":696},[220,27065,743],{"class":264},[220,27067,27068],{"class":609},"\u002F* Fluid with aspect ratio *\u002F",[220,27070,749],{"class":264},[220,27072,27073,27075,27077,27079,27081,27083],{"class":222,"line":702},[220,27074,343],{"class":264},[220,27076,347],{"class":420},[220,27078,423],{"class":226},[220,27080,353],{"class":260},[220,27082,713],{"class":230},[220,27084,359],{"class":264},[220,27086,27087,27089,27091],{"class":222,"line":718},[220,27088,364],{"class":264},[220,27090,367],{"class":420},[220,27092,386],{"class":264},[220,27094,27095,27097,27099],{"class":222,"line":727},[220,27096,402],{"class":264},[220,27098,347],{"class":420},[220,27100,359],{"class":264},[15,27102,27103,27104,18745,27106,27108,27109,27111,27112,27114],{},"Applying a ",[99,27105,26961],{},[99,27107,1504],{}," to the ",[99,27110,101],{}," tag is preferred over trying to target the ",[99,27113,586],{}," element directly, as the internal DOM structure may change in the future.",[23,27116,1153],{"id":1152},[15,27118,27119],{},"Pass props directly to configure each component. All props use camelCase:",[212,27121,27122],{"className":409,"code":1245,"language":411,"meta":178,"style":178},[99,27123,27124,27138,27144,27152,27160,27172,27180,27184],{"__ignoreMap":178},[220,27125,27126,27128,27130,27132,27134,27136],{"class":222,"line":223},[220,27127,343],{"class":264},[220,27129,347],{"class":420},[220,27131,423],{"class":226},[220,27133,353],{"class":260},[220,27135,356],{"class":230},[220,27137,359],{"class":264},[220,27139,27140,27142],{"class":222,"line":179},[220,27141,364],{"class":264},[220,27143,1189],{"class":420},[220,27145,27146,27148,27150],{"class":222,"line":389},[220,27147,1194],{"class":226},[220,27149,353],{"class":260},[220,27151,1199],{"class":230},[220,27153,27154,27156,27158],{"class":222,"line":399},[220,27155,1204],{"class":226},[220,27157,353],{"class":260},[220,27159,1209],{"class":230},[220,27161,27162,27164,27166,27168,27170],{"class":222,"line":644},[220,27163,1288],{"class":226},[220,27165,353],{"class":260},[220,27167,743],{"class":264},[220,27169,1295],{"class":420},[220,27171,749],{"class":264},[220,27173,27174,27176,27178],{"class":222,"line":650},[220,27175,1302],{"class":226},[220,27177,353],{"class":260},[220,27179,1229],{"class":230},[220,27181,27182],{"class":222,"line":656},[220,27183,1234],{"class":264},[220,27185,27186,27188,27190],{"class":222,"line":673},[220,27187,402],{"class":264},[220,27189,347],{"class":420},[220,27191,359],{"class":264},[15,27193,27194,27195,27198],{},"Props also accept state — ",[99,27196,27197],{},"useState"," and any other reactive value work exactly as you'd expect:",[212,27200,27202],{"className":409,"code":27201,"language":411,"meta":178,"style":178},"import { useState } from 'react'\nimport { Shader, LinearGradient } from 'shaders\u002Freact'\n\nexport default function MyShader() {\n const [angle, setAngle] = useState(0)\n\n return (\n \u003C>\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" angle={angle} \u002F>\n \u003C\u002FShader>\n\n \u003Cinput\n type=\"range\"\n min={0}\n max={360}\n value={angle}\n onChange={e => setAngle(Number(e.target.value))}\n \u002F>\n \u003C\u002F>\n )\n}\n",[99,27203,27204,27214,27225,27229,27244,27268,27272,27278,27282,27296,27323,27331,27335,27342,27352,27365,27379,27389,27411,27415,27419,27423],{"__ignoreMap":178},[220,27205,27206,27208,27210,27212],{"class":222,"line":223},[220,27207,261],{"class":260},[220,27209,2682],{"class":264},[220,27211,268],{"class":260},[220,27213,2687],{"class":230},[220,27215,27216,27218,27221,27223],{"class":222,"line":179},[220,27217,261],{"class":260},[220,27219,27220],{"class":264}," { Shader, LinearGradient } ",[220,27222,268],{"class":260},[220,27224,287],{"class":230},[220,27226,27227],{"class":222,"line":389},[220,27228,647],{"emptyLinePlaceholder":194},[220,27230,27231,27234,27237,27239,27242],{"class":222,"line":399},[220,27232,27233],{"class":260},"export",[220,27235,27236],{"class":260}," default",[220,27238,11941],{"class":260},[220,27240,27241],{"class":226}," MyShader",[220,27243,2647],{"class":264},[220,27245,27246,27248,27250,27252,27254,27256,27258,27260,27262,27264,27266],{"class":222,"line":644},[220,27247,2705],{"class":260},[220,27249,2708],{"class":264},[220,27251,10764],{"class":420},[220,27253,1895],{"class":264},[220,27255,10769],{"class":420},[220,27257,2719],{"class":264},[220,27259,353],{"class":260},[220,27261,2724],{"class":226},[220,27263,2626],{"class":264},[220,27265,8673],{"class":420},[220,27267,2632],{"class":264},[220,27269,27270],{"class":222,"line":650},[220,27271,647],{"emptyLinePlaceholder":194},[220,27273,27274,27276],{"class":222,"line":656},[220,27275,2739],{"class":260},[220,27277,2742],{"class":264},[220,27279,27280],{"class":222,"line":673},[220,27281,10796],{"class":264},[220,27283,27284,27286,27288,27290,27292,27294],{"class":222,"line":682},[220,27285,2813],{"class":264},[220,27287,347],{"class":420},[220,27289,423],{"class":226},[220,27291,353],{"class":260},[220,27293,356],{"class":230},[220,27295,359],{"class":264},[220,27297,27298,27300,27302,27304,27306,27309,27311,27313,27316,27318,27320],{"class":222,"line":691},[220,27299,10809],{"class":264},[220,27301,367],{"class":420},[220,27303,370],{"class":226},[220,27305,353],{"class":260},[220,27307,27308],{"class":230},"\"#ff6b6b\"",[220,27310,378],{"class":226},[220,27312,353],{"class":260},[220,27314,27315],{"class":230},"\"#4ecdc4\"",[220,27317,10532],{"class":226},[220,27319,353],{"class":260},[220,27321,27322],{"class":264},"{angle} \u002F>\n",[220,27324,27325,27327,27329],{"class":222,"line":696},[220,27326,10914],{"class":264},[220,27328,347],{"class":420},[220,27330,359],{"class":264},[220,27332,27333],{"class":222,"line":702},[220,27334,647],{"emptyLinePlaceholder":194},[220,27336,27337,27339],{"class":222,"line":718},[220,27338,2813],{"class":264},[220,27340,27341],{"class":346},"input\n",[220,27343,27344,27347,27349],{"class":222,"line":727},[220,27345,27346],{"class":226}," type",[220,27348,353],{"class":260},[220,27350,27351],{"class":230},"\"range\"\n",[220,27353,27354,27357,27359,27361,27363],{"class":222,"line":2664},[220,27355,27356],{"class":226}," min",[220,27358,353],{"class":260},[220,27360,743],{"class":264},[220,27362,8673],{"class":420},[220,27364,749],{"class":264},[220,27366,27367,27370,27372,27374,27377],{"class":222,"line":3522},[220,27368,27369],{"class":226}," max",[220,27371,353],{"class":260},[220,27373,743],{"class":264},[220,27375,27376],{"class":420},"360",[220,27378,749],{"class":264},[220,27380,27381,27384,27386],{"class":222,"line":9662},[220,27382,27383],{"class":226}," value",[220,27385,353],{"class":260},[220,27387,27388],{"class":264},"{angle}\n",[220,27390,27391,27394,27396,27398,27400,27402,27404,27406,27408],{"class":222,"line":9673},[220,27392,27393],{"class":226}," onChange",[220,27395,353],{"class":260},[220,27397,743],{"class":264},[220,27399,26732],{"class":3621},[220,27401,10830],{"class":260},[220,27403,10823],{"class":226},[220,27405,2626],{"class":264},[220,27407,26751],{"class":226},[220,27409,27410],{"class":264},"(e.target.value))}\n",[220,27412,27413],{"class":222,"line":9678},[220,27414,17037],{"class":264},[220,27416,27417],{"class":222,"line":10999},[220,27418,10996],{"class":264},[220,27420,27421],{"class":222,"line":11004},[220,27422,2837],{"class":264},[220,27424,27425],{"class":222,"line":12075},[220,27426,749],{"class":264},[15,27428,26761,27429,27431],{},[99,27430,10764],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,27433,26768,27434,26771],{},[56,27435,1160],{"href":1159},[23,27437,27439],{"id":27438},"using-with-nextjs-ssr","Using with Next.js \u002F SSR",[15,27441,27442,27443,27447],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[56,27444,27446],{"href":27445},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR"," guide for how to set it up with server-side rendering.",[23,27449,1474],{"id":1473},[34,27451,27452,27456,27460],{},[37,27453,27454,1483],{},[56,27455,1482],{"href":1481},[37,27457,27458,1490],{},[56,27459,1489],{"href":1488},[37,27461,27462,1502],{},[56,27463,1160],{"href":1159},[1504,27465,27466],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":27468},[27469,27470,27471,27472,27473,27474,27475],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":27438,"depth":179,"text":27439},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with React",{},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart",{"title":201,"description":27476},"docs\u002Fguide\u002Freact\u002F1.quickstart","DjKnvxKA6pI39w3rJToAkXf726BkOD4ePo2bvJU0wOI",{"id":27483,"title":27446,"body":27484,"category":2240,"description":28373,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":28375,"navigation":194,"path":27445,"seo":28376,"stem":28377,"__hash__":28378},"guide\u002Fdocs\u002Fguide\u002Freact\u002Fssr.md",{"type":8,"value":27485,"toc":28364},[27486,27490,27493,27500,27503,27612,27615,27705,27710,27720,27726,27851,27854,27858,27864,27982,27986,27989,28096,28187,28191,28194,28361],[11,27487,27489],{"id":27488},"ssr-with-nextjs-react","SSR with Next.js \u002F React",[15,27491,27492],{},"Shaders uses WebGPU, which requires a browser environment and cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled React applications.",[23,27494,27496,27497],{"id":27495},"app-router-use-client","App Router: ",[99,27498,27499],{},"'use client'",[15,27501,27502],{},"In Next.js App Router, create a client component wrapper:",[212,27504,27506],{"className":409,"code":27505,"language":411,"meta":178,"style":178},"\u002F\u002F components\u002FMyShader.jsx\n'use client'\n\nimport { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n\nexport default function MyShader() {\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,27507,27508,27513,27518,27522,27532,27536,27548,27554,27568,27588,27596,27604,27608],{"__ignoreMap":178},[220,27509,27510],{"class":222,"line":223},[220,27511,27512],{"class":609},"\u002F\u002F components\u002FMyShader.jsx\n",[220,27514,27515],{"class":222,"line":179},[220,27516,27517],{"class":230},"'use client'\n",[220,27519,27520],{"class":222,"line":389},[220,27521,647],{"emptyLinePlaceholder":194},[220,27523,27524,27526,27528,27530],{"class":222,"line":399},[220,27525,261],{"class":260},[220,27527,265],{"class":264},[220,27529,268],{"class":260},[220,27531,287],{"class":230},[220,27533,27534],{"class":222,"line":644},[220,27535,647],{"emptyLinePlaceholder":194},[220,27537,27538,27540,27542,27544,27546],{"class":222,"line":650},[220,27539,27233],{"class":260},[220,27541,27236],{"class":260},[220,27543,11941],{"class":260},[220,27545,27241],{"class":226},[220,27547,2647],{"class":264},[220,27549,27550,27552],{"class":222,"line":656},[220,27551,2739],{"class":260},[220,27553,2742],{"class":264},[220,27555,27556,27558,27560,27562,27564,27566],{"class":222,"line":673},[220,27557,2550],{"class":264},[220,27559,347],{"class":420},[220,27561,423],{"class":226},[220,27563,353],{"class":260},[220,27565,356],{"class":230},[220,27567,359],{"class":264},[220,27569,27570,27572,27574,27576,27578,27580,27582,27584,27586],{"class":222,"line":682},[220,27571,2813],{"class":264},[220,27573,367],{"class":420},[220,27575,370],{"class":226},[220,27577,353],{"class":260},[220,27579,375],{"class":230},[220,27581,378],{"class":226},[220,27583,353],{"class":260},[220,27585,383],{"class":230},[220,27587,386],{"class":264},[220,27589,27590,27592,27594],{"class":222,"line":691},[220,27591,2813],{"class":264},[220,27593,394],{"class":420},[220,27595,386],{"class":264},[220,27597,27598,27600,27602],{"class":222,"line":696},[220,27599,2828],{"class":264},[220,27601,347],{"class":420},[220,27603,359],{"class":264},[220,27605,27606],{"class":222,"line":702},[220,27607,2837],{"class":264},[220,27609,27610],{"class":222,"line":718},[220,27611,749],{"class":264},[15,27613,27614],{},"Then use it in a Server Component:",[212,27616,27618],{"className":409,"code":27617,"language":411,"meta":178,"style":178},"\u002F\u002F app\u002Fpage.jsx (Server Component)\nimport MyShader from '@\u002Fcomponents\u002FMyShader'\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader \u002F>\n \u003Ch1>Your content\u003C\u002Fh1>\n \u003C\u002Fmain>\n )\n}\n",[99,27619,27620,27625,27637,27641,27654,27660,27668,27677,27689,27697,27701],{"__ignoreMap":178},[220,27621,27622],{"class":222,"line":223},[220,27623,27624],{"class":609},"\u002F\u002F app\u002Fpage.jsx (Server Component)\n",[220,27626,27627,27629,27632,27634],{"class":222,"line":179},[220,27628,261],{"class":260},[220,27630,27631],{"class":264}," MyShader ",[220,27633,268],{"class":260},[220,27635,27636],{"class":230}," '@\u002Fcomponents\u002FMyShader'\n",[220,27638,27639],{"class":222,"line":389},[220,27640,647],{"emptyLinePlaceholder":194},[220,27642,27643,27645,27647,27649,27652],{"class":222,"line":399},[220,27644,27233],{"class":260},[220,27646,27236],{"class":260},[220,27648,11941],{"class":260},[220,27650,27651],{"class":226}," Page",[220,27653,2647],{"class":264},[220,27655,27656,27658],{"class":222,"line":644},[220,27657,2739],{"class":260},[220,27659,2742],{"class":264},[220,27661,27662,27664,27666],{"class":222,"line":650},[220,27663,2550],{"class":264},[220,27665,12638],{"class":346},[220,27667,359],{"class":264},[220,27669,27670,27672,27675],{"class":222,"line":656},[220,27671,2813],{"class":264},[220,27673,27674],{"class":420},"MyShader",[220,27676,386],{"class":264},[220,27678,27679,27681,27683,27685,27687],{"class":222,"line":673},[220,27680,2813],{"class":264},[220,27682,11],{"class":346},[220,27684,12926],{"class":264},[220,27686,11],{"class":346},[220,27688,359],{"class":264},[220,27690,27691,27693,27695],{"class":222,"line":682},[220,27692,2828],{"class":264},[220,27694,12638],{"class":346},[220,27696,359],{"class":264},[220,27698,27699],{"class":222,"line":691},[220,27700,2837],{"class":264},[220,27702,27703],{"class":222,"line":696},[220,27704,749],{"class":264},[15,27706,1839,27707,27709],{},[99,27708,27499],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,27711,27496,27713,27716,27717],{"id":27712},"app-router-nextdynamic-with-ssr-false",[99,27714,27715],{},"next\u002Fdynamic"," with ",[99,27718,27719],{},"ssr: false",[15,27721,27722,27723,27725],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[99,27724,27715],{}," to disable SSR:",[212,27727,27729],{"className":409,"code":27728,"language":411,"meta":178,"style":178},"\u002F\u002F app\u002Fpage.jsx\nimport dynamic from 'next\u002Fdynamic'\n\nconst MyShader = dynamic(\n () => import('@\u002Fcomponents\u002FMyShader'),\n { ssr: false }\n)\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader \u002F>\n \u003C\u002Fmain>\n )\n}\n",[99,27730,27731,27736,27748,27752,27766,27784,27793,27797,27801,27813,27819,27827,27835,27843,27847],{"__ignoreMap":178},[220,27732,27733],{"class":222,"line":223},[220,27734,27735],{"class":609},"\u002F\u002F app\u002Fpage.jsx\n",[220,27737,27738,27740,27743,27745],{"class":222,"line":179},[220,27739,261],{"class":260},[220,27741,27742],{"class":264}," dynamic ",[220,27744,268],{"class":260},[220,27746,27747],{"class":230}," 'next\u002Fdynamic'\n",[220,27749,27750],{"class":222,"line":389},[220,27751,647],{"emptyLinePlaceholder":194},[220,27753,27754,27756,27758,27760,27763],{"class":222,"line":399},[220,27755,1735],{"class":260},[220,27757,27241],{"class":420},[220,27759,1741],{"class":260},[220,27761,27762],{"class":226}," dynamic",[220,27764,27765],{"class":264},"(\n",[220,27767,27768,27771,27773,27776,27778,27781],{"class":222,"line":644},[220,27769,27770],{"class":264}," () ",[220,27772,2762],{"class":260},[220,27774,27775],{"class":260}," import",[220,27777,2626],{"class":264},[220,27779,27780],{"class":230},"'@\u002Fcomponents\u002FMyShader'",[220,27782,27783],{"class":264},"),\n",[220,27785,27786,27789,27791],{"class":222,"line":650},[220,27787,27788],{"class":264}," { ssr: ",[220,27790,2629],{"class":420},[220,27792,5671],{"class":264},[220,27794,27795],{"class":222,"line":656},[220,27796,2632],{"class":264},[220,27798,27799],{"class":222,"line":673},[220,27800,647],{"emptyLinePlaceholder":194},[220,27802,27803,27805,27807,27809,27811],{"class":222,"line":682},[220,27804,27233],{"class":260},[220,27806,27236],{"class":260},[220,27808,11941],{"class":260},[220,27810,27651],{"class":226},[220,27812,2647],{"class":264},[220,27814,27815,27817],{"class":222,"line":691},[220,27816,2739],{"class":260},[220,27818,2742],{"class":264},[220,27820,27821,27823,27825],{"class":222,"line":696},[220,27822,2550],{"class":264},[220,27824,12638],{"class":346},[220,27826,359],{"class":264},[220,27828,27829,27831,27833],{"class":222,"line":702},[220,27830,2813],{"class":264},[220,27832,27674],{"class":420},[220,27834,386],{"class":264},[220,27836,27837,27839,27841],{"class":222,"line":718},[220,27838,2828],{"class":264},[220,27840,12638],{"class":346},[220,27842,359],{"class":264},[220,27844,27845],{"class":222,"line":727},[220,27846,2837],{"class":264},[220,27848,27849],{"class":222,"line":2664},[220,27850,749],{"class":264},[15,27852,27853],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,27855,27857],{"id":27856},"pages-router","Pages Router",[15,27859,27860,27861,27863],{},"In the Pages Router, the same ",[99,27862,27715],{}," approach works:",[212,27865,27867],{"className":409,"code":27866,"language":411,"meta":178,"style":178},"\u002F\u002F pages\u002Findex.jsx\nimport dynamic from 'next\u002Fdynamic'\n\nconst MyShader = dynamic(\n () => import('..\u002Fcomponents\u002FMyShader'),\n { ssr: false }\n)\n\nexport default function Home() {\n return (\n \u003Cdiv>\n \u003CMyShader \u002F>\n \u003C\u002Fdiv>\n )\n}\n",[99,27868,27869,27874,27884,27888,27900,27915,27923,27927,27931,27944,27950,27958,27966,27974,27978],{"__ignoreMap":178},[220,27870,27871],{"class":222,"line":223},[220,27872,27873],{"class":609},"\u002F\u002F pages\u002Findex.jsx\n",[220,27875,27876,27878,27880,27882],{"class":222,"line":179},[220,27877,261],{"class":260},[220,27879,27742],{"class":264},[220,27881,268],{"class":260},[220,27883,27747],{"class":230},[220,27885,27886],{"class":222,"line":389},[220,27887,647],{"emptyLinePlaceholder":194},[220,27889,27890,27892,27894,27896,27898],{"class":222,"line":399},[220,27891,1735],{"class":260},[220,27893,27241],{"class":420},[220,27895,1741],{"class":260},[220,27897,27762],{"class":226},[220,27899,27765],{"class":264},[220,27901,27902,27904,27906,27908,27910,27913],{"class":222,"line":644},[220,27903,27770],{"class":264},[220,27905,2762],{"class":260},[220,27907,27775],{"class":260},[220,27909,2626],{"class":264},[220,27911,27912],{"class":230},"'..\u002Fcomponents\u002FMyShader'",[220,27914,27783],{"class":264},[220,27916,27917,27919,27921],{"class":222,"line":650},[220,27918,27788],{"class":264},[220,27920,2629],{"class":420},[220,27922,5671],{"class":264},[220,27924,27925],{"class":222,"line":656},[220,27926,2632],{"class":264},[220,27928,27929],{"class":222,"line":673},[220,27930,647],{"emptyLinePlaceholder":194},[220,27932,27933,27935,27937,27939,27942],{"class":222,"line":682},[220,27934,27233],{"class":260},[220,27936,27236],{"class":260},[220,27938,11941],{"class":260},[220,27940,27941],{"class":226}," Home",[220,27943,2647],{"class":264},[220,27945,27946,27948],{"class":222,"line":691},[220,27947,2739],{"class":260},[220,27949,2742],{"class":264},[220,27951,27952,27954,27956],{"class":222,"line":696},[220,27953,2550],{"class":264},[220,27955,3398],{"class":346},[220,27957,359],{"class":264},[220,27959,27960,27962,27964],{"class":222,"line":702},[220,27961,2813],{"class":264},[220,27963,27674],{"class":420},[220,27965,386],{"class":264},[220,27967,27968,27970,27972],{"class":222,"line":718},[220,27969,2828],{"class":264},[220,27971,3398],{"class":346},[220,27973,359],{"class":264},[220,27975,27976],{"class":222,"line":727},[220,27977,2837],{"class":264},[220,27979,27980],{"class":222,"line":2664},[220,27981,749],{"class":264},[23,27983,27985],{"id":27984},"in-a-root-layout","In a root layout",[15,27987,27988],{},"If you want a shader to appear across all pages (for example, a full-page background), add it to your root layout as a client component:",[212,27990,27992],{"className":409,"code":27991,"language":411,"meta":178,"style":178},"\u002F\u002F app\u002Flayout.jsx\nimport BackgroundShader from '@\u002Fcomponents\u002FBackgroundShader'\n\nexport default function RootLayout({ children }) {\n return (\n \u003Chtml>\n \u003Cbody>\n \u003CBackgroundShader \u002F>\n {children}\n \u003C\u002Fbody>\n \u003C\u002Fhtml>\n )\n}\n",[99,27993,27994,27999,28011,28015,28035,28041,28049,28058,28067,28072,28080,28088,28092],{"__ignoreMap":178},[220,27995,27996],{"class":222,"line":223},[220,27997,27998],{"class":609},"\u002F\u002F app\u002Flayout.jsx\n",[220,28000,28001,28003,28006,28008],{"class":222,"line":179},[220,28002,261],{"class":260},[220,28004,28005],{"class":264}," BackgroundShader ",[220,28007,268],{"class":260},[220,28009,28010],{"class":230}," '@\u002Fcomponents\u002FBackgroundShader'\n",[220,28012,28013],{"class":222,"line":389},[220,28014,647],{"emptyLinePlaceholder":194},[220,28016,28017,28019,28021,28023,28026,28029,28032],{"class":222,"line":399},[220,28018,27233],{"class":260},[220,28020,27236],{"class":260},[220,28022,11941],{"class":260},[220,28024,28025],{"class":226}," RootLayout",[220,28027,28028],{"class":264},"({ ",[220,28030,28031],{"class":3621},"children",[220,28033,28034],{"class":264}," }) {\n",[220,28036,28037,28039],{"class":222,"line":644},[220,28038,2739],{"class":260},[220,28040,2742],{"class":264},[220,28042,28043,28045,28047],{"class":222,"line":650},[220,28044,2550],{"class":264},[220,28046,12881],{"class":346},[220,28048,359],{"class":264},[220,28050,28051,28053,28056],{"class":222,"line":656},[220,28052,2813],{"class":264},[220,28054,28055],{"class":346},"body",[220,28057,359],{"class":264},[220,28059,28060,28062,28065],{"class":222,"line":673},[220,28061,10809],{"class":264},[220,28063,28064],{"class":420},"BackgroundShader",[220,28066,386],{"class":264},[220,28068,28069],{"class":222,"line":682},[220,28070,28071],{"class":264}," {children}\n",[220,28073,28074,28076,28078],{"class":222,"line":691},[220,28075,10914],{"class":264},[220,28077,28055],{"class":346},[220,28079,359],{"class":264},[220,28081,28082,28084,28086],{"class":222,"line":696},[220,28083,2828],{"class":264},[220,28085,12881],{"class":346},[220,28087,359],{"class":264},[220,28089,28090],{"class":222,"line":702},[220,28091,2837],{"class":264},[220,28093,28094],{"class":222,"line":718},[220,28095,749],{"class":264},[212,28097,28099],{"className":409,"code":28098,"language":411,"meta":178,"style":178},"\u002F\u002F components\u002FBackgroundShader.jsx\n'use client'\n\nimport { Shader, Aurora } from 'shaders\u002Freact'\n\nexport default function BackgroundShader() {\n return (\n \u003CShader className=\"fixed inset-0 -z-10 pointer-events-none\">\n \u003CAurora \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,28100,28101,28106,28110,28114,28125,28129,28142,28148,28163,28171,28179,28183],{"__ignoreMap":178},[220,28102,28103],{"class":222,"line":223},[220,28104,28105],{"class":609},"\u002F\u002F components\u002FBackgroundShader.jsx\n",[220,28107,28108],{"class":222,"line":179},[220,28109,27517],{"class":230},[220,28111,28112],{"class":222,"line":389},[220,28113,647],{"emptyLinePlaceholder":194},[220,28115,28116,28118,28121,28123],{"class":222,"line":399},[220,28117,261],{"class":260},[220,28119,28120],{"class":264}," { Shader, Aurora } ",[220,28122,268],{"class":260},[220,28124,287],{"class":230},[220,28126,28127],{"class":222,"line":644},[220,28128,647],{"emptyLinePlaceholder":194},[220,28130,28131,28133,28135,28137,28140],{"class":222,"line":650},[220,28132,27233],{"class":260},[220,28134,27236],{"class":260},[220,28136,11941],{"class":260},[220,28138,28139],{"class":226}," BackgroundShader",[220,28141,2647],{"class":264},[220,28143,28144,28146],{"class":222,"line":656},[220,28145,2739],{"class":260},[220,28147,2742],{"class":264},[220,28149,28150,28152,28154,28156,28158,28161],{"class":222,"line":673},[220,28151,2550],{"class":264},[220,28153,347],{"class":420},[220,28155,423],{"class":226},[220,28157,353],{"class":260},[220,28159,28160],{"class":230},"\"fixed inset-0 -z-10 pointer-events-none\"",[220,28162,359],{"class":264},[220,28164,28165,28167,28169],{"class":222,"line":682},[220,28166,2813],{"class":264},[220,28168,12617],{"class":420},[220,28170,386],{"class":264},[220,28172,28173,28175,28177],{"class":222,"line":691},[220,28174,2828],{"class":264},[220,28176,347],{"class":420},[220,28178,359],{"class":264},[220,28180,28181],{"class":222,"line":696},[220,28182,2837],{"class":264},[220,28184,28185],{"class":222,"line":702},[220,28186,749],{"class":264},[23,28188,28190],{"id":28189},"react-without-nextjs","React (without Next.js)",[15,28192,28193],{},"In a React SSR setup without Next.js, use a mounted state guard:",[212,28195,28197],{"className":409,"code":28196,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, LinearGradient } from 'shaders\u002Freact'\n\nexport default function MyShader() {\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n setMounted(true)\n }, [])\n\n if (!mounted) return null\n\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,28198,28199,28209,28219,28223,28235,28261,28265,28275,28286,28290,28294,28313,28317,28323,28337,28345,28353,28357],{"__ignoreMap":178},[220,28200,28201,28203,28205,28207],{"class":222,"line":223},[220,28202,261],{"class":260},[220,28204,3540],{"class":264},[220,28206,268],{"class":260},[220,28208,2687],{"class":230},[220,28210,28211,28213,28215,28217],{"class":222,"line":179},[220,28212,261],{"class":260},[220,28214,27220],{"class":264},[220,28216,268],{"class":260},[220,28218,287],{"class":230},[220,28220,28221],{"class":222,"line":389},[220,28222,647],{"emptyLinePlaceholder":194},[220,28224,28225,28227,28229,28231,28233],{"class":222,"line":399},[220,28226,27233],{"class":260},[220,28228,27236],{"class":260},[220,28230,11941],{"class":260},[220,28232,27241],{"class":226},[220,28234,2647],{"class":264},[220,28236,28237,28239,28241,28244,28246,28249,28251,28253,28255,28257,28259],{"class":222,"line":644},[220,28238,2705],{"class":260},[220,28240,2708],{"class":264},[220,28242,28243],{"class":420},"mounted",[220,28245,1895],{"class":264},[220,28247,28248],{"class":420},"setMounted",[220,28250,2719],{"class":264},[220,28252,353],{"class":260},[220,28254,2724],{"class":226},[220,28256,2626],{"class":264},[220,28258,2629],{"class":420},[220,28260,2632],{"class":264},[220,28262,28263],{"class":222,"line":650},[220,28264,647],{"emptyLinePlaceholder":194},[220,28266,28267,28269,28271,28273],{"class":222,"line":656},[220,28268,3597],{"class":226},[220,28270,3600],{"class":264},[220,28272,2762],{"class":260},[220,28274,3241],{"class":264},[220,28276,28277,28280,28282,28284],{"class":222,"line":673},[220,28278,28279],{"class":226}," setMounted",[220,28281,2626],{"class":264},[220,28283,2332],{"class":420},[220,28285,2632],{"class":264},[220,28287,28288],{"class":222,"line":682},[220,28289,3637],{"class":264},[220,28291,28292],{"class":222,"line":691},[220,28293,647],{"emptyLinePlaceholder":194},[220,28295,28296,28299,28301,28304,28307,28310],{"class":222,"line":696},[220,28297,28298],{"class":260}," if",[220,28300,3506],{"class":264},[220,28302,28303],{"class":260},"!",[220,28305,28306],{"class":264},"mounted) ",[220,28308,28309],{"class":260},"return",[220,28311,28312],{"class":420}," null\n",[220,28314,28315],{"class":222,"line":702},[220,28316,647],{"emptyLinePlaceholder":194},[220,28318,28319,28321],{"class":222,"line":718},[220,28320,2739],{"class":260},[220,28322,2742],{"class":264},[220,28324,28325,28327,28329,28331,28333,28335],{"class":222,"line":727},[220,28326,2550],{"class":264},[220,28328,347],{"class":420},[220,28330,423],{"class":226},[220,28332,353],{"class":260},[220,28334,356],{"class":230},[220,28336,359],{"class":264},[220,28338,28339,28341,28343],{"class":222,"line":2664},[220,28340,2813],{"class":264},[220,28342,367],{"class":420},[220,28344,386],{"class":264},[220,28346,28347,28349,28351],{"class":222,"line":3522},[220,28348,2828],{"class":264},[220,28350,347],{"class":420},[220,28352,359],{"class":264},[220,28354,28355],{"class":222,"line":9662},[220,28356,2837],{"class":264},[220,28358,28359],{"class":222,"line":9673},[220,28360,749],{"class":264},[1504,28362,28363],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":28365},[28366,28368,28370,28371,28372],{"id":27495,"depth":179,"text":28367},"App Router: 'use client'",{"id":27712,"depth":179,"text":28369},"App Router: next\u002Fdynamic with ssr: false",{"id":27856,"depth":179,"text":27857},{"id":27984,"depth":179,"text":27985},{"id":28189,"depth":179,"text":28190},"Using Shaders in Next.js and React SSR applications","server",{},{"title":27446,"description":28373},"docs\u002Fguide\u002Freact\u002Fssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":28380,"title":201,"body":28381,"category":188,"description":28990,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":28991,"navigation":194,"path":28992,"seo":28993,"stem":28994,"__hash__":28995},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002F1.quickstart.md",{"type":8,"value":28382,"toc":28981},[28383,28387,28389,28401,28403,28417,28419,28421,28475,28477,28483,28485,28496,28629,28639,28641,28644,28716,28723,28946,28949,28953,28957,28963,28965,28979],[11,28384,28386],{"id":28385},"quickstart-solid","Quickstart (Solid)",[23,28388,26219],{"id":26218},[212,28390,28391],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,28392,28393],{"__ignoreMap":178},[220,28394,28395,28397,28399],{"class":222,"line":223},[220,28396,227],{"class":226},[220,28398,231],{"class":230},[220,28400,234],{"class":230},[23,28402,26869],{"id":26868},[212,28404,28405],{"className":251,"code":306,"language":253,"meta":178,"style":178},[99,28406,28407],{"__ignoreMap":178},[220,28408,28409,28411,28413,28415],{"class":222,"line":223},[220,28410,261],{"class":260},[220,28412,265],{"class":264},[220,28414,268],{"class":260},[220,28416,319],{"class":230},[23,28418,323],{"id":322},[15,28420,26888],{},[212,28422,28423],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,28424,28425,28439,28459,28467],{"__ignoreMap":178},[220,28426,28427,28429,28431,28433,28435,28437],{"class":222,"line":223},[220,28428,343],{"class":264},[220,28430,347],{"class":420},[220,28432,350],{"class":226},[220,28434,353],{"class":260},[220,28436,356],{"class":230},[220,28438,359],{"class":264},[220,28440,28441,28443,28445,28447,28449,28451,28453,28455,28457],{"class":222,"line":179},[220,28442,364],{"class":264},[220,28444,367],{"class":420},[220,28446,370],{"class":226},[220,28448,353],{"class":260},[220,28450,375],{"class":230},[220,28452,378],{"class":226},[220,28454,353],{"class":260},[220,28456,383],{"class":230},[220,28458,386],{"class":264},[220,28460,28461,28463,28465],{"class":222,"line":389},[220,28462,364],{"class":264},[220,28464,394],{"class":420},[220,28466,386],{"class":264},[220,28468,28469,28471,28473],{"class":222,"line":399},[220,28470,402],{"class":264},[220,28472,347],{"class":420},[220,28474,359],{"class":264},[19,28476],{":preset":578},[15,28478,28479,583,28481,26951],{},[99,28480,101],{},[99,28482,586],{},[23,28484,594],{"id":593},[15,28486,1839,28487,26958,28489,18745,28492,26964,28494,590],{},[99,28488,586],{},[99,28490,28491],{},"class",[99,28493,1504],{},[99,28495,101],{},[212,28497,28499],{"className":468,"code":28498,"language":469,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fluid with aspect ratio *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,28500,28501,28509,28523,28531,28539,28543,28551,28571,28579,28587,28591,28599,28613,28621],{"__ignoreMap":178},[220,28502,28503,28505,28507],{"class":222,"line":223},[220,28504,743],{"class":264},[220,28506,746],{"class":609},[220,28508,749],{"class":264},[220,28510,28511,28513,28515,28517,28519,28521],{"class":222,"line":179},[220,28512,343],{"class":264},[220,28514,347],{"class":420},[220,28516,350],{"class":226},[220,28518,353],{"class":260},[220,28520,623],{"class":230},[220,28522,359],{"class":264},[220,28524,28525,28527,28529],{"class":222,"line":389},[220,28526,364],{"class":264},[220,28528,367],{"class":420},[220,28530,386],{"class":264},[220,28532,28533,28535,28537],{"class":222,"line":399},[220,28534,402],{"class":264},[220,28536,347],{"class":420},[220,28538,359],{"class":264},[220,28540,28541],{"class":222,"line":644},[220,28542,647],{"emptyLinePlaceholder":194},[220,28544,28545,28547,28549],{"class":222,"line":650},[220,28546,743],{"class":264},[220,28548,790],{"class":609},[220,28550,749],{"class":264},[220,28552,28553,28555,28557,28559,28561,28563,28565,28567,28569],{"class":222,"line":656},[220,28554,343],{"class":264},[220,28556,347],{"class":420},[220,28558,663],{"class":226},[220,28560,353],{"class":260},[220,28562,805],{"class":264},[220,28564,808],{"class":230},[220,28566,811],{"class":264},[220,28568,814],{"class":230},[220,28570,817],{"class":264},[220,28572,28573,28575,28577],{"class":222,"line":673},[220,28574,364],{"class":264},[220,28576,367],{"class":420},[220,28578,386],{"class":264},[220,28580,28581,28583,28585],{"class":222,"line":682},[220,28582,402],{"class":264},[220,28584,347],{"class":420},[220,28586,359],{"class":264},[220,28588,28589],{"class":222,"line":691},[220,28590,647],{"emptyLinePlaceholder":194},[220,28592,28593,28595,28597],{"class":222,"line":696},[220,28594,743],{"class":264},[220,28596,27068],{"class":609},[220,28598,749],{"class":264},[220,28600,28601,28603,28605,28607,28609,28611],{"class":222,"line":702},[220,28602,343],{"class":264},[220,28604,347],{"class":420},[220,28606,350],{"class":226},[220,28608,353],{"class":260},[220,28610,713],{"class":230},[220,28612,359],{"class":264},[220,28614,28615,28617,28619],{"class":222,"line":718},[220,28616,364],{"class":264},[220,28618,367],{"class":420},[220,28620,386],{"class":264},[220,28622,28623,28625,28627],{"class":222,"line":727},[220,28624,402],{"class":264},[220,28626,347],{"class":420},[220,28628,359],{"class":264},[15,28630,27103,28631,18745,28633,27108,28635,27111,28637,27114],{},[99,28632,28491],{},[99,28634,1504],{},[99,28636,101],{},[99,28638,586],{},[23,28640,1153],{"id":1152},[15,28642,28643],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[212,28645,28646],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,28647,28648,28662,28668,28676,28684,28696,28704,28708],{"__ignoreMap":178},[220,28649,28650,28652,28654,28656,28658,28660],{"class":222,"line":223},[220,28651,343],{"class":264},[220,28653,347],{"class":420},[220,28655,350],{"class":226},[220,28657,353],{"class":260},[220,28659,356],{"class":230},[220,28661,359],{"class":264},[220,28663,28664,28666],{"class":222,"line":179},[220,28665,364],{"class":264},[220,28667,1189],{"class":420},[220,28669,28670,28672,28674],{"class":222,"line":389},[220,28671,1194],{"class":226},[220,28673,353],{"class":260},[220,28675,1199],{"class":230},[220,28677,28678,28680,28682],{"class":222,"line":399},[220,28679,1204],{"class":226},[220,28681,353],{"class":260},[220,28683,1209],{"class":230},[220,28685,28686,28688,28690,28692,28694],{"class":222,"line":644},[220,28687,1288],{"class":226},[220,28689,353],{"class":260},[220,28691,743],{"class":264},[220,28693,1295],{"class":420},[220,28695,749],{"class":264},[220,28697,28698,28700,28702],{"class":222,"line":650},[220,28699,1302],{"class":226},[220,28701,353],{"class":260},[220,28703,1229],{"class":230},[220,28705,28706],{"class":222,"line":656},[220,28707,1234],{"class":264},[220,28709,28710,28712,28714],{"class":222,"line":673},[220,28711,402],{"class":264},[220,28713,347],{"class":420},[220,28715,359],{"class":264},[15,28717,28718,28719,28722],{},"Props also accept signals — ",[99,28720,28721],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[212,28724,28726],{"className":468,"code":28725,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function MyShader() {\n const [angle, setAngle] = createSignal(0)\n\n return (\n \u003C>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" angle={angle()} \u002F>\n \u003C\u002FShader>\n\n \u003Cinput\n type=\"range\"\n min={0}\n max={360}\n value={angle()}\n onInput={e => setAngle(Number(e.currentTarget.value))}\n \u002F>\n \u003C\u002F>\n )\n}\n",[99,28727,28728,28738,28748,28752,28764,28788,28792,28798,28802,28816,28845,28853,28857,28863,28871,28883,28895,28908,28930,28934,28938,28942],{"__ignoreMap":178},[220,28729,28730,28732,28734,28736],{"class":222,"line":223},[220,28731,261],{"class":260},[220,28733,2982],{"class":264},[220,28735,268],{"class":260},[220,28737,2987],{"class":230},[220,28739,28740,28742,28744,28746],{"class":222,"line":179},[220,28741,261],{"class":260},[220,28743,27220],{"class":264},[220,28745,268],{"class":260},[220,28747,319],{"class":230},[220,28749,28750],{"class":222,"line":389},[220,28751,647],{"emptyLinePlaceholder":194},[220,28753,28754,28756,28758,28760,28762],{"class":222,"line":399},[220,28755,27233],{"class":260},[220,28757,27236],{"class":260},[220,28759,11941],{"class":260},[220,28761,27241],{"class":226},[220,28763,2647],{"class":264},[220,28765,28766,28768,28770,28772,28774,28776,28778,28780,28782,28784,28786],{"class":222,"line":644},[220,28767,2705],{"class":260},[220,28769,2708],{"class":264},[220,28771,10764],{"class":420},[220,28773,1895],{"class":264},[220,28775,10769],{"class":420},[220,28777,2719],{"class":264},[220,28779,353],{"class":260},[220,28781,3018],{"class":226},[220,28783,2626],{"class":264},[220,28785,8673],{"class":420},[220,28787,2632],{"class":264},[220,28789,28790],{"class":222,"line":650},[220,28791,647],{"emptyLinePlaceholder":194},[220,28793,28794,28796],{"class":222,"line":656},[220,28795,2739],{"class":260},[220,28797,2742],{"class":264},[220,28799,28800],{"class":222,"line":673},[220,28801,10796],{"class":264},[220,28803,28804,28806,28808,28810,28812,28814],{"class":222,"line":682},[220,28805,2813],{"class":264},[220,28807,347],{"class":420},[220,28809,350],{"class":226},[220,28811,353],{"class":260},[220,28813,356],{"class":230},[220,28815,359],{"class":264},[220,28817,28818,28820,28822,28824,28826,28828,28830,28832,28834,28836,28838,28840,28842],{"class":222,"line":691},[220,28819,10809],{"class":264},[220,28821,367],{"class":420},[220,28823,370],{"class":226},[220,28825,353],{"class":260},[220,28827,27308],{"class":230},[220,28829,378],{"class":226},[220,28831,353],{"class":260},[220,28833,27315],{"class":230},[220,28835,10532],{"class":226},[220,28837,353],{"class":260},[220,28839,743],{"class":264},[220,28841,10764],{"class":226},[220,28843,28844],{"class":264},"()} \u002F>\n",[220,28846,28847,28849,28851],{"class":222,"line":696},[220,28848,10914],{"class":264},[220,28850,347],{"class":420},[220,28852,359],{"class":264},[220,28854,28855],{"class":222,"line":702},[220,28856,647],{"emptyLinePlaceholder":194},[220,28858,28859,28861],{"class":222,"line":718},[220,28860,2813],{"class":264},[220,28862,27341],{"class":346},[220,28864,28865,28867,28869],{"class":222,"line":727},[220,28866,27346],{"class":226},[220,28868,353],{"class":260},[220,28870,27351],{"class":230},[220,28872,28873,28875,28877,28879,28881],{"class":222,"line":2664},[220,28874,27356],{"class":226},[220,28876,353],{"class":260},[220,28878,743],{"class":264},[220,28880,8673],{"class":420},[220,28882,749],{"class":264},[220,28884,28885,28887,28889,28891,28893],{"class":222,"line":3522},[220,28886,27369],{"class":226},[220,28888,353],{"class":260},[220,28890,743],{"class":264},[220,28892,27376],{"class":420},[220,28894,749],{"class":264},[220,28896,28897,28899,28901,28903,28905],{"class":222,"line":9662},[220,28898,27383],{"class":226},[220,28900,353],{"class":260},[220,28902,743],{"class":264},[220,28904,10764],{"class":226},[220,28906,28907],{"class":264},"()}\n",[220,28909,28910,28913,28915,28917,28919,28921,28923,28925,28927],{"class":222,"line":9673},[220,28911,28912],{"class":226}," onInput",[220,28914,353],{"class":260},[220,28916,743],{"class":264},[220,28918,26732],{"class":3621},[220,28920,10830],{"class":260},[220,28922,10823],{"class":226},[220,28924,2626],{"class":264},[220,28926,26751],{"class":226},[220,28928,28929],{"class":264},"(e.currentTarget.value))}\n",[220,28931,28932],{"class":222,"line":9678},[220,28933,17037],{"class":264},[220,28935,28936],{"class":222,"line":10999},[220,28937,10996],{"class":264},[220,28939,28940],{"class":222,"line":11004},[220,28941,2837],{"class":264},[220,28943,28944],{"class":222,"line":12075},[220,28945,749],{"class":264},[15,28947,28948],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,28950,26768,28951,26771],{},[56,28952,1160],{"href":1159},[23,28954,28956],{"id":28955},"using-with-solidstart-ssr","Using with SolidStart \u002F SSR",[15,28958,27442,28959,27447],{},[56,28960,28962],{"href":28961},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR",[23,28964,1474],{"id":1473},[34,28966,28967,28971,28975],{},[37,28968,28969,1483],{},[56,28970,1482],{"href":1481},[37,28972,28973,1490],{},[56,28974,1489],{"href":1488},[37,28976,28977,1502],{},[56,28978,1160],{"href":1159},[1504,28980,27466],{},{"title":178,"searchDepth":179,"depth":179,"links":28982},[28983,28984,28985,28986,28987,28988,28989],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":28955,"depth":179,"text":28956},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart",{"title":201,"description":28990},"docs\u002Fguide\u002Fsolid\u002F1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":28997,"title":28962,"body":28998,"category":2240,"description":29569,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":29570,"navigation":194,"path":28961,"seo":29571,"stem":29572,"__hash__":29573},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr.md",{"type":8,"value":28999,"toc":29560},[29000,29004,29007,29014,29020,29111,29227,29239,29246,29255,29357,29363,29369,29547,29551,29557],[11,29001,29003],{"id":29002},"ssr-with-solidstart-solid","SSR with SolidStart \u002F Solid",[15,29005,29006],{},"Shaders uses WebGPU, which requires a browser environment and cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled Solid applications.",[23,29008,29010,29013],{"id":29009},"clientonly-solidstart",[99,29011,29012],{},"clientOnly"," (SolidStart)",[15,29015,29016,29017,29019],{},"SolidStart provides a ",[99,29018,29012],{}," utility that defers a component entirely to the client. This is the recommended approach:",[212,29021,29023],{"className":409,"code":29022,"language":411,"meta":178,"style":178},"\u002F\u002F components\u002FMyShader.jsx\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function MyShader() {\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,29024,29025,29029,29039,29043,29055,29061,29075,29095,29103,29107],{"__ignoreMap":178},[220,29026,29027],{"class":222,"line":223},[220,29028,27512],{"class":609},[220,29030,29031,29033,29035,29037],{"class":222,"line":179},[220,29032,261],{"class":260},[220,29034,27220],{"class":264},[220,29036,268],{"class":260},[220,29038,319],{"class":230},[220,29040,29041],{"class":222,"line":389},[220,29042,647],{"emptyLinePlaceholder":194},[220,29044,29045,29047,29049,29051,29053],{"class":222,"line":399},[220,29046,27233],{"class":260},[220,29048,27236],{"class":260},[220,29050,11941],{"class":260},[220,29052,27241],{"class":226},[220,29054,2647],{"class":264},[220,29056,29057,29059],{"class":222,"line":644},[220,29058,2739],{"class":260},[220,29060,2742],{"class":264},[220,29062,29063,29065,29067,29069,29071,29073],{"class":222,"line":650},[220,29064,2550],{"class":264},[220,29066,347],{"class":420},[220,29068,350],{"class":226},[220,29070,353],{"class":260},[220,29072,356],{"class":230},[220,29074,359],{"class":264},[220,29076,29077,29079,29081,29083,29085,29087,29089,29091,29093],{"class":222,"line":656},[220,29078,2813],{"class":264},[220,29080,367],{"class":420},[220,29082,370],{"class":226},[220,29084,353],{"class":260},[220,29086,375],{"class":230},[220,29088,378],{"class":226},[220,29090,353],{"class":260},[220,29092,383],{"class":230},[220,29094,386],{"class":264},[220,29096,29097,29099,29101],{"class":222,"line":673},[220,29098,2828],{"class":264},[220,29100,347],{"class":420},[220,29102,359],{"class":264},[220,29104,29105],{"class":222,"line":682},[220,29106,2837],{"class":264},[220,29108,29109],{"class":222,"line":691},[220,29110,749],{"class":264},[212,29112,29114],{"className":409,"code":29113,"language":411,"meta":178,"style":178},"\u002F\u002F routes\u002Findex.jsx\nimport { clientOnly } from '@solidjs\u002Fstart'\n\nconst MyShader = clientOnly(() => import('..\u002Fcomponents\u002FMyShader'))\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader \u002F>\n \u003Ch1>Your content\u003C\u002Fh1>\n \u003C\u002Fmain>\n )\n}\n",[99,29115,29116,29121,29133,29137,29161,29165,29177,29183,29191,29199,29211,29219,29223],{"__ignoreMap":178},[220,29117,29118],{"class":222,"line":223},[220,29119,29120],{"class":609},"\u002F\u002F routes\u002Findex.jsx\n",[220,29122,29123,29125,29128,29130],{"class":222,"line":179},[220,29124,261],{"class":260},[220,29126,29127],{"class":264}," { clientOnly } ",[220,29129,268],{"class":260},[220,29131,29132],{"class":230}," '@solidjs\u002Fstart'\n",[220,29134,29135],{"class":222,"line":389},[220,29136,647],{"emptyLinePlaceholder":194},[220,29138,29139,29141,29143,29145,29148,29150,29152,29154,29156,29158],{"class":222,"line":399},[220,29140,1735],{"class":260},[220,29142,27241],{"class":420},[220,29144,1741],{"class":260},[220,29146,29147],{"class":226}," clientOnly",[220,29149,3600],{"class":264},[220,29151,2762],{"class":260},[220,29153,27775],{"class":260},[220,29155,2626],{"class":264},[220,29157,27912],{"class":230},[220,29159,29160],{"class":264},"))\n",[220,29162,29163],{"class":222,"line":644},[220,29164,647],{"emptyLinePlaceholder":194},[220,29166,29167,29169,29171,29173,29175],{"class":222,"line":650},[220,29168,27233],{"class":260},[220,29170,27236],{"class":260},[220,29172,11941],{"class":260},[220,29174,27651],{"class":226},[220,29176,2647],{"class":264},[220,29178,29179,29181],{"class":222,"line":656},[220,29180,2739],{"class":260},[220,29182,2742],{"class":264},[220,29184,29185,29187,29189],{"class":222,"line":673},[220,29186,2550],{"class":264},[220,29188,12638],{"class":346},[220,29190,359],{"class":264},[220,29192,29193,29195,29197],{"class":222,"line":682},[220,29194,2813],{"class":264},[220,29196,27674],{"class":420},[220,29198,386],{"class":264},[220,29200,29201,29203,29205,29207,29209],{"class":222,"line":691},[220,29202,2813],{"class":264},[220,29204,11],{"class":346},[220,29206,12926],{"class":264},[220,29208,11],{"class":346},[220,29210,359],{"class":264},[220,29212,29213,29215,29217],{"class":222,"line":696},[220,29214,2828],{"class":264},[220,29216,12638],{"class":346},[220,29218,359],{"class":264},[220,29220,29221],{"class":222,"line":702},[220,29222,2837],{"class":264},[220,29224,29225],{"class":222,"line":718},[220,29226,749],{"class":264},[15,29228,29229,29231,29232,29235,29236,29238],{},[99,29230,29012],{}," wraps the component in a ",[99,29233,29234],{},"Suspense"," boundary and only renders it in the browser — it returns ",[99,29237,16822],{}," during SSR.",[23,29240,29242,29245],{"id":29241},"isserver-guard",[99,29243,29244],{},"isServer"," guard",[15,29247,29248,29249,29251,29252,1554],{},"For finer control, check ",[99,29250,29244],{}," from ",[99,29253,29254],{},"solid-js\u002Fweb",[212,29256,29258],{"className":409,"code":29257,"language":411,"meta":178,"style":178},"import { isServer } from 'solid-js\u002Fweb'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function MyShader() {\n if (isServer) return null\n\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,29259,29260,29272,29282,29286,29298,29309,29313,29319,29333,29341,29349,29353],{"__ignoreMap":178},[220,29261,29262,29264,29267,29269],{"class":222,"line":223},[220,29263,261],{"class":260},[220,29265,29266],{"class":264}," { isServer } ",[220,29268,268],{"class":260},[220,29270,29271],{"class":230}," 'solid-js\u002Fweb'\n",[220,29273,29274,29276,29278,29280],{"class":222,"line":179},[220,29275,261],{"class":260},[220,29277,27220],{"class":264},[220,29279,268],{"class":260},[220,29281,319],{"class":230},[220,29283,29284],{"class":222,"line":389},[220,29285,647],{"emptyLinePlaceholder":194},[220,29287,29288,29290,29292,29294,29296],{"class":222,"line":399},[220,29289,27233],{"class":260},[220,29291,27236],{"class":260},[220,29293,11941],{"class":260},[220,29295,27241],{"class":226},[220,29297,2647],{"class":264},[220,29299,29300,29302,29305,29307],{"class":222,"line":644},[220,29301,28298],{"class":260},[220,29303,29304],{"class":264}," (isServer) ",[220,29306,28309],{"class":260},[220,29308,28312],{"class":420},[220,29310,29311],{"class":222,"line":650},[220,29312,647],{"emptyLinePlaceholder":194},[220,29314,29315,29317],{"class":222,"line":656},[220,29316,2739],{"class":260},[220,29318,2742],{"class":264},[220,29320,29321,29323,29325,29327,29329,29331],{"class":222,"line":673},[220,29322,2550],{"class":264},[220,29324,347],{"class":420},[220,29326,350],{"class":226},[220,29328,353],{"class":260},[220,29330,356],{"class":230},[220,29332,359],{"class":264},[220,29334,29335,29337,29339],{"class":222,"line":682},[220,29336,2813],{"class":264},[220,29338,367],{"class":420},[220,29340,386],{"class":264},[220,29342,29343,29345,29347],{"class":222,"line":691},[220,29344,2828],{"class":264},[220,29346,347],{"class":420},[220,29348,359],{"class":264},[220,29350,29351],{"class":222,"line":696},[220,29352,2837],{"class":264},[220,29354,29355],{"class":222,"line":702},[220,29356,749],{"class":264},[23,29358,29360,29245],{"id":29359},"onmount-guard",[99,29361,29362],{},"onMount",[15,29364,29365,29366,29368],{},"Alternatively, use ",[99,29367,29362],{}," with a signal to defer rendering until the component is mounted in the browser:",[212,29370,29372],{"className":409,"code":29371,"language":411,"meta":178,"style":178},"import { createSignal, onMount } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function MyShader() {\n const [mounted, setMounted] = createSignal(false)\n\n onMount(() => setMounted(true))\n\n return (\n \u003Cdiv class=\"w-full h-64\">\n {mounted() && (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n )}\n \u003C\u002Fdiv>\n )\n}\n",[99,29373,29374,29385,29395,29399,29411,29435,29439,29456,29460,29466,29480,29494,29508,29517,29526,29531,29539,29543],{"__ignoreMap":178},[220,29375,29376,29378,29381,29383],{"class":222,"line":223},[220,29377,261],{"class":260},[220,29379,29380],{"class":264}," { createSignal, onMount } ",[220,29382,268],{"class":260},[220,29384,2987],{"class":230},[220,29386,29387,29389,29391,29393],{"class":222,"line":179},[220,29388,261],{"class":260},[220,29390,27220],{"class":264},[220,29392,268],{"class":260},[220,29394,319],{"class":230},[220,29396,29397],{"class":222,"line":389},[220,29398,647],{"emptyLinePlaceholder":194},[220,29400,29401,29403,29405,29407,29409],{"class":222,"line":399},[220,29402,27233],{"class":260},[220,29404,27236],{"class":260},[220,29406,11941],{"class":260},[220,29408,27241],{"class":226},[220,29410,2647],{"class":264},[220,29412,29413,29415,29417,29419,29421,29423,29425,29427,29429,29431,29433],{"class":222,"line":644},[220,29414,2705],{"class":260},[220,29416,2708],{"class":264},[220,29418,28243],{"class":420},[220,29420,1895],{"class":264},[220,29422,28248],{"class":420},[220,29424,2719],{"class":264},[220,29426,353],{"class":260},[220,29428,3018],{"class":226},[220,29430,2626],{"class":264},[220,29432,2629],{"class":420},[220,29434,2632],{"class":264},[220,29436,29437],{"class":222,"line":650},[220,29438,647],{"emptyLinePlaceholder":194},[220,29440,29441,29443,29445,29447,29450,29452,29454],{"class":222,"line":656},[220,29442,3884],{"class":226},[220,29444,3600],{"class":264},[220,29446,2762],{"class":260},[220,29448,29449],{"class":226}," setMounted",[220,29451,2626],{"class":264},[220,29453,2332],{"class":420},[220,29455,29160],{"class":264},[220,29457,29458],{"class":222,"line":673},[220,29459,647],{"emptyLinePlaceholder":194},[220,29461,29462,29464],{"class":222,"line":682},[220,29463,2739],{"class":260},[220,29465,2742],{"class":264},[220,29467,29468,29470,29472,29474,29476,29478],{"class":222,"line":691},[220,29469,2550],{"class":264},[220,29471,3398],{"class":346},[220,29473,350],{"class":226},[220,29475,353],{"class":260},[220,29477,356],{"class":230},[220,29479,359],{"class":264},[220,29481,29482,29485,29487,29489,29492],{"class":222,"line":696},[220,29483,29484],{"class":264}," {",[220,29486,28243],{"class":226},[220,29488,3072],{"class":264},[220,29490,29491],{"class":260},"&&",[220,29493,2742],{"class":264},[220,29495,29496,29498,29500,29502,29504,29506],{"class":222,"line":702},[220,29497,10809],{"class":264},[220,29499,347],{"class":420},[220,29501,350],{"class":226},[220,29503,353],{"class":260},[220,29505,356],{"class":230},[220,29507,359],{"class":264},[220,29509,29510,29513,29515],{"class":222,"line":718},[220,29511,29512],{"class":264}," \u003C",[220,29514,367],{"class":420},[220,29516,386],{"class":264},[220,29518,29519,29522,29524],{"class":222,"line":727},[220,29520,29521],{"class":264}," \u003C\u002F",[220,29523,347],{"class":420},[220,29525,359],{"class":264},[220,29527,29528],{"class":222,"line":2664},[220,29529,29530],{"class":264}," )}\n",[220,29532,29533,29535,29537],{"class":222,"line":3522},[220,29534,2828],{"class":264},[220,29536,3398],{"class":346},[220,29538,359],{"class":264},[220,29540,29541],{"class":222,"line":9662},[220,29542,2837],{"class":264},[220,29544,29545],{"class":222,"line":9673},[220,29546,749],{"class":264},[23,29548,29550],{"id":29549},"solid-without-solidstart","Solid (without SolidStart)",[15,29552,29553,29554,29556],{},"In a Solid app without SolidStart, the ",[99,29555,29362],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1504,29558,29559],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":178,"searchDepth":179,"depth":179,"links":29561},[29562,29564,29566,29568],{"id":29009,"depth":179,"text":29563},"clientOnly (SolidStart)",{"id":29241,"depth":179,"text":29565},"isServer guard",{"id":29359,"depth":179,"text":29567},"onMount guard",{"id":29549,"depth":179,"text":29550},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":28962,"description":29569},"docs\u002Fguide\u002Fsolid\u002Fssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":29575,"title":201,"body":29576,"category":188,"description":30110,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":30111,"navigation":194,"path":30112,"seo":30113,"stem":30114,"__hash__":30115},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002F1.quickstart.md",{"type":8,"value":29577,"toc":30101},[29578,29582,29584,29596,29598,29612,29614,29616,29670,29672,29678,29680,29690,29806,29816,29818,29825,29896,29906,30064,30068,30072,30076,30082,30084,30098],[11,29579,29581],{"id":29580},"quickstart-svelte","Quickstart (Svelte)",[23,29583,26219],{"id":26218},[212,29585,29586],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,29587,29588],{"__ignoreMap":178},[220,29589,29590,29592,29594],{"class":222,"line":223},[220,29591,227],{"class":226},[220,29593,231],{"class":230},[220,29595,234],{"class":230},[23,29597,26869],{"id":26868},[212,29599,29600],{"className":251,"code":290,"language":253,"meta":178,"style":178},[99,29601,29602],{"__ignoreMap":178},[220,29603,29604,29606,29608,29610],{"class":222,"line":223},[220,29605,261],{"class":260},[220,29607,265],{"class":264},[220,29609,268],{"class":260},[220,29611,303],{"class":230},[23,29613,323],{"id":322},[15,29615,26888],{},[212,29617,29618],{"className":2844,"code":335,"language":2846,"meta":178,"style":178},[99,29619,29620,29634,29654,29662],{"__ignoreMap":178},[220,29621,29622,29624,29626,29628,29630,29632],{"class":222,"line":223},[220,29623,343],{"class":264},[220,29625,347],{"class":420},[220,29627,350],{"class":226},[220,29629,353],{"class":264},[220,29631,356],{"class":230},[220,29633,359],{"class":264},[220,29635,29636,29638,29640,29642,29644,29646,29648,29650,29652],{"class":222,"line":179},[220,29637,364],{"class":264},[220,29639,367],{"class":420},[220,29641,370],{"class":226},[220,29643,353],{"class":264},[220,29645,375],{"class":230},[220,29647,378],{"class":226},[220,29649,353],{"class":264},[220,29651,383],{"class":230},[220,29653,386],{"class":264},[220,29655,29656,29658,29660],{"class":222,"line":389},[220,29657,364],{"class":264},[220,29659,394],{"class":420},[220,29661,386],{"class":264},[220,29663,29664,29666,29668],{"class":222,"line":399},[220,29665,402],{"class":264},[220,29667,347],{"class":420},[220,29669,359],{"class":264},[19,29671],{":preset":578},[15,29673,29674,583,29676,26951],{},[99,29675,101],{},[99,29677,586],{},[23,29679,594],{"id":593},[15,29681,1839,29682,26958,29684,18745,29686,26964,29688,590],{},[99,29683,586],{},[99,29685,28491],{},[99,29687,1504],{},[99,29689,101],{},[212,29691,29693],{"className":2844,"code":29692,"language":2846,"meta":178,"style":178},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fluid with aspect ratio -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,29694,29695,29699,29713,29721,29729,29733,29737,29751,29759,29767,29771,29776,29790,29798],{"__ignoreMap":178},[220,29696,29697],{"class":222,"line":223},[220,29698,610],{"class":609},[220,29700,29701,29703,29705,29707,29709,29711],{"class":222,"line":179},[220,29702,343],{"class":264},[220,29704,347],{"class":420},[220,29706,350],{"class":226},[220,29708,353],{"class":264},[220,29710,623],{"class":230},[220,29712,359],{"class":264},[220,29714,29715,29717,29719],{"class":222,"line":389},[220,29716,364],{"class":264},[220,29718,367],{"class":420},[220,29720,386],{"class":264},[220,29722,29723,29725,29727],{"class":222,"line":399},[220,29724,402],{"class":264},[220,29726,347],{"class":420},[220,29728,359],{"class":264},[220,29730,29731],{"class":222,"line":644},[220,29732,647],{"emptyLinePlaceholder":194},[220,29734,29735],{"class":222,"line":650},[220,29736,653],{"class":609},[220,29738,29739,29741,29743,29745,29747,29749],{"class":222,"line":656},[220,29740,343],{"class":264},[220,29742,347],{"class":420},[220,29744,663],{"class":226},[220,29746,353],{"class":264},[220,29748,668],{"class":230},[220,29750,359],{"class":264},[220,29752,29753,29755,29757],{"class":222,"line":673},[220,29754,364],{"class":264},[220,29756,367],{"class":420},[220,29758,386],{"class":264},[220,29760,29761,29763,29765],{"class":222,"line":682},[220,29762,402],{"class":264},[220,29764,347],{"class":420},[220,29766,359],{"class":264},[220,29768,29769],{"class":222,"line":691},[220,29770,647],{"emptyLinePlaceholder":194},[220,29772,29773],{"class":222,"line":696},[220,29774,29775],{"class":609},"\u003C!-- Fluid with aspect ratio -->\n",[220,29777,29778,29780,29782,29784,29786,29788],{"class":222,"line":702},[220,29779,343],{"class":264},[220,29781,347],{"class":420},[220,29783,350],{"class":226},[220,29785,353],{"class":264},[220,29787,713],{"class":230},[220,29789,359],{"class":264},[220,29791,29792,29794,29796],{"class":222,"line":718},[220,29793,364],{"class":264},[220,29795,367],{"class":420},[220,29797,386],{"class":264},[220,29799,29800,29802,29804],{"class":222,"line":727},[220,29801,402],{"class":264},[220,29803,347],{"class":420},[220,29805,359],{"class":264},[15,29807,27103,29808,18745,29810,27108,29812,27111,29814,27114],{},[99,29809,28491],{},[99,29811,1504],{},[99,29813,101],{},[99,29815,586],{},[23,29817,1153],{"id":1152},[15,29819,29820,29821,29824],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[99,29822,29823],{},"{expression}"," syntax:",[212,29826,29827],{"className":2844,"code":1321,"language":2846,"meta":178,"style":178},[99,29828,29829,29843,29849,29857,29865,29876,29884,29888],{"__ignoreMap":178},[220,29830,29831,29833,29835,29837,29839,29841],{"class":222,"line":223},[220,29832,343],{"class":264},[220,29834,347],{"class":420},[220,29836,350],{"class":226},[220,29838,353],{"class":264},[220,29840,356],{"class":230},[220,29842,359],{"class":264},[220,29844,29845,29847],{"class":222,"line":179},[220,29846,364],{"class":264},[220,29848,1189],{"class":420},[220,29850,29851,29853,29855],{"class":222,"line":389},[220,29852,1194],{"class":226},[220,29854,353],{"class":264},[220,29856,1199],{"class":230},[220,29858,29859,29861,29863],{"class":222,"line":399},[220,29860,1204],{"class":226},[220,29862,353],{"class":264},[220,29864,1209],{"class":230},[220,29866,29867,29869,29872,29874],{"class":222,"line":644},[220,29868,1288],{"class":226},[220,29870,29871],{"class":264},"={",[220,29873,1295],{"class":420},[220,29875,749],{"class":264},[220,29877,29878,29880,29882],{"class":222,"line":650},[220,29879,1302],{"class":226},[220,29881,353],{"class":264},[220,29883,1229],{"class":230},[220,29885,29886],{"class":222,"line":656},[220,29887,1234],{"class":264},[220,29889,29890,29892,29894],{"class":222,"line":673},[220,29891,402],{"class":264},[220,29893,347],{"class":420},[220,29895,359],{"class":264},[15,29897,29898,29899,29902,29903,29905],{},"Props also accept reactive state — Svelte's ",[99,29900,29901],{},"$state"," rune (or ",[99,29904,16551],{}," in Svelte 4) works exactly as you'd expect:",[212,29907,29909],{"className":2844,"code":29908,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\n let angle = $state(0)\n\u003C\u002Fscript>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" {angle} \u002F>\n\u003C\u002FShader>\n\n\u003Cinput type=\"range\" min=\"0\" max=\"360\" bind:value={angle} \u002F>\n",[99,29910,29911,29919,29929,29933,29951,29959,29963,29977,30005,30013,30017],{"__ignoreMap":178},[220,29912,29913,29915,29917],{"class":222,"line":223},[220,29914,343],{"class":264},[220,29916,2590],{"class":346},[220,29918,359],{"class":264},[220,29920,29921,29923,29925,29927],{"class":222,"line":179},[220,29922,12955],{"class":260},[220,29924,27220],{"class":264},[220,29926,268],{"class":260},[220,29928,303],{"class":230},[220,29930,29931],{"class":222,"line":389},[220,29932,647],{"emptyLinePlaceholder":194},[220,29934,29935,29937,29939,29941,29943,29945,29947,29949],{"class":222,"line":399},[220,29936,2861],{"class":260},[220,29938,11075],{"class":264},[220,29940,353],{"class":260},[220,29942,2869],{"class":264},[220,29944,2872],{"class":226},[220,29946,2626],{"class":264},[220,29948,8673],{"class":420},[220,29950,2632],{"class":264},[220,29952,29953,29955,29957],{"class":222,"line":644},[220,29954,402],{"class":264},[220,29956,2590],{"class":346},[220,29958,359],{"class":264},[220,29960,29961],{"class":222,"line":650},[220,29962,647],{"emptyLinePlaceholder":194},[220,29964,29965,29967,29969,29971,29973,29975],{"class":222,"line":656},[220,29966,343],{"class":264},[220,29968,347],{"class":420},[220,29970,350],{"class":226},[220,29972,353],{"class":264},[220,29974,356],{"class":230},[220,29976,359],{"class":264},[220,29978,29979,29981,29983,29985,29987,29989,29991,29993,29995,29998,30000,30003],{"class":222,"line":673},[220,29980,364],{"class":264},[220,29982,367],{"class":420},[220,29984,370],{"class":226},[220,29986,353],{"class":264},[220,29988,27308],{"class":230},[220,29990,378],{"class":226},[220,29992,353],{"class":264},[220,29994,27315],{"class":230},[220,29996,29997],{"class":226}," {",[220,29999,10764],{"class":264},[220,30001,30002],{"class":226},"}",[220,30004,386],{"class":264},[220,30006,30007,30009,30011],{"class":222,"line":682},[220,30008,402],{"class":264},[220,30010,347],{"class":420},[220,30012,359],{"class":264},[220,30014,30015],{"class":222,"line":691},[220,30016,647],{"emptyLinePlaceholder":194},[220,30018,30019,30021,30024,30026,30028,30031,30034,30036,30038,30040,30042,30045,30047,30049,30051,30053,30056,30058,30061],{"class":222,"line":696},[220,30020,343],{"class":264},[220,30022,30023],{"class":346},"input",[220,30025,12943],{"class":226},[220,30027,353],{"class":264},[220,30029,30030],{"class":230},"\"range\"",[220,30032,30033],{"class":226}," min",[220,30035,353],{"class":264},[220,30037,11688],{"class":230},[220,30039,8673],{"class":420},[220,30041,11688],{"class":230},[220,30043,30044],{"class":226}," max",[220,30046,353],{"class":264},[220,30048,11688],{"class":230},[220,30050,27376],{"class":420},[220,30052,11688],{"class":230},[220,30054,30055],{"class":260}," bind",[220,30057,1554],{"class":264},[220,30059,30060],{"class":226},"value",[220,30062,30063],{"class":264},"={angle} \u002F>\n",[15,30065,26761,30066,27431],{},[99,30067,10764],{},[15,30069,26768,30070,26771],{},[56,30071,1160],{"href":1159},[23,30073,30075],{"id":30074},"using-with-sveltekit-ssr","Using with SvelteKit \u002F SSR",[15,30077,27442,30078,27447],{},[56,30079,30081],{"href":30080},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR",[23,30083,1474],{"id":1473},[34,30085,30086,30090,30094],{},[37,30087,30088,1483],{},[56,30089,1482],{"href":1481},[37,30091,30092,1490],{},[56,30093,1489],{"href":1488},[37,30095,30096,1502],{},[56,30097,1160],{"href":1159},[1504,30099,30100],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":178,"searchDepth":179,"depth":179,"links":30102},[30103,30104,30105,30106,30107,30108,30109],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":30074,"depth":179,"text":30075},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart",{"title":201,"description":30110},"docs\u002Fguide\u002Fsvelte\u002F1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":30117,"title":30081,"body":30118,"category":2240,"description":30698,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":30699,"navigation":194,"path":30080,"seo":30700,"stem":30701,"__hash__":30702},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr.md",{"type":8,"value":30119,"toc":30690},[30120,30124,30127,30131,30137,30140,30205,30208,30214,30219,30351,30358,30364,30487,30490,30494,30497,30687],[11,30121,30123],{"id":30122},"ssr-with-sveltekit-svelte","SSR with SvelteKit \u002F Svelte",[15,30125,30126],{},"Shaders uses WebGPU, which requires a browser environment. While the Svelte package is built to be SSR-aware, the underlying WebGPU renderer requires a browser context to initialize. This page covers how to handle this correctly in SvelteKit.",[23,30128,30130],{"id":30129},"the-default-behavior","The default behavior",[15,30132,30133,30134,30136],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[99,30135,101],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,30138,30139],{},"In many cases, you don't need any special handling:",[212,30141,30143],{"className":2844,"code":30142,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\u003C\u002Fscript>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,30144,30145,30153,30163,30171,30175,30189,30197],{"__ignoreMap":178},[220,30146,30147,30149,30151],{"class":222,"line":223},[220,30148,343],{"class":264},[220,30150,2590],{"class":346},[220,30152,359],{"class":264},[220,30154,30155,30157,30159,30161],{"class":222,"line":179},[220,30156,12955],{"class":260},[220,30158,27220],{"class":264},[220,30160,268],{"class":260},[220,30162,303],{"class":230},[220,30164,30165,30167,30169],{"class":222,"line":389},[220,30166,402],{"class":264},[220,30168,2590],{"class":346},[220,30170,359],{"class":264},[220,30172,30173],{"class":222,"line":399},[220,30174,647],{"emptyLinePlaceholder":194},[220,30176,30177,30179,30181,30183,30185,30187],{"class":222,"line":644},[220,30178,343],{"class":264},[220,30180,347],{"class":420},[220,30182,350],{"class":226},[220,30184,353],{"class":264},[220,30186,356],{"class":230},[220,30188,359],{"class":264},[220,30190,30191,30193,30195],{"class":222,"line":650},[220,30192,364],{"class":264},[220,30194,367],{"class":420},[220,30196,386],{"class":264},[220,30198,30199,30201,30203],{"class":222,"line":656},[220,30200,402],{"class":264},[220,30202,347],{"class":420},[220,30204,359],{"class":264},[15,30206,30207],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,30209,30211,30213],{"id":30210},"onmount-for-browser-only-code",[99,30212,29362],{}," for browser-only code",[15,30215,30216,30217,1554],{},"If you have component-level code that depends on the shader being initialized (for example, you need to access the canvas element), wrap it in ",[99,30218,29362],{},[212,30220,30222],{"className":2844,"code":30221,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { onMount } from 'svelte'\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\n let shaderEl\n\n onMount(() => {\n \u002F\u002F Safe to interact with the DOM and canvas here\n console.log(shaderEl)\n })\n\u003C\u002Fscript>\n\n\u003CShader bind:this={shaderEl} class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,30223,30224,30232,30244,30254,30258,30265,30269,30279,30284,30295,30299,30307,30311,30335,30343],{"__ignoreMap":178},[220,30225,30226,30228,30230],{"class":222,"line":223},[220,30227,343],{"class":264},[220,30229,2590],{"class":346},[220,30231,359],{"class":264},[220,30233,30234,30236,30239,30241],{"class":222,"line":179},[220,30235,12955],{"class":260},[220,30237,30238],{"class":264}," { onMount } ",[220,30240,268],{"class":260},[220,30242,30243],{"class":230}," 'svelte'\n",[220,30245,30246,30248,30250,30252],{"class":222,"line":389},[220,30247,12955],{"class":260},[220,30249,27220],{"class":264},[220,30251,268],{"class":260},[220,30253,303],{"class":230},[220,30255,30256],{"class":222,"line":399},[220,30257,647],{"emptyLinePlaceholder":194},[220,30259,30260,30262],{"class":222,"line":644},[220,30261,2861],{"class":260},[220,30263,30264],{"class":264}," shaderEl\n",[220,30266,30267],{"class":222,"line":650},[220,30268,647],{"emptyLinePlaceholder":194},[220,30270,30271,30273,30275,30277],{"class":222,"line":656},[220,30272,3884],{"class":226},[220,30274,3600],{"class":264},[220,30276,2762],{"class":260},[220,30278,3241],{"class":264},[220,30280,30281],{"class":222,"line":673},[220,30282,30283],{"class":609}," \u002F\u002F Safe to interact with the DOM and canvas here\n",[220,30285,30286,30289,30292],{"class":222,"line":682},[220,30287,30288],{"class":264}," console.",[220,30290,30291],{"class":226},"log",[220,30293,30294],{"class":264},"(shaderEl)\n",[220,30296,30297],{"class":222,"line":691},[220,30298,13002],{"class":264},[220,30300,30301,30303,30305],{"class":222,"line":696},[220,30302,402],{"class":264},[220,30304,2590],{"class":346},[220,30306,359],{"class":264},[220,30308,30309],{"class":222,"line":702},[220,30310,647],{"emptyLinePlaceholder":194},[220,30312,30313,30315,30317,30319,30321,30324,30327,30329,30331,30333],{"class":222,"line":718},[220,30314,343],{"class":264},[220,30316,347],{"class":420},[220,30318,30055],{"class":260},[220,30320,1554],{"class":264},[220,30322,30323],{"class":420},"this",[220,30325,30326],{"class":264},"={shaderEl} ",[220,30328,28491],{"class":226},[220,30330,353],{"class":264},[220,30332,356],{"class":230},[220,30334,359],{"class":264},[220,30336,30337,30339,30341],{"class":222,"line":727},[220,30338,364],{"class":264},[220,30340,367],{"class":420},[220,30342,386],{"class":264},[220,30344,30345,30347,30349],{"class":222,"line":2664},[220,30346,402],{"class":264},[220,30348,347],{"class":420},[220,30350,359],{"class":264},[23,30352,30354,30355],{"id":30353},"conditional-rendering-with-browser","Conditional rendering with ",[99,30356,30357],{},"browser",[15,30359,30360,30361,1554],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[99,30362,30363],{},"$app\u002Fenvironment",[212,30365,30367],{"className":2844,"code":30366,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { browser } from '$app\u002Fenvironment'\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\u003C\u002Fscript>\n\n{#if browser}\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n{:else}\n \u003C!-- Optional server-rendered placeholder -->\n \u003Cdiv class=\"w-full h-64 bg-gray-900 rounded\" \u002F>\n{\u002Fif}\n",[99,30368,30369,30377,30389,30399,30407,30411,30420,30434,30442,30450,30458,30463,30478],{"__ignoreMap":178},[220,30370,30371,30373,30375],{"class":222,"line":223},[220,30372,343],{"class":264},[220,30374,2590],{"class":346},[220,30376,359],{"class":264},[220,30378,30379,30381,30384,30386],{"class":222,"line":179},[220,30380,12955],{"class":260},[220,30382,30383],{"class":264}," { browser } ",[220,30385,268],{"class":260},[220,30387,30388],{"class":230}," '$app\u002Fenvironment'\n",[220,30390,30391,30393,30395,30397],{"class":222,"line":389},[220,30392,12955],{"class":260},[220,30394,27220],{"class":264},[220,30396,268],{"class":260},[220,30398,303],{"class":230},[220,30400,30401,30403,30405],{"class":222,"line":399},[220,30402,402],{"class":264},[220,30404,2590],{"class":346},[220,30406,359],{"class":264},[220,30408,30409],{"class":222,"line":644},[220,30410,647],{"emptyLinePlaceholder":194},[220,30412,30413,30415,30417],{"class":222,"line":650},[220,30414,3751],{"class":264},[220,30416,3754],{"class":260},[220,30418,30419],{"class":264}," browser}\n",[220,30421,30422,30424,30426,30428,30430,30432],{"class":222,"line":656},[220,30423,364],{"class":264},[220,30425,347],{"class":420},[220,30427,350],{"class":226},[220,30429,353],{"class":264},[220,30431,356],{"class":230},[220,30433,359],{"class":264},[220,30435,30436,30438,30440],{"class":222,"line":673},[220,30437,2550],{"class":264},[220,30439,367],{"class":420},[220,30441,386],{"class":264},[220,30443,30444,30446,30448],{"class":222,"line":682},[220,30445,2567],{"class":264},[220,30447,347],{"class":420},[220,30449,359],{"class":264},[220,30451,30452,30454,30456],{"class":222,"line":691},[220,30453,3784],{"class":264},[220,30455,3787],{"class":260},[220,30457,749],{"class":264},[220,30459,30460],{"class":222,"line":696},[220,30461,30462],{"class":609}," \u003C!-- Optional server-rendered placeholder -->\n",[220,30464,30465,30467,30469,30471,30473,30476],{"class":222,"line":702},[220,30466,364],{"class":264},[220,30468,3398],{"class":346},[220,30470,350],{"class":226},[220,30472,353],{"class":264},[220,30474,30475],{"class":230},"\"w-full h-64 bg-gray-900 rounded\"",[220,30477,386],{"class":264},[220,30479,30480,30483,30485],{"class":222,"line":718},[220,30481,30482],{"class":264},"{\u002F",[220,30484,3754],{"class":260},[220,30486,749],{"class":264},[15,30488,30489],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,30491,30493],{"id":30492},"lazy-loading","Lazy loading",[15,30495,30496],{},"To defer loading the Shaders bundle entirely until client-side:",[212,30498,30500],{"className":2844,"code":30499,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { onMount } from 'svelte'\n\n let ShaderComponent\n let LinearGradientComponent\n\n onMount(async () => {\n const { Shader, LinearGradient } = await import('shaders\u002Fsvelte')\n ShaderComponent = Shader\n LinearGradientComponent = LinearGradient\n })\n\u003C\u002Fscript>\n\n{#if ShaderComponent}\n \u003Csvelte:component this={ShaderComponent} class=\"w-full h-64\">\n \u003Csvelte:component this={LinearGradientComponent} \u002F>\n \u003C\u002Fsvelte:component>\n{\u002Fif}\n",[99,30501,30502,30510,30520,30524,30531,30538,30542,30556,30583,30593,30603,30607,30615,30619,30628,30652,30667,30679],{"__ignoreMap":178},[220,30503,30504,30506,30508],{"class":222,"line":223},[220,30505,343],{"class":264},[220,30507,2590],{"class":346},[220,30509,359],{"class":264},[220,30511,30512,30514,30516,30518],{"class":222,"line":179},[220,30513,12955],{"class":260},[220,30515,30238],{"class":264},[220,30517,268],{"class":260},[220,30519,30243],{"class":230},[220,30521,30522],{"class":222,"line":389},[220,30523,647],{"emptyLinePlaceholder":194},[220,30525,30526,30528],{"class":222,"line":399},[220,30527,2861],{"class":260},[220,30529,30530],{"class":264}," ShaderComponent\n",[220,30532,30533,30535],{"class":222,"line":644},[220,30534,2861],{"class":260},[220,30536,30537],{"class":264}," LinearGradientComponent\n",[220,30539,30540],{"class":222,"line":650},[220,30541,647],{"emptyLinePlaceholder":194},[220,30543,30544,30546,30548,30550,30552,30554],{"class":222,"line":656},[220,30545,3884],{"class":226},[220,30547,2626],{"class":264},[220,30549,3489],{"class":260},[220,30551,3492],{"class":264},[220,30553,2762],{"class":260},[220,30555,3241],{"class":264},[220,30557,30558,30560,30562,30564,30566,30568,30570,30572,30574,30576,30578,30581],{"class":222,"line":673},[220,30559,16843],{"class":260},[220,30561,4018],{"class":264},[220,30563,347],{"class":420},[220,30565,1895],{"class":264},[220,30567,367],{"class":420},[220,30569,4023],{"class":264},[220,30571,353],{"class":260},[220,30573,1744],{"class":260},[220,30575,27775],{"class":260},[220,30577,2626],{"class":264},[220,30579,30580],{"class":230},"'shaders\u002Fsvelte'",[220,30582,2632],{"class":264},[220,30584,30585,30588,30590],{"class":222,"line":682},[220,30586,30587],{"class":264}," ShaderComponent ",[220,30589,353],{"class":260},[220,30591,30592],{"class":264}," Shader\n",[220,30594,30595,30598,30600],{"class":222,"line":691},[220,30596,30597],{"class":264}," LinearGradientComponent ",[220,30599,353],{"class":260},[220,30601,30602],{"class":264}," LinearGradient\n",[220,30604,30605],{"class":222,"line":696},[220,30606,13002],{"class":264},[220,30608,30609,30611,30613],{"class":222,"line":702},[220,30610,402],{"class":264},[220,30612,2590],{"class":346},[220,30614,359],{"class":264},[220,30616,30617],{"class":222,"line":718},[220,30618,647],{"emptyLinePlaceholder":194},[220,30620,30621,30623,30625],{"class":222,"line":727},[220,30622,3751],{"class":264},[220,30624,3754],{"class":260},[220,30626,30627],{"class":264}," ShaderComponent}\n",[220,30629,30630,30632,30634,30636,30639,30641,30644,30646,30648,30650],{"class":222,"line":2664},[220,30631,364],{"class":264},[220,30633,2846],{"class":260},[220,30635,1554],{"class":264},[220,30637,30638],{"class":346},"component",[220,30640,5345],{"class":226},[220,30642,30643],{"class":264},"={ShaderComponent} ",[220,30645,28491],{"class":226},[220,30647,353],{"class":264},[220,30649,356],{"class":230},[220,30651,359],{"class":264},[220,30653,30654,30656,30658,30660,30662,30664],{"class":222,"line":3522},[220,30655,2550],{"class":264},[220,30657,2846],{"class":260},[220,30659,1554],{"class":264},[220,30661,30638],{"class":346},[220,30663,5345],{"class":226},[220,30665,30666],{"class":264},"={LinearGradientComponent} \u002F>\n",[220,30668,30669,30671,30673,30675,30677],{"class":222,"line":9662},[220,30670,2567],{"class":264},[220,30672,2846],{"class":260},[220,30674,1554],{"class":264},[220,30676,30638],{"class":346},[220,30678,359],{"class":264},[220,30680,30681,30683,30685],{"class":222,"line":9673},[220,30682,30482],{"class":264},[220,30684,3754],{"class":260},[220,30686,749],{"class":264},[1504,30688,30689],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":30691},[30692,30693,30695,30697],{"id":30129,"depth":179,"text":30130},{"id":30210,"depth":179,"text":30694},"onMount for browser-only code",{"id":30353,"depth":179,"text":30696},"Conditional rendering with browser",{"id":30492,"depth":179,"text":30493},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":30081,"description":30698},"docs\u002Fguide\u002Fsvelte\u002Fssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":30704,"title":201,"body":30705,"category":188,"description":31219,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":31220,"navigation":194,"path":31221,"seo":31222,"stem":31223,"__hash__":31224},"guide\u002Fdocs\u002Fguide\u002Fvue\u002F1.quickstart.md",{"type":8,"value":30706,"toc":31210},[30707,30711,30713,30725,30727,30741,30743,30745,30799,30801,30807,30809,30816,30930,30937,30939,30945,31014,31017,31187,31191,31195,31199,31205,31207],[11,30708,30710],{"id":30709},"quickstart-vue","Quickstart (Vue)",[23,30712,26219],{"id":26218},[212,30714,30715],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,30716,30717],{"__ignoreMap":178},[220,30718,30719,30721,30723],{"class":222,"line":223},[220,30720,227],{"class":226},[220,30722,231],{"class":230},[220,30724,234],{"class":230},[23,30726,26869],{"id":26868},[212,30728,30729],{"className":251,"code":252,"language":253,"meta":178,"style":178},[99,30730,30731],{"__ignoreMap":178},[220,30732,30733,30735,30737,30739],{"class":222,"line":223},[220,30734,261],{"class":260},[220,30736,265],{"class":264},[220,30738,268],{"class":260},[220,30740,271],{"class":230},[23,30742,323],{"id":322},[15,30744,26888],{},[212,30746,30747],{"className":334,"code":335,"language":336,"meta":178,"style":178},[99,30748,30749,30763,30783,30791],{"__ignoreMap":178},[220,30750,30751,30753,30755,30757,30759,30761],{"class":222,"line":223},[220,30752,343],{"class":264},[220,30754,347],{"class":346},[220,30756,350],{"class":226},[220,30758,353],{"class":264},[220,30760,356],{"class":230},[220,30762,359],{"class":264},[220,30764,30765,30767,30769,30771,30773,30775,30777,30779,30781],{"class":222,"line":179},[220,30766,364],{"class":264},[220,30768,367],{"class":346},[220,30770,370],{"class":226},[220,30772,353],{"class":264},[220,30774,375],{"class":230},[220,30776,378],{"class":226},[220,30778,353],{"class":264},[220,30780,383],{"class":230},[220,30782,386],{"class":264},[220,30784,30785,30787,30789],{"class":222,"line":389},[220,30786,364],{"class":264},[220,30788,394],{"class":346},[220,30790,386],{"class":264},[220,30792,30793,30795,30797],{"class":222,"line":399},[220,30794,402],{"class":264},[220,30796,347],{"class":346},[220,30798,359],{"class":264},[19,30800],{":preset":578},[15,30802,30803,583,30805,26951],{},[99,30804,101],{},[99,30806,586],{},[23,30808,594],{"id":593},[15,30810,1839,30811,30813,30814,590],{},[99,30812,586],{}," has no intrinsic size. The class or style you apply to ",[99,30815,101],{},[212,30817,30818],{"className":334,"code":29692,"language":336,"meta":178,"style":178},[99,30819,30820,30824,30838,30846,30854,30858,30862,30876,30884,30892,30896,30900,30914,30922],{"__ignoreMap":178},[220,30821,30822],{"class":222,"line":223},[220,30823,610],{"class":609},[220,30825,30826,30828,30830,30832,30834,30836],{"class":222,"line":179},[220,30827,343],{"class":264},[220,30829,347],{"class":346},[220,30831,350],{"class":226},[220,30833,353],{"class":264},[220,30835,623],{"class":230},[220,30837,359],{"class":264},[220,30839,30840,30842,30844],{"class":222,"line":389},[220,30841,364],{"class":264},[220,30843,367],{"class":346},[220,30845,386],{"class":264},[220,30847,30848,30850,30852],{"class":222,"line":399},[220,30849,402],{"class":264},[220,30851,347],{"class":346},[220,30853,359],{"class":264},[220,30855,30856],{"class":222,"line":644},[220,30857,647],{"emptyLinePlaceholder":194},[220,30859,30860],{"class":222,"line":650},[220,30861,653],{"class":609},[220,30863,30864,30866,30868,30870,30872,30874],{"class":222,"line":656},[220,30865,343],{"class":264},[220,30867,347],{"class":346},[220,30869,663],{"class":226},[220,30871,353],{"class":264},[220,30873,668],{"class":230},[220,30875,359],{"class":264},[220,30877,30878,30880,30882],{"class":222,"line":673},[220,30879,364],{"class":264},[220,30881,367],{"class":346},[220,30883,386],{"class":264},[220,30885,30886,30888,30890],{"class":222,"line":682},[220,30887,402],{"class":264},[220,30889,347],{"class":346},[220,30891,359],{"class":264},[220,30893,30894],{"class":222,"line":691},[220,30895,647],{"emptyLinePlaceholder":194},[220,30897,30898],{"class":222,"line":696},[220,30899,29775],{"class":609},[220,30901,30902,30904,30906,30908,30910,30912],{"class":222,"line":702},[220,30903,343],{"class":264},[220,30905,347],{"class":346},[220,30907,350],{"class":226},[220,30909,353],{"class":264},[220,30911,713],{"class":230},[220,30913,359],{"class":264},[220,30915,30916,30918,30920],{"class":222,"line":718},[220,30917,364],{"class":264},[220,30919,367],{"class":346},[220,30921,386],{"class":264},[220,30923,30924,30926,30928],{"class":222,"line":727},[220,30925,402],{"class":264},[220,30927,347],{"class":346},[220,30929,359],{"class":264},[15,30931,30932,30933,27111,30935,27114],{},"Applying a class or style to the ",[99,30934,101],{},[99,30936,586],{},[23,30938,1153],{"id":1152},[15,30940,30941,30942,30944],{},"Pass props directly to configure each component. Numeric props use Vue's ",[99,30943,1554],{}," binding syntax, strings can be passed plain:",[212,30946,30948],{"className":334,"code":30947,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n color-a=\"#ff6b6b\"\n color-b=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,30949,30950,30964,30970,30978,30986,30994,31002,31006],{"__ignoreMap":178},[220,30951,30952,30954,30956,30958,30960,30962],{"class":222,"line":223},[220,30953,343],{"class":264},[220,30955,347],{"class":346},[220,30957,350],{"class":226},[220,30959,353],{"class":264},[220,30961,356],{"class":230},[220,30963,359],{"class":264},[220,30965,30966,30968],{"class":222,"line":179},[220,30967,364],{"class":264},[220,30969,1189],{"class":346},[220,30971,30972,30974,30976],{"class":222,"line":389},[220,30973,19469],{"class":226},[220,30975,353],{"class":264},[220,30977,1199],{"class":230},[220,30979,30980,30982,30984],{"class":222,"line":399},[220,30981,19479],{"class":226},[220,30983,353],{"class":264},[220,30985,1209],{"class":230},[220,30987,30988,30990,30992],{"class":222,"line":644},[220,30989,1214],{"class":226},[220,30991,353],{"class":264},[220,30993,1219],{"class":230},[220,30995,30996,30998,31000],{"class":222,"line":650},[220,30997,1224],{"class":226},[220,30999,353],{"class":264},[220,31001,1229],{"class":230},[220,31003,31004],{"class":222,"line":656},[220,31005,1234],{"class":264},[220,31007,31008,31010,31012],{"class":222,"line":673},[220,31009,402],{"class":264},[220,31011,347],{"class":346},[220,31013,359],{"class":264},[15,31015,31016],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[212,31018,31020],{"className":11668,"code":31019,"language":11670,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient } from 'shaders\u002Fvue'\n\nconst angle = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient color-a=\"#ff6b6b\" color-b=\"#4ecdc4\" :angle=\"angle\" \u002F>\n \u003C\u002FShader>\n\n \u003Cinput type=\"range\" min=\"0\" max=\"360\" v-model.number=\"angle\" \u002F>\n\u003C\u002Ftemplate>\n",[99,31021,31022,31032,31042,31052,31056,31072,31080,31084,31092,31106,31132,31140,31144,31179],{"__ignoreMap":178},[220,31023,31024,31026,31028,31030],{"class":222,"line":223},[220,31025,343],{"class":264},[220,31027,2590],{"class":346},[220,31029,2593],{"class":226},[220,31031,359],{"class":264},[220,31033,31034,31036,31038,31040],{"class":222,"line":179},[220,31035,261],{"class":260},[220,31037,2602],{"class":264},[220,31039,268],{"class":260},[220,31041,2607],{"class":230},[220,31043,31044,31046,31048,31050],{"class":222,"line":389},[220,31045,261],{"class":260},[220,31047,27220],{"class":264},[220,31049,268],{"class":260},[220,31051,271],{"class":230},[220,31053,31054],{"class":222,"line":399},[220,31055,647],{"emptyLinePlaceholder":194},[220,31057,31058,31060,31062,31064,31066,31068,31070],{"class":222,"line":644},[220,31059,1735],{"class":260},[220,31061,10532],{"class":420},[220,31063,1741],{"class":260},[220,31065,2623],{"class":226},[220,31067,2626],{"class":264},[220,31069,8673],{"class":420},[220,31071,2632],{"class":264},[220,31073,31074,31076,31078],{"class":222,"line":650},[220,31075,402],{"class":264},[220,31077,2590],{"class":346},[220,31079,359],{"class":264},[220,31081,31082],{"class":222,"line":656},[220,31083,647],{"emptyLinePlaceholder":194},[220,31085,31086,31088,31090],{"class":222,"line":673},[220,31087,343],{"class":264},[220,31089,2519],{"class":346},[220,31091,359],{"class":264},[220,31093,31094,31096,31098,31100,31102,31104],{"class":222,"line":682},[220,31095,364],{"class":264},[220,31097,347],{"class":346},[220,31099,350],{"class":226},[220,31101,353],{"class":264},[220,31103,356],{"class":230},[220,31105,359],{"class":264},[220,31107,31108,31110,31112,31114,31116,31118,31120,31122,31124,31126,31128,31130],{"class":222,"line":691},[220,31109,2550],{"class":264},[220,31111,367],{"class":346},[220,31113,20336],{"class":226},[220,31115,353],{"class":264},[220,31117,27308],{"class":230},[220,31119,20343],{"class":226},[220,31121,353],{"class":264},[220,31123,27315],{"class":230},[220,31125,10688],{"class":226},[220,31127,353],{"class":264},[220,31129,10693],{"class":230},[220,31131,386],{"class":264},[220,31133,31134,31136,31138],{"class":222,"line":696},[220,31135,2567],{"class":264},[220,31137,347],{"class":346},[220,31139,359],{"class":264},[220,31141,31142],{"class":222,"line":702},[220,31143,647],{"emptyLinePlaceholder":194},[220,31145,31146,31148,31150,31152,31154,31156,31158,31160,31163,31165,31167,31170,31173,31175,31177],{"class":222,"line":718},[220,31147,364],{"class":264},[220,31149,30023],{"class":346},[220,31151,12943],{"class":226},[220,31153,353],{"class":264},[220,31155,30030],{"class":230},[220,31157,30033],{"class":226},[220,31159,353],{"class":264},[220,31161,31162],{"class":230},"\"0\"",[220,31164,30044],{"class":226},[220,31166,353],{"class":264},[220,31168,31169],{"class":230},"\"360\"",[220,31171,31172],{"class":226}," v-model.number",[220,31174,353],{"class":264},[220,31176,10693],{"class":230},[220,31178,386],{"class":264},[220,31180,31181,31183,31185],{"class":222,"line":727},[220,31182,402],{"class":264},[220,31184,2519],{"class":346},[220,31186,359],{"class":264},[15,31188,26761,31189,27431],{},[99,31190,10764],{},[15,31192,26768,31193,26771],{},[56,31194,1160],{"href":1159},[23,31196,31198],{"id":31197},"using-with-nuxt-ssr","Using with Nuxt \u002F SSR",[15,31200,27442,31201,27447],{},[56,31202,31204],{"href":31203},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR",[23,31206,1474],{"id":1473},[1504,31208,31209],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":178,"searchDepth":179,"depth":179,"links":31211},[31212,31213,31214,31215,31216,31217,31218],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":31197,"depth":179,"text":31198},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart",{"title":201,"description":31219},"docs\u002Fguide\u002Fvue\u002F1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":31226,"title":31204,"body":31227,"category":2240,"description":31893,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":31894,"navigation":194,"path":31203,"seo":31895,"stem":31896,"__hash__":31897},"guide\u002Fdocs\u002Fguide\u002Fvue\u002Fssr.md",{"type":8,"value":31228,"toc":31886},[31229,31233,31236,31243,31249,31301,31304,31307,31400,31404,31411,31561,31565,31568,31768,31775,31863,31869,31873,31883],[11,31230,31232],{"id":31231},"ssr-with-nuxt-vue","SSR with Nuxt \u002F Vue",[15,31234,31235],{},"Shaders uses WebGPU, which requires a browser environment. It cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled Vue applications.",[23,31237,31239,31240],{"id":31238},"nuxt-clientonly","Nuxt: ",[99,31241,31242],{},"\u003CClientOnly>",[15,31244,31245,31246,31248],{},"Nuxt provides a built-in ",[99,31247,31242],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[212,31250,31252],{"className":334,"code":31251,"language":336,"meta":178,"style":178},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n\u003C\u002FClientOnly>\n",[99,31253,31254,31263,31277,31285,31293],{"__ignoreMap":178},[220,31255,31256,31258,31261],{"class":222,"line":223},[220,31257,343],{"class":264},[220,31259,31260],{"class":346},"ClientOnly",[220,31262,359],{"class":264},[220,31264,31265,31267,31269,31271,31273,31275],{"class":222,"line":179},[220,31266,364],{"class":264},[220,31268,347],{"class":346},[220,31270,350],{"class":226},[220,31272,353],{"class":264},[220,31274,356],{"class":230},[220,31276,359],{"class":264},[220,31278,31279,31281,31283],{"class":222,"line":389},[220,31280,2550],{"class":264},[220,31282,367],{"class":346},[220,31284,386],{"class":264},[220,31286,31287,31289,31291],{"class":222,"line":399},[220,31288,2567],{"class":264},[220,31290,347],{"class":346},[220,31292,359],{"class":264},[220,31294,31295,31297,31299],{"class":222,"line":644},[220,31296,402],{"class":264},[220,31298,31260],{"class":346},[220,31300,359],{"class":264},[15,31302,31303],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,31305,31306],{},"You can add a placeholder slot to show something while the client-side shader loads:",[212,31308,31310],{"className":334,"code":31309,"language":336,"meta":178,"style":178},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n\n \u003Ctemplate #fallback>\n \u003Cdiv class=\"w-full h-64 bg-gray-900 animate-pulse rounded\" \u002F>\n \u003C\u002Ftemplate>\n\u003C\u002FClientOnly>\n",[99,31311,31312,31320,31334,31342,31350,31354,31367,31384,31392],{"__ignoreMap":178},[220,31313,31314,31316,31318],{"class":222,"line":223},[220,31315,343],{"class":264},[220,31317,31260],{"class":346},[220,31319,359],{"class":264},[220,31321,31322,31324,31326,31328,31330,31332],{"class":222,"line":179},[220,31323,364],{"class":264},[220,31325,347],{"class":346},[220,31327,350],{"class":226},[220,31329,353],{"class":264},[220,31331,356],{"class":230},[220,31333,359],{"class":264},[220,31335,31336,31338,31340],{"class":222,"line":389},[220,31337,2550],{"class":264},[220,31339,367],{"class":346},[220,31341,386],{"class":264},[220,31343,31344,31346,31348],{"class":222,"line":399},[220,31345,2567],{"class":264},[220,31347,347],{"class":346},[220,31349,359],{"class":264},[220,31351,31352],{"class":222,"line":644},[220,31353,647],{"emptyLinePlaceholder":194},[220,31355,31356,31358,31360,31363,31365],{"class":222,"line":650},[220,31357,364],{"class":264},[220,31359,2519],{"class":346},[220,31361,31362],{"class":264}," #",[220,31364,3936],{"class":226},[220,31366,359],{"class":264},[220,31368,31369,31371,31373,31375,31377,31380,31382],{"class":222,"line":656},[220,31370,2550],{"class":264},[220,31372,3398],{"class":346},[220,31374,350],{"class":226},[220,31376,353],{"class":264},[220,31378,31379],{"class":230},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[220,31381,3412],{"class":3411},[220,31383,359],{"class":264},[220,31385,31386,31388,31390],{"class":222,"line":673},[220,31387,2567],{"class":264},[220,31389,2519],{"class":346},[220,31391,359],{"class":264},[220,31393,31394,31396,31398],{"class":222,"line":682},[220,31395,402],{"class":264},[220,31397,31260],{"class":346},[220,31399,359],{"class":264},[23,31401,31403],{"id":31402},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,31405,31406,31407,31410],{},"If you're using Vue SSR without Nuxt, use ",[99,31408,31409],{},"v-if"," with a mounted flag:",[212,31412,31414],{"className":11668,"code":31413,"language":11670,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\n\nconst isMounted = ref(false)\nonMounted(() => { isMounted.value = true })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"w-full h-64\">\n \u003CShader v-if=\"isMounted\" class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[99,31415,31416,31426,31436,31440,31457,31474,31482,31486,31494,31508,31529,31537,31545,31553],{"__ignoreMap":178},[220,31417,31418,31420,31422,31424],{"class":222,"line":223},[220,31419,343],{"class":264},[220,31421,2590],{"class":346},[220,31423,2593],{"class":226},[220,31425,359],{"class":264},[220,31427,31428,31430,31432,31434],{"class":222,"line":179},[220,31429,261],{"class":260},[220,31431,3443],{"class":264},[220,31433,268],{"class":260},[220,31435,2607],{"class":230},[220,31437,31438],{"class":222,"line":389},[220,31439,647],{"emptyLinePlaceholder":194},[220,31441,31442,31444,31447,31449,31451,31453,31455],{"class":222,"line":399},[220,31443,1735],{"class":260},[220,31445,31446],{"class":420}," isMounted",[220,31448,1741],{"class":260},[220,31450,2623],{"class":226},[220,31452,2626],{"class":264},[220,31454,2629],{"class":420},[220,31456,2632],{"class":264},[220,31458,31459,31461,31463,31465,31468,31470,31472],{"class":222,"line":644},[220,31460,3484],{"class":226},[220,31462,3600],{"class":264},[220,31464,2762],{"class":260},[220,31466,31467],{"class":264}," { isMounted.value ",[220,31469,353],{"class":260},[220,31471,2911],{"class":420},[220,31473,11617],{"class":264},[220,31475,31476,31478,31480],{"class":222,"line":650},[220,31477,402],{"class":264},[220,31479,2590],{"class":346},[220,31481,359],{"class":264},[220,31483,31484],{"class":222,"line":656},[220,31485,647],{"emptyLinePlaceholder":194},[220,31487,31488,31490,31492],{"class":222,"line":673},[220,31489,343],{"class":264},[220,31491,2519],{"class":346},[220,31493,359],{"class":264},[220,31495,31496,31498,31500,31502,31504,31506],{"class":222,"line":682},[220,31497,364],{"class":264},[220,31499,3398],{"class":346},[220,31501,350],{"class":226},[220,31503,353],{"class":264},[220,31505,356],{"class":230},[220,31507,359],{"class":264},[220,31509,31510,31512,31514,31516,31518,31521,31523,31525,31527],{"class":222,"line":691},[220,31511,2550],{"class":264},[220,31513,347],{"class":346},[220,31515,3362],{"class":226},[220,31517,353],{"class":264},[220,31519,31520],{"class":230},"\"isMounted\"",[220,31522,350],{"class":226},[220,31524,353],{"class":264},[220,31526,356],{"class":230},[220,31528,359],{"class":264},[220,31530,31531,31533,31535],{"class":222,"line":696},[220,31532,2813],{"class":264},[220,31534,367],{"class":346},[220,31536,386],{"class":264},[220,31538,31539,31541,31543],{"class":222,"line":702},[220,31540,2828],{"class":264},[220,31542,347],{"class":346},[220,31544,359],{"class":264},[220,31546,31547,31549,31551],{"class":222,"line":718},[220,31548,2567],{"class":264},[220,31550,3398],{"class":346},[220,31552,359],{"class":264},[220,31554,31555,31557,31559],{"class":222,"line":727},[220,31556,402],{"class":264},[220,31558,2519],{"class":346},[220,31560,359],{"class":264},[23,31562,31564],{"id":31563},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,31566,31567],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[212,31569,31571],{"className":11668,"code":31570,"language":11670,"meta":178,"style":178},"\u003Cscript setup>\nimport { defineAsyncComponent, ref, onMounted } from 'vue'\n\nconst isMounted = ref(false)\nonMounted(() => { isMounted.value = true })\n\n\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\nconst Shader = defineAsyncComponent(() => import('shaders\u002Fvue').then(m => m.Shader))\nconst LinearGradient = defineAsyncComponent(() => import('shaders\u002Fvue').then(m => m.LinearGradient))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CShader v-if=\"isMounted\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,31572,31573,31583,31594,31598,31614,31630,31634,31639,31676,31710,31718,31722,31730,31744,31752,31760],{"__ignoreMap":178},[220,31574,31575,31577,31579,31581],{"class":222,"line":223},[220,31576,343],{"class":264},[220,31578,2590],{"class":346},[220,31580,2593],{"class":226},[220,31582,359],{"class":264},[220,31584,31585,31587,31590,31592],{"class":222,"line":179},[220,31586,261],{"class":260},[220,31588,31589],{"class":264}," { defineAsyncComponent, ref, onMounted } ",[220,31591,268],{"class":260},[220,31593,2607],{"class":230},[220,31595,31596],{"class":222,"line":389},[220,31597,647],{"emptyLinePlaceholder":194},[220,31599,31600,31602,31604,31606,31608,31610,31612],{"class":222,"line":399},[220,31601,1735],{"class":260},[220,31603,31446],{"class":420},[220,31605,1741],{"class":260},[220,31607,2623],{"class":226},[220,31609,2626],{"class":264},[220,31611,2629],{"class":420},[220,31613,2632],{"class":264},[220,31615,31616,31618,31620,31622,31624,31626,31628],{"class":222,"line":644},[220,31617,3484],{"class":226},[220,31619,3600],{"class":264},[220,31621,2762],{"class":260},[220,31623,31467],{"class":264},[220,31625,353],{"class":260},[220,31627,2911],{"class":420},[220,31629,11617],{"class":264},[220,31631,31632],{"class":222,"line":650},[220,31633,647],{"emptyLinePlaceholder":194},[220,31635,31636],{"class":222,"line":656},[220,31637,31638],{"class":609},"\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\n",[220,31640,31641,31643,31646,31648,31651,31653,31655,31657,31659,31662,31664,31666,31668,31671,31673],{"class":222,"line":673},[220,31642,1735],{"class":260},[220,31644,31645],{"class":420}," Shader",[220,31647,1741],{"class":260},[220,31649,31650],{"class":226}," defineAsyncComponent",[220,31652,3600],{"class":264},[220,31654,2762],{"class":260},[220,31656,27775],{"class":260},[220,31658,2626],{"class":264},[220,31660,31661],{"class":230},"'shaders\u002Fvue'",[220,31663,15437],{"class":264},[220,31665,3615],{"class":226},[220,31667,2626],{"class":264},[220,31669,31670],{"class":3621},"m",[220,31672,10830],{"class":260},[220,31674,31675],{"class":264}," m.Shader))\n",[220,31677,31678,31680,31683,31685,31687,31689,31691,31693,31695,31697,31699,31701,31703,31705,31707],{"class":222,"line":682},[220,31679,1735],{"class":260},[220,31681,31682],{"class":420}," LinearGradient",[220,31684,1741],{"class":260},[220,31686,31650],{"class":226},[220,31688,3600],{"class":264},[220,31690,2762],{"class":260},[220,31692,27775],{"class":260},[220,31694,2626],{"class":264},[220,31696,31661],{"class":230},[220,31698,15437],{"class":264},[220,31700,3615],{"class":226},[220,31702,2626],{"class":264},[220,31704,31670],{"class":3621},[220,31706,10830],{"class":260},[220,31708,31709],{"class":264}," m.LinearGradient))\n",[220,31711,31712,31714,31716],{"class":222,"line":691},[220,31713,402],{"class":264},[220,31715,2590],{"class":346},[220,31717,359],{"class":264},[220,31719,31720],{"class":222,"line":696},[220,31721,647],{"emptyLinePlaceholder":194},[220,31723,31724,31726,31728],{"class":222,"line":702},[220,31725,343],{"class":264},[220,31727,2519],{"class":346},[220,31729,359],{"class":264},[220,31731,31732,31734,31736,31738,31740,31742],{"class":222,"line":718},[220,31733,364],{"class":264},[220,31735,347],{"class":346},[220,31737,3362],{"class":226},[220,31739,353],{"class":264},[220,31741,31520],{"class":230},[220,31743,359],{"class":264},[220,31745,31746,31748,31750],{"class":222,"line":727},[220,31747,2550],{"class":264},[220,31749,367],{"class":346},[220,31751,386],{"class":264},[220,31753,31754,31756,31758],{"class":222,"line":2664},[220,31755,2567],{"class":264},[220,31757,347],{"class":346},[220,31759,359],{"class":264},[220,31761,31762,31764,31766],{"class":222,"line":3522},[220,31763,402],{"class":264},[220,31765,2519],{"class":346},[220,31767,359],{"class":264},[15,31769,31770,31771,31774],{},"Or in Nuxt, use ",[99,31772,31773],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[212,31776,31778],{"className":251,"code":31777,"language":253,"meta":178,"style":178},"\u002F\u002F plugins\u002Fshaders.client.ts\nimport { defineNuxtPlugin } from '#app'\nimport { Shader, LinearGradient } from 'shaders\u002Fvue'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.component('Shader', Shader)\n nuxtApp.vueApp.component('LinearGradient', LinearGradient)\n})\n",[99,31779,31780,31785,31797,31807,31811,31831,31846,31859],{"__ignoreMap":178},[220,31781,31782],{"class":222,"line":223},[220,31783,31784],{"class":609},"\u002F\u002F plugins\u002Fshaders.client.ts\n",[220,31786,31787,31789,31792,31794],{"class":222,"line":179},[220,31788,261],{"class":260},[220,31790,31791],{"class":264}," { defineNuxtPlugin } ",[220,31793,268],{"class":260},[220,31795,31796],{"class":230}," '#app'\n",[220,31798,31799,31801,31803,31805],{"class":222,"line":389},[220,31800,261],{"class":260},[220,31802,27220],{"class":264},[220,31804,268],{"class":260},[220,31806,271],{"class":230},[220,31808,31809],{"class":222,"line":399},[220,31810,647],{"emptyLinePlaceholder":194},[220,31812,31813,31815,31817,31820,31822,31825,31827,31829],{"class":222,"line":644},[220,31814,27233],{"class":260},[220,31816,27236],{"class":260},[220,31818,31819],{"class":226}," defineNuxtPlugin",[220,31821,3897],{"class":264},[220,31823,31824],{"class":3621},"nuxtApp",[220,31826,4168],{"class":264},[220,31828,2762],{"class":260},[220,31830,3241],{"class":264},[220,31832,31833,31836,31838,31840,31843],{"class":222,"line":650},[220,31834,31835],{"class":264}," nuxtApp.vueApp.",[220,31837,30638],{"class":226},[220,31839,2626],{"class":264},[220,31841,31842],{"class":230},"'Shader'",[220,31844,31845],{"class":264},", Shader)\n",[220,31847,31848,31850,31852,31854,31856],{"class":222,"line":656},[220,31849,31835],{"class":264},[220,31851,30638],{"class":226},[220,31853,2626],{"class":264},[220,31855,2462],{"class":230},[220,31857,31858],{"class":264},", LinearGradient)\n",[220,31860,31861],{"class":222,"line":673},[220,31862,1792],{"class":264},[15,31864,1839,31865,31868],{},[99,31866,31867],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,31870,31872],{"id":31871},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,31874,1839,31875,12250,31877,31879,31880,31882],{},[99,31876,101],{},[99,31878,586],{}," element. Canvas elements have no server-rendered HTML output — there's nothing for Vue to hydrate or compare. This means there's no hydration mismatch warning even if the canvas appears in the initial HTML. That said, the GPU initialization still requires a browser, so the ",[99,31881,31242],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1504,31884,31885],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":31887},[31888,31890,31891,31892],{"id":31238,"depth":179,"text":31889},"Nuxt: \u003CClientOnly>",{"id":31402,"depth":179,"text":31403},{"id":31563,"depth":179,"text":31564},{"id":31871,"depth":179,"text":31872},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":31204,"description":31893},"docs\u002Fguide\u002Fvue\u002Fssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[31899,32240,32534,32812,33069,33402,33679,33879,34155,34355,34631,34831,35031,35364,35565,35897,36097,36374,36575,36908,37184,37384,37660,37936,38212,38411,38611,38915,39191,39391,39680,39880,40156,40488,40688,40964,41240,41533,41826,42101,42300,42679,42933,43266,43466,43742,44075,44351,44627,44870,45239,45515,45760,46034,46310,46510,46786,46986,47262,47538,47814,48014,48290,48583,48783,49059,49259,49535,49735,49935,50135,50409,50740,51072,51403,51659,51859,52135,52405,52650,53026,53297,53497,53773,54067,54273,54473,54720,54920,55196,55396,55690,55960,56236,56436,56712,56988,57268,57523,57784,58116,58360,58692,58890,59166,59366,59744,59944,60144,60420,60620,60914,61190,61466,61799,62075,62320,62596,62796,62996,63195,63471,63803,64135,64411,64666,64866,65244,65536,65869,66127,66459,66715,66991,67267,67467,67799,68075,68407,68699,68975,69175,69420,69751,69951,70227,70607,70807,71052,71328,71584,71839,72095,72371,72615,72947,73147,73439,73771,73971,74247,74445,74692,74986,75262,75461,75754,75998,76253,76585,76861,77184,77429,77629,77905,78105,78437,78713,78989,79281,79614,79814,80228,80428,80628,80960,81236,81436,81636,81836,82168,82368],{"id":31900,"title":31901,"body":31902,"category":32234,"componentType":25883,"description":31909,"extension":191,"meta":32235,"navigation":194,"path":32236,"requiresChild":194,"seo":32237,"stem":32238,"__hash__":32239},"components\u002Fdocs\u002Fcomponents\u002FAngularBlur.md","AngularBlur",{"type":8,"value":31903,"toc":32230},[31904,31907,31910,31913,31916,31920,31924,32228],[11,31905,31901],{"id":31906},"angularblur",[15,31908,31909],{},"Radial motion blur rotating around a center point",[31911,31912],"shader-preview",{"component":31901},[23,31914,31915],{"id":26533},"Props",[31917,31918],"props-table",{":props":31919},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Intensity of the angular blur effect\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the rotation\"}]",[23,31921,31923],{"id":31922},"usage","Usage",[246,31925,31926,31984,32043,32099,32157],{":tabs":1557},[212,31927,31929],{"className":334,"code":31928,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31930,31931,31939,31946,31955,31960,31968,31976],{"__ignoreMap":178},[220,31932,31933,31935,31937],{"class":222,"line":223},[220,31934,343],{"class":264},[220,31936,347],{"class":346},[220,31938,359],{"class":264},[220,31940,31941,31943],{"class":222,"line":179},[220,31942,364],{"class":264},[220,31944,31945],{"class":346},"AngularBlur\n",[220,31947,31948,31950,31952],{"class":222,"line":389},[220,31949,20371],{"class":226},[220,31951,353],{"class":264},[220,31953,31954],{"class":230},"\"20\"\n",[220,31956,31957],{"class":222,"line":399},[220,31958,31959],{"class":264}," >\n",[220,31961,31962,31964,31966],{"class":222,"line":644},[220,31963,2550],{"class":264},[220,31965,2553],{"class":346},[220,31967,386],{"class":264},[220,31969,31970,31972,31974],{"class":222,"line":650},[220,31971,2567],{"class":264},[220,31973,31901],{"class":346},[220,31975,359],{"class":264},[220,31977,31978,31980,31982],{"class":222,"line":656},[220,31979,402],{"class":264},[220,31981,347],{"class":346},[220,31983,359],{"class":264},[212,31985,31987],{"className":409,"code":31986,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31988,31989,31997,32003,32015,32019,32027,32035],{"__ignoreMap":178},[220,31990,31991,31993,31995],{"class":222,"line":223},[220,31992,343],{"class":264},[220,31994,347],{"class":420},[220,31996,359],{"class":264},[220,31998,31999,32001],{"class":222,"line":179},[220,32000,364],{"class":264},[220,32002,31945],{"class":420},[220,32004,32005,32007,32009,32011,32013],{"class":222,"line":389},[220,32006,20482],{"class":226},[220,32008,353],{"class":260},[220,32010,743],{"class":264},[220,32012,24800],{"class":420},[220,32014,749],{"class":264},[220,32016,32017],{"class":222,"line":399},[220,32018,31959],{"class":264},[220,32020,32021,32023,32025],{"class":222,"line":644},[220,32022,2550],{"class":264},[220,32024,2553],{"class":420},[220,32026,386],{"class":264},[220,32028,32029,32031,32033],{"class":222,"line":650},[220,32030,2567],{"class":264},[220,32032,31901],{"class":420},[220,32034,359],{"class":264},[220,32036,32037,32039,32041],{"class":222,"line":656},[220,32038,402],{"class":264},[220,32040,347],{"class":420},[220,32042,359],{"class":264},[212,32044,32045],{"className":2844,"code":31986,"language":2846,"meta":178,"style":178},[99,32046,32047,32055,32061,32071,32075,32083,32091],{"__ignoreMap":178},[220,32048,32049,32051,32053],{"class":222,"line":223},[220,32050,343],{"class":264},[220,32052,347],{"class":420},[220,32054,359],{"class":264},[220,32056,32057,32059],{"class":222,"line":179},[220,32058,364],{"class":264},[220,32060,31945],{"class":420},[220,32062,32063,32065,32067,32069],{"class":222,"line":389},[220,32064,20482],{"class":226},[220,32066,29871],{"class":264},[220,32068,24800],{"class":420},[220,32070,749],{"class":264},[220,32072,32073],{"class":222,"line":399},[220,32074,31959],{"class":264},[220,32076,32077,32079,32081],{"class":222,"line":644},[220,32078,2550],{"class":264},[220,32080,2553],{"class":420},[220,32082,386],{"class":264},[220,32084,32085,32087,32089],{"class":222,"line":650},[220,32086,2567],{"class":264},[220,32088,31901],{"class":420},[220,32090,359],{"class":264},[220,32092,32093,32095,32097],{"class":222,"line":656},[220,32094,402],{"class":264},[220,32096,347],{"class":420},[220,32098,359],{"class":264},[212,32100,32101],{"className":468,"code":31986,"language":469,"meta":178,"style":178},[99,32102,32103,32111,32117,32129,32133,32141,32149],{"__ignoreMap":178},[220,32104,32105,32107,32109],{"class":222,"line":223},[220,32106,343],{"class":264},[220,32108,347],{"class":420},[220,32110,359],{"class":264},[220,32112,32113,32115],{"class":222,"line":179},[220,32114,364],{"class":264},[220,32116,31945],{"class":420},[220,32118,32119,32121,32123,32125,32127],{"class":222,"line":389},[220,32120,20482],{"class":226},[220,32122,353],{"class":260},[220,32124,743],{"class":264},[220,32126,24800],{"class":420},[220,32128,749],{"class":264},[220,32130,32131],{"class":222,"line":399},[220,32132,31959],{"class":264},[220,32134,32135,32137,32139],{"class":222,"line":644},[220,32136,2550],{"class":264},[220,32138,2553],{"class":420},[220,32140,386],{"class":264},[220,32142,32143,32145,32147],{"class":222,"line":650},[220,32144,2567],{"class":264},[220,32146,31901],{"class":420},[220,32148,359],{"class":264},[220,32150,32151,32153,32155],{"class":222,"line":656},[220,32152,402],{"class":264},[220,32154,347],{"class":420},[220,32156,359],{"class":264},[212,32158,32160],{"className":251,"code":32159,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'AngularBlur', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,32161,32162,32172,32176,32190,32194,32208,32216,32220,32224],{"__ignoreMap":178},[220,32163,32164,32166,32168,32170],{"class":222,"line":223},[220,32165,261],{"class":260},[220,32167,11512],{"class":264},[220,32169,268],{"class":260},[220,32171,4007],{"class":230},[220,32173,32174],{"class":222,"line":179},[220,32175,647],{"emptyLinePlaceholder":194},[220,32177,32178,32180,32182,32184,32186,32188],{"class":222,"line":389},[220,32179,1735],{"class":260},[220,32181,1738],{"class":420},[220,32183,1741],{"class":260},[220,32185,1744],{"class":260},[220,32187,1747],{"class":226},[220,32189,1750],{"class":264},[220,32191,32192],{"class":222,"line":399},[220,32193,1765],{"class":264},[220,32195,32196,32198,32201,32204,32206],{"class":222,"line":644},[220,32197,1770],{"class":264},[220,32199,32200],{"class":230},"'AngularBlur'",[220,32202,32203],{"class":264},", props: { intensity: ",[220,32205,24800],{"class":420},[220,32207,7546],{"class":264},[220,32209,32210,32212,32214],{"class":222,"line":650},[220,32211,7014],{"class":264},[220,32213,3206],{"class":230},[220,32215,2465],{"class":264},[220,32217,32218],{"class":222,"line":656},[220,32219,7031],{"class":264},[220,32221,32222],{"class":222,"line":673},[220,32223,1787],{"class":264},[220,32225,32226],{"class":222,"line":682},[220,32227,1792],{"class":264},[1504,32229,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32231},[32232,32233],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Blurs",{},"\u002Fdocs\u002Fcomponents\u002Fangularblur",{"title":31901,"description":31909},"docs\u002Fcomponents\u002FAngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":32241,"title":32242,"body":32243,"category":15908,"componentType":25877,"description":32250,"extension":191,"meta":32528,"navigation":194,"path":32529,"requiresChild":32530,"seo":32531,"stem":32532,"__hash__":32533},"components\u002Fdocs\u002Fcomponents\u002FArc.md","Arc",{"type":8,"value":32244,"toc":32524},[32245,32248,32251,32253,32255,32258,32260,32522],[11,32246,32242],{"id":32247},"arc",[15,32249,32250],{},"Pie sector (arc wedge) with adjustable radius and aperture angle",[31911,32252],{"component":32242},[23,32254,31915],{"id":26533},[31917,32256],{":props":32257},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the arc\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the arc\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.38\",\"description\":\"Radius of the pie sector\"},{\"name\":\"aperture\",\"type\":\"number\",\"default\":\"270\",\"description\":\"Aperture angle of the wedge in degrees (360 = full circle)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[23,32259,31923],{"id":31922},[246,32261,32262,32311,32362,32410,32460],{":tabs":1557},[212,32263,32265],{"className":334,"code":32264,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n :radius=\"0.38\"\n \u002F>\n\u003C\u002FShader>\n",[99,32266,32267,32275,32282,32290,32299,32303],{"__ignoreMap":178},[220,32268,32269,32271,32273],{"class":222,"line":223},[220,32270,343],{"class":264},[220,32272,347],{"class":346},[220,32274,359],{"class":264},[220,32276,32277,32279],{"class":222,"line":179},[220,32278,364],{"class":264},[220,32280,32281],{"class":346},"Arc\n",[220,32283,32284,32286,32288],{"class":222,"line":389},[220,32285,9635],{"class":226},[220,32287,353],{"class":264},[220,32289,9591],{"class":230},[220,32291,32292,32294,32296],{"class":222,"line":399},[220,32293,17405],{"class":226},[220,32295,353],{"class":264},[220,32297,32298],{"class":230},"\"0.38\"\n",[220,32300,32301],{"class":222,"line":644},[220,32302,1234],{"class":264},[220,32304,32305,32307,32309],{"class":222,"line":650},[220,32306,402],{"class":264},[220,32308,347],{"class":346},[220,32310,359],{"class":264},[212,32312,32314],{"className":409,"code":32313,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n radius={0.38}\n \u002F>\n\u003C\u002FShader>\n",[99,32315,32316,32324,32330,32338,32350,32354],{"__ignoreMap":178},[220,32317,32318,32320,32322],{"class":222,"line":223},[220,32319,343],{"class":264},[220,32321,347],{"class":420},[220,32323,359],{"class":264},[220,32325,32326,32328],{"class":222,"line":179},[220,32327,364],{"class":264},[220,32329,32281],{"class":420},[220,32331,32332,32334,32336],{"class":222,"line":389},[220,32333,9635],{"class":226},[220,32335,353],{"class":260},[220,32337,9591],{"class":230},[220,32339,32340,32342,32344,32346,32348],{"class":222,"line":399},[220,32341,9645],{"class":226},[220,32343,353],{"class":260},[220,32345,743],{"class":264},[220,32347,24738],{"class":420},[220,32349,749],{"class":264},[220,32351,32352],{"class":222,"line":644},[220,32353,1234],{"class":264},[220,32355,32356,32358,32360],{"class":222,"line":650},[220,32357,402],{"class":264},[220,32359,347],{"class":420},[220,32361,359],{"class":264},[212,32363,32364],{"className":2844,"code":32313,"language":2846,"meta":178,"style":178},[99,32365,32366,32374,32380,32388,32398,32402],{"__ignoreMap":178},[220,32367,32368,32370,32372],{"class":222,"line":223},[220,32369,343],{"class":264},[220,32371,347],{"class":420},[220,32373,359],{"class":264},[220,32375,32376,32378],{"class":222,"line":179},[220,32377,364],{"class":264},[220,32379,32281],{"class":420},[220,32381,32382,32384,32386],{"class":222,"line":389},[220,32383,9635],{"class":226},[220,32385,353],{"class":264},[220,32387,9591],{"class":230},[220,32389,32390,32392,32394,32396],{"class":222,"line":399},[220,32391,9645],{"class":226},[220,32393,29871],{"class":264},[220,32395,24738],{"class":420},[220,32397,749],{"class":264},[220,32399,32400],{"class":222,"line":644},[220,32401,1234],{"class":264},[220,32403,32404,32406,32408],{"class":222,"line":650},[220,32405,402],{"class":264},[220,32407,347],{"class":420},[220,32409,359],{"class":264},[212,32411,32412],{"className":468,"code":32313,"language":469,"meta":178,"style":178},[99,32413,32414,32422,32428,32436,32448,32452],{"__ignoreMap":178},[220,32415,32416,32418,32420],{"class":222,"line":223},[220,32417,343],{"class":264},[220,32419,347],{"class":420},[220,32421,359],{"class":264},[220,32423,32424,32426],{"class":222,"line":179},[220,32425,364],{"class":264},[220,32427,32281],{"class":420},[220,32429,32430,32432,32434],{"class":222,"line":389},[220,32431,9635],{"class":226},[220,32433,353],{"class":260},[220,32435,9591],{"class":230},[220,32437,32438,32440,32442,32444,32446],{"class":222,"line":399},[220,32439,9645],{"class":226},[220,32441,353],{"class":260},[220,32443,743],{"class":264},[220,32445,24738],{"class":420},[220,32447,749],{"class":264},[220,32449,32450],{"class":222,"line":644},[220,32451,1234],{"class":264},[220,32453,32454,32456,32458],{"class":222,"line":650},[220,32455,402],{"class":264},[220,32457,347],{"class":420},[220,32459,359],{"class":264},[212,32461,32463],{"className":251,"code":32462,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Arc', props: { color: '#ffffff', radius: 0.38 } }\n ]\n})\n",[99,32464,32465,32475,32479,32493,32497,32514,32518],{"__ignoreMap":178},[220,32466,32467,32469,32471,32473],{"class":222,"line":223},[220,32468,261],{"class":260},[220,32470,11512],{"class":264},[220,32472,268],{"class":260},[220,32474,4007],{"class":230},[220,32476,32477],{"class":222,"line":179},[220,32478,647],{"emptyLinePlaceholder":194},[220,32480,32481,32483,32485,32487,32489,32491],{"class":222,"line":389},[220,32482,1735],{"class":260},[220,32484,1738],{"class":420},[220,32486,1741],{"class":260},[220,32488,1744],{"class":260},[220,32490,1747],{"class":226},[220,32492,1750],{"class":264},[220,32494,32495],{"class":222,"line":399},[220,32496,1765],{"class":264},[220,32498,32499,32501,32504,32506,32508,32510,32512],{"class":222,"line":644},[220,32500,1770],{"class":264},[220,32502,32503],{"class":230},"'Arc'",[220,32505,1776],{"class":264},[220,32507,10169],{"class":230},[220,32509,6566],{"class":264},[220,32511,24738],{"class":420},[220,32513,1782],{"class":264},[220,32515,32516],{"class":222,"line":650},[220,32517,1787],{"class":264},[220,32519,32520],{"class":222,"line":656},[220,32521,1792],{"class":264},[1504,32523,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32525},[32526,32527],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Farc",false,{"title":32242,"description":32250},"docs\u002Fcomponents\u002FArc","I2EuhHpcUbcrQ9uSOSgreANTsm2_XJXh4GoQFwYf8Dg",{"id":32535,"title":32536,"body":32537,"category":32806,"componentType":25883,"description":32544,"extension":191,"meta":32807,"navigation":194,"path":32808,"requiresChild":194,"seo":32809,"stem":32810,"__hash__":32811},"components\u002Fdocs\u002Fcomponents\u002FAscii.md","Ascii",{"type":8,"value":32538,"toc":32802},[32539,32542,32545,32547,32549,32552,32554,32799],[11,32540,32536],{"id":32541},"ascii",[15,32543,32544],{},"Convert imagery to ASCII character art",[31911,32546],{"component":32536},[23,32548,31915],{"id":26533},[31917,32550],{":props":32551},"[{\"name\":\"characters\",\"type\":\"string\",\"default\":\"@%#*+=-:.\",\"description\":\"Characters ordered from dense to sparse. First character is used for bright areas, last for dark areas.\"},{\"name\":\"cellSize\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Size of each ASCII character cell (normalized to 1080p reference, scales proportionally at other resolutions)\"},{\"name\":\"fontFamily\",\"type\":\"\\\"Azeret Mono\\\" | \\\"Courier Prime\\\" | \\\"Cutive Mono\\\" | \\\"Fira Code\\\" | \\\"Geist Mono\\\" | \\\"IBM Plex Mono\\\" | \\\"JetBrains Mono\\\" | \\\"Major Mono Display\\\" | \\\"Martian Mono\\\" | \\\"Nova Mono\\\" | \\\"Press Start 2P\\\" | \\\"Roboto Mono\\\" | \\\"Share Tech Mono\\\" | \\\"Silkscreen\\\" | \\\"Source Code Pro\\\" | \\\"Space Mono\\\" | \\\"Syne Mono\\\" | \\\"VT323\\\" | \\\"Xanh Mono\\\"\",\"default\":\"JetBrains Mono\",\"description\":\"Font family for characters\"},{\"name\":\"spacing\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Character size within each cell (1.0 = optimal size, 0.0 = smallest)\"},{\"name\":\"gamma\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness curve adjustment. \u003C1 brightens darks (more light characters), >1 darkens midtones (more dark characters). Use to better fit characters to image brightness range.\"},{\"name\":\"alphaThreshold\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pixels with alpha below this threshold become fully transparent.\"},{\"name\":\"preserveAlpha\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"When enabled, output alpha matches input alpha. When disabled, pixels above the alpha threshold become fully opaque.\"}]",[23,32553,31923],{"id":31922},[246,32555,32556,32601,32645,32689,32733],{":tabs":1557},[212,32557,32559],{"className":334,"code":32558,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAscii>\n \u003CCircle \u002F>\n \u003C\u002FAscii>\n\u003C\u002FShader>\n",[99,32560,32561,32569,32577,32585,32593],{"__ignoreMap":178},[220,32562,32563,32565,32567],{"class":222,"line":223},[220,32564,343],{"class":264},[220,32566,347],{"class":346},[220,32568,359],{"class":264},[220,32570,32571,32573,32575],{"class":222,"line":179},[220,32572,364],{"class":264},[220,32574,32536],{"class":346},[220,32576,359],{"class":264},[220,32578,32579,32581,32583],{"class":222,"line":389},[220,32580,2550],{"class":264},[220,32582,2553],{"class":346},[220,32584,386],{"class":264},[220,32586,32587,32589,32591],{"class":222,"line":399},[220,32588,2567],{"class":264},[220,32590,32536],{"class":346},[220,32592,359],{"class":264},[220,32594,32595,32597,32599],{"class":222,"line":644},[220,32596,402],{"class":264},[220,32598,347],{"class":346},[220,32600,359],{"class":264},[212,32602,32603],{"className":409,"code":32558,"language":411,"meta":178,"style":178},[99,32604,32605,32613,32621,32629,32637],{"__ignoreMap":178},[220,32606,32607,32609,32611],{"class":222,"line":223},[220,32608,343],{"class":264},[220,32610,347],{"class":420},[220,32612,359],{"class":264},[220,32614,32615,32617,32619],{"class":222,"line":179},[220,32616,364],{"class":264},[220,32618,32536],{"class":420},[220,32620,359],{"class":264},[220,32622,32623,32625,32627],{"class":222,"line":389},[220,32624,2550],{"class":264},[220,32626,2553],{"class":420},[220,32628,386],{"class":264},[220,32630,32631,32633,32635],{"class":222,"line":399},[220,32632,2567],{"class":264},[220,32634,32536],{"class":420},[220,32636,359],{"class":264},[220,32638,32639,32641,32643],{"class":222,"line":644},[220,32640,402],{"class":264},[220,32642,347],{"class":420},[220,32644,359],{"class":264},[212,32646,32647],{"className":2844,"code":32558,"language":2846,"meta":178,"style":178},[99,32648,32649,32657,32665,32673,32681],{"__ignoreMap":178},[220,32650,32651,32653,32655],{"class":222,"line":223},[220,32652,343],{"class":264},[220,32654,347],{"class":420},[220,32656,359],{"class":264},[220,32658,32659,32661,32663],{"class":222,"line":179},[220,32660,364],{"class":264},[220,32662,32536],{"class":420},[220,32664,359],{"class":264},[220,32666,32667,32669,32671],{"class":222,"line":389},[220,32668,2550],{"class":264},[220,32670,2553],{"class":420},[220,32672,386],{"class":264},[220,32674,32675,32677,32679],{"class":222,"line":399},[220,32676,2567],{"class":264},[220,32678,32536],{"class":420},[220,32680,359],{"class":264},[220,32682,32683,32685,32687],{"class":222,"line":644},[220,32684,402],{"class":264},[220,32686,347],{"class":420},[220,32688,359],{"class":264},[212,32690,32691],{"className":468,"code":32558,"language":469,"meta":178,"style":178},[99,32692,32693,32701,32709,32717,32725],{"__ignoreMap":178},[220,32694,32695,32697,32699],{"class":222,"line":223},[220,32696,343],{"class":264},[220,32698,347],{"class":420},[220,32700,359],{"class":264},[220,32702,32703,32705,32707],{"class":222,"line":179},[220,32704,364],{"class":264},[220,32706,32536],{"class":420},[220,32708,359],{"class":264},[220,32710,32711,32713,32715],{"class":222,"line":389},[220,32712,2550],{"class":264},[220,32714,2553],{"class":420},[220,32716,386],{"class":264},[220,32718,32719,32721,32723],{"class":222,"line":399},[220,32720,2567],{"class":264},[220,32722,32536],{"class":420},[220,32724,359],{"class":264},[220,32726,32727,32729,32731],{"class":222,"line":644},[220,32728,402],{"class":264},[220,32730,347],{"class":420},[220,32732,359],{"class":264},[212,32734,32736],{"className":251,"code":32735,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ascii', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,32737,32738,32748,32752,32766,32770,32779,32787,32791,32795],{"__ignoreMap":178},[220,32739,32740,32742,32744,32746],{"class":222,"line":223},[220,32741,261],{"class":260},[220,32743,11512],{"class":264},[220,32745,268],{"class":260},[220,32747,4007],{"class":230},[220,32749,32750],{"class":222,"line":179},[220,32751,647],{"emptyLinePlaceholder":194},[220,32753,32754,32756,32758,32760,32762,32764],{"class":222,"line":389},[220,32755,1735],{"class":260},[220,32757,1738],{"class":420},[220,32759,1741],{"class":260},[220,32761,1744],{"class":260},[220,32763,1747],{"class":226},[220,32765,1750],{"class":264},[220,32767,32768],{"class":222,"line":399},[220,32769,1765],{"class":264},[220,32771,32772,32774,32777],{"class":222,"line":644},[220,32773,1770],{"class":264},[220,32775,32776],{"class":230},"'Ascii'",[220,32778,7009],{"class":264},[220,32780,32781,32783,32785],{"class":222,"line":650},[220,32782,7014],{"class":264},[220,32784,3206],{"class":230},[220,32786,2465],{"class":264},[220,32788,32789],{"class":222,"line":656},[220,32790,7031],{"class":264},[220,32792,32793],{"class":222,"line":673},[220,32794,1787],{"class":264},[220,32796,32797],{"class":222,"line":682},[220,32798,1792],{"class":264},[1504,32800,32801],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":178,"searchDepth":179,"depth":179,"links":32803},[32804,32805],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Stylize",{},"\u002Fdocs\u002Fcomponents\u002Fascii",{"title":32536,"description":32544},"docs\u002Fcomponents\u002FAscii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":32813,"title":12617,"body":32814,"category":33063,"componentType":25877,"description":32821,"extension":191,"meta":33064,"navigation":194,"path":33065,"requiresChild":32530,"seo":33066,"stem":33067,"__hash__":33068},"components\u002Fdocs\u002Fcomponents\u002FAurora.md",{"type":8,"value":32815,"toc":33059},[32816,32819,32822,32824,32826,32829,32831,33057],[11,32817,12617],{"id":32818},"aurora",[15,32820,32821],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[31911,32823],{"component":12617},[23,32825,31915],{"id":26533},[31917,32827],{":props":32828},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#a533f8\",\"description\":\"Edge color at the curtain base\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#22ee88\",\"description\":\"Core color in the bright center\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#1694e8\",\"description\":\"Tip color at the ray ends\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Shifts color distribution across the curtain height\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"80\",\"description\":\"Overall aurora brightness\"},{\"name\":\"curtainCount\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Number of aurora curtain layers\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Animation speed\"},{\"name\":\"waviness\",\"type\":\"number\",\"default\":\"50\",\"description\":\"How much the curtains undulate\"},{\"name\":\"rayDensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Density of vertical ray structures\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"120\",\"description\":\"How tall the aurora extends\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0}\",\"description\":\"Center position of the aurora\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for variation\"}]",[23,32830,31923],{"id":31922},[246,32832,32833,32874,32918,32958,33000],{":tabs":1557},[212,32834,32836],{"className":334,"code":32835,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n \u002F>\n\u003C\u002FShader>\n",[99,32837,32838,32846,32853,32862,32866],{"__ignoreMap":178},[220,32839,32840,32842,32844],{"class":222,"line":223},[220,32841,343],{"class":264},[220,32843,347],{"class":346},[220,32845,359],{"class":264},[220,32847,32848,32850],{"class":222,"line":179},[220,32849,364],{"class":264},[220,32851,32852],{"class":346},"Aurora\n",[220,32854,32855,32857,32859],{"class":222,"line":389},[220,32856,20371],{"class":226},[220,32858,353],{"class":264},[220,32860,32861],{"class":230},"\"80\"\n",[220,32863,32864],{"class":222,"line":399},[220,32865,1234],{"class":264},[220,32867,32868,32870,32872],{"class":222,"line":644},[220,32869,402],{"class":264},[220,32871,347],{"class":346},[220,32873,359],{"class":264},[212,32875,32877],{"className":409,"code":32876,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n intensity={80}\n \u002F>\n\u003C\u002FShader>\n",[99,32878,32879,32887,32893,32906,32910],{"__ignoreMap":178},[220,32880,32881,32883,32885],{"class":222,"line":223},[220,32882,343],{"class":264},[220,32884,347],{"class":420},[220,32886,359],{"class":264},[220,32888,32889,32891],{"class":222,"line":179},[220,32890,364],{"class":264},[220,32892,32852],{"class":420},[220,32894,32895,32897,32899,32901,32904],{"class":222,"line":389},[220,32896,20482],{"class":226},[220,32898,353],{"class":260},[220,32900,743],{"class":264},[220,32902,32903],{"class":420},"80",[220,32905,749],{"class":264},[220,32907,32908],{"class":222,"line":399},[220,32909,1234],{"class":264},[220,32911,32912,32914,32916],{"class":222,"line":644},[220,32913,402],{"class":264},[220,32915,347],{"class":420},[220,32917,359],{"class":264},[212,32919,32920],{"className":2844,"code":32876,"language":2846,"meta":178,"style":178},[99,32921,32922,32930,32936,32946,32950],{"__ignoreMap":178},[220,32923,32924,32926,32928],{"class":222,"line":223},[220,32925,343],{"class":264},[220,32927,347],{"class":420},[220,32929,359],{"class":264},[220,32931,32932,32934],{"class":222,"line":179},[220,32933,364],{"class":264},[220,32935,32852],{"class":420},[220,32937,32938,32940,32942,32944],{"class":222,"line":389},[220,32939,20482],{"class":226},[220,32941,29871],{"class":264},[220,32943,32903],{"class":420},[220,32945,749],{"class":264},[220,32947,32948],{"class":222,"line":399},[220,32949,1234],{"class":264},[220,32951,32952,32954,32956],{"class":222,"line":644},[220,32953,402],{"class":264},[220,32955,347],{"class":420},[220,32957,359],{"class":264},[212,32959,32960],{"className":468,"code":32876,"language":469,"meta":178,"style":178},[99,32961,32962,32970,32976,32988,32992],{"__ignoreMap":178},[220,32963,32964,32966,32968],{"class":222,"line":223},[220,32965,343],{"class":264},[220,32967,347],{"class":420},[220,32969,359],{"class":264},[220,32971,32972,32974],{"class":222,"line":179},[220,32973,364],{"class":264},[220,32975,32852],{"class":420},[220,32977,32978,32980,32982,32984,32986],{"class":222,"line":389},[220,32979,20482],{"class":226},[220,32981,353],{"class":260},[220,32983,743],{"class":264},[220,32985,32903],{"class":420},[220,32987,749],{"class":264},[220,32989,32990],{"class":222,"line":399},[220,32991,1234],{"class":264},[220,32993,32994,32996,32998],{"class":222,"line":644},[220,32995,402],{"class":264},[220,32997,347],{"class":420},[220,32999,359],{"class":264},[212,33001,33003],{"className":251,"code":33002,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Aurora', props: { intensity: 80 } }\n ]\n})\n",[99,33004,33005,33015,33019,33033,33037,33049,33053],{"__ignoreMap":178},[220,33006,33007,33009,33011,33013],{"class":222,"line":223},[220,33008,261],{"class":260},[220,33010,11512],{"class":264},[220,33012,268],{"class":260},[220,33014,4007],{"class":230},[220,33016,33017],{"class":222,"line":179},[220,33018,647],{"emptyLinePlaceholder":194},[220,33020,33021,33023,33025,33027,33029,33031],{"class":222,"line":389},[220,33022,1735],{"class":260},[220,33024,1738],{"class":420},[220,33026,1741],{"class":260},[220,33028,1744],{"class":260},[220,33030,1747],{"class":226},[220,33032,1750],{"class":264},[220,33034,33035],{"class":222,"line":399},[220,33036,1765],{"class":264},[220,33038,33039,33041,33043,33045,33047],{"class":222,"line":644},[220,33040,1770],{"class":264},[220,33042,12994],{"class":230},[220,33044,32203],{"class":264},[220,33046,32903],{"class":420},[220,33048,1782],{"class":264},[220,33050,33051],{"class":222,"line":650},[220,33052,1787],{"class":264},[220,33054,33055],{"class":222,"line":656},[220,33056,1792],{"class":264},[1504,33058,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33060},[33061,33062],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Textures",{},"\u002Fdocs\u002Fcomponents\u002Faurora",{"title":12617,"description":32821},"docs\u002Fcomponents\u002FAurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":33070,"title":33071,"body":33072,"category":33396,"componentType":25883,"description":33079,"extension":191,"meta":33397,"navigation":194,"path":33398,"requiresChild":194,"seo":33399,"stem":33400,"__hash__":33401},"components\u002Fdocs\u002Fcomponents\u002FBarShift.md","BarShift",{"type":8,"value":33073,"toc":33392},[33074,33077,33080,33082,33084,33087,33089,33390],[11,33075,33071],{"id":33076},"barshift",[15,33078,33079],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[31911,33081],{"component":33071},[23,33083,31915],{"id":26533},[31917,33085],{":props":33086},"[{\"name\":\"count\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of bars across the longest viewport dimension\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Maximum displacement per bar\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Randomization seed for per-bar offset variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed — each bar drifts at its own rate and direction\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,33088,31923],{"id":31922},[246,33090,33091,33147,33206,33262,33320],{":tabs":1557},[212,33092,33094],{"className":334,"code":33093,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarShift\n :intensity=\"0.15\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBarShift>\n\u003C\u002FShader>\n",[99,33095,33096,33104,33111,33119,33123,33131,33139],{"__ignoreMap":178},[220,33097,33098,33100,33102],{"class":222,"line":223},[220,33099,343],{"class":264},[220,33101,347],{"class":346},[220,33103,359],{"class":264},[220,33105,33106,33108],{"class":222,"line":179},[220,33107,364],{"class":264},[220,33109,33110],{"class":346},"BarShift\n",[220,33112,33113,33115,33117],{"class":222,"line":389},[220,33114,20371],{"class":226},[220,33116,353],{"class":264},[220,33118,18108],{"class":230},[220,33120,33121],{"class":222,"line":399},[220,33122,31959],{"class":264},[220,33124,33125,33127,33129],{"class":222,"line":644},[220,33126,2550],{"class":264},[220,33128,2553],{"class":346},[220,33130,386],{"class":264},[220,33132,33133,33135,33137],{"class":222,"line":650},[220,33134,2567],{"class":264},[220,33136,33071],{"class":346},[220,33138,359],{"class":264},[220,33140,33141,33143,33145],{"class":222,"line":656},[220,33142,402],{"class":264},[220,33144,347],{"class":346},[220,33146,359],{"class":264},[212,33148,33150],{"className":409,"code":33149,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBarShift\n intensity={0.15}\n >\n \u003CCircle \u002F>\n \u003C\u002FBarShift>\n\u003C\u002FShader>\n",[99,33151,33152,33160,33166,33178,33182,33190,33198],{"__ignoreMap":178},[220,33153,33154,33156,33158],{"class":222,"line":223},[220,33155,343],{"class":264},[220,33157,347],{"class":420},[220,33159,359],{"class":264},[220,33161,33162,33164],{"class":222,"line":179},[220,33163,364],{"class":264},[220,33165,33110],{"class":420},[220,33167,33168,33170,33172,33174,33176],{"class":222,"line":389},[220,33169,20482],{"class":226},[220,33171,353],{"class":260},[220,33173,743],{"class":264},[220,33175,18192],{"class":420},[220,33177,749],{"class":264},[220,33179,33180],{"class":222,"line":399},[220,33181,31959],{"class":264},[220,33183,33184,33186,33188],{"class":222,"line":644},[220,33185,2550],{"class":264},[220,33187,2553],{"class":420},[220,33189,386],{"class":264},[220,33191,33192,33194,33196],{"class":222,"line":650},[220,33193,2567],{"class":264},[220,33195,33071],{"class":420},[220,33197,359],{"class":264},[220,33199,33200,33202,33204],{"class":222,"line":656},[220,33201,402],{"class":264},[220,33203,347],{"class":420},[220,33205,359],{"class":264},[212,33207,33208],{"className":2844,"code":33149,"language":2846,"meta":178,"style":178},[99,33209,33210,33218,33224,33234,33238,33246,33254],{"__ignoreMap":178},[220,33211,33212,33214,33216],{"class":222,"line":223},[220,33213,343],{"class":264},[220,33215,347],{"class":420},[220,33217,359],{"class":264},[220,33219,33220,33222],{"class":222,"line":179},[220,33221,364],{"class":264},[220,33223,33110],{"class":420},[220,33225,33226,33228,33230,33232],{"class":222,"line":389},[220,33227,20482],{"class":226},[220,33229,29871],{"class":264},[220,33231,18192],{"class":420},[220,33233,749],{"class":264},[220,33235,33236],{"class":222,"line":399},[220,33237,31959],{"class":264},[220,33239,33240,33242,33244],{"class":222,"line":644},[220,33241,2550],{"class":264},[220,33243,2553],{"class":420},[220,33245,386],{"class":264},[220,33247,33248,33250,33252],{"class":222,"line":650},[220,33249,2567],{"class":264},[220,33251,33071],{"class":420},[220,33253,359],{"class":264},[220,33255,33256,33258,33260],{"class":222,"line":656},[220,33257,402],{"class":264},[220,33259,347],{"class":420},[220,33261,359],{"class":264},[212,33263,33264],{"className":468,"code":33149,"language":469,"meta":178,"style":178},[99,33265,33266,33274,33280,33292,33296,33304,33312],{"__ignoreMap":178},[220,33267,33268,33270,33272],{"class":222,"line":223},[220,33269,343],{"class":264},[220,33271,347],{"class":420},[220,33273,359],{"class":264},[220,33275,33276,33278],{"class":222,"line":179},[220,33277,364],{"class":264},[220,33279,33110],{"class":420},[220,33281,33282,33284,33286,33288,33290],{"class":222,"line":389},[220,33283,20482],{"class":226},[220,33285,353],{"class":260},[220,33287,743],{"class":264},[220,33289,18192],{"class":420},[220,33291,749],{"class":264},[220,33293,33294],{"class":222,"line":399},[220,33295,31959],{"class":264},[220,33297,33298,33300,33302],{"class":222,"line":644},[220,33299,2550],{"class":264},[220,33301,2553],{"class":420},[220,33303,386],{"class":264},[220,33305,33306,33308,33310],{"class":222,"line":650},[220,33307,2567],{"class":264},[220,33309,33071],{"class":420},[220,33311,359],{"class":264},[220,33313,33314,33316,33318],{"class":222,"line":656},[220,33315,402],{"class":264},[220,33317,347],{"class":420},[220,33319,359],{"class":264},[212,33321,33323],{"className":251,"code":33322,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BarShift', props: { intensity: 0.15 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,33324,33325,33335,33339,33353,33357,33370,33378,33382,33386],{"__ignoreMap":178},[220,33326,33327,33329,33331,33333],{"class":222,"line":223},[220,33328,261],{"class":260},[220,33330,11512],{"class":264},[220,33332,268],{"class":260},[220,33334,4007],{"class":230},[220,33336,33337],{"class":222,"line":179},[220,33338,647],{"emptyLinePlaceholder":194},[220,33340,33341,33343,33345,33347,33349,33351],{"class":222,"line":389},[220,33342,1735],{"class":260},[220,33344,1738],{"class":420},[220,33346,1741],{"class":260},[220,33348,1744],{"class":260},[220,33350,1747],{"class":226},[220,33352,1750],{"class":264},[220,33354,33355],{"class":222,"line":399},[220,33356,1765],{"class":264},[220,33358,33359,33361,33364,33366,33368],{"class":222,"line":644},[220,33360,1770],{"class":264},[220,33362,33363],{"class":230},"'BarShift'",[220,33365,32203],{"class":264},[220,33367,18192],{"class":420},[220,33369,7546],{"class":264},[220,33371,33372,33374,33376],{"class":222,"line":650},[220,33373,7014],{"class":264},[220,33375,3206],{"class":230},[220,33377,2465],{"class":264},[220,33379,33380],{"class":222,"line":656},[220,33381,7031],{"class":264},[220,33383,33384],{"class":222,"line":673},[220,33385,1787],{"class":264},[220,33387,33388],{"class":222,"line":682},[220,33389,1792],{"class":264},[1504,33391,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33393},[33394,33395],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Distortions",{},"\u002Fdocs\u002Fcomponents\u002Fbarshift",{"title":33071,"description":33079},"docs\u002Fcomponents\u002FBarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":33403,"title":33404,"body":33405,"category":33673,"componentType":25883,"description":33412,"extension":191,"meta":33674,"navigation":194,"path":33675,"requiresChild":194,"seo":33676,"stem":33677,"__hash__":33678},"components\u002Fdocs\u002Fcomponents\u002FBarnDoors.md","BarnDoors",{"type":8,"value":33406,"toc":33669},[33407,33410,33413,33415,33417,33420,33422,33667],[11,33408,33404],{"id":33409},"barndoors",[15,33411,33412],{},"Split the content along a center line and wipe outward in both directions",[31911,33414],{"component":33404},[23,33416,31915],{"id":26533},[31917,33418],{":props":33419},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the doors have opened (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the doors open in degrees (0 = apart horizontally)\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the wipe edges\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Close in from both edges instead of opening from the center\"}]",[23,33421,31923],{"id":31922},[246,33423,33424,33469,33513,33557,33601],{":tabs":1557},[212,33425,33427],{"className":334,"code":33426,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarnDoors>\n \u003CCircle \u002F>\n \u003C\u002FBarnDoors>\n\u003C\u002FShader>\n",[99,33428,33429,33437,33445,33453,33461],{"__ignoreMap":178},[220,33430,33431,33433,33435],{"class":222,"line":223},[220,33432,343],{"class":264},[220,33434,347],{"class":346},[220,33436,359],{"class":264},[220,33438,33439,33441,33443],{"class":222,"line":179},[220,33440,364],{"class":264},[220,33442,33404],{"class":346},[220,33444,359],{"class":264},[220,33446,33447,33449,33451],{"class":222,"line":389},[220,33448,2550],{"class":264},[220,33450,2553],{"class":346},[220,33452,386],{"class":264},[220,33454,33455,33457,33459],{"class":222,"line":399},[220,33456,2567],{"class":264},[220,33458,33404],{"class":346},[220,33460,359],{"class":264},[220,33462,33463,33465,33467],{"class":222,"line":644},[220,33464,402],{"class":264},[220,33466,347],{"class":346},[220,33468,359],{"class":264},[212,33470,33471],{"className":409,"code":33426,"language":411,"meta":178,"style":178},[99,33472,33473,33481,33489,33497,33505],{"__ignoreMap":178},[220,33474,33475,33477,33479],{"class":222,"line":223},[220,33476,343],{"class":264},[220,33478,347],{"class":420},[220,33480,359],{"class":264},[220,33482,33483,33485,33487],{"class":222,"line":179},[220,33484,364],{"class":264},[220,33486,33404],{"class":420},[220,33488,359],{"class":264},[220,33490,33491,33493,33495],{"class":222,"line":389},[220,33492,2550],{"class":264},[220,33494,2553],{"class":420},[220,33496,386],{"class":264},[220,33498,33499,33501,33503],{"class":222,"line":399},[220,33500,2567],{"class":264},[220,33502,33404],{"class":420},[220,33504,359],{"class":264},[220,33506,33507,33509,33511],{"class":222,"line":644},[220,33508,402],{"class":264},[220,33510,347],{"class":420},[220,33512,359],{"class":264},[212,33514,33515],{"className":2844,"code":33426,"language":2846,"meta":178,"style":178},[99,33516,33517,33525,33533,33541,33549],{"__ignoreMap":178},[220,33518,33519,33521,33523],{"class":222,"line":223},[220,33520,343],{"class":264},[220,33522,347],{"class":420},[220,33524,359],{"class":264},[220,33526,33527,33529,33531],{"class":222,"line":179},[220,33528,364],{"class":264},[220,33530,33404],{"class":420},[220,33532,359],{"class":264},[220,33534,33535,33537,33539],{"class":222,"line":389},[220,33536,2550],{"class":264},[220,33538,2553],{"class":420},[220,33540,386],{"class":264},[220,33542,33543,33545,33547],{"class":222,"line":399},[220,33544,2567],{"class":264},[220,33546,33404],{"class":420},[220,33548,359],{"class":264},[220,33550,33551,33553,33555],{"class":222,"line":644},[220,33552,402],{"class":264},[220,33554,347],{"class":420},[220,33556,359],{"class":264},[212,33558,33559],{"className":468,"code":33426,"language":469,"meta":178,"style":178},[99,33560,33561,33569,33577,33585,33593],{"__ignoreMap":178},[220,33562,33563,33565,33567],{"class":222,"line":223},[220,33564,343],{"class":264},[220,33566,347],{"class":420},[220,33568,359],{"class":264},[220,33570,33571,33573,33575],{"class":222,"line":179},[220,33572,364],{"class":264},[220,33574,33404],{"class":420},[220,33576,359],{"class":264},[220,33578,33579,33581,33583],{"class":222,"line":389},[220,33580,2550],{"class":264},[220,33582,2553],{"class":420},[220,33584,386],{"class":264},[220,33586,33587,33589,33591],{"class":222,"line":399},[220,33588,2567],{"class":264},[220,33590,33404],{"class":420},[220,33592,359],{"class":264},[220,33594,33595,33597,33599],{"class":222,"line":644},[220,33596,402],{"class":264},[220,33598,347],{"class":420},[220,33600,359],{"class":264},[212,33602,33604],{"className":251,"code":33603,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BarnDoors', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,33605,33606,33616,33620,33634,33638,33647,33655,33659,33663],{"__ignoreMap":178},[220,33607,33608,33610,33612,33614],{"class":222,"line":223},[220,33609,261],{"class":260},[220,33611,11512],{"class":264},[220,33613,268],{"class":260},[220,33615,4007],{"class":230},[220,33617,33618],{"class":222,"line":179},[220,33619,647],{"emptyLinePlaceholder":194},[220,33621,33622,33624,33626,33628,33630,33632],{"class":222,"line":389},[220,33623,1735],{"class":260},[220,33625,1738],{"class":420},[220,33627,1741],{"class":260},[220,33629,1744],{"class":260},[220,33631,1747],{"class":226},[220,33633,1750],{"class":264},[220,33635,33636],{"class":222,"line":399},[220,33637,1765],{"class":264},[220,33639,33640,33642,33645],{"class":222,"line":644},[220,33641,1770],{"class":264},[220,33643,33644],{"class":230},"'BarnDoors'",[220,33646,7009],{"class":264},[220,33648,33649,33651,33653],{"class":222,"line":650},[220,33650,7014],{"class":264},[220,33652,3206],{"class":230},[220,33654,2465],{"class":264},[220,33656,33657],{"class":222,"line":656},[220,33658,7031],{"class":264},[220,33660,33661],{"class":222,"line":673},[220,33662,1787],{"class":264},[220,33664,33665],{"class":222,"line":682},[220,33666,1792],{"class":264},[1504,33668,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":33670},[33671,33672],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Transitions",{},"\u002Fdocs\u002Fcomponents\u002Fbarndoors",{"title":33404,"description":33412},"docs\u002Fcomponents\u002FBarnDoors","73aNA7NyczNQKFcurXoO42FtB4UEaUOUGpMTLW3y3js",{"id":33680,"title":33681,"body":33682,"category":33063,"componentType":25877,"description":33689,"extension":191,"meta":33874,"navigation":194,"path":33875,"requiresChild":32530,"seo":33876,"stem":33877,"__hash__":33878},"components\u002Fdocs\u002Fcomponents\u002FBeam.md","Beam",{"type":8,"value":33683,"toc":33870},[33684,33687,33690,33692,33694,33697,33699,33868],[11,33685,33681],{"id":33686},"beam",[15,33688,33689],{},"A beam of light from one point to another.",[31911,33691],{"component":33681},[23,33693,31915],{"id":26533},[31917,33695],{":props":33696},"[{\"name\":\"startPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.5}\",\"description\":\"Starting point of the beam\"},{\"name\":\"endPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.5}\",\"description\":\"Ending point of the beam\"},{\"name\":\"startThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Thickness at the start of the beam\"},{\"name\":\"endThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Thickness at the end of the beam\"},{\"name\":\"startSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness at the start of the beam\"},{\"name\":\"endSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness at the end of the beam\"},{\"name\":\"insideColor\",\"type\":\"string\",\"default\":\"#FF0000\",\"description\":\"Color at the center of the beam\"},{\"name\":\"outsideColor\",\"type\":\"string\",\"default\":\"#0000FF\",\"description\":\"Color at the edges of the beam\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,33698,31923],{"id":31922},[246,33700,33701,33730,33758,33786,33814],{":tabs":1557},[212,33702,33704],{"className":334,"code":33703,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBeam \u002F>\n\u003C\u002FShader>\n",[99,33705,33706,33714,33722],{"__ignoreMap":178},[220,33707,33708,33710,33712],{"class":222,"line":223},[220,33709,343],{"class":264},[220,33711,347],{"class":346},[220,33713,359],{"class":264},[220,33715,33716,33718,33720],{"class":222,"line":179},[220,33717,364],{"class":264},[220,33719,33681],{"class":346},[220,33721,386],{"class":264},[220,33723,33724,33726,33728],{"class":222,"line":389},[220,33725,402],{"class":264},[220,33727,347],{"class":346},[220,33729,359],{"class":264},[212,33731,33732],{"className":409,"code":33703,"language":411,"meta":178,"style":178},[99,33733,33734,33742,33750],{"__ignoreMap":178},[220,33735,33736,33738,33740],{"class":222,"line":223},[220,33737,343],{"class":264},[220,33739,347],{"class":420},[220,33741,359],{"class":264},[220,33743,33744,33746,33748],{"class":222,"line":179},[220,33745,364],{"class":264},[220,33747,33681],{"class":420},[220,33749,386],{"class":264},[220,33751,33752,33754,33756],{"class":222,"line":389},[220,33753,402],{"class":264},[220,33755,347],{"class":420},[220,33757,359],{"class":264},[212,33759,33760],{"className":2844,"code":33703,"language":2846,"meta":178,"style":178},[99,33761,33762,33770,33778],{"__ignoreMap":178},[220,33763,33764,33766,33768],{"class":222,"line":223},[220,33765,343],{"class":264},[220,33767,347],{"class":420},[220,33769,359],{"class":264},[220,33771,33772,33774,33776],{"class":222,"line":179},[220,33773,364],{"class":264},[220,33775,33681],{"class":420},[220,33777,386],{"class":264},[220,33779,33780,33782,33784],{"class":222,"line":389},[220,33781,402],{"class":264},[220,33783,347],{"class":420},[220,33785,359],{"class":264},[212,33787,33788],{"className":468,"code":33703,"language":469,"meta":178,"style":178},[99,33789,33790,33798,33806],{"__ignoreMap":178},[220,33791,33792,33794,33796],{"class":222,"line":223},[220,33793,343],{"class":264},[220,33795,347],{"class":420},[220,33797,359],{"class":264},[220,33799,33800,33802,33804],{"class":222,"line":179},[220,33801,364],{"class":264},[220,33803,33681],{"class":420},[220,33805,386],{"class":264},[220,33807,33808,33810,33812],{"class":222,"line":389},[220,33809,402],{"class":264},[220,33811,347],{"class":420},[220,33813,359],{"class":264},[212,33815,33817],{"className":251,"code":33816,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Beam', props: {} }\n ]\n})\n",[99,33818,33819,33829,33833,33847,33851,33860,33864],{"__ignoreMap":178},[220,33820,33821,33823,33825,33827],{"class":222,"line":223},[220,33822,261],{"class":260},[220,33824,11512],{"class":264},[220,33826,268],{"class":260},[220,33828,4007],{"class":230},[220,33830,33831],{"class":222,"line":179},[220,33832,647],{"emptyLinePlaceholder":194},[220,33834,33835,33837,33839,33841,33843,33845],{"class":222,"line":389},[220,33836,1735],{"class":260},[220,33838,1738],{"class":420},[220,33840,1741],{"class":260},[220,33842,1744],{"class":260},[220,33844,1747],{"class":226},[220,33846,1750],{"class":264},[220,33848,33849],{"class":222,"line":399},[220,33850,1765],{"class":264},[220,33852,33853,33855,33858],{"class":222,"line":644},[220,33854,1770],{"class":264},[220,33856,33857],{"class":230},"'Beam'",[220,33859,2465],{"class":264},[220,33861,33862],{"class":222,"line":650},[220,33863,1787],{"class":264},[220,33865,33866],{"class":222,"line":656},[220,33867,1792],{"class":264},[1504,33869,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":33871},[33872,33873],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbeam",{"title":33681,"description":33689},"docs\u002Fcomponents\u002FBeam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":33880,"title":33881,"body":33882,"category":33396,"componentType":25883,"description":33889,"extension":191,"meta":34150,"navigation":194,"path":34151,"requiresChild":194,"seo":34152,"stem":34153,"__hash__":34154},"components\u002Fdocs\u002Fcomponents\u002FBend.md","Bend",{"type":8,"value":33883,"toc":34146},[33884,33887,33890,33892,33894,33897,33899,34144],[11,33885,33881],{"id":33886},"bend",[15,33888,33889],{},"Bends the ends of the frame toward you like a curved display — content at the edges swells closer under real perspective, or curls away when the strength goes negative",[31911,33891],{"component":33881},[23,33893,31915],{"id":26533},[31917,33895],{":props":33896},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame)\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the bend axis in degrees — 0 bends the left\u002Fright ends, 90 bends the top\u002Fbottom\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges when the bend pulls content away from the frame border\"}]",[23,33898,31923],{"id":31922},[246,33900,33901,33946,33990,34034,34078],{":tabs":1557},[212,33902,33904],{"className":334,"code":33903,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBend>\n \u003CCircle \u002F>\n \u003C\u002FBend>\n\u003C\u002FShader>\n",[99,33905,33906,33914,33922,33930,33938],{"__ignoreMap":178},[220,33907,33908,33910,33912],{"class":222,"line":223},[220,33909,343],{"class":264},[220,33911,347],{"class":346},[220,33913,359],{"class":264},[220,33915,33916,33918,33920],{"class":222,"line":179},[220,33917,364],{"class":264},[220,33919,33881],{"class":346},[220,33921,359],{"class":264},[220,33923,33924,33926,33928],{"class":222,"line":389},[220,33925,2550],{"class":264},[220,33927,2553],{"class":346},[220,33929,386],{"class":264},[220,33931,33932,33934,33936],{"class":222,"line":399},[220,33933,2567],{"class":264},[220,33935,33881],{"class":346},[220,33937,359],{"class":264},[220,33939,33940,33942,33944],{"class":222,"line":644},[220,33941,402],{"class":264},[220,33943,347],{"class":346},[220,33945,359],{"class":264},[212,33947,33948],{"className":409,"code":33903,"language":411,"meta":178,"style":178},[99,33949,33950,33958,33966,33974,33982],{"__ignoreMap":178},[220,33951,33952,33954,33956],{"class":222,"line":223},[220,33953,343],{"class":264},[220,33955,347],{"class":420},[220,33957,359],{"class":264},[220,33959,33960,33962,33964],{"class":222,"line":179},[220,33961,364],{"class":264},[220,33963,33881],{"class":420},[220,33965,359],{"class":264},[220,33967,33968,33970,33972],{"class":222,"line":389},[220,33969,2550],{"class":264},[220,33971,2553],{"class":420},[220,33973,386],{"class":264},[220,33975,33976,33978,33980],{"class":222,"line":399},[220,33977,2567],{"class":264},[220,33979,33881],{"class":420},[220,33981,359],{"class":264},[220,33983,33984,33986,33988],{"class":222,"line":644},[220,33985,402],{"class":264},[220,33987,347],{"class":420},[220,33989,359],{"class":264},[212,33991,33992],{"className":2844,"code":33903,"language":2846,"meta":178,"style":178},[99,33993,33994,34002,34010,34018,34026],{"__ignoreMap":178},[220,33995,33996,33998,34000],{"class":222,"line":223},[220,33997,343],{"class":264},[220,33999,347],{"class":420},[220,34001,359],{"class":264},[220,34003,34004,34006,34008],{"class":222,"line":179},[220,34005,364],{"class":264},[220,34007,33881],{"class":420},[220,34009,359],{"class":264},[220,34011,34012,34014,34016],{"class":222,"line":389},[220,34013,2550],{"class":264},[220,34015,2553],{"class":420},[220,34017,386],{"class":264},[220,34019,34020,34022,34024],{"class":222,"line":399},[220,34021,2567],{"class":264},[220,34023,33881],{"class":420},[220,34025,359],{"class":264},[220,34027,34028,34030,34032],{"class":222,"line":644},[220,34029,402],{"class":264},[220,34031,347],{"class":420},[220,34033,359],{"class":264},[212,34035,34036],{"className":468,"code":33903,"language":469,"meta":178,"style":178},[99,34037,34038,34046,34054,34062,34070],{"__ignoreMap":178},[220,34039,34040,34042,34044],{"class":222,"line":223},[220,34041,343],{"class":264},[220,34043,347],{"class":420},[220,34045,359],{"class":264},[220,34047,34048,34050,34052],{"class":222,"line":179},[220,34049,364],{"class":264},[220,34051,33881],{"class":420},[220,34053,359],{"class":264},[220,34055,34056,34058,34060],{"class":222,"line":389},[220,34057,2550],{"class":264},[220,34059,2553],{"class":420},[220,34061,386],{"class":264},[220,34063,34064,34066,34068],{"class":222,"line":399},[220,34065,2567],{"class":264},[220,34067,33881],{"class":420},[220,34069,359],{"class":264},[220,34071,34072,34074,34076],{"class":222,"line":644},[220,34073,402],{"class":264},[220,34075,347],{"class":420},[220,34077,359],{"class":264},[212,34079,34081],{"className":251,"code":34080,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bend', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,34082,34083,34093,34097,34111,34115,34124,34132,34136,34140],{"__ignoreMap":178},[220,34084,34085,34087,34089,34091],{"class":222,"line":223},[220,34086,261],{"class":260},[220,34088,11512],{"class":264},[220,34090,268],{"class":260},[220,34092,4007],{"class":230},[220,34094,34095],{"class":222,"line":179},[220,34096,647],{"emptyLinePlaceholder":194},[220,34098,34099,34101,34103,34105,34107,34109],{"class":222,"line":389},[220,34100,1735],{"class":260},[220,34102,1738],{"class":420},[220,34104,1741],{"class":260},[220,34106,1744],{"class":260},[220,34108,1747],{"class":226},[220,34110,1750],{"class":264},[220,34112,34113],{"class":222,"line":399},[220,34114,1765],{"class":264},[220,34116,34117,34119,34122],{"class":222,"line":644},[220,34118,1770],{"class":264},[220,34120,34121],{"class":230},"'Bend'",[220,34123,7009],{"class":264},[220,34125,34126,34128,34130],{"class":222,"line":650},[220,34127,7014],{"class":264},[220,34129,3206],{"class":230},[220,34131,2465],{"class":264},[220,34133,34134],{"class":222,"line":656},[220,34135,7031],{"class":264},[220,34137,34138],{"class":222,"line":673},[220,34139,1787],{"class":264},[220,34141,34142],{"class":222,"line":682},[220,34143,1792],{"class":264},[1504,34145,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34147},[34148,34149],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbend",{"title":33881,"description":33889},"docs\u002Fcomponents\u002FBend","yTh745yjRF84KyipDFIzuYlGJcnZKEi8xan5ye79WXk",{"id":34156,"title":34157,"body":34158,"category":33063,"componentType":25877,"description":34165,"extension":191,"meta":34350,"navigation":194,"path":34351,"requiresChild":32530,"seo":34352,"stem":34353,"__hash__":34354},"components\u002Fdocs\u002Fcomponents\u002FBlob.md","Blob",{"type":8,"value":34159,"toc":34346},[34160,34163,34166,34168,34170,34173,34175,34344],[11,34161,34157],{"id":34162},"blob",[15,34164,34165],{},"Organic animated blob with 3D lighting and gradients",[31911,34167],{"component":34157},[23,34169,31915],{"id":26533},[31917,34171],{":props":34172},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff6b35\",\"description\":\"Primary color of the blob\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e91e63\",\"description\":\"Secondary color of the blob\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Size of the blob\"},{\"name\":\"deformation\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How organic and blobby the shape is (0 = circle, 1 = very blobby)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the blob edges (combines edge width and transition curve)\"},{\"name\":\"highlightIntensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of specular highlight effect\"},{\"name\":\"highlightX\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Light direction X component\"},{\"name\":\"highlightY\",\"type\":\"number\",\"default\":\"-0.3\",\"description\":\"Light direction Y component\"},{\"name\":\"highlightZ\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Light direction Z component\"},{\"name\":\"highlightColor\",\"type\":\"string\",\"default\":\"#ffe11a\",\"description\":\"Color of the specular highlight\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Adjusts the starting state, useful for variation\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the blob\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,34174,31923],{"id":31922},[246,34176,34177,34206,34234,34262,34290],{":tabs":1557},[212,34178,34180],{"className":334,"code":34179,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlob \u002F>\n\u003C\u002FShader>\n",[99,34181,34182,34190,34198],{"__ignoreMap":178},[220,34183,34184,34186,34188],{"class":222,"line":223},[220,34185,343],{"class":264},[220,34187,347],{"class":346},[220,34189,359],{"class":264},[220,34191,34192,34194,34196],{"class":222,"line":179},[220,34193,364],{"class":264},[220,34195,34157],{"class":346},[220,34197,386],{"class":264},[220,34199,34200,34202,34204],{"class":222,"line":389},[220,34201,402],{"class":264},[220,34203,347],{"class":346},[220,34205,359],{"class":264},[212,34207,34208],{"className":409,"code":34179,"language":411,"meta":178,"style":178},[99,34209,34210,34218,34226],{"__ignoreMap":178},[220,34211,34212,34214,34216],{"class":222,"line":223},[220,34213,343],{"class":264},[220,34215,347],{"class":420},[220,34217,359],{"class":264},[220,34219,34220,34222,34224],{"class":222,"line":179},[220,34221,364],{"class":264},[220,34223,34157],{"class":420},[220,34225,386],{"class":264},[220,34227,34228,34230,34232],{"class":222,"line":389},[220,34229,402],{"class":264},[220,34231,347],{"class":420},[220,34233,359],{"class":264},[212,34235,34236],{"className":2844,"code":34179,"language":2846,"meta":178,"style":178},[99,34237,34238,34246,34254],{"__ignoreMap":178},[220,34239,34240,34242,34244],{"class":222,"line":223},[220,34241,343],{"class":264},[220,34243,347],{"class":420},[220,34245,359],{"class":264},[220,34247,34248,34250,34252],{"class":222,"line":179},[220,34249,364],{"class":264},[220,34251,34157],{"class":420},[220,34253,386],{"class":264},[220,34255,34256,34258,34260],{"class":222,"line":389},[220,34257,402],{"class":264},[220,34259,347],{"class":420},[220,34261,359],{"class":264},[212,34263,34264],{"className":468,"code":34179,"language":469,"meta":178,"style":178},[99,34265,34266,34274,34282],{"__ignoreMap":178},[220,34267,34268,34270,34272],{"class":222,"line":223},[220,34269,343],{"class":264},[220,34271,347],{"class":420},[220,34273,359],{"class":264},[220,34275,34276,34278,34280],{"class":222,"line":179},[220,34277,364],{"class":264},[220,34279,34157],{"class":420},[220,34281,386],{"class":264},[220,34283,34284,34286,34288],{"class":222,"line":389},[220,34285,402],{"class":264},[220,34287,347],{"class":420},[220,34289,359],{"class":264},[212,34291,34293],{"className":251,"code":34292,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blob', props: {} }\n ]\n})\n",[99,34294,34295,34305,34309,34323,34327,34336,34340],{"__ignoreMap":178},[220,34296,34297,34299,34301,34303],{"class":222,"line":223},[220,34298,261],{"class":260},[220,34300,11512],{"class":264},[220,34302,268],{"class":260},[220,34304,4007],{"class":230},[220,34306,34307],{"class":222,"line":179},[220,34308,647],{"emptyLinePlaceholder":194},[220,34310,34311,34313,34315,34317,34319,34321],{"class":222,"line":389},[220,34312,1735],{"class":260},[220,34314,1738],{"class":420},[220,34316,1741],{"class":260},[220,34318,1744],{"class":260},[220,34320,1747],{"class":226},[220,34322,1750],{"class":264},[220,34324,34325],{"class":222,"line":399},[220,34326,1765],{"class":264},[220,34328,34329,34331,34334],{"class":222,"line":644},[220,34330,1770],{"class":264},[220,34332,34333],{"class":230},"'Blob'",[220,34335,2465],{"class":264},[220,34337,34338],{"class":222,"line":650},[220,34339,1787],{"class":264},[220,34341,34342],{"class":222,"line":656},[220,34343,1792],{"class":264},[1504,34345,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34347},[34348,34349],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblob",{"title":34157,"description":34165},"docs\u002Fcomponents\u002FBlob","U-pbQn6f0SrlOpH89U1WG2da3ucUQlGSSh6bWsmxdSs",{"id":34356,"title":34357,"body":34358,"category":33673,"componentType":25883,"description":34365,"extension":191,"meta":34626,"navigation":194,"path":34627,"requiresChild":194,"seo":34628,"stem":34629,"__hash__":34630},"components\u002Fdocs\u002Fcomponents\u002FBlockDissolve.md","BlockDissolve",{"type":8,"value":34359,"toc":34622},[34360,34363,34366,34368,34370,34373,34375,34620],[11,34361,34357],{"id":34362},"blockdissolve",[15,34364,34365],{},"Dissolve the content away as a grid of blocks vanishing in random order",[31911,34367],{"component":34357},[23,34369,31915],{"id":26533},[31917,34371],{":props":34372},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"0.08\",\"description\":\"Size of each block as a fraction of the frame width\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each block fades out (0 = hard-edged blocks)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order blocks dissolve in\"}]",[23,34374,31923],{"id":31922},[246,34376,34377,34422,34466,34510,34554],{":tabs":1557},[212,34378,34380],{"className":334,"code":34379,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockDissolve>\n \u003CCircle \u002F>\n \u003C\u002FBlockDissolve>\n\u003C\u002FShader>\n",[99,34381,34382,34390,34398,34406,34414],{"__ignoreMap":178},[220,34383,34384,34386,34388],{"class":222,"line":223},[220,34385,343],{"class":264},[220,34387,347],{"class":346},[220,34389,359],{"class":264},[220,34391,34392,34394,34396],{"class":222,"line":179},[220,34393,364],{"class":264},[220,34395,34357],{"class":346},[220,34397,359],{"class":264},[220,34399,34400,34402,34404],{"class":222,"line":389},[220,34401,2550],{"class":264},[220,34403,2553],{"class":346},[220,34405,386],{"class":264},[220,34407,34408,34410,34412],{"class":222,"line":399},[220,34409,2567],{"class":264},[220,34411,34357],{"class":346},[220,34413,359],{"class":264},[220,34415,34416,34418,34420],{"class":222,"line":644},[220,34417,402],{"class":264},[220,34419,347],{"class":346},[220,34421,359],{"class":264},[212,34423,34424],{"className":409,"code":34379,"language":411,"meta":178,"style":178},[99,34425,34426,34434,34442,34450,34458],{"__ignoreMap":178},[220,34427,34428,34430,34432],{"class":222,"line":223},[220,34429,343],{"class":264},[220,34431,347],{"class":420},[220,34433,359],{"class":264},[220,34435,34436,34438,34440],{"class":222,"line":179},[220,34437,364],{"class":264},[220,34439,34357],{"class":420},[220,34441,359],{"class":264},[220,34443,34444,34446,34448],{"class":222,"line":389},[220,34445,2550],{"class":264},[220,34447,2553],{"class":420},[220,34449,386],{"class":264},[220,34451,34452,34454,34456],{"class":222,"line":399},[220,34453,2567],{"class":264},[220,34455,34357],{"class":420},[220,34457,359],{"class":264},[220,34459,34460,34462,34464],{"class":222,"line":644},[220,34461,402],{"class":264},[220,34463,347],{"class":420},[220,34465,359],{"class":264},[212,34467,34468],{"className":2844,"code":34379,"language":2846,"meta":178,"style":178},[99,34469,34470,34478,34486,34494,34502],{"__ignoreMap":178},[220,34471,34472,34474,34476],{"class":222,"line":223},[220,34473,343],{"class":264},[220,34475,347],{"class":420},[220,34477,359],{"class":264},[220,34479,34480,34482,34484],{"class":222,"line":179},[220,34481,364],{"class":264},[220,34483,34357],{"class":420},[220,34485,359],{"class":264},[220,34487,34488,34490,34492],{"class":222,"line":389},[220,34489,2550],{"class":264},[220,34491,2553],{"class":420},[220,34493,386],{"class":264},[220,34495,34496,34498,34500],{"class":222,"line":399},[220,34497,2567],{"class":264},[220,34499,34357],{"class":420},[220,34501,359],{"class":264},[220,34503,34504,34506,34508],{"class":222,"line":644},[220,34505,402],{"class":264},[220,34507,347],{"class":420},[220,34509,359],{"class":264},[212,34511,34512],{"className":468,"code":34379,"language":469,"meta":178,"style":178},[99,34513,34514,34522,34530,34538,34546],{"__ignoreMap":178},[220,34515,34516,34518,34520],{"class":222,"line":223},[220,34517,343],{"class":264},[220,34519,347],{"class":420},[220,34521,359],{"class":264},[220,34523,34524,34526,34528],{"class":222,"line":179},[220,34525,364],{"class":264},[220,34527,34357],{"class":420},[220,34529,359],{"class":264},[220,34531,34532,34534,34536],{"class":222,"line":389},[220,34533,2550],{"class":264},[220,34535,2553],{"class":420},[220,34537,386],{"class":264},[220,34539,34540,34542,34544],{"class":222,"line":399},[220,34541,2567],{"class":264},[220,34543,34357],{"class":420},[220,34545,359],{"class":264},[220,34547,34548,34550,34552],{"class":222,"line":644},[220,34549,402],{"class":264},[220,34551,347],{"class":420},[220,34553,359],{"class":264},[212,34555,34557],{"className":251,"code":34556,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlockDissolve', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,34558,34559,34569,34573,34587,34591,34600,34608,34612,34616],{"__ignoreMap":178},[220,34560,34561,34563,34565,34567],{"class":222,"line":223},[220,34562,261],{"class":260},[220,34564,11512],{"class":264},[220,34566,268],{"class":260},[220,34568,4007],{"class":230},[220,34570,34571],{"class":222,"line":179},[220,34572,647],{"emptyLinePlaceholder":194},[220,34574,34575,34577,34579,34581,34583,34585],{"class":222,"line":389},[220,34576,1735],{"class":260},[220,34578,1738],{"class":420},[220,34580,1741],{"class":260},[220,34582,1744],{"class":260},[220,34584,1747],{"class":226},[220,34586,1750],{"class":264},[220,34588,34589],{"class":222,"line":399},[220,34590,1765],{"class":264},[220,34592,34593,34595,34598],{"class":222,"line":644},[220,34594,1770],{"class":264},[220,34596,34597],{"class":230},"'BlockDissolve'",[220,34599,7009],{"class":264},[220,34601,34602,34604,34606],{"class":222,"line":650},[220,34603,7014],{"class":264},[220,34605,3206],{"class":230},[220,34607,2465],{"class":264},[220,34609,34610],{"class":222,"line":656},[220,34611,7031],{"class":264},[220,34613,34614],{"class":222,"line":673},[220,34615,1787],{"class":264},[220,34617,34618],{"class":222,"line":682},[220,34619,1792],{"class":264},[1504,34621,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34623},[34624,34625],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblockdissolve",{"title":34357,"description":34365},"docs\u002Fcomponents\u002FBlockDissolve","eek109j_YYMANDpv7x-fWVWd060AWX7s6NXkZk6R6zE",{"id":34632,"title":34633,"body":34634,"category":33063,"componentType":25877,"description":34641,"extension":191,"meta":34826,"navigation":194,"path":34827,"requiresChild":32530,"seo":34828,"stem":34829,"__hash__":34830},"components\u002Fdocs\u002Fcomponents\u002FBlockNoise.md","BlockNoise",{"type":8,"value":34635,"toc":34822},[34636,34639,34642,34644,34646,34649,34651,34820],[11,34637,34633],{"id":34638},"blocknoise",[15,34640,34641],{},"Blocky value noise with soft cells that morph over time",[31911,34643],{"component":34633},[23,34645,31915],{"id":26533},[31917,34647],{":props":34648},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,34650,31923],{"id":31922},[246,34652,34653,34682,34710,34738,34766],{":tabs":1557},[212,34654,34656],{"className":334,"code":34655,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockNoise \u002F>\n\u003C\u002FShader>\n",[99,34657,34658,34666,34674],{"__ignoreMap":178},[220,34659,34660,34662,34664],{"class":222,"line":223},[220,34661,343],{"class":264},[220,34663,347],{"class":346},[220,34665,359],{"class":264},[220,34667,34668,34670,34672],{"class":222,"line":179},[220,34669,364],{"class":264},[220,34671,34633],{"class":346},[220,34673,386],{"class":264},[220,34675,34676,34678,34680],{"class":222,"line":389},[220,34677,402],{"class":264},[220,34679,347],{"class":346},[220,34681,359],{"class":264},[212,34683,34684],{"className":409,"code":34655,"language":411,"meta":178,"style":178},[99,34685,34686,34694,34702],{"__ignoreMap":178},[220,34687,34688,34690,34692],{"class":222,"line":223},[220,34689,343],{"class":264},[220,34691,347],{"class":420},[220,34693,359],{"class":264},[220,34695,34696,34698,34700],{"class":222,"line":179},[220,34697,364],{"class":264},[220,34699,34633],{"class":420},[220,34701,386],{"class":264},[220,34703,34704,34706,34708],{"class":222,"line":389},[220,34705,402],{"class":264},[220,34707,347],{"class":420},[220,34709,359],{"class":264},[212,34711,34712],{"className":2844,"code":34655,"language":2846,"meta":178,"style":178},[99,34713,34714,34722,34730],{"__ignoreMap":178},[220,34715,34716,34718,34720],{"class":222,"line":223},[220,34717,343],{"class":264},[220,34719,347],{"class":420},[220,34721,359],{"class":264},[220,34723,34724,34726,34728],{"class":222,"line":179},[220,34725,364],{"class":264},[220,34727,34633],{"class":420},[220,34729,386],{"class":264},[220,34731,34732,34734,34736],{"class":222,"line":389},[220,34733,402],{"class":264},[220,34735,347],{"class":420},[220,34737,359],{"class":264},[212,34739,34740],{"className":468,"code":34655,"language":469,"meta":178,"style":178},[99,34741,34742,34750,34758],{"__ignoreMap":178},[220,34743,34744,34746,34748],{"class":222,"line":223},[220,34745,343],{"class":264},[220,34747,347],{"class":420},[220,34749,359],{"class":264},[220,34751,34752,34754,34756],{"class":222,"line":179},[220,34753,364],{"class":264},[220,34755,34633],{"class":420},[220,34757,386],{"class":264},[220,34759,34760,34762,34764],{"class":222,"line":389},[220,34761,402],{"class":264},[220,34763,347],{"class":420},[220,34765,359],{"class":264},[212,34767,34769],{"className":251,"code":34768,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlockNoise', props: {} }\n ]\n})\n",[99,34770,34771,34781,34785,34799,34803,34812,34816],{"__ignoreMap":178},[220,34772,34773,34775,34777,34779],{"class":222,"line":223},[220,34774,261],{"class":260},[220,34776,11512],{"class":264},[220,34778,268],{"class":260},[220,34780,4007],{"class":230},[220,34782,34783],{"class":222,"line":179},[220,34784,647],{"emptyLinePlaceholder":194},[220,34786,34787,34789,34791,34793,34795,34797],{"class":222,"line":389},[220,34788,1735],{"class":260},[220,34790,1738],{"class":420},[220,34792,1741],{"class":260},[220,34794,1744],{"class":260},[220,34796,1747],{"class":226},[220,34798,1750],{"class":264},[220,34800,34801],{"class":222,"line":399},[220,34802,1765],{"class":264},[220,34804,34805,34807,34810],{"class":222,"line":644},[220,34806,1770],{"class":264},[220,34808,34809],{"class":230},"'BlockNoise'",[220,34811,2465],{"class":264},[220,34813,34814],{"class":222,"line":650},[220,34815,1787],{"class":264},[220,34817,34818],{"class":222,"line":656},[220,34819,1792],{"class":264},[1504,34821,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34823},[34824,34825],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblocknoise",{"title":34633,"description":34641},"docs\u002Fcomponents\u002FBlockNoise","9DKlfn2LX2r4szxlyRLWeJEwGZymEn-SYjJ9ydW2Yt8",{"id":34832,"title":34833,"body":34834,"category":33063,"componentType":25877,"description":34841,"extension":191,"meta":35026,"navigation":194,"path":35027,"requiresChild":32530,"seo":35028,"stem":35029,"__hash__":35030},"components\u002Fdocs\u002Fcomponents\u002FBlueNoise.md","BlueNoise",{"type":8,"value":34835,"toc":35022},[34836,34839,34842,34844,34846,34849,34851,35020],[11,34837,34833],{"id":34838},"bluenoise",[15,34840,34841],{},"High-frequency blue noise — even, grainy speckle ideal for dithering",[31911,34843],{"component":34833},[23,34845,31915],{"id":26533},[31917,34847],{":props":34848},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Grain size in pixels (1 = per-pixel, higher = chunkier speckle)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"}]",[23,34850,31923],{"id":31922},[246,34852,34853,34882,34910,34938,34966],{":tabs":1557},[212,34854,34856],{"className":334,"code":34855,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlueNoise \u002F>\n\u003C\u002FShader>\n",[99,34857,34858,34866,34874],{"__ignoreMap":178},[220,34859,34860,34862,34864],{"class":222,"line":223},[220,34861,343],{"class":264},[220,34863,347],{"class":346},[220,34865,359],{"class":264},[220,34867,34868,34870,34872],{"class":222,"line":179},[220,34869,364],{"class":264},[220,34871,34833],{"class":346},[220,34873,386],{"class":264},[220,34875,34876,34878,34880],{"class":222,"line":389},[220,34877,402],{"class":264},[220,34879,347],{"class":346},[220,34881,359],{"class":264},[212,34883,34884],{"className":409,"code":34855,"language":411,"meta":178,"style":178},[99,34885,34886,34894,34902],{"__ignoreMap":178},[220,34887,34888,34890,34892],{"class":222,"line":223},[220,34889,343],{"class":264},[220,34891,347],{"class":420},[220,34893,359],{"class":264},[220,34895,34896,34898,34900],{"class":222,"line":179},[220,34897,364],{"class":264},[220,34899,34833],{"class":420},[220,34901,386],{"class":264},[220,34903,34904,34906,34908],{"class":222,"line":389},[220,34905,402],{"class":264},[220,34907,347],{"class":420},[220,34909,359],{"class":264},[212,34911,34912],{"className":2844,"code":34855,"language":2846,"meta":178,"style":178},[99,34913,34914,34922,34930],{"__ignoreMap":178},[220,34915,34916,34918,34920],{"class":222,"line":223},[220,34917,343],{"class":264},[220,34919,347],{"class":420},[220,34921,359],{"class":264},[220,34923,34924,34926,34928],{"class":222,"line":179},[220,34925,364],{"class":264},[220,34927,34833],{"class":420},[220,34929,386],{"class":264},[220,34931,34932,34934,34936],{"class":222,"line":389},[220,34933,402],{"class":264},[220,34935,347],{"class":420},[220,34937,359],{"class":264},[212,34939,34940],{"className":468,"code":34855,"language":469,"meta":178,"style":178},[99,34941,34942,34950,34958],{"__ignoreMap":178},[220,34943,34944,34946,34948],{"class":222,"line":223},[220,34945,343],{"class":264},[220,34947,347],{"class":420},[220,34949,359],{"class":264},[220,34951,34952,34954,34956],{"class":222,"line":179},[220,34953,364],{"class":264},[220,34955,34833],{"class":420},[220,34957,386],{"class":264},[220,34959,34960,34962,34964],{"class":222,"line":389},[220,34961,402],{"class":264},[220,34963,347],{"class":420},[220,34965,359],{"class":264},[212,34967,34969],{"className":251,"code":34968,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlueNoise', props: {} }\n ]\n})\n",[99,34970,34971,34981,34985,34999,35003,35012,35016],{"__ignoreMap":178},[220,34972,34973,34975,34977,34979],{"class":222,"line":223},[220,34974,261],{"class":260},[220,34976,11512],{"class":264},[220,34978,268],{"class":260},[220,34980,4007],{"class":230},[220,34982,34983],{"class":222,"line":179},[220,34984,647],{"emptyLinePlaceholder":194},[220,34986,34987,34989,34991,34993,34995,34997],{"class":222,"line":389},[220,34988,1735],{"class":260},[220,34990,1738],{"class":420},[220,34992,1741],{"class":260},[220,34994,1744],{"class":260},[220,34996,1747],{"class":226},[220,34998,1750],{"class":264},[220,35000,35001],{"class":222,"line":399},[220,35002,1765],{"class":264},[220,35004,35005,35007,35010],{"class":222,"line":644},[220,35006,1770],{"class":264},[220,35008,35009],{"class":230},"'BlueNoise'",[220,35011,2465],{"class":264},[220,35013,35014],{"class":222,"line":650},[220,35015,1787],{"class":264},[220,35017,35018],{"class":222,"line":656},[220,35019,1792],{"class":264},[1504,35021,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":35023},[35024,35025],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbluenoise",{"title":34833,"description":34841},"docs\u002Fcomponents\u002FBlueNoise","flT8qqJVpl3NuZ7XyFUOpPXptC3UH2KUJuMBHpfIJhA",{"id":35032,"title":11769,"body":35033,"category":32234,"componentType":25883,"description":35040,"extension":191,"meta":35359,"navigation":194,"path":35360,"requiresChild":194,"seo":35361,"stem":35362,"__hash__":35363},"components\u002Fdocs\u002Fcomponents\u002FBlur.md",{"type":8,"value":35034,"toc":35355},[35035,35038,35041,35043,35045,35048,35050,35353],[11,35036,11769],{"id":35037},"blur",[15,35039,35040],{},"A simple Gaussian blur effect",[31911,35042],{"component":11769},[23,35044,31915],{"id":26533},[31917,35046],{":props":35047},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,35049,31923],{"id":31922},[246,35051,35052,35109,35169,35225,35283],{":tabs":1557},[212,35053,35055],{"className":334,"code":35054,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,35056,35057,35065,35072,35081,35085,35093,35101],{"__ignoreMap":178},[220,35058,35059,35061,35063],{"class":222,"line":223},[220,35060,343],{"class":264},[220,35062,347],{"class":346},[220,35064,359],{"class":264},[220,35066,35067,35069],{"class":222,"line":179},[220,35068,364],{"class":264},[220,35070,35071],{"class":346},"Blur\n",[220,35073,35074,35076,35078],{"class":222,"line":389},[220,35075,20371],{"class":226},[220,35077,353],{"class":264},[220,35079,35080],{"class":230},"\"50\"\n",[220,35082,35083],{"class":222,"line":399},[220,35084,31959],{"class":264},[220,35086,35087,35089,35091],{"class":222,"line":644},[220,35088,2550],{"class":264},[220,35090,2553],{"class":346},[220,35092,386],{"class":264},[220,35094,35095,35097,35099],{"class":222,"line":650},[220,35096,2567],{"class":264},[220,35098,11769],{"class":346},[220,35100,359],{"class":264},[220,35102,35103,35105,35107],{"class":222,"line":656},[220,35104,402],{"class":264},[220,35106,347],{"class":346},[220,35108,359],{"class":264},[212,35110,35112],{"className":409,"code":35111,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,35113,35114,35122,35128,35141,35145,35153,35161],{"__ignoreMap":178},[220,35115,35116,35118,35120],{"class":222,"line":223},[220,35117,343],{"class":264},[220,35119,347],{"class":420},[220,35121,359],{"class":264},[220,35123,35124,35126],{"class":222,"line":179},[220,35125,364],{"class":264},[220,35127,35071],{"class":420},[220,35129,35130,35132,35134,35136,35139],{"class":222,"line":389},[220,35131,20482],{"class":226},[220,35133,353],{"class":260},[220,35135,743],{"class":264},[220,35137,35138],{"class":420},"50",[220,35140,749],{"class":264},[220,35142,35143],{"class":222,"line":399},[220,35144,31959],{"class":264},[220,35146,35147,35149,35151],{"class":222,"line":644},[220,35148,2550],{"class":264},[220,35150,2553],{"class":420},[220,35152,386],{"class":264},[220,35154,35155,35157,35159],{"class":222,"line":650},[220,35156,2567],{"class":264},[220,35158,11769],{"class":420},[220,35160,359],{"class":264},[220,35162,35163,35165,35167],{"class":222,"line":656},[220,35164,402],{"class":264},[220,35166,347],{"class":420},[220,35168,359],{"class":264},[212,35170,35171],{"className":2844,"code":35111,"language":2846,"meta":178,"style":178},[99,35172,35173,35181,35187,35197,35201,35209,35217],{"__ignoreMap":178},[220,35174,35175,35177,35179],{"class":222,"line":223},[220,35176,343],{"class":264},[220,35178,347],{"class":420},[220,35180,359],{"class":264},[220,35182,35183,35185],{"class":222,"line":179},[220,35184,364],{"class":264},[220,35186,35071],{"class":420},[220,35188,35189,35191,35193,35195],{"class":222,"line":389},[220,35190,20482],{"class":226},[220,35192,29871],{"class":264},[220,35194,35138],{"class":420},[220,35196,749],{"class":264},[220,35198,35199],{"class":222,"line":399},[220,35200,31959],{"class":264},[220,35202,35203,35205,35207],{"class":222,"line":644},[220,35204,2550],{"class":264},[220,35206,2553],{"class":420},[220,35208,386],{"class":264},[220,35210,35211,35213,35215],{"class":222,"line":650},[220,35212,2567],{"class":264},[220,35214,11769],{"class":420},[220,35216,359],{"class":264},[220,35218,35219,35221,35223],{"class":222,"line":656},[220,35220,402],{"class":264},[220,35222,347],{"class":420},[220,35224,359],{"class":264},[212,35226,35227],{"className":468,"code":35111,"language":469,"meta":178,"style":178},[99,35228,35229,35237,35243,35255,35259,35267,35275],{"__ignoreMap":178},[220,35230,35231,35233,35235],{"class":222,"line":223},[220,35232,343],{"class":264},[220,35234,347],{"class":420},[220,35236,359],{"class":264},[220,35238,35239,35241],{"class":222,"line":179},[220,35240,364],{"class":264},[220,35242,35071],{"class":420},[220,35244,35245,35247,35249,35251,35253],{"class":222,"line":389},[220,35246,20482],{"class":226},[220,35248,353],{"class":260},[220,35250,743],{"class":264},[220,35252,35138],{"class":420},[220,35254,749],{"class":264},[220,35256,35257],{"class":222,"line":399},[220,35258,31959],{"class":264},[220,35260,35261,35263,35265],{"class":222,"line":644},[220,35262,2550],{"class":264},[220,35264,2553],{"class":420},[220,35266,386],{"class":264},[220,35268,35269,35271,35273],{"class":222,"line":650},[220,35270,2567],{"class":264},[220,35272,11769],{"class":420},[220,35274,359],{"class":264},[220,35276,35277,35279,35281],{"class":222,"line":656},[220,35278,402],{"class":264},[220,35280,347],{"class":420},[220,35282,359],{"class":264},[212,35284,35286],{"className":251,"code":35285,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blur', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,35287,35288,35298,35302,35316,35320,35333,35341,35345,35349],{"__ignoreMap":178},[220,35289,35290,35292,35294,35296],{"class":222,"line":223},[220,35291,261],{"class":260},[220,35293,11512],{"class":264},[220,35295,268],{"class":260},[220,35297,4007],{"class":230},[220,35299,35300],{"class":222,"line":179},[220,35301,647],{"emptyLinePlaceholder":194},[220,35303,35304,35306,35308,35310,35312,35314],{"class":222,"line":389},[220,35305,1735],{"class":260},[220,35307,1738],{"class":420},[220,35309,1741],{"class":260},[220,35311,1744],{"class":260},[220,35313,1747],{"class":226},[220,35315,1750],{"class":264},[220,35317,35318],{"class":222,"line":399},[220,35319,1765],{"class":264},[220,35321,35322,35324,35327,35329,35331],{"class":222,"line":644},[220,35323,1770],{"class":264},[220,35325,35326],{"class":230},"'Blur'",[220,35328,32203],{"class":264},[220,35330,35138],{"class":420},[220,35332,7546],{"class":264},[220,35334,35335,35337,35339],{"class":222,"line":650},[220,35336,7014],{"class":264},[220,35338,3206],{"class":230},[220,35340,2465],{"class":264},[220,35342,35343],{"class":222,"line":656},[220,35344,7031],{"class":264},[220,35346,35347],{"class":222,"line":673},[220,35348,1787],{"class":264},[220,35350,35351],{"class":222,"line":682},[220,35352,1792],{"class":264},[1504,35354,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35356},[35357,35358],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblur",{"title":11769,"description":35040},"docs\u002Fcomponents\u002FBlur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":35365,"title":35366,"body":35367,"category":35559,"componentType":25877,"description":35374,"extension":191,"meta":35560,"navigation":194,"path":35561,"requiresChild":32530,"seo":35562,"stem":35563,"__hash__":35564},"components\u002Fdocs\u002Fcomponents\u002FBoids.md","Boids",{"type":8,"value":35368,"toc":35555},[35369,35372,35375,35377,35379,35382,35384,35553],[11,35370,35366],{"id":35371},"boids",[15,35373,35374],{},"A living murmuration of hundreds of flocking agents drawn as crisp arrows, streaks, dots or glowing comets — separation, alignment and cohesion drive fluid, splitting-and-merging ribbons, agents flash toward an excited color when scattered, and the cursor acts as an attractor or a predator",[31911,35376],{"component":35366},[23,35378,31915],{"id":26533},[31917,35380],{":props":35381},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of agents cruising calmly with the flock\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff7ad9\",\"description\":\"Color agents flash toward when agitated — scattering from the predator cursor or banking through a hard turn\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"agentShape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"arrow\",\"description\":\"What each agent is drawn as — a hard-edged arrow, streak or square pointing along its heading, a plain dot, or a soft glowing comet\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"2000\",\"description\":\"Number of flocking agents\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Overall cruising speed of the flock\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Re-rolls the flock's starting formation — each value spawns the murmuration in a different arrangement\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Size of each agent\"},{\"name\":\"trails\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How long each agent's motion trail persists — 0 draws crisp agents, 1 leaves long ribbons\"},{\"name\":\"separation\",\"type\":\"number\",\"default\":\"1.7\",\"description\":\"How strongly agents steer away from crowding their neighbours\"},{\"name\":\"alignment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How strongly agents match their neighbours' heading — the driver of coherent murmuration ribbons\"},{\"name\":\"cohesion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly agents steer toward the local center of the flock\"},{\"name\":\"perception\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"How far each agent can sense its neighbours (in screen heights) — larger sees bigger, smoother flocks\"},{\"name\":\"cursorMode\",\"type\":\"\\\"none\\\" | \\\"attract\\\" | \\\"repel\\\"\",\"default\":\"repel\",\"description\":\"How the flock reacts to the cursor\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the cursor's pull or push on the flock\"}]",[23,35383,31923],{"id":31922},[246,35385,35386,35415,35443,35471,35499],{":tabs":1557},[212,35387,35389],{"className":334,"code":35388,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBoids \u002F>\n\u003C\u002FShader>\n",[99,35390,35391,35399,35407],{"__ignoreMap":178},[220,35392,35393,35395,35397],{"class":222,"line":223},[220,35394,343],{"class":264},[220,35396,347],{"class":346},[220,35398,359],{"class":264},[220,35400,35401,35403,35405],{"class":222,"line":179},[220,35402,364],{"class":264},[220,35404,35366],{"class":346},[220,35406,386],{"class":264},[220,35408,35409,35411,35413],{"class":222,"line":389},[220,35410,402],{"class":264},[220,35412,347],{"class":346},[220,35414,359],{"class":264},[212,35416,35417],{"className":409,"code":35388,"language":411,"meta":178,"style":178},[99,35418,35419,35427,35435],{"__ignoreMap":178},[220,35420,35421,35423,35425],{"class":222,"line":223},[220,35422,343],{"class":264},[220,35424,347],{"class":420},[220,35426,359],{"class":264},[220,35428,35429,35431,35433],{"class":222,"line":179},[220,35430,364],{"class":264},[220,35432,35366],{"class":420},[220,35434,386],{"class":264},[220,35436,35437,35439,35441],{"class":222,"line":389},[220,35438,402],{"class":264},[220,35440,347],{"class":420},[220,35442,359],{"class":264},[212,35444,35445],{"className":2844,"code":35388,"language":2846,"meta":178,"style":178},[99,35446,35447,35455,35463],{"__ignoreMap":178},[220,35448,35449,35451,35453],{"class":222,"line":223},[220,35450,343],{"class":264},[220,35452,347],{"class":420},[220,35454,359],{"class":264},[220,35456,35457,35459,35461],{"class":222,"line":179},[220,35458,364],{"class":264},[220,35460,35366],{"class":420},[220,35462,386],{"class":264},[220,35464,35465,35467,35469],{"class":222,"line":389},[220,35466,402],{"class":264},[220,35468,347],{"class":420},[220,35470,359],{"class":264},[212,35472,35473],{"className":468,"code":35388,"language":469,"meta":178,"style":178},[99,35474,35475,35483,35491],{"__ignoreMap":178},[220,35476,35477,35479,35481],{"class":222,"line":223},[220,35478,343],{"class":264},[220,35480,347],{"class":420},[220,35482,359],{"class":264},[220,35484,35485,35487,35489],{"class":222,"line":179},[220,35486,364],{"class":264},[220,35488,35366],{"class":420},[220,35490,386],{"class":264},[220,35492,35493,35495,35497],{"class":222,"line":389},[220,35494,402],{"class":264},[220,35496,347],{"class":420},[220,35498,359],{"class":264},[212,35500,35502],{"className":251,"code":35501,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Boids', props: {} }\n ]\n})\n",[99,35503,35504,35514,35518,35532,35536,35545,35549],{"__ignoreMap":178},[220,35505,35506,35508,35510,35512],{"class":222,"line":223},[220,35507,261],{"class":260},[220,35509,11512],{"class":264},[220,35511,268],{"class":260},[220,35513,4007],{"class":230},[220,35515,35516],{"class":222,"line":179},[220,35517,647],{"emptyLinePlaceholder":194},[220,35519,35520,35522,35524,35526,35528,35530],{"class":222,"line":389},[220,35521,1735],{"class":260},[220,35523,1738],{"class":420},[220,35525,1741],{"class":260},[220,35527,1744],{"class":260},[220,35529,1747],{"class":226},[220,35531,1750],{"class":264},[220,35533,35534],{"class":222,"line":399},[220,35535,1765],{"class":264},[220,35537,35538,35540,35543],{"class":222,"line":644},[220,35539,1770],{"class":264},[220,35541,35542],{"class":230},"'Boids'",[220,35544,2465],{"class":264},[220,35546,35547],{"class":222,"line":650},[220,35548,1787],{"class":264},[220,35550,35551],{"class":222,"line":656},[220,35552,1792],{"class":264},[1504,35554,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":35556},[35557,35558],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Interactive",{},"\u002Fdocs\u002Fcomponents\u002Fboids",{"title":35366,"description":35374},"docs\u002Fcomponents\u002FBoids","hdhqsDQg5KnzNA_UfsNUlag4VVQ8bEJ7WQJ5TSK_WTs",{"id":35566,"title":35567,"body":35568,"category":32234,"componentType":25883,"description":35575,"extension":191,"meta":35892,"navigation":194,"path":35893,"requiresChild":194,"seo":35894,"stem":35895,"__hash__":35896},"components\u002Fdocs\u002Fcomponents\u002FBokehBlur.md","BokehBlur",{"type":8,"value":35569,"toc":35888},[35570,35573,35576,35578,35580,35583,35585,35886],[11,35571,35567],{"id":35572},"bokehblur",[15,35574,35575],{},"Photographic lens blur where bright highlights bloom into aperture-shaped discs",[31911,35577],{"component":35567},[23,35579,31915],{"id":26533},[31917,35581],{":props":35582},"[{\"name\":\"radius\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Defocus amount — how far the lens blur spreads\"},{\"name\":\"highlightGain\",\"type\":\"number\",\"default\":\"4\",\"description\":\"How strongly bright highlights bloom into discs\"},{\"name\":\"highlightThreshold\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Brightness above which a highlight forms a disc\"},{\"name\":\"bladeShape\",\"type\":\"\\\"blades\\\" | \\\"circle\\\" | \\\"star\\\" | \\\"heart\\\" | \\\"flower\\\" | \\\"cross\\\" | \\\"ring\\\"\",\"default\":\"blades\",\"description\":\"Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …)\"},{\"name\":\"bladeCount\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris\"},{\"name\":\"bladeRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the aperture shape (in degrees)\"},{\"name\":\"chromaticFringe\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Lens colour fringing on the disc edges\"}]",[23,35584,31923],{"id":31922},[246,35586,35587,35643,35702,35758,35816],{":tabs":1557},[212,35588,35590],{"className":334,"code":35589,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n :radius=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35591,35592,35600,35607,35615,35619,35627,35635],{"__ignoreMap":178},[220,35593,35594,35596,35598],{"class":222,"line":223},[220,35595,343],{"class":264},[220,35597,347],{"class":346},[220,35599,359],{"class":264},[220,35601,35602,35604],{"class":222,"line":179},[220,35603,364],{"class":264},[220,35605,35606],{"class":346},"BokehBlur\n",[220,35608,35609,35611,35613],{"class":222,"line":389},[220,35610,17405],{"class":226},[220,35612,353],{"class":264},[220,35614,35080],{"class":230},[220,35616,35617],{"class":222,"line":399},[220,35618,31959],{"class":264},[220,35620,35621,35623,35625],{"class":222,"line":644},[220,35622,2550],{"class":264},[220,35624,2553],{"class":346},[220,35626,386],{"class":264},[220,35628,35629,35631,35633],{"class":222,"line":650},[220,35630,2567],{"class":264},[220,35632,35567],{"class":346},[220,35634,359],{"class":264},[220,35636,35637,35639,35641],{"class":222,"line":656},[220,35638,402],{"class":264},[220,35640,347],{"class":346},[220,35642,359],{"class":264},[212,35644,35646],{"className":409,"code":35645,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n radius={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35647,35648,35656,35662,35674,35678,35686,35694],{"__ignoreMap":178},[220,35649,35650,35652,35654],{"class":222,"line":223},[220,35651,343],{"class":264},[220,35653,347],{"class":420},[220,35655,359],{"class":264},[220,35657,35658,35660],{"class":222,"line":179},[220,35659,364],{"class":264},[220,35661,35606],{"class":420},[220,35663,35664,35666,35668,35670,35672],{"class":222,"line":389},[220,35665,9645],{"class":226},[220,35667,353],{"class":260},[220,35669,743],{"class":264},[220,35671,35138],{"class":420},[220,35673,749],{"class":264},[220,35675,35676],{"class":222,"line":399},[220,35677,31959],{"class":264},[220,35679,35680,35682,35684],{"class":222,"line":644},[220,35681,2550],{"class":264},[220,35683,2553],{"class":420},[220,35685,386],{"class":264},[220,35687,35688,35690,35692],{"class":222,"line":650},[220,35689,2567],{"class":264},[220,35691,35567],{"class":420},[220,35693,359],{"class":264},[220,35695,35696,35698,35700],{"class":222,"line":656},[220,35697,402],{"class":264},[220,35699,347],{"class":420},[220,35701,359],{"class":264},[212,35703,35704],{"className":2844,"code":35645,"language":2846,"meta":178,"style":178},[99,35705,35706,35714,35720,35730,35734,35742,35750],{"__ignoreMap":178},[220,35707,35708,35710,35712],{"class":222,"line":223},[220,35709,343],{"class":264},[220,35711,347],{"class":420},[220,35713,359],{"class":264},[220,35715,35716,35718],{"class":222,"line":179},[220,35717,364],{"class":264},[220,35719,35606],{"class":420},[220,35721,35722,35724,35726,35728],{"class":222,"line":389},[220,35723,9645],{"class":226},[220,35725,29871],{"class":264},[220,35727,35138],{"class":420},[220,35729,749],{"class":264},[220,35731,35732],{"class":222,"line":399},[220,35733,31959],{"class":264},[220,35735,35736,35738,35740],{"class":222,"line":644},[220,35737,2550],{"class":264},[220,35739,2553],{"class":420},[220,35741,386],{"class":264},[220,35743,35744,35746,35748],{"class":222,"line":650},[220,35745,2567],{"class":264},[220,35747,35567],{"class":420},[220,35749,359],{"class":264},[220,35751,35752,35754,35756],{"class":222,"line":656},[220,35753,402],{"class":264},[220,35755,347],{"class":420},[220,35757,359],{"class":264},[212,35759,35760],{"className":468,"code":35645,"language":469,"meta":178,"style":178},[99,35761,35762,35770,35776,35788,35792,35800,35808],{"__ignoreMap":178},[220,35763,35764,35766,35768],{"class":222,"line":223},[220,35765,343],{"class":264},[220,35767,347],{"class":420},[220,35769,359],{"class":264},[220,35771,35772,35774],{"class":222,"line":179},[220,35773,364],{"class":264},[220,35775,35606],{"class":420},[220,35777,35778,35780,35782,35784,35786],{"class":222,"line":389},[220,35779,9645],{"class":226},[220,35781,353],{"class":260},[220,35783,743],{"class":264},[220,35785,35138],{"class":420},[220,35787,749],{"class":264},[220,35789,35790],{"class":222,"line":399},[220,35791,31959],{"class":264},[220,35793,35794,35796,35798],{"class":222,"line":644},[220,35795,2550],{"class":264},[220,35797,2553],{"class":420},[220,35799,386],{"class":264},[220,35801,35802,35804,35806],{"class":222,"line":650},[220,35803,2567],{"class":264},[220,35805,35567],{"class":420},[220,35807,359],{"class":264},[220,35809,35810,35812,35814],{"class":222,"line":656},[220,35811,402],{"class":264},[220,35813,347],{"class":420},[220,35815,359],{"class":264},[212,35817,35819],{"className":251,"code":35818,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BokehBlur', props: { radius: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,35820,35821,35831,35835,35849,35853,35866,35874,35878,35882],{"__ignoreMap":178},[220,35822,35823,35825,35827,35829],{"class":222,"line":223},[220,35824,261],{"class":260},[220,35826,11512],{"class":264},[220,35828,268],{"class":260},[220,35830,4007],{"class":230},[220,35832,35833],{"class":222,"line":179},[220,35834,647],{"emptyLinePlaceholder":194},[220,35836,35837,35839,35841,35843,35845,35847],{"class":222,"line":389},[220,35838,1735],{"class":260},[220,35840,1738],{"class":420},[220,35842,1741],{"class":260},[220,35844,1744],{"class":260},[220,35846,1747],{"class":226},[220,35848,1750],{"class":264},[220,35850,35851],{"class":222,"line":399},[220,35852,1765],{"class":264},[220,35854,35855,35857,35860,35862,35864],{"class":222,"line":644},[220,35856,1770],{"class":264},[220,35858,35859],{"class":230},"'BokehBlur'",[220,35861,7541],{"class":264},[220,35863,35138],{"class":420},[220,35865,7546],{"class":264},[220,35867,35868,35870,35872],{"class":222,"line":650},[220,35869,7014],{"class":264},[220,35871,3206],{"class":230},[220,35873,2465],{"class":264},[220,35875,35876],{"class":222,"line":656},[220,35877,7031],{"class":264},[220,35879,35880],{"class":222,"line":673},[220,35881,1787],{"class":264},[220,35883,35884],{"class":222,"line":682},[220,35885,1792],{"class":264},[1504,35887,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35889},[35890,35891],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbokehblur",{"title":35567,"description":35575},"docs\u002Fcomponents\u002FBokehBlur","UvgWoVz1msLk-OLpiNCYNxzzxY6uC56cKmY-6PdjJas",{"id":35898,"title":35899,"body":35900,"category":33063,"componentType":25877,"description":35907,"extension":191,"meta":36092,"navigation":194,"path":36093,"requiresChild":32530,"seo":36094,"stem":36095,"__hash__":36096},"components\u002Fdocs\u002Fcomponents\u002FBrickPattern.md","BrickPattern",{"type":8,"value":35901,"toc":36088},[35902,35905,35908,35910,35912,35915,35917,36086],[11,35903,35899],{"id":35904},"brickpattern",[15,35906,35907],{},"Classic brick wall pattern with alternating rows and mortar gaps",[31911,35909],{"component":35899},[23,35911,31915],{"id":26533},[31917,35913],{":props":35914},"[{\"name\":\"colorBrick\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Brick color\"},{\"name\":\"colorMortar\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Mortar \u002F gap color\"},{\"name\":\"cellsX\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of bricks per row\"},{\"name\":\"cellsY\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of brick rows\"},{\"name\":\"mortar\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of mortar gaps — equal pixel thickness in both directions\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the brick edges (0 = crisp, 1 = very soft)\"},{\"name\":\"variation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Per-brick random lightening\u002Fdarkening of the brick color\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the pattern in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Static horizontal offset — shifts the brick pattern without animating\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How much each row's speed varies — at high values rows move at different speeds and directions\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for per-row speed variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,35916,31923],{"id":31922},[246,35918,35919,35948,35976,36004,36032],{":tabs":1557},[212,35920,35922],{"className":334,"code":35921,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrickPattern \u002F>\n\u003C\u002FShader>\n",[99,35923,35924,35932,35940],{"__ignoreMap":178},[220,35925,35926,35928,35930],{"class":222,"line":223},[220,35927,343],{"class":264},[220,35929,347],{"class":346},[220,35931,359],{"class":264},[220,35933,35934,35936,35938],{"class":222,"line":179},[220,35935,364],{"class":264},[220,35937,35899],{"class":346},[220,35939,386],{"class":264},[220,35941,35942,35944,35946],{"class":222,"line":389},[220,35943,402],{"class":264},[220,35945,347],{"class":346},[220,35947,359],{"class":264},[212,35949,35950],{"className":409,"code":35921,"language":411,"meta":178,"style":178},[99,35951,35952,35960,35968],{"__ignoreMap":178},[220,35953,35954,35956,35958],{"class":222,"line":223},[220,35955,343],{"class":264},[220,35957,347],{"class":420},[220,35959,359],{"class":264},[220,35961,35962,35964,35966],{"class":222,"line":179},[220,35963,364],{"class":264},[220,35965,35899],{"class":420},[220,35967,386],{"class":264},[220,35969,35970,35972,35974],{"class":222,"line":389},[220,35971,402],{"class":264},[220,35973,347],{"class":420},[220,35975,359],{"class":264},[212,35977,35978],{"className":2844,"code":35921,"language":2846,"meta":178,"style":178},[99,35979,35980,35988,35996],{"__ignoreMap":178},[220,35981,35982,35984,35986],{"class":222,"line":223},[220,35983,343],{"class":264},[220,35985,347],{"class":420},[220,35987,359],{"class":264},[220,35989,35990,35992,35994],{"class":222,"line":179},[220,35991,364],{"class":264},[220,35993,35899],{"class":420},[220,35995,386],{"class":264},[220,35997,35998,36000,36002],{"class":222,"line":389},[220,35999,402],{"class":264},[220,36001,347],{"class":420},[220,36003,359],{"class":264},[212,36005,36006],{"className":468,"code":35921,"language":469,"meta":178,"style":178},[99,36007,36008,36016,36024],{"__ignoreMap":178},[220,36009,36010,36012,36014],{"class":222,"line":223},[220,36011,343],{"class":264},[220,36013,347],{"class":420},[220,36015,359],{"class":264},[220,36017,36018,36020,36022],{"class":222,"line":179},[220,36019,364],{"class":264},[220,36021,35899],{"class":420},[220,36023,386],{"class":264},[220,36025,36026,36028,36030],{"class":222,"line":389},[220,36027,402],{"class":264},[220,36029,347],{"class":420},[220,36031,359],{"class":264},[212,36033,36035],{"className":251,"code":36034,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrickPattern', props: {} }\n ]\n})\n",[99,36036,36037,36047,36051,36065,36069,36078,36082],{"__ignoreMap":178},[220,36038,36039,36041,36043,36045],{"class":222,"line":223},[220,36040,261],{"class":260},[220,36042,11512],{"class":264},[220,36044,268],{"class":260},[220,36046,4007],{"class":230},[220,36048,36049],{"class":222,"line":179},[220,36050,647],{"emptyLinePlaceholder":194},[220,36052,36053,36055,36057,36059,36061,36063],{"class":222,"line":389},[220,36054,1735],{"class":260},[220,36056,1738],{"class":420},[220,36058,1741],{"class":260},[220,36060,1744],{"class":260},[220,36062,1747],{"class":226},[220,36064,1750],{"class":264},[220,36066,36067],{"class":222,"line":399},[220,36068,1765],{"class":264},[220,36070,36071,36073,36076],{"class":222,"line":644},[220,36072,1770],{"class":264},[220,36074,36075],{"class":230},"'BrickPattern'",[220,36077,2465],{"class":264},[220,36079,36080],{"class":222,"line":650},[220,36081,1787],{"class":264},[220,36083,36084],{"class":222,"line":656},[220,36085,1792],{"class":264},[1504,36087,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":36089},[36090,36091],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbrickpattern",{"title":35899,"description":35907},"docs\u002Fcomponents\u002FBrickPattern","N72uvSI6oXAr_sggmz8uwd9seHUACNlXAOKhUg07lt8",{"id":36098,"title":36099,"body":36100,"category":36368,"componentType":25883,"description":36107,"extension":191,"meta":36369,"navigation":194,"path":36370,"requiresChild":194,"seo":36371,"stem":36372,"__hash__":36373},"components\u002Fdocs\u002Fcomponents\u002FBrightnessContrast.md","BrightnessContrast",{"type":8,"value":36101,"toc":36364},[36102,36105,36108,36110,36112,36115,36117,36362],[11,36103,36099],{"id":36104},"brightnesscontrast",[15,36106,36107],{},"Adjust brightness and contrast of the image",[31911,36109],{"component":36099},[23,36111,31915],{"id":26533},[31917,36113],{":props":36114},"[{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Brightness adjustment (-1 to 1)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Contrast adjustment (-1 to 1)\"}]",[23,36116,31923],{"id":31922},[246,36118,36119,36164,36208,36252,36296],{":tabs":1557},[212,36120,36122],{"className":334,"code":36121,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle \u002F>\n \u003C\u002FBrightnessContrast>\n\u003C\u002FShader>\n",[99,36123,36124,36132,36140,36148,36156],{"__ignoreMap":178},[220,36125,36126,36128,36130],{"class":222,"line":223},[220,36127,343],{"class":264},[220,36129,347],{"class":346},[220,36131,359],{"class":264},[220,36133,36134,36136,36138],{"class":222,"line":179},[220,36135,364],{"class":264},[220,36137,36099],{"class":346},[220,36139,359],{"class":264},[220,36141,36142,36144,36146],{"class":222,"line":389},[220,36143,2550],{"class":264},[220,36145,2553],{"class":346},[220,36147,386],{"class":264},[220,36149,36150,36152,36154],{"class":222,"line":399},[220,36151,2567],{"class":264},[220,36153,36099],{"class":346},[220,36155,359],{"class":264},[220,36157,36158,36160,36162],{"class":222,"line":644},[220,36159,402],{"class":264},[220,36161,347],{"class":346},[220,36163,359],{"class":264},[212,36165,36166],{"className":409,"code":36121,"language":411,"meta":178,"style":178},[99,36167,36168,36176,36184,36192,36200],{"__ignoreMap":178},[220,36169,36170,36172,36174],{"class":222,"line":223},[220,36171,343],{"class":264},[220,36173,347],{"class":420},[220,36175,359],{"class":264},[220,36177,36178,36180,36182],{"class":222,"line":179},[220,36179,364],{"class":264},[220,36181,36099],{"class":420},[220,36183,359],{"class":264},[220,36185,36186,36188,36190],{"class":222,"line":389},[220,36187,2550],{"class":264},[220,36189,2553],{"class":420},[220,36191,386],{"class":264},[220,36193,36194,36196,36198],{"class":222,"line":399},[220,36195,2567],{"class":264},[220,36197,36099],{"class":420},[220,36199,359],{"class":264},[220,36201,36202,36204,36206],{"class":222,"line":644},[220,36203,402],{"class":264},[220,36205,347],{"class":420},[220,36207,359],{"class":264},[212,36209,36210],{"className":2844,"code":36121,"language":2846,"meta":178,"style":178},[99,36211,36212,36220,36228,36236,36244],{"__ignoreMap":178},[220,36213,36214,36216,36218],{"class":222,"line":223},[220,36215,343],{"class":264},[220,36217,347],{"class":420},[220,36219,359],{"class":264},[220,36221,36222,36224,36226],{"class":222,"line":179},[220,36223,364],{"class":264},[220,36225,36099],{"class":420},[220,36227,359],{"class":264},[220,36229,36230,36232,36234],{"class":222,"line":389},[220,36231,2550],{"class":264},[220,36233,2553],{"class":420},[220,36235,386],{"class":264},[220,36237,36238,36240,36242],{"class":222,"line":399},[220,36239,2567],{"class":264},[220,36241,36099],{"class":420},[220,36243,359],{"class":264},[220,36245,36246,36248,36250],{"class":222,"line":644},[220,36247,402],{"class":264},[220,36249,347],{"class":420},[220,36251,359],{"class":264},[212,36253,36254],{"className":468,"code":36121,"language":469,"meta":178,"style":178},[99,36255,36256,36264,36272,36280,36288],{"__ignoreMap":178},[220,36257,36258,36260,36262],{"class":222,"line":223},[220,36259,343],{"class":264},[220,36261,347],{"class":420},[220,36263,359],{"class":264},[220,36265,36266,36268,36270],{"class":222,"line":179},[220,36267,364],{"class":264},[220,36269,36099],{"class":420},[220,36271,359],{"class":264},[220,36273,36274,36276,36278],{"class":222,"line":389},[220,36275,2550],{"class":264},[220,36277,2553],{"class":420},[220,36279,386],{"class":264},[220,36281,36282,36284,36286],{"class":222,"line":399},[220,36283,2567],{"class":264},[220,36285,36099],{"class":420},[220,36287,359],{"class":264},[220,36289,36290,36292,36294],{"class":222,"line":644},[220,36291,402],{"class":264},[220,36293,347],{"class":420},[220,36295,359],{"class":264},[212,36297,36299],{"className":251,"code":36298,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrightnessContrast', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,36300,36301,36311,36315,36329,36333,36342,36350,36354,36358],{"__ignoreMap":178},[220,36302,36303,36305,36307,36309],{"class":222,"line":223},[220,36304,261],{"class":260},[220,36306,11512],{"class":264},[220,36308,268],{"class":260},[220,36310,4007],{"class":230},[220,36312,36313],{"class":222,"line":179},[220,36314,647],{"emptyLinePlaceholder":194},[220,36316,36317,36319,36321,36323,36325,36327],{"class":222,"line":389},[220,36318,1735],{"class":260},[220,36320,1738],{"class":420},[220,36322,1741],{"class":260},[220,36324,1744],{"class":260},[220,36326,1747],{"class":226},[220,36328,1750],{"class":264},[220,36330,36331],{"class":222,"line":399},[220,36332,1765],{"class":264},[220,36334,36335,36337,36340],{"class":222,"line":644},[220,36336,1770],{"class":264},[220,36338,36339],{"class":230},"'BrightnessContrast'",[220,36341,7009],{"class":264},[220,36343,36344,36346,36348],{"class":222,"line":650},[220,36345,7014],{"class":264},[220,36347,3206],{"class":230},[220,36349,2465],{"class":264},[220,36351,36352],{"class":222,"line":656},[220,36353,7031],{"class":264},[220,36355,36356],{"class":222,"line":673},[220,36357,1787],{"class":264},[220,36359,36360],{"class":222,"line":682},[220,36361,1792],{"class":264},[1504,36363,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":36365},[36366,36367],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Adjustments",{},"\u002Fdocs\u002Fcomponents\u002Fbrightnesscontrast",{"title":36099,"description":36107},"docs\u002Fcomponents\u002FBrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":36375,"title":36376,"body":36377,"category":36569,"componentType":25877,"description":36384,"extension":191,"meta":36570,"navigation":194,"path":36571,"requiresChild":32530,"seo":36572,"stem":36573,"__hash__":36574},"components\u002Fdocs\u002Fcomponents\u002FBrushedMetal.md","BrushedMetal",{"type":8,"value":36378,"toc":36565},[36379,36382,36385,36387,36389,36392,36394,36563],[11,36380,36376],{"id":36381},"brushedmetal",[15,36383,36384],{},"Photorealistic brushed metal — a satin anodised surface combed with fine directional grain that smears the reflected studio and key light into the long anisotropic streaks of real brushed aluminium, steel, gold or copper",[31911,36386],{"component":36376},[23,36388,31915],{"id":26533},[31917,36390],{":props":36391},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#e9ebef\",\"description\":\"The bright tone of the polished grain — recolor for gold (#ffe8b0), copper (#ffc8a0) or steel\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#26282d\",\"description\":\"The dark tone the brushed grain falls to in shadow. Tint it warm for gold\u002Fbronze, cool for steel.\"},{\"name\":\"brushAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the surface is brushed, in degrees — the grain and every reflection streak run along this axis\"},{\"name\":\"anisotropy\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How directional the brushing is — 1 = long smeared streaks along the grain, 0 = isotropic satin with no direction\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Depth of the individual brush scratches — the fine satin texture combed into the metal\"},{\"name\":\"grainScale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Density of the brush lines — higher = finer, tighter scratches\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Overall satin softness — 0 = near-polished with crisp reflections, 1 = soft matte brushed finish\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.4\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen smeared across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"215\",\"description\":\"Direction of the key light for the anisotropic specular streak, in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Speed of the slowly drifting reflection — the studio gently orbits the surface. 0 pauses.\"},{\"name\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,36393,31923],{"id":31922},[246,36395,36396,36425,36453,36481,36509],{":tabs":1557},[212,36397,36399],{"className":334,"code":36398,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrushedMetal \u002F>\n\u003C\u002FShader>\n",[99,36400,36401,36409,36417],{"__ignoreMap":178},[220,36402,36403,36405,36407],{"class":222,"line":223},[220,36404,343],{"class":264},[220,36406,347],{"class":346},[220,36408,359],{"class":264},[220,36410,36411,36413,36415],{"class":222,"line":179},[220,36412,364],{"class":264},[220,36414,36376],{"class":346},[220,36416,386],{"class":264},[220,36418,36419,36421,36423],{"class":222,"line":389},[220,36420,402],{"class":264},[220,36422,347],{"class":346},[220,36424,359],{"class":264},[212,36426,36427],{"className":409,"code":36398,"language":411,"meta":178,"style":178},[99,36428,36429,36437,36445],{"__ignoreMap":178},[220,36430,36431,36433,36435],{"class":222,"line":223},[220,36432,343],{"class":264},[220,36434,347],{"class":420},[220,36436,359],{"class":264},[220,36438,36439,36441,36443],{"class":222,"line":179},[220,36440,364],{"class":264},[220,36442,36376],{"class":420},[220,36444,386],{"class":264},[220,36446,36447,36449,36451],{"class":222,"line":389},[220,36448,402],{"class":264},[220,36450,347],{"class":420},[220,36452,359],{"class":264},[212,36454,36455],{"className":2844,"code":36398,"language":2846,"meta":178,"style":178},[99,36456,36457,36465,36473],{"__ignoreMap":178},[220,36458,36459,36461,36463],{"class":222,"line":223},[220,36460,343],{"class":264},[220,36462,347],{"class":420},[220,36464,359],{"class":264},[220,36466,36467,36469,36471],{"class":222,"line":179},[220,36468,364],{"class":264},[220,36470,36376],{"class":420},[220,36472,386],{"class":264},[220,36474,36475,36477,36479],{"class":222,"line":389},[220,36476,402],{"class":264},[220,36478,347],{"class":420},[220,36480,359],{"class":264},[212,36482,36483],{"className":468,"code":36398,"language":469,"meta":178,"style":178},[99,36484,36485,36493,36501],{"__ignoreMap":178},[220,36486,36487,36489,36491],{"class":222,"line":223},[220,36488,343],{"class":264},[220,36490,347],{"class":420},[220,36492,359],{"class":264},[220,36494,36495,36497,36499],{"class":222,"line":179},[220,36496,364],{"class":264},[220,36498,36376],{"class":420},[220,36500,386],{"class":264},[220,36502,36503,36505,36507],{"class":222,"line":389},[220,36504,402],{"class":264},[220,36506,347],{"class":420},[220,36508,359],{"class":264},[212,36510,36512],{"className":251,"code":36511,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrushedMetal', props: {} }\n ]\n})\n",[99,36513,36514,36524,36528,36542,36546,36555,36559],{"__ignoreMap":178},[220,36515,36516,36518,36520,36522],{"class":222,"line":223},[220,36517,261],{"class":260},[220,36519,11512],{"class":264},[220,36521,268],{"class":260},[220,36523,4007],{"class":230},[220,36525,36526],{"class":222,"line":179},[220,36527,647],{"emptyLinePlaceholder":194},[220,36529,36530,36532,36534,36536,36538,36540],{"class":222,"line":389},[220,36531,1735],{"class":260},[220,36533,1738],{"class":420},[220,36535,1741],{"class":260},[220,36537,1744],{"class":260},[220,36539,1747],{"class":226},[220,36541,1750],{"class":264},[220,36543,36544],{"class":222,"line":399},[220,36545,1765],{"class":264},[220,36547,36548,36550,36553],{"class":222,"line":644},[220,36549,1770],{"class":264},[220,36551,36552],{"class":230},"'BrushedMetal'",[220,36554,2465],{"class":264},[220,36556,36557],{"class":222,"line":650},[220,36558,1787],{"class":264},[220,36560,36561],{"class":222,"line":656},[220,36562,1792],{"class":264},[1504,36564,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":36566},[36567,36568],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Shape Effects",{},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal",{"title":36376,"description":36384},"docs\u002Fcomponents\u002FBrushedMetal","jtd9XyU9pNp7JPkFqmWy_4oUVMMCWMWtZEQb-8HCoHc",{"id":36576,"title":36577,"body":36578,"category":33396,"componentType":25883,"description":36585,"extension":191,"meta":36903,"navigation":194,"path":36904,"requiresChild":194,"seo":36905,"stem":36906,"__hash__":36907},"components\u002Fdocs\u002Fcomponents\u002FBulge.md","Bulge",{"type":8,"value":36579,"toc":36899},[36580,36583,36586,36588,36590,36593,36595,36897],[11,36581,36577],{"id":36582},"bulge",[15,36584,36585],{},"Magnify or pinch content around a center point",[31911,36587],{"component":36577},[23,36589,31915],{"id":26533},[31917,36591],{":props":36592},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the bulge effect\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the bulge effect (positive = bulge out, negative = pinch in)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The radius of the bulge effect area\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Controls the smoothness of the transition (0 = hard edge, 1 = very smooth)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,36594,31923],{"id":31922},[246,36596,36597,36654,36713,36769,36827],{":tabs":1557},[212,36598,36600],{"className":334,"code":36599,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36601,36602,36610,36617,36626,36630,36638,36646],{"__ignoreMap":178},[220,36603,36604,36606,36608],{"class":222,"line":223},[220,36605,343],{"class":264},[220,36607,347],{"class":346},[220,36609,359],{"class":264},[220,36611,36612,36614],{"class":222,"line":179},[220,36613,364],{"class":264},[220,36615,36616],{"class":346},"Bulge\n",[220,36618,36619,36621,36623],{"class":222,"line":389},[220,36620,17405],{"class":226},[220,36622,353],{"class":264},[220,36624,36625],{"class":230},"\"1\"\n",[220,36627,36628],{"class":222,"line":399},[220,36629,31959],{"class":264},[220,36631,36632,36634,36636],{"class":222,"line":644},[220,36633,2550],{"class":264},[220,36635,2553],{"class":346},[220,36637,386],{"class":264},[220,36639,36640,36642,36644],{"class":222,"line":650},[220,36641,2567],{"class":264},[220,36643,36577],{"class":346},[220,36645,359],{"class":264},[220,36647,36648,36650,36652],{"class":222,"line":656},[220,36649,402],{"class":264},[220,36651,347],{"class":346},[220,36653,359],{"class":264},[212,36655,36657],{"className":409,"code":36656,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36658,36659,36667,36673,36685,36689,36697,36705],{"__ignoreMap":178},[220,36660,36661,36663,36665],{"class":222,"line":223},[220,36662,343],{"class":264},[220,36664,347],{"class":420},[220,36666,359],{"class":264},[220,36668,36669,36671],{"class":222,"line":179},[220,36670,364],{"class":264},[220,36672,36616],{"class":420},[220,36674,36675,36677,36679,36681,36683],{"class":222,"line":389},[220,36676,9645],{"class":226},[220,36678,353],{"class":260},[220,36680,743],{"class":264},[220,36682,8677],{"class":420},[220,36684,749],{"class":264},[220,36686,36687],{"class":222,"line":399},[220,36688,31959],{"class":264},[220,36690,36691,36693,36695],{"class":222,"line":644},[220,36692,2550],{"class":264},[220,36694,2553],{"class":420},[220,36696,386],{"class":264},[220,36698,36699,36701,36703],{"class":222,"line":650},[220,36700,2567],{"class":264},[220,36702,36577],{"class":420},[220,36704,359],{"class":264},[220,36706,36707,36709,36711],{"class":222,"line":656},[220,36708,402],{"class":264},[220,36710,347],{"class":420},[220,36712,359],{"class":264},[212,36714,36715],{"className":2844,"code":36656,"language":2846,"meta":178,"style":178},[99,36716,36717,36725,36731,36741,36745,36753,36761],{"__ignoreMap":178},[220,36718,36719,36721,36723],{"class":222,"line":223},[220,36720,343],{"class":264},[220,36722,347],{"class":420},[220,36724,359],{"class":264},[220,36726,36727,36729],{"class":222,"line":179},[220,36728,364],{"class":264},[220,36730,36616],{"class":420},[220,36732,36733,36735,36737,36739],{"class":222,"line":389},[220,36734,9645],{"class":226},[220,36736,29871],{"class":264},[220,36738,8677],{"class":420},[220,36740,749],{"class":264},[220,36742,36743],{"class":222,"line":399},[220,36744,31959],{"class":264},[220,36746,36747,36749,36751],{"class":222,"line":644},[220,36748,2550],{"class":264},[220,36750,2553],{"class":420},[220,36752,386],{"class":264},[220,36754,36755,36757,36759],{"class":222,"line":650},[220,36756,2567],{"class":264},[220,36758,36577],{"class":420},[220,36760,359],{"class":264},[220,36762,36763,36765,36767],{"class":222,"line":656},[220,36764,402],{"class":264},[220,36766,347],{"class":420},[220,36768,359],{"class":264},[212,36770,36771],{"className":468,"code":36656,"language":469,"meta":178,"style":178},[99,36772,36773,36781,36787,36799,36803,36811,36819],{"__ignoreMap":178},[220,36774,36775,36777,36779],{"class":222,"line":223},[220,36776,343],{"class":264},[220,36778,347],{"class":420},[220,36780,359],{"class":264},[220,36782,36783,36785],{"class":222,"line":179},[220,36784,364],{"class":264},[220,36786,36616],{"class":420},[220,36788,36789,36791,36793,36795,36797],{"class":222,"line":389},[220,36790,9645],{"class":226},[220,36792,353],{"class":260},[220,36794,743],{"class":264},[220,36796,8677],{"class":420},[220,36798,749],{"class":264},[220,36800,36801],{"class":222,"line":399},[220,36802,31959],{"class":264},[220,36804,36805,36807,36809],{"class":222,"line":644},[220,36806,2550],{"class":264},[220,36808,2553],{"class":420},[220,36810,386],{"class":264},[220,36812,36813,36815,36817],{"class":222,"line":650},[220,36814,2567],{"class":264},[220,36816,36577],{"class":420},[220,36818,359],{"class":264},[220,36820,36821,36823,36825],{"class":222,"line":656},[220,36822,402],{"class":264},[220,36824,347],{"class":420},[220,36826,359],{"class":264},[212,36828,36830],{"className":251,"code":36829,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bulge', props: { radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,36831,36832,36842,36846,36860,36864,36877,36885,36889,36893],{"__ignoreMap":178},[220,36833,36834,36836,36838,36840],{"class":222,"line":223},[220,36835,261],{"class":260},[220,36837,11512],{"class":264},[220,36839,268],{"class":260},[220,36841,4007],{"class":230},[220,36843,36844],{"class":222,"line":179},[220,36845,647],{"emptyLinePlaceholder":194},[220,36847,36848,36850,36852,36854,36856,36858],{"class":222,"line":389},[220,36849,1735],{"class":260},[220,36851,1738],{"class":420},[220,36853,1741],{"class":260},[220,36855,1744],{"class":260},[220,36857,1747],{"class":226},[220,36859,1750],{"class":264},[220,36861,36862],{"class":222,"line":399},[220,36863,1765],{"class":264},[220,36865,36866,36868,36871,36873,36875],{"class":222,"line":644},[220,36867,1770],{"class":264},[220,36869,36870],{"class":230},"'Bulge'",[220,36872,7541],{"class":264},[220,36874,8677],{"class":420},[220,36876,7546],{"class":264},[220,36878,36879,36881,36883],{"class":222,"line":650},[220,36880,7014],{"class":264},[220,36882,3206],{"class":230},[220,36884,2465],{"class":264},[220,36886,36887],{"class":222,"line":656},[220,36888,7031],{"class":264},[220,36890,36891],{"class":222,"line":673},[220,36892,1787],{"class":264},[220,36894,36895],{"class":222,"line":682},[220,36896,1792],{"class":264},[1504,36898,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36900},[36901,36902],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbulge",{"title":36577,"description":36585},"docs\u002Fcomponents\u002FBulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":36909,"title":36910,"body":36911,"category":32806,"componentType":25883,"description":36918,"extension":191,"meta":37179,"navigation":194,"path":37180,"requiresChild":194,"seo":37181,"stem":37182,"__hash__":37183},"components\u002Fdocs\u002Fcomponents\u002FCRTScreen.md","CRTScreen",{"type":8,"value":36912,"toc":37175},[36913,36916,36919,36921,36923,36926,36928,37173],[11,36914,36910],{"id":36915},"crtscreen",[15,36917,36918],{},"Retro CRT monitor simulation with scanlines",[31911,36920],{"component":36910},[23,36922,31915],{"id":26533},[31917,36924],{":props":36925},"[{\"name\":\"pixelSize\",\"type\":\"number\",\"default\":\"128\",\"description\":\"Size of individual TV pixels (lower = more pixels)\"},{\"name\":\"colorShift\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Chromatic aberration amount\"},{\"name\":\"scanlineIntensity\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Strength of horizontal scanlines\"},{\"name\":\"scanlineFrequency\",\"type\":\"number\",\"default\":\"200\",\"description\":\"Number of scanlines across screen\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Screen brightness boost\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Screen contrast enhancement\"},{\"name\":\"vignetteIntensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of corner darkening effect (0 = off)\"},{\"name\":\"vignetteRadius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the vignette extends inward (0 = edges only, 1 = reaches center)\"}]",[23,36927,31923],{"id":31922},[246,36929,36930,36975,37019,37063,37107],{":tabs":1557},[212,36931,36933],{"className":334,"code":36932,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle \u002F>\n \u003C\u002FCRTScreen>\n\u003C\u002FShader>\n",[99,36934,36935,36943,36951,36959,36967],{"__ignoreMap":178},[220,36936,36937,36939,36941],{"class":222,"line":223},[220,36938,343],{"class":264},[220,36940,347],{"class":346},[220,36942,359],{"class":264},[220,36944,36945,36947,36949],{"class":222,"line":179},[220,36946,364],{"class":264},[220,36948,36910],{"class":346},[220,36950,359],{"class":264},[220,36952,36953,36955,36957],{"class":222,"line":389},[220,36954,2550],{"class":264},[220,36956,2553],{"class":346},[220,36958,386],{"class":264},[220,36960,36961,36963,36965],{"class":222,"line":399},[220,36962,2567],{"class":264},[220,36964,36910],{"class":346},[220,36966,359],{"class":264},[220,36968,36969,36971,36973],{"class":222,"line":644},[220,36970,402],{"class":264},[220,36972,347],{"class":346},[220,36974,359],{"class":264},[212,36976,36977],{"className":409,"code":36932,"language":411,"meta":178,"style":178},[99,36978,36979,36987,36995,37003,37011],{"__ignoreMap":178},[220,36980,36981,36983,36985],{"class":222,"line":223},[220,36982,343],{"class":264},[220,36984,347],{"class":420},[220,36986,359],{"class":264},[220,36988,36989,36991,36993],{"class":222,"line":179},[220,36990,364],{"class":264},[220,36992,36910],{"class":420},[220,36994,359],{"class":264},[220,36996,36997,36999,37001],{"class":222,"line":389},[220,36998,2550],{"class":264},[220,37000,2553],{"class":420},[220,37002,386],{"class":264},[220,37004,37005,37007,37009],{"class":222,"line":399},[220,37006,2567],{"class":264},[220,37008,36910],{"class":420},[220,37010,359],{"class":264},[220,37012,37013,37015,37017],{"class":222,"line":644},[220,37014,402],{"class":264},[220,37016,347],{"class":420},[220,37018,359],{"class":264},[212,37020,37021],{"className":2844,"code":36932,"language":2846,"meta":178,"style":178},[99,37022,37023,37031,37039,37047,37055],{"__ignoreMap":178},[220,37024,37025,37027,37029],{"class":222,"line":223},[220,37026,343],{"class":264},[220,37028,347],{"class":420},[220,37030,359],{"class":264},[220,37032,37033,37035,37037],{"class":222,"line":179},[220,37034,364],{"class":264},[220,37036,36910],{"class":420},[220,37038,359],{"class":264},[220,37040,37041,37043,37045],{"class":222,"line":389},[220,37042,2550],{"class":264},[220,37044,2553],{"class":420},[220,37046,386],{"class":264},[220,37048,37049,37051,37053],{"class":222,"line":399},[220,37050,2567],{"class":264},[220,37052,36910],{"class":420},[220,37054,359],{"class":264},[220,37056,37057,37059,37061],{"class":222,"line":644},[220,37058,402],{"class":264},[220,37060,347],{"class":420},[220,37062,359],{"class":264},[212,37064,37065],{"className":468,"code":36932,"language":469,"meta":178,"style":178},[99,37066,37067,37075,37083,37091,37099],{"__ignoreMap":178},[220,37068,37069,37071,37073],{"class":222,"line":223},[220,37070,343],{"class":264},[220,37072,347],{"class":420},[220,37074,359],{"class":264},[220,37076,37077,37079,37081],{"class":222,"line":179},[220,37078,364],{"class":264},[220,37080,36910],{"class":420},[220,37082,359],{"class":264},[220,37084,37085,37087,37089],{"class":222,"line":389},[220,37086,2550],{"class":264},[220,37088,2553],{"class":420},[220,37090,386],{"class":264},[220,37092,37093,37095,37097],{"class":222,"line":399},[220,37094,2567],{"class":264},[220,37096,36910],{"class":420},[220,37098,359],{"class":264},[220,37100,37101,37103,37105],{"class":222,"line":644},[220,37102,402],{"class":264},[220,37104,347],{"class":420},[220,37106,359],{"class":264},[212,37108,37110],{"className":251,"code":37109,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CRTScreen', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37111,37112,37122,37126,37140,37144,37153,37161,37165,37169],{"__ignoreMap":178},[220,37113,37114,37116,37118,37120],{"class":222,"line":223},[220,37115,261],{"class":260},[220,37117,11512],{"class":264},[220,37119,268],{"class":260},[220,37121,4007],{"class":230},[220,37123,37124],{"class":222,"line":179},[220,37125,647],{"emptyLinePlaceholder":194},[220,37127,37128,37130,37132,37134,37136,37138],{"class":222,"line":389},[220,37129,1735],{"class":260},[220,37131,1738],{"class":420},[220,37133,1741],{"class":260},[220,37135,1744],{"class":260},[220,37137,1747],{"class":226},[220,37139,1750],{"class":264},[220,37141,37142],{"class":222,"line":399},[220,37143,1765],{"class":264},[220,37145,37146,37148,37151],{"class":222,"line":644},[220,37147,1770],{"class":264},[220,37149,37150],{"class":230},"'CRTScreen'",[220,37152,7009],{"class":264},[220,37154,37155,37157,37159],{"class":222,"line":650},[220,37156,7014],{"class":264},[220,37158,3206],{"class":230},[220,37160,2465],{"class":264},[220,37162,37163],{"class":222,"line":656},[220,37164,7031],{"class":264},[220,37166,37167],{"class":222,"line":673},[220,37168,1787],{"class":264},[220,37170,37171],{"class":222,"line":682},[220,37172,1792],{"class":264},[1504,37174,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37176},[37177,37178],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrtscreen",{"title":36910,"description":36918},"docs\u002Fcomponents\u002FCRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":37185,"title":37186,"body":37187,"category":36569,"componentType":25877,"description":37194,"extension":191,"meta":37379,"navigation":194,"path":37380,"requiresChild":32530,"seo":37381,"stem":37382,"__hash__":37383},"components\u002Fdocs\u002Fcomponents\u002FCarbonFiber.md","CarbonFiber",{"type":8,"value":37188,"toc":37375},[37189,37192,37195,37197,37199,37202,37204,37373],[11,37190,37186],{"id":37191},"carbonfiber",[15,37193,37194],{},"Photorealistic woven carbon fibre — interlaced tows whose anisotropic sheen flips ninety degrees cell to cell, raised into a quilted weave and finished with a glossy clearcoat that mirrors the studio. Plain or twill, in any shape.",[31911,37196],{"component":37186},[23,37198,31915],{"id":26533},[31917,37200],{":props":37201},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the carbon shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the carbon shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the carbon shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#b9bdc6\",\"description\":\"The bright tone of the fibre sheen — recolor for forged\u002Fcoloured carbon (red, blue, bronze)\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#0b0c0e\",\"description\":\"The deep resin tone the weave falls to in shadow — near-black for classic carbon\"},{\"name\":\"weaveStyle\",\"type\":\"\\\"twill\\\" | \\\"plain\\\"\",\"default\":\"twill\",\"description\":\"Weave pattern — plain (checkerboard) or 2×2 twill (the diagonal supercar weave)\"},{\"name\":\"weaveScale\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Number of woven tows across the shape — higher = finer, denser weave\"},{\"name\":\"weaveAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole weave grid in degrees\"},{\"name\":\"relief\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Depth of the quilted weave — how far each tow bulges, catching light on its crown and shadowing the valleys between\"},{\"name\":\"fiberSheen\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Strength of the anisotropic fibre sheen — the directional satin glint running along each tow\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the fibre sheen — 0 = tight crisp glints, 1 = soft matte satin\"},{\"name\":\"clearcoat\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Strength of the glossy lacquer coat — the sharp studio reflections of the wet clearcoat over the weave\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Strength of the reflected studio lighting seen in the clearcoat\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"215\",\"description\":\"Direction of the key light for the fibre sheen, in degrees\"},{\"name\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,37203,31923],{"id":31922},[246,37205,37206,37235,37263,37291,37319],{":tabs":1557},[212,37207,37209],{"className":334,"code":37208,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCarbonFiber \u002F>\n\u003C\u002FShader>\n",[99,37210,37211,37219,37227],{"__ignoreMap":178},[220,37212,37213,37215,37217],{"class":222,"line":223},[220,37214,343],{"class":264},[220,37216,347],{"class":346},[220,37218,359],{"class":264},[220,37220,37221,37223,37225],{"class":222,"line":179},[220,37222,364],{"class":264},[220,37224,37186],{"class":346},[220,37226,386],{"class":264},[220,37228,37229,37231,37233],{"class":222,"line":389},[220,37230,402],{"class":264},[220,37232,347],{"class":346},[220,37234,359],{"class":264},[212,37236,37237],{"className":409,"code":37208,"language":411,"meta":178,"style":178},[99,37238,37239,37247,37255],{"__ignoreMap":178},[220,37240,37241,37243,37245],{"class":222,"line":223},[220,37242,343],{"class":264},[220,37244,347],{"class":420},[220,37246,359],{"class":264},[220,37248,37249,37251,37253],{"class":222,"line":179},[220,37250,364],{"class":264},[220,37252,37186],{"class":420},[220,37254,386],{"class":264},[220,37256,37257,37259,37261],{"class":222,"line":389},[220,37258,402],{"class":264},[220,37260,347],{"class":420},[220,37262,359],{"class":264},[212,37264,37265],{"className":2844,"code":37208,"language":2846,"meta":178,"style":178},[99,37266,37267,37275,37283],{"__ignoreMap":178},[220,37268,37269,37271,37273],{"class":222,"line":223},[220,37270,343],{"class":264},[220,37272,347],{"class":420},[220,37274,359],{"class":264},[220,37276,37277,37279,37281],{"class":222,"line":179},[220,37278,364],{"class":264},[220,37280,37186],{"class":420},[220,37282,386],{"class":264},[220,37284,37285,37287,37289],{"class":222,"line":389},[220,37286,402],{"class":264},[220,37288,347],{"class":420},[220,37290,359],{"class":264},[212,37292,37293],{"className":468,"code":37208,"language":469,"meta":178,"style":178},[99,37294,37295,37303,37311],{"__ignoreMap":178},[220,37296,37297,37299,37301],{"class":222,"line":223},[220,37298,343],{"class":264},[220,37300,347],{"class":420},[220,37302,359],{"class":264},[220,37304,37305,37307,37309],{"class":222,"line":179},[220,37306,364],{"class":264},[220,37308,37186],{"class":420},[220,37310,386],{"class":264},[220,37312,37313,37315,37317],{"class":222,"line":389},[220,37314,402],{"class":264},[220,37316,347],{"class":420},[220,37318,359],{"class":264},[212,37320,37322],{"className":251,"code":37321,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CarbonFiber', props: {} }\n ]\n})\n",[99,37323,37324,37334,37338,37352,37356,37365,37369],{"__ignoreMap":178},[220,37325,37326,37328,37330,37332],{"class":222,"line":223},[220,37327,261],{"class":260},[220,37329,11512],{"class":264},[220,37331,268],{"class":260},[220,37333,4007],{"class":230},[220,37335,37336],{"class":222,"line":179},[220,37337,647],{"emptyLinePlaceholder":194},[220,37339,37340,37342,37344,37346,37348,37350],{"class":222,"line":389},[220,37341,1735],{"class":260},[220,37343,1738],{"class":420},[220,37345,1741],{"class":260},[220,37347,1744],{"class":260},[220,37349,1747],{"class":226},[220,37351,1750],{"class":264},[220,37353,37354],{"class":222,"line":399},[220,37355,1765],{"class":264},[220,37357,37358,37360,37363],{"class":222,"line":644},[220,37359,1770],{"class":264},[220,37361,37362],{"class":230},"'CarbonFiber'",[220,37364,2465],{"class":264},[220,37366,37367],{"class":222,"line":650},[220,37368,1787],{"class":264},[220,37370,37371],{"class":222,"line":656},[220,37372,1792],{"class":264},[1504,37374,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37376},[37377,37378],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber",{"title":37186,"description":37194},"docs\u002Fcomponents\u002FCarbonFiber","WIkCB0_WXwbjAu4XbUcvkmnOGN5QdhfTyeVIv06cqkQ",{"id":37385,"title":37386,"body":37387,"category":32806,"componentType":25883,"description":37394,"extension":191,"meta":37655,"navigation":194,"path":37656,"requiresChild":194,"seo":37657,"stem":37658,"__hash__":37659},"components\u002Fdocs\u002Fcomponents\u002FChalkboard.md","Chalkboard",{"type":8,"value":37388,"toc":37651},[37389,37392,37395,37397,37399,37402,37404,37649],[11,37390,37386],{"id":37391},"chalkboard",[15,37393,37394],{},"Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading",[31911,37396],{"component":37386},[23,37398,31915],{"id":26533},[31917,37400],{":props":37401},"[{\"name\":\"boardColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background board color\"},{\"name\":\"chalkColor\",\"type\":\"string\",\"default\":\"#eceadb\",\"description\":\"Chalk stroke color\"},{\"name\":\"edgeSensitivity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How readily edges are detected and drawn as chalk strokes\"},{\"name\":\"edgeThickness\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Thickness of the chalk outline strokes\"},{\"name\":\"shading\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Amount of cross-hatch shading filling darker regions\"},{\"name\":\"hatchScale\",\"type\":\"number\",\"default\":\"16\",\"description\":\"Spacing of the cross-hatch lines in pixels\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"0.45\",\"description\":\"Chalk dustiness \u002F grain that breaks up the strokes\"}]",[23,37403,31923],{"id":31922},[246,37405,37406,37451,37495,37539,37583],{":tabs":1557},[212,37407,37409],{"className":334,"code":37408,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChalkboard>\n \u003CCircle \u002F>\n \u003C\u002FChalkboard>\n\u003C\u002FShader>\n",[99,37410,37411,37419,37427,37435,37443],{"__ignoreMap":178},[220,37412,37413,37415,37417],{"class":222,"line":223},[220,37414,343],{"class":264},[220,37416,347],{"class":346},[220,37418,359],{"class":264},[220,37420,37421,37423,37425],{"class":222,"line":179},[220,37422,364],{"class":264},[220,37424,37386],{"class":346},[220,37426,359],{"class":264},[220,37428,37429,37431,37433],{"class":222,"line":389},[220,37430,2550],{"class":264},[220,37432,2553],{"class":346},[220,37434,386],{"class":264},[220,37436,37437,37439,37441],{"class":222,"line":399},[220,37438,2567],{"class":264},[220,37440,37386],{"class":346},[220,37442,359],{"class":264},[220,37444,37445,37447,37449],{"class":222,"line":644},[220,37446,402],{"class":264},[220,37448,347],{"class":346},[220,37450,359],{"class":264},[212,37452,37453],{"className":409,"code":37408,"language":411,"meta":178,"style":178},[99,37454,37455,37463,37471,37479,37487],{"__ignoreMap":178},[220,37456,37457,37459,37461],{"class":222,"line":223},[220,37458,343],{"class":264},[220,37460,347],{"class":420},[220,37462,359],{"class":264},[220,37464,37465,37467,37469],{"class":222,"line":179},[220,37466,364],{"class":264},[220,37468,37386],{"class":420},[220,37470,359],{"class":264},[220,37472,37473,37475,37477],{"class":222,"line":389},[220,37474,2550],{"class":264},[220,37476,2553],{"class":420},[220,37478,386],{"class":264},[220,37480,37481,37483,37485],{"class":222,"line":399},[220,37482,2567],{"class":264},[220,37484,37386],{"class":420},[220,37486,359],{"class":264},[220,37488,37489,37491,37493],{"class":222,"line":644},[220,37490,402],{"class":264},[220,37492,347],{"class":420},[220,37494,359],{"class":264},[212,37496,37497],{"className":2844,"code":37408,"language":2846,"meta":178,"style":178},[99,37498,37499,37507,37515,37523,37531],{"__ignoreMap":178},[220,37500,37501,37503,37505],{"class":222,"line":223},[220,37502,343],{"class":264},[220,37504,347],{"class":420},[220,37506,359],{"class":264},[220,37508,37509,37511,37513],{"class":222,"line":179},[220,37510,364],{"class":264},[220,37512,37386],{"class":420},[220,37514,359],{"class":264},[220,37516,37517,37519,37521],{"class":222,"line":389},[220,37518,2550],{"class":264},[220,37520,2553],{"class":420},[220,37522,386],{"class":264},[220,37524,37525,37527,37529],{"class":222,"line":399},[220,37526,2567],{"class":264},[220,37528,37386],{"class":420},[220,37530,359],{"class":264},[220,37532,37533,37535,37537],{"class":222,"line":644},[220,37534,402],{"class":264},[220,37536,347],{"class":420},[220,37538,359],{"class":264},[212,37540,37541],{"className":468,"code":37408,"language":469,"meta":178,"style":178},[99,37542,37543,37551,37559,37567,37575],{"__ignoreMap":178},[220,37544,37545,37547,37549],{"class":222,"line":223},[220,37546,343],{"class":264},[220,37548,347],{"class":420},[220,37550,359],{"class":264},[220,37552,37553,37555,37557],{"class":222,"line":179},[220,37554,364],{"class":264},[220,37556,37386],{"class":420},[220,37558,359],{"class":264},[220,37560,37561,37563,37565],{"class":222,"line":389},[220,37562,2550],{"class":264},[220,37564,2553],{"class":420},[220,37566,386],{"class":264},[220,37568,37569,37571,37573],{"class":222,"line":399},[220,37570,2567],{"class":264},[220,37572,37386],{"class":420},[220,37574,359],{"class":264},[220,37576,37577,37579,37581],{"class":222,"line":644},[220,37578,402],{"class":264},[220,37580,347],{"class":420},[220,37582,359],{"class":264},[212,37584,37586],{"className":251,"code":37585,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chalkboard', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37587,37588,37598,37602,37616,37620,37629,37637,37641,37645],{"__ignoreMap":178},[220,37589,37590,37592,37594,37596],{"class":222,"line":223},[220,37591,261],{"class":260},[220,37593,11512],{"class":264},[220,37595,268],{"class":260},[220,37597,4007],{"class":230},[220,37599,37600],{"class":222,"line":179},[220,37601,647],{"emptyLinePlaceholder":194},[220,37603,37604,37606,37608,37610,37612,37614],{"class":222,"line":389},[220,37605,1735],{"class":260},[220,37607,1738],{"class":420},[220,37609,1741],{"class":260},[220,37611,1744],{"class":260},[220,37613,1747],{"class":226},[220,37615,1750],{"class":264},[220,37617,37618],{"class":222,"line":399},[220,37619,1765],{"class":264},[220,37621,37622,37624,37627],{"class":222,"line":644},[220,37623,1770],{"class":264},[220,37625,37626],{"class":230},"'Chalkboard'",[220,37628,7009],{"class":264},[220,37630,37631,37633,37635],{"class":222,"line":650},[220,37632,7014],{"class":264},[220,37634,3206],{"class":230},[220,37636,2465],{"class":264},[220,37638,37639],{"class":222,"line":656},[220,37640,7031],{"class":264},[220,37642,37643],{"class":222,"line":673},[220,37644,1787],{"class":264},[220,37646,37647],{"class":222,"line":682},[220,37648,1792],{"class":264},[1504,37650,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37652},[37653,37654],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchalkboard",{"title":37386,"description":37394},"docs\u002Fcomponents\u002FChalkboard","4UA6SIT6VPNN853gp0rMSEZulSyNRPaB9voNTQ5gBQ8",{"id":37661,"title":37662,"body":37663,"category":32234,"componentType":25883,"description":37670,"extension":191,"meta":37931,"navigation":194,"path":37932,"requiresChild":194,"seo":37933,"stem":37934,"__hash__":37935},"components\u002Fdocs\u002Fcomponents\u002FChannelBlur.md","ChannelBlur",{"type":8,"value":37664,"toc":37927},[37665,37668,37671,37673,37675,37678,37680,37925],[11,37666,37662],{"id":37667},"channelblur",[15,37669,37670],{},"Independent blur for red, green, and blue channels",[31911,37672],{"component":37662},[23,37674,31915],{"id":26533},[31917,37676],{":props":37677},"[{\"name\":\"redIntensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Blur intensity for red channel\"},{\"name\":\"greenIntensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Blur intensity for green channel\"},{\"name\":\"blueIntensity\",\"type\":\"number\",\"default\":\"40\",\"description\":\"Blur intensity for blue channel\"}]",[23,37679,31923],{"id":31922},[246,37681,37682,37727,37771,37815,37859],{":tabs":1557},[212,37683,37685],{"className":334,"code":37684,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle \u002F>\n \u003C\u002FChannelBlur>\n\u003C\u002FShader>\n",[99,37686,37687,37695,37703,37711,37719],{"__ignoreMap":178},[220,37688,37689,37691,37693],{"class":222,"line":223},[220,37690,343],{"class":264},[220,37692,347],{"class":346},[220,37694,359],{"class":264},[220,37696,37697,37699,37701],{"class":222,"line":179},[220,37698,364],{"class":264},[220,37700,37662],{"class":346},[220,37702,359],{"class":264},[220,37704,37705,37707,37709],{"class":222,"line":389},[220,37706,2550],{"class":264},[220,37708,2553],{"class":346},[220,37710,386],{"class":264},[220,37712,37713,37715,37717],{"class":222,"line":399},[220,37714,2567],{"class":264},[220,37716,37662],{"class":346},[220,37718,359],{"class":264},[220,37720,37721,37723,37725],{"class":222,"line":644},[220,37722,402],{"class":264},[220,37724,347],{"class":346},[220,37726,359],{"class":264},[212,37728,37729],{"className":409,"code":37684,"language":411,"meta":178,"style":178},[99,37730,37731,37739,37747,37755,37763],{"__ignoreMap":178},[220,37732,37733,37735,37737],{"class":222,"line":223},[220,37734,343],{"class":264},[220,37736,347],{"class":420},[220,37738,359],{"class":264},[220,37740,37741,37743,37745],{"class":222,"line":179},[220,37742,364],{"class":264},[220,37744,37662],{"class":420},[220,37746,359],{"class":264},[220,37748,37749,37751,37753],{"class":222,"line":389},[220,37750,2550],{"class":264},[220,37752,2553],{"class":420},[220,37754,386],{"class":264},[220,37756,37757,37759,37761],{"class":222,"line":399},[220,37758,2567],{"class":264},[220,37760,37662],{"class":420},[220,37762,359],{"class":264},[220,37764,37765,37767,37769],{"class":222,"line":644},[220,37766,402],{"class":264},[220,37768,347],{"class":420},[220,37770,359],{"class":264},[212,37772,37773],{"className":2844,"code":37684,"language":2846,"meta":178,"style":178},[99,37774,37775,37783,37791,37799,37807],{"__ignoreMap":178},[220,37776,37777,37779,37781],{"class":222,"line":223},[220,37778,343],{"class":264},[220,37780,347],{"class":420},[220,37782,359],{"class":264},[220,37784,37785,37787,37789],{"class":222,"line":179},[220,37786,364],{"class":264},[220,37788,37662],{"class":420},[220,37790,359],{"class":264},[220,37792,37793,37795,37797],{"class":222,"line":389},[220,37794,2550],{"class":264},[220,37796,2553],{"class":420},[220,37798,386],{"class":264},[220,37800,37801,37803,37805],{"class":222,"line":399},[220,37802,2567],{"class":264},[220,37804,37662],{"class":420},[220,37806,359],{"class":264},[220,37808,37809,37811,37813],{"class":222,"line":644},[220,37810,402],{"class":264},[220,37812,347],{"class":420},[220,37814,359],{"class":264},[212,37816,37817],{"className":468,"code":37684,"language":469,"meta":178,"style":178},[99,37818,37819,37827,37835,37843,37851],{"__ignoreMap":178},[220,37820,37821,37823,37825],{"class":222,"line":223},[220,37822,343],{"class":264},[220,37824,347],{"class":420},[220,37826,359],{"class":264},[220,37828,37829,37831,37833],{"class":222,"line":179},[220,37830,364],{"class":264},[220,37832,37662],{"class":420},[220,37834,359],{"class":264},[220,37836,37837,37839,37841],{"class":222,"line":389},[220,37838,2550],{"class":264},[220,37840,2553],{"class":420},[220,37842,386],{"class":264},[220,37844,37845,37847,37849],{"class":222,"line":399},[220,37846,2567],{"class":264},[220,37848,37662],{"class":420},[220,37850,359],{"class":264},[220,37852,37853,37855,37857],{"class":222,"line":644},[220,37854,402],{"class":264},[220,37856,347],{"class":420},[220,37858,359],{"class":264},[212,37860,37862],{"className":251,"code":37861,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChannelBlur', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37863,37864,37874,37878,37892,37896,37905,37913,37917,37921],{"__ignoreMap":178},[220,37865,37866,37868,37870,37872],{"class":222,"line":223},[220,37867,261],{"class":260},[220,37869,11512],{"class":264},[220,37871,268],{"class":260},[220,37873,4007],{"class":230},[220,37875,37876],{"class":222,"line":179},[220,37877,647],{"emptyLinePlaceholder":194},[220,37879,37880,37882,37884,37886,37888,37890],{"class":222,"line":389},[220,37881,1735],{"class":260},[220,37883,1738],{"class":420},[220,37885,1741],{"class":260},[220,37887,1744],{"class":260},[220,37889,1747],{"class":226},[220,37891,1750],{"class":264},[220,37893,37894],{"class":222,"line":399},[220,37895,1765],{"class":264},[220,37897,37898,37900,37903],{"class":222,"line":644},[220,37899,1770],{"class":264},[220,37901,37902],{"class":230},"'ChannelBlur'",[220,37904,7009],{"class":264},[220,37906,37907,37909,37911],{"class":222,"line":650},[220,37908,7014],{"class":264},[220,37910,3206],{"class":230},[220,37912,2465],{"class":264},[220,37914,37915],{"class":222,"line":656},[220,37916,7031],{"class":264},[220,37918,37919],{"class":222,"line":673},[220,37920,1787],{"class":264},[220,37922,37923],{"class":222,"line":682},[220,37924,1792],{"class":264},[1504,37926,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37928},[37929,37930],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchannelblur",{"title":37662,"description":37670},"docs\u002Fcomponents\u002FChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":37937,"title":37938,"body":37939,"category":33673,"componentType":25883,"description":37946,"extension":191,"meta":38207,"navigation":194,"path":38208,"requiresChild":194,"seo":38209,"stem":38210,"__hash__":38211},"components\u002Fdocs\u002Fcomponents\u002FCheckerWipe.md","CheckerWipe",{"type":8,"value":37940,"toc":38203},[37941,37944,37947,37949,37951,37954,37956,38201],[11,37942,37938],{"id":37943},"checkerwipe",[15,37945,37946],{},"Wipe the content away as a checkerboard of fading squares",[31911,37948],{"component":37938},[23,37950,31915],{"id":26533},[31917,37952],{":props":37953},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Size of each square as a fraction of the frame width\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each square fades out (0 = hard-edged squares)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the squares wipe in\"}]",[23,37955,31923],{"id":31922},[246,37957,37958,38003,38047,38091,38135],{":tabs":1557},[212,37959,37961],{"className":334,"code":37960,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerWipe>\n \u003CCircle \u002F>\n \u003C\u002FCheckerWipe>\n\u003C\u002FShader>\n",[99,37962,37963,37971,37979,37987,37995],{"__ignoreMap":178},[220,37964,37965,37967,37969],{"class":222,"line":223},[220,37966,343],{"class":264},[220,37968,347],{"class":346},[220,37970,359],{"class":264},[220,37972,37973,37975,37977],{"class":222,"line":179},[220,37974,364],{"class":264},[220,37976,37938],{"class":346},[220,37978,359],{"class":264},[220,37980,37981,37983,37985],{"class":222,"line":389},[220,37982,2550],{"class":264},[220,37984,2553],{"class":346},[220,37986,386],{"class":264},[220,37988,37989,37991,37993],{"class":222,"line":399},[220,37990,2567],{"class":264},[220,37992,37938],{"class":346},[220,37994,359],{"class":264},[220,37996,37997,37999,38001],{"class":222,"line":644},[220,37998,402],{"class":264},[220,38000,347],{"class":346},[220,38002,359],{"class":264},[212,38004,38005],{"className":409,"code":37960,"language":411,"meta":178,"style":178},[99,38006,38007,38015,38023,38031,38039],{"__ignoreMap":178},[220,38008,38009,38011,38013],{"class":222,"line":223},[220,38010,343],{"class":264},[220,38012,347],{"class":420},[220,38014,359],{"class":264},[220,38016,38017,38019,38021],{"class":222,"line":179},[220,38018,364],{"class":264},[220,38020,37938],{"class":420},[220,38022,359],{"class":264},[220,38024,38025,38027,38029],{"class":222,"line":389},[220,38026,2550],{"class":264},[220,38028,2553],{"class":420},[220,38030,386],{"class":264},[220,38032,38033,38035,38037],{"class":222,"line":399},[220,38034,2567],{"class":264},[220,38036,37938],{"class":420},[220,38038,359],{"class":264},[220,38040,38041,38043,38045],{"class":222,"line":644},[220,38042,402],{"class":264},[220,38044,347],{"class":420},[220,38046,359],{"class":264},[212,38048,38049],{"className":2844,"code":37960,"language":2846,"meta":178,"style":178},[99,38050,38051,38059,38067,38075,38083],{"__ignoreMap":178},[220,38052,38053,38055,38057],{"class":222,"line":223},[220,38054,343],{"class":264},[220,38056,347],{"class":420},[220,38058,359],{"class":264},[220,38060,38061,38063,38065],{"class":222,"line":179},[220,38062,364],{"class":264},[220,38064,37938],{"class":420},[220,38066,359],{"class":264},[220,38068,38069,38071,38073],{"class":222,"line":389},[220,38070,2550],{"class":264},[220,38072,2553],{"class":420},[220,38074,386],{"class":264},[220,38076,38077,38079,38081],{"class":222,"line":399},[220,38078,2567],{"class":264},[220,38080,37938],{"class":420},[220,38082,359],{"class":264},[220,38084,38085,38087,38089],{"class":222,"line":644},[220,38086,402],{"class":264},[220,38088,347],{"class":420},[220,38090,359],{"class":264},[212,38092,38093],{"className":468,"code":37960,"language":469,"meta":178,"style":178},[99,38094,38095,38103,38111,38119,38127],{"__ignoreMap":178},[220,38096,38097,38099,38101],{"class":222,"line":223},[220,38098,343],{"class":264},[220,38100,347],{"class":420},[220,38102,359],{"class":264},[220,38104,38105,38107,38109],{"class":222,"line":179},[220,38106,364],{"class":264},[220,38108,37938],{"class":420},[220,38110,359],{"class":264},[220,38112,38113,38115,38117],{"class":222,"line":389},[220,38114,2550],{"class":264},[220,38116,2553],{"class":420},[220,38118,386],{"class":264},[220,38120,38121,38123,38125],{"class":222,"line":399},[220,38122,2567],{"class":264},[220,38124,37938],{"class":420},[220,38126,359],{"class":264},[220,38128,38129,38131,38133],{"class":222,"line":644},[220,38130,402],{"class":264},[220,38132,347],{"class":420},[220,38134,359],{"class":264},[212,38136,38138],{"className":251,"code":38137,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CheckerWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,38139,38140,38150,38154,38168,38172,38181,38189,38193,38197],{"__ignoreMap":178},[220,38141,38142,38144,38146,38148],{"class":222,"line":223},[220,38143,261],{"class":260},[220,38145,11512],{"class":264},[220,38147,268],{"class":260},[220,38149,4007],{"class":230},[220,38151,38152],{"class":222,"line":179},[220,38153,647],{"emptyLinePlaceholder":194},[220,38155,38156,38158,38160,38162,38164,38166],{"class":222,"line":389},[220,38157,1735],{"class":260},[220,38159,1738],{"class":420},[220,38161,1741],{"class":260},[220,38163,1744],{"class":260},[220,38165,1747],{"class":226},[220,38167,1750],{"class":264},[220,38169,38170],{"class":222,"line":399},[220,38171,1765],{"class":264},[220,38173,38174,38176,38179],{"class":222,"line":644},[220,38175,1770],{"class":264},[220,38177,38178],{"class":230},"'CheckerWipe'",[220,38180,7009],{"class":264},[220,38182,38183,38185,38187],{"class":222,"line":650},[220,38184,7014],{"class":264},[220,38186,3206],{"class":230},[220,38188,2465],{"class":264},[220,38190,38191],{"class":222,"line":656},[220,38192,7031],{"class":264},[220,38194,38195],{"class":222,"line":673},[220,38196,1787],{"class":264},[220,38198,38199],{"class":222,"line":682},[220,38200,1792],{"class":264},[1504,38202,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":38204},[38205,38206],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerwipe",{"title":37938,"description":37946},"docs\u002Fcomponents\u002FCheckerWipe","NqeYXHsapZtoyRSSIzfTaKg5Au8v5cKkjvG-ZTxFNu8",{"id":38213,"title":38214,"body":38215,"category":33063,"componentType":25877,"description":38222,"extension":191,"meta":38406,"navigation":194,"path":38407,"requiresChild":32530,"seo":38408,"stem":38409,"__hash__":38410},"components\u002Fdocs\u002Fcomponents\u002FCheckerboard.md","Checkerboard",{"type":8,"value":38216,"toc":38402},[38217,38220,38223,38225,38227,38230,38232,38400],[11,38218,38214],{"id":38219},"checkerboard",[15,38221,38222],{},"Classic checkerboard pattern with two alternating colors",[31911,38224],{"component":38214},[23,38226,31915],{"id":26533},[31917,38228],{":props":38229},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#cccccc\",\"description\":\"First color of the checkerboard pattern\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#999999\",\"description\":\"Second color of the checkerboard pattern\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of cells along the canvas height (creates square cells). Switch the unit to px in the editor to set an absolute cell size instead.\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Smoothness of the transition between colors (0 = hard edges, 1 = very soft)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,38231,31923],{"id":31922},[246,38233,38234,38263,38291,38319,38347],{":tabs":1557},[212,38235,38237],{"className":334,"code":38236,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerboard \u002F>\n\u003C\u002FShader>\n",[99,38238,38239,38247,38255],{"__ignoreMap":178},[220,38240,38241,38243,38245],{"class":222,"line":223},[220,38242,343],{"class":264},[220,38244,347],{"class":346},[220,38246,359],{"class":264},[220,38248,38249,38251,38253],{"class":222,"line":179},[220,38250,364],{"class":264},[220,38252,38214],{"class":346},[220,38254,386],{"class":264},[220,38256,38257,38259,38261],{"class":222,"line":389},[220,38258,402],{"class":264},[220,38260,347],{"class":346},[220,38262,359],{"class":264},[212,38264,38265],{"className":409,"code":38236,"language":411,"meta":178,"style":178},[99,38266,38267,38275,38283],{"__ignoreMap":178},[220,38268,38269,38271,38273],{"class":222,"line":223},[220,38270,343],{"class":264},[220,38272,347],{"class":420},[220,38274,359],{"class":264},[220,38276,38277,38279,38281],{"class":222,"line":179},[220,38278,364],{"class":264},[220,38280,38214],{"class":420},[220,38282,386],{"class":264},[220,38284,38285,38287,38289],{"class":222,"line":389},[220,38286,402],{"class":264},[220,38288,347],{"class":420},[220,38290,359],{"class":264},[212,38292,38293],{"className":2844,"code":38236,"language":2846,"meta":178,"style":178},[99,38294,38295,38303,38311],{"__ignoreMap":178},[220,38296,38297,38299,38301],{"class":222,"line":223},[220,38298,343],{"class":264},[220,38300,347],{"class":420},[220,38302,359],{"class":264},[220,38304,38305,38307,38309],{"class":222,"line":179},[220,38306,364],{"class":264},[220,38308,38214],{"class":420},[220,38310,386],{"class":264},[220,38312,38313,38315,38317],{"class":222,"line":389},[220,38314,402],{"class":264},[220,38316,347],{"class":420},[220,38318,359],{"class":264},[212,38320,38321],{"className":468,"code":38236,"language":469,"meta":178,"style":178},[99,38322,38323,38331,38339],{"__ignoreMap":178},[220,38324,38325,38327,38329],{"class":222,"line":223},[220,38326,343],{"class":264},[220,38328,347],{"class":420},[220,38330,359],{"class":264},[220,38332,38333,38335,38337],{"class":222,"line":179},[220,38334,364],{"class":264},[220,38336,38214],{"class":420},[220,38338,386],{"class":264},[220,38340,38341,38343,38345],{"class":222,"line":389},[220,38342,402],{"class":264},[220,38344,347],{"class":420},[220,38346,359],{"class":264},[212,38348,38350],{"className":251,"code":38349,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Checkerboard', props: {} }\n ]\n})\n",[99,38351,38352,38362,38366,38380,38384,38392,38396],{"__ignoreMap":178},[220,38353,38354,38356,38358,38360],{"class":222,"line":223},[220,38355,261],{"class":260},[220,38357,11512],{"class":264},[220,38359,268],{"class":260},[220,38361,4007],{"class":230},[220,38363,38364],{"class":222,"line":179},[220,38365,647],{"emptyLinePlaceholder":194},[220,38367,38368,38370,38372,38374,38376,38378],{"class":222,"line":389},[220,38369,1735],{"class":260},[220,38371,1738],{"class":420},[220,38373,1741],{"class":260},[220,38375,1744],{"class":260},[220,38377,1747],{"class":226},[220,38379,1750],{"class":264},[220,38381,38382],{"class":222,"line":399},[220,38383,1765],{"class":264},[220,38385,38386,38388,38390],{"class":222,"line":644},[220,38387,1770],{"class":264},[220,38389,10158],{"class":230},[220,38391,2465],{"class":264},[220,38393,38394],{"class":222,"line":650},[220,38395,1787],{"class":264},[220,38397,38398],{"class":222,"line":656},[220,38399,1792],{"class":264},[1504,38401,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":38403},[38404,38405],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerboard",{"title":38214,"description":38222},"docs\u002Fcomponents\u002FCheckerboard","gk0VEGhuoITOhp1cxE7gjEpfTe-mTLCHWoRyF1Tp1Ac",{"id":38412,"title":38413,"body":38414,"category":33063,"componentType":25877,"description":38421,"extension":191,"meta":38606,"navigation":194,"path":38607,"requiresChild":32530,"seo":38608,"stem":38609,"__hash__":38610},"components\u002Fdocs\u002Fcomponents\u002FChevron.md","Chevron",{"type":8,"value":38415,"toc":38602},[38416,38419,38422,38424,38426,38429,38431,38600],[11,38417,38413],{"id":38418},"chevron",[15,38420,38421],{},"Animated chevron \u002F zigzag stripe pattern",[31911,38423],{"component":38413},[23,38425,31915],{"id":26533},[31917,38427],{":props":38428},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second color\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of chevron pairs visible\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle of the chevrons\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Ratio of the two colors\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Phase offset for pattern positioning\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,38430,31923],{"id":31922},[246,38432,38433,38462,38490,38518,38546],{":tabs":1557},[212,38434,38436],{"className":334,"code":38435,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChevron \u002F>\n\u003C\u002FShader>\n",[99,38437,38438,38446,38454],{"__ignoreMap":178},[220,38439,38440,38442,38444],{"class":222,"line":223},[220,38441,343],{"class":264},[220,38443,347],{"class":346},[220,38445,359],{"class":264},[220,38447,38448,38450,38452],{"class":222,"line":179},[220,38449,364],{"class":264},[220,38451,38413],{"class":346},[220,38453,386],{"class":264},[220,38455,38456,38458,38460],{"class":222,"line":389},[220,38457,402],{"class":264},[220,38459,347],{"class":346},[220,38461,359],{"class":264},[212,38463,38464],{"className":409,"code":38435,"language":411,"meta":178,"style":178},[99,38465,38466,38474,38482],{"__ignoreMap":178},[220,38467,38468,38470,38472],{"class":222,"line":223},[220,38469,343],{"class":264},[220,38471,347],{"class":420},[220,38473,359],{"class":264},[220,38475,38476,38478,38480],{"class":222,"line":179},[220,38477,364],{"class":264},[220,38479,38413],{"class":420},[220,38481,386],{"class":264},[220,38483,38484,38486,38488],{"class":222,"line":389},[220,38485,402],{"class":264},[220,38487,347],{"class":420},[220,38489,359],{"class":264},[212,38491,38492],{"className":2844,"code":38435,"language":2846,"meta":178,"style":178},[99,38493,38494,38502,38510],{"__ignoreMap":178},[220,38495,38496,38498,38500],{"class":222,"line":223},[220,38497,343],{"class":264},[220,38499,347],{"class":420},[220,38501,359],{"class":264},[220,38503,38504,38506,38508],{"class":222,"line":179},[220,38505,364],{"class":264},[220,38507,38413],{"class":420},[220,38509,386],{"class":264},[220,38511,38512,38514,38516],{"class":222,"line":389},[220,38513,402],{"class":264},[220,38515,347],{"class":420},[220,38517,359],{"class":264},[212,38519,38520],{"className":468,"code":38435,"language":469,"meta":178,"style":178},[99,38521,38522,38530,38538],{"__ignoreMap":178},[220,38523,38524,38526,38528],{"class":222,"line":223},[220,38525,343],{"class":264},[220,38527,347],{"class":420},[220,38529,359],{"class":264},[220,38531,38532,38534,38536],{"class":222,"line":179},[220,38533,364],{"class":264},[220,38535,38413],{"class":420},[220,38537,386],{"class":264},[220,38539,38540,38542,38544],{"class":222,"line":389},[220,38541,402],{"class":264},[220,38543,347],{"class":420},[220,38545,359],{"class":264},[212,38547,38549],{"className":251,"code":38548,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chevron', props: {} }\n ]\n})\n",[99,38550,38551,38561,38565,38579,38583,38592,38596],{"__ignoreMap":178},[220,38552,38553,38555,38557,38559],{"class":222,"line":223},[220,38554,261],{"class":260},[220,38556,11512],{"class":264},[220,38558,268],{"class":260},[220,38560,4007],{"class":230},[220,38562,38563],{"class":222,"line":179},[220,38564,647],{"emptyLinePlaceholder":194},[220,38566,38567,38569,38571,38573,38575,38577],{"class":222,"line":389},[220,38568,1735],{"class":260},[220,38570,1738],{"class":420},[220,38572,1741],{"class":260},[220,38574,1744],{"class":260},[220,38576,1747],{"class":226},[220,38578,1750],{"class":264},[220,38580,38581],{"class":222,"line":399},[220,38582,1765],{"class":264},[220,38584,38585,38587,38590],{"class":222,"line":644},[220,38586,1770],{"class":264},[220,38588,38589],{"class":230},"'Chevron'",[220,38591,2465],{"class":264},[220,38593,38594],{"class":222,"line":650},[220,38595,1787],{"class":264},[220,38597,38598],{"class":222,"line":656},[220,38599,1792],{"class":264},[1504,38601,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":38603},[38604,38605],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchevron",{"title":38413,"description":38421},"docs\u002Fcomponents\u002FChevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":38612,"title":38613,"body":38614,"category":35559,"componentType":25877,"description":38621,"extension":191,"meta":38910,"navigation":194,"path":38911,"requiresChild":32530,"seo":38912,"stem":38913,"__hash__":38914},"components\u002Fdocs\u002Fcomponents\u002FChromaFlow.md","ChromaFlow",{"type":8,"value":38615,"toc":38906},[38616,38619,38622,38624,38626,38629,38631,38904],[11,38617,38613],{"id":38618},"chromaflow",[15,38620,38621],{},"Interactive liquid flow effect that follows your cursor",[31911,38623],{"component":38613},[23,38625,31915],{"id":26533},[31917,38627],{":props":38628},"[{\"name\":\"baseColor\",\"type\":\"string\",\"default\":\"#0066ff\",\"description\":\"Base liquid color\"},{\"name\":\"upColor\",\"type\":\"string\",\"default\":\"#00ff00\",\"description\":\"Color for upward movement\"},{\"name\":\"downColor\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"Color for downward movement\"},{\"name\":\"leftColor\",\"type\":\"string\",\"default\":\"#0000ff\",\"description\":\"Color for leftward movement\"},{\"name\":\"rightColor\",\"type\":\"string\",\"default\":\"#ffff00\",\"description\":\"Color for rightward movement\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the liquid effect\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Radius of the liquid effect\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"30\",\"description\":\"How much momentum colors retain in their flow direction\"}]",[23,38630,31923],{"id":31922},[246,38632,38633,38682,38738,38788,38842],{":tabs":1557},[212,38634,38636],{"className":334,"code":38635,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n \u002F>\n\u003C\u002FShader>\n",[99,38637,38638,38646,38653,38661,38670,38674],{"__ignoreMap":178},[220,38639,38640,38642,38644],{"class":222,"line":223},[220,38641,343],{"class":264},[220,38643,347],{"class":346},[220,38645,359],{"class":264},[220,38647,38648,38650],{"class":222,"line":179},[220,38649,364],{"class":264},[220,38651,38652],{"class":346},"ChromaFlow\n",[220,38654,38655,38657,38659],{"class":222,"line":389},[220,38656,20371],{"class":226},[220,38658,353],{"class":264},[220,38660,36625],{"class":230},[220,38662,38663,38665,38667],{"class":222,"line":399},[220,38664,17405],{"class":226},[220,38666,353],{"class":264},[220,38668,38669],{"class":230},"\"3\"\n",[220,38671,38672],{"class":222,"line":644},[220,38673,1234],{"class":264},[220,38675,38676,38678,38680],{"class":222,"line":650},[220,38677,402],{"class":264},[220,38679,347],{"class":346},[220,38681,359],{"class":264},[212,38683,38685],{"className":409,"code":38684,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n \u002F>\n\u003C\u002FShader>\n",[99,38686,38687,38695,38701,38713,38726,38730],{"__ignoreMap":178},[220,38688,38689,38691,38693],{"class":222,"line":223},[220,38690,343],{"class":264},[220,38692,347],{"class":420},[220,38694,359],{"class":264},[220,38696,38697,38699],{"class":222,"line":179},[220,38698,364],{"class":264},[220,38700,38652],{"class":420},[220,38702,38703,38705,38707,38709,38711],{"class":222,"line":389},[220,38704,20482],{"class":226},[220,38706,353],{"class":260},[220,38708,743],{"class":264},[220,38710,8677],{"class":420},[220,38712,749],{"class":264},[220,38714,38715,38717,38719,38721,38724],{"class":222,"line":399},[220,38716,9645],{"class":226},[220,38718,353],{"class":260},[220,38720,743],{"class":264},[220,38722,38723],{"class":420},"3",[220,38725,749],{"class":264},[220,38727,38728],{"class":222,"line":644},[220,38729,1234],{"class":264},[220,38731,38732,38734,38736],{"class":222,"line":650},[220,38733,402],{"class":264},[220,38735,347],{"class":420},[220,38737,359],{"class":264},[212,38739,38740],{"className":2844,"code":38684,"language":2846,"meta":178,"style":178},[99,38741,38742,38750,38756,38766,38776,38780],{"__ignoreMap":178},[220,38743,38744,38746,38748],{"class":222,"line":223},[220,38745,343],{"class":264},[220,38747,347],{"class":420},[220,38749,359],{"class":264},[220,38751,38752,38754],{"class":222,"line":179},[220,38753,364],{"class":264},[220,38755,38652],{"class":420},[220,38757,38758,38760,38762,38764],{"class":222,"line":389},[220,38759,20482],{"class":226},[220,38761,29871],{"class":264},[220,38763,8677],{"class":420},[220,38765,749],{"class":264},[220,38767,38768,38770,38772,38774],{"class":222,"line":399},[220,38769,9645],{"class":226},[220,38771,29871],{"class":264},[220,38773,38723],{"class":420},[220,38775,749],{"class":264},[220,38777,38778],{"class":222,"line":644},[220,38779,1234],{"class":264},[220,38781,38782,38784,38786],{"class":222,"line":650},[220,38783,402],{"class":264},[220,38785,347],{"class":420},[220,38787,359],{"class":264},[212,38789,38790],{"className":468,"code":38684,"language":469,"meta":178,"style":178},[99,38791,38792,38800,38806,38818,38830,38834],{"__ignoreMap":178},[220,38793,38794,38796,38798],{"class":222,"line":223},[220,38795,343],{"class":264},[220,38797,347],{"class":420},[220,38799,359],{"class":264},[220,38801,38802,38804],{"class":222,"line":179},[220,38803,364],{"class":264},[220,38805,38652],{"class":420},[220,38807,38808,38810,38812,38814,38816],{"class":222,"line":389},[220,38809,20482],{"class":226},[220,38811,353],{"class":260},[220,38813,743],{"class":264},[220,38815,8677],{"class":420},[220,38817,749],{"class":264},[220,38819,38820,38822,38824,38826,38828],{"class":222,"line":399},[220,38821,9645],{"class":226},[220,38823,353],{"class":260},[220,38825,743],{"class":264},[220,38827,38723],{"class":420},[220,38829,749],{"class":264},[220,38831,38832],{"class":222,"line":644},[220,38833,1234],{"class":264},[220,38835,38836,38838,38840],{"class":222,"line":650},[220,38837,402],{"class":264},[220,38839,347],{"class":420},[220,38841,359],{"class":264},[212,38843,38845],{"className":251,"code":38844,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaFlow', props: { intensity: 1, radius: 3 } }\n ]\n})\n",[99,38846,38847,38857,38861,38875,38879,38896,38900],{"__ignoreMap":178},[220,38848,38849,38851,38853,38855],{"class":222,"line":223},[220,38850,261],{"class":260},[220,38852,11512],{"class":264},[220,38854,268],{"class":260},[220,38856,4007],{"class":230},[220,38858,38859],{"class":222,"line":179},[220,38860,647],{"emptyLinePlaceholder":194},[220,38862,38863,38865,38867,38869,38871,38873],{"class":222,"line":389},[220,38864,1735],{"class":260},[220,38866,1738],{"class":420},[220,38868,1741],{"class":260},[220,38870,1744],{"class":260},[220,38872,1747],{"class":226},[220,38874,1750],{"class":264},[220,38876,38877],{"class":222,"line":399},[220,38878,1765],{"class":264},[220,38880,38881,38883,38886,38888,38890,38892,38894],{"class":222,"line":644},[220,38882,1770],{"class":264},[220,38884,38885],{"class":230},"'ChromaFlow'",[220,38887,32203],{"class":264},[220,38889,8677],{"class":420},[220,38891,6566],{"class":264},[220,38893,38723],{"class":420},[220,38895,1782],{"class":264},[220,38897,38898],{"class":222,"line":650},[220,38899,1787],{"class":264},[220,38901,38902],{"class":222,"line":656},[220,38903,1792],{"class":264},[1504,38905,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38907},[38908,38909],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchromaflow",{"title":38613,"description":38621},"docs\u002Fcomponents\u002FChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":38916,"title":38917,"body":38918,"category":32806,"componentType":25883,"description":38925,"extension":191,"meta":39186,"navigation":194,"path":39187,"requiresChild":194,"seo":39188,"stem":39189,"__hash__":39190},"components\u002Fdocs\u002Fcomponents\u002FChromaticAberration.md","ChromaticAberration",{"type":8,"value":38919,"toc":39182},[38920,38923,38926,38928,38930,38933,38935,39180],[11,38921,38917],{"id":38922},"chromaticaberration",[15,38924,38925],{},"Separate RGB channels for a prismatic distortion effect",[31911,38927],{"component":38917},[23,38929,31915],{"id":26533},[31917,38931],{":props":38932},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Overall strength of the chromatic aberration effect\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the chromatic aberration in degrees\"},{\"name\":\"redOffset\",\"type\":\"number\",\"default\":\"-1\",\"description\":\"Red channel offset multiplier\"},{\"name\":\"greenOffset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Green channel offset multiplier\"},{\"name\":\"blueOffset\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blue channel offset multiplier\"}]",[23,38934,31923],{"id":31922},[246,38936,38937,38982,39026,39070,39114],{":tabs":1557},[212,38938,38940],{"className":334,"code":38939,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle \u002F>\n \u003C\u002FChromaticAberration>\n\u003C\u002FShader>\n",[99,38941,38942,38950,38958,38966,38974],{"__ignoreMap":178},[220,38943,38944,38946,38948],{"class":222,"line":223},[220,38945,343],{"class":264},[220,38947,347],{"class":346},[220,38949,359],{"class":264},[220,38951,38952,38954,38956],{"class":222,"line":179},[220,38953,364],{"class":264},[220,38955,38917],{"class":346},[220,38957,359],{"class":264},[220,38959,38960,38962,38964],{"class":222,"line":389},[220,38961,2550],{"class":264},[220,38963,2553],{"class":346},[220,38965,386],{"class":264},[220,38967,38968,38970,38972],{"class":222,"line":399},[220,38969,2567],{"class":264},[220,38971,38917],{"class":346},[220,38973,359],{"class":264},[220,38975,38976,38978,38980],{"class":222,"line":644},[220,38977,402],{"class":264},[220,38979,347],{"class":346},[220,38981,359],{"class":264},[212,38983,38984],{"className":409,"code":38939,"language":411,"meta":178,"style":178},[99,38985,38986,38994,39002,39010,39018],{"__ignoreMap":178},[220,38987,38988,38990,38992],{"class":222,"line":223},[220,38989,343],{"class":264},[220,38991,347],{"class":420},[220,38993,359],{"class":264},[220,38995,38996,38998,39000],{"class":222,"line":179},[220,38997,364],{"class":264},[220,38999,38917],{"class":420},[220,39001,359],{"class":264},[220,39003,39004,39006,39008],{"class":222,"line":389},[220,39005,2550],{"class":264},[220,39007,2553],{"class":420},[220,39009,386],{"class":264},[220,39011,39012,39014,39016],{"class":222,"line":399},[220,39013,2567],{"class":264},[220,39015,38917],{"class":420},[220,39017,359],{"class":264},[220,39019,39020,39022,39024],{"class":222,"line":644},[220,39021,402],{"class":264},[220,39023,347],{"class":420},[220,39025,359],{"class":264},[212,39027,39028],{"className":2844,"code":38939,"language":2846,"meta":178,"style":178},[99,39029,39030,39038,39046,39054,39062],{"__ignoreMap":178},[220,39031,39032,39034,39036],{"class":222,"line":223},[220,39033,343],{"class":264},[220,39035,347],{"class":420},[220,39037,359],{"class":264},[220,39039,39040,39042,39044],{"class":222,"line":179},[220,39041,364],{"class":264},[220,39043,38917],{"class":420},[220,39045,359],{"class":264},[220,39047,39048,39050,39052],{"class":222,"line":389},[220,39049,2550],{"class":264},[220,39051,2553],{"class":420},[220,39053,386],{"class":264},[220,39055,39056,39058,39060],{"class":222,"line":399},[220,39057,2567],{"class":264},[220,39059,38917],{"class":420},[220,39061,359],{"class":264},[220,39063,39064,39066,39068],{"class":222,"line":644},[220,39065,402],{"class":264},[220,39067,347],{"class":420},[220,39069,359],{"class":264},[212,39071,39072],{"className":468,"code":38939,"language":469,"meta":178,"style":178},[99,39073,39074,39082,39090,39098,39106],{"__ignoreMap":178},[220,39075,39076,39078,39080],{"class":222,"line":223},[220,39077,343],{"class":264},[220,39079,347],{"class":420},[220,39081,359],{"class":264},[220,39083,39084,39086,39088],{"class":222,"line":179},[220,39085,364],{"class":264},[220,39087,38917],{"class":420},[220,39089,359],{"class":264},[220,39091,39092,39094,39096],{"class":222,"line":389},[220,39093,2550],{"class":264},[220,39095,2553],{"class":420},[220,39097,386],{"class":264},[220,39099,39100,39102,39104],{"class":222,"line":399},[220,39101,2567],{"class":264},[220,39103,38917],{"class":420},[220,39105,359],{"class":264},[220,39107,39108,39110,39112],{"class":222,"line":644},[220,39109,402],{"class":264},[220,39111,347],{"class":420},[220,39113,359],{"class":264},[212,39115,39117],{"className":251,"code":39116,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaticAberration', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,39118,39119,39129,39133,39147,39151,39160,39168,39172,39176],{"__ignoreMap":178},[220,39120,39121,39123,39125,39127],{"class":222,"line":223},[220,39122,261],{"class":260},[220,39124,11512],{"class":264},[220,39126,268],{"class":260},[220,39128,4007],{"class":230},[220,39130,39131],{"class":222,"line":179},[220,39132,647],{"emptyLinePlaceholder":194},[220,39134,39135,39137,39139,39141,39143,39145],{"class":222,"line":389},[220,39136,1735],{"class":260},[220,39138,1738],{"class":420},[220,39140,1741],{"class":260},[220,39142,1744],{"class":260},[220,39144,1747],{"class":226},[220,39146,1750],{"class":264},[220,39148,39149],{"class":222,"line":399},[220,39150,1765],{"class":264},[220,39152,39153,39155,39158],{"class":222,"line":644},[220,39154,1770],{"class":264},[220,39156,39157],{"class":230},"'ChromaticAberration'",[220,39159,7009],{"class":264},[220,39161,39162,39164,39166],{"class":222,"line":650},[220,39163,7014],{"class":264},[220,39165,3206],{"class":230},[220,39167,2465],{"class":264},[220,39169,39170],{"class":222,"line":656},[220,39171,7031],{"class":264},[220,39173,39174],{"class":222,"line":673},[220,39175,1787],{"class":264},[220,39177,39178],{"class":222,"line":682},[220,39179,1792],{"class":264},[1504,39181,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39183},[39184,39185],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchromaticaberration",{"title":38917,"description":38925},"docs\u002Fcomponents\u002FChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":39192,"title":39193,"body":39194,"category":36569,"componentType":25877,"description":39201,"extension":191,"meta":39386,"navigation":194,"path":39387,"requiresChild":32530,"seo":39388,"stem":39389,"__hash__":39390},"components\u002Fdocs\u002Fcomponents\u002FChrome.md","Chrome",{"type":8,"value":39195,"toc":39382},[39196,39199,39202,39204,39206,39209,39211,39380],[11,39197,39193],{"id":39198},"chrome",[15,39200,39201],{},"Studio-lit mirror chrome — a precision-machined shape with a controllable polished bevel, softly convex faces and a photographic studio reflected in them: one huge frontal softbox, black flags, and thin warm\u002Fcool strip lights that fringe amber and ice-blue exactly where the reflections break",[31911,39203],{"component":39193},[23,39205,31915],{"id":26533},[31917,39207],{":props":39208},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the chrome shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the chrome shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the chrome shape in degrees\"},{\"name\":\"tint\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Metal tint multiplied into the reflection — white for silver chrome, warm ivory for gold, dusky rose for copper\"},{\"name\":\"warmColor\",\"type\":\"string\",\"default\":\"#ffa94d\",\"description\":\"Color of the warm strip light hugging the studio horizon — the amber band that fringes the reflections\"},{\"name\":\"coolColor\",\"type\":\"string\",\"default\":\"#82a7e6\",\"description\":\"Color of the cool wash below the horizon — the steel-blue zone the darker reflections fall into\"},{\"name\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.028\",\"description\":\"Width of the polished edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0.55\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"name\":\"curvature\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Convex doming of the faces — sweeps the big soft studio gradients across otherwise flat metal\"},{\"name\":\"waviness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Pressed-metal imperfection — gently bends the face reflections and wobbles the bevel light lines so the surface reads as real\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Exposure of the reflected studio — the overall brilliance of the chrome\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the softbox, flags and strips fall\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Softness of the studio edges — 0 = razor polished reflections, 1 = satin diffusion\"},{\"name\":\"spectral\",\"type\":\"number\",\"default\":\"0.9\",\"description\":\"The coloured accent lights: an amber glow hugging the softbox edge and an ice-blue wash below it. 0 = a fully achromatic black-and-white studio.\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Prismatic RGB splitting concentrated on the fast-curving bevel — thin rainbow micro-fringes along the edge highlights, distinct from the broad accent lights\"},{\"name\":\"shadows\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Depth of the dark studio reflections — how hard the black side flags and floor crush toward graphite. 0 lifts them to a soft gray studio.\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the studio orbit — the whole lighting environment slowly wanders around the piece, sliding the reflections across faces and edges. 0 freezes it.\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"roundedRectSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,39210,31923],{"id":31922},[246,39212,39213,39242,39270,39298,39326],{":tabs":1557},[212,39214,39216],{"className":334,"code":39215,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChrome \u002F>\n\u003C\u002FShader>\n",[99,39217,39218,39226,39234],{"__ignoreMap":178},[220,39219,39220,39222,39224],{"class":222,"line":223},[220,39221,343],{"class":264},[220,39223,347],{"class":346},[220,39225,359],{"class":264},[220,39227,39228,39230,39232],{"class":222,"line":179},[220,39229,364],{"class":264},[220,39231,39193],{"class":346},[220,39233,386],{"class":264},[220,39235,39236,39238,39240],{"class":222,"line":389},[220,39237,402],{"class":264},[220,39239,347],{"class":346},[220,39241,359],{"class":264},[212,39243,39244],{"className":409,"code":39215,"language":411,"meta":178,"style":178},[99,39245,39246,39254,39262],{"__ignoreMap":178},[220,39247,39248,39250,39252],{"class":222,"line":223},[220,39249,343],{"class":264},[220,39251,347],{"class":420},[220,39253,359],{"class":264},[220,39255,39256,39258,39260],{"class":222,"line":179},[220,39257,364],{"class":264},[220,39259,39193],{"class":420},[220,39261,386],{"class":264},[220,39263,39264,39266,39268],{"class":222,"line":389},[220,39265,402],{"class":264},[220,39267,347],{"class":420},[220,39269,359],{"class":264},[212,39271,39272],{"className":2844,"code":39215,"language":2846,"meta":178,"style":178},[99,39273,39274,39282,39290],{"__ignoreMap":178},[220,39275,39276,39278,39280],{"class":222,"line":223},[220,39277,343],{"class":264},[220,39279,347],{"class":420},[220,39281,359],{"class":264},[220,39283,39284,39286,39288],{"class":222,"line":179},[220,39285,364],{"class":264},[220,39287,39193],{"class":420},[220,39289,386],{"class":264},[220,39291,39292,39294,39296],{"class":222,"line":389},[220,39293,402],{"class":264},[220,39295,347],{"class":420},[220,39297,359],{"class":264},[212,39299,39300],{"className":468,"code":39215,"language":469,"meta":178,"style":178},[99,39301,39302,39310,39318],{"__ignoreMap":178},[220,39303,39304,39306,39308],{"class":222,"line":223},[220,39305,343],{"class":264},[220,39307,347],{"class":420},[220,39309,359],{"class":264},[220,39311,39312,39314,39316],{"class":222,"line":179},[220,39313,364],{"class":264},[220,39315,39193],{"class":420},[220,39317,386],{"class":264},[220,39319,39320,39322,39324],{"class":222,"line":389},[220,39321,402],{"class":264},[220,39323,347],{"class":420},[220,39325,359],{"class":264},[212,39327,39329],{"className":251,"code":39328,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chrome', props: {} }\n ]\n})\n",[99,39330,39331,39341,39345,39359,39363,39372,39376],{"__ignoreMap":178},[220,39332,39333,39335,39337,39339],{"class":222,"line":223},[220,39334,261],{"class":260},[220,39336,11512],{"class":264},[220,39338,268],{"class":260},[220,39340,4007],{"class":230},[220,39342,39343],{"class":222,"line":179},[220,39344,647],{"emptyLinePlaceholder":194},[220,39346,39347,39349,39351,39353,39355,39357],{"class":222,"line":389},[220,39348,1735],{"class":260},[220,39350,1738],{"class":420},[220,39352,1741],{"class":260},[220,39354,1744],{"class":260},[220,39356,1747],{"class":226},[220,39358,1750],{"class":264},[220,39360,39361],{"class":222,"line":399},[220,39362,1765],{"class":264},[220,39364,39365,39367,39370],{"class":222,"line":644},[220,39366,1770],{"class":264},[220,39368,39369],{"class":230},"'Chrome'",[220,39371,2465],{"class":264},[220,39373,39374],{"class":222,"line":650},[220,39375,1787],{"class":264},[220,39377,39378],{"class":222,"line":656},[220,39379,1792],{"class":264},[1504,39381,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39383},[39384,39385],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchrome",{"title":39193,"description":39201},"docs\u002Fcomponents\u002FChrome","8vUmT1wbpASZaXB0iLj8I5lS9IHpVk7Gj43OXlxgeRI",{"id":39392,"title":2553,"body":39393,"category":15908,"componentType":25877,"description":39400,"extension":191,"meta":39675,"navigation":194,"path":39676,"requiresChild":32530,"seo":39677,"stem":39678,"__hash__":39679},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":39394,"toc":39671},[39395,39398,39401,39403,39405,39408,39410,39669],[11,39396,2553],{"id":39397},"circle",[15,39399,39400],{},"Generate a circle with adjustable size and softness",[31911,39402],{"component":2553},[23,39404,31915],{"id":26533},[31917,39406],{":props":39407},"[{\"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,39409,31923],{"id":31922},[246,39411,39412,39459,39510,39558,39608],{":tabs":1557},[212,39413,39415],{"className":334,"code":39414,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,39416,39417,39425,39431,39439,39447,39451],{"__ignoreMap":178},[220,39418,39419,39421,39423],{"class":222,"line":223},[220,39420,343],{"class":264},[220,39422,347],{"class":346},[220,39424,359],{"class":264},[220,39426,39427,39429],{"class":222,"line":179},[220,39428,364],{"class":264},[220,39430,9630],{"class":346},[220,39432,39433,39435,39437],{"class":222,"line":389},[220,39434,9635],{"class":226},[220,39436,353],{"class":264},[220,39438,9591],{"class":230},[220,39440,39441,39443,39445],{"class":222,"line":399},[220,39442,17405],{"class":226},[220,39444,353],{"class":264},[220,39446,36625],{"class":230},[220,39448,39449],{"class":222,"line":644},[220,39450,1234],{"class":264},[220,39452,39453,39455,39457],{"class":222,"line":650},[220,39454,402],{"class":264},[220,39456,347],{"class":346},[220,39458,359],{"class":264},[212,39460,39462],{"className":409,"code":39461,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,39463,39464,39472,39478,39486,39498,39502],{"__ignoreMap":178},[220,39465,39466,39468,39470],{"class":222,"line":223},[220,39467,343],{"class":264},[220,39469,347],{"class":420},[220,39471,359],{"class":264},[220,39473,39474,39476],{"class":222,"line":179},[220,39475,364],{"class":264},[220,39477,9630],{"class":420},[220,39479,39480,39482,39484],{"class":222,"line":389},[220,39481,9635],{"class":226},[220,39483,353],{"class":260},[220,39485,9591],{"class":230},[220,39487,39488,39490,39492,39494,39496],{"class":222,"line":399},[220,39489,9645],{"class":226},[220,39491,353],{"class":260},[220,39493,743],{"class":264},[220,39495,8677],{"class":420},[220,39497,749],{"class":264},[220,39499,39500],{"class":222,"line":644},[220,39501,1234],{"class":264},[220,39503,39504,39506,39508],{"class":222,"line":650},[220,39505,402],{"class":264},[220,39507,347],{"class":420},[220,39509,359],{"class":264},[212,39511,39512],{"className":2844,"code":39461,"language":2846,"meta":178,"style":178},[99,39513,39514,39522,39528,39536,39546,39550],{"__ignoreMap":178},[220,39515,39516,39518,39520],{"class":222,"line":223},[220,39517,343],{"class":264},[220,39519,347],{"class":420},[220,39521,359],{"class":264},[220,39523,39524,39526],{"class":222,"line":179},[220,39525,364],{"class":264},[220,39527,9630],{"class":420},[220,39529,39530,39532,39534],{"class":222,"line":389},[220,39531,9635],{"class":226},[220,39533,353],{"class":264},[220,39535,9591],{"class":230},[220,39537,39538,39540,39542,39544],{"class":222,"line":399},[220,39539,9645],{"class":226},[220,39541,29871],{"class":264},[220,39543,8677],{"class":420},[220,39545,749],{"class":264},[220,39547,39548],{"class":222,"line":644},[220,39549,1234],{"class":264},[220,39551,39552,39554,39556],{"class":222,"line":650},[220,39553,402],{"class":264},[220,39555,347],{"class":420},[220,39557,359],{"class":264},[212,39559,39560],{"className":468,"code":39461,"language":469,"meta":178,"style":178},[99,39561,39562,39570,39576,39584,39596,39600],{"__ignoreMap":178},[220,39563,39564,39566,39568],{"class":222,"line":223},[220,39565,343],{"class":264},[220,39567,347],{"class":420},[220,39569,359],{"class":264},[220,39571,39572,39574],{"class":222,"line":179},[220,39573,364],{"class":264},[220,39575,9630],{"class":420},[220,39577,39578,39580,39582],{"class":222,"line":389},[220,39579,9635],{"class":226},[220,39581,353],{"class":260},[220,39583,9591],{"class":230},[220,39585,39586,39588,39590,39592,39594],{"class":222,"line":399},[220,39587,9645],{"class":226},[220,39589,353],{"class":260},[220,39591,743],{"class":264},[220,39593,8677],{"class":420},[220,39595,749],{"class":264},[220,39597,39598],{"class":222,"line":644},[220,39599,1234],{"class":264},[220,39601,39602,39604,39606],{"class":222,"line":650},[220,39603,402],{"class":264},[220,39605,347],{"class":420},[220,39607,359],{"class":264},[212,39609,39611],{"className":251,"code":39610,"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,39612,39613,39623,39627,39641,39645,39661,39665],{"__ignoreMap":178},[220,39614,39615,39617,39619,39621],{"class":222,"line":223},[220,39616,261],{"class":260},[220,39618,11512],{"class":264},[220,39620,268],{"class":260},[220,39622,4007],{"class":230},[220,39624,39625],{"class":222,"line":179},[220,39626,647],{"emptyLinePlaceholder":194},[220,39628,39629,39631,39633,39635,39637,39639],{"class":222,"line":389},[220,39630,1735],{"class":260},[220,39632,1738],{"class":420},[220,39634,1741],{"class":260},[220,39636,1744],{"class":260},[220,39638,1747],{"class":226},[220,39640,1750],{"class":264},[220,39642,39643],{"class":222,"line":399},[220,39644,1765],{"class":264},[220,39646,39647,39649,39651,39653,39655,39657,39659],{"class":222,"line":644},[220,39648,1770],{"class":264},[220,39650,3206],{"class":230},[220,39652,1776],{"class":264},[220,39654,10169],{"class":230},[220,39656,6566],{"class":264},[220,39658,8677],{"class":420},[220,39660,1782],{"class":264},[220,39662,39663],{"class":222,"line":650},[220,39664,1787],{"class":264},[220,39666,39667],{"class":222,"line":656},[220,39668,1792],{"class":264},[1504,39670,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39672},[39673,39674],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":39400},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":39681,"title":39682,"body":39683,"category":33063,"componentType":25877,"description":39690,"extension":191,"meta":39875,"navigation":194,"path":39876,"requiresChild":32530,"seo":39877,"stem":39878,"__hash__":39879},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":39684,"toc":39871},[39685,39688,39691,39693,39695,39698,39700,39869],[11,39686,39682],{"id":39687},"colorwheel",[15,39689,39690],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[31911,39692],{"component":39682},[23,39694,31915],{"id":26533},[31917,39696],{":props":39697},"[{\"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,39699,31923],{"id":31922},[246,39701,39702,39731,39759,39787,39815],{":tabs":1557},[212,39703,39705],{"className":334,"code":39704,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,39706,39707,39715,39723],{"__ignoreMap":178},[220,39708,39709,39711,39713],{"class":222,"line":223},[220,39710,343],{"class":264},[220,39712,347],{"class":346},[220,39714,359],{"class":264},[220,39716,39717,39719,39721],{"class":222,"line":179},[220,39718,364],{"class":264},[220,39720,39682],{"class":346},[220,39722,386],{"class":264},[220,39724,39725,39727,39729],{"class":222,"line":389},[220,39726,402],{"class":264},[220,39728,347],{"class":346},[220,39730,359],{"class":264},[212,39732,39733],{"className":409,"code":39704,"language":411,"meta":178,"style":178},[99,39734,39735,39743,39751],{"__ignoreMap":178},[220,39736,39737,39739,39741],{"class":222,"line":223},[220,39738,343],{"class":264},[220,39740,347],{"class":420},[220,39742,359],{"class":264},[220,39744,39745,39747,39749],{"class":222,"line":179},[220,39746,364],{"class":264},[220,39748,39682],{"class":420},[220,39750,386],{"class":264},[220,39752,39753,39755,39757],{"class":222,"line":389},[220,39754,402],{"class":264},[220,39756,347],{"class":420},[220,39758,359],{"class":264},[212,39760,39761],{"className":2844,"code":39704,"language":2846,"meta":178,"style":178},[99,39762,39763,39771,39779],{"__ignoreMap":178},[220,39764,39765,39767,39769],{"class":222,"line":223},[220,39766,343],{"class":264},[220,39768,347],{"class":420},[220,39770,359],{"class":264},[220,39772,39773,39775,39777],{"class":222,"line":179},[220,39774,364],{"class":264},[220,39776,39682],{"class":420},[220,39778,386],{"class":264},[220,39780,39781,39783,39785],{"class":222,"line":389},[220,39782,402],{"class":264},[220,39784,347],{"class":420},[220,39786,359],{"class":264},[212,39788,39789],{"className":468,"code":39704,"language":469,"meta":178,"style":178},[99,39790,39791,39799,39807],{"__ignoreMap":178},[220,39792,39793,39795,39797],{"class":222,"line":223},[220,39794,343],{"class":264},[220,39796,347],{"class":420},[220,39798,359],{"class":264},[220,39800,39801,39803,39805],{"class":222,"line":179},[220,39802,364],{"class":264},[220,39804,39682],{"class":420},[220,39806,386],{"class":264},[220,39808,39809,39811,39813],{"class":222,"line":389},[220,39810,402],{"class":264},[220,39812,347],{"class":420},[220,39814,359],{"class":264},[212,39816,39818],{"className":251,"code":39817,"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,39819,39820,39830,39834,39848,39852,39861,39865],{"__ignoreMap":178},[220,39821,39822,39824,39826,39828],{"class":222,"line":223},[220,39823,261],{"class":260},[220,39825,11512],{"class":264},[220,39827,268],{"class":260},[220,39829,4007],{"class":230},[220,39831,39832],{"class":222,"line":179},[220,39833,647],{"emptyLinePlaceholder":194},[220,39835,39836,39838,39840,39842,39844,39846],{"class":222,"line":389},[220,39837,1735],{"class":260},[220,39839,1738],{"class":420},[220,39841,1741],{"class":260},[220,39843,1744],{"class":260},[220,39845,1747],{"class":226},[220,39847,1750],{"class":264},[220,39849,39850],{"class":222,"line":399},[220,39851,1765],{"class":264},[220,39853,39854,39856,39859],{"class":222,"line":644},[220,39855,1770],{"class":264},[220,39857,39858],{"class":230},"'ColorWheel'",[220,39860,2465],{"class":264},[220,39862,39863],{"class":222,"line":650},[220,39864,1787],{"class":264},[220,39866,39867],{"class":222,"line":656},[220,39868,1792],{"class":264},[1504,39870,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39872},[39873,39874],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":39682,"description":39690},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":39881,"title":39882,"body":39883,"category":32806,"componentType":25883,"description":39890,"extension":191,"meta":40151,"navigation":194,"path":40152,"requiresChild":194,"seo":40153,"stem":40154,"__hash__":40155},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":39884,"toc":40147},[39885,39888,39891,39893,39895,39898,39900,40145],[11,39886,39882],{"id":39887},"compressionartifacts",[15,39889,39890],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[31911,39892],{"component":39882},[23,39894,31915],{"id":26533},[31917,39896],{":props":39897},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,39899,31923],{"id":31922},[246,39901,39902,39947,39991,40035,40079],{":tabs":1557},[212,39903,39905],{"className":334,"code":39904,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,39906,39907,39915,39923,39931,39939],{"__ignoreMap":178},[220,39908,39909,39911,39913],{"class":222,"line":223},[220,39910,343],{"class":264},[220,39912,347],{"class":346},[220,39914,359],{"class":264},[220,39916,39917,39919,39921],{"class":222,"line":179},[220,39918,364],{"class":264},[220,39920,39882],{"class":346},[220,39922,359],{"class":264},[220,39924,39925,39927,39929],{"class":222,"line":389},[220,39926,2550],{"class":264},[220,39928,2553],{"class":346},[220,39930,386],{"class":264},[220,39932,39933,39935,39937],{"class":222,"line":399},[220,39934,2567],{"class":264},[220,39936,39882],{"class":346},[220,39938,359],{"class":264},[220,39940,39941,39943,39945],{"class":222,"line":644},[220,39942,402],{"class":264},[220,39944,347],{"class":346},[220,39946,359],{"class":264},[212,39948,39949],{"className":409,"code":39904,"language":411,"meta":178,"style":178},[99,39950,39951,39959,39967,39975,39983],{"__ignoreMap":178},[220,39952,39953,39955,39957],{"class":222,"line":223},[220,39954,343],{"class":264},[220,39956,347],{"class":420},[220,39958,359],{"class":264},[220,39960,39961,39963,39965],{"class":222,"line":179},[220,39962,364],{"class":264},[220,39964,39882],{"class":420},[220,39966,359],{"class":264},[220,39968,39969,39971,39973],{"class":222,"line":389},[220,39970,2550],{"class":264},[220,39972,2553],{"class":420},[220,39974,386],{"class":264},[220,39976,39977,39979,39981],{"class":222,"line":399},[220,39978,2567],{"class":264},[220,39980,39882],{"class":420},[220,39982,359],{"class":264},[220,39984,39985,39987,39989],{"class":222,"line":644},[220,39986,402],{"class":264},[220,39988,347],{"class":420},[220,39990,359],{"class":264},[212,39992,39993],{"className":2844,"code":39904,"language":2846,"meta":178,"style":178},[99,39994,39995,40003,40011,40019,40027],{"__ignoreMap":178},[220,39996,39997,39999,40001],{"class":222,"line":223},[220,39998,343],{"class":264},[220,40000,347],{"class":420},[220,40002,359],{"class":264},[220,40004,40005,40007,40009],{"class":222,"line":179},[220,40006,364],{"class":264},[220,40008,39882],{"class":420},[220,40010,359],{"class":264},[220,40012,40013,40015,40017],{"class":222,"line":389},[220,40014,2550],{"class":264},[220,40016,2553],{"class":420},[220,40018,386],{"class":264},[220,40020,40021,40023,40025],{"class":222,"line":399},[220,40022,2567],{"class":264},[220,40024,39882],{"class":420},[220,40026,359],{"class":264},[220,40028,40029,40031,40033],{"class":222,"line":644},[220,40030,402],{"class":264},[220,40032,347],{"class":420},[220,40034,359],{"class":264},[212,40036,40037],{"className":468,"code":39904,"language":469,"meta":178,"style":178},[99,40038,40039,40047,40055,40063,40071],{"__ignoreMap":178},[220,40040,40041,40043,40045],{"class":222,"line":223},[220,40042,343],{"class":264},[220,40044,347],{"class":420},[220,40046,359],{"class":264},[220,40048,40049,40051,40053],{"class":222,"line":179},[220,40050,364],{"class":264},[220,40052,39882],{"class":420},[220,40054,359],{"class":264},[220,40056,40057,40059,40061],{"class":222,"line":389},[220,40058,2550],{"class":264},[220,40060,2553],{"class":420},[220,40062,386],{"class":264},[220,40064,40065,40067,40069],{"class":222,"line":399},[220,40066,2567],{"class":264},[220,40068,39882],{"class":420},[220,40070,359],{"class":264},[220,40072,40073,40075,40077],{"class":222,"line":644},[220,40074,402],{"class":264},[220,40076,347],{"class":420},[220,40078,359],{"class":264},[212,40080,40082],{"className":251,"code":40081,"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,40083,40084,40094,40098,40112,40116,40125,40133,40137,40141],{"__ignoreMap":178},[220,40085,40086,40088,40090,40092],{"class":222,"line":223},[220,40087,261],{"class":260},[220,40089,11512],{"class":264},[220,40091,268],{"class":260},[220,40093,4007],{"class":230},[220,40095,40096],{"class":222,"line":179},[220,40097,647],{"emptyLinePlaceholder":194},[220,40099,40100,40102,40104,40106,40108,40110],{"class":222,"line":389},[220,40101,1735],{"class":260},[220,40103,1738],{"class":420},[220,40105,1741],{"class":260},[220,40107,1744],{"class":260},[220,40109,1747],{"class":226},[220,40111,1750],{"class":264},[220,40113,40114],{"class":222,"line":399},[220,40115,1765],{"class":264},[220,40117,40118,40120,40123],{"class":222,"line":644},[220,40119,1770],{"class":264},[220,40121,40122],{"class":230},"'CompressionArtifacts'",[220,40124,7009],{"class":264},[220,40126,40127,40129,40131],{"class":222,"line":650},[220,40128,7014],{"class":264},[220,40130,3206],{"class":230},[220,40132,2465],{"class":264},[220,40134,40135],{"class":222,"line":656},[220,40136,7031],{"class":264},[220,40138,40139],{"class":222,"line":673},[220,40140,1787],{"class":264},[220,40142,40143],{"class":222,"line":682},[220,40144,1792],{"class":264},[1504,40146,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40148},[40149,40150],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":39882,"description":39890},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":40157,"title":40158,"body":40159,"category":33396,"componentType":25883,"description":40166,"extension":191,"meta":40483,"navigation":194,"path":40484,"requiresChild":194,"seo":40485,"stem":40486,"__hash__":40487},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":40160,"toc":40479},[40161,40164,40167,40169,40171,40174,40176,40477],[11,40162,40158],{"id":40163},"concentricspin",[15,40165,40166],{},"Concentric rings that each rotate the underlying image by different amounts",[31911,40168],{"component":40158},[23,40170,31915],{"id":26533},[31917,40172],{":props":40173},"[{\"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,40175,31923],{"id":31922},[246,40177,40178,40234,40293,40349,40407],{":tabs":1557},[212,40179,40181],{"className":334,"code":40180,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40182,40183,40191,40198,40206,40210,40218,40226],{"__ignoreMap":178},[220,40184,40185,40187,40189],{"class":222,"line":223},[220,40186,343],{"class":264},[220,40188,347],{"class":346},[220,40190,359],{"class":264},[220,40192,40193,40195],{"class":222,"line":179},[220,40194,364],{"class":264},[220,40196,40197],{"class":346},"ConcentricSpin\n",[220,40199,40200,40202,40204],{"class":222,"line":389},[220,40201,20371],{"class":226},[220,40203,353],{"class":264},[220,40205,31954],{"class":230},[220,40207,40208],{"class":222,"line":399},[220,40209,31959],{"class":264},[220,40211,40212,40214,40216],{"class":222,"line":644},[220,40213,2550],{"class":264},[220,40215,2553],{"class":346},[220,40217,386],{"class":264},[220,40219,40220,40222,40224],{"class":222,"line":650},[220,40221,2567],{"class":264},[220,40223,40158],{"class":346},[220,40225,359],{"class":264},[220,40227,40228,40230,40232],{"class":222,"line":656},[220,40229,402],{"class":264},[220,40231,347],{"class":346},[220,40233,359],{"class":264},[212,40235,40237],{"className":409,"code":40236,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40238,40239,40247,40253,40265,40269,40277,40285],{"__ignoreMap":178},[220,40240,40241,40243,40245],{"class":222,"line":223},[220,40242,343],{"class":264},[220,40244,347],{"class":420},[220,40246,359],{"class":264},[220,40248,40249,40251],{"class":222,"line":179},[220,40250,364],{"class":264},[220,40252,40197],{"class":420},[220,40254,40255,40257,40259,40261,40263],{"class":222,"line":389},[220,40256,20482],{"class":226},[220,40258,353],{"class":260},[220,40260,743],{"class":264},[220,40262,24800],{"class":420},[220,40264,749],{"class":264},[220,40266,40267],{"class":222,"line":399},[220,40268,31959],{"class":264},[220,40270,40271,40273,40275],{"class":222,"line":644},[220,40272,2550],{"class":264},[220,40274,2553],{"class":420},[220,40276,386],{"class":264},[220,40278,40279,40281,40283],{"class":222,"line":650},[220,40280,2567],{"class":264},[220,40282,40158],{"class":420},[220,40284,359],{"class":264},[220,40286,40287,40289,40291],{"class":222,"line":656},[220,40288,402],{"class":264},[220,40290,347],{"class":420},[220,40292,359],{"class":264},[212,40294,40295],{"className":2844,"code":40236,"language":2846,"meta":178,"style":178},[99,40296,40297,40305,40311,40321,40325,40333,40341],{"__ignoreMap":178},[220,40298,40299,40301,40303],{"class":222,"line":223},[220,40300,343],{"class":264},[220,40302,347],{"class":420},[220,40304,359],{"class":264},[220,40306,40307,40309],{"class":222,"line":179},[220,40308,364],{"class":264},[220,40310,40197],{"class":420},[220,40312,40313,40315,40317,40319],{"class":222,"line":389},[220,40314,20482],{"class":226},[220,40316,29871],{"class":264},[220,40318,24800],{"class":420},[220,40320,749],{"class":264},[220,40322,40323],{"class":222,"line":399},[220,40324,31959],{"class":264},[220,40326,40327,40329,40331],{"class":222,"line":644},[220,40328,2550],{"class":264},[220,40330,2553],{"class":420},[220,40332,386],{"class":264},[220,40334,40335,40337,40339],{"class":222,"line":650},[220,40336,2567],{"class":264},[220,40338,40158],{"class":420},[220,40340,359],{"class":264},[220,40342,40343,40345,40347],{"class":222,"line":656},[220,40344,402],{"class":264},[220,40346,347],{"class":420},[220,40348,359],{"class":264},[212,40350,40351],{"className":468,"code":40236,"language":469,"meta":178,"style":178},[99,40352,40353,40361,40367,40379,40383,40391,40399],{"__ignoreMap":178},[220,40354,40355,40357,40359],{"class":222,"line":223},[220,40356,343],{"class":264},[220,40358,347],{"class":420},[220,40360,359],{"class":264},[220,40362,40363,40365],{"class":222,"line":179},[220,40364,364],{"class":264},[220,40366,40197],{"class":420},[220,40368,40369,40371,40373,40375,40377],{"class":222,"line":389},[220,40370,20482],{"class":226},[220,40372,353],{"class":260},[220,40374,743],{"class":264},[220,40376,24800],{"class":420},[220,40378,749],{"class":264},[220,40380,40381],{"class":222,"line":399},[220,40382,31959],{"class":264},[220,40384,40385,40387,40389],{"class":222,"line":644},[220,40386,2550],{"class":264},[220,40388,2553],{"class":420},[220,40390,386],{"class":264},[220,40392,40393,40395,40397],{"class":222,"line":650},[220,40394,2567],{"class":264},[220,40396,40158],{"class":420},[220,40398,359],{"class":264},[220,40400,40401,40403,40405],{"class":222,"line":656},[220,40402,402],{"class":264},[220,40404,347],{"class":420},[220,40406,359],{"class":264},[212,40408,40410],{"className":251,"code":40409,"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,40411,40412,40422,40426,40440,40444,40457,40465,40469,40473],{"__ignoreMap":178},[220,40413,40414,40416,40418,40420],{"class":222,"line":223},[220,40415,261],{"class":260},[220,40417,11512],{"class":264},[220,40419,268],{"class":260},[220,40421,4007],{"class":230},[220,40423,40424],{"class":222,"line":179},[220,40425,647],{"emptyLinePlaceholder":194},[220,40427,40428,40430,40432,40434,40436,40438],{"class":222,"line":389},[220,40429,1735],{"class":260},[220,40431,1738],{"class":420},[220,40433,1741],{"class":260},[220,40435,1744],{"class":260},[220,40437,1747],{"class":226},[220,40439,1750],{"class":264},[220,40441,40442],{"class":222,"line":399},[220,40443,1765],{"class":264},[220,40445,40446,40448,40451,40453,40455],{"class":222,"line":644},[220,40447,1770],{"class":264},[220,40449,40450],{"class":230},"'ConcentricSpin'",[220,40452,32203],{"class":264},[220,40454,24800],{"class":420},[220,40456,7546],{"class":264},[220,40458,40459,40461,40463],{"class":222,"line":650},[220,40460,7014],{"class":264},[220,40462,3206],{"class":230},[220,40464,2465],{"class":264},[220,40466,40467],{"class":222,"line":656},[220,40468,7031],{"class":264},[220,40470,40471],{"class":222,"line":673},[220,40472,1787],{"class":264},[220,40474,40475],{"class":222,"line":682},[220,40476,1792],{"class":264},[1504,40478,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40480},[40481,40482],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":40158,"description":40166},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":40489,"title":40490,"body":40491,"category":33063,"componentType":25877,"description":40498,"extension":191,"meta":40683,"navigation":194,"path":40684,"requiresChild":32530,"seo":40685,"stem":40686,"__hash__":40687},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":40492,"toc":40679},[40493,40496,40499,40501,40503,40506,40508,40677],[11,40494,40490],{"id":40495},"conicgradient",[15,40497,40498],{},"Colors sweep in a full circle around a center point, like a color wheel",[31911,40500],{"component":40490},[23,40502,31915],{"id":26533},[31917,40504],{":props":40505},"[{\"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,40507,31923],{"id":31922},[246,40509,40510,40539,40567,40595,40623],{":tabs":1557},[212,40511,40513],{"className":334,"code":40512,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,40514,40515,40523,40531],{"__ignoreMap":178},[220,40516,40517,40519,40521],{"class":222,"line":223},[220,40518,343],{"class":264},[220,40520,347],{"class":346},[220,40522,359],{"class":264},[220,40524,40525,40527,40529],{"class":222,"line":179},[220,40526,364],{"class":264},[220,40528,40490],{"class":346},[220,40530,386],{"class":264},[220,40532,40533,40535,40537],{"class":222,"line":389},[220,40534,402],{"class":264},[220,40536,347],{"class":346},[220,40538,359],{"class":264},[212,40540,40541],{"className":409,"code":40512,"language":411,"meta":178,"style":178},[99,40542,40543,40551,40559],{"__ignoreMap":178},[220,40544,40545,40547,40549],{"class":222,"line":223},[220,40546,343],{"class":264},[220,40548,347],{"class":420},[220,40550,359],{"class":264},[220,40552,40553,40555,40557],{"class":222,"line":179},[220,40554,364],{"class":264},[220,40556,40490],{"class":420},[220,40558,386],{"class":264},[220,40560,40561,40563,40565],{"class":222,"line":389},[220,40562,402],{"class":264},[220,40564,347],{"class":420},[220,40566,359],{"class":264},[212,40568,40569],{"className":2844,"code":40512,"language":2846,"meta":178,"style":178},[99,40570,40571,40579,40587],{"__ignoreMap":178},[220,40572,40573,40575,40577],{"class":222,"line":223},[220,40574,343],{"class":264},[220,40576,347],{"class":420},[220,40578,359],{"class":264},[220,40580,40581,40583,40585],{"class":222,"line":179},[220,40582,364],{"class":264},[220,40584,40490],{"class":420},[220,40586,386],{"class":264},[220,40588,40589,40591,40593],{"class":222,"line":389},[220,40590,402],{"class":264},[220,40592,347],{"class":420},[220,40594,359],{"class":264},[212,40596,40597],{"className":468,"code":40512,"language":469,"meta":178,"style":178},[99,40598,40599,40607,40615],{"__ignoreMap":178},[220,40600,40601,40603,40605],{"class":222,"line":223},[220,40602,343],{"class":264},[220,40604,347],{"class":420},[220,40606,359],{"class":264},[220,40608,40609,40611,40613],{"class":222,"line":179},[220,40610,364],{"class":264},[220,40612,40490],{"class":420},[220,40614,386],{"class":264},[220,40616,40617,40619,40621],{"class":222,"line":389},[220,40618,402],{"class":264},[220,40620,347],{"class":420},[220,40622,359],{"class":264},[212,40624,40626],{"className":251,"code":40625,"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,40627,40628,40638,40642,40656,40660,40669,40673],{"__ignoreMap":178},[220,40629,40630,40632,40634,40636],{"class":222,"line":223},[220,40631,261],{"class":260},[220,40633,11512],{"class":264},[220,40635,268],{"class":260},[220,40637,4007],{"class":230},[220,40639,40640],{"class":222,"line":179},[220,40641,647],{"emptyLinePlaceholder":194},[220,40643,40644,40646,40648,40650,40652,40654],{"class":222,"line":389},[220,40645,1735],{"class":260},[220,40647,1738],{"class":420},[220,40649,1741],{"class":260},[220,40651,1744],{"class":260},[220,40653,1747],{"class":226},[220,40655,1750],{"class":264},[220,40657,40658],{"class":222,"line":399},[220,40659,1765],{"class":264},[220,40661,40662,40664,40667],{"class":222,"line":644},[220,40663,1770],{"class":264},[220,40665,40666],{"class":230},"'ConicGradient'",[220,40668,2465],{"class":264},[220,40670,40671],{"class":222,"line":650},[220,40672,1787],{"class":264},[220,40674,40675],{"class":222,"line":656},[220,40676,1792],{"class":264},[1504,40678,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40680},[40681,40682],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":40490,"description":40498},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":40689,"title":40690,"body":40691,"category":32806,"componentType":25883,"description":40698,"extension":191,"meta":40959,"navigation":194,"path":40960,"requiresChild":194,"seo":40961,"stem":40962,"__hash__":40963},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":40692,"toc":40955},[40693,40696,40699,40701,40703,40706,40708,40953],[11,40694,40690],{"id":40695},"contourlines",[15,40697,40698],{},"Draw topographical contour lines based on luminance or alpha",[31911,40700],{"component":40690},[23,40702,31915],{"id":26533},[31917,40704],{":props":40705},"[{\"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,40707,31923],{"id":31922},[246,40709,40710,40755,40799,40843,40887],{":tabs":1557},[212,40711,40713],{"className":334,"code":40712,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,40714,40715,40723,40731,40739,40747],{"__ignoreMap":178},[220,40716,40717,40719,40721],{"class":222,"line":223},[220,40718,343],{"class":264},[220,40720,347],{"class":346},[220,40722,359],{"class":264},[220,40724,40725,40727,40729],{"class":222,"line":179},[220,40726,364],{"class":264},[220,40728,40690],{"class":346},[220,40730,359],{"class":264},[220,40732,40733,40735,40737],{"class":222,"line":389},[220,40734,2550],{"class":264},[220,40736,2553],{"class":346},[220,40738,386],{"class":264},[220,40740,40741,40743,40745],{"class":222,"line":399},[220,40742,2567],{"class":264},[220,40744,40690],{"class":346},[220,40746,359],{"class":264},[220,40748,40749,40751,40753],{"class":222,"line":644},[220,40750,402],{"class":264},[220,40752,347],{"class":346},[220,40754,359],{"class":264},[212,40756,40757],{"className":409,"code":40712,"language":411,"meta":178,"style":178},[99,40758,40759,40767,40775,40783,40791],{"__ignoreMap":178},[220,40760,40761,40763,40765],{"class":222,"line":223},[220,40762,343],{"class":264},[220,40764,347],{"class":420},[220,40766,359],{"class":264},[220,40768,40769,40771,40773],{"class":222,"line":179},[220,40770,364],{"class":264},[220,40772,40690],{"class":420},[220,40774,359],{"class":264},[220,40776,40777,40779,40781],{"class":222,"line":389},[220,40778,2550],{"class":264},[220,40780,2553],{"class":420},[220,40782,386],{"class":264},[220,40784,40785,40787,40789],{"class":222,"line":399},[220,40786,2567],{"class":264},[220,40788,40690],{"class":420},[220,40790,359],{"class":264},[220,40792,40793,40795,40797],{"class":222,"line":644},[220,40794,402],{"class":264},[220,40796,347],{"class":420},[220,40798,359],{"class":264},[212,40800,40801],{"className":2844,"code":40712,"language":2846,"meta":178,"style":178},[99,40802,40803,40811,40819,40827,40835],{"__ignoreMap":178},[220,40804,40805,40807,40809],{"class":222,"line":223},[220,40806,343],{"class":264},[220,40808,347],{"class":420},[220,40810,359],{"class":264},[220,40812,40813,40815,40817],{"class":222,"line":179},[220,40814,364],{"class":264},[220,40816,40690],{"class":420},[220,40818,359],{"class":264},[220,40820,40821,40823,40825],{"class":222,"line":389},[220,40822,2550],{"class":264},[220,40824,2553],{"class":420},[220,40826,386],{"class":264},[220,40828,40829,40831,40833],{"class":222,"line":399},[220,40830,2567],{"class":264},[220,40832,40690],{"class":420},[220,40834,359],{"class":264},[220,40836,40837,40839,40841],{"class":222,"line":644},[220,40838,402],{"class":264},[220,40840,347],{"class":420},[220,40842,359],{"class":264},[212,40844,40845],{"className":468,"code":40712,"language":469,"meta":178,"style":178},[99,40846,40847,40855,40863,40871,40879],{"__ignoreMap":178},[220,40848,40849,40851,40853],{"class":222,"line":223},[220,40850,343],{"class":264},[220,40852,347],{"class":420},[220,40854,359],{"class":264},[220,40856,40857,40859,40861],{"class":222,"line":179},[220,40858,364],{"class":264},[220,40860,40690],{"class":420},[220,40862,359],{"class":264},[220,40864,40865,40867,40869],{"class":222,"line":389},[220,40866,2550],{"class":264},[220,40868,2553],{"class":420},[220,40870,386],{"class":264},[220,40872,40873,40875,40877],{"class":222,"line":399},[220,40874,2567],{"class":264},[220,40876,40690],{"class":420},[220,40878,359],{"class":264},[220,40880,40881,40883,40885],{"class":222,"line":644},[220,40882,402],{"class":264},[220,40884,347],{"class":420},[220,40886,359],{"class":264},[212,40888,40890],{"className":251,"code":40889,"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,40891,40892,40902,40906,40920,40924,40933,40941,40945,40949],{"__ignoreMap":178},[220,40893,40894,40896,40898,40900],{"class":222,"line":223},[220,40895,261],{"class":260},[220,40897,11512],{"class":264},[220,40899,268],{"class":260},[220,40901,4007],{"class":230},[220,40903,40904],{"class":222,"line":179},[220,40905,647],{"emptyLinePlaceholder":194},[220,40907,40908,40910,40912,40914,40916,40918],{"class":222,"line":389},[220,40909,1735],{"class":260},[220,40911,1738],{"class":420},[220,40913,1741],{"class":260},[220,40915,1744],{"class":260},[220,40917,1747],{"class":226},[220,40919,1750],{"class":264},[220,40921,40922],{"class":222,"line":399},[220,40923,1765],{"class":264},[220,40925,40926,40928,40931],{"class":222,"line":644},[220,40927,1770],{"class":264},[220,40929,40930],{"class":230},"'ContourLines'",[220,40932,7009],{"class":264},[220,40934,40935,40937,40939],{"class":222,"line":650},[220,40936,7014],{"class":264},[220,40938,3206],{"class":230},[220,40940,2465],{"class":264},[220,40942,40943],{"class":222,"line":656},[220,40944,7031],{"class":264},[220,40946,40947],{"class":222,"line":673},[220,40948,1787],{"class":264},[220,40950,40951],{"class":222,"line":682},[220,40952,1792],{"class":264},[1504,40954,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40956},[40957,40958],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":40690,"description":40698},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":40965,"title":40966,"body":40967,"category":33396,"componentType":25883,"description":40974,"extension":191,"meta":41235,"navigation":194,"path":41236,"requiresChild":194,"seo":41237,"stem":41238,"__hash__":41239},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":40968,"toc":41231},[40969,40972,40975,40977,40979,40982,40984,41229],[11,40970,40966],{"id":40971},"cornerpin",[15,40973,40974],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[31911,40976],{"component":40966},[23,40978,31915],{"id":26533},[31917,40980],{":props":40981},"[{\"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,40983,31923],{"id":31922},[246,40985,40986,41031,41075,41119,41163],{":tabs":1557},[212,40987,40989],{"className":334,"code":40988,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,40990,40991,40999,41007,41015,41023],{"__ignoreMap":178},[220,40992,40993,40995,40997],{"class":222,"line":223},[220,40994,343],{"class":264},[220,40996,347],{"class":346},[220,40998,359],{"class":264},[220,41000,41001,41003,41005],{"class":222,"line":179},[220,41002,364],{"class":264},[220,41004,40966],{"class":346},[220,41006,359],{"class":264},[220,41008,41009,41011,41013],{"class":222,"line":389},[220,41010,2550],{"class":264},[220,41012,2553],{"class":346},[220,41014,386],{"class":264},[220,41016,41017,41019,41021],{"class":222,"line":399},[220,41018,2567],{"class":264},[220,41020,40966],{"class":346},[220,41022,359],{"class":264},[220,41024,41025,41027,41029],{"class":222,"line":644},[220,41026,402],{"class":264},[220,41028,347],{"class":346},[220,41030,359],{"class":264},[212,41032,41033],{"className":409,"code":40988,"language":411,"meta":178,"style":178},[99,41034,41035,41043,41051,41059,41067],{"__ignoreMap":178},[220,41036,41037,41039,41041],{"class":222,"line":223},[220,41038,343],{"class":264},[220,41040,347],{"class":420},[220,41042,359],{"class":264},[220,41044,41045,41047,41049],{"class":222,"line":179},[220,41046,364],{"class":264},[220,41048,40966],{"class":420},[220,41050,359],{"class":264},[220,41052,41053,41055,41057],{"class":222,"line":389},[220,41054,2550],{"class":264},[220,41056,2553],{"class":420},[220,41058,386],{"class":264},[220,41060,41061,41063,41065],{"class":222,"line":399},[220,41062,2567],{"class":264},[220,41064,40966],{"class":420},[220,41066,359],{"class":264},[220,41068,41069,41071,41073],{"class":222,"line":644},[220,41070,402],{"class":264},[220,41072,347],{"class":420},[220,41074,359],{"class":264},[212,41076,41077],{"className":2844,"code":40988,"language":2846,"meta":178,"style":178},[99,41078,41079,41087,41095,41103,41111],{"__ignoreMap":178},[220,41080,41081,41083,41085],{"class":222,"line":223},[220,41082,343],{"class":264},[220,41084,347],{"class":420},[220,41086,359],{"class":264},[220,41088,41089,41091,41093],{"class":222,"line":179},[220,41090,364],{"class":264},[220,41092,40966],{"class":420},[220,41094,359],{"class":264},[220,41096,41097,41099,41101],{"class":222,"line":389},[220,41098,2550],{"class":264},[220,41100,2553],{"class":420},[220,41102,386],{"class":264},[220,41104,41105,41107,41109],{"class":222,"line":399},[220,41106,2567],{"class":264},[220,41108,40966],{"class":420},[220,41110,359],{"class":264},[220,41112,41113,41115,41117],{"class":222,"line":644},[220,41114,402],{"class":264},[220,41116,347],{"class":420},[220,41118,359],{"class":264},[212,41120,41121],{"className":468,"code":40988,"language":469,"meta":178,"style":178},[99,41122,41123,41131,41139,41147,41155],{"__ignoreMap":178},[220,41124,41125,41127,41129],{"class":222,"line":223},[220,41126,343],{"class":264},[220,41128,347],{"class":420},[220,41130,359],{"class":264},[220,41132,41133,41135,41137],{"class":222,"line":179},[220,41134,364],{"class":264},[220,41136,40966],{"class":420},[220,41138,359],{"class":264},[220,41140,41141,41143,41145],{"class":222,"line":389},[220,41142,2550],{"class":264},[220,41144,2553],{"class":420},[220,41146,386],{"class":264},[220,41148,41149,41151,41153],{"class":222,"line":399},[220,41150,2567],{"class":264},[220,41152,40966],{"class":420},[220,41154,359],{"class":264},[220,41156,41157,41159,41161],{"class":222,"line":644},[220,41158,402],{"class":264},[220,41160,347],{"class":420},[220,41162,359],{"class":264},[212,41164,41166],{"className":251,"code":41165,"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,41167,41168,41178,41182,41196,41200,41209,41217,41221,41225],{"__ignoreMap":178},[220,41169,41170,41172,41174,41176],{"class":222,"line":223},[220,41171,261],{"class":260},[220,41173,11512],{"class":264},[220,41175,268],{"class":260},[220,41177,4007],{"class":230},[220,41179,41180],{"class":222,"line":179},[220,41181,647],{"emptyLinePlaceholder":194},[220,41183,41184,41186,41188,41190,41192,41194],{"class":222,"line":389},[220,41185,1735],{"class":260},[220,41187,1738],{"class":420},[220,41189,1741],{"class":260},[220,41191,1744],{"class":260},[220,41193,1747],{"class":226},[220,41195,1750],{"class":264},[220,41197,41198],{"class":222,"line":399},[220,41199,1765],{"class":264},[220,41201,41202,41204,41207],{"class":222,"line":644},[220,41203,1770],{"class":264},[220,41205,41206],{"class":230},"'CornerPin'",[220,41208,7009],{"class":264},[220,41210,41211,41213,41215],{"class":222,"line":650},[220,41212,7014],{"class":264},[220,41214,3206],{"class":230},[220,41216,2465],{"class":264},[220,41218,41219],{"class":222,"line":656},[220,41220,7031],{"class":264},[220,41222,41223],{"class":222,"line":673},[220,41224,1787],{"class":264},[220,41226,41227],{"class":222,"line":682},[220,41228,1792],{"class":264},[1504,41230,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":41232},[41233,41234],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":40966,"description":40974},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":41241,"title":41242,"body":41243,"category":15908,"componentType":25877,"description":41250,"extension":191,"meta":41528,"navigation":194,"path":41529,"requiresChild":32530,"seo":41530,"stem":41531,"__hash__":41532},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":41244,"toc":41524},[41245,41248,41251,41253,41255,41258,41260,41522],[11,41246,41242],{"id":41247},"crescent",[15,41249,41250],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[31911,41252],{"component":41242},[23,41254,31915],{"id":26533},[31917,41256],{":props":41257},"[{\"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,41259,31923],{"id":31922},[246,41261,41262,41311,41362,41410,41460],{":tabs":1557},[212,41263,41265],{"className":334,"code":41264,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,41266,41267,41275,41282,41290,41299,41303],{"__ignoreMap":178},[220,41268,41269,41271,41273],{"class":222,"line":223},[220,41270,343],{"class":264},[220,41272,347],{"class":346},[220,41274,359],{"class":264},[220,41276,41277,41279],{"class":222,"line":179},[220,41278,364],{"class":264},[220,41280,41281],{"class":346},"Crescent\n",[220,41283,41284,41286,41288],{"class":222,"line":389},[220,41285,9635],{"class":226},[220,41287,353],{"class":264},[220,41289,9591],{"class":230},[220,41291,41292,41294,41296],{"class":222,"line":399},[220,41293,17405],{"class":226},[220,41295,353],{"class":264},[220,41297,41298],{"class":230},"\"0.3\"\n",[220,41300,41301],{"class":222,"line":644},[220,41302,1234],{"class":264},[220,41304,41305,41307,41309],{"class":222,"line":650},[220,41306,402],{"class":264},[220,41308,347],{"class":346},[220,41310,359],{"class":264},[212,41312,41314],{"className":409,"code":41313,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,41315,41316,41324,41330,41338,41350,41354],{"__ignoreMap":178},[220,41317,41318,41320,41322],{"class":222,"line":223},[220,41319,343],{"class":264},[220,41321,347],{"class":420},[220,41323,359],{"class":264},[220,41325,41326,41328],{"class":222,"line":179},[220,41327,364],{"class":264},[220,41329,41281],{"class":420},[220,41331,41332,41334,41336],{"class":222,"line":389},[220,41333,9635],{"class":226},[220,41335,353],{"class":260},[220,41337,9591],{"class":230},[220,41339,41340,41342,41344,41346,41348],{"class":222,"line":399},[220,41341,9645],{"class":226},[220,41343,353],{"class":260},[220,41345,743],{"class":264},[220,41347,22004],{"class":420},[220,41349,749],{"class":264},[220,41351,41352],{"class":222,"line":644},[220,41353,1234],{"class":264},[220,41355,41356,41358,41360],{"class":222,"line":650},[220,41357,402],{"class":264},[220,41359,347],{"class":420},[220,41361,359],{"class":264},[212,41363,41364],{"className":2844,"code":41313,"language":2846,"meta":178,"style":178},[99,41365,41366,41374,41380,41388,41398,41402],{"__ignoreMap":178},[220,41367,41368,41370,41372],{"class":222,"line":223},[220,41369,343],{"class":264},[220,41371,347],{"class":420},[220,41373,359],{"class":264},[220,41375,41376,41378],{"class":222,"line":179},[220,41377,364],{"class":264},[220,41379,41281],{"class":420},[220,41381,41382,41384,41386],{"class":222,"line":389},[220,41383,9635],{"class":226},[220,41385,353],{"class":264},[220,41387,9591],{"class":230},[220,41389,41390,41392,41394,41396],{"class":222,"line":399},[220,41391,9645],{"class":226},[220,41393,29871],{"class":264},[220,41395,22004],{"class":420},[220,41397,749],{"class":264},[220,41399,41400],{"class":222,"line":644},[220,41401,1234],{"class":264},[220,41403,41404,41406,41408],{"class":222,"line":650},[220,41405,402],{"class":264},[220,41407,347],{"class":420},[220,41409,359],{"class":264},[212,41411,41412],{"className":468,"code":41313,"language":469,"meta":178,"style":178},[99,41413,41414,41422,41428,41436,41448,41452],{"__ignoreMap":178},[220,41415,41416,41418,41420],{"class":222,"line":223},[220,41417,343],{"class":264},[220,41419,347],{"class":420},[220,41421,359],{"class":264},[220,41423,41424,41426],{"class":222,"line":179},[220,41425,364],{"class":264},[220,41427,41281],{"class":420},[220,41429,41430,41432,41434],{"class":222,"line":389},[220,41431,9635],{"class":226},[220,41433,353],{"class":260},[220,41435,9591],{"class":230},[220,41437,41438,41440,41442,41444,41446],{"class":222,"line":399},[220,41439,9645],{"class":226},[220,41441,353],{"class":260},[220,41443,743],{"class":264},[220,41445,22004],{"class":420},[220,41447,749],{"class":264},[220,41449,41450],{"class":222,"line":644},[220,41451,1234],{"class":264},[220,41453,41454,41456,41458],{"class":222,"line":650},[220,41455,402],{"class":264},[220,41457,347],{"class":420},[220,41459,359],{"class":264},[212,41461,41463],{"className":251,"code":41462,"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,41464,41465,41475,41479,41493,41497,41514,41518],{"__ignoreMap":178},[220,41466,41467,41469,41471,41473],{"class":222,"line":223},[220,41468,261],{"class":260},[220,41470,11512],{"class":264},[220,41472,268],{"class":260},[220,41474,4007],{"class":230},[220,41476,41477],{"class":222,"line":179},[220,41478,647],{"emptyLinePlaceholder":194},[220,41480,41481,41483,41485,41487,41489,41491],{"class":222,"line":389},[220,41482,1735],{"class":260},[220,41484,1738],{"class":420},[220,41486,1741],{"class":260},[220,41488,1744],{"class":260},[220,41490,1747],{"class":226},[220,41492,1750],{"class":264},[220,41494,41495],{"class":222,"line":399},[220,41496,1765],{"class":264},[220,41498,41499,41501,41504,41506,41508,41510,41512],{"class":222,"line":644},[220,41500,1770],{"class":264},[220,41502,41503],{"class":230},"'Crescent'",[220,41505,1776],{"class":264},[220,41507,10169],{"class":230},[220,41509,6566],{"class":264},[220,41511,22004],{"class":420},[220,41513,1782],{"class":264},[220,41515,41516],{"class":222,"line":650},[220,41517,1787],{"class":264},[220,41519,41520],{"class":222,"line":656},[220,41521,1792],{"class":264},[1504,41523,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41525},[41526,41527],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":41242,"description":41250},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":41534,"title":41535,"body":41536,"category":15908,"componentType":25877,"description":41543,"extension":191,"meta":41821,"navigation":194,"path":41822,"requiresChild":32530,"seo":41823,"stem":41824,"__hash__":41825},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":41537,"toc":41817},[41538,41541,41544,41546,41548,41551,41553,41815],[11,41539,41535],{"id":41540},"cross",[15,41542,41543],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[31911,41545],{"component":41535},[23,41547,31915],{"id":26533},[31917,41549],{":props":41550},"[{\"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,41552,31923],{"id":31922},[246,41554,41555,41604,41655,41703,41753],{":tabs":1557},[212,41556,41558],{"className":334,"code":41557,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,41559,41560,41568,41575,41583,41592,41596],{"__ignoreMap":178},[220,41561,41562,41564,41566],{"class":222,"line":223},[220,41563,343],{"class":264},[220,41565,347],{"class":346},[220,41567,359],{"class":264},[220,41569,41570,41572],{"class":222,"line":179},[220,41571,364],{"class":264},[220,41573,41574],{"class":346},"Cross\n",[220,41576,41577,41579,41581],{"class":222,"line":389},[220,41578,9635],{"class":226},[220,41580,353],{"class":264},[220,41582,9591],{"class":230},[220,41584,41585,41587,41589],{"class":222,"line":399},[220,41586,17405],{"class":226},[220,41588,353],{"class":264},[220,41590,41591],{"class":230},"\"0.35\"\n",[220,41593,41594],{"class":222,"line":644},[220,41595,1234],{"class":264},[220,41597,41598,41600,41602],{"class":222,"line":650},[220,41599,402],{"class":264},[220,41601,347],{"class":346},[220,41603,359],{"class":264},[212,41605,41607],{"className":409,"code":41606,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,41608,41609,41617,41623,41631,41643,41647],{"__ignoreMap":178},[220,41610,41611,41613,41615],{"class":222,"line":223},[220,41612,343],{"class":264},[220,41614,347],{"class":420},[220,41616,359],{"class":264},[220,41618,41619,41621],{"class":222,"line":179},[220,41620,364],{"class":264},[220,41622,41574],{"class":420},[220,41624,41625,41627,41629],{"class":222,"line":389},[220,41626,9635],{"class":226},[220,41628,353],{"class":260},[220,41630,9591],{"class":230},[220,41632,41633,41635,41637,41639,41641],{"class":222,"line":399},[220,41634,9645],{"class":226},[220,41636,353],{"class":260},[220,41638,743],{"class":264},[220,41640,21148],{"class":420},[220,41642,749],{"class":264},[220,41644,41645],{"class":222,"line":644},[220,41646,1234],{"class":264},[220,41648,41649,41651,41653],{"class":222,"line":650},[220,41650,402],{"class":264},[220,41652,347],{"class":420},[220,41654,359],{"class":264},[212,41656,41657],{"className":2844,"code":41606,"language":2846,"meta":178,"style":178},[99,41658,41659,41667,41673,41681,41691,41695],{"__ignoreMap":178},[220,41660,41661,41663,41665],{"class":222,"line":223},[220,41662,343],{"class":264},[220,41664,347],{"class":420},[220,41666,359],{"class":264},[220,41668,41669,41671],{"class":222,"line":179},[220,41670,364],{"class":264},[220,41672,41574],{"class":420},[220,41674,41675,41677,41679],{"class":222,"line":389},[220,41676,9635],{"class":226},[220,41678,353],{"class":264},[220,41680,9591],{"class":230},[220,41682,41683,41685,41687,41689],{"class":222,"line":399},[220,41684,9645],{"class":226},[220,41686,29871],{"class":264},[220,41688,21148],{"class":420},[220,41690,749],{"class":264},[220,41692,41693],{"class":222,"line":644},[220,41694,1234],{"class":264},[220,41696,41697,41699,41701],{"class":222,"line":650},[220,41698,402],{"class":264},[220,41700,347],{"class":420},[220,41702,359],{"class":264},[212,41704,41705],{"className":468,"code":41606,"language":469,"meta":178,"style":178},[99,41706,41707,41715,41721,41729,41741,41745],{"__ignoreMap":178},[220,41708,41709,41711,41713],{"class":222,"line":223},[220,41710,343],{"class":264},[220,41712,347],{"class":420},[220,41714,359],{"class":264},[220,41716,41717,41719],{"class":222,"line":179},[220,41718,364],{"class":264},[220,41720,41574],{"class":420},[220,41722,41723,41725,41727],{"class":222,"line":389},[220,41724,9635],{"class":226},[220,41726,353],{"class":260},[220,41728,9591],{"class":230},[220,41730,41731,41733,41735,41737,41739],{"class":222,"line":399},[220,41732,9645],{"class":226},[220,41734,353],{"class":260},[220,41736,743],{"class":264},[220,41738,21148],{"class":420},[220,41740,749],{"class":264},[220,41742,41743],{"class":222,"line":644},[220,41744,1234],{"class":264},[220,41746,41747,41749,41751],{"class":222,"line":650},[220,41748,402],{"class":264},[220,41750,347],{"class":420},[220,41752,359],{"class":264},[212,41754,41756],{"className":251,"code":41755,"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,41757,41758,41768,41772,41786,41790,41807,41811],{"__ignoreMap":178},[220,41759,41760,41762,41764,41766],{"class":222,"line":223},[220,41761,261],{"class":260},[220,41763,11512],{"class":264},[220,41765,268],{"class":260},[220,41767,4007],{"class":230},[220,41769,41770],{"class":222,"line":179},[220,41771,647],{"emptyLinePlaceholder":194},[220,41773,41774,41776,41778,41780,41782,41784],{"class":222,"line":389},[220,41775,1735],{"class":260},[220,41777,1738],{"class":420},[220,41779,1741],{"class":260},[220,41781,1744],{"class":260},[220,41783,1747],{"class":226},[220,41785,1750],{"class":264},[220,41787,41788],{"class":222,"line":399},[220,41789,1765],{"class":264},[220,41791,41792,41794,41797,41799,41801,41803,41805],{"class":222,"line":644},[220,41793,1770],{"class":264},[220,41795,41796],{"class":230},"'Cross'",[220,41798,1776],{"class":264},[220,41800,10169],{"class":230},[220,41802,6566],{"class":264},[220,41804,21148],{"class":420},[220,41806,1782],{"class":264},[220,41808,41809],{"class":222,"line":650},[220,41810,1787],{"class":264},[220,41812,41813],{"class":222,"line":656},[220,41814,1792],{"class":264},[1504,41816,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41818},[41819,41820],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":41535,"description":41543},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":41827,"title":23172,"body":41828,"category":36569,"componentType":25883,"description":41835,"extension":191,"meta":42096,"navigation":194,"path":42097,"requiresChild":194,"seo":42098,"stem":42099,"__hash__":42100},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":41829,"toc":42092},[41830,41833,41836,41838,41840,41843,41845,42090],[11,41831,23172],{"id":41832},"crystal",[15,41834,41835],{},"Diamond-like crystal lens with faceted refraction.",[31911,41837],{"component":23172},[23,41839,31915],{"id":26533},[31917,41841],{":props":41842},"[{\"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,41844,31923],{"id":31922},[246,41846,41847,41892,41936,41980,42024],{":tabs":1557},[212,41848,41850],{"className":334,"code":41849,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,41851,41852,41860,41868,41876,41884],{"__ignoreMap":178},[220,41853,41854,41856,41858],{"class":222,"line":223},[220,41855,343],{"class":264},[220,41857,347],{"class":346},[220,41859,359],{"class":264},[220,41861,41862,41864,41866],{"class":222,"line":179},[220,41863,364],{"class":264},[220,41865,23172],{"class":346},[220,41867,359],{"class":264},[220,41869,41870,41872,41874],{"class":222,"line":389},[220,41871,2550],{"class":264},[220,41873,2553],{"class":346},[220,41875,386],{"class":264},[220,41877,41878,41880,41882],{"class":222,"line":399},[220,41879,2567],{"class":264},[220,41881,23172],{"class":346},[220,41883,359],{"class":264},[220,41885,41886,41888,41890],{"class":222,"line":644},[220,41887,402],{"class":264},[220,41889,347],{"class":346},[220,41891,359],{"class":264},[212,41893,41894],{"className":409,"code":41849,"language":411,"meta":178,"style":178},[99,41895,41896,41904,41912,41920,41928],{"__ignoreMap":178},[220,41897,41898,41900,41902],{"class":222,"line":223},[220,41899,343],{"class":264},[220,41901,347],{"class":420},[220,41903,359],{"class":264},[220,41905,41906,41908,41910],{"class":222,"line":179},[220,41907,364],{"class":264},[220,41909,23172],{"class":420},[220,41911,359],{"class":264},[220,41913,41914,41916,41918],{"class":222,"line":389},[220,41915,2550],{"class":264},[220,41917,2553],{"class":420},[220,41919,386],{"class":264},[220,41921,41922,41924,41926],{"class":222,"line":399},[220,41923,2567],{"class":264},[220,41925,23172],{"class":420},[220,41927,359],{"class":264},[220,41929,41930,41932,41934],{"class":222,"line":644},[220,41931,402],{"class":264},[220,41933,347],{"class":420},[220,41935,359],{"class":264},[212,41937,41938],{"className":2844,"code":41849,"language":2846,"meta":178,"style":178},[99,41939,41940,41948,41956,41964,41972],{"__ignoreMap":178},[220,41941,41942,41944,41946],{"class":222,"line":223},[220,41943,343],{"class":264},[220,41945,347],{"class":420},[220,41947,359],{"class":264},[220,41949,41950,41952,41954],{"class":222,"line":179},[220,41951,364],{"class":264},[220,41953,23172],{"class":420},[220,41955,359],{"class":264},[220,41957,41958,41960,41962],{"class":222,"line":389},[220,41959,2550],{"class":264},[220,41961,2553],{"class":420},[220,41963,386],{"class":264},[220,41965,41966,41968,41970],{"class":222,"line":399},[220,41967,2567],{"class":264},[220,41969,23172],{"class":420},[220,41971,359],{"class":264},[220,41973,41974,41976,41978],{"class":222,"line":644},[220,41975,402],{"class":264},[220,41977,347],{"class":420},[220,41979,359],{"class":264},[212,41981,41982],{"className":468,"code":41849,"language":469,"meta":178,"style":178},[99,41983,41984,41992,42000,42008,42016],{"__ignoreMap":178},[220,41985,41986,41988,41990],{"class":222,"line":223},[220,41987,343],{"class":264},[220,41989,347],{"class":420},[220,41991,359],{"class":264},[220,41993,41994,41996,41998],{"class":222,"line":179},[220,41995,364],{"class":264},[220,41997,23172],{"class":420},[220,41999,359],{"class":264},[220,42001,42002,42004,42006],{"class":222,"line":389},[220,42003,2550],{"class":264},[220,42005,2553],{"class":420},[220,42007,386],{"class":264},[220,42009,42010,42012,42014],{"class":222,"line":399},[220,42011,2567],{"class":264},[220,42013,23172],{"class":420},[220,42015,359],{"class":264},[220,42017,42018,42020,42022],{"class":222,"line":644},[220,42019,402],{"class":264},[220,42021,347],{"class":420},[220,42023,359],{"class":264},[212,42025,42027],{"className":251,"code":42026,"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,42028,42029,42039,42043,42057,42061,42070,42078,42082,42086],{"__ignoreMap":178},[220,42030,42031,42033,42035,42037],{"class":222,"line":223},[220,42032,261],{"class":260},[220,42034,11512],{"class":264},[220,42036,268],{"class":260},[220,42038,4007],{"class":230},[220,42040,42041],{"class":222,"line":179},[220,42042,647],{"emptyLinePlaceholder":194},[220,42044,42045,42047,42049,42051,42053,42055],{"class":222,"line":389},[220,42046,1735],{"class":260},[220,42048,1738],{"class":420},[220,42050,1741],{"class":260},[220,42052,1744],{"class":260},[220,42054,1747],{"class":226},[220,42056,1750],{"class":264},[220,42058,42059],{"class":222,"line":399},[220,42060,1765],{"class":264},[220,42062,42063,42065,42068],{"class":222,"line":644},[220,42064,1770],{"class":264},[220,42066,42067],{"class":230},"'Crystal'",[220,42069,7009],{"class":264},[220,42071,42072,42074,42076],{"class":222,"line":650},[220,42073,7014],{"class":264},[220,42075,3206],{"class":230},[220,42077,2465],{"class":264},[220,42079,42080],{"class":222,"line":656},[220,42081,7031],{"class":264},[220,42083,42084],{"class":222,"line":673},[220,42085,1787],{"class":264},[220,42087,42088],{"class":222,"line":682},[220,42089,1792],{"class":264},[1504,42091,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":42093},[42094,42095],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":23172,"description":41835},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":42102,"title":42103,"body":42104,"category":33063,"componentType":25877,"description":42111,"extension":191,"meta":42295,"navigation":194,"path":42296,"requiresChild":32530,"seo":42297,"stem":42298,"__hash__":42299},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":42105,"toc":42291},[42106,42109,42112,42114,42116,42118,42120,42289],[11,42107,42103],{"id":42108},"curlnoise",[15,42110,42111],{},"Swirling divergence-free flow field that drifts over time",[31911,42113],{"component":42103},[23,42115,31915],{"id":26533},[31917,42117],{":props":34648},[23,42119,31923],{"id":31922},[246,42121,42122,42151,42179,42207,42235],{":tabs":1557},[212,42123,42125],{"className":334,"code":42124,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,42126,42127,42135,42143],{"__ignoreMap":178},[220,42128,42129,42131,42133],{"class":222,"line":223},[220,42130,343],{"class":264},[220,42132,347],{"class":346},[220,42134,359],{"class":264},[220,42136,42137,42139,42141],{"class":222,"line":179},[220,42138,364],{"class":264},[220,42140,42103],{"class":346},[220,42142,386],{"class":264},[220,42144,42145,42147,42149],{"class":222,"line":389},[220,42146,402],{"class":264},[220,42148,347],{"class":346},[220,42150,359],{"class":264},[212,42152,42153],{"className":409,"code":42124,"language":411,"meta":178,"style":178},[99,42154,42155,42163,42171],{"__ignoreMap":178},[220,42156,42157,42159,42161],{"class":222,"line":223},[220,42158,343],{"class":264},[220,42160,347],{"class":420},[220,42162,359],{"class":264},[220,42164,42165,42167,42169],{"class":222,"line":179},[220,42166,364],{"class":264},[220,42168,42103],{"class":420},[220,42170,386],{"class":264},[220,42172,42173,42175,42177],{"class":222,"line":389},[220,42174,402],{"class":264},[220,42176,347],{"class":420},[220,42178,359],{"class":264},[212,42180,42181],{"className":2844,"code":42124,"language":2846,"meta":178,"style":178},[99,42182,42183,42191,42199],{"__ignoreMap":178},[220,42184,42185,42187,42189],{"class":222,"line":223},[220,42186,343],{"class":264},[220,42188,347],{"class":420},[220,42190,359],{"class":264},[220,42192,42193,42195,42197],{"class":222,"line":179},[220,42194,364],{"class":264},[220,42196,42103],{"class":420},[220,42198,386],{"class":264},[220,42200,42201,42203,42205],{"class":222,"line":389},[220,42202,402],{"class":264},[220,42204,347],{"class":420},[220,42206,359],{"class":264},[212,42208,42209],{"className":468,"code":42124,"language":469,"meta":178,"style":178},[99,42210,42211,42219,42227],{"__ignoreMap":178},[220,42212,42213,42215,42217],{"class":222,"line":223},[220,42214,343],{"class":264},[220,42216,347],{"class":420},[220,42218,359],{"class":264},[220,42220,42221,42223,42225],{"class":222,"line":179},[220,42222,364],{"class":264},[220,42224,42103],{"class":420},[220,42226,386],{"class":264},[220,42228,42229,42231,42233],{"class":222,"line":389},[220,42230,402],{"class":264},[220,42232,347],{"class":420},[220,42234,359],{"class":264},[212,42236,42238],{"className":251,"code":42237,"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,42239,42240,42250,42254,42268,42272,42281,42285],{"__ignoreMap":178},[220,42241,42242,42244,42246,42248],{"class":222,"line":223},[220,42243,261],{"class":260},[220,42245,11512],{"class":264},[220,42247,268],{"class":260},[220,42249,4007],{"class":230},[220,42251,42252],{"class":222,"line":179},[220,42253,647],{"emptyLinePlaceholder":194},[220,42255,42256,42258,42260,42262,42264,42266],{"class":222,"line":389},[220,42257,1735],{"class":260},[220,42259,1738],{"class":420},[220,42261,1741],{"class":260},[220,42263,1744],{"class":260},[220,42265,1747],{"class":226},[220,42267,1750],{"class":264},[220,42269,42270],{"class":222,"line":399},[220,42271,1765],{"class":264},[220,42273,42274,42276,42279],{"class":222,"line":644},[220,42275,1770],{"class":264},[220,42277,42278],{"class":230},"'CurlNoise'",[220,42280,2465],{"class":264},[220,42282,42283],{"class":222,"line":650},[220,42284,1787],{"class":264},[220,42286,42287],{"class":222,"line":656},[220,42288,1792],{"class":264},[1504,42290,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":42292},[42293,42294],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":42103,"description":42111},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":42301,"title":14426,"body":42302,"category":35559,"componentType":25883,"description":42309,"extension":191,"meta":42674,"navigation":194,"path":42675,"requiresChild":194,"seo":42676,"stem":42677,"__hash__":42678},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":42303,"toc":42670},[42304,42307,42310,42312,42314,42317,42319,42668],[11,42305,14426],{"id":42306},"cursorripples",[15,42308,42309],{},"Fluid-like ripple distortion",[31911,42311],{"component":14426},[23,42313,31915],{"id":26533},[31917,42315],{":props":42316},"[{\"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,42318,31923],{"id":31922},[246,42320,42321,42387,42458,42524,42594],{":tabs":1557},[212,42322,42324],{"className":334,"code":42323,"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,42325,42326,42334,42341,42350,42359,42363,42371,42379],{"__ignoreMap":178},[220,42327,42328,42330,42332],{"class":222,"line":223},[220,42329,343],{"class":264},[220,42331,347],{"class":346},[220,42333,359],{"class":264},[220,42335,42336,42338],{"class":222,"line":179},[220,42337,364],{"class":264},[220,42339,42340],{"class":346},"CursorRipples\n",[220,42342,42343,42345,42347],{"class":222,"line":389},[220,42344,20371],{"class":226},[220,42346,353],{"class":264},[220,42348,42349],{"class":230},"\"10\"\n",[220,42351,42352,42354,42356],{"class":222,"line":399},[220,42353,17405],{"class":226},[220,42355,353],{"class":264},[220,42357,42358],{"class":230},"\"0.5\"\n",[220,42360,42361],{"class":222,"line":644},[220,42362,31959],{"class":264},[220,42364,42365,42367,42369],{"class":222,"line":650},[220,42366,2550],{"class":264},[220,42368,2553],{"class":346},[220,42370,386],{"class":264},[220,42372,42373,42375,42377],{"class":222,"line":656},[220,42374,2567],{"class":264},[220,42376,14426],{"class":346},[220,42378,359],{"class":264},[220,42380,42381,42383,42385],{"class":222,"line":673},[220,42382,402],{"class":264},[220,42384,347],{"class":346},[220,42386,359],{"class":264},[212,42388,42390],{"className":409,"code":42389,"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,42391,42392,42400,42406,42418,42430,42434,42442,42450],{"__ignoreMap":178},[220,42393,42394,42396,42398],{"class":222,"line":223},[220,42395,343],{"class":264},[220,42397,347],{"class":420},[220,42399,359],{"class":264},[220,42401,42402,42404],{"class":222,"line":179},[220,42403,364],{"class":264},[220,42405,42340],{"class":420},[220,42407,42408,42410,42412,42414,42416],{"class":222,"line":389},[220,42409,20482],{"class":226},[220,42411,353],{"class":260},[220,42413,743],{"class":264},[220,42415,23850],{"class":420},[220,42417,749],{"class":264},[220,42419,42420,42422,42424,42426,42428],{"class":222,"line":399},[220,42421,9645],{"class":226},[220,42423,353],{"class":260},[220,42425,743],{"class":264},[220,42427,7754],{"class":420},[220,42429,749],{"class":264},[220,42431,42432],{"class":222,"line":644},[220,42433,31959],{"class":264},[220,42435,42436,42438,42440],{"class":222,"line":650},[220,42437,2550],{"class":264},[220,42439,2553],{"class":420},[220,42441,386],{"class":264},[220,42443,42444,42446,42448],{"class":222,"line":656},[220,42445,2567],{"class":264},[220,42447,14426],{"class":420},[220,42449,359],{"class":264},[220,42451,42452,42454,42456],{"class":222,"line":673},[220,42453,402],{"class":264},[220,42455,347],{"class":420},[220,42457,359],{"class":264},[212,42459,42460],{"className":2844,"code":42389,"language":2846,"meta":178,"style":178},[99,42461,42462,42470,42476,42486,42496,42500,42508,42516],{"__ignoreMap":178},[220,42463,42464,42466,42468],{"class":222,"line":223},[220,42465,343],{"class":264},[220,42467,347],{"class":420},[220,42469,359],{"class":264},[220,42471,42472,42474],{"class":222,"line":179},[220,42473,364],{"class":264},[220,42475,42340],{"class":420},[220,42477,42478,42480,42482,42484],{"class":222,"line":389},[220,42479,20482],{"class":226},[220,42481,29871],{"class":264},[220,42483,23850],{"class":420},[220,42485,749],{"class":264},[220,42487,42488,42490,42492,42494],{"class":222,"line":399},[220,42489,9645],{"class":226},[220,42491,29871],{"class":264},[220,42493,7754],{"class":420},[220,42495,749],{"class":264},[220,42497,42498],{"class":222,"line":644},[220,42499,31959],{"class":264},[220,42501,42502,42504,42506],{"class":222,"line":650},[220,42503,2550],{"class":264},[220,42505,2553],{"class":420},[220,42507,386],{"class":264},[220,42509,42510,42512,42514],{"class":222,"line":656},[220,42511,2567],{"class":264},[220,42513,14426],{"class":420},[220,42515,359],{"class":264},[220,42517,42518,42520,42522],{"class":222,"line":673},[220,42519,402],{"class":264},[220,42521,347],{"class":420},[220,42523,359],{"class":264},[212,42525,42526],{"className":468,"code":42389,"language":469,"meta":178,"style":178},[99,42527,42528,42536,42542,42554,42566,42570,42578,42586],{"__ignoreMap":178},[220,42529,42530,42532,42534],{"class":222,"line":223},[220,42531,343],{"class":264},[220,42533,347],{"class":420},[220,42535,359],{"class":264},[220,42537,42538,42540],{"class":222,"line":179},[220,42539,364],{"class":264},[220,42541,42340],{"class":420},[220,42543,42544,42546,42548,42550,42552],{"class":222,"line":389},[220,42545,20482],{"class":226},[220,42547,353],{"class":260},[220,42549,743],{"class":264},[220,42551,23850],{"class":420},[220,42553,749],{"class":264},[220,42555,42556,42558,42560,42562,42564],{"class":222,"line":399},[220,42557,9645],{"class":226},[220,42559,353],{"class":260},[220,42561,743],{"class":264},[220,42563,7754],{"class":420},[220,42565,749],{"class":264},[220,42567,42568],{"class":222,"line":644},[220,42569,31959],{"class":264},[220,42571,42572,42574,42576],{"class":222,"line":650},[220,42573,2550],{"class":264},[220,42575,2553],{"class":420},[220,42577,386],{"class":264},[220,42579,42580,42582,42584],{"class":222,"line":656},[220,42581,2567],{"class":264},[220,42583,14426],{"class":420},[220,42585,359],{"class":264},[220,42587,42588,42590,42592],{"class":222,"line":673},[220,42589,402],{"class":264},[220,42591,347],{"class":420},[220,42593,359],{"class":264},[212,42595,42597],{"className":251,"code":42596,"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,42598,42599,42609,42613,42627,42631,42648,42656,42660,42664],{"__ignoreMap":178},[220,42600,42601,42603,42605,42607],{"class":222,"line":223},[220,42602,261],{"class":260},[220,42604,11512],{"class":264},[220,42606,268],{"class":260},[220,42608,4007],{"class":230},[220,42610,42611],{"class":222,"line":179},[220,42612,647],{"emptyLinePlaceholder":194},[220,42614,42615,42617,42619,42621,42623,42625],{"class":222,"line":389},[220,42616,1735],{"class":260},[220,42618,1738],{"class":420},[220,42620,1741],{"class":260},[220,42622,1744],{"class":260},[220,42624,1747],{"class":226},[220,42626,1750],{"class":264},[220,42628,42629],{"class":222,"line":399},[220,42630,1765],{"class":264},[220,42632,42633,42635,42638,42640,42642,42644,42646],{"class":222,"line":644},[220,42634,1770],{"class":264},[220,42636,42637],{"class":230},"'CursorRipples'",[220,42639,32203],{"class":264},[220,42641,23850],{"class":420},[220,42643,6566],{"class":264},[220,42645,7754],{"class":420},[220,42647,7546],{"class":264},[220,42649,42650,42652,42654],{"class":222,"line":650},[220,42651,7014],{"class":264},[220,42653,3206],{"class":230},[220,42655,2465],{"class":264},[220,42657,42658],{"class":222,"line":656},[220,42659,7031],{"class":264},[220,42661,42662],{"class":222,"line":673},[220,42663,1787],{"class":264},[220,42665,42666],{"class":222,"line":682},[220,42667,1792],{"class":264},[1504,42669,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42671},[42672,42673],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":14426,"description":42309},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":42680,"title":394,"body":42681,"category":35559,"componentType":25877,"description":42688,"extension":191,"meta":42928,"navigation":194,"path":42929,"requiresChild":32530,"seo":42930,"stem":42931,"__hash__":42932},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":42682,"toc":42924},[42683,42686,42689,42691,42693,42696,42698,42922],[11,42684,394],{"id":42685},"cursortrail",[15,42687,42688],{},"Animated trail effect that tracks cursor movement",[31911,42690],{"component":394},[23,42692,31915],{"id":26533},[31917,42694],{":props":42695},"[{\"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,42697,31923],{"id":31922},[246,42699,42700,42740,42783,42823,42865],{":tabs":1557},[212,42701,42703],{"className":334,"code":42702,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,42704,42705,42713,42720,42728,42732],{"__ignoreMap":178},[220,42706,42707,42709,42711],{"class":222,"line":223},[220,42708,343],{"class":264},[220,42710,347],{"class":346},[220,42712,359],{"class":264},[220,42714,42715,42717],{"class":222,"line":179},[220,42716,364],{"class":264},[220,42718,42719],{"class":346},"CursorTrail\n",[220,42721,42722,42724,42726],{"class":222,"line":389},[220,42723,17405],{"class":226},[220,42725,353],{"class":264},[220,42727,42358],{"class":230},[220,42729,42730],{"class":222,"line":399},[220,42731,1234],{"class":264},[220,42733,42734,42736,42738],{"class":222,"line":644},[220,42735,402],{"class":264},[220,42737,347],{"class":346},[220,42739,359],{"class":264},[212,42741,42743],{"className":409,"code":42742,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,42744,42745,42753,42759,42771,42775],{"__ignoreMap":178},[220,42746,42747,42749,42751],{"class":222,"line":223},[220,42748,343],{"class":264},[220,42750,347],{"class":420},[220,42752,359],{"class":264},[220,42754,42755,42757],{"class":222,"line":179},[220,42756,364],{"class":264},[220,42758,42719],{"class":420},[220,42760,42761,42763,42765,42767,42769],{"class":222,"line":389},[220,42762,9645],{"class":226},[220,42764,353],{"class":260},[220,42766,743],{"class":264},[220,42768,7754],{"class":420},[220,42770,749],{"class":264},[220,42772,42773],{"class":222,"line":399},[220,42774,1234],{"class":264},[220,42776,42777,42779,42781],{"class":222,"line":644},[220,42778,402],{"class":264},[220,42780,347],{"class":420},[220,42782,359],{"class":264},[212,42784,42785],{"className":2844,"code":42742,"language":2846,"meta":178,"style":178},[99,42786,42787,42795,42801,42811,42815],{"__ignoreMap":178},[220,42788,42789,42791,42793],{"class":222,"line":223},[220,42790,343],{"class":264},[220,42792,347],{"class":420},[220,42794,359],{"class":264},[220,42796,42797,42799],{"class":222,"line":179},[220,42798,364],{"class":264},[220,42800,42719],{"class":420},[220,42802,42803,42805,42807,42809],{"class":222,"line":389},[220,42804,9645],{"class":226},[220,42806,29871],{"class":264},[220,42808,7754],{"class":420},[220,42810,749],{"class":264},[220,42812,42813],{"class":222,"line":399},[220,42814,1234],{"class":264},[220,42816,42817,42819,42821],{"class":222,"line":644},[220,42818,402],{"class":264},[220,42820,347],{"class":420},[220,42822,359],{"class":264},[212,42824,42825],{"className":468,"code":42742,"language":469,"meta":178,"style":178},[99,42826,42827,42835,42841,42853,42857],{"__ignoreMap":178},[220,42828,42829,42831,42833],{"class":222,"line":223},[220,42830,343],{"class":264},[220,42832,347],{"class":420},[220,42834,359],{"class":264},[220,42836,42837,42839],{"class":222,"line":179},[220,42838,364],{"class":264},[220,42840,42719],{"class":420},[220,42842,42843,42845,42847,42849,42851],{"class":222,"line":389},[220,42844,9645],{"class":226},[220,42846,353],{"class":260},[220,42848,743],{"class":264},[220,42850,7754],{"class":420},[220,42852,749],{"class":264},[220,42854,42855],{"class":222,"line":399},[220,42856,1234],{"class":264},[220,42858,42859,42861,42863],{"class":222,"line":644},[220,42860,402],{"class":264},[220,42862,347],{"class":420},[220,42864,359],{"class":264},[212,42866,42868],{"className":251,"code":42867,"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,42869,42870,42880,42884,42898,42902,42914,42918],{"__ignoreMap":178},[220,42871,42872,42874,42876,42878],{"class":222,"line":223},[220,42873,261],{"class":260},[220,42875,11512],{"class":264},[220,42877,268],{"class":260},[220,42879,4007],{"class":230},[220,42881,42882],{"class":222,"line":179},[220,42883,647],{"emptyLinePlaceholder":194},[220,42885,42886,42888,42890,42892,42894,42896],{"class":222,"line":389},[220,42887,1735],{"class":260},[220,42889,1738],{"class":420},[220,42891,1741],{"class":260},[220,42893,1744],{"class":260},[220,42895,1747],{"class":226},[220,42897,1750],{"class":264},[220,42899,42900],{"class":222,"line":399},[220,42901,1765],{"class":264},[220,42903,42904,42906,42908,42910,42912],{"class":222,"line":644},[220,42905,1770],{"class":264},[220,42907,26365],{"class":230},[220,42909,7541],{"class":264},[220,42911,7754],{"class":420},[220,42913,1782],{"class":264},[220,42915,42916],{"class":222,"line":650},[220,42917,1787],{"class":264},[220,42919,42920],{"class":222,"line":656},[220,42921,1792],{"class":264},[1504,42923,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42925},[42926,42927],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":42688},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":42934,"title":42935,"body":42936,"category":32806,"componentType":25883,"description":42943,"extension":191,"meta":43261,"navigation":194,"path":43262,"requiresChild":194,"seo":43263,"stem":43264,"__hash__":43265},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":42937,"toc":43257},[42938,42941,42944,42946,42948,42951,42953,43255],[11,42939,42935],{"id":42940},"datamosh",[15,42942,42943],{},"Corrupted-codec motion smearing — macroblocks lock in place and drag their pixels across the frame in liquid trails, each recovering on its own clock, like a video stream that lost its keyframes",[31911,42945],{"component":42935},[23,42947,31915],{"id":26533},[31917,42949],{":props":42950},"[{\"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,42952,31923],{"id":31922},[246,42954,42955,43012,43071,43127,43185],{":tabs":1557},[212,42956,42958],{"className":334,"code":42957,"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,42959,42960,42968,42975,42984,42988,42996,43004],{"__ignoreMap":178},[220,42961,42962,42964,42966],{"class":222,"line":223},[220,42963,343],{"class":264},[220,42965,347],{"class":346},[220,42967,359],{"class":264},[220,42969,42970,42972],{"class":222,"line":179},[220,42971,364],{"class":264},[220,42973,42974],{"class":346},"DataMosh\n",[220,42976,42977,42979,42981],{"class":222,"line":389},[220,42978,20371],{"class":226},[220,42980,353],{"class":264},[220,42982,42983],{"class":230},"\"0.7\"\n",[220,42985,42986],{"class":222,"line":399},[220,42987,31959],{"class":264},[220,42989,42990,42992,42994],{"class":222,"line":644},[220,42991,2550],{"class":264},[220,42993,2553],{"class":346},[220,42995,386],{"class":264},[220,42997,42998,43000,43002],{"class":222,"line":650},[220,42999,2567],{"class":264},[220,43001,42935],{"class":346},[220,43003,359],{"class":264},[220,43005,43006,43008,43010],{"class":222,"line":656},[220,43007,402],{"class":264},[220,43009,347],{"class":346},[220,43011,359],{"class":264},[212,43013,43015],{"className":409,"code":43014,"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,43016,43017,43025,43031,43043,43047,43055,43063],{"__ignoreMap":178},[220,43018,43019,43021,43023],{"class":222,"line":223},[220,43020,343],{"class":264},[220,43022,347],{"class":420},[220,43024,359],{"class":264},[220,43026,43027,43029],{"class":222,"line":179},[220,43028,364],{"class":264},[220,43030,42974],{"class":420},[220,43032,43033,43035,43037,43039,43041],{"class":222,"line":389},[220,43034,20482],{"class":226},[220,43036,353],{"class":260},[220,43038,743],{"class":264},[220,43040,18944],{"class":420},[220,43042,749],{"class":264},[220,43044,43045],{"class":222,"line":399},[220,43046,31959],{"class":264},[220,43048,43049,43051,43053],{"class":222,"line":644},[220,43050,2550],{"class":264},[220,43052,2553],{"class":420},[220,43054,386],{"class":264},[220,43056,43057,43059,43061],{"class":222,"line":650},[220,43058,2567],{"class":264},[220,43060,42935],{"class":420},[220,43062,359],{"class":264},[220,43064,43065,43067,43069],{"class":222,"line":656},[220,43066,402],{"class":264},[220,43068,347],{"class":420},[220,43070,359],{"class":264},[212,43072,43073],{"className":2844,"code":43014,"language":2846,"meta":178,"style":178},[99,43074,43075,43083,43089,43099,43103,43111,43119],{"__ignoreMap":178},[220,43076,43077,43079,43081],{"class":222,"line":223},[220,43078,343],{"class":264},[220,43080,347],{"class":420},[220,43082,359],{"class":264},[220,43084,43085,43087],{"class":222,"line":179},[220,43086,364],{"class":264},[220,43088,42974],{"class":420},[220,43090,43091,43093,43095,43097],{"class":222,"line":389},[220,43092,20482],{"class":226},[220,43094,29871],{"class":264},[220,43096,18944],{"class":420},[220,43098,749],{"class":264},[220,43100,43101],{"class":222,"line":399},[220,43102,31959],{"class":264},[220,43104,43105,43107,43109],{"class":222,"line":644},[220,43106,2550],{"class":264},[220,43108,2553],{"class":420},[220,43110,386],{"class":264},[220,43112,43113,43115,43117],{"class":222,"line":650},[220,43114,2567],{"class":264},[220,43116,42935],{"class":420},[220,43118,359],{"class":264},[220,43120,43121,43123,43125],{"class":222,"line":656},[220,43122,402],{"class":264},[220,43124,347],{"class":420},[220,43126,359],{"class":264},[212,43128,43129],{"className":468,"code":43014,"language":469,"meta":178,"style":178},[99,43130,43131,43139,43145,43157,43161,43169,43177],{"__ignoreMap":178},[220,43132,43133,43135,43137],{"class":222,"line":223},[220,43134,343],{"class":264},[220,43136,347],{"class":420},[220,43138,359],{"class":264},[220,43140,43141,43143],{"class":222,"line":179},[220,43142,364],{"class":264},[220,43144,42974],{"class":420},[220,43146,43147,43149,43151,43153,43155],{"class":222,"line":389},[220,43148,20482],{"class":226},[220,43150,353],{"class":260},[220,43152,743],{"class":264},[220,43154,18944],{"class":420},[220,43156,749],{"class":264},[220,43158,43159],{"class":222,"line":399},[220,43160,31959],{"class":264},[220,43162,43163,43165,43167],{"class":222,"line":644},[220,43164,2550],{"class":264},[220,43166,2553],{"class":420},[220,43168,386],{"class":264},[220,43170,43171,43173,43175],{"class":222,"line":650},[220,43172,2567],{"class":264},[220,43174,42935],{"class":420},[220,43176,359],{"class":264},[220,43178,43179,43181,43183],{"class":222,"line":656},[220,43180,402],{"class":264},[220,43182,347],{"class":420},[220,43184,359],{"class":264},[212,43186,43188],{"className":251,"code":43187,"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,43189,43190,43200,43204,43218,43222,43235,43243,43247,43251],{"__ignoreMap":178},[220,43191,43192,43194,43196,43198],{"class":222,"line":223},[220,43193,261],{"class":260},[220,43195,11512],{"class":264},[220,43197,268],{"class":260},[220,43199,4007],{"class":230},[220,43201,43202],{"class":222,"line":179},[220,43203,647],{"emptyLinePlaceholder":194},[220,43205,43206,43208,43210,43212,43214,43216],{"class":222,"line":389},[220,43207,1735],{"class":260},[220,43209,1738],{"class":420},[220,43211,1741],{"class":260},[220,43213,1744],{"class":260},[220,43215,1747],{"class":226},[220,43217,1750],{"class":264},[220,43219,43220],{"class":222,"line":399},[220,43221,1765],{"class":264},[220,43223,43224,43226,43229,43231,43233],{"class":222,"line":644},[220,43225,1770],{"class":264},[220,43227,43228],{"class":230},"'DataMosh'",[220,43230,32203],{"class":264},[220,43232,18944],{"class":420},[220,43234,7546],{"class":264},[220,43236,43237,43239,43241],{"class":222,"line":650},[220,43238,7014],{"class":264},[220,43240,3206],{"class":230},[220,43242,2465],{"class":264},[220,43244,43245],{"class":222,"line":656},[220,43246,7031],{"class":264},[220,43248,43249],{"class":222,"line":673},[220,43250,1787],{"class":264},[220,43252,43253],{"class":222,"line":682},[220,43254,1792],{"class":264},[1504,43256,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43258},[43259,43260],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":42935,"description":42943},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":43267,"title":43268,"body":43269,"category":33063,"componentType":25877,"description":43276,"extension":191,"meta":43461,"navigation":194,"path":43462,"requiresChild":32530,"seo":43463,"stem":43464,"__hash__":43465},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":43270,"toc":43457},[43271,43274,43277,43279,43281,43284,43286,43455],[11,43272,43268],{"id":43273},"diamondgradient",[15,43275,43276],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[31911,43278],{"component":43268},[23,43280,31915],{"id":26533},[31917,43282],{":props":43283},"[{\"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,43285,31923],{"id":31922},[246,43287,43288,43317,43345,43373,43401],{":tabs":1557},[212,43289,43291],{"className":334,"code":43290,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,43292,43293,43301,43309],{"__ignoreMap":178},[220,43294,43295,43297,43299],{"class":222,"line":223},[220,43296,343],{"class":264},[220,43298,347],{"class":346},[220,43300,359],{"class":264},[220,43302,43303,43305,43307],{"class":222,"line":179},[220,43304,364],{"class":264},[220,43306,43268],{"class":346},[220,43308,386],{"class":264},[220,43310,43311,43313,43315],{"class":222,"line":389},[220,43312,402],{"class":264},[220,43314,347],{"class":346},[220,43316,359],{"class":264},[212,43318,43319],{"className":409,"code":43290,"language":411,"meta":178,"style":178},[99,43320,43321,43329,43337],{"__ignoreMap":178},[220,43322,43323,43325,43327],{"class":222,"line":223},[220,43324,343],{"class":264},[220,43326,347],{"class":420},[220,43328,359],{"class":264},[220,43330,43331,43333,43335],{"class":222,"line":179},[220,43332,364],{"class":264},[220,43334,43268],{"class":420},[220,43336,386],{"class":264},[220,43338,43339,43341,43343],{"class":222,"line":389},[220,43340,402],{"class":264},[220,43342,347],{"class":420},[220,43344,359],{"class":264},[212,43346,43347],{"className":2844,"code":43290,"language":2846,"meta":178,"style":178},[99,43348,43349,43357,43365],{"__ignoreMap":178},[220,43350,43351,43353,43355],{"class":222,"line":223},[220,43352,343],{"class":264},[220,43354,347],{"class":420},[220,43356,359],{"class":264},[220,43358,43359,43361,43363],{"class":222,"line":179},[220,43360,364],{"class":264},[220,43362,43268],{"class":420},[220,43364,386],{"class":264},[220,43366,43367,43369,43371],{"class":222,"line":389},[220,43368,402],{"class":264},[220,43370,347],{"class":420},[220,43372,359],{"class":264},[212,43374,43375],{"className":468,"code":43290,"language":469,"meta":178,"style":178},[99,43376,43377,43385,43393],{"__ignoreMap":178},[220,43378,43379,43381,43383],{"class":222,"line":223},[220,43380,343],{"class":264},[220,43382,347],{"class":420},[220,43384,359],{"class":264},[220,43386,43387,43389,43391],{"class":222,"line":179},[220,43388,364],{"class":264},[220,43390,43268],{"class":420},[220,43392,386],{"class":264},[220,43394,43395,43397,43399],{"class":222,"line":389},[220,43396,402],{"class":264},[220,43398,347],{"class":420},[220,43400,359],{"class":264},[212,43402,43404],{"className":251,"code":43403,"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,43405,43406,43416,43420,43434,43438,43447,43451],{"__ignoreMap":178},[220,43407,43408,43410,43412,43414],{"class":222,"line":223},[220,43409,261],{"class":260},[220,43411,11512],{"class":264},[220,43413,268],{"class":260},[220,43415,4007],{"class":230},[220,43417,43418],{"class":222,"line":179},[220,43419,647],{"emptyLinePlaceholder":194},[220,43421,43422,43424,43426,43428,43430,43432],{"class":222,"line":389},[220,43423,1735],{"class":260},[220,43425,1738],{"class":420},[220,43427,1741],{"class":260},[220,43429,1744],{"class":260},[220,43431,1747],{"class":226},[220,43433,1750],{"class":264},[220,43435,43436],{"class":222,"line":399},[220,43437,1765],{"class":264},[220,43439,43440,43442,43445],{"class":222,"line":644},[220,43441,1770],{"class":264},[220,43443,43444],{"class":230},"'DiamondGradient'",[220,43446,2465],{"class":264},[220,43448,43449],{"class":222,"line":650},[220,43450,1787],{"class":264},[220,43452,43453],{"class":222,"line":656},[220,43454,1792],{"class":264},[1504,43456,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":43458},[43459,43460],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":43268,"description":43276},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":43467,"title":43468,"body":43469,"category":33673,"componentType":25883,"description":43476,"extension":191,"meta":43737,"navigation":194,"path":43738,"requiresChild":194,"seo":43739,"stem":43740,"__hash__":43741},"components\u002Fdocs\u002Fcomponents\u002FDiamondWipe.md","DiamondWipe",{"type":8,"value":43470,"toc":43733},[43471,43474,43477,43479,43481,43484,43486,43731],[11,43472,43468],{"id":43473},"diamondwipe",[15,43475,43476],{},"Wipe the content away through a lattice of growing diamonds",[31911,43478],{"component":43468},[23,43480,31915],{"id":26533},[31917,43482],{":props":43483},"[{\"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,43485,31923],{"id":31922},[246,43487,43488,43533,43577,43621,43665],{":tabs":1557},[212,43489,43491],{"className":334,"code":43490,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondWipe>\n \u003CCircle \u002F>\n \u003C\u002FDiamondWipe>\n\u003C\u002FShader>\n",[99,43492,43493,43501,43509,43517,43525],{"__ignoreMap":178},[220,43494,43495,43497,43499],{"class":222,"line":223},[220,43496,343],{"class":264},[220,43498,347],{"class":346},[220,43500,359],{"class":264},[220,43502,43503,43505,43507],{"class":222,"line":179},[220,43504,364],{"class":264},[220,43506,43468],{"class":346},[220,43508,359],{"class":264},[220,43510,43511,43513,43515],{"class":222,"line":389},[220,43512,2550],{"class":264},[220,43514,2553],{"class":346},[220,43516,386],{"class":264},[220,43518,43519,43521,43523],{"class":222,"line":399},[220,43520,2567],{"class":264},[220,43522,43468],{"class":346},[220,43524,359],{"class":264},[220,43526,43527,43529,43531],{"class":222,"line":644},[220,43528,402],{"class":264},[220,43530,347],{"class":346},[220,43532,359],{"class":264},[212,43534,43535],{"className":409,"code":43490,"language":411,"meta":178,"style":178},[99,43536,43537,43545,43553,43561,43569],{"__ignoreMap":178},[220,43538,43539,43541,43543],{"class":222,"line":223},[220,43540,343],{"class":264},[220,43542,347],{"class":420},[220,43544,359],{"class":264},[220,43546,43547,43549,43551],{"class":222,"line":179},[220,43548,364],{"class":264},[220,43550,43468],{"class":420},[220,43552,359],{"class":264},[220,43554,43555,43557,43559],{"class":222,"line":389},[220,43556,2550],{"class":264},[220,43558,2553],{"class":420},[220,43560,386],{"class":264},[220,43562,43563,43565,43567],{"class":222,"line":399},[220,43564,2567],{"class":264},[220,43566,43468],{"class":420},[220,43568,359],{"class":264},[220,43570,43571,43573,43575],{"class":222,"line":644},[220,43572,402],{"class":264},[220,43574,347],{"class":420},[220,43576,359],{"class":264},[212,43578,43579],{"className":2844,"code":43490,"language":2846,"meta":178,"style":178},[99,43580,43581,43589,43597,43605,43613],{"__ignoreMap":178},[220,43582,43583,43585,43587],{"class":222,"line":223},[220,43584,343],{"class":264},[220,43586,347],{"class":420},[220,43588,359],{"class":264},[220,43590,43591,43593,43595],{"class":222,"line":179},[220,43592,364],{"class":264},[220,43594,43468],{"class":420},[220,43596,359],{"class":264},[220,43598,43599,43601,43603],{"class":222,"line":389},[220,43600,2550],{"class":264},[220,43602,2553],{"class":420},[220,43604,386],{"class":264},[220,43606,43607,43609,43611],{"class":222,"line":399},[220,43608,2567],{"class":264},[220,43610,43468],{"class":420},[220,43612,359],{"class":264},[220,43614,43615,43617,43619],{"class":222,"line":644},[220,43616,402],{"class":264},[220,43618,347],{"class":420},[220,43620,359],{"class":264},[212,43622,43623],{"className":468,"code":43490,"language":469,"meta":178,"style":178},[99,43624,43625,43633,43641,43649,43657],{"__ignoreMap":178},[220,43626,43627,43629,43631],{"class":222,"line":223},[220,43628,343],{"class":264},[220,43630,347],{"class":420},[220,43632,359],{"class":264},[220,43634,43635,43637,43639],{"class":222,"line":179},[220,43636,364],{"class":264},[220,43638,43468],{"class":420},[220,43640,359],{"class":264},[220,43642,43643,43645,43647],{"class":222,"line":389},[220,43644,2550],{"class":264},[220,43646,2553],{"class":420},[220,43648,386],{"class":264},[220,43650,43651,43653,43655],{"class":222,"line":399},[220,43652,2567],{"class":264},[220,43654,43468],{"class":420},[220,43656,359],{"class":264},[220,43658,43659,43661,43663],{"class":222,"line":644},[220,43660,402],{"class":264},[220,43662,347],{"class":420},[220,43664,359],{"class":264},[212,43666,43668],{"className":251,"code":43667,"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,43669,43670,43680,43684,43698,43702,43711,43719,43723,43727],{"__ignoreMap":178},[220,43671,43672,43674,43676,43678],{"class":222,"line":223},[220,43673,261],{"class":260},[220,43675,11512],{"class":264},[220,43677,268],{"class":260},[220,43679,4007],{"class":230},[220,43681,43682],{"class":222,"line":179},[220,43683,647],{"emptyLinePlaceholder":194},[220,43685,43686,43688,43690,43692,43694,43696],{"class":222,"line":389},[220,43687,1735],{"class":260},[220,43689,1738],{"class":420},[220,43691,1741],{"class":260},[220,43693,1744],{"class":260},[220,43695,1747],{"class":226},[220,43697,1750],{"class":264},[220,43699,43700],{"class":222,"line":399},[220,43701,1765],{"class":264},[220,43703,43704,43706,43709],{"class":222,"line":644},[220,43705,1770],{"class":264},[220,43707,43708],{"class":230},"'DiamondWipe'",[220,43710,7009],{"class":264},[220,43712,43713,43715,43717],{"class":222,"line":650},[220,43714,7014],{"class":264},[220,43716,3206],{"class":230},[220,43718,2465],{"class":264},[220,43720,43721],{"class":222,"line":656},[220,43722,7031],{"class":264},[220,43724,43725],{"class":222,"line":673},[220,43726,1787],{"class":264},[220,43728,43729],{"class":222,"line":682},[220,43730,1792],{"class":264},[1504,43732,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":43734},[43735,43736],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondwipe",{"title":43468,"description":43476},"docs\u002Fcomponents\u002FDiamondWipe","KVM9D5et0aht_X23sPAUaS_o9p9s4ipXzKcG_Xwj6PA",{"id":43743,"title":43744,"body":43745,"category":32234,"componentType":25883,"description":43752,"extension":191,"meta":44070,"navigation":194,"path":44071,"requiresChild":194,"seo":44072,"stem":44073,"__hash__":44074},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":43746,"toc":44066},[43747,43750,43753,43755,43757,43760,43762,44064],[11,43748,43744],{"id":43749},"diffuseblur",[15,43751,43752],{},"Grain-like pixel displacement at random",[31911,43754],{"component":43744},[23,43756,31915],{"id":26533},[31917,43758],{":props":43759},"[{\"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,43761,31923],{"id":31922},[246,43763,43764,43821,43880,43936,43994],{":tabs":1557},[212,43765,43767],{"className":334,"code":43766,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43768,43769,43777,43784,43793,43797,43805,43813],{"__ignoreMap":178},[220,43770,43771,43773,43775],{"class":222,"line":223},[220,43772,343],{"class":264},[220,43774,347],{"class":346},[220,43776,359],{"class":264},[220,43778,43779,43781],{"class":222,"line":179},[220,43780,364],{"class":264},[220,43782,43783],{"class":346},"DiffuseBlur\n",[220,43785,43786,43788,43790],{"class":222,"line":389},[220,43787,20371],{"class":226},[220,43789,353],{"class":264},[220,43791,43792],{"class":230},"\"30\"\n",[220,43794,43795],{"class":222,"line":399},[220,43796,31959],{"class":264},[220,43798,43799,43801,43803],{"class":222,"line":644},[220,43800,2550],{"class":264},[220,43802,2553],{"class":346},[220,43804,386],{"class":264},[220,43806,43807,43809,43811],{"class":222,"line":650},[220,43808,2567],{"class":264},[220,43810,43744],{"class":346},[220,43812,359],{"class":264},[220,43814,43815,43817,43819],{"class":222,"line":656},[220,43816,402],{"class":264},[220,43818,347],{"class":346},[220,43820,359],{"class":264},[212,43822,43824],{"className":409,"code":43823,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43825,43826,43834,43840,43852,43856,43864,43872],{"__ignoreMap":178},[220,43827,43828,43830,43832],{"class":222,"line":223},[220,43829,343],{"class":264},[220,43831,347],{"class":420},[220,43833,359],{"class":264},[220,43835,43836,43838],{"class":222,"line":179},[220,43837,364],{"class":264},[220,43839,43783],{"class":420},[220,43841,43842,43844,43846,43848,43850],{"class":222,"line":389},[220,43843,20482],{"class":226},[220,43845,353],{"class":260},[220,43847,743],{"class":264},[220,43849,24010],{"class":420},[220,43851,749],{"class":264},[220,43853,43854],{"class":222,"line":399},[220,43855,31959],{"class":264},[220,43857,43858,43860,43862],{"class":222,"line":644},[220,43859,2550],{"class":264},[220,43861,2553],{"class":420},[220,43863,386],{"class":264},[220,43865,43866,43868,43870],{"class":222,"line":650},[220,43867,2567],{"class":264},[220,43869,43744],{"class":420},[220,43871,359],{"class":264},[220,43873,43874,43876,43878],{"class":222,"line":656},[220,43875,402],{"class":264},[220,43877,347],{"class":420},[220,43879,359],{"class":264},[212,43881,43882],{"className":2844,"code":43823,"language":2846,"meta":178,"style":178},[99,43883,43884,43892,43898,43908,43912,43920,43928],{"__ignoreMap":178},[220,43885,43886,43888,43890],{"class":222,"line":223},[220,43887,343],{"class":264},[220,43889,347],{"class":420},[220,43891,359],{"class":264},[220,43893,43894,43896],{"class":222,"line":179},[220,43895,364],{"class":264},[220,43897,43783],{"class":420},[220,43899,43900,43902,43904,43906],{"class":222,"line":389},[220,43901,20482],{"class":226},[220,43903,29871],{"class":264},[220,43905,24010],{"class":420},[220,43907,749],{"class":264},[220,43909,43910],{"class":222,"line":399},[220,43911,31959],{"class":264},[220,43913,43914,43916,43918],{"class":222,"line":644},[220,43915,2550],{"class":264},[220,43917,2553],{"class":420},[220,43919,386],{"class":264},[220,43921,43922,43924,43926],{"class":222,"line":650},[220,43923,2567],{"class":264},[220,43925,43744],{"class":420},[220,43927,359],{"class":264},[220,43929,43930,43932,43934],{"class":222,"line":656},[220,43931,402],{"class":264},[220,43933,347],{"class":420},[220,43935,359],{"class":264},[212,43937,43938],{"className":468,"code":43823,"language":469,"meta":178,"style":178},[99,43939,43940,43948,43954,43966,43970,43978,43986],{"__ignoreMap":178},[220,43941,43942,43944,43946],{"class":222,"line":223},[220,43943,343],{"class":264},[220,43945,347],{"class":420},[220,43947,359],{"class":264},[220,43949,43950,43952],{"class":222,"line":179},[220,43951,364],{"class":264},[220,43953,43783],{"class":420},[220,43955,43956,43958,43960,43962,43964],{"class":222,"line":389},[220,43957,20482],{"class":226},[220,43959,353],{"class":260},[220,43961,743],{"class":264},[220,43963,24010],{"class":420},[220,43965,749],{"class":264},[220,43967,43968],{"class":222,"line":399},[220,43969,31959],{"class":264},[220,43971,43972,43974,43976],{"class":222,"line":644},[220,43973,2550],{"class":264},[220,43975,2553],{"class":420},[220,43977,386],{"class":264},[220,43979,43980,43982,43984],{"class":222,"line":650},[220,43981,2567],{"class":264},[220,43983,43744],{"class":420},[220,43985,359],{"class":264},[220,43987,43988,43990,43992],{"class":222,"line":656},[220,43989,402],{"class":264},[220,43991,347],{"class":420},[220,43993,359],{"class":264},[212,43995,43997],{"className":251,"code":43996,"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,43998,43999,44009,44013,44027,44031,44044,44052,44056,44060],{"__ignoreMap":178},[220,44000,44001,44003,44005,44007],{"class":222,"line":223},[220,44002,261],{"class":260},[220,44004,11512],{"class":264},[220,44006,268],{"class":260},[220,44008,4007],{"class":230},[220,44010,44011],{"class":222,"line":179},[220,44012,647],{"emptyLinePlaceholder":194},[220,44014,44015,44017,44019,44021,44023,44025],{"class":222,"line":389},[220,44016,1735],{"class":260},[220,44018,1738],{"class":420},[220,44020,1741],{"class":260},[220,44022,1744],{"class":260},[220,44024,1747],{"class":226},[220,44026,1750],{"class":264},[220,44028,44029],{"class":222,"line":399},[220,44030,1765],{"class":264},[220,44032,44033,44035,44038,44040,44042],{"class":222,"line":644},[220,44034,1770],{"class":264},[220,44036,44037],{"class":230},"'DiffuseBlur'",[220,44039,32203],{"class":264},[220,44041,24010],{"class":420},[220,44043,7546],{"class":264},[220,44045,44046,44048,44050],{"class":222,"line":650},[220,44047,7014],{"class":264},[220,44049,3206],{"class":230},[220,44051,2465],{"class":264},[220,44053,44054],{"class":222,"line":656},[220,44055,7031],{"class":264},[220,44057,44058],{"class":222,"line":673},[220,44059,1787],{"class":264},[220,44061,44062],{"class":222,"line":682},[220,44063,1792],{"class":264},[1504,44065,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44067},[44068,44069],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":43744,"description":43752},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":44076,"title":44077,"body":44078,"category":33396,"componentType":25883,"description":44085,"extension":191,"meta":44346,"navigation":194,"path":44347,"requiresChild":194,"seo":44348,"stem":44349,"__hash__":44350},"components\u002Fdocs\u002Fcomponents\u002FDisplacementMap.md","DisplacementMap",{"type":8,"value":44079,"toc":44342},[44080,44083,44086,44088,44090,44093,44095,44340],[11,44081,44077],{"id":44082},"displacementmap",[15,44084,44085],{},"Distorts child content using another layer's pixels as a displacement map",[31911,44087],{"component":44077},[23,44089,31915],{"id":26533},[31917,44091],{":props":44092},"[{\"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,44094,31923],{"id":31922},[246,44096,44097,44142,44186,44230,44274],{":tabs":1557},[212,44098,44100],{"className":334,"code":44099,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDisplacementMap>\n \u003CCircle \u002F>\n \u003C\u002FDisplacementMap>\n\u003C\u002FShader>\n",[99,44101,44102,44110,44118,44126,44134],{"__ignoreMap":178},[220,44103,44104,44106,44108],{"class":222,"line":223},[220,44105,343],{"class":264},[220,44107,347],{"class":346},[220,44109,359],{"class":264},[220,44111,44112,44114,44116],{"class":222,"line":179},[220,44113,364],{"class":264},[220,44115,44077],{"class":346},[220,44117,359],{"class":264},[220,44119,44120,44122,44124],{"class":222,"line":389},[220,44121,2550],{"class":264},[220,44123,2553],{"class":346},[220,44125,386],{"class":264},[220,44127,44128,44130,44132],{"class":222,"line":399},[220,44129,2567],{"class":264},[220,44131,44077],{"class":346},[220,44133,359],{"class":264},[220,44135,44136,44138,44140],{"class":222,"line":644},[220,44137,402],{"class":264},[220,44139,347],{"class":346},[220,44141,359],{"class":264},[212,44143,44144],{"className":409,"code":44099,"language":411,"meta":178,"style":178},[99,44145,44146,44154,44162,44170,44178],{"__ignoreMap":178},[220,44147,44148,44150,44152],{"class":222,"line":223},[220,44149,343],{"class":264},[220,44151,347],{"class":420},[220,44153,359],{"class":264},[220,44155,44156,44158,44160],{"class":222,"line":179},[220,44157,364],{"class":264},[220,44159,44077],{"class":420},[220,44161,359],{"class":264},[220,44163,44164,44166,44168],{"class":222,"line":389},[220,44165,2550],{"class":264},[220,44167,2553],{"class":420},[220,44169,386],{"class":264},[220,44171,44172,44174,44176],{"class":222,"line":399},[220,44173,2567],{"class":264},[220,44175,44077],{"class":420},[220,44177,359],{"class":264},[220,44179,44180,44182,44184],{"class":222,"line":644},[220,44181,402],{"class":264},[220,44183,347],{"class":420},[220,44185,359],{"class":264},[212,44187,44188],{"className":2844,"code":44099,"language":2846,"meta":178,"style":178},[99,44189,44190,44198,44206,44214,44222],{"__ignoreMap":178},[220,44191,44192,44194,44196],{"class":222,"line":223},[220,44193,343],{"class":264},[220,44195,347],{"class":420},[220,44197,359],{"class":264},[220,44199,44200,44202,44204],{"class":222,"line":179},[220,44201,364],{"class":264},[220,44203,44077],{"class":420},[220,44205,359],{"class":264},[220,44207,44208,44210,44212],{"class":222,"line":389},[220,44209,2550],{"class":264},[220,44211,2553],{"class":420},[220,44213,386],{"class":264},[220,44215,44216,44218,44220],{"class":222,"line":399},[220,44217,2567],{"class":264},[220,44219,44077],{"class":420},[220,44221,359],{"class":264},[220,44223,44224,44226,44228],{"class":222,"line":644},[220,44225,402],{"class":264},[220,44227,347],{"class":420},[220,44229,359],{"class":264},[212,44231,44232],{"className":468,"code":44099,"language":469,"meta":178,"style":178},[99,44233,44234,44242,44250,44258,44266],{"__ignoreMap":178},[220,44235,44236,44238,44240],{"class":222,"line":223},[220,44237,343],{"class":264},[220,44239,347],{"class":420},[220,44241,359],{"class":264},[220,44243,44244,44246,44248],{"class":222,"line":179},[220,44245,364],{"class":264},[220,44247,44077],{"class":420},[220,44249,359],{"class":264},[220,44251,44252,44254,44256],{"class":222,"line":389},[220,44253,2550],{"class":264},[220,44255,2553],{"class":420},[220,44257,386],{"class":264},[220,44259,44260,44262,44264],{"class":222,"line":399},[220,44261,2567],{"class":264},[220,44263,44077],{"class":420},[220,44265,359],{"class":264},[220,44267,44268,44270,44272],{"class":222,"line":644},[220,44269,402],{"class":264},[220,44271,347],{"class":420},[220,44273,359],{"class":264},[212,44275,44277],{"className":251,"code":44276,"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,44278,44279,44289,44293,44307,44311,44320,44328,44332,44336],{"__ignoreMap":178},[220,44280,44281,44283,44285,44287],{"class":222,"line":223},[220,44282,261],{"class":260},[220,44284,11512],{"class":264},[220,44286,268],{"class":260},[220,44288,4007],{"class":230},[220,44290,44291],{"class":222,"line":179},[220,44292,647],{"emptyLinePlaceholder":194},[220,44294,44295,44297,44299,44301,44303,44305],{"class":222,"line":389},[220,44296,1735],{"class":260},[220,44298,1738],{"class":420},[220,44300,1741],{"class":260},[220,44302,1744],{"class":260},[220,44304,1747],{"class":226},[220,44306,1750],{"class":264},[220,44308,44309],{"class":222,"line":399},[220,44310,1765],{"class":264},[220,44312,44313,44315,44318],{"class":222,"line":644},[220,44314,1770],{"class":264},[220,44316,44317],{"class":230},"'DisplacementMap'",[220,44319,7009],{"class":264},[220,44321,44322,44324,44326],{"class":222,"line":650},[220,44323,7014],{"class":264},[220,44325,3206],{"class":230},[220,44327,2465],{"class":264},[220,44329,44330],{"class":222,"line":656},[220,44331,7031],{"class":264},[220,44333,44334],{"class":222,"line":673},[220,44335,1787],{"class":264},[220,44337,44338],{"class":222,"line":682},[220,44339,1792],{"class":264},[1504,44341,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":44343},[44344,44345],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdisplacementmap",{"title":44077,"description":44085},"docs\u002Fcomponents\u002FDisplacementMap","HycyWL6qHg4DTwqZElHNgjHrKGK_TxnCG4rLePq5EZc",{"id":44352,"title":44353,"body":44354,"category":32806,"componentType":25883,"description":44361,"extension":191,"meta":44622,"navigation":194,"path":44623,"requiresChild":194,"seo":44624,"stem":44625,"__hash__":44626},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":44355,"toc":44618},[44356,44359,44362,44364,44366,44369,44371,44616],[11,44357,44353],{"id":44358},"dither",[15,44360,44361],{},"Dithering effect with multiple pattern options",[31911,44363],{"component":44353},[23,44365,31915],{"id":26533},[31917,44367],{":props":44368},"[{\"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,44370,31923],{"id":31922},[246,44372,44373,44418,44462,44506,44550],{":tabs":1557},[212,44374,44376],{"className":334,"code":44375,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,44377,44378,44386,44394,44402,44410],{"__ignoreMap":178},[220,44379,44380,44382,44384],{"class":222,"line":223},[220,44381,343],{"class":264},[220,44383,347],{"class":346},[220,44385,359],{"class":264},[220,44387,44388,44390,44392],{"class":222,"line":179},[220,44389,364],{"class":264},[220,44391,44353],{"class":346},[220,44393,359],{"class":264},[220,44395,44396,44398,44400],{"class":222,"line":389},[220,44397,2550],{"class":264},[220,44399,2553],{"class":346},[220,44401,386],{"class":264},[220,44403,44404,44406,44408],{"class":222,"line":399},[220,44405,2567],{"class":264},[220,44407,44353],{"class":346},[220,44409,359],{"class":264},[220,44411,44412,44414,44416],{"class":222,"line":644},[220,44413,402],{"class":264},[220,44415,347],{"class":346},[220,44417,359],{"class":264},[212,44419,44420],{"className":409,"code":44375,"language":411,"meta":178,"style":178},[99,44421,44422,44430,44438,44446,44454],{"__ignoreMap":178},[220,44423,44424,44426,44428],{"class":222,"line":223},[220,44425,343],{"class":264},[220,44427,347],{"class":420},[220,44429,359],{"class":264},[220,44431,44432,44434,44436],{"class":222,"line":179},[220,44433,364],{"class":264},[220,44435,44353],{"class":420},[220,44437,359],{"class":264},[220,44439,44440,44442,44444],{"class":222,"line":389},[220,44441,2550],{"class":264},[220,44443,2553],{"class":420},[220,44445,386],{"class":264},[220,44447,44448,44450,44452],{"class":222,"line":399},[220,44449,2567],{"class":264},[220,44451,44353],{"class":420},[220,44453,359],{"class":264},[220,44455,44456,44458,44460],{"class":222,"line":644},[220,44457,402],{"class":264},[220,44459,347],{"class":420},[220,44461,359],{"class":264},[212,44463,44464],{"className":2844,"code":44375,"language":2846,"meta":178,"style":178},[99,44465,44466,44474,44482,44490,44498],{"__ignoreMap":178},[220,44467,44468,44470,44472],{"class":222,"line":223},[220,44469,343],{"class":264},[220,44471,347],{"class":420},[220,44473,359],{"class":264},[220,44475,44476,44478,44480],{"class":222,"line":179},[220,44477,364],{"class":264},[220,44479,44353],{"class":420},[220,44481,359],{"class":264},[220,44483,44484,44486,44488],{"class":222,"line":389},[220,44485,2550],{"class":264},[220,44487,2553],{"class":420},[220,44489,386],{"class":264},[220,44491,44492,44494,44496],{"class":222,"line":399},[220,44493,2567],{"class":264},[220,44495,44353],{"class":420},[220,44497,359],{"class":264},[220,44499,44500,44502,44504],{"class":222,"line":644},[220,44501,402],{"class":264},[220,44503,347],{"class":420},[220,44505,359],{"class":264},[212,44507,44508],{"className":468,"code":44375,"language":469,"meta":178,"style":178},[99,44509,44510,44518,44526,44534,44542],{"__ignoreMap":178},[220,44511,44512,44514,44516],{"class":222,"line":223},[220,44513,343],{"class":264},[220,44515,347],{"class":420},[220,44517,359],{"class":264},[220,44519,44520,44522,44524],{"class":222,"line":179},[220,44521,364],{"class":264},[220,44523,44353],{"class":420},[220,44525,359],{"class":264},[220,44527,44528,44530,44532],{"class":222,"line":389},[220,44529,2550],{"class":264},[220,44531,2553],{"class":420},[220,44533,386],{"class":264},[220,44535,44536,44538,44540],{"class":222,"line":399},[220,44537,2567],{"class":264},[220,44539,44353],{"class":420},[220,44541,359],{"class":264},[220,44543,44544,44546,44548],{"class":222,"line":644},[220,44545,402],{"class":264},[220,44547,347],{"class":420},[220,44549,359],{"class":264},[212,44551,44553],{"className":251,"code":44552,"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,44554,44555,44565,44569,44583,44587,44596,44604,44608,44612],{"__ignoreMap":178},[220,44556,44557,44559,44561,44563],{"class":222,"line":223},[220,44558,261],{"class":260},[220,44560,11512],{"class":264},[220,44562,268],{"class":260},[220,44564,4007],{"class":230},[220,44566,44567],{"class":222,"line":179},[220,44568,647],{"emptyLinePlaceholder":194},[220,44570,44571,44573,44575,44577,44579,44581],{"class":222,"line":389},[220,44572,1735],{"class":260},[220,44574,1738],{"class":420},[220,44576,1741],{"class":260},[220,44578,1744],{"class":260},[220,44580,1747],{"class":226},[220,44582,1750],{"class":264},[220,44584,44585],{"class":222,"line":399},[220,44586,1765],{"class":264},[220,44588,44589,44591,44594],{"class":222,"line":644},[220,44590,1770],{"class":264},[220,44592,44593],{"class":230},"'Dither'",[220,44595,7009],{"class":264},[220,44597,44598,44600,44602],{"class":222,"line":650},[220,44599,7014],{"class":264},[220,44601,3206],{"class":230},[220,44603,2465],{"class":264},[220,44605,44606],{"class":222,"line":656},[220,44607,7031],{"class":264},[220,44609,44610],{"class":222,"line":673},[220,44611,1787],{"class":264},[220,44613,44614],{"class":222,"line":682},[220,44615,1792],{"class":264},[1504,44617,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":44619},[44620,44621],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":44353,"description":44361},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":44628,"title":44629,"body":44630,"category":33063,"componentType":25877,"description":44637,"extension":191,"meta":44865,"navigation":194,"path":44866,"requiresChild":32530,"seo":44867,"stem":44868,"__hash__":44869},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":44631,"toc":44861},[44632,44635,44638,44640,44642,44645,44647,44859],[11,44633,44629],{"id":44634},"dotgrid",[15,44636,44637],{},"Grid of dots with optional twinkling animation",[31911,44639],{"component":44629},[23,44641,31915],{"id":26533},[31917,44643],{":props":44644},"[{\"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,44646,31923],{"id":31922},[246,44648,44649,44688,44726,44764,44802],{":tabs":1557},[212,44650,44652],{"className":334,"code":44651,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,44653,44654,44662,44668,44676,44680],{"__ignoreMap":178},[220,44655,44656,44658,44660],{"class":222,"line":223},[220,44657,343],{"class":264},[220,44659,347],{"class":346},[220,44661,359],{"class":264},[220,44663,44664,44666],{"class":222,"line":179},[220,44665,364],{"class":264},[220,44667,19503],{"class":346},[220,44669,44670,44672,44674],{"class":222,"line":389},[220,44671,9635],{"class":226},[220,44673,353],{"class":264},[220,44675,9591],{"class":230},[220,44677,44678],{"class":222,"line":399},[220,44679,1234],{"class":264},[220,44681,44682,44684,44686],{"class":222,"line":644},[220,44683,402],{"class":264},[220,44685,347],{"class":346},[220,44687,359],{"class":264},[212,44689,44690],{"className":409,"code":44651,"language":411,"meta":178,"style":178},[99,44691,44692,44700,44706,44714,44718],{"__ignoreMap":178},[220,44693,44694,44696,44698],{"class":222,"line":223},[220,44695,343],{"class":264},[220,44697,347],{"class":420},[220,44699,359],{"class":264},[220,44701,44702,44704],{"class":222,"line":179},[220,44703,364],{"class":264},[220,44705,19503],{"class":420},[220,44707,44708,44710,44712],{"class":222,"line":389},[220,44709,9635],{"class":226},[220,44711,353],{"class":260},[220,44713,9591],{"class":230},[220,44715,44716],{"class":222,"line":399},[220,44717,1234],{"class":264},[220,44719,44720,44722,44724],{"class":222,"line":644},[220,44721,402],{"class":264},[220,44723,347],{"class":420},[220,44725,359],{"class":264},[212,44727,44728],{"className":2844,"code":44651,"language":2846,"meta":178,"style":178},[99,44729,44730,44738,44744,44752,44756],{"__ignoreMap":178},[220,44731,44732,44734,44736],{"class":222,"line":223},[220,44733,343],{"class":264},[220,44735,347],{"class":420},[220,44737,359],{"class":264},[220,44739,44740,44742],{"class":222,"line":179},[220,44741,364],{"class":264},[220,44743,19503],{"class":420},[220,44745,44746,44748,44750],{"class":222,"line":389},[220,44747,9635],{"class":226},[220,44749,353],{"class":264},[220,44751,9591],{"class":230},[220,44753,44754],{"class":222,"line":399},[220,44755,1234],{"class":264},[220,44757,44758,44760,44762],{"class":222,"line":644},[220,44759,402],{"class":264},[220,44761,347],{"class":420},[220,44763,359],{"class":264},[212,44765,44766],{"className":468,"code":44651,"language":469,"meta":178,"style":178},[99,44767,44768,44776,44782,44790,44794],{"__ignoreMap":178},[220,44769,44770,44772,44774],{"class":222,"line":223},[220,44771,343],{"class":264},[220,44773,347],{"class":420},[220,44775,359],{"class":264},[220,44777,44778,44780],{"class":222,"line":179},[220,44779,364],{"class":264},[220,44781,19503],{"class":420},[220,44783,44784,44786,44788],{"class":222,"line":389},[220,44785,9635],{"class":226},[220,44787,353],{"class":260},[220,44789,9591],{"class":230},[220,44791,44792],{"class":222,"line":399},[220,44793,1234],{"class":264},[220,44795,44796,44798,44800],{"class":222,"line":644},[220,44797,402],{"class":264},[220,44799,347],{"class":420},[220,44801,359],{"class":264},[212,44803,44805],{"className":251,"code":44804,"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,44806,44807,44817,44821,44835,44839,44851,44855],{"__ignoreMap":178},[220,44808,44809,44811,44813,44815],{"class":222,"line":223},[220,44810,261],{"class":260},[220,44812,11512],{"class":264},[220,44814,268],{"class":260},[220,44816,4007],{"class":230},[220,44818,44819],{"class":222,"line":179},[220,44820,647],{"emptyLinePlaceholder":194},[220,44822,44823,44825,44827,44829,44831,44833],{"class":222,"line":389},[220,44824,1735],{"class":260},[220,44826,1738],{"class":420},[220,44828,1741],{"class":260},[220,44830,1744],{"class":260},[220,44832,1747],{"class":226},[220,44834,1750],{"class":264},[220,44836,44837],{"class":222,"line":399},[220,44838,1765],{"class":264},[220,44840,44841,44843,44845,44847,44849],{"class":222,"line":644},[220,44842,1770],{"class":264},[220,44844,20056],{"class":230},[220,44846,1776],{"class":264},[220,44848,10169],{"class":230},[220,44850,1782],{"class":264},[220,44852,44853],{"class":222,"line":650},[220,44854,1787],{"class":264},[220,44856,44857],{"class":222,"line":656},[220,44858,1792],{"class":264},[1504,44860,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44862},[44863,44864],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":44629,"description":44637},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":44871,"title":44872,"body":44873,"category":32806,"componentType":25883,"description":44880,"extension":191,"meta":45234,"navigation":194,"path":45235,"requiresChild":194,"seo":45236,"stem":45237,"__hash__":45238},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":44874,"toc":45230},[44875,44878,44881,44883,44885,44888,44890,45228],[11,44876,44872],{"id":44877},"dropshadow",[15,44879,44880],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[31911,44882],{"component":44872},[23,44884,31915],{"id":26533},[31917,44886],{":props":44887},"[{\"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,44889,31923],{"id":31922},[246,44891,44892,44956,45023,45087,45153],{":tabs":1557},[212,44893,44895],{"className":334,"code":44894,"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,44896,44897,44905,44912,44920,44928,44932,44940,44948],{"__ignoreMap":178},[220,44898,44899,44901,44903],{"class":222,"line":223},[220,44900,343],{"class":264},[220,44902,347],{"class":346},[220,44904,359],{"class":264},[220,44906,44907,44909],{"class":222,"line":179},[220,44908,364],{"class":264},[220,44910,44911],{"class":346},"DropShadow\n",[220,44913,44914,44916,44918],{"class":222,"line":389},[220,44915,9635],{"class":226},[220,44917,353],{"class":264},[220,44919,19474],{"class":230},[220,44921,44922,44924,44926],{"class":222,"line":399},[220,44923,20371],{"class":226},[220,44925,353],{"class":264},[220,44927,42358],{"class":230},[220,44929,44930],{"class":222,"line":644},[220,44931,31959],{"class":264},[220,44933,44934,44936,44938],{"class":222,"line":650},[220,44935,2550],{"class":264},[220,44937,2553],{"class":346},[220,44939,386],{"class":264},[220,44941,44942,44944,44946],{"class":222,"line":656},[220,44943,2567],{"class":264},[220,44945,44872],{"class":346},[220,44947,359],{"class":264},[220,44949,44950,44952,44954],{"class":222,"line":673},[220,44951,402],{"class":264},[220,44953,347],{"class":346},[220,44955,359],{"class":264},[212,44957,44959],{"className":409,"code":44958,"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,44960,44961,44969,44975,44983,44995,44999,45007,45015],{"__ignoreMap":178},[220,44962,44963,44965,44967],{"class":222,"line":223},[220,44964,343],{"class":264},[220,44966,347],{"class":420},[220,44968,359],{"class":264},[220,44970,44971,44973],{"class":222,"line":179},[220,44972,364],{"class":264},[220,44974,44911],{"class":420},[220,44976,44977,44979,44981],{"class":222,"line":389},[220,44978,9635],{"class":226},[220,44980,353],{"class":260},[220,44982,19474],{"class":230},[220,44984,44985,44987,44989,44991,44993],{"class":222,"line":399},[220,44986,20482],{"class":226},[220,44988,353],{"class":260},[220,44990,743],{"class":264},[220,44992,7754],{"class":420},[220,44994,749],{"class":264},[220,44996,44997],{"class":222,"line":644},[220,44998,31959],{"class":264},[220,45000,45001,45003,45005],{"class":222,"line":650},[220,45002,2550],{"class":264},[220,45004,2553],{"class":420},[220,45006,386],{"class":264},[220,45008,45009,45011,45013],{"class":222,"line":656},[220,45010,2567],{"class":264},[220,45012,44872],{"class":420},[220,45014,359],{"class":264},[220,45016,45017,45019,45021],{"class":222,"line":673},[220,45018,402],{"class":264},[220,45020,347],{"class":420},[220,45022,359],{"class":264},[212,45024,45025],{"className":2844,"code":44958,"language":2846,"meta":178,"style":178},[99,45026,45027,45035,45041,45049,45059,45063,45071,45079],{"__ignoreMap":178},[220,45028,45029,45031,45033],{"class":222,"line":223},[220,45030,343],{"class":264},[220,45032,347],{"class":420},[220,45034,359],{"class":264},[220,45036,45037,45039],{"class":222,"line":179},[220,45038,364],{"class":264},[220,45040,44911],{"class":420},[220,45042,45043,45045,45047],{"class":222,"line":389},[220,45044,9635],{"class":226},[220,45046,353],{"class":264},[220,45048,19474],{"class":230},[220,45050,45051,45053,45055,45057],{"class":222,"line":399},[220,45052,20482],{"class":226},[220,45054,29871],{"class":264},[220,45056,7754],{"class":420},[220,45058,749],{"class":264},[220,45060,45061],{"class":222,"line":644},[220,45062,31959],{"class":264},[220,45064,45065,45067,45069],{"class":222,"line":650},[220,45066,2550],{"class":264},[220,45068,2553],{"class":420},[220,45070,386],{"class":264},[220,45072,45073,45075,45077],{"class":222,"line":656},[220,45074,2567],{"class":264},[220,45076,44872],{"class":420},[220,45078,359],{"class":264},[220,45080,45081,45083,45085],{"class":222,"line":673},[220,45082,402],{"class":264},[220,45084,347],{"class":420},[220,45086,359],{"class":264},[212,45088,45089],{"className":468,"code":44958,"language":469,"meta":178,"style":178},[99,45090,45091,45099,45105,45113,45125,45129,45137,45145],{"__ignoreMap":178},[220,45092,45093,45095,45097],{"class":222,"line":223},[220,45094,343],{"class":264},[220,45096,347],{"class":420},[220,45098,359],{"class":264},[220,45100,45101,45103],{"class":222,"line":179},[220,45102,364],{"class":264},[220,45104,44911],{"class":420},[220,45106,45107,45109,45111],{"class":222,"line":389},[220,45108,9635],{"class":226},[220,45110,353],{"class":260},[220,45112,19474],{"class":230},[220,45114,45115,45117,45119,45121,45123],{"class":222,"line":399},[220,45116,20482],{"class":226},[220,45118,353],{"class":260},[220,45120,743],{"class":264},[220,45122,7754],{"class":420},[220,45124,749],{"class":264},[220,45126,45127],{"class":222,"line":644},[220,45128,31959],{"class":264},[220,45130,45131,45133,45135],{"class":222,"line":650},[220,45132,2550],{"class":264},[220,45134,2553],{"class":420},[220,45136,386],{"class":264},[220,45138,45139,45141,45143],{"class":222,"line":656},[220,45140,2567],{"class":264},[220,45142,44872],{"class":420},[220,45144,359],{"class":264},[220,45146,45147,45149,45151],{"class":222,"line":673},[220,45148,402],{"class":264},[220,45150,347],{"class":420},[220,45152,359],{"class":264},[212,45154,45156],{"className":251,"code":45155,"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,45157,45158,45168,45172,45186,45190,45208,45216,45220,45224],{"__ignoreMap":178},[220,45159,45160,45162,45164,45166],{"class":222,"line":223},[220,45161,261],{"class":260},[220,45163,11512],{"class":264},[220,45165,268],{"class":260},[220,45167,4007],{"class":230},[220,45169,45170],{"class":222,"line":179},[220,45171,647],{"emptyLinePlaceholder":194},[220,45173,45174,45176,45178,45180,45182,45184],{"class":222,"line":389},[220,45175,1735],{"class":260},[220,45177,1738],{"class":420},[220,45179,1741],{"class":260},[220,45181,1744],{"class":260},[220,45183,1747],{"class":226},[220,45185,1750],{"class":264},[220,45187,45188],{"class":222,"line":399},[220,45189,1765],{"class":264},[220,45191,45192,45194,45197,45199,45201,45204,45206],{"class":222,"line":644},[220,45193,1770],{"class":264},[220,45195,45196],{"class":230},"'DropShadow'",[220,45198,1776],{"class":264},[220,45200,20034],{"class":230},[220,45202,45203],{"class":264},", intensity: ",[220,45205,7754],{"class":420},[220,45207,7546],{"class":264},[220,45209,45210,45212,45214],{"class":222,"line":650},[220,45211,7014],{"class":264},[220,45213,3206],{"class":230},[220,45215,2465],{"class":264},[220,45217,45218],{"class":222,"line":656},[220,45219,7031],{"class":264},[220,45221,45222],{"class":222,"line":673},[220,45223,1787],{"class":264},[220,45225,45226],{"class":222,"line":682},[220,45227,1792],{"class":264},[1504,45229,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45231},[45232,45233],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":44872,"description":44880},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":45240,"title":45241,"body":45242,"category":36368,"componentType":25883,"description":45249,"extension":191,"meta":45510,"navigation":194,"path":45511,"requiresChild":194,"seo":45512,"stem":45513,"__hash__":45514},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":45243,"toc":45506},[45244,45247,45250,45252,45254,45257,45259,45504],[11,45245,45241],{"id":45246},"duotone",[15,45248,45249],{},"Map colors to two tones based on luminance",[31911,45251],{"component":45241},[23,45253,31915],{"id":26533},[31917,45255],{":props":45256},"[{\"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,45258,31923],{"id":31922},[246,45260,45261,45306,45350,45394,45438],{":tabs":1557},[212,45262,45264],{"className":334,"code":45263,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,45265,45266,45274,45282,45290,45298],{"__ignoreMap":178},[220,45267,45268,45270,45272],{"class":222,"line":223},[220,45269,343],{"class":264},[220,45271,347],{"class":346},[220,45273,359],{"class":264},[220,45275,45276,45278,45280],{"class":222,"line":179},[220,45277,364],{"class":264},[220,45279,45241],{"class":346},[220,45281,359],{"class":264},[220,45283,45284,45286,45288],{"class":222,"line":389},[220,45285,2550],{"class":264},[220,45287,2553],{"class":346},[220,45289,386],{"class":264},[220,45291,45292,45294,45296],{"class":222,"line":399},[220,45293,2567],{"class":264},[220,45295,45241],{"class":346},[220,45297,359],{"class":264},[220,45299,45300,45302,45304],{"class":222,"line":644},[220,45301,402],{"class":264},[220,45303,347],{"class":346},[220,45305,359],{"class":264},[212,45307,45308],{"className":409,"code":45263,"language":411,"meta":178,"style":178},[99,45309,45310,45318,45326,45334,45342],{"__ignoreMap":178},[220,45311,45312,45314,45316],{"class":222,"line":223},[220,45313,343],{"class":264},[220,45315,347],{"class":420},[220,45317,359],{"class":264},[220,45319,45320,45322,45324],{"class":222,"line":179},[220,45321,364],{"class":264},[220,45323,45241],{"class":420},[220,45325,359],{"class":264},[220,45327,45328,45330,45332],{"class":222,"line":389},[220,45329,2550],{"class":264},[220,45331,2553],{"class":420},[220,45333,386],{"class":264},[220,45335,45336,45338,45340],{"class":222,"line":399},[220,45337,2567],{"class":264},[220,45339,45241],{"class":420},[220,45341,359],{"class":264},[220,45343,45344,45346,45348],{"class":222,"line":644},[220,45345,402],{"class":264},[220,45347,347],{"class":420},[220,45349,359],{"class":264},[212,45351,45352],{"className":2844,"code":45263,"language":2846,"meta":178,"style":178},[99,45353,45354,45362,45370,45378,45386],{"__ignoreMap":178},[220,45355,45356,45358,45360],{"class":222,"line":223},[220,45357,343],{"class":264},[220,45359,347],{"class":420},[220,45361,359],{"class":264},[220,45363,45364,45366,45368],{"class":222,"line":179},[220,45365,364],{"class":264},[220,45367,45241],{"class":420},[220,45369,359],{"class":264},[220,45371,45372,45374,45376],{"class":222,"line":389},[220,45373,2550],{"class":264},[220,45375,2553],{"class":420},[220,45377,386],{"class":264},[220,45379,45380,45382,45384],{"class":222,"line":399},[220,45381,2567],{"class":264},[220,45383,45241],{"class":420},[220,45385,359],{"class":264},[220,45387,45388,45390,45392],{"class":222,"line":644},[220,45389,402],{"class":264},[220,45391,347],{"class":420},[220,45393,359],{"class":264},[212,45395,45396],{"className":468,"code":45263,"language":469,"meta":178,"style":178},[99,45397,45398,45406,45414,45422,45430],{"__ignoreMap":178},[220,45399,45400,45402,45404],{"class":222,"line":223},[220,45401,343],{"class":264},[220,45403,347],{"class":420},[220,45405,359],{"class":264},[220,45407,45408,45410,45412],{"class":222,"line":179},[220,45409,364],{"class":264},[220,45411,45241],{"class":420},[220,45413,359],{"class":264},[220,45415,45416,45418,45420],{"class":222,"line":389},[220,45417,2550],{"class":264},[220,45419,2553],{"class":420},[220,45421,386],{"class":264},[220,45423,45424,45426,45428],{"class":222,"line":399},[220,45425,2567],{"class":264},[220,45427,45241],{"class":420},[220,45429,359],{"class":264},[220,45431,45432,45434,45436],{"class":222,"line":644},[220,45433,402],{"class":264},[220,45435,347],{"class":420},[220,45437,359],{"class":264},[212,45439,45441],{"className":251,"code":45440,"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,45442,45443,45453,45457,45471,45475,45484,45492,45496,45500],{"__ignoreMap":178},[220,45444,45445,45447,45449,45451],{"class":222,"line":223},[220,45446,261],{"class":260},[220,45448,11512],{"class":264},[220,45450,268],{"class":260},[220,45452,4007],{"class":230},[220,45454,45455],{"class":222,"line":179},[220,45456,647],{"emptyLinePlaceholder":194},[220,45458,45459,45461,45463,45465,45467,45469],{"class":222,"line":389},[220,45460,1735],{"class":260},[220,45462,1738],{"class":420},[220,45464,1741],{"class":260},[220,45466,1744],{"class":260},[220,45468,1747],{"class":226},[220,45470,1750],{"class":264},[220,45472,45473],{"class":222,"line":399},[220,45474,1765],{"class":264},[220,45476,45477,45479,45482],{"class":222,"line":644},[220,45478,1770],{"class":264},[220,45480,45481],{"class":230},"'Duotone'",[220,45483,7009],{"class":264},[220,45485,45486,45488,45490],{"class":222,"line":650},[220,45487,7014],{"class":264},[220,45489,3206],{"class":230},[220,45491,2465],{"class":264},[220,45493,45494],{"class":222,"line":656},[220,45495,7031],{"class":264},[220,45497,45498],{"class":222,"line":673},[220,45499,1787],{"class":264},[220,45501,45502],{"class":222,"line":682},[220,45503,1792],{"class":264},[1504,45505,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":45507},[45508,45509],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":45241,"description":45249},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":45516,"title":45517,"body":45518,"category":15908,"componentType":25877,"description":45525,"extension":191,"meta":45755,"navigation":194,"path":45756,"requiresChild":32530,"seo":45757,"stem":45758,"__hash__":45759},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":45519,"toc":45751},[45520,45523,45526,45528,45530,45533,45535,45749],[11,45521,45517],{"id":45522},"ellipse",[15,45524,45525],{},"Ellipse with independently adjustable horizontal and vertical radii",[31911,45527],{"component":45517},[23,45529,31915],{"id":26533},[31917,45531],{":props":45532},"[{\"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,45534,31923],{"id":31922},[246,45536,45537,45577,45615,45653,45691],{":tabs":1557},[212,45538,45540],{"className":334,"code":45539,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,45541,45542,45550,45557,45565,45569],{"__ignoreMap":178},[220,45543,45544,45546,45548],{"class":222,"line":223},[220,45545,343],{"class":264},[220,45547,347],{"class":346},[220,45549,359],{"class":264},[220,45551,45552,45554],{"class":222,"line":179},[220,45553,364],{"class":264},[220,45555,45556],{"class":346},"Ellipse\n",[220,45558,45559,45561,45563],{"class":222,"line":389},[220,45560,9635],{"class":226},[220,45562,353],{"class":264},[220,45564,9591],{"class":230},[220,45566,45567],{"class":222,"line":399},[220,45568,1234],{"class":264},[220,45570,45571,45573,45575],{"class":222,"line":644},[220,45572,402],{"class":264},[220,45574,347],{"class":346},[220,45576,359],{"class":264},[212,45578,45579],{"className":409,"code":45539,"language":411,"meta":178,"style":178},[99,45580,45581,45589,45595,45603,45607],{"__ignoreMap":178},[220,45582,45583,45585,45587],{"class":222,"line":223},[220,45584,343],{"class":264},[220,45586,347],{"class":420},[220,45588,359],{"class":264},[220,45590,45591,45593],{"class":222,"line":179},[220,45592,364],{"class":264},[220,45594,45556],{"class":420},[220,45596,45597,45599,45601],{"class":222,"line":389},[220,45598,9635],{"class":226},[220,45600,353],{"class":260},[220,45602,9591],{"class":230},[220,45604,45605],{"class":222,"line":399},[220,45606,1234],{"class":264},[220,45608,45609,45611,45613],{"class":222,"line":644},[220,45610,402],{"class":264},[220,45612,347],{"class":420},[220,45614,359],{"class":264},[212,45616,45617],{"className":2844,"code":45539,"language":2846,"meta":178,"style":178},[99,45618,45619,45627,45633,45641,45645],{"__ignoreMap":178},[220,45620,45621,45623,45625],{"class":222,"line":223},[220,45622,343],{"class":264},[220,45624,347],{"class":420},[220,45626,359],{"class":264},[220,45628,45629,45631],{"class":222,"line":179},[220,45630,364],{"class":264},[220,45632,45556],{"class":420},[220,45634,45635,45637,45639],{"class":222,"line":389},[220,45636,9635],{"class":226},[220,45638,353],{"class":264},[220,45640,9591],{"class":230},[220,45642,45643],{"class":222,"line":399},[220,45644,1234],{"class":264},[220,45646,45647,45649,45651],{"class":222,"line":644},[220,45648,402],{"class":264},[220,45650,347],{"class":420},[220,45652,359],{"class":264},[212,45654,45655],{"className":468,"code":45539,"language":469,"meta":178,"style":178},[99,45656,45657,45665,45671,45679,45683],{"__ignoreMap":178},[220,45658,45659,45661,45663],{"class":222,"line":223},[220,45660,343],{"class":264},[220,45662,347],{"class":420},[220,45664,359],{"class":264},[220,45666,45667,45669],{"class":222,"line":179},[220,45668,364],{"class":264},[220,45670,45556],{"class":420},[220,45672,45673,45675,45677],{"class":222,"line":389},[220,45674,9635],{"class":226},[220,45676,353],{"class":260},[220,45678,9591],{"class":230},[220,45680,45681],{"class":222,"line":399},[220,45682,1234],{"class":264},[220,45684,45685,45687,45689],{"class":222,"line":644},[220,45686,402],{"class":264},[220,45688,347],{"class":420},[220,45690,359],{"class":264},[212,45692,45694],{"className":251,"code":45693,"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,45695,45696,45706,45710,45724,45728,45741,45745],{"__ignoreMap":178},[220,45697,45698,45700,45702,45704],{"class":222,"line":223},[220,45699,261],{"class":260},[220,45701,11512],{"class":264},[220,45703,268],{"class":260},[220,45705,4007],{"class":230},[220,45707,45708],{"class":222,"line":179},[220,45709,647],{"emptyLinePlaceholder":194},[220,45711,45712,45714,45716,45718,45720,45722],{"class":222,"line":389},[220,45713,1735],{"class":260},[220,45715,1738],{"class":420},[220,45717,1741],{"class":260},[220,45719,1744],{"class":260},[220,45721,1747],{"class":226},[220,45723,1750],{"class":264},[220,45725,45726],{"class":222,"line":399},[220,45727,1765],{"class":264},[220,45729,45730,45732,45735,45737,45739],{"class":222,"line":644},[220,45731,1770],{"class":264},[220,45733,45734],{"class":230},"'Ellipse'",[220,45736,1776],{"class":264},[220,45738,10169],{"class":230},[220,45740,1782],{"class":264},[220,45742,45743],{"class":222,"line":650},[220,45744,1787],{"class":264},[220,45746,45747],{"class":222,"line":656},[220,45748,1792],{"class":264},[1504,45750,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45752},[45753,45754],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":45517,"description":45525},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":45761,"title":20984,"body":45762,"category":36569,"componentType":25883,"description":45769,"extension":191,"meta":46029,"navigation":194,"path":46030,"requiresChild":194,"seo":46031,"stem":46032,"__hash__":46033},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":45763,"toc":46025},[45764,45767,45770,45772,45774,45777,45779,46023],[11,45765,20984],{"id":45766},"emboss",[15,45768,45769],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[31911,45771],{"component":20984},[23,45773,31915],{"id":26533},[31917,45775],{":props":45776},"[{\"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,45778,31923],{"id":31922},[246,45780,45781,45826,45870,45914,45958],{":tabs":1557},[212,45782,45784],{"className":334,"code":45783,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,45785,45786,45794,45802,45810,45818],{"__ignoreMap":178},[220,45787,45788,45790,45792],{"class":222,"line":223},[220,45789,343],{"class":264},[220,45791,347],{"class":346},[220,45793,359],{"class":264},[220,45795,45796,45798,45800],{"class":222,"line":179},[220,45797,364],{"class":264},[220,45799,20984],{"class":346},[220,45801,359],{"class":264},[220,45803,45804,45806,45808],{"class":222,"line":389},[220,45805,2550],{"class":264},[220,45807,2553],{"class":346},[220,45809,386],{"class":264},[220,45811,45812,45814,45816],{"class":222,"line":399},[220,45813,2567],{"class":264},[220,45815,20984],{"class":346},[220,45817,359],{"class":264},[220,45819,45820,45822,45824],{"class":222,"line":644},[220,45821,402],{"class":264},[220,45823,347],{"class":346},[220,45825,359],{"class":264},[212,45827,45828],{"className":409,"code":45783,"language":411,"meta":178,"style":178},[99,45829,45830,45838,45846,45854,45862],{"__ignoreMap":178},[220,45831,45832,45834,45836],{"class":222,"line":223},[220,45833,343],{"class":264},[220,45835,347],{"class":420},[220,45837,359],{"class":264},[220,45839,45840,45842,45844],{"class":222,"line":179},[220,45841,364],{"class":264},[220,45843,20984],{"class":420},[220,45845,359],{"class":264},[220,45847,45848,45850,45852],{"class":222,"line":389},[220,45849,2550],{"class":264},[220,45851,2553],{"class":420},[220,45853,386],{"class":264},[220,45855,45856,45858,45860],{"class":222,"line":399},[220,45857,2567],{"class":264},[220,45859,20984],{"class":420},[220,45861,359],{"class":264},[220,45863,45864,45866,45868],{"class":222,"line":644},[220,45865,402],{"class":264},[220,45867,347],{"class":420},[220,45869,359],{"class":264},[212,45871,45872],{"className":2844,"code":45783,"language":2846,"meta":178,"style":178},[99,45873,45874,45882,45890,45898,45906],{"__ignoreMap":178},[220,45875,45876,45878,45880],{"class":222,"line":223},[220,45877,343],{"class":264},[220,45879,347],{"class":420},[220,45881,359],{"class":264},[220,45883,45884,45886,45888],{"class":222,"line":179},[220,45885,364],{"class":264},[220,45887,20984],{"class":420},[220,45889,359],{"class":264},[220,45891,45892,45894,45896],{"class":222,"line":389},[220,45893,2550],{"class":264},[220,45895,2553],{"class":420},[220,45897,386],{"class":264},[220,45899,45900,45902,45904],{"class":222,"line":399},[220,45901,2567],{"class":264},[220,45903,20984],{"class":420},[220,45905,359],{"class":264},[220,45907,45908,45910,45912],{"class":222,"line":644},[220,45909,402],{"class":264},[220,45911,347],{"class":420},[220,45913,359],{"class":264},[212,45915,45916],{"className":468,"code":45783,"language":469,"meta":178,"style":178},[99,45917,45918,45926,45934,45942,45950],{"__ignoreMap":178},[220,45919,45920,45922,45924],{"class":222,"line":223},[220,45921,343],{"class":264},[220,45923,347],{"class":420},[220,45925,359],{"class":264},[220,45927,45928,45930,45932],{"class":222,"line":179},[220,45929,364],{"class":264},[220,45931,20984],{"class":420},[220,45933,359],{"class":264},[220,45935,45936,45938,45940],{"class":222,"line":389},[220,45937,2550],{"class":264},[220,45939,2553],{"class":420},[220,45941,386],{"class":264},[220,45943,45944,45946,45948],{"class":222,"line":399},[220,45945,2567],{"class":264},[220,45947,20984],{"class":420},[220,45949,359],{"class":264},[220,45951,45952,45954,45956],{"class":222,"line":644},[220,45953,402],{"class":264},[220,45955,347],{"class":420},[220,45957,359],{"class":264},[212,45959,45961],{"className":251,"code":45960,"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,45962,45963,45973,45977,45991,45995,46003,46011,46015,46019],{"__ignoreMap":178},[220,45964,45965,45967,45969,45971],{"class":222,"line":223},[220,45966,261],{"class":260},[220,45968,11512],{"class":264},[220,45970,268],{"class":260},[220,45972,4007],{"class":230},[220,45974,45975],{"class":222,"line":179},[220,45976,647],{"emptyLinePlaceholder":194},[220,45978,45979,45981,45983,45985,45987,45989],{"class":222,"line":389},[220,45980,1735],{"class":260},[220,45982,1738],{"class":420},[220,45984,1741],{"class":260},[220,45986,1744],{"class":260},[220,45988,1747],{"class":226},[220,45990,1750],{"class":264},[220,45992,45993],{"class":222,"line":399},[220,45994,1765],{"class":264},[220,45996,45997,45999,46001],{"class":222,"line":644},[220,45998,1770],{"class":264},[220,46000,21647],{"class":230},[220,46002,7009],{"class":264},[220,46004,46005,46007,46009],{"class":222,"line":650},[220,46006,7014],{"class":264},[220,46008,3206],{"class":230},[220,46010,2465],{"class":264},[220,46012,46013],{"class":222,"line":656},[220,46014,7031],{"class":264},[220,46016,46017],{"class":222,"line":673},[220,46018,1787],{"class":264},[220,46020,46021],{"class":222,"line":682},[220,46022,1792],{"class":264},[1504,46024,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46026},[46027,46028],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":20984,"description":45769},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":46035,"title":46036,"body":46037,"category":32806,"componentType":25883,"description":46044,"extension":191,"meta":46305,"navigation":194,"path":46306,"requiresChild":194,"seo":46307,"stem":46308,"__hash__":46309},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":46038,"toc":46301},[46039,46042,46045,46047,46049,46052,46054,46299],[11,46040,46036],{"id":46041},"engraving",[15,46043,46044],{},"Copper-plate line engraving — the image is redrawn as flowing line work whose weight swells with darkness, lines displaced by the form like a banknote portrait: a single plate, cross-hatched shadow plates, or one continuous spiral cut",[31911,46046],{"component":46036},[23,46048,31915],{"id":26533},[31917,46050],{":props":46051},"[{\"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,46053,31923],{"id":31922},[246,46055,46056,46101,46145,46189,46233],{":tabs":1557},[212,46057,46059],{"className":334,"code":46058,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,46060,46061,46069,46077,46085,46093],{"__ignoreMap":178},[220,46062,46063,46065,46067],{"class":222,"line":223},[220,46064,343],{"class":264},[220,46066,347],{"class":346},[220,46068,359],{"class":264},[220,46070,46071,46073,46075],{"class":222,"line":179},[220,46072,364],{"class":264},[220,46074,46036],{"class":346},[220,46076,359],{"class":264},[220,46078,46079,46081,46083],{"class":222,"line":389},[220,46080,2550],{"class":264},[220,46082,2553],{"class":346},[220,46084,386],{"class":264},[220,46086,46087,46089,46091],{"class":222,"line":399},[220,46088,2567],{"class":264},[220,46090,46036],{"class":346},[220,46092,359],{"class":264},[220,46094,46095,46097,46099],{"class":222,"line":644},[220,46096,402],{"class":264},[220,46098,347],{"class":346},[220,46100,359],{"class":264},[212,46102,46103],{"className":409,"code":46058,"language":411,"meta":178,"style":178},[99,46104,46105,46113,46121,46129,46137],{"__ignoreMap":178},[220,46106,46107,46109,46111],{"class":222,"line":223},[220,46108,343],{"class":264},[220,46110,347],{"class":420},[220,46112,359],{"class":264},[220,46114,46115,46117,46119],{"class":222,"line":179},[220,46116,364],{"class":264},[220,46118,46036],{"class":420},[220,46120,359],{"class":264},[220,46122,46123,46125,46127],{"class":222,"line":389},[220,46124,2550],{"class":264},[220,46126,2553],{"class":420},[220,46128,386],{"class":264},[220,46130,46131,46133,46135],{"class":222,"line":399},[220,46132,2567],{"class":264},[220,46134,46036],{"class":420},[220,46136,359],{"class":264},[220,46138,46139,46141,46143],{"class":222,"line":644},[220,46140,402],{"class":264},[220,46142,347],{"class":420},[220,46144,359],{"class":264},[212,46146,46147],{"className":2844,"code":46058,"language":2846,"meta":178,"style":178},[99,46148,46149,46157,46165,46173,46181],{"__ignoreMap":178},[220,46150,46151,46153,46155],{"class":222,"line":223},[220,46152,343],{"class":264},[220,46154,347],{"class":420},[220,46156,359],{"class":264},[220,46158,46159,46161,46163],{"class":222,"line":179},[220,46160,364],{"class":264},[220,46162,46036],{"class":420},[220,46164,359],{"class":264},[220,46166,46167,46169,46171],{"class":222,"line":389},[220,46168,2550],{"class":264},[220,46170,2553],{"class":420},[220,46172,386],{"class":264},[220,46174,46175,46177,46179],{"class":222,"line":399},[220,46176,2567],{"class":264},[220,46178,46036],{"class":420},[220,46180,359],{"class":264},[220,46182,46183,46185,46187],{"class":222,"line":644},[220,46184,402],{"class":264},[220,46186,347],{"class":420},[220,46188,359],{"class":264},[212,46190,46191],{"className":468,"code":46058,"language":469,"meta":178,"style":178},[99,46192,46193,46201,46209,46217,46225],{"__ignoreMap":178},[220,46194,46195,46197,46199],{"class":222,"line":223},[220,46196,343],{"class":264},[220,46198,347],{"class":420},[220,46200,359],{"class":264},[220,46202,46203,46205,46207],{"class":222,"line":179},[220,46204,364],{"class":264},[220,46206,46036],{"class":420},[220,46208,359],{"class":264},[220,46210,46211,46213,46215],{"class":222,"line":389},[220,46212,2550],{"class":264},[220,46214,2553],{"class":420},[220,46216,386],{"class":264},[220,46218,46219,46221,46223],{"class":222,"line":399},[220,46220,2567],{"class":264},[220,46222,46036],{"class":420},[220,46224,359],{"class":264},[220,46226,46227,46229,46231],{"class":222,"line":644},[220,46228,402],{"class":264},[220,46230,347],{"class":420},[220,46232,359],{"class":264},[212,46234,46236],{"className":251,"code":46235,"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,46237,46238,46248,46252,46266,46270,46279,46287,46291,46295],{"__ignoreMap":178},[220,46239,46240,46242,46244,46246],{"class":222,"line":223},[220,46241,261],{"class":260},[220,46243,11512],{"class":264},[220,46245,268],{"class":260},[220,46247,4007],{"class":230},[220,46249,46250],{"class":222,"line":179},[220,46251,647],{"emptyLinePlaceholder":194},[220,46253,46254,46256,46258,46260,46262,46264],{"class":222,"line":389},[220,46255,1735],{"class":260},[220,46257,1738],{"class":420},[220,46259,1741],{"class":260},[220,46261,1744],{"class":260},[220,46263,1747],{"class":226},[220,46265,1750],{"class":264},[220,46267,46268],{"class":222,"line":399},[220,46269,1765],{"class":264},[220,46271,46272,46274,46277],{"class":222,"line":644},[220,46273,1770],{"class":264},[220,46275,46276],{"class":230},"'Engraving'",[220,46278,7009],{"class":264},[220,46280,46281,46283,46285],{"class":222,"line":650},[220,46282,7014],{"class":264},[220,46284,3206],{"class":230},[220,46286,2465],{"class":264},[220,46288,46289],{"class":222,"line":656},[220,46290,7031],{"class":264},[220,46292,46293],{"class":222,"line":673},[220,46294,1787],{"class":264},[220,46296,46297],{"class":222,"line":682},[220,46298,1792],{"class":264},[1504,46300,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46302},[46303,46304],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":46036,"description":46044},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":46311,"title":46312,"body":46313,"category":33063,"componentType":25877,"description":46320,"extension":191,"meta":46505,"navigation":194,"path":46506,"requiresChild":32530,"seo":46507,"stem":46508,"__hash__":46509},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":46314,"toc":46501},[46315,46318,46321,46323,46325,46328,46330,46499],[11,46316,46312],{"id":46317},"erosionnoise",[15,46319,46320],{},"Branching, hydraulic-erosion ridges carved into noise",[31911,46322],{"component":46312},[23,46324,31915],{"id":26533},[31917,46326],{":props":46327},"[{\"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,46329,31923],{"id":31922},[246,46331,46332,46361,46389,46417,46445],{":tabs":1557},[212,46333,46335],{"className":334,"code":46334,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,46336,46337,46345,46353],{"__ignoreMap":178},[220,46338,46339,46341,46343],{"class":222,"line":223},[220,46340,343],{"class":264},[220,46342,347],{"class":346},[220,46344,359],{"class":264},[220,46346,46347,46349,46351],{"class":222,"line":179},[220,46348,364],{"class":264},[220,46350,46312],{"class":346},[220,46352,386],{"class":264},[220,46354,46355,46357,46359],{"class":222,"line":389},[220,46356,402],{"class":264},[220,46358,347],{"class":346},[220,46360,359],{"class":264},[212,46362,46363],{"className":409,"code":46334,"language":411,"meta":178,"style":178},[99,46364,46365,46373,46381],{"__ignoreMap":178},[220,46366,46367,46369,46371],{"class":222,"line":223},[220,46368,343],{"class":264},[220,46370,347],{"class":420},[220,46372,359],{"class":264},[220,46374,46375,46377,46379],{"class":222,"line":179},[220,46376,364],{"class":264},[220,46378,46312],{"class":420},[220,46380,386],{"class":264},[220,46382,46383,46385,46387],{"class":222,"line":389},[220,46384,402],{"class":264},[220,46386,347],{"class":420},[220,46388,359],{"class":264},[212,46390,46391],{"className":2844,"code":46334,"language":2846,"meta":178,"style":178},[99,46392,46393,46401,46409],{"__ignoreMap":178},[220,46394,46395,46397,46399],{"class":222,"line":223},[220,46396,343],{"class":264},[220,46398,347],{"class":420},[220,46400,359],{"class":264},[220,46402,46403,46405,46407],{"class":222,"line":179},[220,46404,364],{"class":264},[220,46406,46312],{"class":420},[220,46408,386],{"class":264},[220,46410,46411,46413,46415],{"class":222,"line":389},[220,46412,402],{"class":264},[220,46414,347],{"class":420},[220,46416,359],{"class":264},[212,46418,46419],{"className":468,"code":46334,"language":469,"meta":178,"style":178},[99,46420,46421,46429,46437],{"__ignoreMap":178},[220,46422,46423,46425,46427],{"class":222,"line":223},[220,46424,343],{"class":264},[220,46426,347],{"class":420},[220,46428,359],{"class":264},[220,46430,46431,46433,46435],{"class":222,"line":179},[220,46432,364],{"class":264},[220,46434,46312],{"class":420},[220,46436,386],{"class":264},[220,46438,46439,46441,46443],{"class":222,"line":389},[220,46440,402],{"class":264},[220,46442,347],{"class":420},[220,46444,359],{"class":264},[212,46446,46448],{"className":251,"code":46447,"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,46449,46450,46460,46464,46478,46482,46491,46495],{"__ignoreMap":178},[220,46451,46452,46454,46456,46458],{"class":222,"line":223},[220,46453,261],{"class":260},[220,46455,11512],{"class":264},[220,46457,268],{"class":260},[220,46459,4007],{"class":230},[220,46461,46462],{"class":222,"line":179},[220,46463,647],{"emptyLinePlaceholder":194},[220,46465,46466,46468,46470,46472,46474,46476],{"class":222,"line":389},[220,46467,1735],{"class":260},[220,46469,1738],{"class":420},[220,46471,1741],{"class":260},[220,46473,1744],{"class":260},[220,46475,1747],{"class":226},[220,46477,1750],{"class":264},[220,46479,46480],{"class":222,"line":399},[220,46481,1765],{"class":264},[220,46483,46484,46486,46489],{"class":222,"line":644},[220,46485,1770],{"class":264},[220,46487,46488],{"class":230},"'ErosionNoise'",[220,46490,2465],{"class":264},[220,46492,46493],{"class":222,"line":650},[220,46494,1787],{"class":264},[220,46496,46497],{"class":222,"line":656},[220,46498,1792],{"class":264},[1504,46500,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46502},[46503,46504],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ferosionnoise",{"title":46312,"description":46320},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":46511,"title":46512,"body":46513,"category":36368,"componentType":25883,"description":46520,"extension":191,"meta":46781,"navigation":194,"path":46782,"requiresChild":194,"seo":46783,"stem":46784,"__hash__":46785},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":46514,"toc":46777},[46515,46518,46521,46523,46525,46528,46530,46775],[11,46516,46512],{"id":46517},"exposure",[15,46519,46520],{},"Multiplicative exposure (gain) on the child. Unlike additive brightness, it scales values around black — blacks stay black while highlights can be pushed past 1.0 to feed HDR bloom and tone-mapping roll-off. Pointwise, so no extra render pass is needed.",[31911,46522],{"component":46512},[23,46524,31915],{"id":26533},[31917,46526],{":props":46527},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,46529,31923],{"id":31922},[246,46531,46532,46577,46621,46665,46709],{":tabs":1557},[212,46533,46535],{"className":334,"code":46534,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,46536,46537,46545,46553,46561,46569],{"__ignoreMap":178},[220,46538,46539,46541,46543],{"class":222,"line":223},[220,46540,343],{"class":264},[220,46542,347],{"class":346},[220,46544,359],{"class":264},[220,46546,46547,46549,46551],{"class":222,"line":179},[220,46548,364],{"class":264},[220,46550,46512],{"class":346},[220,46552,359],{"class":264},[220,46554,46555,46557,46559],{"class":222,"line":389},[220,46556,2550],{"class":264},[220,46558,2553],{"class":346},[220,46560,386],{"class":264},[220,46562,46563,46565,46567],{"class":222,"line":399},[220,46564,2567],{"class":264},[220,46566,46512],{"class":346},[220,46568,359],{"class":264},[220,46570,46571,46573,46575],{"class":222,"line":644},[220,46572,402],{"class":264},[220,46574,347],{"class":346},[220,46576,359],{"class":264},[212,46578,46579],{"className":409,"code":46534,"language":411,"meta":178,"style":178},[99,46580,46581,46589,46597,46605,46613],{"__ignoreMap":178},[220,46582,46583,46585,46587],{"class":222,"line":223},[220,46584,343],{"class":264},[220,46586,347],{"class":420},[220,46588,359],{"class":264},[220,46590,46591,46593,46595],{"class":222,"line":179},[220,46592,364],{"class":264},[220,46594,46512],{"class":420},[220,46596,359],{"class":264},[220,46598,46599,46601,46603],{"class":222,"line":389},[220,46600,2550],{"class":264},[220,46602,2553],{"class":420},[220,46604,386],{"class":264},[220,46606,46607,46609,46611],{"class":222,"line":399},[220,46608,2567],{"class":264},[220,46610,46512],{"class":420},[220,46612,359],{"class":264},[220,46614,46615,46617,46619],{"class":222,"line":644},[220,46616,402],{"class":264},[220,46618,347],{"class":420},[220,46620,359],{"class":264},[212,46622,46623],{"className":2844,"code":46534,"language":2846,"meta":178,"style":178},[99,46624,46625,46633,46641,46649,46657],{"__ignoreMap":178},[220,46626,46627,46629,46631],{"class":222,"line":223},[220,46628,343],{"class":264},[220,46630,347],{"class":420},[220,46632,359],{"class":264},[220,46634,46635,46637,46639],{"class":222,"line":179},[220,46636,364],{"class":264},[220,46638,46512],{"class":420},[220,46640,359],{"class":264},[220,46642,46643,46645,46647],{"class":222,"line":389},[220,46644,2550],{"class":264},[220,46646,2553],{"class":420},[220,46648,386],{"class":264},[220,46650,46651,46653,46655],{"class":222,"line":399},[220,46652,2567],{"class":264},[220,46654,46512],{"class":420},[220,46656,359],{"class":264},[220,46658,46659,46661,46663],{"class":222,"line":644},[220,46660,402],{"class":264},[220,46662,347],{"class":420},[220,46664,359],{"class":264},[212,46666,46667],{"className":468,"code":46534,"language":469,"meta":178,"style":178},[99,46668,46669,46677,46685,46693,46701],{"__ignoreMap":178},[220,46670,46671,46673,46675],{"class":222,"line":223},[220,46672,343],{"class":264},[220,46674,347],{"class":420},[220,46676,359],{"class":264},[220,46678,46679,46681,46683],{"class":222,"line":179},[220,46680,364],{"class":264},[220,46682,46512],{"class":420},[220,46684,359],{"class":264},[220,46686,46687,46689,46691],{"class":222,"line":389},[220,46688,2550],{"class":264},[220,46690,2553],{"class":420},[220,46692,386],{"class":264},[220,46694,46695,46697,46699],{"class":222,"line":399},[220,46696,2567],{"class":264},[220,46698,46512],{"class":420},[220,46700,359],{"class":264},[220,46702,46703,46705,46707],{"class":222,"line":644},[220,46704,402],{"class":264},[220,46706,347],{"class":420},[220,46708,359],{"class":264},[212,46710,46712],{"className":251,"code":46711,"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,46713,46714,46724,46728,46742,46746,46755,46763,46767,46771],{"__ignoreMap":178},[220,46715,46716,46718,46720,46722],{"class":222,"line":223},[220,46717,261],{"class":260},[220,46719,11512],{"class":264},[220,46721,268],{"class":260},[220,46723,4007],{"class":230},[220,46725,46726],{"class":222,"line":179},[220,46727,647],{"emptyLinePlaceholder":194},[220,46729,46730,46732,46734,46736,46738,46740],{"class":222,"line":389},[220,46731,1735],{"class":260},[220,46733,1738],{"class":420},[220,46735,1741],{"class":260},[220,46737,1744],{"class":260},[220,46739,1747],{"class":226},[220,46741,1750],{"class":264},[220,46743,46744],{"class":222,"line":399},[220,46745,1765],{"class":264},[220,46747,46748,46750,46753],{"class":222,"line":644},[220,46749,1770],{"class":264},[220,46751,46752],{"class":230},"'Exposure'",[220,46754,7009],{"class":264},[220,46756,46757,46759,46761],{"class":222,"line":650},[220,46758,7014],{"class":264},[220,46760,3206],{"class":230},[220,46762,2465],{"class":264},[220,46764,46765],{"class":222,"line":656},[220,46766,7031],{"class":264},[220,46768,46769],{"class":222,"line":673},[220,46770,1787],{"class":264},[220,46772,46773],{"class":222,"line":682},[220,46774,1792],{"class":264},[1504,46776,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46778},[46779,46780],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":46512,"description":46520},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":46787,"title":46788,"body":46789,"category":33063,"componentType":25877,"description":46796,"extension":191,"meta":46981,"navigation":194,"path":46982,"requiresChild":32530,"seo":46983,"stem":46984,"__hash__":46985},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":46790,"toc":46977},[46791,46794,46797,46799,46801,46804,46806,46975],[11,46792,46788],{"id":46793},"fallinglines",[15,46795,46796],{},"Directional falling lines with a leading-to-trailing color fade",[31911,46798],{"component":46788},[23,46800,31915],{"id":26533},[31917,46802],{":props":46803},"[{\"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,46805,31923],{"id":31922},[246,46807,46808,46837,46865,46893,46921],{":tabs":1557},[212,46809,46811],{"className":334,"code":46810,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,46812,46813,46821,46829],{"__ignoreMap":178},[220,46814,46815,46817,46819],{"class":222,"line":223},[220,46816,343],{"class":264},[220,46818,347],{"class":346},[220,46820,359],{"class":264},[220,46822,46823,46825,46827],{"class":222,"line":179},[220,46824,364],{"class":264},[220,46826,46788],{"class":346},[220,46828,386],{"class":264},[220,46830,46831,46833,46835],{"class":222,"line":389},[220,46832,402],{"class":264},[220,46834,347],{"class":346},[220,46836,359],{"class":264},[212,46838,46839],{"className":409,"code":46810,"language":411,"meta":178,"style":178},[99,46840,46841,46849,46857],{"__ignoreMap":178},[220,46842,46843,46845,46847],{"class":222,"line":223},[220,46844,343],{"class":264},[220,46846,347],{"class":420},[220,46848,359],{"class":264},[220,46850,46851,46853,46855],{"class":222,"line":179},[220,46852,364],{"class":264},[220,46854,46788],{"class":420},[220,46856,386],{"class":264},[220,46858,46859,46861,46863],{"class":222,"line":389},[220,46860,402],{"class":264},[220,46862,347],{"class":420},[220,46864,359],{"class":264},[212,46866,46867],{"className":2844,"code":46810,"language":2846,"meta":178,"style":178},[99,46868,46869,46877,46885],{"__ignoreMap":178},[220,46870,46871,46873,46875],{"class":222,"line":223},[220,46872,343],{"class":264},[220,46874,347],{"class":420},[220,46876,359],{"class":264},[220,46878,46879,46881,46883],{"class":222,"line":179},[220,46880,364],{"class":264},[220,46882,46788],{"class":420},[220,46884,386],{"class":264},[220,46886,46887,46889,46891],{"class":222,"line":389},[220,46888,402],{"class":264},[220,46890,347],{"class":420},[220,46892,359],{"class":264},[212,46894,46895],{"className":468,"code":46810,"language":469,"meta":178,"style":178},[99,46896,46897,46905,46913],{"__ignoreMap":178},[220,46898,46899,46901,46903],{"class":222,"line":223},[220,46900,343],{"class":264},[220,46902,347],{"class":420},[220,46904,359],{"class":264},[220,46906,46907,46909,46911],{"class":222,"line":179},[220,46908,364],{"class":264},[220,46910,46788],{"class":420},[220,46912,386],{"class":264},[220,46914,46915,46917,46919],{"class":222,"line":389},[220,46916,402],{"class":264},[220,46918,347],{"class":420},[220,46920,359],{"class":264},[212,46922,46924],{"className":251,"code":46923,"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,46925,46926,46936,46940,46954,46958,46967,46971],{"__ignoreMap":178},[220,46927,46928,46930,46932,46934],{"class":222,"line":223},[220,46929,261],{"class":260},[220,46931,11512],{"class":264},[220,46933,268],{"class":260},[220,46935,4007],{"class":230},[220,46937,46938],{"class":222,"line":179},[220,46939,647],{"emptyLinePlaceholder":194},[220,46941,46942,46944,46946,46948,46950,46952],{"class":222,"line":389},[220,46943,1735],{"class":260},[220,46945,1738],{"class":420},[220,46947,1741],{"class":260},[220,46949,1744],{"class":260},[220,46951,1747],{"class":226},[220,46953,1750],{"class":264},[220,46955,46956],{"class":222,"line":399},[220,46957,1765],{"class":264},[220,46959,46960,46962,46965],{"class":222,"line":644},[220,46961,1770],{"class":264},[220,46963,46964],{"class":230},"'FallingLines'",[220,46966,2465],{"class":264},[220,46968,46969],{"class":222,"line":650},[220,46970,1787],{"class":264},[220,46972,46973],{"class":222,"line":656},[220,46974,1792],{"class":264},[1504,46976,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46978},[46979,46980],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffallinglines",{"title":46788,"description":46796},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":46987,"title":46988,"body":46989,"category":32806,"componentType":25883,"description":46996,"extension":191,"meta":47257,"navigation":194,"path":47258,"requiresChild":194,"seo":47259,"stem":47260,"__hash__":47261},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":46990,"toc":47253},[46991,46994,46997,46999,47001,47004,47006,47251],[11,46992,46988],{"id":46993},"filmgrain",[15,46995,46996],{},"Analog film grain texture overlay, weighted toward darker areas",[31911,46998],{"component":46988},[23,47000,31915],{"id":26533},[31917,47002],{":props":47003},"[{\"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,47005,31923],{"id":31922},[246,47007,47008,47053,47097,47141,47185],{":tabs":1557},[212,47009,47011],{"className":334,"code":47010,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,47012,47013,47021,47029,47037,47045],{"__ignoreMap":178},[220,47014,47015,47017,47019],{"class":222,"line":223},[220,47016,343],{"class":264},[220,47018,347],{"class":346},[220,47020,359],{"class":264},[220,47022,47023,47025,47027],{"class":222,"line":179},[220,47024,364],{"class":264},[220,47026,46988],{"class":346},[220,47028,359],{"class":264},[220,47030,47031,47033,47035],{"class":222,"line":389},[220,47032,2550],{"class":264},[220,47034,2553],{"class":346},[220,47036,386],{"class":264},[220,47038,47039,47041,47043],{"class":222,"line":399},[220,47040,2567],{"class":264},[220,47042,46988],{"class":346},[220,47044,359],{"class":264},[220,47046,47047,47049,47051],{"class":222,"line":644},[220,47048,402],{"class":264},[220,47050,347],{"class":346},[220,47052,359],{"class":264},[212,47054,47055],{"className":409,"code":47010,"language":411,"meta":178,"style":178},[99,47056,47057,47065,47073,47081,47089],{"__ignoreMap":178},[220,47058,47059,47061,47063],{"class":222,"line":223},[220,47060,343],{"class":264},[220,47062,347],{"class":420},[220,47064,359],{"class":264},[220,47066,47067,47069,47071],{"class":222,"line":179},[220,47068,364],{"class":264},[220,47070,46988],{"class":420},[220,47072,359],{"class":264},[220,47074,47075,47077,47079],{"class":222,"line":389},[220,47076,2550],{"class":264},[220,47078,2553],{"class":420},[220,47080,386],{"class":264},[220,47082,47083,47085,47087],{"class":222,"line":399},[220,47084,2567],{"class":264},[220,47086,46988],{"class":420},[220,47088,359],{"class":264},[220,47090,47091,47093,47095],{"class":222,"line":644},[220,47092,402],{"class":264},[220,47094,347],{"class":420},[220,47096,359],{"class":264},[212,47098,47099],{"className":2844,"code":47010,"language":2846,"meta":178,"style":178},[99,47100,47101,47109,47117,47125,47133],{"__ignoreMap":178},[220,47102,47103,47105,47107],{"class":222,"line":223},[220,47104,343],{"class":264},[220,47106,347],{"class":420},[220,47108,359],{"class":264},[220,47110,47111,47113,47115],{"class":222,"line":179},[220,47112,364],{"class":264},[220,47114,46988],{"class":420},[220,47116,359],{"class":264},[220,47118,47119,47121,47123],{"class":222,"line":389},[220,47120,2550],{"class":264},[220,47122,2553],{"class":420},[220,47124,386],{"class":264},[220,47126,47127,47129,47131],{"class":222,"line":399},[220,47128,2567],{"class":264},[220,47130,46988],{"class":420},[220,47132,359],{"class":264},[220,47134,47135,47137,47139],{"class":222,"line":644},[220,47136,402],{"class":264},[220,47138,347],{"class":420},[220,47140,359],{"class":264},[212,47142,47143],{"className":468,"code":47010,"language":469,"meta":178,"style":178},[99,47144,47145,47153,47161,47169,47177],{"__ignoreMap":178},[220,47146,47147,47149,47151],{"class":222,"line":223},[220,47148,343],{"class":264},[220,47150,347],{"class":420},[220,47152,359],{"class":264},[220,47154,47155,47157,47159],{"class":222,"line":179},[220,47156,364],{"class":264},[220,47158,46988],{"class":420},[220,47160,359],{"class":264},[220,47162,47163,47165,47167],{"class":222,"line":389},[220,47164,2550],{"class":264},[220,47166,2553],{"class":420},[220,47168,386],{"class":264},[220,47170,47171,47173,47175],{"class":222,"line":399},[220,47172,2567],{"class":264},[220,47174,46988],{"class":420},[220,47176,359],{"class":264},[220,47178,47179,47181,47183],{"class":222,"line":644},[220,47180,402],{"class":264},[220,47182,347],{"class":420},[220,47184,359],{"class":264},[212,47186,47188],{"className":251,"code":47187,"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,47189,47190,47200,47204,47218,47222,47231,47239,47243,47247],{"__ignoreMap":178},[220,47191,47192,47194,47196,47198],{"class":222,"line":223},[220,47193,261],{"class":260},[220,47195,11512],{"class":264},[220,47197,268],{"class":260},[220,47199,4007],{"class":230},[220,47201,47202],{"class":222,"line":179},[220,47203,647],{"emptyLinePlaceholder":194},[220,47205,47206,47208,47210,47212,47214,47216],{"class":222,"line":389},[220,47207,1735],{"class":260},[220,47209,1738],{"class":420},[220,47211,1741],{"class":260},[220,47213,1744],{"class":260},[220,47215,1747],{"class":226},[220,47217,1750],{"class":264},[220,47219,47220],{"class":222,"line":399},[220,47221,1765],{"class":264},[220,47223,47224,47226,47229],{"class":222,"line":644},[220,47225,1770],{"class":264},[220,47227,47228],{"class":230},"'FilmGrain'",[220,47230,7009],{"class":264},[220,47232,47233,47235,47237],{"class":222,"line":650},[220,47234,7014],{"class":264},[220,47236,3206],{"class":230},[220,47238,2465],{"class":264},[220,47240,47241],{"class":222,"line":656},[220,47242,7031],{"class":264},[220,47244,47245],{"class":222,"line":673},[220,47246,1787],{"class":264},[220,47248,47249],{"class":222,"line":682},[220,47250,1792],{"class":264},[1504,47252,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47254},[47255,47256],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":46988,"description":46996},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":47263,"title":47264,"body":47265,"category":36368,"componentType":25883,"description":47272,"extension":191,"meta":47533,"navigation":194,"path":47534,"requiresChild":194,"seo":47535,"stem":47536,"__hash__":47537},"components\u002Fdocs\u002Fcomponents\u002FFilmStock.md","FilmStock",{"type":8,"value":47266,"toc":47529},[47267,47270,47273,47275,47277,47280,47282,47527],[11,47268,47264],{"id":47269},"filmstock",[15,47271,47272],{},"Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave",[31911,47274],{"component":47264},[23,47276,31915],{"id":26533},[31917,47278],{":props":47279},"[{\"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,47281,31923],{"id":31922},[246,47283,47284,47329,47373,47417,47461],{":tabs":1557},[212,47285,47287],{"className":334,"code":47286,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmStock>\n \u003CCircle \u002F>\n \u003C\u002FFilmStock>\n\u003C\u002FShader>\n",[99,47288,47289,47297,47305,47313,47321],{"__ignoreMap":178},[220,47290,47291,47293,47295],{"class":222,"line":223},[220,47292,343],{"class":264},[220,47294,347],{"class":346},[220,47296,359],{"class":264},[220,47298,47299,47301,47303],{"class":222,"line":179},[220,47300,364],{"class":264},[220,47302,47264],{"class":346},[220,47304,359],{"class":264},[220,47306,47307,47309,47311],{"class":222,"line":389},[220,47308,2550],{"class":264},[220,47310,2553],{"class":346},[220,47312,386],{"class":264},[220,47314,47315,47317,47319],{"class":222,"line":399},[220,47316,2567],{"class":264},[220,47318,47264],{"class":346},[220,47320,359],{"class":264},[220,47322,47323,47325,47327],{"class":222,"line":644},[220,47324,402],{"class":264},[220,47326,347],{"class":346},[220,47328,359],{"class":264},[212,47330,47331],{"className":409,"code":47286,"language":411,"meta":178,"style":178},[99,47332,47333,47341,47349,47357,47365],{"__ignoreMap":178},[220,47334,47335,47337,47339],{"class":222,"line":223},[220,47336,343],{"class":264},[220,47338,347],{"class":420},[220,47340,359],{"class":264},[220,47342,47343,47345,47347],{"class":222,"line":179},[220,47344,364],{"class":264},[220,47346,47264],{"class":420},[220,47348,359],{"class":264},[220,47350,47351,47353,47355],{"class":222,"line":389},[220,47352,2550],{"class":264},[220,47354,2553],{"class":420},[220,47356,386],{"class":264},[220,47358,47359,47361,47363],{"class":222,"line":399},[220,47360,2567],{"class":264},[220,47362,47264],{"class":420},[220,47364,359],{"class":264},[220,47366,47367,47369,47371],{"class":222,"line":644},[220,47368,402],{"class":264},[220,47370,347],{"class":420},[220,47372,359],{"class":264},[212,47374,47375],{"className":2844,"code":47286,"language":2846,"meta":178,"style":178},[99,47376,47377,47385,47393,47401,47409],{"__ignoreMap":178},[220,47378,47379,47381,47383],{"class":222,"line":223},[220,47380,343],{"class":264},[220,47382,347],{"class":420},[220,47384,359],{"class":264},[220,47386,47387,47389,47391],{"class":222,"line":179},[220,47388,364],{"class":264},[220,47390,47264],{"class":420},[220,47392,359],{"class":264},[220,47394,47395,47397,47399],{"class":222,"line":389},[220,47396,2550],{"class":264},[220,47398,2553],{"class":420},[220,47400,386],{"class":264},[220,47402,47403,47405,47407],{"class":222,"line":399},[220,47404,2567],{"class":264},[220,47406,47264],{"class":420},[220,47408,359],{"class":264},[220,47410,47411,47413,47415],{"class":222,"line":644},[220,47412,402],{"class":264},[220,47414,347],{"class":420},[220,47416,359],{"class":264},[212,47418,47419],{"className":468,"code":47286,"language":469,"meta":178,"style":178},[99,47420,47421,47429,47437,47445,47453],{"__ignoreMap":178},[220,47422,47423,47425,47427],{"class":222,"line":223},[220,47424,343],{"class":264},[220,47426,347],{"class":420},[220,47428,359],{"class":264},[220,47430,47431,47433,47435],{"class":222,"line":179},[220,47432,364],{"class":264},[220,47434,47264],{"class":420},[220,47436,359],{"class":264},[220,47438,47439,47441,47443],{"class":222,"line":389},[220,47440,2550],{"class":264},[220,47442,2553],{"class":420},[220,47444,386],{"class":264},[220,47446,47447,47449,47451],{"class":222,"line":399},[220,47448,2567],{"class":264},[220,47450,47264],{"class":420},[220,47452,359],{"class":264},[220,47454,47455,47457,47459],{"class":222,"line":644},[220,47456,402],{"class":264},[220,47458,347],{"class":420},[220,47460,359],{"class":264},[212,47462,47464],{"className":251,"code":47463,"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,47465,47466,47476,47480,47494,47498,47507,47515,47519,47523],{"__ignoreMap":178},[220,47467,47468,47470,47472,47474],{"class":222,"line":223},[220,47469,261],{"class":260},[220,47471,11512],{"class":264},[220,47473,268],{"class":260},[220,47475,4007],{"class":230},[220,47477,47478],{"class":222,"line":179},[220,47479,647],{"emptyLinePlaceholder":194},[220,47481,47482,47484,47486,47488,47490,47492],{"class":222,"line":389},[220,47483,1735],{"class":260},[220,47485,1738],{"class":420},[220,47487,1741],{"class":260},[220,47489,1744],{"class":260},[220,47491,1747],{"class":226},[220,47493,1750],{"class":264},[220,47495,47496],{"class":222,"line":399},[220,47497,1765],{"class":264},[220,47499,47500,47502,47505],{"class":222,"line":644},[220,47501,1770],{"class":264},[220,47503,47504],{"class":230},"'FilmStock'",[220,47506,7009],{"class":264},[220,47508,47509,47511,47513],{"class":222,"line":650},[220,47510,7014],{"class":264},[220,47512,3206],{"class":230},[220,47514,2465],{"class":264},[220,47516,47517],{"class":222,"line":656},[220,47518,7031],{"class":264},[220,47520,47521],{"class":222,"line":673},[220,47522,1787],{"class":264},[220,47524,47525],{"class":222,"line":682},[220,47526,1792],{"class":264},[1504,47528,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47530},[47531,47532],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffilmstock",{"title":47264,"description":47272},"docs\u002Fcomponents\u002FFilmStock","7G7V30XyBVTR6eEcxr1nWz6_QIArP0YFqNLOoQt5-5A",{"id":47539,"title":47540,"body":47541,"category":33396,"componentType":25883,"description":47548,"extension":191,"meta":47809,"navigation":194,"path":47810,"requiresChild":194,"seo":47811,"stem":47812,"__hash__":47813},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":47542,"toc":47805},[47543,47546,47549,47551,47553,47556,47558,47803],[11,47544,47540],{"id":47545},"flip",[15,47547,47548],{},"Mirror content horizontally, vertically, or both",[31911,47550],{"component":47540},[23,47552,31915],{"id":26533},[31917,47554],{":props":47555},"[{\"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,47557,31923],{"id":31922},[246,47559,47560,47605,47649,47693,47737],{":tabs":1557},[212,47561,47563],{"className":334,"code":47562,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[99,47564,47565,47573,47581,47589,47597],{"__ignoreMap":178},[220,47566,47567,47569,47571],{"class":222,"line":223},[220,47568,343],{"class":264},[220,47570,347],{"class":346},[220,47572,359],{"class":264},[220,47574,47575,47577,47579],{"class":222,"line":179},[220,47576,364],{"class":264},[220,47578,47540],{"class":346},[220,47580,359],{"class":264},[220,47582,47583,47585,47587],{"class":222,"line":389},[220,47584,2550],{"class":264},[220,47586,2553],{"class":346},[220,47588,386],{"class":264},[220,47590,47591,47593,47595],{"class":222,"line":399},[220,47592,2567],{"class":264},[220,47594,47540],{"class":346},[220,47596,359],{"class":264},[220,47598,47599,47601,47603],{"class":222,"line":644},[220,47600,402],{"class":264},[220,47602,347],{"class":346},[220,47604,359],{"class":264},[212,47606,47607],{"className":409,"code":47562,"language":411,"meta":178,"style":178},[99,47608,47609,47617,47625,47633,47641],{"__ignoreMap":178},[220,47610,47611,47613,47615],{"class":222,"line":223},[220,47612,343],{"class":264},[220,47614,347],{"class":420},[220,47616,359],{"class":264},[220,47618,47619,47621,47623],{"class":222,"line":179},[220,47620,364],{"class":264},[220,47622,47540],{"class":420},[220,47624,359],{"class":264},[220,47626,47627,47629,47631],{"class":222,"line":389},[220,47628,2550],{"class":264},[220,47630,2553],{"class":420},[220,47632,386],{"class":264},[220,47634,47635,47637,47639],{"class":222,"line":399},[220,47636,2567],{"class":264},[220,47638,47540],{"class":420},[220,47640,359],{"class":264},[220,47642,47643,47645,47647],{"class":222,"line":644},[220,47644,402],{"class":264},[220,47646,347],{"class":420},[220,47648,359],{"class":264},[212,47650,47651],{"className":2844,"code":47562,"language":2846,"meta":178,"style":178},[99,47652,47653,47661,47669,47677,47685],{"__ignoreMap":178},[220,47654,47655,47657,47659],{"class":222,"line":223},[220,47656,343],{"class":264},[220,47658,347],{"class":420},[220,47660,359],{"class":264},[220,47662,47663,47665,47667],{"class":222,"line":179},[220,47664,364],{"class":264},[220,47666,47540],{"class":420},[220,47668,359],{"class":264},[220,47670,47671,47673,47675],{"class":222,"line":389},[220,47672,2550],{"class":264},[220,47674,2553],{"class":420},[220,47676,386],{"class":264},[220,47678,47679,47681,47683],{"class":222,"line":399},[220,47680,2567],{"class":264},[220,47682,47540],{"class":420},[220,47684,359],{"class":264},[220,47686,47687,47689,47691],{"class":222,"line":644},[220,47688,402],{"class":264},[220,47690,347],{"class":420},[220,47692,359],{"class":264},[212,47694,47695],{"className":468,"code":47562,"language":469,"meta":178,"style":178},[99,47696,47697,47705,47713,47721,47729],{"__ignoreMap":178},[220,47698,47699,47701,47703],{"class":222,"line":223},[220,47700,343],{"class":264},[220,47702,347],{"class":420},[220,47704,359],{"class":264},[220,47706,47707,47709,47711],{"class":222,"line":179},[220,47708,364],{"class":264},[220,47710,47540],{"class":420},[220,47712,359],{"class":264},[220,47714,47715,47717,47719],{"class":222,"line":389},[220,47716,2550],{"class":264},[220,47718,2553],{"class":420},[220,47720,386],{"class":264},[220,47722,47723,47725,47727],{"class":222,"line":399},[220,47724,2567],{"class":264},[220,47726,47540],{"class":420},[220,47728,359],{"class":264},[220,47730,47731,47733,47735],{"class":222,"line":644},[220,47732,402],{"class":264},[220,47734,347],{"class":420},[220,47736,359],{"class":264},[212,47738,47740],{"className":251,"code":47739,"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,47741,47742,47752,47756,47770,47774,47783,47791,47795,47799],{"__ignoreMap":178},[220,47743,47744,47746,47748,47750],{"class":222,"line":223},[220,47745,261],{"class":260},[220,47747,11512],{"class":264},[220,47749,268],{"class":260},[220,47751,4007],{"class":230},[220,47753,47754],{"class":222,"line":179},[220,47755,647],{"emptyLinePlaceholder":194},[220,47757,47758,47760,47762,47764,47766,47768],{"class":222,"line":389},[220,47759,1735],{"class":260},[220,47761,1738],{"class":420},[220,47763,1741],{"class":260},[220,47765,1744],{"class":260},[220,47767,1747],{"class":226},[220,47769,1750],{"class":264},[220,47771,47772],{"class":222,"line":399},[220,47773,1765],{"class":264},[220,47775,47776,47778,47781],{"class":222,"line":644},[220,47777,1770],{"class":264},[220,47779,47780],{"class":230},"'Flip'",[220,47782,7009],{"class":264},[220,47784,47785,47787,47789],{"class":222,"line":650},[220,47786,7014],{"class":264},[220,47788,3206],{"class":230},[220,47790,2465],{"class":264},[220,47792,47793],{"class":222,"line":656},[220,47794,7031],{"class":264},[220,47796,47797],{"class":222,"line":673},[220,47798,1787],{"class":264},[220,47800,47801],{"class":222,"line":682},[220,47802,1792],{"class":264},[1504,47804,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47806},[47807,47808],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":47540,"description":47548},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":47815,"title":47816,"body":47817,"category":33063,"componentType":25877,"description":47824,"extension":191,"meta":48009,"navigation":194,"path":48010,"requiresChild":32530,"seo":48011,"stem":48012,"__hash__":48013},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":47818,"toc":48005},[47819,47822,47825,47827,47829,47832,47834,48003],[11,47820,47816],{"id":47821},"floatingparticles",[15,47823,47824],{},"Drifting, twinkling motes — thousands of real simulated particles floating in a shared heading with per-particle wander and variance, and a cursor that stirs the field with a gust that settles back into the drift",[31911,47826],{"component":47816},[23,47828,31915],{"id":26533},[31917,47830],{":props":47831},"[{\"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,47833,31923],{"id":31922},[246,47835,47836,47865,47893,47921,47949],{":tabs":1557},[212,47837,47839],{"className":334,"code":47838,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,47840,47841,47849,47857],{"__ignoreMap":178},[220,47842,47843,47845,47847],{"class":222,"line":223},[220,47844,343],{"class":264},[220,47846,347],{"class":346},[220,47848,359],{"class":264},[220,47850,47851,47853,47855],{"class":222,"line":179},[220,47852,364],{"class":264},[220,47854,47816],{"class":346},[220,47856,386],{"class":264},[220,47858,47859,47861,47863],{"class":222,"line":389},[220,47860,402],{"class":264},[220,47862,347],{"class":346},[220,47864,359],{"class":264},[212,47866,47867],{"className":409,"code":47838,"language":411,"meta":178,"style":178},[99,47868,47869,47877,47885],{"__ignoreMap":178},[220,47870,47871,47873,47875],{"class":222,"line":223},[220,47872,343],{"class":264},[220,47874,347],{"class":420},[220,47876,359],{"class":264},[220,47878,47879,47881,47883],{"class":222,"line":179},[220,47880,364],{"class":264},[220,47882,47816],{"class":420},[220,47884,386],{"class":264},[220,47886,47887,47889,47891],{"class":222,"line":389},[220,47888,402],{"class":264},[220,47890,347],{"class":420},[220,47892,359],{"class":264},[212,47894,47895],{"className":2844,"code":47838,"language":2846,"meta":178,"style":178},[99,47896,47897,47905,47913],{"__ignoreMap":178},[220,47898,47899,47901,47903],{"class":222,"line":223},[220,47900,343],{"class":264},[220,47902,347],{"class":420},[220,47904,359],{"class":264},[220,47906,47907,47909,47911],{"class":222,"line":179},[220,47908,364],{"class":264},[220,47910,47816],{"class":420},[220,47912,386],{"class":264},[220,47914,47915,47917,47919],{"class":222,"line":389},[220,47916,402],{"class":264},[220,47918,347],{"class":420},[220,47920,359],{"class":264},[212,47922,47923],{"className":468,"code":47838,"language":469,"meta":178,"style":178},[99,47924,47925,47933,47941],{"__ignoreMap":178},[220,47926,47927,47929,47931],{"class":222,"line":223},[220,47928,343],{"class":264},[220,47930,347],{"class":420},[220,47932,359],{"class":264},[220,47934,47935,47937,47939],{"class":222,"line":179},[220,47936,364],{"class":264},[220,47938,47816],{"class":420},[220,47940,386],{"class":264},[220,47942,47943,47945,47947],{"class":222,"line":389},[220,47944,402],{"class":264},[220,47946,347],{"class":420},[220,47948,359],{"class":264},[212,47950,47952],{"className":251,"code":47951,"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,47953,47954,47964,47968,47982,47986,47995,47999],{"__ignoreMap":178},[220,47955,47956,47958,47960,47962],{"class":222,"line":223},[220,47957,261],{"class":260},[220,47959,11512],{"class":264},[220,47961,268],{"class":260},[220,47963,4007],{"class":230},[220,47965,47966],{"class":222,"line":179},[220,47967,647],{"emptyLinePlaceholder":194},[220,47969,47970,47972,47974,47976,47978,47980],{"class":222,"line":389},[220,47971,1735],{"class":260},[220,47973,1738],{"class":420},[220,47975,1741],{"class":260},[220,47977,1744],{"class":260},[220,47979,1747],{"class":226},[220,47981,1750],{"class":264},[220,47983,47984],{"class":222,"line":399},[220,47985,1765],{"class":264},[220,47987,47988,47990,47993],{"class":222,"line":644},[220,47989,1770],{"class":264},[220,47991,47992],{"class":230},"'FloatingParticles'",[220,47994,2465],{"class":264},[220,47996,47997],{"class":222,"line":650},[220,47998,1787],{"class":264},[220,48000,48001],{"class":222,"line":656},[220,48002,1792],{"class":264},[1504,48004,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48006},[48007,48008],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles",{"title":47816,"description":47824},"docs\u002Fcomponents\u002FFloatingParticles","2vzJ2ZLCZ_o9DprZbQ9-7pRvNJ0fcraR48tKiBUaJNs",{"id":48015,"title":48016,"body":48017,"category":33396,"componentType":25883,"description":48024,"extension":191,"meta":48285,"navigation":194,"path":48286,"requiresChild":194,"seo":48287,"stem":48288,"__hash__":48289},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":48018,"toc":48281},[48019,48022,48025,48027,48029,48032,48034,48279],[11,48020,48016],{"id":48021},"flowfield",[15,48023,48024],{},"Fluid-like distortion with constant smooth motion",[31911,48026],{"component":48016},[23,48028,31915],{"id":26533},[31917,48030],{":props":48031},"[{\"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,48033,31923],{"id":31922},[246,48035,48036,48081,48125,48169,48213],{":tabs":1557},[212,48037,48039],{"className":334,"code":48038,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,48040,48041,48049,48057,48065,48073],{"__ignoreMap":178},[220,48042,48043,48045,48047],{"class":222,"line":223},[220,48044,343],{"class":264},[220,48046,347],{"class":346},[220,48048,359],{"class":264},[220,48050,48051,48053,48055],{"class":222,"line":179},[220,48052,364],{"class":264},[220,48054,48016],{"class":346},[220,48056,359],{"class":264},[220,48058,48059,48061,48063],{"class":222,"line":389},[220,48060,2550],{"class":264},[220,48062,2553],{"class":346},[220,48064,386],{"class":264},[220,48066,48067,48069,48071],{"class":222,"line":399},[220,48068,2567],{"class":264},[220,48070,48016],{"class":346},[220,48072,359],{"class":264},[220,48074,48075,48077,48079],{"class":222,"line":644},[220,48076,402],{"class":264},[220,48078,347],{"class":346},[220,48080,359],{"class":264},[212,48082,48083],{"className":409,"code":48038,"language":411,"meta":178,"style":178},[99,48084,48085,48093,48101,48109,48117],{"__ignoreMap":178},[220,48086,48087,48089,48091],{"class":222,"line":223},[220,48088,343],{"class":264},[220,48090,347],{"class":420},[220,48092,359],{"class":264},[220,48094,48095,48097,48099],{"class":222,"line":179},[220,48096,364],{"class":264},[220,48098,48016],{"class":420},[220,48100,359],{"class":264},[220,48102,48103,48105,48107],{"class":222,"line":389},[220,48104,2550],{"class":264},[220,48106,2553],{"class":420},[220,48108,386],{"class":264},[220,48110,48111,48113,48115],{"class":222,"line":399},[220,48112,2567],{"class":264},[220,48114,48016],{"class":420},[220,48116,359],{"class":264},[220,48118,48119,48121,48123],{"class":222,"line":644},[220,48120,402],{"class":264},[220,48122,347],{"class":420},[220,48124,359],{"class":264},[212,48126,48127],{"className":2844,"code":48038,"language":2846,"meta":178,"style":178},[99,48128,48129,48137,48145,48153,48161],{"__ignoreMap":178},[220,48130,48131,48133,48135],{"class":222,"line":223},[220,48132,343],{"class":264},[220,48134,347],{"class":420},[220,48136,359],{"class":264},[220,48138,48139,48141,48143],{"class":222,"line":179},[220,48140,364],{"class":264},[220,48142,48016],{"class":420},[220,48144,359],{"class":264},[220,48146,48147,48149,48151],{"class":222,"line":389},[220,48148,2550],{"class":264},[220,48150,2553],{"class":420},[220,48152,386],{"class":264},[220,48154,48155,48157,48159],{"class":222,"line":399},[220,48156,2567],{"class":264},[220,48158,48016],{"class":420},[220,48160,359],{"class":264},[220,48162,48163,48165,48167],{"class":222,"line":644},[220,48164,402],{"class":264},[220,48166,347],{"class":420},[220,48168,359],{"class":264},[212,48170,48171],{"className":468,"code":48038,"language":469,"meta":178,"style":178},[99,48172,48173,48181,48189,48197,48205],{"__ignoreMap":178},[220,48174,48175,48177,48179],{"class":222,"line":223},[220,48176,343],{"class":264},[220,48178,347],{"class":420},[220,48180,359],{"class":264},[220,48182,48183,48185,48187],{"class":222,"line":179},[220,48184,364],{"class":264},[220,48186,48016],{"class":420},[220,48188,359],{"class":264},[220,48190,48191,48193,48195],{"class":222,"line":389},[220,48192,2550],{"class":264},[220,48194,2553],{"class":420},[220,48196,386],{"class":264},[220,48198,48199,48201,48203],{"class":222,"line":399},[220,48200,2567],{"class":264},[220,48202,48016],{"class":420},[220,48204,359],{"class":264},[220,48206,48207,48209,48211],{"class":222,"line":644},[220,48208,402],{"class":264},[220,48210,347],{"class":420},[220,48212,359],{"class":264},[212,48214,48216],{"className":251,"code":48215,"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,48217,48218,48228,48232,48246,48250,48259,48267,48271,48275],{"__ignoreMap":178},[220,48219,48220,48222,48224,48226],{"class":222,"line":223},[220,48221,261],{"class":260},[220,48223,11512],{"class":264},[220,48225,268],{"class":260},[220,48227,4007],{"class":230},[220,48229,48230],{"class":222,"line":179},[220,48231,647],{"emptyLinePlaceholder":194},[220,48233,48234,48236,48238,48240,48242,48244],{"class":222,"line":389},[220,48235,1735],{"class":260},[220,48237,1738],{"class":420},[220,48239,1741],{"class":260},[220,48241,1744],{"class":260},[220,48243,1747],{"class":226},[220,48245,1750],{"class":264},[220,48247,48248],{"class":222,"line":399},[220,48249,1765],{"class":264},[220,48251,48252,48254,48257],{"class":222,"line":644},[220,48253,1770],{"class":264},[220,48255,48256],{"class":230},"'FlowField'",[220,48258,7009],{"class":264},[220,48260,48261,48263,48265],{"class":222,"line":650},[220,48262,7014],{"class":264},[220,48264,3206],{"class":230},[220,48266,2465],{"class":264},[220,48268,48269],{"class":222,"line":656},[220,48270,7031],{"class":264},[220,48272,48273],{"class":222,"line":673},[220,48274,1787],{"class":264},[220,48276,48277],{"class":222,"line":682},[220,48278,1792],{"class":264},[1504,48280,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48282},[48283,48284],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":48016,"description":48024},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":48291,"title":48292,"body":48293,"category":15908,"componentType":25877,"description":48300,"extension":191,"meta":48578,"navigation":194,"path":48579,"requiresChild":32530,"seo":48580,"stem":48581,"__hash__":48582},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":48294,"toc":48574},[48295,48298,48301,48303,48305,48308,48310,48572],[11,48296,48292],{"id":48297},"flower",[15,48299,48300],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[31911,48302],{"component":48292},[23,48304,31915],{"id":26533},[31917,48306],{":props":48307},"[{\"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,48309,31923],{"id":31922},[246,48311,48312,48361,48412,48460,48510],{":tabs":1557},[212,48313,48315],{"className":334,"code":48314,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,48316,48317,48325,48332,48340,48349,48353],{"__ignoreMap":178},[220,48318,48319,48321,48323],{"class":222,"line":223},[220,48320,343],{"class":264},[220,48322,347],{"class":346},[220,48324,359],{"class":264},[220,48326,48327,48329],{"class":222,"line":179},[220,48328,364],{"class":264},[220,48330,48331],{"class":346},"Flower\n",[220,48333,48334,48336,48338],{"class":222,"line":389},[220,48335,9635],{"class":226},[220,48337,353],{"class":264},[220,48339,9591],{"class":230},[220,48341,48342,48344,48346],{"class":222,"line":399},[220,48343,17405],{"class":226},[220,48345,353],{"class":264},[220,48347,48348],{"class":230},"\"0.4\"\n",[220,48350,48351],{"class":222,"line":644},[220,48352,1234],{"class":264},[220,48354,48355,48357,48359],{"class":222,"line":650},[220,48356,402],{"class":264},[220,48358,347],{"class":346},[220,48360,359],{"class":264},[212,48362,48364],{"className":409,"code":48363,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,48365,48366,48374,48380,48388,48400,48404],{"__ignoreMap":178},[220,48367,48368,48370,48372],{"class":222,"line":223},[220,48369,343],{"class":264},[220,48371,347],{"class":420},[220,48373,359],{"class":264},[220,48375,48376,48378],{"class":222,"line":179},[220,48377,364],{"class":264},[220,48379,48331],{"class":420},[220,48381,48382,48384,48386],{"class":222,"line":389},[220,48383,9635],{"class":226},[220,48385,353],{"class":260},[220,48387,9591],{"class":230},[220,48389,48390,48392,48394,48396,48398],{"class":222,"line":399},[220,48391,9645],{"class":226},[220,48393,353],{"class":260},[220,48395,743],{"class":264},[220,48397,8249],{"class":420},[220,48399,749],{"class":264},[220,48401,48402],{"class":222,"line":644},[220,48403,1234],{"class":264},[220,48405,48406,48408,48410],{"class":222,"line":650},[220,48407,402],{"class":264},[220,48409,347],{"class":420},[220,48411,359],{"class":264},[212,48413,48414],{"className":2844,"code":48363,"language":2846,"meta":178,"style":178},[99,48415,48416,48424,48430,48438,48448,48452],{"__ignoreMap":178},[220,48417,48418,48420,48422],{"class":222,"line":223},[220,48419,343],{"class":264},[220,48421,347],{"class":420},[220,48423,359],{"class":264},[220,48425,48426,48428],{"class":222,"line":179},[220,48427,364],{"class":264},[220,48429,48331],{"class":420},[220,48431,48432,48434,48436],{"class":222,"line":389},[220,48433,9635],{"class":226},[220,48435,353],{"class":264},[220,48437,9591],{"class":230},[220,48439,48440,48442,48444,48446],{"class":222,"line":399},[220,48441,9645],{"class":226},[220,48443,29871],{"class":264},[220,48445,8249],{"class":420},[220,48447,749],{"class":264},[220,48449,48450],{"class":222,"line":644},[220,48451,1234],{"class":264},[220,48453,48454,48456,48458],{"class":222,"line":650},[220,48455,402],{"class":264},[220,48457,347],{"class":420},[220,48459,359],{"class":264},[212,48461,48462],{"className":468,"code":48363,"language":469,"meta":178,"style":178},[99,48463,48464,48472,48478,48486,48498,48502],{"__ignoreMap":178},[220,48465,48466,48468,48470],{"class":222,"line":223},[220,48467,343],{"class":264},[220,48469,347],{"class":420},[220,48471,359],{"class":264},[220,48473,48474,48476],{"class":222,"line":179},[220,48475,364],{"class":264},[220,48477,48331],{"class":420},[220,48479,48480,48482,48484],{"class":222,"line":389},[220,48481,9635],{"class":226},[220,48483,353],{"class":260},[220,48485,9591],{"class":230},[220,48487,48488,48490,48492,48494,48496],{"class":222,"line":399},[220,48489,9645],{"class":226},[220,48491,353],{"class":260},[220,48493,743],{"class":264},[220,48495,8249],{"class":420},[220,48497,749],{"class":264},[220,48499,48500],{"class":222,"line":644},[220,48501,1234],{"class":264},[220,48503,48504,48506,48508],{"class":222,"line":650},[220,48505,402],{"class":264},[220,48507,347],{"class":420},[220,48509,359],{"class":264},[212,48511,48513],{"className":251,"code":48512,"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,48514,48515,48525,48529,48543,48547,48564,48568],{"__ignoreMap":178},[220,48516,48517,48519,48521,48523],{"class":222,"line":223},[220,48518,261],{"class":260},[220,48520,11512],{"class":264},[220,48522,268],{"class":260},[220,48524,4007],{"class":230},[220,48526,48527],{"class":222,"line":179},[220,48528,647],{"emptyLinePlaceholder":194},[220,48530,48531,48533,48535,48537,48539,48541],{"class":222,"line":389},[220,48532,1735],{"class":260},[220,48534,1738],{"class":420},[220,48536,1741],{"class":260},[220,48538,1744],{"class":260},[220,48540,1747],{"class":226},[220,48542,1750],{"class":264},[220,48544,48545],{"class":222,"line":399},[220,48546,1765],{"class":264},[220,48548,48549,48551,48554,48556,48558,48560,48562],{"class":222,"line":644},[220,48550,1770],{"class":264},[220,48552,48553],{"class":230},"'Flower'",[220,48555,1776],{"class":264},[220,48557,10169],{"class":230},[220,48559,6566],{"class":264},[220,48561,8249],{"class":420},[220,48563,1782],{"class":264},[220,48565,48566],{"class":222,"line":650},[220,48567,1787],{"class":264},[220,48569,48570],{"class":222,"line":656},[220,48571,1792],{"class":264},[1504,48573,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48575},[48576,48577],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":48292,"description":48300},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":48584,"title":48585,"body":48586,"category":33063,"componentType":25877,"description":48593,"extension":191,"meta":48778,"navigation":194,"path":48779,"requiresChild":32530,"seo":48780,"stem":48781,"__hash__":48782},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":48587,"toc":48774},[48588,48591,48594,48596,48598,48601,48603,48772],[11,48589,48585],{"id":48590},"flowinggradient",[15,48592,48593],{},"Liquid silk gradient with organic flowing color bands",[31911,48595],{"component":48585},[23,48597,31915],{"id":26533},[31917,48599],{":props":48600},"[{\"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,48602,31923],{"id":31922},[246,48604,48605,48634,48662,48690,48718],{":tabs":1557},[212,48606,48608],{"className":334,"code":48607,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,48609,48610,48618,48626],{"__ignoreMap":178},[220,48611,48612,48614,48616],{"class":222,"line":223},[220,48613,343],{"class":264},[220,48615,347],{"class":346},[220,48617,359],{"class":264},[220,48619,48620,48622,48624],{"class":222,"line":179},[220,48621,364],{"class":264},[220,48623,48585],{"class":346},[220,48625,386],{"class":264},[220,48627,48628,48630,48632],{"class":222,"line":389},[220,48629,402],{"class":264},[220,48631,347],{"class":346},[220,48633,359],{"class":264},[212,48635,48636],{"className":409,"code":48607,"language":411,"meta":178,"style":178},[99,48637,48638,48646,48654],{"__ignoreMap":178},[220,48639,48640,48642,48644],{"class":222,"line":223},[220,48641,343],{"class":264},[220,48643,347],{"class":420},[220,48645,359],{"class":264},[220,48647,48648,48650,48652],{"class":222,"line":179},[220,48649,364],{"class":264},[220,48651,48585],{"class":420},[220,48653,386],{"class":264},[220,48655,48656,48658,48660],{"class":222,"line":389},[220,48657,402],{"class":264},[220,48659,347],{"class":420},[220,48661,359],{"class":264},[212,48663,48664],{"className":2844,"code":48607,"language":2846,"meta":178,"style":178},[99,48665,48666,48674,48682],{"__ignoreMap":178},[220,48667,48668,48670,48672],{"class":222,"line":223},[220,48669,343],{"class":264},[220,48671,347],{"class":420},[220,48673,359],{"class":264},[220,48675,48676,48678,48680],{"class":222,"line":179},[220,48677,364],{"class":264},[220,48679,48585],{"class":420},[220,48681,386],{"class":264},[220,48683,48684,48686,48688],{"class":222,"line":389},[220,48685,402],{"class":264},[220,48687,347],{"class":420},[220,48689,359],{"class":264},[212,48691,48692],{"className":468,"code":48607,"language":469,"meta":178,"style":178},[99,48693,48694,48702,48710],{"__ignoreMap":178},[220,48695,48696,48698,48700],{"class":222,"line":223},[220,48697,343],{"class":264},[220,48699,347],{"class":420},[220,48701,359],{"class":264},[220,48703,48704,48706,48708],{"class":222,"line":179},[220,48705,364],{"class":264},[220,48707,48585],{"class":420},[220,48709,386],{"class":264},[220,48711,48712,48714,48716],{"class":222,"line":389},[220,48713,402],{"class":264},[220,48715,347],{"class":420},[220,48717,359],{"class":264},[212,48719,48721],{"className":251,"code":48720,"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,48722,48723,48733,48737,48751,48755,48764,48768],{"__ignoreMap":178},[220,48724,48725,48727,48729,48731],{"class":222,"line":223},[220,48726,261],{"class":260},[220,48728,11512],{"class":264},[220,48730,268],{"class":260},[220,48732,4007],{"class":230},[220,48734,48735],{"class":222,"line":179},[220,48736,647],{"emptyLinePlaceholder":194},[220,48738,48739,48741,48743,48745,48747,48749],{"class":222,"line":389},[220,48740,1735],{"class":260},[220,48742,1738],{"class":420},[220,48744,1741],{"class":260},[220,48746,1744],{"class":260},[220,48748,1747],{"class":226},[220,48750,1750],{"class":264},[220,48752,48753],{"class":222,"line":399},[220,48754,1765],{"class":264},[220,48756,48757,48759,48762],{"class":222,"line":644},[220,48758,1770],{"class":264},[220,48760,48761],{"class":230},"'FlowingGradient'",[220,48763,2465],{"class":264},[220,48765,48766],{"class":222,"line":650},[220,48767,1787],{"class":264},[220,48769,48770],{"class":222,"line":656},[220,48771,1792],{"class":264},[1504,48773,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48775},[48776,48777],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":48585,"description":48593},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":48784,"title":48785,"body":48786,"category":33396,"componentType":25883,"description":48793,"extension":191,"meta":49054,"navigation":194,"path":49055,"requiresChild":194,"seo":49056,"stem":49057,"__hash__":49058},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":48787,"toc":49050},[48788,48791,48794,48796,48798,48801,48803,49048],[11,48789,48785],{"id":48790},"flutedglass",[15,48792,48793],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[31911,48795],{"component":48785},[23,48797,31915],{"id":26533},[31917,48799],{":props":48800},"[{\"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,48802,31923],{"id":31922},[246,48804,48805,48850,48894,48938,48982],{":tabs":1557},[212,48806,48808],{"className":334,"code":48807,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,48809,48810,48818,48826,48834,48842],{"__ignoreMap":178},[220,48811,48812,48814,48816],{"class":222,"line":223},[220,48813,343],{"class":264},[220,48815,347],{"class":346},[220,48817,359],{"class":264},[220,48819,48820,48822,48824],{"class":222,"line":179},[220,48821,364],{"class":264},[220,48823,48785],{"class":346},[220,48825,359],{"class":264},[220,48827,48828,48830,48832],{"class":222,"line":389},[220,48829,2550],{"class":264},[220,48831,2553],{"class":346},[220,48833,386],{"class":264},[220,48835,48836,48838,48840],{"class":222,"line":399},[220,48837,2567],{"class":264},[220,48839,48785],{"class":346},[220,48841,359],{"class":264},[220,48843,48844,48846,48848],{"class":222,"line":644},[220,48845,402],{"class":264},[220,48847,347],{"class":346},[220,48849,359],{"class":264},[212,48851,48852],{"className":409,"code":48807,"language":411,"meta":178,"style":178},[99,48853,48854,48862,48870,48878,48886],{"__ignoreMap":178},[220,48855,48856,48858,48860],{"class":222,"line":223},[220,48857,343],{"class":264},[220,48859,347],{"class":420},[220,48861,359],{"class":264},[220,48863,48864,48866,48868],{"class":222,"line":179},[220,48865,364],{"class":264},[220,48867,48785],{"class":420},[220,48869,359],{"class":264},[220,48871,48872,48874,48876],{"class":222,"line":389},[220,48873,2550],{"class":264},[220,48875,2553],{"class":420},[220,48877,386],{"class":264},[220,48879,48880,48882,48884],{"class":222,"line":399},[220,48881,2567],{"class":264},[220,48883,48785],{"class":420},[220,48885,359],{"class":264},[220,48887,48888,48890,48892],{"class":222,"line":644},[220,48889,402],{"class":264},[220,48891,347],{"class":420},[220,48893,359],{"class":264},[212,48895,48896],{"className":2844,"code":48807,"language":2846,"meta":178,"style":178},[99,48897,48898,48906,48914,48922,48930],{"__ignoreMap":178},[220,48899,48900,48902,48904],{"class":222,"line":223},[220,48901,343],{"class":264},[220,48903,347],{"class":420},[220,48905,359],{"class":264},[220,48907,48908,48910,48912],{"class":222,"line":179},[220,48909,364],{"class":264},[220,48911,48785],{"class":420},[220,48913,359],{"class":264},[220,48915,48916,48918,48920],{"class":222,"line":389},[220,48917,2550],{"class":264},[220,48919,2553],{"class":420},[220,48921,386],{"class":264},[220,48923,48924,48926,48928],{"class":222,"line":399},[220,48925,2567],{"class":264},[220,48927,48785],{"class":420},[220,48929,359],{"class":264},[220,48931,48932,48934,48936],{"class":222,"line":644},[220,48933,402],{"class":264},[220,48935,347],{"class":420},[220,48937,359],{"class":264},[212,48939,48940],{"className":468,"code":48807,"language":469,"meta":178,"style":178},[99,48941,48942,48950,48958,48966,48974],{"__ignoreMap":178},[220,48943,48944,48946,48948],{"class":222,"line":223},[220,48945,343],{"class":264},[220,48947,347],{"class":420},[220,48949,359],{"class":264},[220,48951,48952,48954,48956],{"class":222,"line":179},[220,48953,364],{"class":264},[220,48955,48785],{"class":420},[220,48957,359],{"class":264},[220,48959,48960,48962,48964],{"class":222,"line":389},[220,48961,2550],{"class":264},[220,48963,2553],{"class":420},[220,48965,386],{"class":264},[220,48967,48968,48970,48972],{"class":222,"line":399},[220,48969,2567],{"class":264},[220,48971,48785],{"class":420},[220,48973,359],{"class":264},[220,48975,48976,48978,48980],{"class":222,"line":644},[220,48977,402],{"class":264},[220,48979,347],{"class":420},[220,48981,359],{"class":264},[212,48983,48985],{"className":251,"code":48984,"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,48986,48987,48997,49001,49015,49019,49028,49036,49040,49044],{"__ignoreMap":178},[220,48988,48989,48991,48993,48995],{"class":222,"line":223},[220,48990,261],{"class":260},[220,48992,11512],{"class":264},[220,48994,268],{"class":260},[220,48996,4007],{"class":230},[220,48998,48999],{"class":222,"line":179},[220,49000,647],{"emptyLinePlaceholder":194},[220,49002,49003,49005,49007,49009,49011,49013],{"class":222,"line":389},[220,49004,1735],{"class":260},[220,49006,1738],{"class":420},[220,49008,1741],{"class":260},[220,49010,1744],{"class":260},[220,49012,1747],{"class":226},[220,49014,1750],{"class":264},[220,49016,49017],{"class":222,"line":399},[220,49018,1765],{"class":264},[220,49020,49021,49023,49026],{"class":222,"line":644},[220,49022,1770],{"class":264},[220,49024,49025],{"class":230},"'FlutedGlass'",[220,49027,7009],{"class":264},[220,49029,49030,49032,49034],{"class":222,"line":650},[220,49031,7014],{"class":264},[220,49033,3206],{"class":230},[220,49035,2465],{"class":264},[220,49037,49038],{"class":222,"line":656},[220,49039,7031],{"class":264},[220,49041,49042],{"class":222,"line":673},[220,49043,1787],{"class":264},[220,49045,49046],{"class":222,"line":682},[220,49047,1792],{"class":264},[1504,49049,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49051},[49052,49053],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":48785,"description":48793},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":49060,"title":49061,"body":49062,"category":35559,"componentType":25877,"description":49069,"extension":191,"meta":49254,"navigation":194,"path":49255,"requiresChild":32530,"seo":49256,"stem":49257,"__hash__":49258},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":49063,"toc":49250},[49064,49067,49070,49072,49074,49077,49079,49248],[11,49065,49061],{"id":49066},"fog",[15,49068,49069],{},"Fog that fills the screen and interacts with the mouse",[31911,49071],{"component":49061},[23,49073,31915],{"id":26533},[31917,49075],{":props":49076},"[{\"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,49078,31923],{"id":31922},[246,49080,49081,49110,49138,49166,49194],{":tabs":1557},[212,49082,49084],{"className":334,"code":49083,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,49085,49086,49094,49102],{"__ignoreMap":178},[220,49087,49088,49090,49092],{"class":222,"line":223},[220,49089,343],{"class":264},[220,49091,347],{"class":346},[220,49093,359],{"class":264},[220,49095,49096,49098,49100],{"class":222,"line":179},[220,49097,364],{"class":264},[220,49099,49061],{"class":346},[220,49101,386],{"class":264},[220,49103,49104,49106,49108],{"class":222,"line":389},[220,49105,402],{"class":264},[220,49107,347],{"class":346},[220,49109,359],{"class":264},[212,49111,49112],{"className":409,"code":49083,"language":411,"meta":178,"style":178},[99,49113,49114,49122,49130],{"__ignoreMap":178},[220,49115,49116,49118,49120],{"class":222,"line":223},[220,49117,343],{"class":264},[220,49119,347],{"class":420},[220,49121,359],{"class":264},[220,49123,49124,49126,49128],{"class":222,"line":179},[220,49125,364],{"class":264},[220,49127,49061],{"class":420},[220,49129,386],{"class":264},[220,49131,49132,49134,49136],{"class":222,"line":389},[220,49133,402],{"class":264},[220,49135,347],{"class":420},[220,49137,359],{"class":264},[212,49139,49140],{"className":2844,"code":49083,"language":2846,"meta":178,"style":178},[99,49141,49142,49150,49158],{"__ignoreMap":178},[220,49143,49144,49146,49148],{"class":222,"line":223},[220,49145,343],{"class":264},[220,49147,347],{"class":420},[220,49149,359],{"class":264},[220,49151,49152,49154,49156],{"class":222,"line":179},[220,49153,364],{"class":264},[220,49155,49061],{"class":420},[220,49157,386],{"class":264},[220,49159,49160,49162,49164],{"class":222,"line":389},[220,49161,402],{"class":264},[220,49163,347],{"class":420},[220,49165,359],{"class":264},[212,49167,49168],{"className":468,"code":49083,"language":469,"meta":178,"style":178},[99,49169,49170,49178,49186],{"__ignoreMap":178},[220,49171,49172,49174,49176],{"class":222,"line":223},[220,49173,343],{"class":264},[220,49175,347],{"class":420},[220,49177,359],{"class":264},[220,49179,49180,49182,49184],{"class":222,"line":179},[220,49181,364],{"class":264},[220,49183,49061],{"class":420},[220,49185,386],{"class":264},[220,49187,49188,49190,49192],{"class":222,"line":389},[220,49189,402],{"class":264},[220,49191,347],{"class":420},[220,49193,359],{"class":264},[212,49195,49197],{"className":251,"code":49196,"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,49198,49199,49209,49213,49227,49231,49240,49244],{"__ignoreMap":178},[220,49200,49201,49203,49205,49207],{"class":222,"line":223},[220,49202,261],{"class":260},[220,49204,11512],{"class":264},[220,49206,268],{"class":260},[220,49208,4007],{"class":230},[220,49210,49211],{"class":222,"line":179},[220,49212,647],{"emptyLinePlaceholder":194},[220,49214,49215,49217,49219,49221,49223,49225],{"class":222,"line":389},[220,49216,1735],{"class":260},[220,49218,1738],{"class":420},[220,49220,1741],{"class":260},[220,49222,1744],{"class":260},[220,49224,1747],{"class":226},[220,49226,1750],{"class":264},[220,49228,49229],{"class":222,"line":399},[220,49230,1765],{"class":264},[220,49232,49233,49235,49238],{"class":222,"line":644},[220,49234,1770],{"class":264},[220,49236,49237],{"class":230},"'Fog'",[220,49239,2465],{"class":264},[220,49241,49242],{"class":222,"line":650},[220,49243,1787],{"class":264},[220,49245,49246],{"class":222,"line":656},[220,49247,1792],{"class":264},[1504,49249,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49251},[49252,49253],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffog",{"title":49061,"description":49069},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":49260,"title":49261,"body":49262,"category":33396,"componentType":25883,"description":49269,"extension":191,"meta":49530,"navigation":194,"path":49531,"requiresChild":194,"seo":49532,"stem":49533,"__hash__":49534},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":49263,"toc":49526},[49264,49267,49270,49272,49274,49277,49279,49524],[11,49265,49261],{"id":49266},"form3d",[15,49268,49269],{},"Wraps child content onto a 3D raymarched shape with lighting.",[31911,49271],{"component":49261},[23,49273,31915],{"id":26533},[31917,49275],{":props":49276},"[{\"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,49278,31923],{"id":31922},[246,49280,49281,49326,49370,49414,49458],{":tabs":1557},[212,49282,49284],{"className":334,"code":49283,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,49285,49286,49294,49302,49310,49318],{"__ignoreMap":178},[220,49287,49288,49290,49292],{"class":222,"line":223},[220,49289,343],{"class":264},[220,49291,347],{"class":346},[220,49293,359],{"class":264},[220,49295,49296,49298,49300],{"class":222,"line":179},[220,49297,364],{"class":264},[220,49299,49261],{"class":346},[220,49301,359],{"class":264},[220,49303,49304,49306,49308],{"class":222,"line":389},[220,49305,2550],{"class":264},[220,49307,2553],{"class":346},[220,49309,386],{"class":264},[220,49311,49312,49314,49316],{"class":222,"line":399},[220,49313,2567],{"class":264},[220,49315,49261],{"class":346},[220,49317,359],{"class":264},[220,49319,49320,49322,49324],{"class":222,"line":644},[220,49321,402],{"class":264},[220,49323,347],{"class":346},[220,49325,359],{"class":264},[212,49327,49328],{"className":409,"code":49283,"language":411,"meta":178,"style":178},[99,49329,49330,49338,49346,49354,49362],{"__ignoreMap":178},[220,49331,49332,49334,49336],{"class":222,"line":223},[220,49333,343],{"class":264},[220,49335,347],{"class":420},[220,49337,359],{"class":264},[220,49339,49340,49342,49344],{"class":222,"line":179},[220,49341,364],{"class":264},[220,49343,49261],{"class":420},[220,49345,359],{"class":264},[220,49347,49348,49350,49352],{"class":222,"line":389},[220,49349,2550],{"class":264},[220,49351,2553],{"class":420},[220,49353,386],{"class":264},[220,49355,49356,49358,49360],{"class":222,"line":399},[220,49357,2567],{"class":264},[220,49359,49261],{"class":420},[220,49361,359],{"class":264},[220,49363,49364,49366,49368],{"class":222,"line":644},[220,49365,402],{"class":264},[220,49367,347],{"class":420},[220,49369,359],{"class":264},[212,49371,49372],{"className":2844,"code":49283,"language":2846,"meta":178,"style":178},[99,49373,49374,49382,49390,49398,49406],{"__ignoreMap":178},[220,49375,49376,49378,49380],{"class":222,"line":223},[220,49377,343],{"class":264},[220,49379,347],{"class":420},[220,49381,359],{"class":264},[220,49383,49384,49386,49388],{"class":222,"line":179},[220,49385,364],{"class":264},[220,49387,49261],{"class":420},[220,49389,359],{"class":264},[220,49391,49392,49394,49396],{"class":222,"line":389},[220,49393,2550],{"class":264},[220,49395,2553],{"class":420},[220,49397,386],{"class":264},[220,49399,49400,49402,49404],{"class":222,"line":399},[220,49401,2567],{"class":264},[220,49403,49261],{"class":420},[220,49405,359],{"class":264},[220,49407,49408,49410,49412],{"class":222,"line":644},[220,49409,402],{"class":264},[220,49411,347],{"class":420},[220,49413,359],{"class":264},[212,49415,49416],{"className":468,"code":49283,"language":469,"meta":178,"style":178},[99,49417,49418,49426,49434,49442,49450],{"__ignoreMap":178},[220,49419,49420,49422,49424],{"class":222,"line":223},[220,49421,343],{"class":264},[220,49423,347],{"class":420},[220,49425,359],{"class":264},[220,49427,49428,49430,49432],{"class":222,"line":179},[220,49429,364],{"class":264},[220,49431,49261],{"class":420},[220,49433,359],{"class":264},[220,49435,49436,49438,49440],{"class":222,"line":389},[220,49437,2550],{"class":264},[220,49439,2553],{"class":420},[220,49441,386],{"class":264},[220,49443,49444,49446,49448],{"class":222,"line":399},[220,49445,2567],{"class":264},[220,49447,49261],{"class":420},[220,49449,359],{"class":264},[220,49451,49452,49454,49456],{"class":222,"line":644},[220,49453,402],{"class":264},[220,49455,347],{"class":420},[220,49457,359],{"class":264},[212,49459,49461],{"className":251,"code":49460,"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,49462,49463,49473,49477,49491,49495,49504,49512,49516,49520],{"__ignoreMap":178},[220,49464,49465,49467,49469,49471],{"class":222,"line":223},[220,49466,261],{"class":260},[220,49468,11512],{"class":264},[220,49470,268],{"class":260},[220,49472,4007],{"class":230},[220,49474,49475],{"class":222,"line":179},[220,49476,647],{"emptyLinePlaceholder":194},[220,49478,49479,49481,49483,49485,49487,49489],{"class":222,"line":389},[220,49480,1735],{"class":260},[220,49482,1738],{"class":420},[220,49484,1741],{"class":260},[220,49486,1744],{"class":260},[220,49488,1747],{"class":226},[220,49490,1750],{"class":264},[220,49492,49493],{"class":222,"line":399},[220,49494,1765],{"class":264},[220,49496,49497,49499,49502],{"class":222,"line":644},[220,49498,1770],{"class":264},[220,49500,49501],{"class":230},"'Form3D'",[220,49503,7009],{"class":264},[220,49505,49506,49508,49510],{"class":222,"line":650},[220,49507,7014],{"class":264},[220,49509,3206],{"class":230},[220,49511,2465],{"class":264},[220,49513,49514],{"class":222,"line":656},[220,49515,7031],{"class":264},[220,49517,49518],{"class":222,"line":673},[220,49519,1787],{"class":264},[220,49521,49522],{"class":222,"line":682},[220,49523,1792],{"class":264},[1504,49525,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49527},[49528,49529],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":49261,"description":49269},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":49536,"title":49537,"body":49538,"category":33063,"componentType":25877,"description":49545,"extension":191,"meta":49730,"navigation":194,"path":49731,"requiresChild":32530,"seo":49732,"stem":49733,"__hash__":49734},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":49539,"toc":49726},[49540,49543,49546,49548,49550,49553,49555,49724],[11,49541,49537],{"id":49542},"fractalnoise",[15,49544,49545],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[31911,49547],{"component":49537},[23,49549,31915],{"id":26533},[31917,49551],{":props":49552},"[{\"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,49554,31923],{"id":31922},[246,49556,49557,49586,49614,49642,49670],{":tabs":1557},[212,49558,49560],{"className":334,"code":49559,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,49561,49562,49570,49578],{"__ignoreMap":178},[220,49563,49564,49566,49568],{"class":222,"line":223},[220,49565,343],{"class":264},[220,49567,347],{"class":346},[220,49569,359],{"class":264},[220,49571,49572,49574,49576],{"class":222,"line":179},[220,49573,364],{"class":264},[220,49575,49537],{"class":346},[220,49577,386],{"class":264},[220,49579,49580,49582,49584],{"class":222,"line":389},[220,49581,402],{"class":264},[220,49583,347],{"class":346},[220,49585,359],{"class":264},[212,49587,49588],{"className":409,"code":49559,"language":411,"meta":178,"style":178},[99,49589,49590,49598,49606],{"__ignoreMap":178},[220,49591,49592,49594,49596],{"class":222,"line":223},[220,49593,343],{"class":264},[220,49595,347],{"class":420},[220,49597,359],{"class":264},[220,49599,49600,49602,49604],{"class":222,"line":179},[220,49601,364],{"class":264},[220,49603,49537],{"class":420},[220,49605,386],{"class":264},[220,49607,49608,49610,49612],{"class":222,"line":389},[220,49609,402],{"class":264},[220,49611,347],{"class":420},[220,49613,359],{"class":264},[212,49615,49616],{"className":2844,"code":49559,"language":2846,"meta":178,"style":178},[99,49617,49618,49626,49634],{"__ignoreMap":178},[220,49619,49620,49622,49624],{"class":222,"line":223},[220,49621,343],{"class":264},[220,49623,347],{"class":420},[220,49625,359],{"class":264},[220,49627,49628,49630,49632],{"class":222,"line":179},[220,49629,364],{"class":264},[220,49631,49537],{"class":420},[220,49633,386],{"class":264},[220,49635,49636,49638,49640],{"class":222,"line":389},[220,49637,402],{"class":264},[220,49639,347],{"class":420},[220,49641,359],{"class":264},[212,49643,49644],{"className":468,"code":49559,"language":469,"meta":178,"style":178},[99,49645,49646,49654,49662],{"__ignoreMap":178},[220,49647,49648,49650,49652],{"class":222,"line":223},[220,49649,343],{"class":264},[220,49651,347],{"class":420},[220,49653,359],{"class":264},[220,49655,49656,49658,49660],{"class":222,"line":179},[220,49657,364],{"class":264},[220,49659,49537],{"class":420},[220,49661,386],{"class":264},[220,49663,49664,49666,49668],{"class":222,"line":389},[220,49665,402],{"class":264},[220,49667,347],{"class":420},[220,49669,359],{"class":264},[212,49671,49673],{"className":251,"code":49672,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FractalNoise', props: {} }\n ]\n})\n",[99,49674,49675,49685,49689,49703,49707,49716,49720],{"__ignoreMap":178},[220,49676,49677,49679,49681,49683],{"class":222,"line":223},[220,49678,261],{"class":260},[220,49680,11512],{"class":264},[220,49682,268],{"class":260},[220,49684,4007],{"class":230},[220,49686,49687],{"class":222,"line":179},[220,49688,647],{"emptyLinePlaceholder":194},[220,49690,49691,49693,49695,49697,49699,49701],{"class":222,"line":389},[220,49692,1735],{"class":260},[220,49694,1738],{"class":420},[220,49696,1741],{"class":260},[220,49698,1744],{"class":260},[220,49700,1747],{"class":226},[220,49702,1750],{"class":264},[220,49704,49705],{"class":222,"line":399},[220,49706,1765],{"class":264},[220,49708,49709,49711,49714],{"class":222,"line":644},[220,49710,1770],{"class":264},[220,49712,49713],{"class":230},"'FractalNoise'",[220,49715,2465],{"class":264},[220,49717,49718],{"class":222,"line":650},[220,49719,1787],{"class":264},[220,49721,49722],{"class":222,"line":656},[220,49723,1792],{"class":264},[1504,49725,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49727},[49728,49729],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffractalnoise",{"title":49537,"description":49545},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":49736,"title":49737,"body":49738,"category":36569,"componentType":25877,"description":49745,"extension":191,"meta":49930,"navigation":194,"path":49931,"requiresChild":32530,"seo":49932,"stem":49933,"__hash__":49934},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":49739,"toc":49926},[49740,49743,49746,49748,49750,49753,49755,49924],[11,49741,49737],{"id":49742},"frost",[15,49744,49745],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[31911,49747],{"component":49737},[23,49749,31915],{"id":26533},[31917,49751],{":props":49752},"[{\"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,49754,31923],{"id":31922},[246,49756,49757,49786,49814,49842,49870],{":tabs":1557},[212,49758,49760],{"className":334,"code":49759,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFrost \u002F>\n\u003C\u002FShader>\n",[99,49761,49762,49770,49778],{"__ignoreMap":178},[220,49763,49764,49766,49768],{"class":222,"line":223},[220,49765,343],{"class":264},[220,49767,347],{"class":346},[220,49769,359],{"class":264},[220,49771,49772,49774,49776],{"class":222,"line":179},[220,49773,364],{"class":264},[220,49775,49737],{"class":346},[220,49777,386],{"class":264},[220,49779,49780,49782,49784],{"class":222,"line":389},[220,49781,402],{"class":264},[220,49783,347],{"class":346},[220,49785,359],{"class":264},[212,49787,49788],{"className":409,"code":49759,"language":411,"meta":178,"style":178},[99,49789,49790,49798,49806],{"__ignoreMap":178},[220,49791,49792,49794,49796],{"class":222,"line":223},[220,49793,343],{"class":264},[220,49795,347],{"class":420},[220,49797,359],{"class":264},[220,49799,49800,49802,49804],{"class":222,"line":179},[220,49801,364],{"class":264},[220,49803,49737],{"class":420},[220,49805,386],{"class":264},[220,49807,49808,49810,49812],{"class":222,"line":389},[220,49809,402],{"class":264},[220,49811,347],{"class":420},[220,49813,359],{"class":264},[212,49815,49816],{"className":2844,"code":49759,"language":2846,"meta":178,"style":178},[99,49817,49818,49826,49834],{"__ignoreMap":178},[220,49819,49820,49822,49824],{"class":222,"line":223},[220,49821,343],{"class":264},[220,49823,347],{"class":420},[220,49825,359],{"class":264},[220,49827,49828,49830,49832],{"class":222,"line":179},[220,49829,364],{"class":264},[220,49831,49737],{"class":420},[220,49833,386],{"class":264},[220,49835,49836,49838,49840],{"class":222,"line":389},[220,49837,402],{"class":264},[220,49839,347],{"class":420},[220,49841,359],{"class":264},[212,49843,49844],{"className":468,"code":49759,"language":469,"meta":178,"style":178},[99,49845,49846,49854,49862],{"__ignoreMap":178},[220,49847,49848,49850,49852],{"class":222,"line":223},[220,49849,343],{"class":264},[220,49851,347],{"class":420},[220,49853,359],{"class":264},[220,49855,49856,49858,49860],{"class":222,"line":179},[220,49857,364],{"class":264},[220,49859,49737],{"class":420},[220,49861,386],{"class":264},[220,49863,49864,49866,49868],{"class":222,"line":389},[220,49865,402],{"class":264},[220,49867,347],{"class":420},[220,49869,359],{"class":264},[212,49871,49873],{"className":251,"code":49872,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Frost', props: {} }\n ]\n})\n",[99,49874,49875,49885,49889,49903,49907,49916,49920],{"__ignoreMap":178},[220,49876,49877,49879,49881,49883],{"class":222,"line":223},[220,49878,261],{"class":260},[220,49880,11512],{"class":264},[220,49882,268],{"class":260},[220,49884,4007],{"class":230},[220,49886,49887],{"class":222,"line":179},[220,49888,647],{"emptyLinePlaceholder":194},[220,49890,49891,49893,49895,49897,49899,49901],{"class":222,"line":389},[220,49892,1735],{"class":260},[220,49894,1738],{"class":420},[220,49896,1741],{"class":260},[220,49898,1744],{"class":260},[220,49900,1747],{"class":226},[220,49902,1750],{"class":264},[220,49904,49905],{"class":222,"line":399},[220,49906,1765],{"class":264},[220,49908,49909,49911,49914],{"class":222,"line":644},[220,49910,1770],{"class":264},[220,49912,49913],{"class":230},"'Frost'",[220,49915,2465],{"class":264},[220,49917,49918],{"class":222,"line":650},[220,49919,1787],{"class":264},[220,49921,49922],{"class":222,"line":656},[220,49923,1792],{"class":264},[1504,49925,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49927},[49928,49929],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffrost",{"title":49737,"description":49745},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":49936,"title":49937,"body":49938,"category":33063,"componentType":25877,"description":49945,"extension":191,"meta":50130,"navigation":194,"path":50131,"requiresChild":32530,"seo":50132,"stem":50133,"__hash__":50134},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":49939,"toc":50126},[49940,49943,49946,49948,49950,49953,49955,50124],[11,49941,49937],{"id":49942},"gabornoise",[15,49944,49945],{},"Oriented sine-grain noise with a fingerprint-like flow",[31911,49947],{"component":49937},[23,49949,31915],{"id":26533},[31917,49951],{":props":49952},"[{\"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,49954,31923],{"id":31922},[246,49956,49957,49986,50014,50042,50070],{":tabs":1557},[212,49958,49960],{"className":334,"code":49959,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGaborNoise \u002F>\n\u003C\u002FShader>\n",[99,49961,49962,49970,49978],{"__ignoreMap":178},[220,49963,49964,49966,49968],{"class":222,"line":223},[220,49965,343],{"class":264},[220,49967,347],{"class":346},[220,49969,359],{"class":264},[220,49971,49972,49974,49976],{"class":222,"line":179},[220,49973,364],{"class":264},[220,49975,49937],{"class":346},[220,49977,386],{"class":264},[220,49979,49980,49982,49984],{"class":222,"line":389},[220,49981,402],{"class":264},[220,49983,347],{"class":346},[220,49985,359],{"class":264},[212,49987,49988],{"className":409,"code":49959,"language":411,"meta":178,"style":178},[99,49989,49990,49998,50006],{"__ignoreMap":178},[220,49991,49992,49994,49996],{"class":222,"line":223},[220,49993,343],{"class":264},[220,49995,347],{"class":420},[220,49997,359],{"class":264},[220,49999,50000,50002,50004],{"class":222,"line":179},[220,50001,364],{"class":264},[220,50003,49937],{"class":420},[220,50005,386],{"class":264},[220,50007,50008,50010,50012],{"class":222,"line":389},[220,50009,402],{"class":264},[220,50011,347],{"class":420},[220,50013,359],{"class":264},[212,50015,50016],{"className":2844,"code":49959,"language":2846,"meta":178,"style":178},[99,50017,50018,50026,50034],{"__ignoreMap":178},[220,50019,50020,50022,50024],{"class":222,"line":223},[220,50021,343],{"class":264},[220,50023,347],{"class":420},[220,50025,359],{"class":264},[220,50027,50028,50030,50032],{"class":222,"line":179},[220,50029,364],{"class":264},[220,50031,49937],{"class":420},[220,50033,386],{"class":264},[220,50035,50036,50038,50040],{"class":222,"line":389},[220,50037,402],{"class":264},[220,50039,347],{"class":420},[220,50041,359],{"class":264},[212,50043,50044],{"className":468,"code":49959,"language":469,"meta":178,"style":178},[99,50045,50046,50054,50062],{"__ignoreMap":178},[220,50047,50048,50050,50052],{"class":222,"line":223},[220,50049,343],{"class":264},[220,50051,347],{"class":420},[220,50053,359],{"class":264},[220,50055,50056,50058,50060],{"class":222,"line":179},[220,50057,364],{"class":264},[220,50059,49937],{"class":420},[220,50061,386],{"class":264},[220,50063,50064,50066,50068],{"class":222,"line":389},[220,50065,402],{"class":264},[220,50067,347],{"class":420},[220,50069,359],{"class":264},[212,50071,50073],{"className":251,"code":50072,"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,50074,50075,50085,50089,50103,50107,50116,50120],{"__ignoreMap":178},[220,50076,50077,50079,50081,50083],{"class":222,"line":223},[220,50078,261],{"class":260},[220,50080,11512],{"class":264},[220,50082,268],{"class":260},[220,50084,4007],{"class":230},[220,50086,50087],{"class":222,"line":179},[220,50088,647],{"emptyLinePlaceholder":194},[220,50090,50091,50093,50095,50097,50099,50101],{"class":222,"line":389},[220,50092,1735],{"class":260},[220,50094,1738],{"class":420},[220,50096,1741],{"class":260},[220,50098,1744],{"class":260},[220,50100,1747],{"class":226},[220,50102,1750],{"class":264},[220,50104,50105],{"class":222,"line":399},[220,50106,1765],{"class":264},[220,50108,50109,50111,50114],{"class":222,"line":644},[220,50110,1770],{"class":264},[220,50112,50113],{"class":230},"'GaborNoise'",[220,50115,2465],{"class":264},[220,50117,50118],{"class":222,"line":650},[220,50119,1787],{"class":264},[220,50121,50122],{"class":222,"line":656},[220,50123,1792],{"class":264},[1504,50125,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":50127},[50128,50129],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgabornoise",{"title":49937,"description":49945},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":50136,"title":15466,"body":50137,"category":36569,"componentType":25883,"description":50144,"extension":191,"meta":50404,"navigation":194,"path":50405,"requiresChild":194,"seo":50406,"stem":50407,"__hash__":50408},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":50138,"toc":50400},[50139,50142,50145,50147,50149,50152,50154,50398],[11,50140,15466],{"id":50141},"glass",[15,50143,50144],{},"Optically realistic glass lens driven in a custom shape",[31911,50146],{"component":15466},[23,50148,31915],{"id":26533},[31917,50150],{":props":50151},"[{\"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,50153,31923],{"id":31922},[246,50155,50156,50201,50245,50289,50333],{":tabs":1557},[212,50157,50159],{"className":334,"code":50158,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,50160,50161,50169,50177,50185,50193],{"__ignoreMap":178},[220,50162,50163,50165,50167],{"class":222,"line":223},[220,50164,343],{"class":264},[220,50166,347],{"class":346},[220,50168,359],{"class":264},[220,50170,50171,50173,50175],{"class":222,"line":179},[220,50172,364],{"class":264},[220,50174,15466],{"class":346},[220,50176,359],{"class":264},[220,50178,50179,50181,50183],{"class":222,"line":389},[220,50180,2550],{"class":264},[220,50182,2553],{"class":346},[220,50184,386],{"class":264},[220,50186,50187,50189,50191],{"class":222,"line":399},[220,50188,2567],{"class":264},[220,50190,15466],{"class":346},[220,50192,359],{"class":264},[220,50194,50195,50197,50199],{"class":222,"line":644},[220,50196,402],{"class":264},[220,50198,347],{"class":346},[220,50200,359],{"class":264},[212,50202,50203],{"className":409,"code":50158,"language":411,"meta":178,"style":178},[99,50204,50205,50213,50221,50229,50237],{"__ignoreMap":178},[220,50206,50207,50209,50211],{"class":222,"line":223},[220,50208,343],{"class":264},[220,50210,347],{"class":420},[220,50212,359],{"class":264},[220,50214,50215,50217,50219],{"class":222,"line":179},[220,50216,364],{"class":264},[220,50218,15466],{"class":420},[220,50220,359],{"class":264},[220,50222,50223,50225,50227],{"class":222,"line":389},[220,50224,2550],{"class":264},[220,50226,2553],{"class":420},[220,50228,386],{"class":264},[220,50230,50231,50233,50235],{"class":222,"line":399},[220,50232,2567],{"class":264},[220,50234,15466],{"class":420},[220,50236,359],{"class":264},[220,50238,50239,50241,50243],{"class":222,"line":644},[220,50240,402],{"class":264},[220,50242,347],{"class":420},[220,50244,359],{"class":264},[212,50246,50247],{"className":2844,"code":50158,"language":2846,"meta":178,"style":178},[99,50248,50249,50257,50265,50273,50281],{"__ignoreMap":178},[220,50250,50251,50253,50255],{"class":222,"line":223},[220,50252,343],{"class":264},[220,50254,347],{"class":420},[220,50256,359],{"class":264},[220,50258,50259,50261,50263],{"class":222,"line":179},[220,50260,364],{"class":264},[220,50262,15466],{"class":420},[220,50264,359],{"class":264},[220,50266,50267,50269,50271],{"class":222,"line":389},[220,50268,2550],{"class":264},[220,50270,2553],{"class":420},[220,50272,386],{"class":264},[220,50274,50275,50277,50279],{"class":222,"line":399},[220,50276,2567],{"class":264},[220,50278,15466],{"class":420},[220,50280,359],{"class":264},[220,50282,50283,50285,50287],{"class":222,"line":644},[220,50284,402],{"class":264},[220,50286,347],{"class":420},[220,50288,359],{"class":264},[212,50290,50291],{"className":468,"code":50158,"language":469,"meta":178,"style":178},[99,50292,50293,50301,50309,50317,50325],{"__ignoreMap":178},[220,50294,50295,50297,50299],{"class":222,"line":223},[220,50296,343],{"class":264},[220,50298,347],{"class":420},[220,50300,359],{"class":264},[220,50302,50303,50305,50307],{"class":222,"line":179},[220,50304,364],{"class":264},[220,50306,15466],{"class":420},[220,50308,359],{"class":264},[220,50310,50311,50313,50315],{"class":222,"line":389},[220,50312,2550],{"class":264},[220,50314,2553],{"class":420},[220,50316,386],{"class":264},[220,50318,50319,50321,50323],{"class":222,"line":399},[220,50320,2567],{"class":264},[220,50322,15466],{"class":420},[220,50324,359],{"class":264},[220,50326,50327,50329,50331],{"class":222,"line":644},[220,50328,402],{"class":264},[220,50330,347],{"class":420},[220,50332,359],{"class":264},[212,50334,50336],{"className":251,"code":50335,"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,50337,50338,50348,50352,50366,50370,50378,50386,50390,50394],{"__ignoreMap":178},[220,50339,50340,50342,50344,50346],{"class":222,"line":223},[220,50341,261],{"class":260},[220,50343,11512],{"class":264},[220,50345,268],{"class":260},[220,50347,4007],{"class":230},[220,50349,50350],{"class":222,"line":179},[220,50351,647],{"emptyLinePlaceholder":194},[220,50353,50354,50356,50358,50360,50362,50364],{"class":222,"line":389},[220,50355,1735],{"class":260},[220,50357,1738],{"class":420},[220,50359,1741],{"class":260},[220,50361,1744],{"class":260},[220,50363,1747],{"class":226},[220,50365,1750],{"class":264},[220,50367,50368],{"class":222,"line":399},[220,50369,1765],{"class":264},[220,50371,50372,50374,50376],{"class":222,"line":644},[220,50373,1770],{"class":264},[220,50375,21533],{"class":230},[220,50377,7009],{"class":264},[220,50379,50380,50382,50384],{"class":222,"line":650},[220,50381,7014],{"class":264},[220,50383,3206],{"class":230},[220,50385,2465],{"class":264},[220,50387,50388],{"class":222,"line":656},[220,50389,7031],{"class":264},[220,50391,50392],{"class":222,"line":673},[220,50393,1787],{"class":264},[220,50395,50396],{"class":222,"line":682},[220,50397,1792],{"class":264},[1504,50399,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":50401},[50402,50403],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":15466,"description":50144},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":50410,"title":6225,"body":50411,"category":33396,"componentType":25883,"description":50418,"extension":191,"meta":50735,"navigation":194,"path":50736,"requiresChild":194,"seo":50737,"stem":50738,"__hash__":50739},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":50412,"toc":50731},[50413,50416,50419,50421,50423,50426,50428,50729],[11,50414,6225],{"id":50415},"glasstiles",[15,50417,50418],{},"Refraction-like distortion in a tile grid pattern",[31911,50420],{"component":6225},[23,50422,31915],{"id":26533},[31917,50424],{":props":50425},"[{\"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,50427,31923],{"id":31922},[246,50429,50430,50487,50546,50602,50660],{":tabs":1557},[212,50431,50433],{"className":334,"code":50432,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50434,50435,50443,50450,50459,50463,50471,50479],{"__ignoreMap":178},[220,50436,50437,50439,50441],{"class":222,"line":223},[220,50438,343],{"class":264},[220,50440,347],{"class":346},[220,50442,359],{"class":264},[220,50444,50445,50447],{"class":222,"line":179},[220,50446,364],{"class":264},[220,50448,50449],{"class":346},"GlassTiles\n",[220,50451,50452,50454,50456],{"class":222,"line":389},[220,50453,20371],{"class":226},[220,50455,353],{"class":264},[220,50457,50458],{"class":230},"\"2\"\n",[220,50460,50461],{"class":222,"line":399},[220,50462,31959],{"class":264},[220,50464,50465,50467,50469],{"class":222,"line":644},[220,50466,2550],{"class":264},[220,50468,2553],{"class":346},[220,50470,386],{"class":264},[220,50472,50473,50475,50477],{"class":222,"line":650},[220,50474,2567],{"class":264},[220,50476,6225],{"class":346},[220,50478,359],{"class":264},[220,50480,50481,50483,50485],{"class":222,"line":656},[220,50482,402],{"class":264},[220,50484,347],{"class":346},[220,50486,359],{"class":264},[212,50488,50490],{"className":409,"code":50489,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50491,50492,50500,50506,50518,50522,50530,50538],{"__ignoreMap":178},[220,50493,50494,50496,50498],{"class":222,"line":223},[220,50495,343],{"class":264},[220,50497,347],{"class":420},[220,50499,359],{"class":264},[220,50501,50502,50504],{"class":222,"line":179},[220,50503,364],{"class":264},[220,50505,50449],{"class":420},[220,50507,50508,50510,50512,50514,50516],{"class":222,"line":389},[220,50509,20482],{"class":226},[220,50511,353],{"class":260},[220,50513,743],{"class":264},[220,50515,7214],{"class":420},[220,50517,749],{"class":264},[220,50519,50520],{"class":222,"line":399},[220,50521,31959],{"class":264},[220,50523,50524,50526,50528],{"class":222,"line":644},[220,50525,2550],{"class":264},[220,50527,2553],{"class":420},[220,50529,386],{"class":264},[220,50531,50532,50534,50536],{"class":222,"line":650},[220,50533,2567],{"class":264},[220,50535,6225],{"class":420},[220,50537,359],{"class":264},[220,50539,50540,50542,50544],{"class":222,"line":656},[220,50541,402],{"class":264},[220,50543,347],{"class":420},[220,50545,359],{"class":264},[212,50547,50548],{"className":2844,"code":50489,"language":2846,"meta":178,"style":178},[99,50549,50550,50558,50564,50574,50578,50586,50594],{"__ignoreMap":178},[220,50551,50552,50554,50556],{"class":222,"line":223},[220,50553,343],{"class":264},[220,50555,347],{"class":420},[220,50557,359],{"class":264},[220,50559,50560,50562],{"class":222,"line":179},[220,50561,364],{"class":264},[220,50563,50449],{"class":420},[220,50565,50566,50568,50570,50572],{"class":222,"line":389},[220,50567,20482],{"class":226},[220,50569,29871],{"class":264},[220,50571,7214],{"class":420},[220,50573,749],{"class":264},[220,50575,50576],{"class":222,"line":399},[220,50577,31959],{"class":264},[220,50579,50580,50582,50584],{"class":222,"line":644},[220,50581,2550],{"class":264},[220,50583,2553],{"class":420},[220,50585,386],{"class":264},[220,50587,50588,50590,50592],{"class":222,"line":650},[220,50589,2567],{"class":264},[220,50591,6225],{"class":420},[220,50593,359],{"class":264},[220,50595,50596,50598,50600],{"class":222,"line":656},[220,50597,402],{"class":264},[220,50599,347],{"class":420},[220,50601,359],{"class":264},[212,50603,50604],{"className":468,"code":50489,"language":469,"meta":178,"style":178},[99,50605,50606,50614,50620,50632,50636,50644,50652],{"__ignoreMap":178},[220,50607,50608,50610,50612],{"class":222,"line":223},[220,50609,343],{"class":264},[220,50611,347],{"class":420},[220,50613,359],{"class":264},[220,50615,50616,50618],{"class":222,"line":179},[220,50617,364],{"class":264},[220,50619,50449],{"class":420},[220,50621,50622,50624,50626,50628,50630],{"class":222,"line":389},[220,50623,20482],{"class":226},[220,50625,353],{"class":260},[220,50627,743],{"class":264},[220,50629,7214],{"class":420},[220,50631,749],{"class":264},[220,50633,50634],{"class":222,"line":399},[220,50635,31959],{"class":264},[220,50637,50638,50640,50642],{"class":222,"line":644},[220,50639,2550],{"class":264},[220,50641,2553],{"class":420},[220,50643,386],{"class":264},[220,50645,50646,50648,50650],{"class":222,"line":650},[220,50647,2567],{"class":264},[220,50649,6225],{"class":420},[220,50651,359],{"class":264},[220,50653,50654,50656,50658],{"class":222,"line":656},[220,50655,402],{"class":264},[220,50657,347],{"class":420},[220,50659,359],{"class":264},[212,50661,50663],{"className":251,"code":50662,"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,50664,50665,50675,50679,50693,50697,50709,50717,50721,50725],{"__ignoreMap":178},[220,50666,50667,50669,50671,50673],{"class":222,"line":223},[220,50668,261],{"class":260},[220,50670,11512],{"class":264},[220,50672,268],{"class":260},[220,50674,4007],{"class":230},[220,50676,50677],{"class":222,"line":179},[220,50678,647],{"emptyLinePlaceholder":194},[220,50680,50681,50683,50685,50687,50689,50691],{"class":222,"line":389},[220,50682,1735],{"class":260},[220,50684,1738],{"class":420},[220,50686,1741],{"class":260},[220,50688,1744],{"class":260},[220,50690,1747],{"class":226},[220,50692,1750],{"class":264},[220,50694,50695],{"class":222,"line":399},[220,50696,1765],{"class":264},[220,50698,50699,50701,50703,50705,50707],{"class":222,"line":644},[220,50700,1770],{"class":264},[220,50702,6583],{"class":230},[220,50704,32203],{"class":264},[220,50706,7214],{"class":420},[220,50708,7546],{"class":264},[220,50710,50711,50713,50715],{"class":222,"line":650},[220,50712,7014],{"class":264},[220,50714,3206],{"class":230},[220,50716,2465],{"class":264},[220,50718,50719],{"class":222,"line":656},[220,50720,7031],{"class":264},[220,50722,50723],{"class":222,"line":673},[220,50724,1787],{"class":264},[220,50726,50727],{"class":222,"line":682},[220,50728,1792],{"class":264},[1504,50730,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50732},[50733,50734],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":6225,"description":50418},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":50741,"title":50742,"body":50743,"category":32806,"componentType":25883,"description":50750,"extension":191,"meta":51067,"navigation":194,"path":51068,"requiresChild":194,"seo":51069,"stem":51070,"__hash__":51071},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":50744,"toc":51063},[50745,50748,50751,50753,50755,50758,50760,51061],[11,50746,50742],{"id":50747},"glitch",[15,50749,50750],{},"Digital glitch that melts pixels and distorts colors",[31911,50752],{"component":50742},[23,50754,31915],{"id":26533},[31917,50756],{":props":50757},"[{\"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,50759,31923],{"id":31922},[246,50761,50762,50818,50877,50933,50991],{":tabs":1557},[212,50763,50765],{"className":334,"code":50764,"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,50766,50767,50775,50782,50790,50794,50802,50810],{"__ignoreMap":178},[220,50768,50769,50771,50773],{"class":222,"line":223},[220,50770,343],{"class":264},[220,50772,347],{"class":346},[220,50774,359],{"class":264},[220,50776,50777,50779],{"class":222,"line":179},[220,50778,364],{"class":264},[220,50780,50781],{"class":346},"Glitch\n",[220,50783,50784,50786,50788],{"class":222,"line":389},[220,50785,20371],{"class":226},[220,50787,353],{"class":264},[220,50789,42358],{"class":230},[220,50791,50792],{"class":222,"line":399},[220,50793,31959],{"class":264},[220,50795,50796,50798,50800],{"class":222,"line":644},[220,50797,2550],{"class":264},[220,50799,2553],{"class":346},[220,50801,386],{"class":264},[220,50803,50804,50806,50808],{"class":222,"line":650},[220,50805,2567],{"class":264},[220,50807,50742],{"class":346},[220,50809,359],{"class":264},[220,50811,50812,50814,50816],{"class":222,"line":656},[220,50813,402],{"class":264},[220,50815,347],{"class":346},[220,50817,359],{"class":264},[212,50819,50821],{"className":409,"code":50820,"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,50822,50823,50831,50837,50849,50853,50861,50869],{"__ignoreMap":178},[220,50824,50825,50827,50829],{"class":222,"line":223},[220,50826,343],{"class":264},[220,50828,347],{"class":420},[220,50830,359],{"class":264},[220,50832,50833,50835],{"class":222,"line":179},[220,50834,364],{"class":264},[220,50836,50781],{"class":420},[220,50838,50839,50841,50843,50845,50847],{"class":222,"line":389},[220,50840,20482],{"class":226},[220,50842,353],{"class":260},[220,50844,743],{"class":264},[220,50846,7754],{"class":420},[220,50848,749],{"class":264},[220,50850,50851],{"class":222,"line":399},[220,50852,31959],{"class":264},[220,50854,50855,50857,50859],{"class":222,"line":644},[220,50856,2550],{"class":264},[220,50858,2553],{"class":420},[220,50860,386],{"class":264},[220,50862,50863,50865,50867],{"class":222,"line":650},[220,50864,2567],{"class":264},[220,50866,50742],{"class":420},[220,50868,359],{"class":264},[220,50870,50871,50873,50875],{"class":222,"line":656},[220,50872,402],{"class":264},[220,50874,347],{"class":420},[220,50876,359],{"class":264},[212,50878,50879],{"className":2844,"code":50820,"language":2846,"meta":178,"style":178},[99,50880,50881,50889,50895,50905,50909,50917,50925],{"__ignoreMap":178},[220,50882,50883,50885,50887],{"class":222,"line":223},[220,50884,343],{"class":264},[220,50886,347],{"class":420},[220,50888,359],{"class":264},[220,50890,50891,50893],{"class":222,"line":179},[220,50892,364],{"class":264},[220,50894,50781],{"class":420},[220,50896,50897,50899,50901,50903],{"class":222,"line":389},[220,50898,20482],{"class":226},[220,50900,29871],{"class":264},[220,50902,7754],{"class":420},[220,50904,749],{"class":264},[220,50906,50907],{"class":222,"line":399},[220,50908,31959],{"class":264},[220,50910,50911,50913,50915],{"class":222,"line":644},[220,50912,2550],{"class":264},[220,50914,2553],{"class":420},[220,50916,386],{"class":264},[220,50918,50919,50921,50923],{"class":222,"line":650},[220,50920,2567],{"class":264},[220,50922,50742],{"class":420},[220,50924,359],{"class":264},[220,50926,50927,50929,50931],{"class":222,"line":656},[220,50928,402],{"class":264},[220,50930,347],{"class":420},[220,50932,359],{"class":264},[212,50934,50935],{"className":468,"code":50820,"language":469,"meta":178,"style":178},[99,50936,50937,50945,50951,50963,50967,50975,50983],{"__ignoreMap":178},[220,50938,50939,50941,50943],{"class":222,"line":223},[220,50940,343],{"class":264},[220,50942,347],{"class":420},[220,50944,359],{"class":264},[220,50946,50947,50949],{"class":222,"line":179},[220,50948,364],{"class":264},[220,50950,50781],{"class":420},[220,50952,50953,50955,50957,50959,50961],{"class":222,"line":389},[220,50954,20482],{"class":226},[220,50956,353],{"class":260},[220,50958,743],{"class":264},[220,50960,7754],{"class":420},[220,50962,749],{"class":264},[220,50964,50965],{"class":222,"line":399},[220,50966,31959],{"class":264},[220,50968,50969,50971,50973],{"class":222,"line":644},[220,50970,2550],{"class":264},[220,50972,2553],{"class":420},[220,50974,386],{"class":264},[220,50976,50977,50979,50981],{"class":222,"line":650},[220,50978,2567],{"class":264},[220,50980,50742],{"class":420},[220,50982,359],{"class":264},[220,50984,50985,50987,50989],{"class":222,"line":656},[220,50986,402],{"class":264},[220,50988,347],{"class":420},[220,50990,359],{"class":264},[212,50992,50994],{"className":251,"code":50993,"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,50995,50996,51006,51010,51024,51028,51041,51049,51053,51057],{"__ignoreMap":178},[220,50997,50998,51000,51002,51004],{"class":222,"line":223},[220,50999,261],{"class":260},[220,51001,11512],{"class":264},[220,51003,268],{"class":260},[220,51005,4007],{"class":230},[220,51007,51008],{"class":222,"line":179},[220,51009,647],{"emptyLinePlaceholder":194},[220,51011,51012,51014,51016,51018,51020,51022],{"class":222,"line":389},[220,51013,1735],{"class":260},[220,51015,1738],{"class":420},[220,51017,1741],{"class":260},[220,51019,1744],{"class":260},[220,51021,1747],{"class":226},[220,51023,1750],{"class":264},[220,51025,51026],{"class":222,"line":399},[220,51027,1765],{"class":264},[220,51029,51030,51032,51035,51037,51039],{"class":222,"line":644},[220,51031,1770],{"class":264},[220,51033,51034],{"class":230},"'Glitch'",[220,51036,32203],{"class":264},[220,51038,7754],{"class":420},[220,51040,7546],{"class":264},[220,51042,51043,51045,51047],{"class":222,"line":650},[220,51044,7014],{"class":264},[220,51046,3206],{"class":230},[220,51048,2465],{"class":264},[220,51050,51051],{"class":222,"line":656},[220,51052,7031],{"class":264},[220,51054,51055],{"class":222,"line":673},[220,51056,1787],{"class":264},[220,51058,51059],{"class":222,"line":682},[220,51060,1792],{"class":264},[1504,51062,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51064},[51065,51066],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":50742,"description":50750},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":51073,"title":11792,"body":51074,"category":32806,"componentType":25883,"description":51081,"extension":191,"meta":51398,"navigation":194,"path":51399,"requiresChild":194,"seo":51400,"stem":51401,"__hash__":51402},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":51075,"toc":51394},[51076,51079,51082,51084,51086,51089,51091,51392],[11,51077,11792],{"id":51078},"glow",[15,51080,51081],{},"Soft glow effect with adjustable intensity",[31911,51083],{"component":11792},[23,51085,31915],{"id":26533},[31917,51087],{":props":51088},"[{\"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,51090,31923],{"id":31922},[246,51092,51093,51149,51208,51264,51322],{":tabs":1557},[212,51094,51096],{"className":334,"code":51095,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,51097,51098,51106,51113,51121,51125,51133,51141],{"__ignoreMap":178},[220,51099,51100,51102,51104],{"class":222,"line":223},[220,51101,343],{"class":264},[220,51103,347],{"class":346},[220,51105,359],{"class":264},[220,51107,51108,51110],{"class":222,"line":179},[220,51109,364],{"class":264},[220,51111,51112],{"class":346},"Glow\n",[220,51114,51115,51117,51119],{"class":222,"line":389},[220,51116,20371],{"class":226},[220,51118,353],{"class":264},[220,51120,36625],{"class":230},[220,51122,51123],{"class":222,"line":399},[220,51124,31959],{"class":264},[220,51126,51127,51129,51131],{"class":222,"line":644},[220,51128,2550],{"class":264},[220,51130,2553],{"class":346},[220,51132,386],{"class":264},[220,51134,51135,51137,51139],{"class":222,"line":650},[220,51136,2567],{"class":264},[220,51138,11792],{"class":346},[220,51140,359],{"class":264},[220,51142,51143,51145,51147],{"class":222,"line":656},[220,51144,402],{"class":264},[220,51146,347],{"class":346},[220,51148,359],{"class":264},[212,51150,51152],{"className":409,"code":51151,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,51153,51154,51162,51168,51180,51184,51192,51200],{"__ignoreMap":178},[220,51155,51156,51158,51160],{"class":222,"line":223},[220,51157,343],{"class":264},[220,51159,347],{"class":420},[220,51161,359],{"class":264},[220,51163,51164,51166],{"class":222,"line":179},[220,51165,364],{"class":264},[220,51167,51112],{"class":420},[220,51169,51170,51172,51174,51176,51178],{"class":222,"line":389},[220,51171,20482],{"class":226},[220,51173,353],{"class":260},[220,51175,743],{"class":264},[220,51177,8677],{"class":420},[220,51179,749],{"class":264},[220,51181,51182],{"class":222,"line":399},[220,51183,31959],{"class":264},[220,51185,51186,51188,51190],{"class":222,"line":644},[220,51187,2550],{"class":264},[220,51189,2553],{"class":420},[220,51191,386],{"class":264},[220,51193,51194,51196,51198],{"class":222,"line":650},[220,51195,2567],{"class":264},[220,51197,11792],{"class":420},[220,51199,359],{"class":264},[220,51201,51202,51204,51206],{"class":222,"line":656},[220,51203,402],{"class":264},[220,51205,347],{"class":420},[220,51207,359],{"class":264},[212,51209,51210],{"className":2844,"code":51151,"language":2846,"meta":178,"style":178},[99,51211,51212,51220,51226,51236,51240,51248,51256],{"__ignoreMap":178},[220,51213,51214,51216,51218],{"class":222,"line":223},[220,51215,343],{"class":264},[220,51217,347],{"class":420},[220,51219,359],{"class":264},[220,51221,51222,51224],{"class":222,"line":179},[220,51223,364],{"class":264},[220,51225,51112],{"class":420},[220,51227,51228,51230,51232,51234],{"class":222,"line":389},[220,51229,20482],{"class":226},[220,51231,29871],{"class":264},[220,51233,8677],{"class":420},[220,51235,749],{"class":264},[220,51237,51238],{"class":222,"line":399},[220,51239,31959],{"class":264},[220,51241,51242,51244,51246],{"class":222,"line":644},[220,51243,2550],{"class":264},[220,51245,2553],{"class":420},[220,51247,386],{"class":264},[220,51249,51250,51252,51254],{"class":222,"line":650},[220,51251,2567],{"class":264},[220,51253,11792],{"class":420},[220,51255,359],{"class":264},[220,51257,51258,51260,51262],{"class":222,"line":656},[220,51259,402],{"class":264},[220,51261,347],{"class":420},[220,51263,359],{"class":264},[212,51265,51266],{"className":468,"code":51151,"language":469,"meta":178,"style":178},[99,51267,51268,51276,51282,51294,51298,51306,51314],{"__ignoreMap":178},[220,51269,51270,51272,51274],{"class":222,"line":223},[220,51271,343],{"class":264},[220,51273,347],{"class":420},[220,51275,359],{"class":264},[220,51277,51278,51280],{"class":222,"line":179},[220,51279,364],{"class":264},[220,51281,51112],{"class":420},[220,51283,51284,51286,51288,51290,51292],{"class":222,"line":389},[220,51285,20482],{"class":226},[220,51287,353],{"class":260},[220,51289,743],{"class":264},[220,51291,8677],{"class":420},[220,51293,749],{"class":264},[220,51295,51296],{"class":222,"line":399},[220,51297,31959],{"class":264},[220,51299,51300,51302,51304],{"class":222,"line":644},[220,51301,2550],{"class":264},[220,51303,2553],{"class":420},[220,51305,386],{"class":264},[220,51307,51308,51310,51312],{"class":222,"line":650},[220,51309,2567],{"class":264},[220,51311,11792],{"class":420},[220,51313,359],{"class":264},[220,51315,51316,51318,51320],{"class":222,"line":656},[220,51317,402],{"class":264},[220,51319,347],{"class":420},[220,51321,359],{"class":264},[212,51323,51325],{"className":251,"code":51324,"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,51326,51327,51337,51341,51355,51359,51372,51380,51384,51388],{"__ignoreMap":178},[220,51328,51329,51331,51333,51335],{"class":222,"line":223},[220,51330,261],{"class":260},[220,51332,11512],{"class":264},[220,51334,268],{"class":260},[220,51336,4007],{"class":230},[220,51338,51339],{"class":222,"line":179},[220,51340,647],{"emptyLinePlaceholder":194},[220,51342,51343,51345,51347,51349,51351,51353],{"class":222,"line":389},[220,51344,1735],{"class":260},[220,51346,1738],{"class":420},[220,51348,1741],{"class":260},[220,51350,1744],{"class":260},[220,51352,1747],{"class":226},[220,51354,1750],{"class":264},[220,51356,51357],{"class":222,"line":399},[220,51358,1765],{"class":264},[220,51360,51361,51363,51366,51368,51370],{"class":222,"line":644},[220,51362,1770],{"class":264},[220,51364,51365],{"class":230},"'Glow'",[220,51367,32203],{"class":264},[220,51369,8677],{"class":420},[220,51371,7546],{"class":264},[220,51373,51374,51376,51378],{"class":222,"line":650},[220,51375,7014],{"class":264},[220,51377,3206],{"class":230},[220,51379,2465],{"class":264},[220,51381,51382],{"class":222,"line":656},[220,51383,7031],{"class":264},[220,51385,51386],{"class":222,"line":673},[220,51387,1787],{"class":264},[220,51389,51390],{"class":222,"line":682},[220,51391,1792],{"class":264},[1504,51393,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51395},[51396,51397],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":11792,"description":51081},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":51404,"title":51405,"body":51406,"category":33063,"componentType":25877,"description":51413,"extension":191,"meta":51654,"navigation":194,"path":51655,"requiresChild":32530,"seo":51656,"stem":51657,"__hash__":51658},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":51407,"toc":51650},[51408,51411,51414,51416,51418,51421,51423,51648],[11,51409,51405],{"id":51410},"godrays",[15,51412,51413],{},"Volumetric light rays emanating from a point",[31911,51415],{"component":51405},[23,51417,31915],{"id":26533},[31917,51419],{":props":51420},"[{\"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,51422,31923],{"id":31922},[246,51424,51425,51465,51508,51548,51590],{":tabs":1557},[212,51426,51428],{"className":334,"code":51427,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,51429,51430,51438,51445,51453,51457],{"__ignoreMap":178},[220,51431,51432,51434,51436],{"class":222,"line":223},[220,51433,343],{"class":264},[220,51435,347],{"class":346},[220,51437,359],{"class":264},[220,51439,51440,51442],{"class":222,"line":179},[220,51441,364],{"class":264},[220,51443,51444],{"class":346},"Godrays\n",[220,51446,51447,51449,51451],{"class":222,"line":389},[220,51448,20371],{"class":226},[220,51450,353],{"class":264},[220,51452,9650],{"class":230},[220,51454,51455],{"class":222,"line":399},[220,51456,1234],{"class":264},[220,51458,51459,51461,51463],{"class":222,"line":644},[220,51460,402],{"class":264},[220,51462,347],{"class":346},[220,51464,359],{"class":264},[212,51466,51468],{"className":409,"code":51467,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,51469,51470,51478,51484,51496,51500],{"__ignoreMap":178},[220,51471,51472,51474,51476],{"class":222,"line":223},[220,51473,343],{"class":264},[220,51475,347],{"class":420},[220,51477,359],{"class":264},[220,51479,51480,51482],{"class":222,"line":179},[220,51481,364],{"class":264},[220,51483,51444],{"class":420},[220,51485,51486,51488,51490,51492,51494],{"class":222,"line":389},[220,51487,20482],{"class":226},[220,51489,353],{"class":260},[220,51491,743],{"class":264},[220,51493,6299],{"class":420},[220,51495,749],{"class":264},[220,51497,51498],{"class":222,"line":399},[220,51499,1234],{"class":264},[220,51501,51502,51504,51506],{"class":222,"line":644},[220,51503,402],{"class":264},[220,51505,347],{"class":420},[220,51507,359],{"class":264},[212,51509,51510],{"className":2844,"code":51467,"language":2846,"meta":178,"style":178},[99,51511,51512,51520,51526,51536,51540],{"__ignoreMap":178},[220,51513,51514,51516,51518],{"class":222,"line":223},[220,51515,343],{"class":264},[220,51517,347],{"class":420},[220,51519,359],{"class":264},[220,51521,51522,51524],{"class":222,"line":179},[220,51523,364],{"class":264},[220,51525,51444],{"class":420},[220,51527,51528,51530,51532,51534],{"class":222,"line":389},[220,51529,20482],{"class":226},[220,51531,29871],{"class":264},[220,51533,6299],{"class":420},[220,51535,749],{"class":264},[220,51537,51538],{"class":222,"line":399},[220,51539,1234],{"class":264},[220,51541,51542,51544,51546],{"class":222,"line":644},[220,51543,402],{"class":264},[220,51545,347],{"class":420},[220,51547,359],{"class":264},[212,51549,51550],{"className":468,"code":51467,"language":469,"meta":178,"style":178},[99,51551,51552,51560,51566,51578,51582],{"__ignoreMap":178},[220,51553,51554,51556,51558],{"class":222,"line":223},[220,51555,343],{"class":264},[220,51557,347],{"class":420},[220,51559,359],{"class":264},[220,51561,51562,51564],{"class":222,"line":179},[220,51563,364],{"class":264},[220,51565,51444],{"class":420},[220,51567,51568,51570,51572,51574,51576],{"class":222,"line":389},[220,51569,20482],{"class":226},[220,51571,353],{"class":260},[220,51573,743],{"class":264},[220,51575,6299],{"class":420},[220,51577,749],{"class":264},[220,51579,51580],{"class":222,"line":399},[220,51581,1234],{"class":264},[220,51583,51584,51586,51588],{"class":222,"line":644},[220,51585,402],{"class":264},[220,51587,347],{"class":420},[220,51589,359],{"class":264},[212,51591,51593],{"className":251,"code":51592,"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,51594,51595,51605,51609,51623,51627,51640,51644],{"__ignoreMap":178},[220,51596,51597,51599,51601,51603],{"class":222,"line":223},[220,51598,261],{"class":260},[220,51600,11512],{"class":264},[220,51602,268],{"class":260},[220,51604,4007],{"class":230},[220,51606,51607],{"class":222,"line":179},[220,51608,647],{"emptyLinePlaceholder":194},[220,51610,51611,51613,51615,51617,51619,51621],{"class":222,"line":389},[220,51612,1735],{"class":260},[220,51614,1738],{"class":420},[220,51616,1741],{"class":260},[220,51618,1744],{"class":260},[220,51620,1747],{"class":226},[220,51622,1750],{"class":264},[220,51624,51625],{"class":222,"line":399},[220,51626,1765],{"class":264},[220,51628,51629,51631,51634,51636,51638],{"class":222,"line":644},[220,51630,1770],{"class":264},[220,51632,51633],{"class":230},"'Godrays'",[220,51635,32203],{"class":264},[220,51637,6299],{"class":420},[220,51639,1782],{"class":264},[220,51641,51642],{"class":222,"line":650},[220,51643,1787],{"class":264},[220,51645,51646],{"class":222,"line":656},[220,51647,1792],{"class":264},[1504,51649,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51651},[51652,51653],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":51405,"description":51413},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":51660,"title":51661,"body":51662,"category":36569,"componentType":25877,"description":51669,"extension":191,"meta":51854,"navigation":194,"path":51855,"requiresChild":32530,"seo":51856,"stem":51857,"__hash__":51858},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":51663,"toc":51850},[51664,51667,51670,51672,51674,51677,51679,51848],[11,51665,51661],{"id":51666},"goo",[15,51668,51669],{},"Photoreal wet liquid — animated 3D metaball blobs that merge and bulge to loosely form the shape, with sliding wet highlights, a clearcoat rim and a translucent body",[31911,51671],{"component":51661},[23,51673,31915],{"id":26533},[31917,51675],{":props":51676},"[{\"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,51678,31923],{"id":31922},[246,51680,51681,51710,51738,51766,51794],{":tabs":1557},[212,51682,51684],{"className":334,"code":51683,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,51685,51686,51694,51702],{"__ignoreMap":178},[220,51687,51688,51690,51692],{"class":222,"line":223},[220,51689,343],{"class":264},[220,51691,347],{"class":346},[220,51693,359],{"class":264},[220,51695,51696,51698,51700],{"class":222,"line":179},[220,51697,364],{"class":264},[220,51699,51661],{"class":346},[220,51701,386],{"class":264},[220,51703,51704,51706,51708],{"class":222,"line":389},[220,51705,402],{"class":264},[220,51707,347],{"class":346},[220,51709,359],{"class":264},[212,51711,51712],{"className":409,"code":51683,"language":411,"meta":178,"style":178},[99,51713,51714,51722,51730],{"__ignoreMap":178},[220,51715,51716,51718,51720],{"class":222,"line":223},[220,51717,343],{"class":264},[220,51719,347],{"class":420},[220,51721,359],{"class":264},[220,51723,51724,51726,51728],{"class":222,"line":179},[220,51725,364],{"class":264},[220,51727,51661],{"class":420},[220,51729,386],{"class":264},[220,51731,51732,51734,51736],{"class":222,"line":389},[220,51733,402],{"class":264},[220,51735,347],{"class":420},[220,51737,359],{"class":264},[212,51739,51740],{"className":2844,"code":51683,"language":2846,"meta":178,"style":178},[99,51741,51742,51750,51758],{"__ignoreMap":178},[220,51743,51744,51746,51748],{"class":222,"line":223},[220,51745,343],{"class":264},[220,51747,347],{"class":420},[220,51749,359],{"class":264},[220,51751,51752,51754,51756],{"class":222,"line":179},[220,51753,364],{"class":264},[220,51755,51661],{"class":420},[220,51757,386],{"class":264},[220,51759,51760,51762,51764],{"class":222,"line":389},[220,51761,402],{"class":264},[220,51763,347],{"class":420},[220,51765,359],{"class":264},[212,51767,51768],{"className":468,"code":51683,"language":469,"meta":178,"style":178},[99,51769,51770,51778,51786],{"__ignoreMap":178},[220,51771,51772,51774,51776],{"class":222,"line":223},[220,51773,343],{"class":264},[220,51775,347],{"class":420},[220,51777,359],{"class":264},[220,51779,51780,51782,51784],{"class":222,"line":179},[220,51781,364],{"class":264},[220,51783,51661],{"class":420},[220,51785,386],{"class":264},[220,51787,51788,51790,51792],{"class":222,"line":389},[220,51789,402],{"class":264},[220,51791,347],{"class":420},[220,51793,359],{"class":264},[212,51795,51797],{"className":251,"code":51796,"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,51798,51799,51809,51813,51827,51831,51840,51844],{"__ignoreMap":178},[220,51800,51801,51803,51805,51807],{"class":222,"line":223},[220,51802,261],{"class":260},[220,51804,11512],{"class":264},[220,51806,268],{"class":260},[220,51808,4007],{"class":230},[220,51810,51811],{"class":222,"line":179},[220,51812,647],{"emptyLinePlaceholder":194},[220,51814,51815,51817,51819,51821,51823,51825],{"class":222,"line":389},[220,51816,1735],{"class":260},[220,51818,1738],{"class":420},[220,51820,1741],{"class":260},[220,51822,1744],{"class":260},[220,51824,1747],{"class":226},[220,51826,1750],{"class":264},[220,51828,51829],{"class":222,"line":399},[220,51830,1765],{"class":264},[220,51832,51833,51835,51838],{"class":222,"line":644},[220,51834,1770],{"class":264},[220,51836,51837],{"class":230},"'Goo'",[220,51839,2465],{"class":264},[220,51841,51842],{"class":222,"line":650},[220,51843,1787],{"class":264},[220,51845,51846],{"class":222,"line":656},[220,51847,1792],{"class":264},[1504,51849,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":51851},[51852,51853],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":51661,"description":51669},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":51860,"title":51861,"body":51862,"category":32806,"componentType":25883,"description":51869,"extension":191,"meta":52130,"navigation":194,"path":52131,"requiresChild":194,"seo":52132,"stem":52133,"__hash__":52134},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":51863,"toc":52126},[51864,51867,51870,51872,51874,51877,51879,52124],[11,51865,51861],{"id":51866},"gradientmap",[15,51868,51869],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[31911,51871],{"component":51861},[23,51873,31915],{"id":26533},[31917,51875],{":props":51876},"[{\"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,51878,31923],{"id":31922},[246,51880,51881,51926,51970,52014,52058],{":tabs":1557},[212,51882,51884],{"className":334,"code":51883,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,51885,51886,51894,51902,51910,51918],{"__ignoreMap":178},[220,51887,51888,51890,51892],{"class":222,"line":223},[220,51889,343],{"class":264},[220,51891,347],{"class":346},[220,51893,359],{"class":264},[220,51895,51896,51898,51900],{"class":222,"line":179},[220,51897,364],{"class":264},[220,51899,51861],{"class":346},[220,51901,359],{"class":264},[220,51903,51904,51906,51908],{"class":222,"line":389},[220,51905,2550],{"class":264},[220,51907,2553],{"class":346},[220,51909,386],{"class":264},[220,51911,51912,51914,51916],{"class":222,"line":399},[220,51913,2567],{"class":264},[220,51915,51861],{"class":346},[220,51917,359],{"class":264},[220,51919,51920,51922,51924],{"class":222,"line":644},[220,51921,402],{"class":264},[220,51923,347],{"class":346},[220,51925,359],{"class":264},[212,51927,51928],{"className":409,"code":51883,"language":411,"meta":178,"style":178},[99,51929,51930,51938,51946,51954,51962],{"__ignoreMap":178},[220,51931,51932,51934,51936],{"class":222,"line":223},[220,51933,343],{"class":264},[220,51935,347],{"class":420},[220,51937,359],{"class":264},[220,51939,51940,51942,51944],{"class":222,"line":179},[220,51941,364],{"class":264},[220,51943,51861],{"class":420},[220,51945,359],{"class":264},[220,51947,51948,51950,51952],{"class":222,"line":389},[220,51949,2550],{"class":264},[220,51951,2553],{"class":420},[220,51953,386],{"class":264},[220,51955,51956,51958,51960],{"class":222,"line":399},[220,51957,2567],{"class":264},[220,51959,51861],{"class":420},[220,51961,359],{"class":264},[220,51963,51964,51966,51968],{"class":222,"line":644},[220,51965,402],{"class":264},[220,51967,347],{"class":420},[220,51969,359],{"class":264},[212,51971,51972],{"className":2844,"code":51883,"language":2846,"meta":178,"style":178},[99,51973,51974,51982,51990,51998,52006],{"__ignoreMap":178},[220,51975,51976,51978,51980],{"class":222,"line":223},[220,51977,343],{"class":264},[220,51979,347],{"class":420},[220,51981,359],{"class":264},[220,51983,51984,51986,51988],{"class":222,"line":179},[220,51985,364],{"class":264},[220,51987,51861],{"class":420},[220,51989,359],{"class":264},[220,51991,51992,51994,51996],{"class":222,"line":389},[220,51993,2550],{"class":264},[220,51995,2553],{"class":420},[220,51997,386],{"class":264},[220,51999,52000,52002,52004],{"class":222,"line":399},[220,52001,2567],{"class":264},[220,52003,51861],{"class":420},[220,52005,359],{"class":264},[220,52007,52008,52010,52012],{"class":222,"line":644},[220,52009,402],{"class":264},[220,52011,347],{"class":420},[220,52013,359],{"class":264},[212,52015,52016],{"className":468,"code":51883,"language":469,"meta":178,"style":178},[99,52017,52018,52026,52034,52042,52050],{"__ignoreMap":178},[220,52019,52020,52022,52024],{"class":222,"line":223},[220,52021,343],{"class":264},[220,52023,347],{"class":420},[220,52025,359],{"class":264},[220,52027,52028,52030,52032],{"class":222,"line":179},[220,52029,364],{"class":264},[220,52031,51861],{"class":420},[220,52033,359],{"class":264},[220,52035,52036,52038,52040],{"class":222,"line":389},[220,52037,2550],{"class":264},[220,52039,2553],{"class":420},[220,52041,386],{"class":264},[220,52043,52044,52046,52048],{"class":222,"line":399},[220,52045,2567],{"class":264},[220,52047,51861],{"class":420},[220,52049,359],{"class":264},[220,52051,52052,52054,52056],{"class":222,"line":644},[220,52053,402],{"class":264},[220,52055,347],{"class":420},[220,52057,359],{"class":264},[212,52059,52061],{"className":251,"code":52060,"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,52062,52063,52073,52077,52091,52095,52104,52112,52116,52120],{"__ignoreMap":178},[220,52064,52065,52067,52069,52071],{"class":222,"line":223},[220,52066,261],{"class":260},[220,52068,11512],{"class":264},[220,52070,268],{"class":260},[220,52072,4007],{"class":230},[220,52074,52075],{"class":222,"line":179},[220,52076,647],{"emptyLinePlaceholder":194},[220,52078,52079,52081,52083,52085,52087,52089],{"class":222,"line":389},[220,52080,1735],{"class":260},[220,52082,1738],{"class":420},[220,52084,1741],{"class":260},[220,52086,1744],{"class":260},[220,52088,1747],{"class":226},[220,52090,1750],{"class":264},[220,52092,52093],{"class":222,"line":399},[220,52094,1765],{"class":264},[220,52096,52097,52099,52102],{"class":222,"line":644},[220,52098,1770],{"class":264},[220,52100,52101],{"class":230},"'GradientMap'",[220,52103,7009],{"class":264},[220,52105,52106,52108,52110],{"class":222,"line":650},[220,52107,7014],{"class":264},[220,52109,3206],{"class":230},[220,52111,2465],{"class":264},[220,52113,52114],{"class":222,"line":656},[220,52115,7031],{"class":264},[220,52117,52118],{"class":222,"line":673},[220,52119,1787],{"class":264},[220,52121,52122],{"class":222,"line":682},[220,52123,1792],{"class":264},[1504,52125,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":52127},[52128,52129],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":51861,"description":51869},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":52136,"title":52137,"body":52138,"category":36368,"componentType":25883,"description":52145,"extension":191,"meta":52400,"navigation":194,"path":52401,"requiresChild":194,"seo":52402,"stem":52403,"__hash__":52404},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":52139,"toc":52397},[52140,52143,52146,52148,52150,52395],[11,52141,52137],{"id":52142},"grayscale",[15,52144,52145],{},"Convert colors to black and white",[31911,52147],{"component":52137},[23,52149,31923],{"id":31922},[246,52151,52152,52197,52241,52285,52329],{":tabs":1557},[212,52153,52155],{"className":334,"code":52154,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[99,52156,52157,52165,52173,52181,52189],{"__ignoreMap":178},[220,52158,52159,52161,52163],{"class":222,"line":223},[220,52160,343],{"class":264},[220,52162,347],{"class":346},[220,52164,359],{"class":264},[220,52166,52167,52169,52171],{"class":222,"line":179},[220,52168,364],{"class":264},[220,52170,52137],{"class":346},[220,52172,359],{"class":264},[220,52174,52175,52177,52179],{"class":222,"line":389},[220,52176,2550],{"class":264},[220,52178,2553],{"class":346},[220,52180,386],{"class":264},[220,52182,52183,52185,52187],{"class":222,"line":399},[220,52184,2567],{"class":264},[220,52186,52137],{"class":346},[220,52188,359],{"class":264},[220,52190,52191,52193,52195],{"class":222,"line":644},[220,52192,402],{"class":264},[220,52194,347],{"class":346},[220,52196,359],{"class":264},[212,52198,52199],{"className":409,"code":52154,"language":411,"meta":178,"style":178},[99,52200,52201,52209,52217,52225,52233],{"__ignoreMap":178},[220,52202,52203,52205,52207],{"class":222,"line":223},[220,52204,343],{"class":264},[220,52206,347],{"class":420},[220,52208,359],{"class":264},[220,52210,52211,52213,52215],{"class":222,"line":179},[220,52212,364],{"class":264},[220,52214,52137],{"class":420},[220,52216,359],{"class":264},[220,52218,52219,52221,52223],{"class":222,"line":389},[220,52220,2550],{"class":264},[220,52222,2553],{"class":420},[220,52224,386],{"class":264},[220,52226,52227,52229,52231],{"class":222,"line":399},[220,52228,2567],{"class":264},[220,52230,52137],{"class":420},[220,52232,359],{"class":264},[220,52234,52235,52237,52239],{"class":222,"line":644},[220,52236,402],{"class":264},[220,52238,347],{"class":420},[220,52240,359],{"class":264},[212,52242,52243],{"className":2844,"code":52154,"language":2846,"meta":178,"style":178},[99,52244,52245,52253,52261,52269,52277],{"__ignoreMap":178},[220,52246,52247,52249,52251],{"class":222,"line":223},[220,52248,343],{"class":264},[220,52250,347],{"class":420},[220,52252,359],{"class":264},[220,52254,52255,52257,52259],{"class":222,"line":179},[220,52256,364],{"class":264},[220,52258,52137],{"class":420},[220,52260,359],{"class":264},[220,52262,52263,52265,52267],{"class":222,"line":389},[220,52264,2550],{"class":264},[220,52266,2553],{"class":420},[220,52268,386],{"class":264},[220,52270,52271,52273,52275],{"class":222,"line":399},[220,52272,2567],{"class":264},[220,52274,52137],{"class":420},[220,52276,359],{"class":264},[220,52278,52279,52281,52283],{"class":222,"line":644},[220,52280,402],{"class":264},[220,52282,347],{"class":420},[220,52284,359],{"class":264},[212,52286,52287],{"className":468,"code":52154,"language":469,"meta":178,"style":178},[99,52288,52289,52297,52305,52313,52321],{"__ignoreMap":178},[220,52290,52291,52293,52295],{"class":222,"line":223},[220,52292,343],{"class":264},[220,52294,347],{"class":420},[220,52296,359],{"class":264},[220,52298,52299,52301,52303],{"class":222,"line":179},[220,52300,364],{"class":264},[220,52302,52137],{"class":420},[220,52304,359],{"class":264},[220,52306,52307,52309,52311],{"class":222,"line":389},[220,52308,2550],{"class":264},[220,52310,2553],{"class":420},[220,52312,386],{"class":264},[220,52314,52315,52317,52319],{"class":222,"line":399},[220,52316,2567],{"class":264},[220,52318,52137],{"class":420},[220,52320,359],{"class":264},[220,52322,52323,52325,52327],{"class":222,"line":644},[220,52324,402],{"class":264},[220,52326,347],{"class":420},[220,52328,359],{"class":264},[212,52330,52332],{"className":251,"code":52331,"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,52333,52334,52344,52348,52362,52366,52375,52383,52387,52391],{"__ignoreMap":178},[220,52335,52336,52338,52340,52342],{"class":222,"line":223},[220,52337,261],{"class":260},[220,52339,11512],{"class":264},[220,52341,268],{"class":260},[220,52343,4007],{"class":230},[220,52345,52346],{"class":222,"line":179},[220,52347,647],{"emptyLinePlaceholder":194},[220,52349,52350,52352,52354,52356,52358,52360],{"class":222,"line":389},[220,52351,1735],{"class":260},[220,52353,1738],{"class":420},[220,52355,1741],{"class":260},[220,52357,1744],{"class":260},[220,52359,1747],{"class":226},[220,52361,1750],{"class":264},[220,52363,52364],{"class":222,"line":399},[220,52365,1765],{"class":264},[220,52367,52368,52370,52373],{"class":222,"line":644},[220,52369,1770],{"class":264},[220,52371,52372],{"class":230},"'Grayscale'",[220,52374,7009],{"class":264},[220,52376,52377,52379,52381],{"class":222,"line":650},[220,52378,7014],{"class":264},[220,52380,3206],{"class":230},[220,52382,2465],{"class":264},[220,52384,52385],{"class":222,"line":656},[220,52386,7031],{"class":264},[220,52388,52389],{"class":222,"line":673},[220,52390,1787],{"class":264},[220,52392,52393],{"class":222,"line":682},[220,52394,1792],{"class":264},[1504,52396,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":52398},[52399],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":52137,"description":52145},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":52406,"title":52407,"body":52408,"category":33063,"componentType":25877,"description":52415,"extension":191,"meta":52645,"navigation":194,"path":52646,"requiresChild":32530,"seo":52647,"stem":52648,"__hash__":52649},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":52409,"toc":52641},[52410,52413,52416,52418,52420,52423,52425,52639],[11,52411,52407],{"id":52412},"grid",[15,52414,52415],{},"Simple grid lines pattern with adjustable thickness and rotation",[31911,52417],{"component":52407},[23,52419,31915],{"id":26533},[31917,52421],{":props":52422},"[{\"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,52424,31923],{"id":31922},[246,52426,52427,52467,52505,52543,52581],{":tabs":1557},[212,52428,52430],{"className":334,"code":52429,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,52431,52432,52440,52447,52455,52459],{"__ignoreMap":178},[220,52433,52434,52436,52438],{"class":222,"line":223},[220,52435,343],{"class":264},[220,52437,347],{"class":346},[220,52439,359],{"class":264},[220,52441,52442,52444],{"class":222,"line":179},[220,52443,364],{"class":264},[220,52445,52446],{"class":346},"Grid\n",[220,52448,52449,52451,52453],{"class":222,"line":389},[220,52450,9635],{"class":226},[220,52452,353],{"class":264},[220,52454,9591],{"class":230},[220,52456,52457],{"class":222,"line":399},[220,52458,1234],{"class":264},[220,52460,52461,52463,52465],{"class":222,"line":644},[220,52462,402],{"class":264},[220,52464,347],{"class":346},[220,52466,359],{"class":264},[212,52468,52469],{"className":409,"code":52429,"language":411,"meta":178,"style":178},[99,52470,52471,52479,52485,52493,52497],{"__ignoreMap":178},[220,52472,52473,52475,52477],{"class":222,"line":223},[220,52474,343],{"class":264},[220,52476,347],{"class":420},[220,52478,359],{"class":264},[220,52480,52481,52483],{"class":222,"line":179},[220,52482,364],{"class":264},[220,52484,52446],{"class":420},[220,52486,52487,52489,52491],{"class":222,"line":389},[220,52488,9635],{"class":226},[220,52490,353],{"class":260},[220,52492,9591],{"class":230},[220,52494,52495],{"class":222,"line":399},[220,52496,1234],{"class":264},[220,52498,52499,52501,52503],{"class":222,"line":644},[220,52500,402],{"class":264},[220,52502,347],{"class":420},[220,52504,359],{"class":264},[212,52506,52507],{"className":2844,"code":52429,"language":2846,"meta":178,"style":178},[99,52508,52509,52517,52523,52531,52535],{"__ignoreMap":178},[220,52510,52511,52513,52515],{"class":222,"line":223},[220,52512,343],{"class":264},[220,52514,347],{"class":420},[220,52516,359],{"class":264},[220,52518,52519,52521],{"class":222,"line":179},[220,52520,364],{"class":264},[220,52522,52446],{"class":420},[220,52524,52525,52527,52529],{"class":222,"line":389},[220,52526,9635],{"class":226},[220,52528,353],{"class":264},[220,52530,9591],{"class":230},[220,52532,52533],{"class":222,"line":399},[220,52534,1234],{"class":264},[220,52536,52537,52539,52541],{"class":222,"line":644},[220,52538,402],{"class":264},[220,52540,347],{"class":420},[220,52542,359],{"class":264},[212,52544,52545],{"className":468,"code":52429,"language":469,"meta":178,"style":178},[99,52546,52547,52555,52561,52569,52573],{"__ignoreMap":178},[220,52548,52549,52551,52553],{"class":222,"line":223},[220,52550,343],{"class":264},[220,52552,347],{"class":420},[220,52554,359],{"class":264},[220,52556,52557,52559],{"class":222,"line":179},[220,52558,364],{"class":264},[220,52560,52446],{"class":420},[220,52562,52563,52565,52567],{"class":222,"line":389},[220,52564,9635],{"class":226},[220,52566,353],{"class":260},[220,52568,9591],{"class":230},[220,52570,52571],{"class":222,"line":399},[220,52572,1234],{"class":264},[220,52574,52575,52577,52579],{"class":222,"line":644},[220,52576,402],{"class":264},[220,52578,347],{"class":420},[220,52580,359],{"class":264},[212,52582,52584],{"className":251,"code":52583,"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,52585,52586,52596,52600,52614,52618,52631,52635],{"__ignoreMap":178},[220,52587,52588,52590,52592,52594],{"class":222,"line":223},[220,52589,261],{"class":260},[220,52591,11512],{"class":264},[220,52593,268],{"class":260},[220,52595,4007],{"class":230},[220,52597,52598],{"class":222,"line":179},[220,52599,647],{"emptyLinePlaceholder":194},[220,52601,52602,52604,52606,52608,52610,52612],{"class":222,"line":389},[220,52603,1735],{"class":260},[220,52605,1738],{"class":420},[220,52607,1741],{"class":260},[220,52609,1744],{"class":260},[220,52611,1747],{"class":226},[220,52613,1750],{"class":264},[220,52615,52616],{"class":222,"line":399},[220,52617,1765],{"class":264},[220,52619,52620,52622,52625,52627,52629],{"class":222,"line":644},[220,52621,1770],{"class":264},[220,52623,52624],{"class":230},"'Grid'",[220,52626,1776],{"class":264},[220,52628,10169],{"class":230},[220,52630,1782],{"class":264},[220,52632,52633],{"class":222,"line":650},[220,52634,1787],{"class":264},[220,52636,52637],{"class":222,"line":656},[220,52638,1792],{"class":264},[1504,52640,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52642},[52643,52644],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":52407,"description":52415},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":52651,"title":7095,"body":52652,"category":35559,"componentType":25883,"description":52659,"extension":191,"meta":53021,"navigation":194,"path":53022,"requiresChild":194,"seo":53023,"stem":53024,"__hash__":53025},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":52653,"toc":53017},[52654,52657,52660,52662,52664,52667,52669,53015],[11,52655,7095],{"id":52656},"griddistortion",[15,52658,52659],{},"Interactive grid distortion controlled by mouse position",[31911,52661],{"component":7095},[23,52663,31915],{"id":26533},[31917,52665],{":props":52666},"[{\"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,52668,31923],{"id":31922},[246,52670,52671,52735,52806,52872,52942],{":tabs":1557},[212,52672,52674],{"className":334,"code":52673,"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,52675,52676,52684,52691,52699,52707,52711,52719,52727],{"__ignoreMap":178},[220,52677,52678,52680,52682],{"class":222,"line":223},[220,52679,343],{"class":264},[220,52681,347],{"class":346},[220,52683,359],{"class":264},[220,52685,52686,52688],{"class":222,"line":179},[220,52687,364],{"class":264},[220,52689,52690],{"class":346},"GridDistortion\n",[220,52692,52693,52695,52697],{"class":222,"line":389},[220,52694,20371],{"class":226},[220,52696,353],{"class":264},[220,52698,36625],{"class":230},[220,52700,52701,52703,52705],{"class":222,"line":399},[220,52702,17405],{"class":226},[220,52704,353],{"class":264},[220,52706,36625],{"class":230},[220,52708,52709],{"class":222,"line":644},[220,52710,31959],{"class":264},[220,52712,52713,52715,52717],{"class":222,"line":650},[220,52714,2550],{"class":264},[220,52716,2553],{"class":346},[220,52718,386],{"class":264},[220,52720,52721,52723,52725],{"class":222,"line":656},[220,52722,2567],{"class":264},[220,52724,7095],{"class":346},[220,52726,359],{"class":264},[220,52728,52729,52731,52733],{"class":222,"line":673},[220,52730,402],{"class":264},[220,52732,347],{"class":346},[220,52734,359],{"class":264},[212,52736,52738],{"className":409,"code":52737,"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,52739,52740,52748,52754,52766,52778,52782,52790,52798],{"__ignoreMap":178},[220,52741,52742,52744,52746],{"class":222,"line":223},[220,52743,343],{"class":264},[220,52745,347],{"class":420},[220,52747,359],{"class":264},[220,52749,52750,52752],{"class":222,"line":179},[220,52751,364],{"class":264},[220,52753,52690],{"class":420},[220,52755,52756,52758,52760,52762,52764],{"class":222,"line":389},[220,52757,20482],{"class":226},[220,52759,353],{"class":260},[220,52761,743],{"class":264},[220,52763,8677],{"class":420},[220,52765,749],{"class":264},[220,52767,52768,52770,52772,52774,52776],{"class":222,"line":399},[220,52769,9645],{"class":226},[220,52771,353],{"class":260},[220,52773,743],{"class":264},[220,52775,8677],{"class":420},[220,52777,749],{"class":264},[220,52779,52780],{"class":222,"line":644},[220,52781,31959],{"class":264},[220,52783,52784,52786,52788],{"class":222,"line":650},[220,52785,2550],{"class":264},[220,52787,2553],{"class":420},[220,52789,386],{"class":264},[220,52791,52792,52794,52796],{"class":222,"line":656},[220,52793,2567],{"class":264},[220,52795,7095],{"class":420},[220,52797,359],{"class":264},[220,52799,52800,52802,52804],{"class":222,"line":673},[220,52801,402],{"class":264},[220,52803,347],{"class":420},[220,52805,359],{"class":264},[212,52807,52808],{"className":2844,"code":52737,"language":2846,"meta":178,"style":178},[99,52809,52810,52818,52824,52834,52844,52848,52856,52864],{"__ignoreMap":178},[220,52811,52812,52814,52816],{"class":222,"line":223},[220,52813,343],{"class":264},[220,52815,347],{"class":420},[220,52817,359],{"class":264},[220,52819,52820,52822],{"class":222,"line":179},[220,52821,364],{"class":264},[220,52823,52690],{"class":420},[220,52825,52826,52828,52830,52832],{"class":222,"line":389},[220,52827,20482],{"class":226},[220,52829,29871],{"class":264},[220,52831,8677],{"class":420},[220,52833,749],{"class":264},[220,52835,52836,52838,52840,52842],{"class":222,"line":399},[220,52837,9645],{"class":226},[220,52839,29871],{"class":264},[220,52841,8677],{"class":420},[220,52843,749],{"class":264},[220,52845,52846],{"class":222,"line":644},[220,52847,31959],{"class":264},[220,52849,52850,52852,52854],{"class":222,"line":650},[220,52851,2550],{"class":264},[220,52853,2553],{"class":420},[220,52855,386],{"class":264},[220,52857,52858,52860,52862],{"class":222,"line":656},[220,52859,2567],{"class":264},[220,52861,7095],{"class":420},[220,52863,359],{"class":264},[220,52865,52866,52868,52870],{"class":222,"line":673},[220,52867,402],{"class":264},[220,52869,347],{"class":420},[220,52871,359],{"class":264},[212,52873,52874],{"className":468,"code":52737,"language":469,"meta":178,"style":178},[99,52875,52876,52884,52890,52902,52914,52918,52926,52934],{"__ignoreMap":178},[220,52877,52878,52880,52882],{"class":222,"line":223},[220,52879,343],{"class":264},[220,52881,347],{"class":420},[220,52883,359],{"class":264},[220,52885,52886,52888],{"class":222,"line":179},[220,52887,364],{"class":264},[220,52889,52690],{"class":420},[220,52891,52892,52894,52896,52898,52900],{"class":222,"line":389},[220,52893,20482],{"class":226},[220,52895,353],{"class":260},[220,52897,743],{"class":264},[220,52899,8677],{"class":420},[220,52901,749],{"class":264},[220,52903,52904,52906,52908,52910,52912],{"class":222,"line":399},[220,52905,9645],{"class":226},[220,52907,353],{"class":260},[220,52909,743],{"class":264},[220,52911,8677],{"class":420},[220,52913,749],{"class":264},[220,52915,52916],{"class":222,"line":644},[220,52917,31959],{"class":264},[220,52919,52920,52922,52924],{"class":222,"line":650},[220,52921,2550],{"class":264},[220,52923,2553],{"class":420},[220,52925,386],{"class":264},[220,52927,52928,52930,52932],{"class":222,"line":656},[220,52929,2567],{"class":264},[220,52931,7095],{"class":420},[220,52933,359],{"class":264},[220,52935,52936,52938,52940],{"class":222,"line":673},[220,52937,402],{"class":264},[220,52939,347],{"class":420},[220,52941,359],{"class":264},[212,52943,52945],{"className":251,"code":52944,"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,52946,52947,52957,52961,52975,52979,52995,53003,53007,53011],{"__ignoreMap":178},[220,52948,52949,52951,52953,52955],{"class":222,"line":223},[220,52950,261],{"class":260},[220,52952,11512],{"class":264},[220,52954,268],{"class":260},[220,52956,4007],{"class":230},[220,52958,52959],{"class":222,"line":179},[220,52960,647],{"emptyLinePlaceholder":194},[220,52962,52963,52965,52967,52969,52971,52973],{"class":222,"line":389},[220,52964,1735],{"class":260},[220,52966,1738],{"class":420},[220,52968,1741],{"class":260},[220,52970,1744],{"class":260},[220,52972,1747],{"class":226},[220,52974,1750],{"class":264},[220,52976,52977],{"class":222,"line":399},[220,52978,1765],{"class":264},[220,52980,52981,52983,52985,52987,52989,52991,52993],{"class":222,"line":644},[220,52982,1770],{"class":264},[220,52984,7538],{"class":230},[220,52986,32203],{"class":264},[220,52988,8677],{"class":420},[220,52990,6566],{"class":264},[220,52992,8677],{"class":420},[220,52994,7546],{"class":264},[220,52996,52997,52999,53001],{"class":222,"line":650},[220,52998,7014],{"class":264},[220,53000,3206],{"class":230},[220,53002,2465],{"class":264},[220,53004,53005],{"class":222,"line":656},[220,53006,7031],{"class":264},[220,53008,53009],{"class":222,"line":673},[220,53010,1787],{"class":264},[220,53012,53013],{"class":222,"line":682},[220,53014,1792],{"class":264},[1504,53016,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53018},[53019,53020],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":7095,"description":52659},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":53027,"title":53028,"body":53029,"category":53291,"componentType":25883,"description":53036,"extension":191,"meta":53292,"navigation":194,"path":53293,"requiresChild":194,"seo":53294,"stem":53295,"__hash__":53296},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":53030,"toc":53288},[53031,53034,53037,53039,53041,53286],[11,53032,53028],{"id":53033},"group",[15,53035,53036],{},"Container for organizing and composing child effects — supports flex-like flow layout (column\u002Frow stacking via the flow prop)",[31911,53038],{"component":53028},[23,53040,31923],{"id":31922},[246,53042,53043,53088,53132,53176,53220],{":tabs":1557},[212,53044,53046],{"className":334,"code":53045,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,53047,53048,53056,53064,53072,53080],{"__ignoreMap":178},[220,53049,53050,53052,53054],{"class":222,"line":223},[220,53051,343],{"class":264},[220,53053,347],{"class":346},[220,53055,359],{"class":264},[220,53057,53058,53060,53062],{"class":222,"line":179},[220,53059,364],{"class":264},[220,53061,53028],{"class":346},[220,53063,359],{"class":264},[220,53065,53066,53068,53070],{"class":222,"line":389},[220,53067,2550],{"class":264},[220,53069,2553],{"class":346},[220,53071,386],{"class":264},[220,53073,53074,53076,53078],{"class":222,"line":399},[220,53075,2567],{"class":264},[220,53077,53028],{"class":346},[220,53079,359],{"class":264},[220,53081,53082,53084,53086],{"class":222,"line":644},[220,53083,402],{"class":264},[220,53085,347],{"class":346},[220,53087,359],{"class":264},[212,53089,53090],{"className":409,"code":53045,"language":411,"meta":178,"style":178},[99,53091,53092,53100,53108,53116,53124],{"__ignoreMap":178},[220,53093,53094,53096,53098],{"class":222,"line":223},[220,53095,343],{"class":264},[220,53097,347],{"class":420},[220,53099,359],{"class":264},[220,53101,53102,53104,53106],{"class":222,"line":179},[220,53103,364],{"class":264},[220,53105,53028],{"class":420},[220,53107,359],{"class":264},[220,53109,53110,53112,53114],{"class":222,"line":389},[220,53111,2550],{"class":264},[220,53113,2553],{"class":420},[220,53115,386],{"class":264},[220,53117,53118,53120,53122],{"class":222,"line":399},[220,53119,2567],{"class":264},[220,53121,53028],{"class":420},[220,53123,359],{"class":264},[220,53125,53126,53128,53130],{"class":222,"line":644},[220,53127,402],{"class":264},[220,53129,347],{"class":420},[220,53131,359],{"class":264},[212,53133,53134],{"className":2844,"code":53045,"language":2846,"meta":178,"style":178},[99,53135,53136,53144,53152,53160,53168],{"__ignoreMap":178},[220,53137,53138,53140,53142],{"class":222,"line":223},[220,53139,343],{"class":264},[220,53141,347],{"class":420},[220,53143,359],{"class":264},[220,53145,53146,53148,53150],{"class":222,"line":179},[220,53147,364],{"class":264},[220,53149,53028],{"class":420},[220,53151,359],{"class":264},[220,53153,53154,53156,53158],{"class":222,"line":389},[220,53155,2550],{"class":264},[220,53157,2553],{"class":420},[220,53159,386],{"class":264},[220,53161,53162,53164,53166],{"class":222,"line":399},[220,53163,2567],{"class":264},[220,53165,53028],{"class":420},[220,53167,359],{"class":264},[220,53169,53170,53172,53174],{"class":222,"line":644},[220,53171,402],{"class":264},[220,53173,347],{"class":420},[220,53175,359],{"class":264},[212,53177,53178],{"className":468,"code":53045,"language":469,"meta":178,"style":178},[99,53179,53180,53188,53196,53204,53212],{"__ignoreMap":178},[220,53181,53182,53184,53186],{"class":222,"line":223},[220,53183,343],{"class":264},[220,53185,347],{"class":420},[220,53187,359],{"class":264},[220,53189,53190,53192,53194],{"class":222,"line":179},[220,53191,364],{"class":264},[220,53193,53028],{"class":420},[220,53195,359],{"class":264},[220,53197,53198,53200,53202],{"class":222,"line":389},[220,53199,2550],{"class":264},[220,53201,2553],{"class":420},[220,53203,386],{"class":264},[220,53205,53206,53208,53210],{"class":222,"line":399},[220,53207,2567],{"class":264},[220,53209,53028],{"class":420},[220,53211,359],{"class":264},[220,53213,53214,53216,53218],{"class":222,"line":644},[220,53215,402],{"class":264},[220,53217,347],{"class":420},[220,53219,359],{"class":264},[212,53221,53223],{"className":251,"code":53222,"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,53224,53225,53235,53239,53253,53257,53266,53274,53278,53282],{"__ignoreMap":178},[220,53226,53227,53229,53231,53233],{"class":222,"line":223},[220,53228,261],{"class":260},[220,53230,11512],{"class":264},[220,53232,268],{"class":260},[220,53234,4007],{"class":230},[220,53236,53237],{"class":222,"line":179},[220,53238,647],{"emptyLinePlaceholder":194},[220,53240,53241,53243,53245,53247,53249,53251],{"class":222,"line":389},[220,53242,1735],{"class":260},[220,53244,1738],{"class":420},[220,53246,1741],{"class":260},[220,53248,1744],{"class":260},[220,53250,1747],{"class":226},[220,53252,1750],{"class":264},[220,53254,53255],{"class":222,"line":399},[220,53256,1765],{"class":264},[220,53258,53259,53261,53264],{"class":222,"line":644},[220,53260,1770],{"class":264},[220,53262,53263],{"class":230},"'Group'",[220,53265,7009],{"class":264},[220,53267,53268,53270,53272],{"class":222,"line":650},[220,53269,7014],{"class":264},[220,53271,3206],{"class":230},[220,53273,2465],{"class":264},[220,53275,53276],{"class":222,"line":656},[220,53277,7031],{"class":264},[220,53279,53280],{"class":222,"line":673},[220,53281,1787],{"class":264},[220,53283,53284],{"class":222,"line":682},[220,53285,1792],{"class":264},[1504,53287,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53289},[53290],{"id":31922,"depth":179,"text":31923},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":53028,"description":53036},"docs\u002Fcomponents\u002FGroup","VRm3A9h-85RvRmiecZuaIcK_SKxGDs5Woe18hQVpFfg",{"id":53298,"title":53299,"body":53300,"category":33063,"componentType":25877,"description":53307,"extension":191,"meta":53492,"navigation":194,"path":53493,"requiresChild":32530,"seo":53494,"stem":53495,"__hash__":53496},"components\u002Fdocs\u002Fcomponents\u002FHTMLInCanvas.md","HTMLInCanvas",{"type":8,"value":53301,"toc":53489},[53302,53305,53308,53314,53316,53318,53487],[11,53303,53299],{"id":53304},"htmlincanvas",[15,53306,53307],{},"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.",[53309,53310],"experimental-warning",{"link-label":53311,"link-url":53312,"message":53313},"View the spec","https:\u002F\u002Fgithub.com\u002FWICG\u002Fhtml-in-canvas","This component is powered by the WICG html-in-canvas proposal, which is currently only available in Chrome Canary behind a feature flag. It is not suitable for production use and may change as the specification evolves.",[31911,53315],{"component":53299},[23,53317,31923],{"id":31922},[246,53319,53320,53349,53377,53405,53433],{":tabs":1557},[212,53321,53323],{"className":334,"code":53322,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHTMLInCanvas \u002F>\n\u003C\u002FShader>\n",[99,53324,53325,53333,53341],{"__ignoreMap":178},[220,53326,53327,53329,53331],{"class":222,"line":223},[220,53328,343],{"class":264},[220,53330,347],{"class":346},[220,53332,359],{"class":264},[220,53334,53335,53337,53339],{"class":222,"line":179},[220,53336,364],{"class":264},[220,53338,53299],{"class":346},[220,53340,386],{"class":264},[220,53342,53343,53345,53347],{"class":222,"line":389},[220,53344,402],{"class":264},[220,53346,347],{"class":346},[220,53348,359],{"class":264},[212,53350,53351],{"className":409,"code":53322,"language":411,"meta":178,"style":178},[99,53352,53353,53361,53369],{"__ignoreMap":178},[220,53354,53355,53357,53359],{"class":222,"line":223},[220,53356,343],{"class":264},[220,53358,347],{"class":420},[220,53360,359],{"class":264},[220,53362,53363,53365,53367],{"class":222,"line":179},[220,53364,364],{"class":264},[220,53366,53299],{"class":420},[220,53368,386],{"class":264},[220,53370,53371,53373,53375],{"class":222,"line":389},[220,53372,402],{"class":264},[220,53374,347],{"class":420},[220,53376,359],{"class":264},[212,53378,53379],{"className":2844,"code":53322,"language":2846,"meta":178,"style":178},[99,53380,53381,53389,53397],{"__ignoreMap":178},[220,53382,53383,53385,53387],{"class":222,"line":223},[220,53384,343],{"class":264},[220,53386,347],{"class":420},[220,53388,359],{"class":264},[220,53390,53391,53393,53395],{"class":222,"line":179},[220,53392,364],{"class":264},[220,53394,53299],{"class":420},[220,53396,386],{"class":264},[220,53398,53399,53401,53403],{"class":222,"line":389},[220,53400,402],{"class":264},[220,53402,347],{"class":420},[220,53404,359],{"class":264},[212,53406,53407],{"className":468,"code":53322,"language":469,"meta":178,"style":178},[99,53408,53409,53417,53425],{"__ignoreMap":178},[220,53410,53411,53413,53415],{"class":222,"line":223},[220,53412,343],{"class":264},[220,53414,347],{"class":420},[220,53416,359],{"class":264},[220,53418,53419,53421,53423],{"class":222,"line":179},[220,53420,364],{"class":264},[220,53422,53299],{"class":420},[220,53424,386],{"class":264},[220,53426,53427,53429,53431],{"class":222,"line":389},[220,53428,402],{"class":264},[220,53430,347],{"class":420},[220,53432,359],{"class":264},[212,53434,53436],{"className":251,"code":53435,"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,53437,53438,53448,53452,53466,53470,53479,53483],{"__ignoreMap":178},[220,53439,53440,53442,53444,53446],{"class":222,"line":223},[220,53441,261],{"class":260},[220,53443,11512],{"class":264},[220,53445,268],{"class":260},[220,53447,4007],{"class":230},[220,53449,53450],{"class":222,"line":179},[220,53451,647],{"emptyLinePlaceholder":194},[220,53453,53454,53456,53458,53460,53462,53464],{"class":222,"line":389},[220,53455,1735],{"class":260},[220,53457,1738],{"class":420},[220,53459,1741],{"class":260},[220,53461,1744],{"class":260},[220,53463,1747],{"class":226},[220,53465,1750],{"class":264},[220,53467,53468],{"class":222,"line":399},[220,53469,1765],{"class":264},[220,53471,53472,53474,53477],{"class":222,"line":644},[220,53473,1770],{"class":264},[220,53475,53476],{"class":230},"'HTMLInCanvas'",[220,53478,2465],{"class":264},[220,53480,53481],{"class":222,"line":650},[220,53482,1787],{"class":264},[220,53484,53485],{"class":222,"line":656},[220,53486,1792],{"class":264},[1504,53488,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53490},[53491],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhtmlincanvas",{"title":53299,"description":53307},"docs\u002Fcomponents\u002FHTMLInCanvas","1gpE_BrWAlIJQU2c02pY_YKYJGKOk5b4LGNpVcA27co",{"id":53498,"title":53499,"body":53500,"category":32806,"componentType":25883,"description":53507,"extension":191,"meta":53768,"navigation":194,"path":53769,"requiresChild":194,"seo":53770,"stem":53771,"__hash__":53772},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":53501,"toc":53764},[53502,53505,53508,53510,53512,53515,53517,53762],[11,53503,53499],{"id":53504},"halftone",[15,53506,53507],{},"Halftone dot pattern effect for printing aesthetics",[31911,53509],{"component":53499},[23,53511,31915],{"id":26533},[31917,53513],{":props":53514},"[{\"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,53516,31923],{"id":31922},[246,53518,53519,53564,53608,53652,53696],{":tabs":1557},[212,53520,53522],{"className":334,"code":53521,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,53523,53524,53532,53540,53548,53556],{"__ignoreMap":178},[220,53525,53526,53528,53530],{"class":222,"line":223},[220,53527,343],{"class":264},[220,53529,347],{"class":346},[220,53531,359],{"class":264},[220,53533,53534,53536,53538],{"class":222,"line":179},[220,53535,364],{"class":264},[220,53537,53499],{"class":346},[220,53539,359],{"class":264},[220,53541,53542,53544,53546],{"class":222,"line":389},[220,53543,2550],{"class":264},[220,53545,2553],{"class":346},[220,53547,386],{"class":264},[220,53549,53550,53552,53554],{"class":222,"line":399},[220,53551,2567],{"class":264},[220,53553,53499],{"class":346},[220,53555,359],{"class":264},[220,53557,53558,53560,53562],{"class":222,"line":644},[220,53559,402],{"class":264},[220,53561,347],{"class":346},[220,53563,359],{"class":264},[212,53565,53566],{"className":409,"code":53521,"language":411,"meta":178,"style":178},[99,53567,53568,53576,53584,53592,53600],{"__ignoreMap":178},[220,53569,53570,53572,53574],{"class":222,"line":223},[220,53571,343],{"class":264},[220,53573,347],{"class":420},[220,53575,359],{"class":264},[220,53577,53578,53580,53582],{"class":222,"line":179},[220,53579,364],{"class":264},[220,53581,53499],{"class":420},[220,53583,359],{"class":264},[220,53585,53586,53588,53590],{"class":222,"line":389},[220,53587,2550],{"class":264},[220,53589,2553],{"class":420},[220,53591,386],{"class":264},[220,53593,53594,53596,53598],{"class":222,"line":399},[220,53595,2567],{"class":264},[220,53597,53499],{"class":420},[220,53599,359],{"class":264},[220,53601,53602,53604,53606],{"class":222,"line":644},[220,53603,402],{"class":264},[220,53605,347],{"class":420},[220,53607,359],{"class":264},[212,53609,53610],{"className":2844,"code":53521,"language":2846,"meta":178,"style":178},[99,53611,53612,53620,53628,53636,53644],{"__ignoreMap":178},[220,53613,53614,53616,53618],{"class":222,"line":223},[220,53615,343],{"class":264},[220,53617,347],{"class":420},[220,53619,359],{"class":264},[220,53621,53622,53624,53626],{"class":222,"line":179},[220,53623,364],{"class":264},[220,53625,53499],{"class":420},[220,53627,359],{"class":264},[220,53629,53630,53632,53634],{"class":222,"line":389},[220,53631,2550],{"class":264},[220,53633,2553],{"class":420},[220,53635,386],{"class":264},[220,53637,53638,53640,53642],{"class":222,"line":399},[220,53639,2567],{"class":264},[220,53641,53499],{"class":420},[220,53643,359],{"class":264},[220,53645,53646,53648,53650],{"class":222,"line":644},[220,53647,402],{"class":264},[220,53649,347],{"class":420},[220,53651,359],{"class":264},[212,53653,53654],{"className":468,"code":53521,"language":469,"meta":178,"style":178},[99,53655,53656,53664,53672,53680,53688],{"__ignoreMap":178},[220,53657,53658,53660,53662],{"class":222,"line":223},[220,53659,343],{"class":264},[220,53661,347],{"class":420},[220,53663,359],{"class":264},[220,53665,53666,53668,53670],{"class":222,"line":179},[220,53667,364],{"class":264},[220,53669,53499],{"class":420},[220,53671,359],{"class":264},[220,53673,53674,53676,53678],{"class":222,"line":389},[220,53675,2550],{"class":264},[220,53677,2553],{"class":420},[220,53679,386],{"class":264},[220,53681,53682,53684,53686],{"class":222,"line":399},[220,53683,2567],{"class":264},[220,53685,53499],{"class":420},[220,53687,359],{"class":264},[220,53689,53690,53692,53694],{"class":222,"line":644},[220,53691,402],{"class":264},[220,53693,347],{"class":420},[220,53695,359],{"class":264},[212,53697,53699],{"className":251,"code":53698,"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,53700,53701,53711,53715,53729,53733,53742,53750,53754,53758],{"__ignoreMap":178},[220,53702,53703,53705,53707,53709],{"class":222,"line":223},[220,53704,261],{"class":260},[220,53706,11512],{"class":264},[220,53708,268],{"class":260},[220,53710,4007],{"class":230},[220,53712,53713],{"class":222,"line":179},[220,53714,647],{"emptyLinePlaceholder":194},[220,53716,53717,53719,53721,53723,53725,53727],{"class":222,"line":389},[220,53718,1735],{"class":260},[220,53720,1738],{"class":420},[220,53722,1741],{"class":260},[220,53724,1744],{"class":260},[220,53726,1747],{"class":226},[220,53728,1750],{"class":264},[220,53730,53731],{"class":222,"line":399},[220,53732,1765],{"class":264},[220,53734,53735,53737,53740],{"class":222,"line":644},[220,53736,1770],{"class":264},[220,53738,53739],{"class":230},"'Halftone'",[220,53741,7009],{"class":264},[220,53743,53744,53746,53748],{"class":222,"line":650},[220,53745,7014],{"class":264},[220,53747,3206],{"class":230},[220,53749,2465],{"class":264},[220,53751,53752],{"class":222,"line":656},[220,53753,7031],{"class":264},[220,53755,53756],{"class":222,"line":673},[220,53757,1787],{"class":264},[220,53759,53760],{"class":222,"line":682},[220,53761,1792],{"class":264},[1504,53763,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53765},[53766,53767],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":53499,"description":53507},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":53774,"title":53775,"body":53776,"category":15908,"componentType":25877,"description":53783,"extension":191,"meta":54062,"navigation":194,"path":54063,"requiresChild":32530,"seo":54064,"stem":54065,"__hash__":54066},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":53777,"toc":54058},[53778,53781,53784,53786,53788,53791,53793,54056],[11,53779,53775],{"id":53780},"heart",[15,53782,53783],{},"Heart shape with adjustable size",[31911,53785],{"component":53775},[23,53787,31915],{"id":26533},[31917,53789],{":props":53790},"[{\"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,53792,31923],{"id":31922},[246,53794,53795,53844,53896,53944,53994],{":tabs":1557},[212,53796,53798],{"className":334,"code":53797,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,53799,53800,53808,53815,53823,53832,53836],{"__ignoreMap":178},[220,53801,53802,53804,53806],{"class":222,"line":223},[220,53803,343],{"class":264},[220,53805,347],{"class":346},[220,53807,359],{"class":264},[220,53809,53810,53812],{"class":222,"line":179},[220,53811,364],{"class":264},[220,53813,53814],{"class":346},"Heart\n",[220,53816,53817,53819,53821],{"class":222,"line":389},[220,53818,9635],{"class":226},[220,53820,353],{"class":264},[220,53822,9591],{"class":230},[220,53824,53825,53827,53829],{"class":222,"line":399},[220,53826,17405],{"class":226},[220,53828,353],{"class":264},[220,53830,53831],{"class":230},"\"0.32\"\n",[220,53833,53834],{"class":222,"line":644},[220,53835,1234],{"class":264},[220,53837,53838,53840,53842],{"class":222,"line":650},[220,53839,402],{"class":264},[220,53841,347],{"class":346},[220,53843,359],{"class":264},[212,53845,53847],{"className":409,"code":53846,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,53848,53849,53857,53863,53871,53884,53888],{"__ignoreMap":178},[220,53850,53851,53853,53855],{"class":222,"line":223},[220,53852,343],{"class":264},[220,53854,347],{"class":420},[220,53856,359],{"class":264},[220,53858,53859,53861],{"class":222,"line":179},[220,53860,364],{"class":264},[220,53862,53814],{"class":420},[220,53864,53865,53867,53869],{"class":222,"line":389},[220,53866,9635],{"class":226},[220,53868,353],{"class":260},[220,53870,9591],{"class":230},[220,53872,53873,53875,53877,53879,53882],{"class":222,"line":399},[220,53874,9645],{"class":226},[220,53876,353],{"class":260},[220,53878,743],{"class":264},[220,53880,53881],{"class":420},"0.32",[220,53883,749],{"class":264},[220,53885,53886],{"class":222,"line":644},[220,53887,1234],{"class":264},[220,53889,53890,53892,53894],{"class":222,"line":650},[220,53891,402],{"class":264},[220,53893,347],{"class":420},[220,53895,359],{"class":264},[212,53897,53898],{"className":2844,"code":53846,"language":2846,"meta":178,"style":178},[99,53899,53900,53908,53914,53922,53932,53936],{"__ignoreMap":178},[220,53901,53902,53904,53906],{"class":222,"line":223},[220,53903,343],{"class":264},[220,53905,347],{"class":420},[220,53907,359],{"class":264},[220,53909,53910,53912],{"class":222,"line":179},[220,53911,364],{"class":264},[220,53913,53814],{"class":420},[220,53915,53916,53918,53920],{"class":222,"line":389},[220,53917,9635],{"class":226},[220,53919,353],{"class":264},[220,53921,9591],{"class":230},[220,53923,53924,53926,53928,53930],{"class":222,"line":399},[220,53925,9645],{"class":226},[220,53927,29871],{"class":264},[220,53929,53881],{"class":420},[220,53931,749],{"class":264},[220,53933,53934],{"class":222,"line":644},[220,53935,1234],{"class":264},[220,53937,53938,53940,53942],{"class":222,"line":650},[220,53939,402],{"class":264},[220,53941,347],{"class":420},[220,53943,359],{"class":264},[212,53945,53946],{"className":468,"code":53846,"language":469,"meta":178,"style":178},[99,53947,53948,53956,53962,53970,53982,53986],{"__ignoreMap":178},[220,53949,53950,53952,53954],{"class":222,"line":223},[220,53951,343],{"class":264},[220,53953,347],{"class":420},[220,53955,359],{"class":264},[220,53957,53958,53960],{"class":222,"line":179},[220,53959,364],{"class":264},[220,53961,53814],{"class":420},[220,53963,53964,53966,53968],{"class":222,"line":389},[220,53965,9635],{"class":226},[220,53967,353],{"class":260},[220,53969,9591],{"class":230},[220,53971,53972,53974,53976,53978,53980],{"class":222,"line":399},[220,53973,9645],{"class":226},[220,53975,353],{"class":260},[220,53977,743],{"class":264},[220,53979,53881],{"class":420},[220,53981,749],{"class":264},[220,53983,53984],{"class":222,"line":644},[220,53985,1234],{"class":264},[220,53987,53988,53990,53992],{"class":222,"line":650},[220,53989,402],{"class":264},[220,53991,347],{"class":420},[220,53993,359],{"class":264},[212,53995,53997],{"className":251,"code":53996,"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,53998,53999,54009,54013,54027,54031,54048,54052],{"__ignoreMap":178},[220,54000,54001,54003,54005,54007],{"class":222,"line":223},[220,54002,261],{"class":260},[220,54004,11512],{"class":264},[220,54006,268],{"class":260},[220,54008,4007],{"class":230},[220,54010,54011],{"class":222,"line":179},[220,54012,647],{"emptyLinePlaceholder":194},[220,54014,54015,54017,54019,54021,54023,54025],{"class":222,"line":389},[220,54016,1735],{"class":260},[220,54018,1738],{"class":420},[220,54020,1741],{"class":260},[220,54022,1744],{"class":260},[220,54024,1747],{"class":226},[220,54026,1750],{"class":264},[220,54028,54029],{"class":222,"line":399},[220,54030,1765],{"class":264},[220,54032,54033,54035,54038,54040,54042,54044,54046],{"class":222,"line":644},[220,54034,1770],{"class":264},[220,54036,54037],{"class":230},"'Heart'",[220,54039,1776],{"class":264},[220,54041,10169],{"class":230},[220,54043,6566],{"class":264},[220,54045,53881],{"class":420},[220,54047,1782],{"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,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54059},[54060,54061],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":53775,"description":53783},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":54068,"title":54069,"body":54070,"category":36569,"componentType":25877,"description":54267,"extension":191,"meta":54268,"navigation":194,"path":54269,"requiresChild":32530,"seo":54270,"stem":54271,"__hash__":54272},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":54071,"toc":54263},[54072,54075,54083,54085,54087,54090,54092,54261],[11,54073,54069],{"id":54074},"heatmap",[15,54076,54077,54078,4836],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,54079,54082],{"href":54080,"rel":54081},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[31911,54084],{"component":54069},[23,54086,31915],{"id":26533},[31917,54088],{":props":54089},"[{\"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,54091,31923],{"id":31922},[246,54093,54094,54123,54151,54179,54207],{":tabs":1557},[212,54095,54097],{"className":334,"code":54096,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,54098,54099,54107,54115],{"__ignoreMap":178},[220,54100,54101,54103,54105],{"class":222,"line":223},[220,54102,343],{"class":264},[220,54104,347],{"class":346},[220,54106,359],{"class":264},[220,54108,54109,54111,54113],{"class":222,"line":179},[220,54110,364],{"class":264},[220,54112,54069],{"class":346},[220,54114,386],{"class":264},[220,54116,54117,54119,54121],{"class":222,"line":389},[220,54118,402],{"class":264},[220,54120,347],{"class":346},[220,54122,359],{"class":264},[212,54124,54125],{"className":409,"code":54096,"language":411,"meta":178,"style":178},[99,54126,54127,54135,54143],{"__ignoreMap":178},[220,54128,54129,54131,54133],{"class":222,"line":223},[220,54130,343],{"class":264},[220,54132,347],{"class":420},[220,54134,359],{"class":264},[220,54136,54137,54139,54141],{"class":222,"line":179},[220,54138,364],{"class":264},[220,54140,54069],{"class":420},[220,54142,386],{"class":264},[220,54144,54145,54147,54149],{"class":222,"line":389},[220,54146,402],{"class":264},[220,54148,347],{"class":420},[220,54150,359],{"class":264},[212,54152,54153],{"className":2844,"code":54096,"language":2846,"meta":178,"style":178},[99,54154,54155,54163,54171],{"__ignoreMap":178},[220,54156,54157,54159,54161],{"class":222,"line":223},[220,54158,343],{"class":264},[220,54160,347],{"class":420},[220,54162,359],{"class":264},[220,54164,54165,54167,54169],{"class":222,"line":179},[220,54166,364],{"class":264},[220,54168,54069],{"class":420},[220,54170,386],{"class":264},[220,54172,54173,54175,54177],{"class":222,"line":389},[220,54174,402],{"class":264},[220,54176,347],{"class":420},[220,54178,359],{"class":264},[212,54180,54181],{"className":468,"code":54096,"language":469,"meta":178,"style":178},[99,54182,54183,54191,54199],{"__ignoreMap":178},[220,54184,54185,54187,54189],{"class":222,"line":223},[220,54186,343],{"class":264},[220,54188,347],{"class":420},[220,54190,359],{"class":264},[220,54192,54193,54195,54197],{"class":222,"line":179},[220,54194,364],{"class":264},[220,54196,54069],{"class":420},[220,54198,386],{"class":264},[220,54200,54201,54203,54205],{"class":222,"line":389},[220,54202,402],{"class":264},[220,54204,347],{"class":420},[220,54206,359],{"class":264},[212,54208,54210],{"className":251,"code":54209,"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,54211,54212,54222,54226,54240,54244,54253,54257],{"__ignoreMap":178},[220,54213,54214,54216,54218,54220],{"class":222,"line":223},[220,54215,261],{"class":260},[220,54217,11512],{"class":264},[220,54219,268],{"class":260},[220,54221,4007],{"class":230},[220,54223,54224],{"class":222,"line":179},[220,54225,647],{"emptyLinePlaceholder":194},[220,54227,54228,54230,54232,54234,54236,54238],{"class":222,"line":389},[220,54229,1735],{"class":260},[220,54231,1738],{"class":420},[220,54233,1741],{"class":260},[220,54235,1744],{"class":260},[220,54237,1747],{"class":226},[220,54239,1750],{"class":264},[220,54241,54242],{"class":222,"line":399},[220,54243,1765],{"class":264},[220,54245,54246,54248,54251],{"class":222,"line":644},[220,54247,1770],{"class":264},[220,54249,54250],{"class":230},"'Heatmap'",[220,54252,2465],{"class":264},[220,54254,54255],{"class":222,"line":650},[220,54256,1787],{"class":264},[220,54258,54259],{"class":222,"line":656},[220,54260,1792],{"class":264},[1504,54262,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54264},[54265,54266],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Fheatmap",{"title":54069,"description":54267},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":54274,"title":54275,"body":54276,"category":33063,"componentType":25877,"description":54283,"extension":191,"meta":54468,"navigation":194,"path":54469,"requiresChild":32530,"seo":54470,"stem":54471,"__hash__":54472},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":54277,"toc":54464},[54278,54281,54284,54286,54288,54291,54293,54462],[11,54279,54275],{"id":54280},"hexgrid",[15,54282,54283],{},"Honeycomb hexagonal grid pattern",[31911,54285],{"component":54275},[23,54287,31915],{"id":26533},[31917,54289],{":props":54290},"[{\"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,54292,31923],{"id":31922},[246,54294,54295,54324,54352,54380,54408],{":tabs":1557},[212,54296,54298],{"className":334,"code":54297,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,54299,54300,54308,54316],{"__ignoreMap":178},[220,54301,54302,54304,54306],{"class":222,"line":223},[220,54303,343],{"class":264},[220,54305,347],{"class":346},[220,54307,359],{"class":264},[220,54309,54310,54312,54314],{"class":222,"line":179},[220,54311,364],{"class":264},[220,54313,54275],{"class":346},[220,54315,386],{"class":264},[220,54317,54318,54320,54322],{"class":222,"line":389},[220,54319,402],{"class":264},[220,54321,347],{"class":346},[220,54323,359],{"class":264},[212,54325,54326],{"className":409,"code":54297,"language":411,"meta":178,"style":178},[99,54327,54328,54336,54344],{"__ignoreMap":178},[220,54329,54330,54332,54334],{"class":222,"line":223},[220,54331,343],{"class":264},[220,54333,347],{"class":420},[220,54335,359],{"class":264},[220,54337,54338,54340,54342],{"class":222,"line":179},[220,54339,364],{"class":264},[220,54341,54275],{"class":420},[220,54343,386],{"class":264},[220,54345,54346,54348,54350],{"class":222,"line":389},[220,54347,402],{"class":264},[220,54349,347],{"class":420},[220,54351,359],{"class":264},[212,54353,54354],{"className":2844,"code":54297,"language":2846,"meta":178,"style":178},[99,54355,54356,54364,54372],{"__ignoreMap":178},[220,54357,54358,54360,54362],{"class":222,"line":223},[220,54359,343],{"class":264},[220,54361,347],{"class":420},[220,54363,359],{"class":264},[220,54365,54366,54368,54370],{"class":222,"line":179},[220,54367,364],{"class":264},[220,54369,54275],{"class":420},[220,54371,386],{"class":264},[220,54373,54374,54376,54378],{"class":222,"line":389},[220,54375,402],{"class":264},[220,54377,347],{"class":420},[220,54379,359],{"class":264},[212,54381,54382],{"className":468,"code":54297,"language":469,"meta":178,"style":178},[99,54383,54384,54392,54400],{"__ignoreMap":178},[220,54385,54386,54388,54390],{"class":222,"line":223},[220,54387,343],{"class":264},[220,54389,347],{"class":420},[220,54391,359],{"class":264},[220,54393,54394,54396,54398],{"class":222,"line":179},[220,54395,364],{"class":264},[220,54397,54275],{"class":420},[220,54399,386],{"class":264},[220,54401,54402,54404,54406],{"class":222,"line":389},[220,54403,402],{"class":264},[220,54405,347],{"class":420},[220,54407,359],{"class":264},[212,54409,54411],{"className":251,"code":54410,"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,54412,54413,54423,54427,54441,54445,54454,54458],{"__ignoreMap":178},[220,54414,54415,54417,54419,54421],{"class":222,"line":223},[220,54416,261],{"class":260},[220,54418,11512],{"class":264},[220,54420,268],{"class":260},[220,54422,4007],{"class":230},[220,54424,54425],{"class":222,"line":179},[220,54426,647],{"emptyLinePlaceholder":194},[220,54428,54429,54431,54433,54435,54437,54439],{"class":222,"line":389},[220,54430,1735],{"class":260},[220,54432,1738],{"class":420},[220,54434,1741],{"class":260},[220,54436,1744],{"class":260},[220,54438,1747],{"class":226},[220,54440,1750],{"class":264},[220,54442,54443],{"class":222,"line":399},[220,54444,1765],{"class":264},[220,54446,54447,54449,54452],{"class":222,"line":644},[220,54448,1770],{"class":264},[220,54450,54451],{"class":230},"'HexGrid'",[220,54453,2465],{"class":264},[220,54455,54456],{"class":222,"line":650},[220,54457,1787],{"class":264},[220,54459,54460],{"class":222,"line":656},[220,54461,1792],{"class":264},[1504,54463,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54465},[54466,54467],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":54275,"description":54283},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":54474,"title":54475,"body":54476,"category":36569,"componentType":25877,"description":54483,"extension":191,"meta":54715,"navigation":194,"path":54716,"requiresChild":32530,"seo":54717,"stem":54718,"__hash__":54719},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":54477,"toc":54711},[54478,54481,54484,54486,54488,54491,54493,54709],[11,54479,54475],{"id":54480},"hologram",[15,54482,54483],{},"Volumetric sci-fi hologram — a translucent emissive projection of the shape with fresnel-lit edges, depth scan-lines that wrap 3D forms, CRT scanlines, flicker and beam wobble",[31911,54485],{"component":54475},[23,54487,31915],{"id":26533},[31917,54489],{":props":54490},"[{\"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,54492,31923],{"id":31922},[246,54494,54495,54536,54574,54612,54650],{":tabs":1557},[212,54496,54498],{"className":334,"code":54497,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,54499,54500,54508,54515,54524,54528],{"__ignoreMap":178},[220,54501,54502,54504,54506],{"class":222,"line":223},[220,54503,343],{"class":264},[220,54505,347],{"class":346},[220,54507,359],{"class":264},[220,54509,54510,54512],{"class":222,"line":179},[220,54511,364],{"class":264},[220,54513,54514],{"class":346},"Hologram\n",[220,54516,54517,54519,54521],{"class":222,"line":389},[220,54518,9635],{"class":226},[220,54520,353],{"class":264},[220,54522,54523],{"class":230},"\"#5ec8ff\"\n",[220,54525,54526],{"class":222,"line":399},[220,54527,1234],{"class":264},[220,54529,54530,54532,54534],{"class":222,"line":644},[220,54531,402],{"class":264},[220,54533,347],{"class":346},[220,54535,359],{"class":264},[212,54537,54538],{"className":409,"code":54497,"language":411,"meta":178,"style":178},[99,54539,54540,54548,54554,54562,54566],{"__ignoreMap":178},[220,54541,54542,54544,54546],{"class":222,"line":223},[220,54543,343],{"class":264},[220,54545,347],{"class":420},[220,54547,359],{"class":264},[220,54549,54550,54552],{"class":222,"line":179},[220,54551,364],{"class":264},[220,54553,54514],{"class":420},[220,54555,54556,54558,54560],{"class":222,"line":389},[220,54557,9635],{"class":226},[220,54559,353],{"class":260},[220,54561,54523],{"class":230},[220,54563,54564],{"class":222,"line":399},[220,54565,1234],{"class":264},[220,54567,54568,54570,54572],{"class":222,"line":644},[220,54569,402],{"class":264},[220,54571,347],{"class":420},[220,54573,359],{"class":264},[212,54575,54576],{"className":2844,"code":54497,"language":2846,"meta":178,"style":178},[99,54577,54578,54586,54592,54600,54604],{"__ignoreMap":178},[220,54579,54580,54582,54584],{"class":222,"line":223},[220,54581,343],{"class":264},[220,54583,347],{"class":420},[220,54585,359],{"class":264},[220,54587,54588,54590],{"class":222,"line":179},[220,54589,364],{"class":264},[220,54591,54514],{"class":420},[220,54593,54594,54596,54598],{"class":222,"line":389},[220,54595,9635],{"class":226},[220,54597,353],{"class":264},[220,54599,54523],{"class":230},[220,54601,54602],{"class":222,"line":399},[220,54603,1234],{"class":264},[220,54605,54606,54608,54610],{"class":222,"line":644},[220,54607,402],{"class":264},[220,54609,347],{"class":420},[220,54611,359],{"class":264},[212,54613,54614],{"className":468,"code":54497,"language":469,"meta":178,"style":178},[99,54615,54616,54624,54630,54638,54642],{"__ignoreMap":178},[220,54617,54618,54620,54622],{"class":222,"line":223},[220,54619,343],{"class":264},[220,54621,347],{"class":420},[220,54623,359],{"class":264},[220,54625,54626,54628],{"class":222,"line":179},[220,54627,364],{"class":264},[220,54629,54514],{"class":420},[220,54631,54632,54634,54636],{"class":222,"line":389},[220,54633,9635],{"class":226},[220,54635,353],{"class":260},[220,54637,54523],{"class":230},[220,54639,54640],{"class":222,"line":399},[220,54641,1234],{"class":264},[220,54643,54644,54646,54648],{"class":222,"line":644},[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: 'Hologram', props: { color: '#5ec8ff' } }\n ]\n})\n",[99,54654,54655,54665,54669,54683,54687,54701,54705],{"__ignoreMap":178},[220,54656,54657,54659,54661,54663],{"class":222,"line":223},[220,54658,261],{"class":260},[220,54660,11512],{"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,54696,54699],{"class":222,"line":644},[220,54690,1770],{"class":264},[220,54692,54693],{"class":230},"'Hologram'",[220,54695,1776],{"class":264},[220,54697,54698],{"class":230},"'#5ec8ff'",[220,54700,1782],{"class":264},[220,54702,54703],{"class":222,"line":650},[220,54704,1787],{"class":264},[220,54706,54707],{"class":222,"line":656},[220,54708,1792],{"class":264},[1504,54710,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54712},[54713,54714],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":54475,"description":54483},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":54721,"title":54722,"body":54723,"category":36569,"componentType":25877,"description":54730,"extension":191,"meta":54915,"navigation":194,"path":54916,"requiresChild":32530,"seo":54917,"stem":54918,"__hash__":54919},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":54724,"toc":54911},[54725,54728,54731,54733,54735,54738,54740,54909],[11,54726,54722],{"id":54727},"holographic",[15,54729,54730],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[31911,54732],{"component":54722},[23,54734,31915],{"id":26533},[31917,54736],{":props":54737},"[{\"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,54739,31923],{"id":31922},[246,54741,54742,54771,54799,54827,54855],{":tabs":1557},[212,54743,54745],{"className":334,"code":54744,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,54746,54747,54755,54763],{"__ignoreMap":178},[220,54748,54749,54751,54753],{"class":222,"line":223},[220,54750,343],{"class":264},[220,54752,347],{"class":346},[220,54754,359],{"class":264},[220,54756,54757,54759,54761],{"class":222,"line":179},[220,54758,364],{"class":264},[220,54760,54722],{"class":346},[220,54762,386],{"class":264},[220,54764,54765,54767,54769],{"class":222,"line":389},[220,54766,402],{"class":264},[220,54768,347],{"class":346},[220,54770,359],{"class":264},[212,54772,54773],{"className":409,"code":54744,"language":411,"meta":178,"style":178},[99,54774,54775,54783,54791],{"__ignoreMap":178},[220,54776,54777,54779,54781],{"class":222,"line":223},[220,54778,343],{"class":264},[220,54780,347],{"class":420},[220,54782,359],{"class":264},[220,54784,54785,54787,54789],{"class":222,"line":179},[220,54786,364],{"class":264},[220,54788,54722],{"class":420},[220,54790,386],{"class":264},[220,54792,54793,54795,54797],{"class":222,"line":389},[220,54794,402],{"class":264},[220,54796,347],{"class":420},[220,54798,359],{"class":264},[212,54800,54801],{"className":2844,"code":54744,"language":2846,"meta":178,"style":178},[99,54802,54803,54811,54819],{"__ignoreMap":178},[220,54804,54805,54807,54809],{"class":222,"line":223},[220,54806,343],{"class":264},[220,54808,347],{"class":420},[220,54810,359],{"class":264},[220,54812,54813,54815,54817],{"class":222,"line":179},[220,54814,364],{"class":264},[220,54816,54722],{"class":420},[220,54818,386],{"class":264},[220,54820,54821,54823,54825],{"class":222,"line":389},[220,54822,402],{"class":264},[220,54824,347],{"class":420},[220,54826,359],{"class":264},[212,54828,54829],{"className":468,"code":54744,"language":469,"meta":178,"style":178},[99,54830,54831,54839,54847],{"__ignoreMap":178},[220,54832,54833,54835,54837],{"class":222,"line":223},[220,54834,343],{"class":264},[220,54836,347],{"class":420},[220,54838,359],{"class":264},[220,54840,54841,54843,54845],{"class":222,"line":179},[220,54842,364],{"class":264},[220,54844,54722],{"class":420},[220,54846,386],{"class":264},[220,54848,54849,54851,54853],{"class":222,"line":389},[220,54850,402],{"class":264},[220,54852,347],{"class":420},[220,54854,359],{"class":264},[212,54856,54858],{"className":251,"code":54857,"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,54859,54860,54870,54874,54888,54892,54901,54905],{"__ignoreMap":178},[220,54861,54862,54864,54866,54868],{"class":222,"line":223},[220,54863,261],{"class":260},[220,54865,11512],{"class":264},[220,54867,268],{"class":260},[220,54869,4007],{"class":230},[220,54871,54872],{"class":222,"line":179},[220,54873,647],{"emptyLinePlaceholder":194},[220,54875,54876,54878,54880,54882,54884,54886],{"class":222,"line":389},[220,54877,1735],{"class":260},[220,54879,1738],{"class":420},[220,54881,1741],{"class":260},[220,54883,1744],{"class":260},[220,54885,1747],{"class":226},[220,54887,1750],{"class":264},[220,54889,54890],{"class":222,"line":399},[220,54891,1765],{"class":264},[220,54893,54894,54896,54899],{"class":222,"line":644},[220,54895,1770],{"class":264},[220,54897,54898],{"class":230},"'Holographic'",[220,54900,2465],{"class":264},[220,54902,54903],{"class":222,"line":650},[220,54904,1787],{"class":264},[220,54906,54907],{"class":222,"line":656},[220,54908,1792],{"class":264},[1504,54910,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54912},[54913,54914],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":54722,"description":54730},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":54921,"title":54922,"body":54923,"category":36368,"componentType":25883,"description":54930,"extension":191,"meta":55191,"navigation":194,"path":55192,"requiresChild":194,"seo":55193,"stem":55194,"__hash__":55195},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":54924,"toc":55187},[54925,54928,54931,54933,54935,54938,54940,55185],[11,54926,54922],{"id":54927},"hueshift",[15,54929,54930],{},"Rotate hue around the color wheel",[31911,54932],{"component":54922},[23,54934,31915],{"id":26533},[31917,54936],{":props":54937},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,54939,31923],{"id":31922},[246,54941,54942,54987,55031,55075,55119],{":tabs":1557},[212,54943,54945],{"className":334,"code":54944,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,54946,54947,54955,54963,54971,54979],{"__ignoreMap":178},[220,54948,54949,54951,54953],{"class":222,"line":223},[220,54950,343],{"class":264},[220,54952,347],{"class":346},[220,54954,359],{"class":264},[220,54956,54957,54959,54961],{"class":222,"line":179},[220,54958,364],{"class":264},[220,54960,54922],{"class":346},[220,54962,359],{"class":264},[220,54964,54965,54967,54969],{"class":222,"line":389},[220,54966,2550],{"class":264},[220,54968,2553],{"class":346},[220,54970,386],{"class":264},[220,54972,54973,54975,54977],{"class":222,"line":399},[220,54974,2567],{"class":264},[220,54976,54922],{"class":346},[220,54978,359],{"class":264},[220,54980,54981,54983,54985],{"class":222,"line":644},[220,54982,402],{"class":264},[220,54984,347],{"class":346},[220,54986,359],{"class":264},[212,54988,54989],{"className":409,"code":54944,"language":411,"meta":178,"style":178},[99,54990,54991,54999,55007,55015,55023],{"__ignoreMap":178},[220,54992,54993,54995,54997],{"class":222,"line":223},[220,54994,343],{"class":264},[220,54996,347],{"class":420},[220,54998,359],{"class":264},[220,55000,55001,55003,55005],{"class":222,"line":179},[220,55002,364],{"class":264},[220,55004,54922],{"class":420},[220,55006,359],{"class":264},[220,55008,55009,55011,55013],{"class":222,"line":389},[220,55010,2550],{"class":264},[220,55012,2553],{"class":420},[220,55014,386],{"class":264},[220,55016,55017,55019,55021],{"class":222,"line":399},[220,55018,2567],{"class":264},[220,55020,54922],{"class":420},[220,55022,359],{"class":264},[220,55024,55025,55027,55029],{"class":222,"line":644},[220,55026,402],{"class":264},[220,55028,347],{"class":420},[220,55030,359],{"class":264},[212,55032,55033],{"className":2844,"code":54944,"language":2846,"meta":178,"style":178},[99,55034,55035,55043,55051,55059,55067],{"__ignoreMap":178},[220,55036,55037,55039,55041],{"class":222,"line":223},[220,55038,343],{"class":264},[220,55040,347],{"class":420},[220,55042,359],{"class":264},[220,55044,55045,55047,55049],{"class":222,"line":179},[220,55046,364],{"class":264},[220,55048,54922],{"class":420},[220,55050,359],{"class":264},[220,55052,55053,55055,55057],{"class":222,"line":389},[220,55054,2550],{"class":264},[220,55056,2553],{"class":420},[220,55058,386],{"class":264},[220,55060,55061,55063,55065],{"class":222,"line":399},[220,55062,2567],{"class":264},[220,55064,54922],{"class":420},[220,55066,359],{"class":264},[220,55068,55069,55071,55073],{"class":222,"line":644},[220,55070,402],{"class":264},[220,55072,347],{"class":420},[220,55074,359],{"class":264},[212,55076,55077],{"className":468,"code":54944,"language":469,"meta":178,"style":178},[99,55078,55079,55087,55095,55103,55111],{"__ignoreMap":178},[220,55080,55081,55083,55085],{"class":222,"line":223},[220,55082,343],{"class":264},[220,55084,347],{"class":420},[220,55086,359],{"class":264},[220,55088,55089,55091,55093],{"class":222,"line":179},[220,55090,364],{"class":264},[220,55092,54922],{"class":420},[220,55094,359],{"class":264},[220,55096,55097,55099,55101],{"class":222,"line":389},[220,55098,2550],{"class":264},[220,55100,2553],{"class":420},[220,55102,386],{"class":264},[220,55104,55105,55107,55109],{"class":222,"line":399},[220,55106,2567],{"class":264},[220,55108,54922],{"class":420},[220,55110,359],{"class":264},[220,55112,55113,55115,55117],{"class":222,"line":644},[220,55114,402],{"class":264},[220,55116,347],{"class":420},[220,55118,359],{"class":264},[212,55120,55122],{"className":251,"code":55121,"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,55123,55124,55134,55138,55152,55156,55165,55173,55177,55181],{"__ignoreMap":178},[220,55125,55126,55128,55130,55132],{"class":222,"line":223},[220,55127,261],{"class":260},[220,55129,11512],{"class":264},[220,55131,268],{"class":260},[220,55133,4007],{"class":230},[220,55135,55136],{"class":222,"line":179},[220,55137,647],{"emptyLinePlaceholder":194},[220,55139,55140,55142,55144,55146,55148,55150],{"class":222,"line":389},[220,55141,1735],{"class":260},[220,55143,1738],{"class":420},[220,55145,1741],{"class":260},[220,55147,1744],{"class":260},[220,55149,1747],{"class":226},[220,55151,1750],{"class":264},[220,55153,55154],{"class":222,"line":399},[220,55155,1765],{"class":264},[220,55157,55158,55160,55163],{"class":222,"line":644},[220,55159,1770],{"class":264},[220,55161,55162],{"class":230},"'HueShift'",[220,55164,7009],{"class":264},[220,55166,55167,55169,55171],{"class":222,"line":650},[220,55168,7014],{"class":264},[220,55170,3206],{"class":230},[220,55172,2465],{"class":264},[220,55174,55175],{"class":222,"line":656},[220,55176,7031],{"class":264},[220,55178,55179],{"class":222,"line":673},[220,55180,1787],{"class":264},[220,55182,55183],{"class":222,"line":682},[220,55184,1792],{"class":264},[1504,55186,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":55188},[55189,55190],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":54922,"description":54930},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":55197,"title":55198,"body":55199,"category":33063,"componentType":25877,"description":55206,"extension":191,"meta":55391,"navigation":194,"path":55392,"requiresChild":32530,"seo":55393,"stem":55394,"__hash__":55395},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":55200,"toc":55387},[55201,55204,55207,55209,55211,55214,55216,55385],[11,55202,55198],{"id":55203},"imagetexture",[15,55205,55206],{},"Display an image with customizable object-fit modes",[31911,55208],{"component":55198},[23,55210,31915],{"id":26533},[31917,55212],{":props":55213},"[{\"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,55215,31923],{"id":31922},[246,55217,55218,55247,55275,55303,55331],{":tabs":1557},[212,55219,55221],{"className":334,"code":55220,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,55222,55223,55231,55239],{"__ignoreMap":178},[220,55224,55225,55227,55229],{"class":222,"line":223},[220,55226,343],{"class":264},[220,55228,347],{"class":346},[220,55230,359],{"class":264},[220,55232,55233,55235,55237],{"class":222,"line":179},[220,55234,364],{"class":264},[220,55236,55198],{"class":346},[220,55238,386],{"class":264},[220,55240,55241,55243,55245],{"class":222,"line":389},[220,55242,402],{"class":264},[220,55244,347],{"class":346},[220,55246,359],{"class":264},[212,55248,55249],{"className":409,"code":55220,"language":411,"meta":178,"style":178},[99,55250,55251,55259,55267],{"__ignoreMap":178},[220,55252,55253,55255,55257],{"class":222,"line":223},[220,55254,343],{"class":264},[220,55256,347],{"class":420},[220,55258,359],{"class":264},[220,55260,55261,55263,55265],{"class":222,"line":179},[220,55262,364],{"class":264},[220,55264,55198],{"class":420},[220,55266,386],{"class":264},[220,55268,55269,55271,55273],{"class":222,"line":389},[220,55270,402],{"class":264},[220,55272,347],{"class":420},[220,55274,359],{"class":264},[212,55276,55277],{"className":2844,"code":55220,"language":2846,"meta":178,"style":178},[99,55278,55279,55287,55295],{"__ignoreMap":178},[220,55280,55281,55283,55285],{"class":222,"line":223},[220,55282,343],{"class":264},[220,55284,347],{"class":420},[220,55286,359],{"class":264},[220,55288,55289,55291,55293],{"class":222,"line":179},[220,55290,364],{"class":264},[220,55292,55198],{"class":420},[220,55294,386],{"class":264},[220,55296,55297,55299,55301],{"class":222,"line":389},[220,55298,402],{"class":264},[220,55300,347],{"class":420},[220,55302,359],{"class":264},[212,55304,55305],{"className":468,"code":55220,"language":469,"meta":178,"style":178},[99,55306,55307,55315,55323],{"__ignoreMap":178},[220,55308,55309,55311,55313],{"class":222,"line":223},[220,55310,343],{"class":264},[220,55312,347],{"class":420},[220,55314,359],{"class":264},[220,55316,55317,55319,55321],{"class":222,"line":179},[220,55318,364],{"class":264},[220,55320,55198],{"class":420},[220,55322,386],{"class":264},[220,55324,55325,55327,55329],{"class":222,"line":389},[220,55326,402],{"class":264},[220,55328,347],{"class":420},[220,55330,359],{"class":264},[212,55332,55334],{"className":251,"code":55333,"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,55335,55336,55346,55350,55364,55368,55377,55381],{"__ignoreMap":178},[220,55337,55338,55340,55342,55344],{"class":222,"line":223},[220,55339,261],{"class":260},[220,55341,11512],{"class":264},[220,55343,268],{"class":260},[220,55345,4007],{"class":230},[220,55347,55348],{"class":222,"line":179},[220,55349,647],{"emptyLinePlaceholder":194},[220,55351,55352,55354,55356,55358,55360,55362],{"class":222,"line":389},[220,55353,1735],{"class":260},[220,55355,1738],{"class":420},[220,55357,1741],{"class":260},[220,55359,1744],{"class":260},[220,55361,1747],{"class":226},[220,55363,1750],{"class":264},[220,55365,55366],{"class":222,"line":399},[220,55367,1765],{"class":264},[220,55369,55370,55372,55375],{"class":222,"line":644},[220,55371,1770],{"class":264},[220,55373,55374],{"class":230},"'ImageTexture'",[220,55376,2465],{"class":264},[220,55378,55379],{"class":222,"line":650},[220,55380,1787],{"class":264},[220,55382,55383],{"class":222,"line":656},[220,55384,1792],{"class":264},[1504,55386,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":55388},[55389,55390],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fimagetexture",{"title":55198,"description":55206},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":55397,"title":55398,"body":55399,"category":35559,"componentType":25877,"description":55406,"extension":191,"meta":55685,"navigation":194,"path":55686,"requiresChild":32530,"seo":55687,"stem":55688,"__hash__":55689},"components\u002Fdocs\u002Fcomponents\u002FInkFlow.md","InkFlow",{"type":8,"value":55400,"toc":55681},[55401,55404,55407,55409,55411,55414,55416,55679],[11,55402,55398],{"id":55403},"inkflow",[15,55405,55406],{},"Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go",[31911,55408],{"component":55398},[23,55410,31915],{"id":26533},[31917,55412],{":props":55413},"[{\"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,55415,31923],{"id":31922},[246,55417,55418,55467,55518,55566,55616],{":tabs":1557},[212,55419,55421],{"className":334,"code":55420,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,55422,55423,55431,55438,55447,55455,55459],{"__ignoreMap":178},[220,55424,55425,55427,55429],{"class":222,"line":223},[220,55426,343],{"class":264},[220,55428,347],{"class":346},[220,55430,359],{"class":264},[220,55432,55433,55435],{"class":222,"line":179},[220,55434,364],{"class":264},[220,55436,55437],{"class":346},"InkFlow\n",[220,55439,55440,55442,55444],{"class":222,"line":389},[220,55441,9635],{"class":226},[220,55443,353],{"class":264},[220,55445,55446],{"class":230},"\"#ff2d7e\"\n",[220,55448,55449,55451,55453],{"class":222,"line":399},[220,55450,17405],{"class":226},[220,55452,353],{"class":264},[220,55454,41298],{"class":230},[220,55456,55457],{"class":222,"line":644},[220,55458,1234],{"class":264},[220,55460,55461,55463,55465],{"class":222,"line":650},[220,55462,402],{"class":264},[220,55464,347],{"class":346},[220,55466,359],{"class":264},[212,55468,55470],{"className":409,"code":55469,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,55471,55472,55480,55486,55494,55506,55510],{"__ignoreMap":178},[220,55473,55474,55476,55478],{"class":222,"line":223},[220,55475,343],{"class":264},[220,55477,347],{"class":420},[220,55479,359],{"class":264},[220,55481,55482,55484],{"class":222,"line":179},[220,55483,364],{"class":264},[220,55485,55437],{"class":420},[220,55487,55488,55490,55492],{"class":222,"line":389},[220,55489,9635],{"class":226},[220,55491,353],{"class":260},[220,55493,55446],{"class":230},[220,55495,55496,55498,55500,55502,55504],{"class":222,"line":399},[220,55497,9645],{"class":226},[220,55499,353],{"class":260},[220,55501,743],{"class":264},[220,55503,22004],{"class":420},[220,55505,749],{"class":264},[220,55507,55508],{"class":222,"line":644},[220,55509,1234],{"class":264},[220,55511,55512,55514,55516],{"class":222,"line":650},[220,55513,402],{"class":264},[220,55515,347],{"class":420},[220,55517,359],{"class":264},[212,55519,55520],{"className":2844,"code":55469,"language":2846,"meta":178,"style":178},[99,55521,55522,55530,55536,55544,55554,55558],{"__ignoreMap":178},[220,55523,55524,55526,55528],{"class":222,"line":223},[220,55525,343],{"class":264},[220,55527,347],{"class":420},[220,55529,359],{"class":264},[220,55531,55532,55534],{"class":222,"line":179},[220,55533,364],{"class":264},[220,55535,55437],{"class":420},[220,55537,55538,55540,55542],{"class":222,"line":389},[220,55539,9635],{"class":226},[220,55541,353],{"class":264},[220,55543,55446],{"class":230},[220,55545,55546,55548,55550,55552],{"class":222,"line":399},[220,55547,9645],{"class":226},[220,55549,29871],{"class":264},[220,55551,22004],{"class":420},[220,55553,749],{"class":264},[220,55555,55556],{"class":222,"line":644},[220,55557,1234],{"class":264},[220,55559,55560,55562,55564],{"class":222,"line":650},[220,55561,402],{"class":264},[220,55563,347],{"class":420},[220,55565,359],{"class":264},[212,55567,55568],{"className":468,"code":55469,"language":469,"meta":178,"style":178},[99,55569,55570,55578,55584,55592,55604,55608],{"__ignoreMap":178},[220,55571,55572,55574,55576],{"class":222,"line":223},[220,55573,343],{"class":264},[220,55575,347],{"class":420},[220,55577,359],{"class":264},[220,55579,55580,55582],{"class":222,"line":179},[220,55581,364],{"class":264},[220,55583,55437],{"class":420},[220,55585,55586,55588,55590],{"class":222,"line":389},[220,55587,9635],{"class":226},[220,55589,353],{"class":260},[220,55591,55446],{"class":230},[220,55593,55594,55596,55598,55600,55602],{"class":222,"line":399},[220,55595,9645],{"class":226},[220,55597,353],{"class":260},[220,55599,743],{"class":264},[220,55601,22004],{"class":420},[220,55603,749],{"class":264},[220,55605,55606],{"class":222,"line":644},[220,55607,1234],{"class":264},[220,55609,55610,55612,55614],{"class":222,"line":650},[220,55611,402],{"class":264},[220,55613,347],{"class":420},[220,55615,359],{"class":264},[212,55617,55619],{"className":251,"code":55618,"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,55620,55621,55631,55635,55649,55653,55671,55675],{"__ignoreMap":178},[220,55622,55623,55625,55627,55629],{"class":222,"line":223},[220,55624,261],{"class":260},[220,55626,11512],{"class":264},[220,55628,268],{"class":260},[220,55630,4007],{"class":230},[220,55632,55633],{"class":222,"line":179},[220,55634,647],{"emptyLinePlaceholder":194},[220,55636,55637,55639,55641,55643,55645,55647],{"class":222,"line":389},[220,55638,1735],{"class":260},[220,55640,1738],{"class":420},[220,55642,1741],{"class":260},[220,55644,1744],{"class":260},[220,55646,1747],{"class":226},[220,55648,1750],{"class":264},[220,55650,55651],{"class":222,"line":399},[220,55652,1765],{"class":264},[220,55654,55655,55657,55660,55662,55665,55667,55669],{"class":222,"line":644},[220,55656,1770],{"class":264},[220,55658,55659],{"class":230},"'InkFlow'",[220,55661,1776],{"class":264},[220,55663,55664],{"class":230},"'#ff2d7e'",[220,55666,6566],{"class":264},[220,55668,22004],{"class":420},[220,55670,1782],{"class":264},[220,55672,55673],{"class":222,"line":650},[220,55674,1787],{"class":264},[220,55676,55677],{"class":222,"line":656},[220,55678,1792],{"class":264},[1504,55680,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":55682},[55683,55684],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Finkflow",{"title":55398,"description":55406},"docs\u002Fcomponents\u002FInkFlow","uPnBHNk-ARjAflUEs5hW2qB4NhGh9P1nHfkYFbPq04k",{"id":55691,"title":55692,"body":55693,"category":36368,"componentType":25883,"description":55700,"extension":191,"meta":55955,"navigation":194,"path":55956,"requiresChild":194,"seo":55957,"stem":55958,"__hash__":55959},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":55694,"toc":55952},[55695,55698,55701,55703,55705,55950],[11,55696,55692],{"id":55697},"invert",[15,55699,55700],{},"Invert RGB colors while preserving alpha",[31911,55702],{"component":55692},[23,55704,31923],{"id":31922},[246,55706,55707,55752,55796,55840,55884],{":tabs":1557},[212,55708,55710],{"className":334,"code":55709,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,55711,55712,55720,55728,55736,55744],{"__ignoreMap":178},[220,55713,55714,55716,55718],{"class":222,"line":223},[220,55715,343],{"class":264},[220,55717,347],{"class":346},[220,55719,359],{"class":264},[220,55721,55722,55724,55726],{"class":222,"line":179},[220,55723,364],{"class":264},[220,55725,55692],{"class":346},[220,55727,359],{"class":264},[220,55729,55730,55732,55734],{"class":222,"line":389},[220,55731,2550],{"class":264},[220,55733,2553],{"class":346},[220,55735,386],{"class":264},[220,55737,55738,55740,55742],{"class":222,"line":399},[220,55739,2567],{"class":264},[220,55741,55692],{"class":346},[220,55743,359],{"class":264},[220,55745,55746,55748,55750],{"class":222,"line":644},[220,55747,402],{"class":264},[220,55749,347],{"class":346},[220,55751,359],{"class":264},[212,55753,55754],{"className":409,"code":55709,"language":411,"meta":178,"style":178},[99,55755,55756,55764,55772,55780,55788],{"__ignoreMap":178},[220,55757,55758,55760,55762],{"class":222,"line":223},[220,55759,343],{"class":264},[220,55761,347],{"class":420},[220,55763,359],{"class":264},[220,55765,55766,55768,55770],{"class":222,"line":179},[220,55767,364],{"class":264},[220,55769,55692],{"class":420},[220,55771,359],{"class":264},[220,55773,55774,55776,55778],{"class":222,"line":389},[220,55775,2550],{"class":264},[220,55777,2553],{"class":420},[220,55779,386],{"class":264},[220,55781,55782,55784,55786],{"class":222,"line":399},[220,55783,2567],{"class":264},[220,55785,55692],{"class":420},[220,55787,359],{"class":264},[220,55789,55790,55792,55794],{"class":222,"line":644},[220,55791,402],{"class":264},[220,55793,347],{"class":420},[220,55795,359],{"class":264},[212,55797,55798],{"className":2844,"code":55709,"language":2846,"meta":178,"style":178},[99,55799,55800,55808,55816,55824,55832],{"__ignoreMap":178},[220,55801,55802,55804,55806],{"class":222,"line":223},[220,55803,343],{"class":264},[220,55805,347],{"class":420},[220,55807,359],{"class":264},[220,55809,55810,55812,55814],{"class":222,"line":179},[220,55811,364],{"class":264},[220,55813,55692],{"class":420},[220,55815,359],{"class":264},[220,55817,55818,55820,55822],{"class":222,"line":389},[220,55819,2550],{"class":264},[220,55821,2553],{"class":420},[220,55823,386],{"class":264},[220,55825,55826,55828,55830],{"class":222,"line":399},[220,55827,2567],{"class":264},[220,55829,55692],{"class":420},[220,55831,359],{"class":264},[220,55833,55834,55836,55838],{"class":222,"line":644},[220,55835,402],{"class":264},[220,55837,347],{"class":420},[220,55839,359],{"class":264},[212,55841,55842],{"className":468,"code":55709,"language":469,"meta":178,"style":178},[99,55843,55844,55852,55860,55868,55876],{"__ignoreMap":178},[220,55845,55846,55848,55850],{"class":222,"line":223},[220,55847,343],{"class":264},[220,55849,347],{"class":420},[220,55851,359],{"class":264},[220,55853,55854,55856,55858],{"class":222,"line":179},[220,55855,364],{"class":264},[220,55857,55692],{"class":420},[220,55859,359],{"class":264},[220,55861,55862,55864,55866],{"class":222,"line":389},[220,55863,2550],{"class":264},[220,55865,2553],{"class":420},[220,55867,386],{"class":264},[220,55869,55870,55872,55874],{"class":222,"line":399},[220,55871,2567],{"class":264},[220,55873,55692],{"class":420},[220,55875,359],{"class":264},[220,55877,55878,55880,55882],{"class":222,"line":644},[220,55879,402],{"class":264},[220,55881,347],{"class":420},[220,55883,359],{"class":264},[212,55885,55887],{"className":251,"code":55886,"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,55888,55889,55899,55903,55917,55921,55930,55938,55942,55946],{"__ignoreMap":178},[220,55890,55891,55893,55895,55897],{"class":222,"line":223},[220,55892,261],{"class":260},[220,55894,11512],{"class":264},[220,55896,268],{"class":260},[220,55898,4007],{"class":230},[220,55900,55901],{"class":222,"line":179},[220,55902,647],{"emptyLinePlaceholder":194},[220,55904,55905,55907,55909,55911,55913,55915],{"class":222,"line":389},[220,55906,1735],{"class":260},[220,55908,1738],{"class":420},[220,55910,1741],{"class":260},[220,55912,1744],{"class":260},[220,55914,1747],{"class":226},[220,55916,1750],{"class":264},[220,55918,55919],{"class":222,"line":399},[220,55920,1765],{"class":264},[220,55922,55923,55925,55928],{"class":222,"line":644},[220,55924,1770],{"class":264},[220,55926,55927],{"class":230},"'Invert'",[220,55929,7009],{"class":264},[220,55931,55932,55934,55936],{"class":222,"line":650},[220,55933,7014],{"class":264},[220,55935,3206],{"class":230},[220,55937,2465],{"class":264},[220,55939,55940],{"class":222,"line":656},[220,55941,7031],{"class":264},[220,55943,55944],{"class":222,"line":673},[220,55945,1787],{"class":264},[220,55947,55948],{"class":222,"line":682},[220,55949,1792],{"class":264},[1504,55951,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":55953},[55954],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":55692,"description":55700},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":55961,"title":55962,"body":55963,"category":33673,"componentType":25883,"description":55970,"extension":191,"meta":56231,"navigation":194,"path":56232,"requiresChild":194,"seo":56233,"stem":56234,"__hash__":56235},"components\u002Fdocs\u002Fcomponents\u002FIrisWipe.md","IrisWipe",{"type":8,"value":55964,"toc":56227},[55965,55968,55971,55973,55975,55978,55980,56225],[11,55966,55962],{"id":55967},"iriswipe",[15,55969,55970],{},"Reveal through an expanding circle growing from a center point",[31911,55972],{"component":55962},[23,55974,31915],{"id":26533},[31917,55976],{":props":55977},"[{\"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,55979,31923],{"id":31922},[246,55981,55982,56027,56071,56115,56159],{":tabs":1557},[212,55983,55985],{"className":334,"code":55984,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIrisWipe>\n \u003CCircle \u002F>\n \u003C\u002FIrisWipe>\n\u003C\u002FShader>\n",[99,55986,55987,55995,56003,56011,56019],{"__ignoreMap":178},[220,55988,55989,55991,55993],{"class":222,"line":223},[220,55990,343],{"class":264},[220,55992,347],{"class":346},[220,55994,359],{"class":264},[220,55996,55997,55999,56001],{"class":222,"line":179},[220,55998,364],{"class":264},[220,56000,55962],{"class":346},[220,56002,359],{"class":264},[220,56004,56005,56007,56009],{"class":222,"line":389},[220,56006,2550],{"class":264},[220,56008,2553],{"class":346},[220,56010,386],{"class":264},[220,56012,56013,56015,56017],{"class":222,"line":399},[220,56014,2567],{"class":264},[220,56016,55962],{"class":346},[220,56018,359],{"class":264},[220,56020,56021,56023,56025],{"class":222,"line":644},[220,56022,402],{"class":264},[220,56024,347],{"class":346},[220,56026,359],{"class":264},[212,56028,56029],{"className":409,"code":55984,"language":411,"meta":178,"style":178},[99,56030,56031,56039,56047,56055,56063],{"__ignoreMap":178},[220,56032,56033,56035,56037],{"class":222,"line":223},[220,56034,343],{"class":264},[220,56036,347],{"class":420},[220,56038,359],{"class":264},[220,56040,56041,56043,56045],{"class":222,"line":179},[220,56042,364],{"class":264},[220,56044,55962],{"class":420},[220,56046,359],{"class":264},[220,56048,56049,56051,56053],{"class":222,"line":389},[220,56050,2550],{"class":264},[220,56052,2553],{"class":420},[220,56054,386],{"class":264},[220,56056,56057,56059,56061],{"class":222,"line":399},[220,56058,2567],{"class":264},[220,56060,55962],{"class":420},[220,56062,359],{"class":264},[220,56064,56065,56067,56069],{"class":222,"line":644},[220,56066,402],{"class":264},[220,56068,347],{"class":420},[220,56070,359],{"class":264},[212,56072,56073],{"className":2844,"code":55984,"language":2846,"meta":178,"style":178},[99,56074,56075,56083,56091,56099,56107],{"__ignoreMap":178},[220,56076,56077,56079,56081],{"class":222,"line":223},[220,56078,343],{"class":264},[220,56080,347],{"class":420},[220,56082,359],{"class":264},[220,56084,56085,56087,56089],{"class":222,"line":179},[220,56086,364],{"class":264},[220,56088,55962],{"class":420},[220,56090,359],{"class":264},[220,56092,56093,56095,56097],{"class":222,"line":389},[220,56094,2550],{"class":264},[220,56096,2553],{"class":420},[220,56098,386],{"class":264},[220,56100,56101,56103,56105],{"class":222,"line":399},[220,56102,2567],{"class":264},[220,56104,55962],{"class":420},[220,56106,359],{"class":264},[220,56108,56109,56111,56113],{"class":222,"line":644},[220,56110,402],{"class":264},[220,56112,347],{"class":420},[220,56114,359],{"class":264},[212,56116,56117],{"className":468,"code":55984,"language":469,"meta":178,"style":178},[99,56118,56119,56127,56135,56143,56151],{"__ignoreMap":178},[220,56120,56121,56123,56125],{"class":222,"line":223},[220,56122,343],{"class":264},[220,56124,347],{"class":420},[220,56126,359],{"class":264},[220,56128,56129,56131,56133],{"class":222,"line":179},[220,56130,364],{"class":264},[220,56132,55962],{"class":420},[220,56134,359],{"class":264},[220,56136,56137,56139,56141],{"class":222,"line":389},[220,56138,2550],{"class":264},[220,56140,2553],{"class":420},[220,56142,386],{"class":264},[220,56144,56145,56147,56149],{"class":222,"line":399},[220,56146,2567],{"class":264},[220,56148,55962],{"class":420},[220,56150,359],{"class":264},[220,56152,56153,56155,56157],{"class":222,"line":644},[220,56154,402],{"class":264},[220,56156,347],{"class":420},[220,56158,359],{"class":264},[212,56160,56162],{"className":251,"code":56161,"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,56163,56164,56174,56178,56192,56196,56205,56213,56217,56221],{"__ignoreMap":178},[220,56165,56166,56168,56170,56172],{"class":222,"line":223},[220,56167,261],{"class":260},[220,56169,11512],{"class":264},[220,56171,268],{"class":260},[220,56173,4007],{"class":230},[220,56175,56176],{"class":222,"line":179},[220,56177,647],{"emptyLinePlaceholder":194},[220,56179,56180,56182,56184,56186,56188,56190],{"class":222,"line":389},[220,56181,1735],{"class":260},[220,56183,1738],{"class":420},[220,56185,1741],{"class":260},[220,56187,1744],{"class":260},[220,56189,1747],{"class":226},[220,56191,1750],{"class":264},[220,56193,56194],{"class":222,"line":399},[220,56195,1765],{"class":264},[220,56197,56198,56200,56203],{"class":222,"line":644},[220,56199,1770],{"class":264},[220,56201,56202],{"class":230},"'IrisWipe'",[220,56204,7009],{"class":264},[220,56206,56207,56209,56211],{"class":222,"line":650},[220,56208,7014],{"class":264},[220,56210,3206],{"class":230},[220,56212,2465],{"class":264},[220,56214,56215],{"class":222,"line":656},[220,56216,7031],{"class":264},[220,56218,56219],{"class":222,"line":673},[220,56220,1787],{"class":264},[220,56222,56223],{"class":222,"line":682},[220,56224,1792],{"class":264},[1504,56226,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56228},[56229,56230],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Firiswipe",{"title":55962,"description":55970},"docs\u002Fcomponents\u002FIrisWipe","Q-Y0lKxKc9uQ4PXBs4DXeOvl14Gh9zZU_1lh2dK4pUU",{"id":56237,"title":56238,"body":56239,"category":33063,"componentType":25877,"description":56246,"extension":191,"meta":56431,"navigation":194,"path":56432,"requiresChild":32530,"seo":56433,"stem":56434,"__hash__":56435},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":56240,"toc":56427},[56241,56244,56247,56249,56251,56254,56256,56425],[11,56242,56238],{"id":56243},"isometriccubes",[15,56245,56246],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[31911,56248],{"component":56238},[23,56250,31915],{"id":26533},[31917,56252],{":props":56253},"[{\"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,56255,31923],{"id":31922},[246,56257,56258,56287,56315,56343,56371],{":tabs":1557},[212,56259,56261],{"className":334,"code":56260,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,56262,56263,56271,56279],{"__ignoreMap":178},[220,56264,56265,56267,56269],{"class":222,"line":223},[220,56266,343],{"class":264},[220,56268,347],{"class":346},[220,56270,359],{"class":264},[220,56272,56273,56275,56277],{"class":222,"line":179},[220,56274,364],{"class":264},[220,56276,56238],{"class":346},[220,56278,386],{"class":264},[220,56280,56281,56283,56285],{"class":222,"line":389},[220,56282,402],{"class":264},[220,56284,347],{"class":346},[220,56286,359],{"class":264},[212,56288,56289],{"className":409,"code":56260,"language":411,"meta":178,"style":178},[99,56290,56291,56299,56307],{"__ignoreMap":178},[220,56292,56293,56295,56297],{"class":222,"line":223},[220,56294,343],{"class":264},[220,56296,347],{"class":420},[220,56298,359],{"class":264},[220,56300,56301,56303,56305],{"class":222,"line":179},[220,56302,364],{"class":264},[220,56304,56238],{"class":420},[220,56306,386],{"class":264},[220,56308,56309,56311,56313],{"class":222,"line":389},[220,56310,402],{"class":264},[220,56312,347],{"class":420},[220,56314,359],{"class":264},[212,56316,56317],{"className":2844,"code":56260,"language":2846,"meta":178,"style":178},[99,56318,56319,56327,56335],{"__ignoreMap":178},[220,56320,56321,56323,56325],{"class":222,"line":223},[220,56322,343],{"class":264},[220,56324,347],{"class":420},[220,56326,359],{"class":264},[220,56328,56329,56331,56333],{"class":222,"line":179},[220,56330,364],{"class":264},[220,56332,56238],{"class":420},[220,56334,386],{"class":264},[220,56336,56337,56339,56341],{"class":222,"line":389},[220,56338,402],{"class":264},[220,56340,347],{"class":420},[220,56342,359],{"class":264},[212,56344,56345],{"className":468,"code":56260,"language":469,"meta":178,"style":178},[99,56346,56347,56355,56363],{"__ignoreMap":178},[220,56348,56349,56351,56353],{"class":222,"line":223},[220,56350,343],{"class":264},[220,56352,347],{"class":420},[220,56354,359],{"class":264},[220,56356,56357,56359,56361],{"class":222,"line":179},[220,56358,364],{"class":264},[220,56360,56238],{"class":420},[220,56362,386],{"class":264},[220,56364,56365,56367,56369],{"class":222,"line":389},[220,56366,402],{"class":264},[220,56368,347],{"class":420},[220,56370,359],{"class":264},[212,56372,56374],{"className":251,"code":56373,"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,56375,56376,56386,56390,56404,56408,56417,56421],{"__ignoreMap":178},[220,56377,56378,56380,56382,56384],{"class":222,"line":223},[220,56379,261],{"class":260},[220,56381,11512],{"class":264},[220,56383,268],{"class":260},[220,56385,4007],{"class":230},[220,56387,56388],{"class":222,"line":179},[220,56389,647],{"emptyLinePlaceholder":194},[220,56391,56392,56394,56396,56398,56400,56402],{"class":222,"line":389},[220,56393,1735],{"class":260},[220,56395,1738],{"class":420},[220,56397,1741],{"class":260},[220,56399,1744],{"class":260},[220,56401,1747],{"class":226},[220,56403,1750],{"class":264},[220,56405,56406],{"class":222,"line":399},[220,56407,1765],{"class":264},[220,56409,56410,56412,56415],{"class":222,"line":644},[220,56411,1770],{"class":264},[220,56413,56414],{"class":230},"'IsometricCubes'",[220,56416,2465],{"class":264},[220,56418,56419],{"class":222,"line":650},[220,56420,1787],{"class":264},[220,56422,56423],{"class":222,"line":656},[220,56424,1792],{"class":264},[1504,56426,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56428},[56429,56430],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fisometriccubes",{"title":56238,"description":56246},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":56437,"title":56438,"body":56439,"category":33396,"componentType":25883,"description":56446,"extension":191,"meta":56707,"navigation":194,"path":56708,"requiresChild":194,"seo":56709,"stem":56710,"__hash__":56711},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":56440,"toc":56703},[56441,56444,56447,56449,56451,56454,56456,56701],[11,56442,56438],{"id":56443},"kaleidoscope",[15,56445,56446],{},"Create a kaleidoscope effect with radial mirrored segments",[31911,56448],{"component":56438},[23,56450,31915],{"id":26533},[31917,56452],{":props":56453},"[{\"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,56455,31923],{"id":31922},[246,56457,56458,56503,56547,56591,56635],{":tabs":1557},[212,56459,56461],{"className":334,"code":56460,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,56462,56463,56471,56479,56487,56495],{"__ignoreMap":178},[220,56464,56465,56467,56469],{"class":222,"line":223},[220,56466,343],{"class":264},[220,56468,347],{"class":346},[220,56470,359],{"class":264},[220,56472,56473,56475,56477],{"class":222,"line":179},[220,56474,364],{"class":264},[220,56476,56438],{"class":346},[220,56478,359],{"class":264},[220,56480,56481,56483,56485],{"class":222,"line":389},[220,56482,2550],{"class":264},[220,56484,2553],{"class":346},[220,56486,386],{"class":264},[220,56488,56489,56491,56493],{"class":222,"line":399},[220,56490,2567],{"class":264},[220,56492,56438],{"class":346},[220,56494,359],{"class":264},[220,56496,56497,56499,56501],{"class":222,"line":644},[220,56498,402],{"class":264},[220,56500,347],{"class":346},[220,56502,359],{"class":264},[212,56504,56505],{"className":409,"code":56460,"language":411,"meta":178,"style":178},[99,56506,56507,56515,56523,56531,56539],{"__ignoreMap":178},[220,56508,56509,56511,56513],{"class":222,"line":223},[220,56510,343],{"class":264},[220,56512,347],{"class":420},[220,56514,359],{"class":264},[220,56516,56517,56519,56521],{"class":222,"line":179},[220,56518,364],{"class":264},[220,56520,56438],{"class":420},[220,56522,359],{"class":264},[220,56524,56525,56527,56529],{"class":222,"line":389},[220,56526,2550],{"class":264},[220,56528,2553],{"class":420},[220,56530,386],{"class":264},[220,56532,56533,56535,56537],{"class":222,"line":399},[220,56534,2567],{"class":264},[220,56536,56438],{"class":420},[220,56538,359],{"class":264},[220,56540,56541,56543,56545],{"class":222,"line":644},[220,56542,402],{"class":264},[220,56544,347],{"class":420},[220,56546,359],{"class":264},[212,56548,56549],{"className":2844,"code":56460,"language":2846,"meta":178,"style":178},[99,56550,56551,56559,56567,56575,56583],{"__ignoreMap":178},[220,56552,56553,56555,56557],{"class":222,"line":223},[220,56554,343],{"class":264},[220,56556,347],{"class":420},[220,56558,359],{"class":264},[220,56560,56561,56563,56565],{"class":222,"line":179},[220,56562,364],{"class":264},[220,56564,56438],{"class":420},[220,56566,359],{"class":264},[220,56568,56569,56571,56573],{"class":222,"line":389},[220,56570,2550],{"class":264},[220,56572,2553],{"class":420},[220,56574,386],{"class":264},[220,56576,56577,56579,56581],{"class":222,"line":399},[220,56578,2567],{"class":264},[220,56580,56438],{"class":420},[220,56582,359],{"class":264},[220,56584,56585,56587,56589],{"class":222,"line":644},[220,56586,402],{"class":264},[220,56588,347],{"class":420},[220,56590,359],{"class":264},[212,56592,56593],{"className":468,"code":56460,"language":469,"meta":178,"style":178},[99,56594,56595,56603,56611,56619,56627],{"__ignoreMap":178},[220,56596,56597,56599,56601],{"class":222,"line":223},[220,56598,343],{"class":264},[220,56600,347],{"class":420},[220,56602,359],{"class":264},[220,56604,56605,56607,56609],{"class":222,"line":179},[220,56606,364],{"class":264},[220,56608,56438],{"class":420},[220,56610,359],{"class":264},[220,56612,56613,56615,56617],{"class":222,"line":389},[220,56614,2550],{"class":264},[220,56616,2553],{"class":420},[220,56618,386],{"class":264},[220,56620,56621,56623,56625],{"class":222,"line":399},[220,56622,2567],{"class":264},[220,56624,56438],{"class":420},[220,56626,359],{"class":264},[220,56628,56629,56631,56633],{"class":222,"line":644},[220,56630,402],{"class":264},[220,56632,347],{"class":420},[220,56634,359],{"class":264},[212,56636,56638],{"className":251,"code":56637,"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,56639,56640,56650,56654,56668,56672,56681,56689,56693,56697],{"__ignoreMap":178},[220,56641,56642,56644,56646,56648],{"class":222,"line":223},[220,56643,261],{"class":260},[220,56645,11512],{"class":264},[220,56647,268],{"class":260},[220,56649,4007],{"class":230},[220,56651,56652],{"class":222,"line":179},[220,56653,647],{"emptyLinePlaceholder":194},[220,56655,56656,56658,56660,56662,56664,56666],{"class":222,"line":389},[220,56657,1735],{"class":260},[220,56659,1738],{"class":420},[220,56661,1741],{"class":260},[220,56663,1744],{"class":260},[220,56665,1747],{"class":226},[220,56667,1750],{"class":264},[220,56669,56670],{"class":222,"line":399},[220,56671,1765],{"class":264},[220,56673,56674,56676,56679],{"class":222,"line":644},[220,56675,1770],{"class":264},[220,56677,56678],{"class":230},"'Kaleidoscope'",[220,56680,7009],{"class":264},[220,56682,56683,56685,56687],{"class":222,"line":650},[220,56684,7014],{"class":264},[220,56686,3206],{"class":230},[220,56688,2465],{"class":264},[220,56690,56691],{"class":222,"line":656},[220,56692,7031],{"class":264},[220,56694,56695],{"class":222,"line":673},[220,56696,1787],{"class":264},[220,56698,56699],{"class":222,"line":682},[220,56700,1792],{"class":264},[1504,56702,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56704},[56705,56706],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":56438,"description":56446},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":56713,"title":56714,"body":56715,"category":32806,"componentType":25883,"description":56722,"extension":191,"meta":56983,"navigation":194,"path":56984,"requiresChild":194,"seo":56985,"stem":56986,"__hash__":56987},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":56716,"toc":56979},[56717,56720,56723,56725,56727,56730,56732,56977],[11,56718,56714],{"id":56719},"keyframes",[15,56721,56722],{},"Motion-tracking overlay — trackers hunt and follow features in the content, dropping keyframe diamonds behind them along their motion paths, like a compositor mid-track",[31911,56724],{"component":56714},[23,56726,31915],{"id":26533},[31917,56728],{":props":56729},"[{\"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,56731,31923],{"id":31922},[246,56733,56734,56779,56823,56867,56911],{":tabs":1557},[212,56735,56737],{"className":334,"code":56736,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,56738,56739,56747,56755,56763,56771],{"__ignoreMap":178},[220,56740,56741,56743,56745],{"class":222,"line":223},[220,56742,343],{"class":264},[220,56744,347],{"class":346},[220,56746,359],{"class":264},[220,56748,56749,56751,56753],{"class":222,"line":179},[220,56750,364],{"class":264},[220,56752,56714],{"class":346},[220,56754,359],{"class":264},[220,56756,56757,56759,56761],{"class":222,"line":389},[220,56758,2550],{"class":264},[220,56760,2553],{"class":346},[220,56762,386],{"class":264},[220,56764,56765,56767,56769],{"class":222,"line":399},[220,56766,2567],{"class":264},[220,56768,56714],{"class":346},[220,56770,359],{"class":264},[220,56772,56773,56775,56777],{"class":222,"line":644},[220,56774,402],{"class":264},[220,56776,347],{"class":346},[220,56778,359],{"class":264},[212,56780,56781],{"className":409,"code":56736,"language":411,"meta":178,"style":178},[99,56782,56783,56791,56799,56807,56815],{"__ignoreMap":178},[220,56784,56785,56787,56789],{"class":222,"line":223},[220,56786,343],{"class":264},[220,56788,347],{"class":420},[220,56790,359],{"class":264},[220,56792,56793,56795,56797],{"class":222,"line":179},[220,56794,364],{"class":264},[220,56796,56714],{"class":420},[220,56798,359],{"class":264},[220,56800,56801,56803,56805],{"class":222,"line":389},[220,56802,2550],{"class":264},[220,56804,2553],{"class":420},[220,56806,386],{"class":264},[220,56808,56809,56811,56813],{"class":222,"line":399},[220,56810,2567],{"class":264},[220,56812,56714],{"class":420},[220,56814,359],{"class":264},[220,56816,56817,56819,56821],{"class":222,"line":644},[220,56818,402],{"class":264},[220,56820,347],{"class":420},[220,56822,359],{"class":264},[212,56824,56825],{"className":2844,"code":56736,"language":2846,"meta":178,"style":178},[99,56826,56827,56835,56843,56851,56859],{"__ignoreMap":178},[220,56828,56829,56831,56833],{"class":222,"line":223},[220,56830,343],{"class":264},[220,56832,347],{"class":420},[220,56834,359],{"class":264},[220,56836,56837,56839,56841],{"class":222,"line":179},[220,56838,364],{"class":264},[220,56840,56714],{"class":420},[220,56842,359],{"class":264},[220,56844,56845,56847,56849],{"class":222,"line":389},[220,56846,2550],{"class":264},[220,56848,2553],{"class":420},[220,56850,386],{"class":264},[220,56852,56853,56855,56857],{"class":222,"line":399},[220,56854,2567],{"class":264},[220,56856,56714],{"class":420},[220,56858,359],{"class":264},[220,56860,56861,56863,56865],{"class":222,"line":644},[220,56862,402],{"class":264},[220,56864,347],{"class":420},[220,56866,359],{"class":264},[212,56868,56869],{"className":468,"code":56736,"language":469,"meta":178,"style":178},[99,56870,56871,56879,56887,56895,56903],{"__ignoreMap":178},[220,56872,56873,56875,56877],{"class":222,"line":223},[220,56874,343],{"class":264},[220,56876,347],{"class":420},[220,56878,359],{"class":264},[220,56880,56881,56883,56885],{"class":222,"line":179},[220,56882,364],{"class":264},[220,56884,56714],{"class":420},[220,56886,359],{"class":264},[220,56888,56889,56891,56893],{"class":222,"line":389},[220,56890,2550],{"class":264},[220,56892,2553],{"class":420},[220,56894,386],{"class":264},[220,56896,56897,56899,56901],{"class":222,"line":399},[220,56898,2567],{"class":264},[220,56900,56714],{"class":420},[220,56902,359],{"class":264},[220,56904,56905,56907,56909],{"class":222,"line":644},[220,56906,402],{"class":264},[220,56908,347],{"class":420},[220,56910,359],{"class":264},[212,56912,56914],{"className":251,"code":56913,"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,56915,56916,56926,56930,56944,56948,56957,56965,56969,56973],{"__ignoreMap":178},[220,56917,56918,56920,56922,56924],{"class":222,"line":223},[220,56919,261],{"class":260},[220,56921,11512],{"class":264},[220,56923,268],{"class":260},[220,56925,4007],{"class":230},[220,56927,56928],{"class":222,"line":179},[220,56929,647],{"emptyLinePlaceholder":194},[220,56931,56932,56934,56936,56938,56940,56942],{"class":222,"line":389},[220,56933,1735],{"class":260},[220,56935,1738],{"class":420},[220,56937,1741],{"class":260},[220,56939,1744],{"class":260},[220,56941,1747],{"class":226},[220,56943,1750],{"class":264},[220,56945,56946],{"class":222,"line":399},[220,56947,1765],{"class":264},[220,56949,56950,56952,56955],{"class":222,"line":644},[220,56951,1770],{"class":264},[220,56953,56954],{"class":230},"'KeyFrames'",[220,56956,7009],{"class":264},[220,56958,56959,56961,56963],{"class":222,"line":650},[220,56960,7014],{"class":264},[220,56962,3206],{"class":230},[220,56964,2465],{"class":264},[220,56966,56967],{"class":222,"line":656},[220,56968,7031],{"class":264},[220,56970,56971],{"class":222,"line":673},[220,56972,1787],{"class":264},[220,56974,56975],{"class":222,"line":682},[220,56976,1792],{"class":264},[1504,56978,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56980},[56981,56982],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":56714,"description":56722},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":56989,"title":56990,"body":56991,"category":32806,"componentType":25883,"description":57262,"extension":191,"meta":57263,"navigation":194,"path":57264,"requiresChild":194,"seo":57265,"stem":57266,"__hash__":57267},"components\u002Fdocs\u002Fcomponents\u002FLensDistortion.md","LensDistortion",{"type":8,"value":56992,"toc":57258},[56993,56996,57002,57004,57006,57009,57011,57256],[11,56994,56990],{"id":56995},"lensdistortion",[15,56997,56998,56999,4836],{},"Split content into shifting chromatic layers with barrel or pincushion lens warp. Powered by ",[56,57000,54082],{"href":54080,"rel":57001},[167],[31911,57003],{"component":56990},[23,57005,31915],{"id":26533},[31917,57007],{":props":57008},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the lens effect — the focus zone, lens warp, circle crop and swirl all pivot around it\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Strength of the color split; how far the color layers are pushed apart (0 is off)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the spread in degrees\"},{\"name\":\"perspective\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Shapes the spread direction from a straight line (0) to a radial burst out from the centre (1)\"},{\"name\":\"bias\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Shifts the colors toward one end of the spread; 0 spaces them evenly\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"35\",\"description\":\"Number of sampled color layers along the spread; higher is smoother and costlier\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Overall amount of color dispersion; 1 gives each layer its own color from the spectrum, 0 keeps the original color\"},{\"name\":\"dispersionShift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance of the dispersion between a soft circular zone at the centre and the rest; -1 keeps it in the centre only, 1 at the edges only\"},{\"name\":\"dispersionColor\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Rotates the dispersion colors around the hue wheel, 0 to 1 for a full turn\"},{\"name\":\"focusCenter\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Reduces the spread in a circular zone at the centre; 0 keeps it full to the centre\"},{\"name\":\"focusEdges\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Reduces the spread toward the edges; 1 restores the original image there\"},{\"name\":\"lensBulge\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Radial lens warp; positive bulges out like a fisheye, negative pinches in like a pincushion\"},{\"name\":\"lensCircle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Squeezes pixels outside the inscribed circle inward so the outline becomes a circle\"},{\"name\":\"swirl\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Rotates the color layers around the centre by an angle growing along the spread; 0 is off\"},{\"name\":\"noise\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Scatters the spread direction with noise; 0 is off\"},{\"name\":\"noiseFrequency\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Frequency of the direction noise; higher is finer (no effect with noise at 0)\"},{\"name\":\"noiseOffset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Offsets the noise pattern for a different seed (no effect with noise at 0)\"},{\"name\":\"grainMixer\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Scatters the spread with grain noise, breaking up the edges of the color layers\"},{\"name\":\"grainOverlay\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Post-processing black\u002Fwhite grain overlay\"}]",[23,57010,31923],{"id":31922},[246,57012,57013,57058,57102,57146,57190],{":tabs":1557},[212,57014,57016],{"className":334,"code":57015,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensDistortion>\n \u003CCircle \u002F>\n \u003C\u002FLensDistortion>\n\u003C\u002FShader>\n",[99,57017,57018,57026,57034,57042,57050],{"__ignoreMap":178},[220,57019,57020,57022,57024],{"class":222,"line":223},[220,57021,343],{"class":264},[220,57023,347],{"class":346},[220,57025,359],{"class":264},[220,57027,57028,57030,57032],{"class":222,"line":179},[220,57029,364],{"class":264},[220,57031,56990],{"class":346},[220,57033,359],{"class":264},[220,57035,57036,57038,57040],{"class":222,"line":389},[220,57037,2550],{"class":264},[220,57039,2553],{"class":346},[220,57041,386],{"class":264},[220,57043,57044,57046,57048],{"class":222,"line":399},[220,57045,2567],{"class":264},[220,57047,56990],{"class":346},[220,57049,359],{"class":264},[220,57051,57052,57054,57056],{"class":222,"line":644},[220,57053,402],{"class":264},[220,57055,347],{"class":346},[220,57057,359],{"class":264},[212,57059,57060],{"className":409,"code":57015,"language":411,"meta":178,"style":178},[99,57061,57062,57070,57078,57086,57094],{"__ignoreMap":178},[220,57063,57064,57066,57068],{"class":222,"line":223},[220,57065,343],{"class":264},[220,57067,347],{"class":420},[220,57069,359],{"class":264},[220,57071,57072,57074,57076],{"class":222,"line":179},[220,57073,364],{"class":264},[220,57075,56990],{"class":420},[220,57077,359],{"class":264},[220,57079,57080,57082,57084],{"class":222,"line":389},[220,57081,2550],{"class":264},[220,57083,2553],{"class":420},[220,57085,386],{"class":264},[220,57087,57088,57090,57092],{"class":222,"line":399},[220,57089,2567],{"class":264},[220,57091,56990],{"class":420},[220,57093,359],{"class":264},[220,57095,57096,57098,57100],{"class":222,"line":644},[220,57097,402],{"class":264},[220,57099,347],{"class":420},[220,57101,359],{"class":264},[212,57103,57104],{"className":2844,"code":57015,"language":2846,"meta":178,"style":178},[99,57105,57106,57114,57122,57130,57138],{"__ignoreMap":178},[220,57107,57108,57110,57112],{"class":222,"line":223},[220,57109,343],{"class":264},[220,57111,347],{"class":420},[220,57113,359],{"class":264},[220,57115,57116,57118,57120],{"class":222,"line":179},[220,57117,364],{"class":264},[220,57119,56990],{"class":420},[220,57121,359],{"class":264},[220,57123,57124,57126,57128],{"class":222,"line":389},[220,57125,2550],{"class":264},[220,57127,2553],{"class":420},[220,57129,386],{"class":264},[220,57131,57132,57134,57136],{"class":222,"line":399},[220,57133,2567],{"class":264},[220,57135,56990],{"class":420},[220,57137,359],{"class":264},[220,57139,57140,57142,57144],{"class":222,"line":644},[220,57141,402],{"class":264},[220,57143,347],{"class":420},[220,57145,359],{"class":264},[212,57147,57148],{"className":468,"code":57015,"language":469,"meta":178,"style":178},[99,57149,57150,57158,57166,57174,57182],{"__ignoreMap":178},[220,57151,57152,57154,57156],{"class":222,"line":223},[220,57153,343],{"class":264},[220,57155,347],{"class":420},[220,57157,359],{"class":264},[220,57159,57160,57162,57164],{"class":222,"line":179},[220,57161,364],{"class":264},[220,57163,56990],{"class":420},[220,57165,359],{"class":264},[220,57167,57168,57170,57172],{"class":222,"line":389},[220,57169,2550],{"class":264},[220,57171,2553],{"class":420},[220,57173,386],{"class":264},[220,57175,57176,57178,57180],{"class":222,"line":399},[220,57177,2567],{"class":264},[220,57179,56990],{"class":420},[220,57181,359],{"class":264},[220,57183,57184,57186,57188],{"class":222,"line":644},[220,57185,402],{"class":264},[220,57187,347],{"class":420},[220,57189,359],{"class":264},[212,57191,57193],{"className":251,"code":57192,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LensDistortion', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,57194,57195,57205,57209,57223,57227,57236,57244,57248,57252],{"__ignoreMap":178},[220,57196,57197,57199,57201,57203],{"class":222,"line":223},[220,57198,261],{"class":260},[220,57200,11512],{"class":264},[220,57202,268],{"class":260},[220,57204,4007],{"class":230},[220,57206,57207],{"class":222,"line":179},[220,57208,647],{"emptyLinePlaceholder":194},[220,57210,57211,57213,57215,57217,57219,57221],{"class":222,"line":389},[220,57212,1735],{"class":260},[220,57214,1738],{"class":420},[220,57216,1741],{"class":260},[220,57218,1744],{"class":260},[220,57220,1747],{"class":226},[220,57222,1750],{"class":264},[220,57224,57225],{"class":222,"line":399},[220,57226,1765],{"class":264},[220,57228,57229,57231,57234],{"class":222,"line":644},[220,57230,1770],{"class":264},[220,57232,57233],{"class":230},"'LensDistortion'",[220,57235,7009],{"class":264},[220,57237,57238,57240,57242],{"class":222,"line":650},[220,57239,7014],{"class":264},[220,57241,3206],{"class":230},[220,57243,2465],{"class":264},[220,57245,57246],{"class":222,"line":656},[220,57247,7031],{"class":264},[220,57249,57250],{"class":222,"line":673},[220,57251,1787],{"class":264},[220,57253,57254],{"class":222,"line":682},[220,57255,1792],{"class":264},[1504,57257,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":57259},[57260,57261],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Split content into shifting chromatic layers with barrel or pincushion lens warp. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flensdistortion",{"title":56990,"description":57262},"docs\u002Fcomponents\u002FLensDistortion","XGObhMezsAfFiRCCmEM_AeYd8iXDTD0yiv-uio3nOXc",{"id":57269,"title":57270,"body":57271,"category":32806,"componentType":25877,"description":57278,"extension":191,"meta":57518,"navigation":194,"path":57519,"requiresChild":32530,"seo":57520,"stem":57521,"__hash__":57522},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":57272,"toc":57514},[57273,57276,57279,57281,57283,57286,57288,57512],[11,57274,57270],{"id":57275},"lensflare",[15,57277,57278],{},"Realistic camera lens flare with artifacts.",[31911,57280],{"component":57270},[23,57282,31915],{"id":26533},[31917,57284],{":props":57285},"[{\"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,57287,31923],{"id":31922},[246,57289,57290,57329,57372,57412,57454],{":tabs":1557},[212,57291,57293],{"className":334,"code":57292,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,57294,57295,57303,57309,57317,57321],{"__ignoreMap":178},[220,57296,57297,57299,57301],{"class":222,"line":223},[220,57298,343],{"class":264},[220,57300,347],{"class":346},[220,57302,359],{"class":264},[220,57304,57305,57307],{"class":222,"line":179},[220,57306,364],{"class":264},[220,57308,20357],{"class":346},[220,57310,57311,57313,57315],{"class":222,"line":389},[220,57312,20371],{"class":226},[220,57314,353],{"class":264},[220,57316,42358],{"class":230},[220,57318,57319],{"class":222,"line":399},[220,57320,1234],{"class":264},[220,57322,57323,57325,57327],{"class":222,"line":644},[220,57324,402],{"class":264},[220,57326,347],{"class":346},[220,57328,359],{"class":264},[212,57330,57332],{"className":409,"code":57331,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,57333,57334,57342,57348,57360,57364],{"__ignoreMap":178},[220,57335,57336,57338,57340],{"class":222,"line":223},[220,57337,343],{"class":264},[220,57339,347],{"class":420},[220,57341,359],{"class":264},[220,57343,57344,57346],{"class":222,"line":179},[220,57345,364],{"class":264},[220,57347,20357],{"class":420},[220,57349,57350,57352,57354,57356,57358],{"class":222,"line":389},[220,57351,20482],{"class":226},[220,57353,353],{"class":260},[220,57355,743],{"class":264},[220,57357,7754],{"class":420},[220,57359,749],{"class":264},[220,57361,57362],{"class":222,"line":399},[220,57363,1234],{"class":264},[220,57365,57366,57368,57370],{"class":222,"line":644},[220,57367,402],{"class":264},[220,57369,347],{"class":420},[220,57371,359],{"class":264},[212,57373,57374],{"className":2844,"code":57331,"language":2846,"meta":178,"style":178},[99,57375,57376,57384,57390,57400,57404],{"__ignoreMap":178},[220,57377,57378,57380,57382],{"class":222,"line":223},[220,57379,343],{"class":264},[220,57381,347],{"class":420},[220,57383,359],{"class":264},[220,57385,57386,57388],{"class":222,"line":179},[220,57387,364],{"class":264},[220,57389,20357],{"class":420},[220,57391,57392,57394,57396,57398],{"class":222,"line":389},[220,57393,20482],{"class":226},[220,57395,29871],{"class":264},[220,57397,7754],{"class":420},[220,57399,749],{"class":264},[220,57401,57402],{"class":222,"line":399},[220,57403,1234],{"class":264},[220,57405,57406,57408,57410],{"class":222,"line":644},[220,57407,402],{"class":264},[220,57409,347],{"class":420},[220,57411,359],{"class":264},[212,57413,57414],{"className":468,"code":57331,"language":469,"meta":178,"style":178},[99,57415,57416,57424,57430,57442,57446],{"__ignoreMap":178},[220,57417,57418,57420,57422],{"class":222,"line":223},[220,57419,343],{"class":264},[220,57421,347],{"class":420},[220,57423,359],{"class":264},[220,57425,57426,57428],{"class":222,"line":179},[220,57427,364],{"class":264},[220,57429,20357],{"class":420},[220,57431,57432,57434,57436,57438,57440],{"class":222,"line":389},[220,57433,20482],{"class":226},[220,57435,353],{"class":260},[220,57437,743],{"class":264},[220,57439,7754],{"class":420},[220,57441,749],{"class":264},[220,57443,57444],{"class":222,"line":399},[220,57445,1234],{"class":264},[220,57447,57448,57450,57452],{"class":222,"line":644},[220,57449,402],{"class":264},[220,57451,347],{"class":420},[220,57453,359],{"class":264},[212,57455,57457],{"className":251,"code":57456,"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,57458,57459,57469,57473,57487,57491,57504,57508],{"__ignoreMap":178},[220,57460,57461,57463,57465,57467],{"class":222,"line":223},[220,57462,261],{"class":260},[220,57464,11512],{"class":264},[220,57466,268],{"class":260},[220,57468,4007],{"class":230},[220,57470,57471],{"class":222,"line":179},[220,57472,647],{"emptyLinePlaceholder":194},[220,57474,57475,57477,57479,57481,57483,57485],{"class":222,"line":389},[220,57476,1735],{"class":260},[220,57478,1738],{"class":420},[220,57480,1741],{"class":260},[220,57482,1744],{"class":260},[220,57484,1747],{"class":226},[220,57486,1750],{"class":264},[220,57488,57489],{"class":222,"line":399},[220,57490,1765],{"class":264},[220,57492,57493,57495,57498,57500,57502],{"class":222,"line":644},[220,57494,1770],{"class":264},[220,57496,57497],{"class":230},"'LensFlare'",[220,57499,32203],{"class":264},[220,57501,7754],{"class":420},[220,57503,1782],{"class":264},[220,57505,57506],{"class":222,"line":650},[220,57507,1787],{"class":264},[220,57509,57510],{"class":222,"line":656},[220,57511,1792],{"class":264},[1504,57513,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57515},[57516,57517],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":57270,"description":57278},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":57524,"title":57525,"body":57526,"category":36569,"componentType":25877,"description":57778,"extension":191,"meta":57779,"navigation":194,"path":57780,"requiresChild":32530,"seo":57781,"stem":57782,"__hash__":57783},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":57527,"toc":57774},[57528,57531,57537,57539,57541,57544,57546,57772],[11,57529,57525],{"id":57530},"lightedge",[15,57532,57533,57534,4836],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,57535,54082],{"href":54080,"rel":57536},[167],[31911,57538],{"component":57525},[23,57540,31915],{"id":26533},[31917,57542],{":props":57543},"[{\"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,57545,31923],{"id":31922},[246,57547,57548,57589,57632,57672,57714],{":tabs":1557},[212,57549,57551],{"className":334,"code":57550,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,57552,57553,57561,57568,57577,57581],{"__ignoreMap":178},[220,57554,57555,57557,57559],{"class":222,"line":223},[220,57556,343],{"class":264},[220,57558,347],{"class":346},[220,57560,359],{"class":264},[220,57562,57563,57565],{"class":222,"line":179},[220,57564,364],{"class":264},[220,57566,57567],{"class":346},"LightEdge\n",[220,57569,57570,57572,57574],{"class":222,"line":389},[220,57571,20371],{"class":226},[220,57573,353],{"class":264},[220,57575,57576],{"class":230},"\"0.6\"\n",[220,57578,57579],{"class":222,"line":399},[220,57580,1234],{"class":264},[220,57582,57583,57585,57587],{"class":222,"line":644},[220,57584,402],{"class":264},[220,57586,347],{"class":346},[220,57588,359],{"class":264},[212,57590,57592],{"className":409,"code":57591,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,57593,57594,57602,57608,57620,57624],{"__ignoreMap":178},[220,57595,57596,57598,57600],{"class":222,"line":223},[220,57597,343],{"class":264},[220,57599,347],{"class":420},[220,57601,359],{"class":264},[220,57603,57604,57606],{"class":222,"line":179},[220,57605,364],{"class":264},[220,57607,57567],{"class":420},[220,57609,57610,57612,57614,57616,57618],{"class":222,"line":389},[220,57611,20482],{"class":226},[220,57613,353],{"class":260},[220,57615,743],{"class":264},[220,57617,8236],{"class":420},[220,57619,749],{"class":264},[220,57621,57622],{"class":222,"line":399},[220,57623,1234],{"class":264},[220,57625,57626,57628,57630],{"class":222,"line":644},[220,57627,402],{"class":264},[220,57629,347],{"class":420},[220,57631,359],{"class":264},[212,57633,57634],{"className":2844,"code":57591,"language":2846,"meta":178,"style":178},[99,57635,57636,57644,57650,57660,57664],{"__ignoreMap":178},[220,57637,57638,57640,57642],{"class":222,"line":223},[220,57639,343],{"class":264},[220,57641,347],{"class":420},[220,57643,359],{"class":264},[220,57645,57646,57648],{"class":222,"line":179},[220,57647,364],{"class":264},[220,57649,57567],{"class":420},[220,57651,57652,57654,57656,57658],{"class":222,"line":389},[220,57653,20482],{"class":226},[220,57655,29871],{"class":264},[220,57657,8236],{"class":420},[220,57659,749],{"class":264},[220,57661,57662],{"class":222,"line":399},[220,57663,1234],{"class":264},[220,57665,57666,57668,57670],{"class":222,"line":644},[220,57667,402],{"class":264},[220,57669,347],{"class":420},[220,57671,359],{"class":264},[212,57673,57674],{"className":468,"code":57591,"language":469,"meta":178,"style":178},[99,57675,57676,57684,57690,57702,57706],{"__ignoreMap":178},[220,57677,57678,57680,57682],{"class":222,"line":223},[220,57679,343],{"class":264},[220,57681,347],{"class":420},[220,57683,359],{"class":264},[220,57685,57686,57688],{"class":222,"line":179},[220,57687,364],{"class":264},[220,57689,57567],{"class":420},[220,57691,57692,57694,57696,57698,57700],{"class":222,"line":389},[220,57693,20482],{"class":226},[220,57695,353],{"class":260},[220,57697,743],{"class":264},[220,57699,8236],{"class":420},[220,57701,749],{"class":264},[220,57703,57704],{"class":222,"line":399},[220,57705,1234],{"class":264},[220,57707,57708,57710,57712],{"class":222,"line":644},[220,57709,402],{"class":264},[220,57711,347],{"class":420},[220,57713,359],{"class":264},[212,57715,57717],{"className":251,"code":57716,"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,57718,57719,57729,57733,57747,57751,57764,57768],{"__ignoreMap":178},[220,57720,57721,57723,57725,57727],{"class":222,"line":223},[220,57722,261],{"class":260},[220,57724,11512],{"class":264},[220,57726,268],{"class":260},[220,57728,4007],{"class":230},[220,57730,57731],{"class":222,"line":179},[220,57732,647],{"emptyLinePlaceholder":194},[220,57734,57735,57737,57739,57741,57743,57745],{"class":222,"line":389},[220,57736,1735],{"class":260},[220,57738,1738],{"class":420},[220,57740,1741],{"class":260},[220,57742,1744],{"class":260},[220,57744,1747],{"class":226},[220,57746,1750],{"class":264},[220,57748,57749],{"class":222,"line":399},[220,57750,1765],{"class":264},[220,57752,57753,57755,57758,57760,57762],{"class":222,"line":644},[220,57754,1770],{"class":264},[220,57756,57757],{"class":230},"'LightEdge'",[220,57759,32203],{"class":264},[220,57761,8236],{"class":420},[220,57763,1782],{"class":264},[220,57765,57766],{"class":222,"line":650},[220,57767,1787],{"class":264},[220,57769,57770],{"class":222,"line":656},[220,57771,1792],{"class":264},[1504,57773,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57775},[57776,57777],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flightedge",{"title":57525,"description":57778},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":57785,"title":57786,"body":57787,"category":32806,"componentType":25883,"description":57794,"extension":191,"meta":58111,"navigation":194,"path":58112,"requiresChild":194,"seo":58113,"stem":58114,"__hash__":58115},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":57788,"toc":58107},[57789,57792,57795,57797,57799,57802,57804,58105],[11,57790,57786],{"id":57791},"lightleak",[15,57793,57794],{},"Photorealistic film light leak — warm overexposed light bleeding in from a draggable anchor point, with streak bands, chromatic fringing, and slow breathing that evolves over time",[31911,57796],{"component":57786},[23,57798,31915],{"id":26533},[31917,57800],{":props":57801},"[{\"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,57803,31923],{"id":31922},[246,57805,57806,57862,57921,57977,58035],{":tabs":1557},[212,57807,57809],{"className":334,"code":57808,"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,57810,57811,57819,57826,57834,57838,57846,57854],{"__ignoreMap":178},[220,57812,57813,57815,57817],{"class":222,"line":223},[220,57814,343],{"class":264},[220,57816,347],{"class":346},[220,57818,359],{"class":264},[220,57820,57821,57823],{"class":222,"line":179},[220,57822,364],{"class":264},[220,57824,57825],{"class":346},"LightLeak\n",[220,57827,57828,57830,57832],{"class":222,"line":389},[220,57829,20371],{"class":226},[220,57831,353],{"class":264},[220,57833,18108],{"class":230},[220,57835,57836],{"class":222,"line":399},[220,57837,31959],{"class":264},[220,57839,57840,57842,57844],{"class":222,"line":644},[220,57841,2550],{"class":264},[220,57843,2553],{"class":346},[220,57845,386],{"class":264},[220,57847,57848,57850,57852],{"class":222,"line":650},[220,57849,2567],{"class":264},[220,57851,57786],{"class":346},[220,57853,359],{"class":264},[220,57855,57856,57858,57860],{"class":222,"line":656},[220,57857,402],{"class":264},[220,57859,347],{"class":346},[220,57861,359],{"class":264},[212,57863,57865],{"className":409,"code":57864,"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,57866,57867,57875,57881,57893,57897,57905,57913],{"__ignoreMap":178},[220,57868,57869,57871,57873],{"class":222,"line":223},[220,57870,343],{"class":264},[220,57872,347],{"class":420},[220,57874,359],{"class":264},[220,57876,57877,57879],{"class":222,"line":179},[220,57878,364],{"class":264},[220,57880,57825],{"class":420},[220,57882,57883,57885,57887,57889,57891],{"class":222,"line":389},[220,57884,20482],{"class":226},[220,57886,353],{"class":260},[220,57888,743],{"class":264},[220,57890,18192],{"class":420},[220,57892,749],{"class":264},[220,57894,57895],{"class":222,"line":399},[220,57896,31959],{"class":264},[220,57898,57899,57901,57903],{"class":222,"line":644},[220,57900,2550],{"class":264},[220,57902,2553],{"class":420},[220,57904,386],{"class":264},[220,57906,57907,57909,57911],{"class":222,"line":650},[220,57908,2567],{"class":264},[220,57910,57786],{"class":420},[220,57912,359],{"class":264},[220,57914,57915,57917,57919],{"class":222,"line":656},[220,57916,402],{"class":264},[220,57918,347],{"class":420},[220,57920,359],{"class":264},[212,57922,57923],{"className":2844,"code":57864,"language":2846,"meta":178,"style":178},[99,57924,57925,57933,57939,57949,57953,57961,57969],{"__ignoreMap":178},[220,57926,57927,57929,57931],{"class":222,"line":223},[220,57928,343],{"class":264},[220,57930,347],{"class":420},[220,57932,359],{"class":264},[220,57934,57935,57937],{"class":222,"line":179},[220,57936,364],{"class":264},[220,57938,57825],{"class":420},[220,57940,57941,57943,57945,57947],{"class":222,"line":389},[220,57942,20482],{"class":226},[220,57944,29871],{"class":264},[220,57946,18192],{"class":420},[220,57948,749],{"class":264},[220,57950,57951],{"class":222,"line":399},[220,57952,31959],{"class":264},[220,57954,57955,57957,57959],{"class":222,"line":644},[220,57956,2550],{"class":264},[220,57958,2553],{"class":420},[220,57960,386],{"class":264},[220,57962,57963,57965,57967],{"class":222,"line":650},[220,57964,2567],{"class":264},[220,57966,57786],{"class":420},[220,57968,359],{"class":264},[220,57970,57971,57973,57975],{"class":222,"line":656},[220,57972,402],{"class":264},[220,57974,347],{"class":420},[220,57976,359],{"class":264},[212,57978,57979],{"className":468,"code":57864,"language":469,"meta":178,"style":178},[99,57980,57981,57989,57995,58007,58011,58019,58027],{"__ignoreMap":178},[220,57982,57983,57985,57987],{"class":222,"line":223},[220,57984,343],{"class":264},[220,57986,347],{"class":420},[220,57988,359],{"class":264},[220,57990,57991,57993],{"class":222,"line":179},[220,57992,364],{"class":264},[220,57994,57825],{"class":420},[220,57996,57997,57999,58001,58003,58005],{"class":222,"line":389},[220,57998,20482],{"class":226},[220,58000,353],{"class":260},[220,58002,743],{"class":264},[220,58004,18192],{"class":420},[220,58006,749],{"class":264},[220,58008,58009],{"class":222,"line":399},[220,58010,31959],{"class":264},[220,58012,58013,58015,58017],{"class":222,"line":644},[220,58014,2550],{"class":264},[220,58016,2553],{"class":420},[220,58018,386],{"class":264},[220,58020,58021,58023,58025],{"class":222,"line":650},[220,58022,2567],{"class":264},[220,58024,57786],{"class":420},[220,58026,359],{"class":264},[220,58028,58029,58031,58033],{"class":222,"line":656},[220,58030,402],{"class":264},[220,58032,347],{"class":420},[220,58034,359],{"class":264},[212,58036,58038],{"className":251,"code":58037,"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,58039,58040,58050,58054,58068,58072,58085,58093,58097,58101],{"__ignoreMap":178},[220,58041,58042,58044,58046,58048],{"class":222,"line":223},[220,58043,261],{"class":260},[220,58045,11512],{"class":264},[220,58047,268],{"class":260},[220,58049,4007],{"class":230},[220,58051,58052],{"class":222,"line":179},[220,58053,647],{"emptyLinePlaceholder":194},[220,58055,58056,58058,58060,58062,58064,58066],{"class":222,"line":389},[220,58057,1735],{"class":260},[220,58059,1738],{"class":420},[220,58061,1741],{"class":260},[220,58063,1744],{"class":260},[220,58065,1747],{"class":226},[220,58067,1750],{"class":264},[220,58069,58070],{"class":222,"line":399},[220,58071,1765],{"class":264},[220,58073,58074,58076,58079,58081,58083],{"class":222,"line":644},[220,58075,1770],{"class":264},[220,58077,58078],{"class":230},"'LightLeak'",[220,58080,32203],{"class":264},[220,58082,18192],{"class":420},[220,58084,7546],{"class":264},[220,58086,58087,58089,58091],{"class":222,"line":650},[220,58088,7014],{"class":264},[220,58090,3206],{"class":230},[220,58092,2465],{"class":264},[220,58094,58095],{"class":222,"line":656},[220,58096,7031],{"class":264},[220,58098,58099],{"class":222,"line":673},[220,58100,1787],{"class":264},[220,58102,58103],{"class":222,"line":682},[220,58104,1792],{"class":264},[1504,58106,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58108},[58109,58110],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":57786,"description":57794},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":58117,"title":58118,"body":58119,"category":15908,"componentType":25877,"description":58125,"extension":191,"meta":58355,"navigation":194,"path":58356,"requiresChild":32530,"seo":58357,"stem":58358,"__hash__":58359},"components\u002Fdocs\u002Fcomponents\u002FLine.md","Line",{"type":8,"value":58120,"toc":58351},[58121,58123,58126,58128,58130,58133,58135,58349],[11,58122,58118],{"id":222},[15,58124,58125],{},"Draw a straight line between two points with color, thickness, and solid, dashed, or dotted styles",[31911,58127],{"component":58118},[23,58129,31915],{"id":26533},[31917,58131],{":props":58132},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the line\"},{\"name\":\"pointA\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.5}\",\"description\":\"The start point of the line\"},{\"name\":\"pointB\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.5}\",\"description\":\"The end point of the line\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.01\",\"description\":\"The thickness of the line. A value of one (1) matches the canvas height.\"},{\"name\":\"style\",\"type\":\"\\\"solid\\\" | \\\"dashed\\\" | \\\"dotted\\\"\",\"default\":\"solid\",\"description\":\"The line style: solid, dashed, or dotted. Dashes and dots are spaced to land exactly on both endpoints.\"},{\"name\":\"dashLength\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"The length of each dash, including its caps\"},{\"name\":\"gapLength\",\"type\":\"number\",\"default\":\"0.025\",\"description\":\"The gap between dashes, or the spacing between dots\"},{\"name\":\"capStart\",\"type\":\"\\\"square\\\" | \\\"rounded\\\"\",\"default\":\"rounded\",\"description\":\"Cap shape at the start of the line (point A). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the A-facing end of each dash and dot.\"},{\"name\":\"capEnd\",\"type\":\"\\\"square\\\" | \\\"rounded\\\"\",\"default\":\"rounded\",\"description\":\"Cap shape at the end of the line (point B). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the B-facing end of each dash and dot.\"}]",[23,58134,31923],{"id":31922},[246,58136,58137,58177,58215,58253,58291],{":tabs":1557},[212,58138,58140],{"className":334,"code":58139,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLine\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,58141,58142,58150,58157,58165,58169],{"__ignoreMap":178},[220,58143,58144,58146,58148],{"class":222,"line":223},[220,58145,343],{"class":264},[220,58147,347],{"class":346},[220,58149,359],{"class":264},[220,58151,58152,58154],{"class":222,"line":179},[220,58153,364],{"class":264},[220,58155,58156],{"class":346},"Line\n",[220,58158,58159,58161,58163],{"class":222,"line":389},[220,58160,9635],{"class":226},[220,58162,353],{"class":264},[220,58164,9591],{"class":230},[220,58166,58167],{"class":222,"line":399},[220,58168,1234],{"class":264},[220,58170,58171,58173,58175],{"class":222,"line":644},[220,58172,402],{"class":264},[220,58174,347],{"class":346},[220,58176,359],{"class":264},[212,58178,58179],{"className":409,"code":58139,"language":411,"meta":178,"style":178},[99,58180,58181,58189,58195,58203,58207],{"__ignoreMap":178},[220,58182,58183,58185,58187],{"class":222,"line":223},[220,58184,343],{"class":264},[220,58186,347],{"class":420},[220,58188,359],{"class":264},[220,58190,58191,58193],{"class":222,"line":179},[220,58192,364],{"class":264},[220,58194,58156],{"class":420},[220,58196,58197,58199,58201],{"class":222,"line":389},[220,58198,9635],{"class":226},[220,58200,353],{"class":260},[220,58202,9591],{"class":230},[220,58204,58205],{"class":222,"line":399},[220,58206,1234],{"class":264},[220,58208,58209,58211,58213],{"class":222,"line":644},[220,58210,402],{"class":264},[220,58212,347],{"class":420},[220,58214,359],{"class":264},[212,58216,58217],{"className":2844,"code":58139,"language":2846,"meta":178,"style":178},[99,58218,58219,58227,58233,58241,58245],{"__ignoreMap":178},[220,58220,58221,58223,58225],{"class":222,"line":223},[220,58222,343],{"class":264},[220,58224,347],{"class":420},[220,58226,359],{"class":264},[220,58228,58229,58231],{"class":222,"line":179},[220,58230,364],{"class":264},[220,58232,58156],{"class":420},[220,58234,58235,58237,58239],{"class":222,"line":389},[220,58236,9635],{"class":226},[220,58238,353],{"class":264},[220,58240,9591],{"class":230},[220,58242,58243],{"class":222,"line":399},[220,58244,1234],{"class":264},[220,58246,58247,58249,58251],{"class":222,"line":644},[220,58248,402],{"class":264},[220,58250,347],{"class":420},[220,58252,359],{"class":264},[212,58254,58255],{"className":468,"code":58139,"language":469,"meta":178,"style":178},[99,58256,58257,58265,58271,58279,58283],{"__ignoreMap":178},[220,58258,58259,58261,58263],{"class":222,"line":223},[220,58260,343],{"class":264},[220,58262,347],{"class":420},[220,58264,359],{"class":264},[220,58266,58267,58269],{"class":222,"line":179},[220,58268,364],{"class":264},[220,58270,58156],{"class":420},[220,58272,58273,58275,58277],{"class":222,"line":389},[220,58274,9635],{"class":226},[220,58276,353],{"class":260},[220,58278,9591],{"class":230},[220,58280,58281],{"class":222,"line":399},[220,58282,1234],{"class":264},[220,58284,58285,58287,58289],{"class":222,"line":644},[220,58286,402],{"class":264},[220,58288,347],{"class":420},[220,58290,359],{"class":264},[212,58292,58294],{"className":251,"code":58293,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Line', props: { color: '#ffffff' } }\n ]\n})\n",[99,58295,58296,58306,58310,58324,58328,58341,58345],{"__ignoreMap":178},[220,58297,58298,58300,58302,58304],{"class":222,"line":223},[220,58299,261],{"class":260},[220,58301,11512],{"class":264},[220,58303,268],{"class":260},[220,58305,4007],{"class":230},[220,58307,58308],{"class":222,"line":179},[220,58309,647],{"emptyLinePlaceholder":194},[220,58311,58312,58314,58316,58318,58320,58322],{"class":222,"line":389},[220,58313,1735],{"class":260},[220,58315,1738],{"class":420},[220,58317,1741],{"class":260},[220,58319,1744],{"class":260},[220,58321,1747],{"class":226},[220,58323,1750],{"class":264},[220,58325,58326],{"class":222,"line":399},[220,58327,1765],{"class":264},[220,58329,58330,58332,58335,58337,58339],{"class":222,"line":644},[220,58331,1770],{"class":264},[220,58333,58334],{"class":230},"'Line'",[220,58336,1776],{"class":264},[220,58338,10169],{"class":230},[220,58340,1782],{"class":264},[220,58342,58343],{"class":222,"line":650},[220,58344,1787],{"class":264},[220,58346,58347],{"class":222,"line":656},[220,58348,1792],{"class":264},[1504,58350,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58352},[58353,58354],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fline",{"title":58118,"description":58125},"docs\u002Fcomponents\u002FLine","ab3ZtkD2UknIoRhLNYwnFQeG43QnnizPr1pSHYkNhJg",{"id":58361,"title":58362,"body":58363,"category":32234,"componentType":25883,"description":58370,"extension":191,"meta":58687,"navigation":194,"path":58688,"requiresChild":194,"seo":58689,"stem":58690,"__hash__":58691},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":58364,"toc":58683},[58365,58368,58371,58373,58375,58378,58380,58681],[11,58366,58362],{"id":58367},"linearblur",[15,58369,58370],{},"Directional motion blur in a specific angle",[31911,58372],{"component":58362},[23,58374,31915],{"id":26533},[31917,58376],{":props":58377},"[{\"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,58379,31923],{"id":31922},[246,58381,58382,58438,58497,58553,58611],{":tabs":1557},[212,58383,58385],{"className":334,"code":58384,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,58386,58387,58395,58402,58410,58414,58422,58430],{"__ignoreMap":178},[220,58388,58389,58391,58393],{"class":222,"line":223},[220,58390,343],{"class":264},[220,58392,347],{"class":346},[220,58394,359],{"class":264},[220,58396,58397,58399],{"class":222,"line":179},[220,58398,364],{"class":264},[220,58400,58401],{"class":346},"LinearBlur\n",[220,58403,58404,58406,58408],{"class":222,"line":389},[220,58405,20371],{"class":226},[220,58407,353],{"class":264},[220,58409,43792],{"class":230},[220,58411,58412],{"class":222,"line":399},[220,58413,31959],{"class":264},[220,58415,58416,58418,58420],{"class":222,"line":644},[220,58417,2550],{"class":264},[220,58419,2553],{"class":346},[220,58421,386],{"class":264},[220,58423,58424,58426,58428],{"class":222,"line":650},[220,58425,2567],{"class":264},[220,58427,58362],{"class":346},[220,58429,359],{"class":264},[220,58431,58432,58434,58436],{"class":222,"line":656},[220,58433,402],{"class":264},[220,58435,347],{"class":346},[220,58437,359],{"class":264},[212,58439,58441],{"className":409,"code":58440,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,58442,58443,58451,58457,58469,58473,58481,58489],{"__ignoreMap":178},[220,58444,58445,58447,58449],{"class":222,"line":223},[220,58446,343],{"class":264},[220,58448,347],{"class":420},[220,58450,359],{"class":264},[220,58452,58453,58455],{"class":222,"line":179},[220,58454,364],{"class":264},[220,58456,58401],{"class":420},[220,58458,58459,58461,58463,58465,58467],{"class":222,"line":389},[220,58460,20482],{"class":226},[220,58462,353],{"class":260},[220,58464,743],{"class":264},[220,58466,24010],{"class":420},[220,58468,749],{"class":264},[220,58470,58471],{"class":222,"line":399},[220,58472,31959],{"class":264},[220,58474,58475,58477,58479],{"class":222,"line":644},[220,58476,2550],{"class":264},[220,58478,2553],{"class":420},[220,58480,386],{"class":264},[220,58482,58483,58485,58487],{"class":222,"line":650},[220,58484,2567],{"class":264},[220,58486,58362],{"class":420},[220,58488,359],{"class":264},[220,58490,58491,58493,58495],{"class":222,"line":656},[220,58492,402],{"class":264},[220,58494,347],{"class":420},[220,58496,359],{"class":264},[212,58498,58499],{"className":2844,"code":58440,"language":2846,"meta":178,"style":178},[99,58500,58501,58509,58515,58525,58529,58537,58545],{"__ignoreMap":178},[220,58502,58503,58505,58507],{"class":222,"line":223},[220,58504,343],{"class":264},[220,58506,347],{"class":420},[220,58508,359],{"class":264},[220,58510,58511,58513],{"class":222,"line":179},[220,58512,364],{"class":264},[220,58514,58401],{"class":420},[220,58516,58517,58519,58521,58523],{"class":222,"line":389},[220,58518,20482],{"class":226},[220,58520,29871],{"class":264},[220,58522,24010],{"class":420},[220,58524,749],{"class":264},[220,58526,58527],{"class":222,"line":399},[220,58528,31959],{"class":264},[220,58530,58531,58533,58535],{"class":222,"line":644},[220,58532,2550],{"class":264},[220,58534,2553],{"class":420},[220,58536,386],{"class":264},[220,58538,58539,58541,58543],{"class":222,"line":650},[220,58540,2567],{"class":264},[220,58542,58362],{"class":420},[220,58544,359],{"class":264},[220,58546,58547,58549,58551],{"class":222,"line":656},[220,58548,402],{"class":264},[220,58550,347],{"class":420},[220,58552,359],{"class":264},[212,58554,58555],{"className":468,"code":58440,"language":469,"meta":178,"style":178},[99,58556,58557,58565,58571,58583,58587,58595,58603],{"__ignoreMap":178},[220,58558,58559,58561,58563],{"class":222,"line":223},[220,58560,343],{"class":264},[220,58562,347],{"class":420},[220,58564,359],{"class":264},[220,58566,58567,58569],{"class":222,"line":179},[220,58568,364],{"class":264},[220,58570,58401],{"class":420},[220,58572,58573,58575,58577,58579,58581],{"class":222,"line":389},[220,58574,20482],{"class":226},[220,58576,353],{"class":260},[220,58578,743],{"class":264},[220,58580,24010],{"class":420},[220,58582,749],{"class":264},[220,58584,58585],{"class":222,"line":399},[220,58586,31959],{"class":264},[220,58588,58589,58591,58593],{"class":222,"line":644},[220,58590,2550],{"class":264},[220,58592,2553],{"class":420},[220,58594,386],{"class":264},[220,58596,58597,58599,58601],{"class":222,"line":650},[220,58598,2567],{"class":264},[220,58600,58362],{"class":420},[220,58602,359],{"class":264},[220,58604,58605,58607,58609],{"class":222,"line":656},[220,58606,402],{"class":264},[220,58608,347],{"class":420},[220,58610,359],{"class":264},[212,58612,58614],{"className":251,"code":58613,"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,58615,58616,58626,58630,58644,58648,58661,58669,58673,58677],{"__ignoreMap":178},[220,58617,58618,58620,58622,58624],{"class":222,"line":223},[220,58619,261],{"class":260},[220,58621,11512],{"class":264},[220,58623,268],{"class":260},[220,58625,4007],{"class":230},[220,58627,58628],{"class":222,"line":179},[220,58629,647],{"emptyLinePlaceholder":194},[220,58631,58632,58634,58636,58638,58640,58642],{"class":222,"line":389},[220,58633,1735],{"class":260},[220,58635,1738],{"class":420},[220,58637,1741],{"class":260},[220,58639,1744],{"class":260},[220,58641,1747],{"class":226},[220,58643,1750],{"class":264},[220,58645,58646],{"class":222,"line":399},[220,58647,1765],{"class":264},[220,58649,58650,58652,58655,58657,58659],{"class":222,"line":644},[220,58651,1770],{"class":264},[220,58653,58654],{"class":230},"'LinearBlur'",[220,58656,32203],{"class":264},[220,58658,24010],{"class":420},[220,58660,7546],{"class":264},[220,58662,58663,58665,58667],{"class":222,"line":650},[220,58664,7014],{"class":264},[220,58666,3206],{"class":230},[220,58668,2465],{"class":264},[220,58670,58671],{"class":222,"line":656},[220,58672,7031],{"class":264},[220,58674,58675],{"class":222,"line":673},[220,58676,1787],{"class":264},[220,58678,58679],{"class":222,"line":682},[220,58680,1792],{"class":264},[1504,58682,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58684},[58685,58686],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":58362,"description":58370},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":58693,"title":367,"body":58694,"category":33063,"componentType":25877,"description":58701,"extension":191,"meta":58885,"navigation":194,"path":58886,"requiresChild":32530,"seo":58887,"stem":58888,"__hash__":58889},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":58695,"toc":58881},[58696,58699,58702,58704,58706,58709,58711,58879],[11,58697,367],{"id":58698},"lineargradient",[15,58700,58701],{},"Create smooth linear color gradients",[31911,58703],{"component":367},[23,58705,31915],{"id":26533},[31917,58707],{":props":58708},"[{\"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,58710,31923],{"id":31922},[246,58712,58713,58742,58770,58798,58826],{":tabs":1557},[212,58714,58716],{"className":334,"code":58715,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,58717,58718,58726,58734],{"__ignoreMap":178},[220,58719,58720,58722,58724],{"class":222,"line":223},[220,58721,343],{"class":264},[220,58723,347],{"class":346},[220,58725,359],{"class":264},[220,58727,58728,58730,58732],{"class":222,"line":179},[220,58729,364],{"class":264},[220,58731,367],{"class":346},[220,58733,386],{"class":264},[220,58735,58736,58738,58740],{"class":222,"line":389},[220,58737,402],{"class":264},[220,58739,347],{"class":346},[220,58741,359],{"class":264},[212,58743,58744],{"className":409,"code":58715,"language":411,"meta":178,"style":178},[99,58745,58746,58754,58762],{"__ignoreMap":178},[220,58747,58748,58750,58752],{"class":222,"line":223},[220,58749,343],{"class":264},[220,58751,347],{"class":420},[220,58753,359],{"class":264},[220,58755,58756,58758,58760],{"class":222,"line":179},[220,58757,364],{"class":264},[220,58759,367],{"class":420},[220,58761,386],{"class":264},[220,58763,58764,58766,58768],{"class":222,"line":389},[220,58765,402],{"class":264},[220,58767,347],{"class":420},[220,58769,359],{"class":264},[212,58771,58772],{"className":2844,"code":58715,"language":2846,"meta":178,"style":178},[99,58773,58774,58782,58790],{"__ignoreMap":178},[220,58775,58776,58778,58780],{"class":222,"line":223},[220,58777,343],{"class":264},[220,58779,347],{"class":420},[220,58781,359],{"class":264},[220,58783,58784,58786,58788],{"class":222,"line":179},[220,58785,364],{"class":264},[220,58787,367],{"class":420},[220,58789,386],{"class":264},[220,58791,58792,58794,58796],{"class":222,"line":389},[220,58793,402],{"class":264},[220,58795,347],{"class":420},[220,58797,359],{"class":264},[212,58799,58800],{"className":468,"code":58715,"language":469,"meta":178,"style":178},[99,58801,58802,58810,58818],{"__ignoreMap":178},[220,58803,58804,58806,58808],{"class":222,"line":223},[220,58805,343],{"class":264},[220,58807,347],{"class":420},[220,58809,359],{"class":264},[220,58811,58812,58814,58816],{"class":222,"line":179},[220,58813,364],{"class":264},[220,58815,367],{"class":420},[220,58817,386],{"class":264},[220,58819,58820,58822,58824],{"class":222,"line":389},[220,58821,402],{"class":264},[220,58823,347],{"class":420},[220,58825,359],{"class":264},[212,58827,58829],{"className":251,"code":58828,"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,58830,58831,58841,58845,58859,58863,58871,58875],{"__ignoreMap":178},[220,58832,58833,58835,58837,58839],{"class":222,"line":223},[220,58834,261],{"class":260},[220,58836,11512],{"class":264},[220,58838,268],{"class":260},[220,58840,4007],{"class":230},[220,58842,58843],{"class":222,"line":179},[220,58844,647],{"emptyLinePlaceholder":194},[220,58846,58847,58849,58851,58853,58855,58857],{"class":222,"line":389},[220,58848,1735],{"class":260},[220,58850,1738],{"class":420},[220,58852,1741],{"class":260},[220,58854,1744],{"class":260},[220,58856,1747],{"class":226},[220,58858,1750],{"class":264},[220,58860,58861],{"class":222,"line":399},[220,58862,1765],{"class":264},[220,58864,58865,58867,58869],{"class":222,"line":644},[220,58866,1770],{"class":264},[220,58868,2462],{"class":230},[220,58870,2465],{"class":264},[220,58872,58873],{"class":222,"line":650},[220,58874,1787],{"class":264},[220,58876,58877],{"class":222,"line":656},[220,58878,1792],{"class":264},[1504,58880,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58882},[58883,58884],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":58701},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":58891,"title":58892,"body":58893,"category":33673,"componentType":25883,"description":58900,"extension":191,"meta":59161,"navigation":194,"path":59162,"requiresChild":194,"seo":59163,"stem":59164,"__hash__":59165},"components\u002Fdocs\u002Fcomponents\u002FLinearWipe.md","LinearWipe",{"type":8,"value":58894,"toc":59157},[58895,58898,58901,58903,58905,58908,58910,59155],[11,58896,58892],{"id":58897},"linearwipe",[15,58899,58900],{},"Wipe the content away along a straight edge with a soft feathered transition",[31911,58902],{"component":58892},[23,58904,31915],{"id":26533},[31917,58906],{":props":58907},"[{\"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,58909,31923],{"id":31922},[246,58911,58912,58957,59001,59045,59089],{":tabs":1557},[212,58913,58915],{"className":334,"code":58914,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearWipe>\n \u003CCircle \u002F>\n \u003C\u002FLinearWipe>\n\u003C\u002FShader>\n",[99,58916,58917,58925,58933,58941,58949],{"__ignoreMap":178},[220,58918,58919,58921,58923],{"class":222,"line":223},[220,58920,343],{"class":264},[220,58922,347],{"class":346},[220,58924,359],{"class":264},[220,58926,58927,58929,58931],{"class":222,"line":179},[220,58928,364],{"class":264},[220,58930,58892],{"class":346},[220,58932,359],{"class":264},[220,58934,58935,58937,58939],{"class":222,"line":389},[220,58936,2550],{"class":264},[220,58938,2553],{"class":346},[220,58940,386],{"class":264},[220,58942,58943,58945,58947],{"class":222,"line":399},[220,58944,2567],{"class":264},[220,58946,58892],{"class":346},[220,58948,359],{"class":264},[220,58950,58951,58953,58955],{"class":222,"line":644},[220,58952,402],{"class":264},[220,58954,347],{"class":346},[220,58956,359],{"class":264},[212,58958,58959],{"className":409,"code":58914,"language":411,"meta":178,"style":178},[99,58960,58961,58969,58977,58985,58993],{"__ignoreMap":178},[220,58962,58963,58965,58967],{"class":222,"line":223},[220,58964,343],{"class":264},[220,58966,347],{"class":420},[220,58968,359],{"class":264},[220,58970,58971,58973,58975],{"class":222,"line":179},[220,58972,364],{"class":264},[220,58974,58892],{"class":420},[220,58976,359],{"class":264},[220,58978,58979,58981,58983],{"class":222,"line":389},[220,58980,2550],{"class":264},[220,58982,2553],{"class":420},[220,58984,386],{"class":264},[220,58986,58987,58989,58991],{"class":222,"line":399},[220,58988,2567],{"class":264},[220,58990,58892],{"class":420},[220,58992,359],{"class":264},[220,58994,58995,58997,58999],{"class":222,"line":644},[220,58996,402],{"class":264},[220,58998,347],{"class":420},[220,59000,359],{"class":264},[212,59002,59003],{"className":2844,"code":58914,"language":2846,"meta":178,"style":178},[99,59004,59005,59013,59021,59029,59037],{"__ignoreMap":178},[220,59006,59007,59009,59011],{"class":222,"line":223},[220,59008,343],{"class":264},[220,59010,347],{"class":420},[220,59012,359],{"class":264},[220,59014,59015,59017,59019],{"class":222,"line":179},[220,59016,364],{"class":264},[220,59018,58892],{"class":420},[220,59020,359],{"class":264},[220,59022,59023,59025,59027],{"class":222,"line":389},[220,59024,2550],{"class":264},[220,59026,2553],{"class":420},[220,59028,386],{"class":264},[220,59030,59031,59033,59035],{"class":222,"line":399},[220,59032,2567],{"class":264},[220,59034,58892],{"class":420},[220,59036,359],{"class":264},[220,59038,59039,59041,59043],{"class":222,"line":644},[220,59040,402],{"class":264},[220,59042,347],{"class":420},[220,59044,359],{"class":264},[212,59046,59047],{"className":468,"code":58914,"language":469,"meta":178,"style":178},[99,59048,59049,59057,59065,59073,59081],{"__ignoreMap":178},[220,59050,59051,59053,59055],{"class":222,"line":223},[220,59052,343],{"class":264},[220,59054,347],{"class":420},[220,59056,359],{"class":264},[220,59058,59059,59061,59063],{"class":222,"line":179},[220,59060,364],{"class":264},[220,59062,58892],{"class":420},[220,59064,359],{"class":264},[220,59066,59067,59069,59071],{"class":222,"line":389},[220,59068,2550],{"class":264},[220,59070,2553],{"class":420},[220,59072,386],{"class":264},[220,59074,59075,59077,59079],{"class":222,"line":399},[220,59076,2567],{"class":264},[220,59078,58892],{"class":420},[220,59080,359],{"class":264},[220,59082,59083,59085,59087],{"class":222,"line":644},[220,59084,402],{"class":264},[220,59086,347],{"class":420},[220,59088,359],{"class":264},[212,59090,59092],{"className":251,"code":59091,"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,59093,59094,59104,59108,59122,59126,59135,59143,59147,59151],{"__ignoreMap":178},[220,59095,59096,59098,59100,59102],{"class":222,"line":223},[220,59097,261],{"class":260},[220,59099,11512],{"class":264},[220,59101,268],{"class":260},[220,59103,4007],{"class":230},[220,59105,59106],{"class":222,"line":179},[220,59107,647],{"emptyLinePlaceholder":194},[220,59109,59110,59112,59114,59116,59118,59120],{"class":222,"line":389},[220,59111,1735],{"class":260},[220,59113,1738],{"class":420},[220,59115,1741],{"class":260},[220,59117,1744],{"class":260},[220,59119,1747],{"class":226},[220,59121,1750],{"class":264},[220,59123,59124],{"class":222,"line":399},[220,59125,1765],{"class":264},[220,59127,59128,59130,59133],{"class":222,"line":644},[220,59129,1770],{"class":264},[220,59131,59132],{"class":230},"'LinearWipe'",[220,59134,7009],{"class":264},[220,59136,59137,59139,59141],{"class":222,"line":650},[220,59138,7014],{"class":264},[220,59140,3206],{"class":230},[220,59142,2465],{"class":264},[220,59144,59145],{"class":222,"line":656},[220,59146,7031],{"class":264},[220,59148,59149],{"class":222,"line":673},[220,59150,1787],{"class":264},[220,59152,59153],{"class":222,"line":682},[220,59154,1792],{"class":264},[1504,59156,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59158},[59159,59160],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flinearwipe",{"title":58892,"description":58900},"docs\u002Fcomponents\u002FLinearWipe","Do2VP6VCJG5V-V0O07nzgUTppBJgUsZZ-ZsoVAOlqwk",{"id":59167,"title":59168,"body":59169,"category":36569,"componentType":25877,"description":59176,"extension":191,"meta":59361,"navigation":194,"path":59362,"requiresChild":32530,"seo":59363,"stem":59364,"__hash__":59365},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":59170,"toc":59357},[59171,59174,59177,59179,59181,59184,59186,59355],[11,59172,59168],{"id":59173},"liquidmetal",[15,59175,59176],{},"Flowing liquid chrome — a molten reflective surface that wraps the shape, sweeping a procedural studio reflection across animated folds with crisp speculars and prismatic edges",[31911,59178],{"component":59168},[23,59180,31915],{"id":26533},[31917,59182],{":props":59183},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#eef0f6\",\"description\":\"The bright tone of the chrome highlights\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#141414\",\"description\":\"The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…)\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How molten the surface is — the depth of the flowing folds that bend the reflection\"},{\"name\":\"ripple\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Scale of the molten folds — higher = smaller, busier ripples\"},{\"name\":\"warp\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Swirl of the flow — domain-warps the folds into liquid curls\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the molten flow and the slowly drifting reflection. 0 pauses.\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Prismatic color fringing along the reflection edges\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"265\",\"description\":\"Direction of the key light for the specular glints, in degrees\"},{\"name\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,59185,31923],{"id":31922},[246,59187,59188,59217,59245,59273,59301],{":tabs":1557},[212,59189,59191],{"className":334,"code":59190,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,59192,59193,59201,59209],{"__ignoreMap":178},[220,59194,59195,59197,59199],{"class":222,"line":223},[220,59196,343],{"class":264},[220,59198,347],{"class":346},[220,59200,359],{"class":264},[220,59202,59203,59205,59207],{"class":222,"line":179},[220,59204,364],{"class":264},[220,59206,59168],{"class":346},[220,59208,386],{"class":264},[220,59210,59211,59213,59215],{"class":222,"line":389},[220,59212,402],{"class":264},[220,59214,347],{"class":346},[220,59216,359],{"class":264},[212,59218,59219],{"className":409,"code":59190,"language":411,"meta":178,"style":178},[99,59220,59221,59229,59237],{"__ignoreMap":178},[220,59222,59223,59225,59227],{"class":222,"line":223},[220,59224,343],{"class":264},[220,59226,347],{"class":420},[220,59228,359],{"class":264},[220,59230,59231,59233,59235],{"class":222,"line":179},[220,59232,364],{"class":264},[220,59234,59168],{"class":420},[220,59236,386],{"class":264},[220,59238,59239,59241,59243],{"class":222,"line":389},[220,59240,402],{"class":264},[220,59242,347],{"class":420},[220,59244,359],{"class":264},[212,59246,59247],{"className":2844,"code":59190,"language":2846,"meta":178,"style":178},[99,59248,59249,59257,59265],{"__ignoreMap":178},[220,59250,59251,59253,59255],{"class":222,"line":223},[220,59252,343],{"class":264},[220,59254,347],{"class":420},[220,59256,359],{"class":264},[220,59258,59259,59261,59263],{"class":222,"line":179},[220,59260,364],{"class":264},[220,59262,59168],{"class":420},[220,59264,386],{"class":264},[220,59266,59267,59269,59271],{"class":222,"line":389},[220,59268,402],{"class":264},[220,59270,347],{"class":420},[220,59272,359],{"class":264},[212,59274,59275],{"className":468,"code":59190,"language":469,"meta":178,"style":178},[99,59276,59277,59285,59293],{"__ignoreMap":178},[220,59278,59279,59281,59283],{"class":222,"line":223},[220,59280,343],{"class":264},[220,59282,347],{"class":420},[220,59284,359],{"class":264},[220,59286,59287,59289,59291],{"class":222,"line":179},[220,59288,364],{"class":264},[220,59290,59168],{"class":420},[220,59292,386],{"class":264},[220,59294,59295,59297,59299],{"class":222,"line":389},[220,59296,402],{"class":264},[220,59298,347],{"class":420},[220,59300,359],{"class":264},[212,59302,59304],{"className":251,"code":59303,"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,59305,59306,59316,59320,59334,59338,59347,59351],{"__ignoreMap":178},[220,59307,59308,59310,59312,59314],{"class":222,"line":223},[220,59309,261],{"class":260},[220,59311,11512],{"class":264},[220,59313,268],{"class":260},[220,59315,4007],{"class":230},[220,59317,59318],{"class":222,"line":179},[220,59319,647],{"emptyLinePlaceholder":194},[220,59321,59322,59324,59326,59328,59330,59332],{"class":222,"line":389},[220,59323,1735],{"class":260},[220,59325,1738],{"class":420},[220,59327,1741],{"class":260},[220,59329,1744],{"class":260},[220,59331,1747],{"class":226},[220,59333,1750],{"class":264},[220,59335,59336],{"class":222,"line":399},[220,59337,1765],{"class":264},[220,59339,59340,59342,59345],{"class":222,"line":644},[220,59341,1770],{"class":264},[220,59343,59344],{"class":230},"'LiquidMetal'",[220,59346,2465],{"class":264},[220,59348,59349],{"class":222,"line":650},[220,59350,1787],{"class":264},[220,59352,59353],{"class":222,"line":656},[220,59354,1792],{"class":264},[1504,59356,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59358},[59359,59360],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":59168,"description":59176},"docs\u002Fcomponents\u002FLiquidMetal","FIowKK2zaHoZPYdYKd0NL-Cnjlyt3SrPsDg1vpwSIog",{"id":59367,"title":59368,"body":59369,"category":35559,"componentType":25883,"description":59376,"extension":191,"meta":59739,"navigation":194,"path":59740,"requiresChild":194,"seo":59741,"stem":59742,"__hash__":59743},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":59370,"toc":59735},[59371,59374,59377,59379,59381,59384,59386,59733],[11,59372,59368],{"id":59373},"liquify",[15,59375,59376],{},"Liquid-like interactive deformation effect",[31911,59378],{"component":59368},[23,59380,31915],{"id":26533},[31917,59382],{":props":59383},"[{\"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,59385,31923],{"id":31922},[246,59387,59388,59452,59523,59589,59659],{":tabs":1557},[212,59389,59391],{"className":334,"code":59390,"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,59392,59393,59401,59408,59416,59424,59428,59436,59444],{"__ignoreMap":178},[220,59394,59395,59397,59399],{"class":222,"line":223},[220,59396,343],{"class":264},[220,59398,347],{"class":346},[220,59400,359],{"class":264},[220,59402,59403,59405],{"class":222,"line":179},[220,59404,364],{"class":264},[220,59406,59407],{"class":346},"Liquify\n",[220,59409,59410,59412,59414],{"class":222,"line":389},[220,59411,20371],{"class":226},[220,59413,353],{"class":264},[220,59415,42349],{"class":230},[220,59417,59418,59420,59422],{"class":222,"line":399},[220,59419,17405],{"class":226},[220,59421,353],{"class":264},[220,59423,36625],{"class":230},[220,59425,59426],{"class":222,"line":644},[220,59427,31959],{"class":264},[220,59429,59430,59432,59434],{"class":222,"line":650},[220,59431,2550],{"class":264},[220,59433,2553],{"class":346},[220,59435,386],{"class":264},[220,59437,59438,59440,59442],{"class":222,"line":656},[220,59439,2567],{"class":264},[220,59441,59368],{"class":346},[220,59443,359],{"class":264},[220,59445,59446,59448,59450],{"class":222,"line":673},[220,59447,402],{"class":264},[220,59449,347],{"class":346},[220,59451,359],{"class":264},[212,59453,59455],{"className":409,"code":59454,"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,59456,59457,59465,59471,59483,59495,59499,59507,59515],{"__ignoreMap":178},[220,59458,59459,59461,59463],{"class":222,"line":223},[220,59460,343],{"class":264},[220,59462,347],{"class":420},[220,59464,359],{"class":264},[220,59466,59467,59469],{"class":222,"line":179},[220,59468,364],{"class":264},[220,59470,59407],{"class":420},[220,59472,59473,59475,59477,59479,59481],{"class":222,"line":389},[220,59474,20482],{"class":226},[220,59476,353],{"class":260},[220,59478,743],{"class":264},[220,59480,23850],{"class":420},[220,59482,749],{"class":264},[220,59484,59485,59487,59489,59491,59493],{"class":222,"line":399},[220,59486,9645],{"class":226},[220,59488,353],{"class":260},[220,59490,743],{"class":264},[220,59492,8677],{"class":420},[220,59494,749],{"class":264},[220,59496,59497],{"class":222,"line":644},[220,59498,31959],{"class":264},[220,59500,59501,59503,59505],{"class":222,"line":650},[220,59502,2550],{"class":264},[220,59504,2553],{"class":420},[220,59506,386],{"class":264},[220,59508,59509,59511,59513],{"class":222,"line":656},[220,59510,2567],{"class":264},[220,59512,59368],{"class":420},[220,59514,359],{"class":264},[220,59516,59517,59519,59521],{"class":222,"line":673},[220,59518,402],{"class":264},[220,59520,347],{"class":420},[220,59522,359],{"class":264},[212,59524,59525],{"className":2844,"code":59454,"language":2846,"meta":178,"style":178},[99,59526,59527,59535,59541,59551,59561,59565,59573,59581],{"__ignoreMap":178},[220,59528,59529,59531,59533],{"class":222,"line":223},[220,59530,343],{"class":264},[220,59532,347],{"class":420},[220,59534,359],{"class":264},[220,59536,59537,59539],{"class":222,"line":179},[220,59538,364],{"class":264},[220,59540,59407],{"class":420},[220,59542,59543,59545,59547,59549],{"class":222,"line":389},[220,59544,20482],{"class":226},[220,59546,29871],{"class":264},[220,59548,23850],{"class":420},[220,59550,749],{"class":264},[220,59552,59553,59555,59557,59559],{"class":222,"line":399},[220,59554,9645],{"class":226},[220,59556,29871],{"class":264},[220,59558,8677],{"class":420},[220,59560,749],{"class":264},[220,59562,59563],{"class":222,"line":644},[220,59564,31959],{"class":264},[220,59566,59567,59569,59571],{"class":222,"line":650},[220,59568,2550],{"class":264},[220,59570,2553],{"class":420},[220,59572,386],{"class":264},[220,59574,59575,59577,59579],{"class":222,"line":656},[220,59576,2567],{"class":264},[220,59578,59368],{"class":420},[220,59580,359],{"class":264},[220,59582,59583,59585,59587],{"class":222,"line":673},[220,59584,402],{"class":264},[220,59586,347],{"class":420},[220,59588,359],{"class":264},[212,59590,59591],{"className":468,"code":59454,"language":469,"meta":178,"style":178},[99,59592,59593,59601,59607,59619,59631,59635,59643,59651],{"__ignoreMap":178},[220,59594,59595,59597,59599],{"class":222,"line":223},[220,59596,343],{"class":264},[220,59598,347],{"class":420},[220,59600,359],{"class":264},[220,59602,59603,59605],{"class":222,"line":179},[220,59604,364],{"class":264},[220,59606,59407],{"class":420},[220,59608,59609,59611,59613,59615,59617],{"class":222,"line":389},[220,59610,20482],{"class":226},[220,59612,353],{"class":260},[220,59614,743],{"class":264},[220,59616,23850],{"class":420},[220,59618,749],{"class":264},[220,59620,59621,59623,59625,59627,59629],{"class":222,"line":399},[220,59622,9645],{"class":226},[220,59624,353],{"class":260},[220,59626,743],{"class":264},[220,59628,8677],{"class":420},[220,59630,749],{"class":264},[220,59632,59633],{"class":222,"line":644},[220,59634,31959],{"class":264},[220,59636,59637,59639,59641],{"class":222,"line":650},[220,59638,2550],{"class":264},[220,59640,2553],{"class":420},[220,59642,386],{"class":264},[220,59644,59645,59647,59649],{"class":222,"line":656},[220,59646,2567],{"class":264},[220,59648,59368],{"class":420},[220,59650,359],{"class":264},[220,59652,59653,59655,59657],{"class":222,"line":673},[220,59654,402],{"class":264},[220,59656,347],{"class":420},[220,59658,359],{"class":264},[212,59660,59662],{"className":251,"code":59661,"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,59663,59664,59674,59678,59692,59696,59713,59721,59725,59729],{"__ignoreMap":178},[220,59665,59666,59668,59670,59672],{"class":222,"line":223},[220,59667,261],{"class":260},[220,59669,11512],{"class":264},[220,59671,268],{"class":260},[220,59673,4007],{"class":230},[220,59675,59676],{"class":222,"line":179},[220,59677,647],{"emptyLinePlaceholder":194},[220,59679,59680,59682,59684,59686,59688,59690],{"class":222,"line":389},[220,59681,1735],{"class":260},[220,59683,1738],{"class":420},[220,59685,1741],{"class":260},[220,59687,1744],{"class":260},[220,59689,1747],{"class":226},[220,59691,1750],{"class":264},[220,59693,59694],{"class":222,"line":399},[220,59695,1765],{"class":264},[220,59697,59698,59700,59703,59705,59707,59709,59711],{"class":222,"line":644},[220,59699,1770],{"class":264},[220,59701,59702],{"class":230},"'Liquify'",[220,59704,32203],{"class":264},[220,59706,23850],{"class":420},[220,59708,6566],{"class":264},[220,59710,8677],{"class":420},[220,59712,7546],{"class":264},[220,59714,59715,59717,59719],{"class":222,"line":650},[220,59716,7014],{"class":264},[220,59718,3206],{"class":230},[220,59720,2465],{"class":264},[220,59722,59723],{"class":222,"line":656},[220,59724,7031],{"class":264},[220,59726,59727],{"class":222,"line":673},[220,59728,1787],{"class":264},[220,59730,59731],{"class":222,"line":682},[220,59732,1792],{"class":264},[1504,59734,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59736},[59737,59738],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":59368,"description":59376},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":59745,"title":59746,"body":59747,"category":35559,"componentType":25877,"description":59754,"extension":191,"meta":59939,"navigation":194,"path":59940,"requiresChild":32530,"seo":59941,"stem":59942,"__hash__":59943},"components\u002Fdocs\u002Fcomponents\u002FMagneticFilings.md","MagneticFilings",{"type":8,"value":59748,"toc":59935},[59749,59752,59755,59757,59759,59762,59764,59933],[11,59750,59746],{"id":59751},"magneticfilings",[15,59753,59754],{},"Thousands of tiny iron filings scattered on paper that swing to align with a magnetic field around the cursor, tracing out the field lines — a dipole whose axis follows the cursor's motion draws the classic two-lobed swirl, and every sweep of the magnet sends a glowing wave of filings flipping and settling",[31911,59756],{"component":59746},[23,59758,31915],{"id":26533},[31917,59760],{":props":59761},"[{\"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,59763,31923],{"id":31922},[246,59765,59766,59795,59823,59851,59879],{":tabs":1557},[212,59767,59769],{"className":334,"code":59768,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMagneticFilings \u002F>\n\u003C\u002FShader>\n",[99,59770,59771,59779,59787],{"__ignoreMap":178},[220,59772,59773,59775,59777],{"class":222,"line":223},[220,59774,343],{"class":264},[220,59776,347],{"class":346},[220,59778,359],{"class":264},[220,59780,59781,59783,59785],{"class":222,"line":179},[220,59782,364],{"class":264},[220,59784,59746],{"class":346},[220,59786,386],{"class":264},[220,59788,59789,59791,59793],{"class":222,"line":389},[220,59790,402],{"class":264},[220,59792,347],{"class":346},[220,59794,359],{"class":264},[212,59796,59797],{"className":409,"code":59768,"language":411,"meta":178,"style":178},[99,59798,59799,59807,59815],{"__ignoreMap":178},[220,59800,59801,59803,59805],{"class":222,"line":223},[220,59802,343],{"class":264},[220,59804,347],{"class":420},[220,59806,359],{"class":264},[220,59808,59809,59811,59813],{"class":222,"line":179},[220,59810,364],{"class":264},[220,59812,59746],{"class":420},[220,59814,386],{"class":264},[220,59816,59817,59819,59821],{"class":222,"line":389},[220,59818,402],{"class":264},[220,59820,347],{"class":420},[220,59822,359],{"class":264},[212,59824,59825],{"className":2844,"code":59768,"language":2846,"meta":178,"style":178},[99,59826,59827,59835,59843],{"__ignoreMap":178},[220,59828,59829,59831,59833],{"class":222,"line":223},[220,59830,343],{"class":264},[220,59832,347],{"class":420},[220,59834,359],{"class":264},[220,59836,59837,59839,59841],{"class":222,"line":179},[220,59838,364],{"class":264},[220,59840,59746],{"class":420},[220,59842,386],{"class":264},[220,59844,59845,59847,59849],{"class":222,"line":389},[220,59846,402],{"class":264},[220,59848,347],{"class":420},[220,59850,359],{"class":264},[212,59852,59853],{"className":468,"code":59768,"language":469,"meta":178,"style":178},[99,59854,59855,59863,59871],{"__ignoreMap":178},[220,59856,59857,59859,59861],{"class":222,"line":223},[220,59858,343],{"class":264},[220,59860,347],{"class":420},[220,59862,359],{"class":264},[220,59864,59865,59867,59869],{"class":222,"line":179},[220,59866,364],{"class":264},[220,59868,59746],{"class":420},[220,59870,386],{"class":264},[220,59872,59873,59875,59877],{"class":222,"line":389},[220,59874,402],{"class":264},[220,59876,347],{"class":420},[220,59878,359],{"class":264},[212,59880,59882],{"className":251,"code":59881,"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,59883,59884,59894,59898,59912,59916,59925,59929],{"__ignoreMap":178},[220,59885,59886,59888,59890,59892],{"class":222,"line":223},[220,59887,261],{"class":260},[220,59889,11512],{"class":264},[220,59891,268],{"class":260},[220,59893,4007],{"class":230},[220,59895,59896],{"class":222,"line":179},[220,59897,647],{"emptyLinePlaceholder":194},[220,59899,59900,59902,59904,59906,59908,59910],{"class":222,"line":389},[220,59901,1735],{"class":260},[220,59903,1738],{"class":420},[220,59905,1741],{"class":260},[220,59907,1744],{"class":260},[220,59909,1747],{"class":226},[220,59911,1750],{"class":264},[220,59913,59914],{"class":222,"line":399},[220,59915,1765],{"class":264},[220,59917,59918,59920,59923],{"class":222,"line":644},[220,59919,1770],{"class":264},[220,59921,59922],{"class":230},"'MagneticFilings'",[220,59924,2465],{"class":264},[220,59926,59927],{"class":222,"line":650},[220,59928,1787],{"class":264},[220,59930,59931],{"class":222,"line":656},[220,59932,1792],{"class":264},[1504,59934,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59936},[59937,59938],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings",{"title":59746,"description":59754},"docs\u002Fcomponents\u002FMagneticFilings","U8PeRAe8_FnYvmQqGfzTNEhVpWkgxxeoKJjn9HVNJaY",{"id":59945,"title":59946,"body":59947,"category":33063,"componentType":25877,"description":59954,"extension":191,"meta":60139,"navigation":194,"path":60140,"requiresChild":32530,"seo":60141,"stem":60142,"__hash__":60143},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":59948,"toc":60135},[59949,59952,59955,59957,59959,59962,59964,60133],[11,59950,59946],{"id":59951},"marble",[15,59953,59954],{},"Classic marble swirl and vein texture using noise-warped sine waves",[31911,59956],{"component":59946},[23,59958,31915],{"id":26533},[31917,59960],{":props":59961},"[{\"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,59963,31923],{"id":31922},[246,59965,59966,59995,60023,60051,60079],{":tabs":1557},[212,59967,59969],{"className":334,"code":59968,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,59970,59971,59979,59987],{"__ignoreMap":178},[220,59972,59973,59975,59977],{"class":222,"line":223},[220,59974,343],{"class":264},[220,59976,347],{"class":346},[220,59978,359],{"class":264},[220,59980,59981,59983,59985],{"class":222,"line":179},[220,59982,364],{"class":264},[220,59984,59946],{"class":346},[220,59986,386],{"class":264},[220,59988,59989,59991,59993],{"class":222,"line":389},[220,59990,402],{"class":264},[220,59992,347],{"class":346},[220,59994,359],{"class":264},[212,59996,59997],{"className":409,"code":59968,"language":411,"meta":178,"style":178},[99,59998,59999,60007,60015],{"__ignoreMap":178},[220,60000,60001,60003,60005],{"class":222,"line":223},[220,60002,343],{"class":264},[220,60004,347],{"class":420},[220,60006,359],{"class":264},[220,60008,60009,60011,60013],{"class":222,"line":179},[220,60010,364],{"class":264},[220,60012,59946],{"class":420},[220,60014,386],{"class":264},[220,60016,60017,60019,60021],{"class":222,"line":389},[220,60018,402],{"class":264},[220,60020,347],{"class":420},[220,60022,359],{"class":264},[212,60024,60025],{"className":2844,"code":59968,"language":2846,"meta":178,"style":178},[99,60026,60027,60035,60043],{"__ignoreMap":178},[220,60028,60029,60031,60033],{"class":222,"line":223},[220,60030,343],{"class":264},[220,60032,347],{"class":420},[220,60034,359],{"class":264},[220,60036,60037,60039,60041],{"class":222,"line":179},[220,60038,364],{"class":264},[220,60040,59946],{"class":420},[220,60042,386],{"class":264},[220,60044,60045,60047,60049],{"class":222,"line":389},[220,60046,402],{"class":264},[220,60048,347],{"class":420},[220,60050,359],{"class":264},[212,60052,60053],{"className":468,"code":59968,"language":469,"meta":178,"style":178},[99,60054,60055,60063,60071],{"__ignoreMap":178},[220,60056,60057,60059,60061],{"class":222,"line":223},[220,60058,343],{"class":264},[220,60060,347],{"class":420},[220,60062,359],{"class":264},[220,60064,60065,60067,60069],{"class":222,"line":179},[220,60066,364],{"class":264},[220,60068,59946],{"class":420},[220,60070,386],{"class":264},[220,60072,60073,60075,60077],{"class":222,"line":389},[220,60074,402],{"class":264},[220,60076,347],{"class":420},[220,60078,359],{"class":264},[212,60080,60082],{"className":251,"code":60081,"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,60083,60084,60094,60098,60112,60116,60125,60129],{"__ignoreMap":178},[220,60085,60086,60088,60090,60092],{"class":222,"line":223},[220,60087,261],{"class":260},[220,60089,11512],{"class":264},[220,60091,268],{"class":260},[220,60093,4007],{"class":230},[220,60095,60096],{"class":222,"line":179},[220,60097,647],{"emptyLinePlaceholder":194},[220,60099,60100,60102,60104,60106,60108,60110],{"class":222,"line":389},[220,60101,1735],{"class":260},[220,60103,1738],{"class":420},[220,60105,1741],{"class":260},[220,60107,1744],{"class":260},[220,60109,1747],{"class":226},[220,60111,1750],{"class":264},[220,60113,60114],{"class":222,"line":399},[220,60115,1765],{"class":264},[220,60117,60118,60120,60123],{"class":222,"line":644},[220,60119,1770],{"class":264},[220,60121,60122],{"class":230},"'Marble'",[220,60124,2465],{"class":264},[220,60126,60127],{"class":222,"line":650},[220,60128,1787],{"class":264},[220,60130,60131],{"class":222,"line":656},[220,60132,1792],{"class":264},[1504,60134,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60136},[60137,60138],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":59946,"description":59954},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":60145,"title":60146,"body":60147,"category":33396,"componentType":25883,"description":60154,"extension":191,"meta":60415,"navigation":194,"path":60416,"requiresChild":194,"seo":60417,"stem":60418,"__hash__":60419},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":60148,"toc":60411},[60149,60152,60155,60157,60159,60162,60164,60409],[11,60150,60146],{"id":60151},"mirror",[15,60153,60154],{},"Mirror content across a line defined by center point and angle",[31911,60156],{"component":60146},[23,60158,31915],{"id":26533},[31917,60160],{":props":60161},"[{\"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,60163,31923],{"id":31922},[246,60165,60166,60211,60255,60299,60343],{":tabs":1557},[212,60167,60169],{"className":334,"code":60168,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,60170,60171,60179,60187,60195,60203],{"__ignoreMap":178},[220,60172,60173,60175,60177],{"class":222,"line":223},[220,60174,343],{"class":264},[220,60176,347],{"class":346},[220,60178,359],{"class":264},[220,60180,60181,60183,60185],{"class":222,"line":179},[220,60182,364],{"class":264},[220,60184,60146],{"class":346},[220,60186,359],{"class":264},[220,60188,60189,60191,60193],{"class":222,"line":389},[220,60190,2550],{"class":264},[220,60192,2553],{"class":346},[220,60194,386],{"class":264},[220,60196,60197,60199,60201],{"class":222,"line":399},[220,60198,2567],{"class":264},[220,60200,60146],{"class":346},[220,60202,359],{"class":264},[220,60204,60205,60207,60209],{"class":222,"line":644},[220,60206,402],{"class":264},[220,60208,347],{"class":346},[220,60210,359],{"class":264},[212,60212,60213],{"className":409,"code":60168,"language":411,"meta":178,"style":178},[99,60214,60215,60223,60231,60239,60247],{"__ignoreMap":178},[220,60216,60217,60219,60221],{"class":222,"line":223},[220,60218,343],{"class":264},[220,60220,347],{"class":420},[220,60222,359],{"class":264},[220,60224,60225,60227,60229],{"class":222,"line":179},[220,60226,364],{"class":264},[220,60228,60146],{"class":420},[220,60230,359],{"class":264},[220,60232,60233,60235,60237],{"class":222,"line":389},[220,60234,2550],{"class":264},[220,60236,2553],{"class":420},[220,60238,386],{"class":264},[220,60240,60241,60243,60245],{"class":222,"line":399},[220,60242,2567],{"class":264},[220,60244,60146],{"class":420},[220,60246,359],{"class":264},[220,60248,60249,60251,60253],{"class":222,"line":644},[220,60250,402],{"class":264},[220,60252,347],{"class":420},[220,60254,359],{"class":264},[212,60256,60257],{"className":2844,"code":60168,"language":2846,"meta":178,"style":178},[99,60258,60259,60267,60275,60283,60291],{"__ignoreMap":178},[220,60260,60261,60263,60265],{"class":222,"line":223},[220,60262,343],{"class":264},[220,60264,347],{"class":420},[220,60266,359],{"class":264},[220,60268,60269,60271,60273],{"class":222,"line":179},[220,60270,364],{"class":264},[220,60272,60146],{"class":420},[220,60274,359],{"class":264},[220,60276,60277,60279,60281],{"class":222,"line":389},[220,60278,2550],{"class":264},[220,60280,2553],{"class":420},[220,60282,386],{"class":264},[220,60284,60285,60287,60289],{"class":222,"line":399},[220,60286,2567],{"class":264},[220,60288,60146],{"class":420},[220,60290,359],{"class":264},[220,60292,60293,60295,60297],{"class":222,"line":644},[220,60294,402],{"class":264},[220,60296,347],{"class":420},[220,60298,359],{"class":264},[212,60300,60301],{"className":468,"code":60168,"language":469,"meta":178,"style":178},[99,60302,60303,60311,60319,60327,60335],{"__ignoreMap":178},[220,60304,60305,60307,60309],{"class":222,"line":223},[220,60306,343],{"class":264},[220,60308,347],{"class":420},[220,60310,359],{"class":264},[220,60312,60313,60315,60317],{"class":222,"line":179},[220,60314,364],{"class":264},[220,60316,60146],{"class":420},[220,60318,359],{"class":264},[220,60320,60321,60323,60325],{"class":222,"line":389},[220,60322,2550],{"class":264},[220,60324,2553],{"class":420},[220,60326,386],{"class":264},[220,60328,60329,60331,60333],{"class":222,"line":399},[220,60330,2567],{"class":264},[220,60332,60146],{"class":420},[220,60334,359],{"class":264},[220,60336,60337,60339,60341],{"class":222,"line":644},[220,60338,402],{"class":264},[220,60340,347],{"class":420},[220,60342,359],{"class":264},[212,60344,60346],{"className":251,"code":60345,"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,60347,60348,60358,60362,60376,60380,60389,60397,60401,60405],{"__ignoreMap":178},[220,60349,60350,60352,60354,60356],{"class":222,"line":223},[220,60351,261],{"class":260},[220,60353,11512],{"class":264},[220,60355,268],{"class":260},[220,60357,4007],{"class":230},[220,60359,60360],{"class":222,"line":179},[220,60361,647],{"emptyLinePlaceholder":194},[220,60363,60364,60366,60368,60370,60372,60374],{"class":222,"line":389},[220,60365,1735],{"class":260},[220,60367,1738],{"class":420},[220,60369,1741],{"class":260},[220,60371,1744],{"class":260},[220,60373,1747],{"class":226},[220,60375,1750],{"class":264},[220,60377,60378],{"class":222,"line":399},[220,60379,1765],{"class":264},[220,60381,60382,60384,60387],{"class":222,"line":644},[220,60383,1770],{"class":264},[220,60385,60386],{"class":230},"'Mirror'",[220,60388,7009],{"class":264},[220,60390,60391,60393,60395],{"class":222,"line":650},[220,60392,7014],{"class":264},[220,60394,3206],{"class":230},[220,60396,2465],{"class":264},[220,60398,60399],{"class":222,"line":656},[220,60400,7031],{"class":264},[220,60402,60403],{"class":222,"line":673},[220,60404,1787],{"class":264},[220,60406,60407],{"class":222,"line":682},[220,60408,1792],{"class":264},[1504,60410,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60412},[60413,60414],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":60146,"description":60154},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":60421,"title":60422,"body":60423,"category":33063,"componentType":25877,"description":60430,"extension":191,"meta":60615,"navigation":194,"path":60616,"requiresChild":32530,"seo":60617,"stem":60618,"__hash__":60619},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":60424,"toc":60611},[60425,60428,60431,60433,60435,60438,60440,60609],[11,60426,60422],{"id":60427},"multipointgradient",[15,60429,60430],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[31911,60432],{"component":60422},[23,60434,31915],{"id":26533},[31917,60436],{":props":60437},"[{\"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,60439,31923],{"id":31922},[246,60441,60442,60471,60499,60527,60555],{":tabs":1557},[212,60443,60445],{"className":334,"code":60444,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,60446,60447,60455,60463],{"__ignoreMap":178},[220,60448,60449,60451,60453],{"class":222,"line":223},[220,60450,343],{"class":264},[220,60452,347],{"class":346},[220,60454,359],{"class":264},[220,60456,60457,60459,60461],{"class":222,"line":179},[220,60458,364],{"class":264},[220,60460,60422],{"class":346},[220,60462,386],{"class":264},[220,60464,60465,60467,60469],{"class":222,"line":389},[220,60466,402],{"class":264},[220,60468,347],{"class":346},[220,60470,359],{"class":264},[212,60472,60473],{"className":409,"code":60444,"language":411,"meta":178,"style":178},[99,60474,60475,60483,60491],{"__ignoreMap":178},[220,60476,60477,60479,60481],{"class":222,"line":223},[220,60478,343],{"class":264},[220,60480,347],{"class":420},[220,60482,359],{"class":264},[220,60484,60485,60487,60489],{"class":222,"line":179},[220,60486,364],{"class":264},[220,60488,60422],{"class":420},[220,60490,386],{"class":264},[220,60492,60493,60495,60497],{"class":222,"line":389},[220,60494,402],{"class":264},[220,60496,347],{"class":420},[220,60498,359],{"class":264},[212,60500,60501],{"className":2844,"code":60444,"language":2846,"meta":178,"style":178},[99,60502,60503,60511,60519],{"__ignoreMap":178},[220,60504,60505,60507,60509],{"class":222,"line":223},[220,60506,343],{"class":264},[220,60508,347],{"class":420},[220,60510,359],{"class":264},[220,60512,60513,60515,60517],{"class":222,"line":179},[220,60514,364],{"class":264},[220,60516,60422],{"class":420},[220,60518,386],{"class":264},[220,60520,60521,60523,60525],{"class":222,"line":389},[220,60522,402],{"class":264},[220,60524,347],{"class":420},[220,60526,359],{"class":264},[212,60528,60529],{"className":468,"code":60444,"language":469,"meta":178,"style":178},[99,60530,60531,60539,60547],{"__ignoreMap":178},[220,60532,60533,60535,60537],{"class":222,"line":223},[220,60534,343],{"class":264},[220,60536,347],{"class":420},[220,60538,359],{"class":264},[220,60540,60541,60543,60545],{"class":222,"line":179},[220,60542,364],{"class":264},[220,60544,60422],{"class":420},[220,60546,386],{"class":264},[220,60548,60549,60551,60553],{"class":222,"line":389},[220,60550,402],{"class":264},[220,60552,347],{"class":420},[220,60554,359],{"class":264},[212,60556,60558],{"className":251,"code":60557,"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,60559,60560,60570,60574,60588,60592,60601,60605],{"__ignoreMap":178},[220,60561,60562,60564,60566,60568],{"class":222,"line":223},[220,60563,261],{"class":260},[220,60565,11512],{"class":264},[220,60567,268],{"class":260},[220,60569,4007],{"class":230},[220,60571,60572],{"class":222,"line":179},[220,60573,647],{"emptyLinePlaceholder":194},[220,60575,60576,60578,60580,60582,60584,60586],{"class":222,"line":389},[220,60577,1735],{"class":260},[220,60579,1738],{"class":420},[220,60581,1741],{"class":260},[220,60583,1744],{"class":260},[220,60585,1747],{"class":226},[220,60587,1750],{"class":264},[220,60589,60590],{"class":222,"line":399},[220,60591,1765],{"class":264},[220,60593,60594,60596,60599],{"class":222,"line":644},[220,60595,1770],{"class":264},[220,60597,60598],{"class":230},"'MultiPointGradient'",[220,60600,2465],{"class":264},[220,60602,60603],{"class":222,"line":650},[220,60604,1787],{"class":264},[220,60606,60607],{"class":222,"line":656},[220,60608,1792],{"class":264},[1504,60610,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60612},[60613,60614],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":60422,"description":60430},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":60621,"title":20980,"body":60622,"category":36569,"componentType":25877,"description":60629,"extension":191,"meta":60909,"navigation":194,"path":60910,"requiresChild":32530,"seo":60911,"stem":60912,"__hash__":60913},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":60623,"toc":60905},[60624,60627,60630,60632,60634,60637,60639,60903],[11,60625,20980],{"id":60626},"neon",[15,60628,60629],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[31911,60631],{"component":20980},[23,60633,31915],{"id":26533},[31917,60635],{":props":60636},"[{\"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,60638,31923],{"id":31922},[246,60640,60641,60691,60743,60791,60841],{":tabs":1557},[212,60642,60644],{"className":334,"code":60643,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,60645,60646,60654,60661,60670,60679,60683],{"__ignoreMap":178},[220,60647,60648,60650,60652],{"class":222,"line":223},[220,60649,343],{"class":264},[220,60651,347],{"class":346},[220,60653,359],{"class":264},[220,60655,60656,60658],{"class":222,"line":179},[220,60657,364],{"class":264},[220,60659,60660],{"class":346},"Neon\n",[220,60662,60663,60665,60667],{"class":222,"line":389},[220,60664,9635],{"class":226},[220,60666,353],{"class":264},[220,60668,60669],{"class":230},"\"#00ddff\"\n",[220,60671,60672,60674,60676],{"class":222,"line":399},[220,60673,20371],{"class":226},[220,60675,353],{"class":264},[220,60677,60678],{"class":230},"\"1.5\"\n",[220,60680,60681],{"class":222,"line":644},[220,60682,1234],{"class":264},[220,60684,60685,60687,60689],{"class":222,"line":650},[220,60686,402],{"class":264},[220,60688,347],{"class":346},[220,60690,359],{"class":264},[212,60692,60694],{"className":409,"code":60693,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,60695,60696,60704,60710,60718,60731,60735],{"__ignoreMap":178},[220,60697,60698,60700,60702],{"class":222,"line":223},[220,60699,343],{"class":264},[220,60701,347],{"class":420},[220,60703,359],{"class":264},[220,60705,60706,60708],{"class":222,"line":179},[220,60707,364],{"class":264},[220,60709,60660],{"class":420},[220,60711,60712,60714,60716],{"class":222,"line":389},[220,60713,9635],{"class":226},[220,60715,353],{"class":260},[220,60717,60669],{"class":230},[220,60719,60720,60722,60724,60726,60729],{"class":222,"line":399},[220,60721,20482],{"class":226},[220,60723,353],{"class":260},[220,60725,743],{"class":264},[220,60727,60728],{"class":420},"1.5",[220,60730,749],{"class":264},[220,60732,60733],{"class":222,"line":644},[220,60734,1234],{"class":264},[220,60736,60737,60739,60741],{"class":222,"line":650},[220,60738,402],{"class":264},[220,60740,347],{"class":420},[220,60742,359],{"class":264},[212,60744,60745],{"className":2844,"code":60693,"language":2846,"meta":178,"style":178},[99,60746,60747,60755,60761,60769,60779,60783],{"__ignoreMap":178},[220,60748,60749,60751,60753],{"class":222,"line":223},[220,60750,343],{"class":264},[220,60752,347],{"class":420},[220,60754,359],{"class":264},[220,60756,60757,60759],{"class":222,"line":179},[220,60758,364],{"class":264},[220,60760,60660],{"class":420},[220,60762,60763,60765,60767],{"class":222,"line":389},[220,60764,9635],{"class":226},[220,60766,353],{"class":264},[220,60768,60669],{"class":230},[220,60770,60771,60773,60775,60777],{"class":222,"line":399},[220,60772,20482],{"class":226},[220,60774,29871],{"class":264},[220,60776,60728],{"class":420},[220,60778,749],{"class":264},[220,60780,60781],{"class":222,"line":644},[220,60782,1234],{"class":264},[220,60784,60785,60787,60789],{"class":222,"line":650},[220,60786,402],{"class":264},[220,60788,347],{"class":420},[220,60790,359],{"class":264},[212,60792,60793],{"className":468,"code":60693,"language":469,"meta":178,"style":178},[99,60794,60795,60803,60809,60817,60829,60833],{"__ignoreMap":178},[220,60796,60797,60799,60801],{"class":222,"line":223},[220,60798,343],{"class":264},[220,60800,347],{"class":420},[220,60802,359],{"class":264},[220,60804,60805,60807],{"class":222,"line":179},[220,60806,364],{"class":264},[220,60808,60660],{"class":420},[220,60810,60811,60813,60815],{"class":222,"line":389},[220,60812,9635],{"class":226},[220,60814,353],{"class":260},[220,60816,60669],{"class":230},[220,60818,60819,60821,60823,60825,60827],{"class":222,"line":399},[220,60820,20482],{"class":226},[220,60822,353],{"class":260},[220,60824,743],{"class":264},[220,60826,60728],{"class":420},[220,60828,749],{"class":264},[220,60830,60831],{"class":222,"line":644},[220,60832,1234],{"class":264},[220,60834,60835,60837,60839],{"class":222,"line":650},[220,60836,402],{"class":264},[220,60838,347],{"class":420},[220,60840,359],{"class":264},[212,60842,60844],{"className":251,"code":60843,"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,60845,60846,60856,60860,60874,60878,60895,60899],{"__ignoreMap":178},[220,60847,60848,60850,60852,60854],{"class":222,"line":223},[220,60849,261],{"class":260},[220,60851,11512],{"class":264},[220,60853,268],{"class":260},[220,60855,4007],{"class":230},[220,60857,60858],{"class":222,"line":179},[220,60859,647],{"emptyLinePlaceholder":194},[220,60861,60862,60864,60866,60868,60870,60872],{"class":222,"line":389},[220,60863,1735],{"class":260},[220,60865,1738],{"class":420},[220,60867,1741],{"class":260},[220,60869,1744],{"class":260},[220,60871,1747],{"class":226},[220,60873,1750],{"class":264},[220,60875,60876],{"class":222,"line":399},[220,60877,1765],{"class":264},[220,60879,60880,60882,60884,60886,60889,60891,60893],{"class":222,"line":644},[220,60881,1770],{"class":264},[220,60883,21587],{"class":230},[220,60885,1776],{"class":264},[220,60887,60888],{"class":230},"'#00ddff'",[220,60890,45203],{"class":264},[220,60892,60728],{"class":420},[220,60894,1782],{"class":264},[220,60896,60897],{"class":222,"line":650},[220,60898,1787],{"class":264},[220,60900,60901],{"class":222,"line":656},[220,60902,1792],{"class":264},[1504,60904,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60906},[60907,60908],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":20980,"description":60629},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":60915,"title":60916,"body":60917,"category":33673,"componentType":25883,"description":60924,"extension":191,"meta":61185,"navigation":194,"path":61186,"requiresChild":194,"seo":61187,"stem":61188,"__hash__":61189},"components\u002Fdocs\u002Fcomponents\u002FNoiseDissolve.md","NoiseDissolve",{"type":8,"value":60918,"toc":61181},[60919,60922,60925,60927,60929,60932,60934,61179],[11,60920,60916],{"id":60921},"noisedissolve",[15,60923,60924],{},"Dissolve the content away through an organic noise pattern",[31911,60926],{"component":60916},[23,60928,31915],{"id":26533},[31917,60930],{":props":60931},"[{\"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,60933,31923],{"id":31922},[246,60935,60936,60981,61025,61069,61113],{":tabs":1557},[212,60937,60939],{"className":334,"code":60938,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNoiseDissolve>\n \u003CCircle \u002F>\n \u003C\u002FNoiseDissolve>\n\u003C\u002FShader>\n",[99,60940,60941,60949,60957,60965,60973],{"__ignoreMap":178},[220,60942,60943,60945,60947],{"class":222,"line":223},[220,60944,343],{"class":264},[220,60946,347],{"class":346},[220,60948,359],{"class":264},[220,60950,60951,60953,60955],{"class":222,"line":179},[220,60952,364],{"class":264},[220,60954,60916],{"class":346},[220,60956,359],{"class":264},[220,60958,60959,60961,60963],{"class":222,"line":389},[220,60960,2550],{"class":264},[220,60962,2553],{"class":346},[220,60964,386],{"class":264},[220,60966,60967,60969,60971],{"class":222,"line":399},[220,60968,2567],{"class":264},[220,60970,60916],{"class":346},[220,60972,359],{"class":264},[220,60974,60975,60977,60979],{"class":222,"line":644},[220,60976,402],{"class":264},[220,60978,347],{"class":346},[220,60980,359],{"class":264},[212,60982,60983],{"className":409,"code":60938,"language":411,"meta":178,"style":178},[99,60984,60985,60993,61001,61009,61017],{"__ignoreMap":178},[220,60986,60987,60989,60991],{"class":222,"line":223},[220,60988,343],{"class":264},[220,60990,347],{"class":420},[220,60992,359],{"class":264},[220,60994,60995,60997,60999],{"class":222,"line":179},[220,60996,364],{"class":264},[220,60998,60916],{"class":420},[220,61000,359],{"class":264},[220,61002,61003,61005,61007],{"class":222,"line":389},[220,61004,2550],{"class":264},[220,61006,2553],{"class":420},[220,61008,386],{"class":264},[220,61010,61011,61013,61015],{"class":222,"line":399},[220,61012,2567],{"class":264},[220,61014,60916],{"class":420},[220,61016,359],{"class":264},[220,61018,61019,61021,61023],{"class":222,"line":644},[220,61020,402],{"class":264},[220,61022,347],{"class":420},[220,61024,359],{"class":264},[212,61026,61027],{"className":2844,"code":60938,"language":2846,"meta":178,"style":178},[99,61028,61029,61037,61045,61053,61061],{"__ignoreMap":178},[220,61030,61031,61033,61035],{"class":222,"line":223},[220,61032,343],{"class":264},[220,61034,347],{"class":420},[220,61036,359],{"class":264},[220,61038,61039,61041,61043],{"class":222,"line":179},[220,61040,364],{"class":264},[220,61042,60916],{"class":420},[220,61044,359],{"class":264},[220,61046,61047,61049,61051],{"class":222,"line":389},[220,61048,2550],{"class":264},[220,61050,2553],{"class":420},[220,61052,386],{"class":264},[220,61054,61055,61057,61059],{"class":222,"line":399},[220,61056,2567],{"class":264},[220,61058,60916],{"class":420},[220,61060,359],{"class":264},[220,61062,61063,61065,61067],{"class":222,"line":644},[220,61064,402],{"class":264},[220,61066,347],{"class":420},[220,61068,359],{"class":264},[212,61070,61071],{"className":468,"code":60938,"language":469,"meta":178,"style":178},[99,61072,61073,61081,61089,61097,61105],{"__ignoreMap":178},[220,61074,61075,61077,61079],{"class":222,"line":223},[220,61076,343],{"class":264},[220,61078,347],{"class":420},[220,61080,359],{"class":264},[220,61082,61083,61085,61087],{"class":222,"line":179},[220,61084,364],{"class":264},[220,61086,60916],{"class":420},[220,61088,359],{"class":264},[220,61090,61091,61093,61095],{"class":222,"line":389},[220,61092,2550],{"class":264},[220,61094,2553],{"class":420},[220,61096,386],{"class":264},[220,61098,61099,61101,61103],{"class":222,"line":399},[220,61100,2567],{"class":264},[220,61102,60916],{"class":420},[220,61104,359],{"class":264},[220,61106,61107,61109,61111],{"class":222,"line":644},[220,61108,402],{"class":264},[220,61110,347],{"class":420},[220,61112,359],{"class":264},[212,61114,61116],{"className":251,"code":61115,"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,61117,61118,61128,61132,61146,61150,61159,61167,61171,61175],{"__ignoreMap":178},[220,61119,61120,61122,61124,61126],{"class":222,"line":223},[220,61121,261],{"class":260},[220,61123,11512],{"class":264},[220,61125,268],{"class":260},[220,61127,4007],{"class":230},[220,61129,61130],{"class":222,"line":179},[220,61131,647],{"emptyLinePlaceholder":194},[220,61133,61134,61136,61138,61140,61142,61144],{"class":222,"line":389},[220,61135,1735],{"class":260},[220,61137,1738],{"class":420},[220,61139,1741],{"class":260},[220,61141,1744],{"class":260},[220,61143,1747],{"class":226},[220,61145,1750],{"class":264},[220,61147,61148],{"class":222,"line":399},[220,61149,1765],{"class":264},[220,61151,61152,61154,61157],{"class":222,"line":644},[220,61153,1770],{"class":264},[220,61155,61156],{"class":230},"'NoiseDissolve'",[220,61158,7009],{"class":264},[220,61160,61161,61163,61165],{"class":222,"line":650},[220,61162,7014],{"class":264},[220,61164,3206],{"class":230},[220,61166,2465],{"class":264},[220,61168,61169],{"class":222,"line":656},[220,61170,7031],{"class":264},[220,61172,61173],{"class":222,"line":673},[220,61174,1787],{"class":264},[220,61176,61177],{"class":222,"line":682},[220,61178,1792],{"class":264},[1504,61180,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":61182},[61183,61184],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fnoisedissolve",{"title":60916,"description":60924},"docs\u002Fcomponents\u002FNoiseDissolve","F_aVeqJAkNkkZ_aCCg745ZVvogpO7CXcGAt4J3G8JeQ",{"id":61191,"title":61192,"body":61193,"category":32806,"componentType":25883,"description":61200,"extension":191,"meta":61461,"navigation":194,"path":61462,"requiresChild":194,"seo":61463,"stem":61464,"__hash__":61465},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":61194,"toc":61457},[61195,61198,61201,61203,61205,61208,61210,61455],[11,61196,61192],{"id":61197},"objecttracker",[15,61199,61200],{},"Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",[31911,61202],{"component":61192},[23,61204,31915],{"id":26533},[31917,61206],{":props":61207},"[{\"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,61209,31923],{"id":31922},[246,61211,61212,61257,61301,61345,61389],{":tabs":1557},[212,61213,61215],{"className":334,"code":61214,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,61216,61217,61225,61233,61241,61249],{"__ignoreMap":178},[220,61218,61219,61221,61223],{"class":222,"line":223},[220,61220,343],{"class":264},[220,61222,347],{"class":346},[220,61224,359],{"class":264},[220,61226,61227,61229,61231],{"class":222,"line":179},[220,61228,364],{"class":264},[220,61230,61192],{"class":346},[220,61232,359],{"class":264},[220,61234,61235,61237,61239],{"class":222,"line":389},[220,61236,2550],{"class":264},[220,61238,2553],{"class":346},[220,61240,386],{"class":264},[220,61242,61243,61245,61247],{"class":222,"line":399},[220,61244,2567],{"class":264},[220,61246,61192],{"class":346},[220,61248,359],{"class":264},[220,61250,61251,61253,61255],{"class":222,"line":644},[220,61252,402],{"class":264},[220,61254,347],{"class":346},[220,61256,359],{"class":264},[212,61258,61259],{"className":409,"code":61214,"language":411,"meta":178,"style":178},[99,61260,61261,61269,61277,61285,61293],{"__ignoreMap":178},[220,61262,61263,61265,61267],{"class":222,"line":223},[220,61264,343],{"class":264},[220,61266,347],{"class":420},[220,61268,359],{"class":264},[220,61270,61271,61273,61275],{"class":222,"line":179},[220,61272,364],{"class":264},[220,61274,61192],{"class":420},[220,61276,359],{"class":264},[220,61278,61279,61281,61283],{"class":222,"line":389},[220,61280,2550],{"class":264},[220,61282,2553],{"class":420},[220,61284,386],{"class":264},[220,61286,61287,61289,61291],{"class":222,"line":399},[220,61288,2567],{"class":264},[220,61290,61192],{"class":420},[220,61292,359],{"class":264},[220,61294,61295,61297,61299],{"class":222,"line":644},[220,61296,402],{"class":264},[220,61298,347],{"class":420},[220,61300,359],{"class":264},[212,61302,61303],{"className":2844,"code":61214,"language":2846,"meta":178,"style":178},[99,61304,61305,61313,61321,61329,61337],{"__ignoreMap":178},[220,61306,61307,61309,61311],{"class":222,"line":223},[220,61308,343],{"class":264},[220,61310,347],{"class":420},[220,61312,359],{"class":264},[220,61314,61315,61317,61319],{"class":222,"line":179},[220,61316,364],{"class":264},[220,61318,61192],{"class":420},[220,61320,359],{"class":264},[220,61322,61323,61325,61327],{"class":222,"line":389},[220,61324,2550],{"class":264},[220,61326,2553],{"class":420},[220,61328,386],{"class":264},[220,61330,61331,61333,61335],{"class":222,"line":399},[220,61332,2567],{"class":264},[220,61334,61192],{"class":420},[220,61336,359],{"class":264},[220,61338,61339,61341,61343],{"class":222,"line":644},[220,61340,402],{"class":264},[220,61342,347],{"class":420},[220,61344,359],{"class":264},[212,61346,61347],{"className":468,"code":61214,"language":469,"meta":178,"style":178},[99,61348,61349,61357,61365,61373,61381],{"__ignoreMap":178},[220,61350,61351,61353,61355],{"class":222,"line":223},[220,61352,343],{"class":264},[220,61354,347],{"class":420},[220,61356,359],{"class":264},[220,61358,61359,61361,61363],{"class":222,"line":179},[220,61360,364],{"class":264},[220,61362,61192],{"class":420},[220,61364,359],{"class":264},[220,61366,61367,61369,61371],{"class":222,"line":389},[220,61368,2550],{"class":264},[220,61370,2553],{"class":420},[220,61372,386],{"class":264},[220,61374,61375,61377,61379],{"class":222,"line":399},[220,61376,2567],{"class":264},[220,61378,61192],{"class":420},[220,61380,359],{"class":264},[220,61382,61383,61385,61387],{"class":222,"line":644},[220,61384,402],{"class":264},[220,61386,347],{"class":420},[220,61388,359],{"class":264},[212,61390,61392],{"className":251,"code":61391,"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,61393,61394,61404,61408,61422,61426,61435,61443,61447,61451],{"__ignoreMap":178},[220,61395,61396,61398,61400,61402],{"class":222,"line":223},[220,61397,261],{"class":260},[220,61399,11512],{"class":264},[220,61401,268],{"class":260},[220,61403,4007],{"class":230},[220,61405,61406],{"class":222,"line":179},[220,61407,647],{"emptyLinePlaceholder":194},[220,61409,61410,61412,61414,61416,61418,61420],{"class":222,"line":389},[220,61411,1735],{"class":260},[220,61413,1738],{"class":420},[220,61415,1741],{"class":260},[220,61417,1744],{"class":260},[220,61419,1747],{"class":226},[220,61421,1750],{"class":264},[220,61423,61424],{"class":222,"line":399},[220,61425,1765],{"class":264},[220,61427,61428,61430,61433],{"class":222,"line":644},[220,61429,1770],{"class":264},[220,61431,61432],{"class":230},"'ObjectTracker'",[220,61434,7009],{"class":264},[220,61436,61437,61439,61441],{"class":222,"line":650},[220,61438,7014],{"class":264},[220,61440,3206],{"class":230},[220,61442,2465],{"class":264},[220,61444,61445],{"class":222,"line":656},[220,61446,7031],{"class":264},[220,61448,61449],{"class":222,"line":673},[220,61450,1787],{"class":264},[220,61452,61453],{"class":222,"line":682},[220,61454,1792],{"class":264},[1504,61456,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":61458},[61459,61460],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":61192,"description":61200},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":61467,"title":61468,"body":61469,"category":33673,"componentType":25883,"description":61476,"extension":191,"meta":61794,"navigation":194,"path":61795,"requiresChild":194,"seo":61796,"stem":61797,"__hash__":61798},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":61470,"toc":61790},[61471,61474,61477,61479,61481,61484,61486,61788],[11,61472,61468],{"id":61473},"pagepeel",[15,61475,61476],{},"Curl the content up from a corner like a peeling page",[31911,61478],{"component":61468},[23,61480,31915],{"id":26533},[31917,61482],{":props":61483},"[{\"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,61485,31923],{"id":31922},[246,61487,61488,61545,61604,61660,61718],{":tabs":1557},[212,61489,61491],{"className":334,"code":61490,"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,61492,61493,61501,61508,61517,61521,61529,61537],{"__ignoreMap":178},[220,61494,61495,61497,61499],{"class":222,"line":223},[220,61496,343],{"class":264},[220,61498,347],{"class":346},[220,61500,359],{"class":264},[220,61502,61503,61505],{"class":222,"line":179},[220,61504,364],{"class":264},[220,61506,61507],{"class":346},"PagePeel\n",[220,61509,61510,61512,61514],{"class":222,"line":389},[220,61511,17405],{"class":226},[220,61513,353],{"class":264},[220,61515,61516],{"class":230},"\"0.2\"\n",[220,61518,61519],{"class":222,"line":399},[220,61520,31959],{"class":264},[220,61522,61523,61525,61527],{"class":222,"line":644},[220,61524,2550],{"class":264},[220,61526,2553],{"class":346},[220,61528,386],{"class":264},[220,61530,61531,61533,61535],{"class":222,"line":650},[220,61532,2567],{"class":264},[220,61534,61468],{"class":346},[220,61536,359],{"class":264},[220,61538,61539,61541,61543],{"class":222,"line":656},[220,61540,402],{"class":264},[220,61542,347],{"class":346},[220,61544,359],{"class":264},[212,61546,61548],{"className":409,"code":61547,"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,61549,61550,61558,61564,61576,61580,61588,61596],{"__ignoreMap":178},[220,61551,61552,61554,61556],{"class":222,"line":223},[220,61553,343],{"class":264},[220,61555,347],{"class":420},[220,61557,359],{"class":264},[220,61559,61560,61562],{"class":222,"line":179},[220,61561,364],{"class":264},[220,61563,61507],{"class":420},[220,61565,61566,61568,61570,61572,61574],{"class":222,"line":389},[220,61567,9645],{"class":226},[220,61569,353],{"class":260},[220,61571,743],{"class":264},[220,61573,16976],{"class":420},[220,61575,749],{"class":264},[220,61577,61578],{"class":222,"line":399},[220,61579,31959],{"class":264},[220,61581,61582,61584,61586],{"class":222,"line":644},[220,61583,2550],{"class":264},[220,61585,2553],{"class":420},[220,61587,386],{"class":264},[220,61589,61590,61592,61594],{"class":222,"line":650},[220,61591,2567],{"class":264},[220,61593,61468],{"class":420},[220,61595,359],{"class":264},[220,61597,61598,61600,61602],{"class":222,"line":656},[220,61599,402],{"class":264},[220,61601,347],{"class":420},[220,61603,359],{"class":264},[212,61605,61606],{"className":2844,"code":61547,"language":2846,"meta":178,"style":178},[99,61607,61608,61616,61622,61632,61636,61644,61652],{"__ignoreMap":178},[220,61609,61610,61612,61614],{"class":222,"line":223},[220,61611,343],{"class":264},[220,61613,347],{"class":420},[220,61615,359],{"class":264},[220,61617,61618,61620],{"class":222,"line":179},[220,61619,364],{"class":264},[220,61621,61507],{"class":420},[220,61623,61624,61626,61628,61630],{"class":222,"line":389},[220,61625,9645],{"class":226},[220,61627,29871],{"class":264},[220,61629,16976],{"class":420},[220,61631,749],{"class":264},[220,61633,61634],{"class":222,"line":399},[220,61635,31959],{"class":264},[220,61637,61638,61640,61642],{"class":222,"line":644},[220,61639,2550],{"class":264},[220,61641,2553],{"class":420},[220,61643,386],{"class":264},[220,61645,61646,61648,61650],{"class":222,"line":650},[220,61647,2567],{"class":264},[220,61649,61468],{"class":420},[220,61651,359],{"class":264},[220,61653,61654,61656,61658],{"class":222,"line":656},[220,61655,402],{"class":264},[220,61657,347],{"class":420},[220,61659,359],{"class":264},[212,61661,61662],{"className":468,"code":61547,"language":469,"meta":178,"style":178},[99,61663,61664,61672,61678,61690,61694,61702,61710],{"__ignoreMap":178},[220,61665,61666,61668,61670],{"class":222,"line":223},[220,61667,343],{"class":264},[220,61669,347],{"class":420},[220,61671,359],{"class":264},[220,61673,61674,61676],{"class":222,"line":179},[220,61675,364],{"class":264},[220,61677,61507],{"class":420},[220,61679,61680,61682,61684,61686,61688],{"class":222,"line":389},[220,61681,9645],{"class":226},[220,61683,353],{"class":260},[220,61685,743],{"class":264},[220,61687,16976],{"class":420},[220,61689,749],{"class":264},[220,61691,61692],{"class":222,"line":399},[220,61693,31959],{"class":264},[220,61695,61696,61698,61700],{"class":222,"line":644},[220,61697,2550],{"class":264},[220,61699,2553],{"class":420},[220,61701,386],{"class":264},[220,61703,61704,61706,61708],{"class":222,"line":650},[220,61705,2567],{"class":264},[220,61707,61468],{"class":420},[220,61709,359],{"class":264},[220,61711,61712,61714,61716],{"class":222,"line":656},[220,61713,402],{"class":264},[220,61715,347],{"class":420},[220,61717,359],{"class":264},[212,61719,61721],{"className":251,"code":61720,"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,61722,61723,61733,61737,61751,61755,61768,61776,61780,61784],{"__ignoreMap":178},[220,61724,61725,61727,61729,61731],{"class":222,"line":223},[220,61726,261],{"class":260},[220,61728,11512],{"class":264},[220,61730,268],{"class":260},[220,61732,4007],{"class":230},[220,61734,61735],{"class":222,"line":179},[220,61736,647],{"emptyLinePlaceholder":194},[220,61738,61739,61741,61743,61745,61747,61749],{"class":222,"line":389},[220,61740,1735],{"class":260},[220,61742,1738],{"class":420},[220,61744,1741],{"class":260},[220,61746,1744],{"class":260},[220,61748,1747],{"class":226},[220,61750,1750],{"class":264},[220,61752,61753],{"class":222,"line":399},[220,61754,1765],{"class":264},[220,61756,61757,61759,61762,61764,61766],{"class":222,"line":644},[220,61758,1770],{"class":264},[220,61760,61761],{"class":230},"'PagePeel'",[220,61763,7541],{"class":264},[220,61765,16976],{"class":420},[220,61767,7546],{"class":264},[220,61769,61770,61772,61774],{"class":222,"line":650},[220,61771,7014],{"class":264},[220,61773,3206],{"class":230},[220,61775,2465],{"class":264},[220,61777,61778],{"class":222,"line":656},[220,61779,7031],{"class":264},[220,61781,61782],{"class":222,"line":673},[220,61783,1787],{"class":264},[220,61785,61786],{"class":222,"line":682},[220,61787,1792],{"class":264},[1504,61789,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61791},[61792,61793],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":61468,"description":61476},"docs\u002Fcomponents\u002FPagePeel","_NeopYd_-B_NGUYuoaMmpptj7IZDDKnYCjDx53B4nGQ",{"id":61800,"title":61801,"body":61802,"category":32806,"componentType":25883,"description":61809,"extension":191,"meta":62070,"navigation":194,"path":62071,"requiresChild":194,"seo":62072,"stem":62073,"__hash__":62074},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":61803,"toc":62066},[61804,61807,61810,61812,61814,61817,61819,62064],[11,61805,61801],{"id":61806},"paper",[15,61808,61809],{},"Applies realistic paper grain and surface roughness to child content",[31911,61811],{"component":61801},[23,61813,31915],{"id":26533},[31917,61815],{":props":61816},"[{\"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,61818,31923],{"id":31922},[246,61820,61821,61866,61910,61954,61998],{":tabs":1557},[212,61822,61824],{"className":334,"code":61823,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,61825,61826,61834,61842,61850,61858],{"__ignoreMap":178},[220,61827,61828,61830,61832],{"class":222,"line":223},[220,61829,343],{"class":264},[220,61831,347],{"class":346},[220,61833,359],{"class":264},[220,61835,61836,61838,61840],{"class":222,"line":179},[220,61837,364],{"class":264},[220,61839,61801],{"class":346},[220,61841,359],{"class":264},[220,61843,61844,61846,61848],{"class":222,"line":389},[220,61845,2550],{"class":264},[220,61847,2553],{"class":346},[220,61849,386],{"class":264},[220,61851,61852,61854,61856],{"class":222,"line":399},[220,61853,2567],{"class":264},[220,61855,61801],{"class":346},[220,61857,359],{"class":264},[220,61859,61860,61862,61864],{"class":222,"line":644},[220,61861,402],{"class":264},[220,61863,347],{"class":346},[220,61865,359],{"class":264},[212,61867,61868],{"className":409,"code":61823,"language":411,"meta":178,"style":178},[99,61869,61870,61878,61886,61894,61902],{"__ignoreMap":178},[220,61871,61872,61874,61876],{"class":222,"line":223},[220,61873,343],{"class":264},[220,61875,347],{"class":420},[220,61877,359],{"class":264},[220,61879,61880,61882,61884],{"class":222,"line":179},[220,61881,364],{"class":264},[220,61883,61801],{"class":420},[220,61885,359],{"class":264},[220,61887,61888,61890,61892],{"class":222,"line":389},[220,61889,2550],{"class":264},[220,61891,2553],{"class":420},[220,61893,386],{"class":264},[220,61895,61896,61898,61900],{"class":222,"line":399},[220,61897,2567],{"class":264},[220,61899,61801],{"class":420},[220,61901,359],{"class":264},[220,61903,61904,61906,61908],{"class":222,"line":644},[220,61905,402],{"class":264},[220,61907,347],{"class":420},[220,61909,359],{"class":264},[212,61911,61912],{"className":2844,"code":61823,"language":2846,"meta":178,"style":178},[99,61913,61914,61922,61930,61938,61946],{"__ignoreMap":178},[220,61915,61916,61918,61920],{"class":222,"line":223},[220,61917,343],{"class":264},[220,61919,347],{"class":420},[220,61921,359],{"class":264},[220,61923,61924,61926,61928],{"class":222,"line":179},[220,61925,364],{"class":264},[220,61927,61801],{"class":420},[220,61929,359],{"class":264},[220,61931,61932,61934,61936],{"class":222,"line":389},[220,61933,2550],{"class":264},[220,61935,2553],{"class":420},[220,61937,386],{"class":264},[220,61939,61940,61942,61944],{"class":222,"line":399},[220,61941,2567],{"class":264},[220,61943,61801],{"class":420},[220,61945,359],{"class":264},[220,61947,61948,61950,61952],{"class":222,"line":644},[220,61949,402],{"class":264},[220,61951,347],{"class":420},[220,61953,359],{"class":264},[212,61955,61956],{"className":468,"code":61823,"language":469,"meta":178,"style":178},[99,61957,61958,61966,61974,61982,61990],{"__ignoreMap":178},[220,61959,61960,61962,61964],{"class":222,"line":223},[220,61961,343],{"class":264},[220,61963,347],{"class":420},[220,61965,359],{"class":264},[220,61967,61968,61970,61972],{"class":222,"line":179},[220,61969,364],{"class":264},[220,61971,61801],{"class":420},[220,61973,359],{"class":264},[220,61975,61976,61978,61980],{"class":222,"line":389},[220,61977,2550],{"class":264},[220,61979,2553],{"class":420},[220,61981,386],{"class":264},[220,61983,61984,61986,61988],{"class":222,"line":399},[220,61985,2567],{"class":264},[220,61987,61801],{"class":420},[220,61989,359],{"class":264},[220,61991,61992,61994,61996],{"class":222,"line":644},[220,61993,402],{"class":264},[220,61995,347],{"class":420},[220,61997,359],{"class":264},[212,61999,62001],{"className":251,"code":62000,"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,62002,62003,62013,62017,62031,62035,62044,62052,62056,62060],{"__ignoreMap":178},[220,62004,62005,62007,62009,62011],{"class":222,"line":223},[220,62006,261],{"class":260},[220,62008,11512],{"class":264},[220,62010,268],{"class":260},[220,62012,4007],{"class":230},[220,62014,62015],{"class":222,"line":179},[220,62016,647],{"emptyLinePlaceholder":194},[220,62018,62019,62021,62023,62025,62027,62029],{"class":222,"line":389},[220,62020,1735],{"class":260},[220,62022,1738],{"class":420},[220,62024,1741],{"class":260},[220,62026,1744],{"class":260},[220,62028,1747],{"class":226},[220,62030,1750],{"class":264},[220,62032,62033],{"class":222,"line":399},[220,62034,1765],{"class":264},[220,62036,62037,62039,62042],{"class":222,"line":644},[220,62038,1770],{"class":264},[220,62040,62041],{"class":230},"'Paper'",[220,62043,7009],{"class":264},[220,62045,62046,62048,62050],{"class":222,"line":650},[220,62047,7014],{"class":264},[220,62049,3206],{"class":230},[220,62051,2465],{"class":264},[220,62053,62054],{"class":222,"line":656},[220,62055,7031],{"class":264},[220,62057,62058],{"class":222,"line":673},[220,62059,1787],{"class":264},[220,62061,62062],{"class":222,"line":682},[220,62063,1792],{"class":264},[1504,62065,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62067},[62068,62069],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":61801,"description":61809},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":62076,"title":62077,"body":62078,"category":15908,"componentType":25877,"description":62085,"extension":191,"meta":62315,"navigation":194,"path":62316,"requiresChild":32530,"seo":62317,"stem":62318,"__hash__":62319},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":62079,"toc":62311},[62080,62083,62086,62088,62090,62093,62095,62309],[11,62081,62077],{"id":62082},"parallelogram",[15,62084,62085],{},"Parallelogram with adjustable width, height and skew",[31911,62087],{"component":62077},[23,62089,31915],{"id":26533},[31917,62091],{":props":62092},"[{\"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,62094,31923],{"id":31922},[246,62096,62097,62137,62175,62213,62251],{":tabs":1557},[212,62098,62100],{"className":334,"code":62099,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,62101,62102,62110,62117,62125,62129],{"__ignoreMap":178},[220,62103,62104,62106,62108],{"class":222,"line":223},[220,62105,343],{"class":264},[220,62107,347],{"class":346},[220,62109,359],{"class":264},[220,62111,62112,62114],{"class":222,"line":179},[220,62113,364],{"class":264},[220,62115,62116],{"class":346},"Parallelogram\n",[220,62118,62119,62121,62123],{"class":222,"line":389},[220,62120,9635],{"class":226},[220,62122,353],{"class":264},[220,62124,9591],{"class":230},[220,62126,62127],{"class":222,"line":399},[220,62128,1234],{"class":264},[220,62130,62131,62133,62135],{"class":222,"line":644},[220,62132,402],{"class":264},[220,62134,347],{"class":346},[220,62136,359],{"class":264},[212,62138,62139],{"className":409,"code":62099,"language":411,"meta":178,"style":178},[99,62140,62141,62149,62155,62163,62167],{"__ignoreMap":178},[220,62142,62143,62145,62147],{"class":222,"line":223},[220,62144,343],{"class":264},[220,62146,347],{"class":420},[220,62148,359],{"class":264},[220,62150,62151,62153],{"class":222,"line":179},[220,62152,364],{"class":264},[220,62154,62116],{"class":420},[220,62156,62157,62159,62161],{"class":222,"line":389},[220,62158,9635],{"class":226},[220,62160,353],{"class":260},[220,62162,9591],{"class":230},[220,62164,62165],{"class":222,"line":399},[220,62166,1234],{"class":264},[220,62168,62169,62171,62173],{"class":222,"line":644},[220,62170,402],{"class":264},[220,62172,347],{"class":420},[220,62174,359],{"class":264},[212,62176,62177],{"className":2844,"code":62099,"language":2846,"meta":178,"style":178},[99,62178,62179,62187,62193,62201,62205],{"__ignoreMap":178},[220,62180,62181,62183,62185],{"class":222,"line":223},[220,62182,343],{"class":264},[220,62184,347],{"class":420},[220,62186,359],{"class":264},[220,62188,62189,62191],{"class":222,"line":179},[220,62190,364],{"class":264},[220,62192,62116],{"class":420},[220,62194,62195,62197,62199],{"class":222,"line":389},[220,62196,9635],{"class":226},[220,62198,353],{"class":264},[220,62200,9591],{"class":230},[220,62202,62203],{"class":222,"line":399},[220,62204,1234],{"class":264},[220,62206,62207,62209,62211],{"class":222,"line":644},[220,62208,402],{"class":264},[220,62210,347],{"class":420},[220,62212,359],{"class":264},[212,62214,62215],{"className":468,"code":62099,"language":469,"meta":178,"style":178},[99,62216,62217,62225,62231,62239,62243],{"__ignoreMap":178},[220,62218,62219,62221,62223],{"class":222,"line":223},[220,62220,343],{"class":264},[220,62222,347],{"class":420},[220,62224,359],{"class":264},[220,62226,62227,62229],{"class":222,"line":179},[220,62228,364],{"class":264},[220,62230,62116],{"class":420},[220,62232,62233,62235,62237],{"class":222,"line":389},[220,62234,9635],{"class":226},[220,62236,353],{"class":260},[220,62238,9591],{"class":230},[220,62240,62241],{"class":222,"line":399},[220,62242,1234],{"class":264},[220,62244,62245,62247,62249],{"class":222,"line":644},[220,62246,402],{"class":264},[220,62248,347],{"class":420},[220,62250,359],{"class":264},[212,62252,62254],{"className":251,"code":62253,"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,62255,62256,62266,62270,62284,62288,62301,62305],{"__ignoreMap":178},[220,62257,62258,62260,62262,62264],{"class":222,"line":223},[220,62259,261],{"class":260},[220,62261,11512],{"class":264},[220,62263,268],{"class":260},[220,62265,4007],{"class":230},[220,62267,62268],{"class":222,"line":179},[220,62269,647],{"emptyLinePlaceholder":194},[220,62271,62272,62274,62276,62278,62280,62282],{"class":222,"line":389},[220,62273,1735],{"class":260},[220,62275,1738],{"class":420},[220,62277,1741],{"class":260},[220,62279,1744],{"class":260},[220,62281,1747],{"class":226},[220,62283,1750],{"class":264},[220,62285,62286],{"class":222,"line":399},[220,62287,1765],{"class":264},[220,62289,62290,62292,62295,62297,62299],{"class":222,"line":644},[220,62291,1770],{"class":264},[220,62293,62294],{"class":230},"'Parallelogram'",[220,62296,1776],{"class":264},[220,62298,10169],{"class":230},[220,62300,1782],{"class":264},[220,62302,62303],{"class":222,"line":650},[220,62304,1787],{"class":264},[220,62306,62307],{"class":222,"line":656},[220,62308,1792],{"class":264},[1504,62310,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":62312},[62313,62314],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":62077,"description":62085},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":62321,"title":62322,"body":62323,"category":32806,"componentType":25883,"description":62330,"extension":191,"meta":62591,"navigation":194,"path":62592,"requiresChild":194,"seo":62593,"stem":62594,"__hash__":62595},"components\u002Fdocs\u002Fcomponents\u002FParticleField.md","ParticleField",{"type":8,"value":62324,"toc":62587},[62325,62328,62331,62333,62335,62338,62340,62585],[11,62326,62322],{"id":62327},"particlefield",[15,62329,62330],{},"Explodes the child content into a breathing 3D field of particles — bright areas float toward you and dark areas recede, the whole relief can be orbited with the camera rotations, and the cursor physically throws particles that spring back home",[31911,62332],{"component":62322},[23,62334,31915],{"id":26533},[31917,62336],{":props":62337},"[{\"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,62339,31923],{"id":31922},[246,62341,62342,62387,62431,62475,62519],{":tabs":1557},[212,62343,62345],{"className":334,"code":62344,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleField>\n \u003CCircle \u002F>\n \u003C\u002FParticleField>\n\u003C\u002FShader>\n",[99,62346,62347,62355,62363,62371,62379],{"__ignoreMap":178},[220,62348,62349,62351,62353],{"class":222,"line":223},[220,62350,343],{"class":264},[220,62352,347],{"class":346},[220,62354,359],{"class":264},[220,62356,62357,62359,62361],{"class":222,"line":179},[220,62358,364],{"class":264},[220,62360,62322],{"class":346},[220,62362,359],{"class":264},[220,62364,62365,62367,62369],{"class":222,"line":389},[220,62366,2550],{"class":264},[220,62368,2553],{"class":346},[220,62370,386],{"class":264},[220,62372,62373,62375,62377],{"class":222,"line":399},[220,62374,2567],{"class":264},[220,62376,62322],{"class":346},[220,62378,359],{"class":264},[220,62380,62381,62383,62385],{"class":222,"line":644},[220,62382,402],{"class":264},[220,62384,347],{"class":346},[220,62386,359],{"class":264},[212,62388,62389],{"className":409,"code":62344,"language":411,"meta":178,"style":178},[99,62390,62391,62399,62407,62415,62423],{"__ignoreMap":178},[220,62392,62393,62395,62397],{"class":222,"line":223},[220,62394,343],{"class":264},[220,62396,347],{"class":420},[220,62398,359],{"class":264},[220,62400,62401,62403,62405],{"class":222,"line":179},[220,62402,364],{"class":264},[220,62404,62322],{"class":420},[220,62406,359],{"class":264},[220,62408,62409,62411,62413],{"class":222,"line":389},[220,62410,2550],{"class":264},[220,62412,2553],{"class":420},[220,62414,386],{"class":264},[220,62416,62417,62419,62421],{"class":222,"line":399},[220,62418,2567],{"class":264},[220,62420,62322],{"class":420},[220,62422,359],{"class":264},[220,62424,62425,62427,62429],{"class":222,"line":644},[220,62426,402],{"class":264},[220,62428,347],{"class":420},[220,62430,359],{"class":264},[212,62432,62433],{"className":2844,"code":62344,"language":2846,"meta":178,"style":178},[99,62434,62435,62443,62451,62459,62467],{"__ignoreMap":178},[220,62436,62437,62439,62441],{"class":222,"line":223},[220,62438,343],{"class":264},[220,62440,347],{"class":420},[220,62442,359],{"class":264},[220,62444,62445,62447,62449],{"class":222,"line":179},[220,62446,364],{"class":264},[220,62448,62322],{"class":420},[220,62450,359],{"class":264},[220,62452,62453,62455,62457],{"class":222,"line":389},[220,62454,2550],{"class":264},[220,62456,2553],{"class":420},[220,62458,386],{"class":264},[220,62460,62461,62463,62465],{"class":222,"line":399},[220,62462,2567],{"class":264},[220,62464,62322],{"class":420},[220,62466,359],{"class":264},[220,62468,62469,62471,62473],{"class":222,"line":644},[220,62470,402],{"class":264},[220,62472,347],{"class":420},[220,62474,359],{"class":264},[212,62476,62477],{"className":468,"code":62344,"language":469,"meta":178,"style":178},[99,62478,62479,62487,62495,62503,62511],{"__ignoreMap":178},[220,62480,62481,62483,62485],{"class":222,"line":223},[220,62482,343],{"class":264},[220,62484,347],{"class":420},[220,62486,359],{"class":264},[220,62488,62489,62491,62493],{"class":222,"line":179},[220,62490,364],{"class":264},[220,62492,62322],{"class":420},[220,62494,359],{"class":264},[220,62496,62497,62499,62501],{"class":222,"line":389},[220,62498,2550],{"class":264},[220,62500,2553],{"class":420},[220,62502,386],{"class":264},[220,62504,62505,62507,62509],{"class":222,"line":399},[220,62506,2567],{"class":264},[220,62508,62322],{"class":420},[220,62510,359],{"class":264},[220,62512,62513,62515,62517],{"class":222,"line":644},[220,62514,402],{"class":264},[220,62516,347],{"class":420},[220,62518,359],{"class":264},[212,62520,62522],{"className":251,"code":62521,"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,62523,62524,62534,62538,62552,62556,62565,62573,62577,62581],{"__ignoreMap":178},[220,62525,62526,62528,62530,62532],{"class":222,"line":223},[220,62527,261],{"class":260},[220,62529,11512],{"class":264},[220,62531,268],{"class":260},[220,62533,4007],{"class":230},[220,62535,62536],{"class":222,"line":179},[220,62537,647],{"emptyLinePlaceholder":194},[220,62539,62540,62542,62544,62546,62548,62550],{"class":222,"line":389},[220,62541,1735],{"class":260},[220,62543,1738],{"class":420},[220,62545,1741],{"class":260},[220,62547,1744],{"class":260},[220,62549,1747],{"class":226},[220,62551,1750],{"class":264},[220,62553,62554],{"class":222,"line":399},[220,62555,1765],{"class":264},[220,62557,62558,62560,62563],{"class":222,"line":644},[220,62559,1770],{"class":264},[220,62561,62562],{"class":230},"'ParticleField'",[220,62564,7009],{"class":264},[220,62566,62567,62569,62571],{"class":222,"line":650},[220,62568,7014],{"class":264},[220,62570,3206],{"class":230},[220,62572,2465],{"class":264},[220,62574,62575],{"class":222,"line":656},[220,62576,7031],{"class":264},[220,62578,62579],{"class":222,"line":673},[220,62580,1787],{"class":264},[220,62582,62583],{"class":222,"line":682},[220,62584,1792],{"class":264},[1504,62586,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62588},[62589,62590],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticlefield",{"title":62322,"description":62330},"docs\u002Fcomponents\u002FParticleField","72Kbo_zyMBePEBCQsUM1xkoCFISBvZiOP8pBV57COSc",{"id":62597,"title":62598,"body":62599,"category":35559,"componentType":25877,"description":62606,"extension":191,"meta":62791,"navigation":194,"path":62792,"requiresChild":32530,"seo":62793,"stem":62794,"__hash__":62795},"components\u002Fdocs\u002Fcomponents\u002FParticleFlow.md","ParticleFlow",{"type":8,"value":62600,"toc":62787},[62601,62604,62607,62609,62611,62614,62616,62785],[11,62602,62598],{"id":62603},"particleflow",[15,62605,62606],{},"Thousands of drifting dust particles carried by a real incompressible fluid field the cursor stirs — drag to plow a wake and the particles ride the eddies and vortices it leaves behind, while a gentle ambient breeze keeps the whole scene breathing on its own",[31911,62608],{"component":62598},[23,62610,31915],{"id":26533},[31917,62612],{":props":62613},"[{\"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,62615,31923],{"id":31922},[246,62617,62618,62647,62675,62703,62731],{":tabs":1557},[212,62619,62621],{"className":334,"code":62620,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleFlow \u002F>\n\u003C\u002FShader>\n",[99,62622,62623,62631,62639],{"__ignoreMap":178},[220,62624,62625,62627,62629],{"class":222,"line":223},[220,62626,343],{"class":264},[220,62628,347],{"class":346},[220,62630,359],{"class":264},[220,62632,62633,62635,62637],{"class":222,"line":179},[220,62634,364],{"class":264},[220,62636,62598],{"class":346},[220,62638,386],{"class":264},[220,62640,62641,62643,62645],{"class":222,"line":389},[220,62642,402],{"class":264},[220,62644,347],{"class":346},[220,62646,359],{"class":264},[212,62648,62649],{"className":409,"code":62620,"language":411,"meta":178,"style":178},[99,62650,62651,62659,62667],{"__ignoreMap":178},[220,62652,62653,62655,62657],{"class":222,"line":223},[220,62654,343],{"class":264},[220,62656,347],{"class":420},[220,62658,359],{"class":264},[220,62660,62661,62663,62665],{"class":222,"line":179},[220,62662,364],{"class":264},[220,62664,62598],{"class":420},[220,62666,386],{"class":264},[220,62668,62669,62671,62673],{"class":222,"line":389},[220,62670,402],{"class":264},[220,62672,347],{"class":420},[220,62674,359],{"class":264},[212,62676,62677],{"className":2844,"code":62620,"language":2846,"meta":178,"style":178},[99,62678,62679,62687,62695],{"__ignoreMap":178},[220,62680,62681,62683,62685],{"class":222,"line":223},[220,62682,343],{"class":264},[220,62684,347],{"class":420},[220,62686,359],{"class":264},[220,62688,62689,62691,62693],{"class":222,"line":179},[220,62690,364],{"class":264},[220,62692,62598],{"class":420},[220,62694,386],{"class":264},[220,62696,62697,62699,62701],{"class":222,"line":389},[220,62698,402],{"class":264},[220,62700,347],{"class":420},[220,62702,359],{"class":264},[212,62704,62705],{"className":468,"code":62620,"language":469,"meta":178,"style":178},[99,62706,62707,62715,62723],{"__ignoreMap":178},[220,62708,62709,62711,62713],{"class":222,"line":223},[220,62710,343],{"class":264},[220,62712,347],{"class":420},[220,62714,359],{"class":264},[220,62716,62717,62719,62721],{"class":222,"line":179},[220,62718,364],{"class":264},[220,62720,62598],{"class":420},[220,62722,386],{"class":264},[220,62724,62725,62727,62729],{"class":222,"line":389},[220,62726,402],{"class":264},[220,62728,347],{"class":420},[220,62730,359],{"class":264},[212,62732,62734],{"className":251,"code":62733,"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,62735,62736,62746,62750,62764,62768,62777,62781],{"__ignoreMap":178},[220,62737,62738,62740,62742,62744],{"class":222,"line":223},[220,62739,261],{"class":260},[220,62741,11512],{"class":264},[220,62743,268],{"class":260},[220,62745,4007],{"class":230},[220,62747,62748],{"class":222,"line":179},[220,62749,647],{"emptyLinePlaceholder":194},[220,62751,62752,62754,62756,62758,62760,62762],{"class":222,"line":389},[220,62753,1735],{"class":260},[220,62755,1738],{"class":420},[220,62757,1741],{"class":260},[220,62759,1744],{"class":260},[220,62761,1747],{"class":226},[220,62763,1750],{"class":264},[220,62765,62766],{"class":222,"line":399},[220,62767,1765],{"class":264},[220,62769,62770,62772,62775],{"class":222,"line":644},[220,62771,1770],{"class":264},[220,62773,62774],{"class":230},"'ParticleFlow'",[220,62776,2465],{"class":264},[220,62778,62779],{"class":222,"line":650},[220,62780,1787],{"class":264},[220,62782,62783],{"class":222,"line":656},[220,62784,1792],{"class":264},[1504,62786,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62788},[62789,62790],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticleflow",{"title":62598,"description":62606},"docs\u002Fcomponents\u002FParticleFlow","zsHVvGrsiT7C6qLRUh6rNKLVC2E5ylsIAjONaCcQUGc",{"id":62797,"title":62798,"body":62799,"category":36569,"componentType":25877,"description":62806,"extension":191,"meta":62991,"navigation":194,"path":62992,"requiresChild":32530,"seo":62993,"stem":62994,"__hash__":62995},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":62800,"toc":62987},[62801,62804,62807,62809,62811,62814,62816,62985],[11,62802,62798],{"id":62803},"particles",[15,62805,62806],{},"A swarm of simulated particles that settles into the shape, filling it evenly — flat, SVG or true 3D volumes — scattering from the cursor (or chasing it), tumbling when the shape moves, and always drifting back home",[31911,62808],{"component":62798},[23,62810,31915],{"id":26533},[31917,62812],{":props":62813},"[{\"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,62815,31923],{"id":31922},[246,62817,62818,62847,62875,62903,62931],{":tabs":1557},[212,62819,62821],{"className":334,"code":62820,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,62822,62823,62831,62839],{"__ignoreMap":178},[220,62824,62825,62827,62829],{"class":222,"line":223},[220,62826,343],{"class":264},[220,62828,347],{"class":346},[220,62830,359],{"class":264},[220,62832,62833,62835,62837],{"class":222,"line":179},[220,62834,364],{"class":264},[220,62836,62798],{"class":346},[220,62838,386],{"class":264},[220,62840,62841,62843,62845],{"class":222,"line":389},[220,62842,402],{"class":264},[220,62844,347],{"class":346},[220,62846,359],{"class":264},[212,62848,62849],{"className":409,"code":62820,"language":411,"meta":178,"style":178},[99,62850,62851,62859,62867],{"__ignoreMap":178},[220,62852,62853,62855,62857],{"class":222,"line":223},[220,62854,343],{"class":264},[220,62856,347],{"class":420},[220,62858,359],{"class":264},[220,62860,62861,62863,62865],{"class":222,"line":179},[220,62862,364],{"class":264},[220,62864,62798],{"class":420},[220,62866,386],{"class":264},[220,62868,62869,62871,62873],{"class":222,"line":389},[220,62870,402],{"class":264},[220,62872,347],{"class":420},[220,62874,359],{"class":264},[212,62876,62877],{"className":2844,"code":62820,"language":2846,"meta":178,"style":178},[99,62878,62879,62887,62895],{"__ignoreMap":178},[220,62880,62881,62883,62885],{"class":222,"line":223},[220,62882,343],{"class":264},[220,62884,347],{"class":420},[220,62886,359],{"class":264},[220,62888,62889,62891,62893],{"class":222,"line":179},[220,62890,364],{"class":264},[220,62892,62798],{"class":420},[220,62894,386],{"class":264},[220,62896,62897,62899,62901],{"class":222,"line":389},[220,62898,402],{"class":264},[220,62900,347],{"class":420},[220,62902,359],{"class":264},[212,62904,62905],{"className":468,"code":62820,"language":469,"meta":178,"style":178},[99,62906,62907,62915,62923],{"__ignoreMap":178},[220,62908,62909,62911,62913],{"class":222,"line":223},[220,62910,343],{"class":264},[220,62912,347],{"class":420},[220,62914,359],{"class":264},[220,62916,62917,62919,62921],{"class":222,"line":179},[220,62918,364],{"class":264},[220,62920,62798],{"class":420},[220,62922,386],{"class":264},[220,62924,62925,62927,62929],{"class":222,"line":389},[220,62926,402],{"class":264},[220,62928,347],{"class":420},[220,62930,359],{"class":264},[212,62932,62934],{"className":251,"code":62933,"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,62935,62936,62946,62950,62964,62968,62977,62981],{"__ignoreMap":178},[220,62937,62938,62940,62942,62944],{"class":222,"line":223},[220,62939,261],{"class":260},[220,62941,11512],{"class":264},[220,62943,268],{"class":260},[220,62945,4007],{"class":230},[220,62947,62948],{"class":222,"line":179},[220,62949,647],{"emptyLinePlaceholder":194},[220,62951,62952,62954,62956,62958,62960,62962],{"class":222,"line":389},[220,62953,1735],{"class":260},[220,62955,1738],{"class":420},[220,62957,1741],{"class":260},[220,62959,1744],{"class":260},[220,62961,1747],{"class":226},[220,62963,1750],{"class":264},[220,62965,62966],{"class":222,"line":399},[220,62967,1765],{"class":264},[220,62969,62970,62972,62975],{"class":222,"line":644},[220,62971,1770],{"class":264},[220,62973,62974],{"class":230},"'Particles'",[220,62976,2465],{"class":264},[220,62978,62979],{"class":222,"line":650},[220,62980,1787],{"class":264},[220,62982,62983],{"class":222,"line":656},[220,62984,1792],{"class":264},[1504,62986,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62988},[62989,62990],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":62798,"description":62806},"docs\u002Fcomponents\u002FParticles","jxyMx-Ww4ghBZRf8Gy9kIwtIBqtncQlodaIg_7kARuU",{"id":62997,"title":62998,"body":62999,"category":33063,"componentType":25877,"description":63006,"extension":191,"meta":63190,"navigation":194,"path":63191,"requiresChild":32530,"seo":63192,"stem":63193,"__hash__":63194},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":63000,"toc":63186},[63001,63004,63007,63009,63011,63013,63015,63184],[11,63002,62998],{"id":63003},"perlinnoise",[15,63005,63006],{},"Smooth gradient noise that morphs over time",[31911,63008],{"component":62998},[23,63010,31915],{"id":26533},[31917,63012],{":props":34648},[23,63014,31923],{"id":31922},[246,63016,63017,63046,63074,63102,63130],{":tabs":1557},[212,63018,63020],{"className":334,"code":63019,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,63021,63022,63030,63038],{"__ignoreMap":178},[220,63023,63024,63026,63028],{"class":222,"line":223},[220,63025,343],{"class":264},[220,63027,347],{"class":346},[220,63029,359],{"class":264},[220,63031,63032,63034,63036],{"class":222,"line":179},[220,63033,364],{"class":264},[220,63035,62998],{"class":346},[220,63037,386],{"class":264},[220,63039,63040,63042,63044],{"class":222,"line":389},[220,63041,402],{"class":264},[220,63043,347],{"class":346},[220,63045,359],{"class":264},[212,63047,63048],{"className":409,"code":63019,"language":411,"meta":178,"style":178},[99,63049,63050,63058,63066],{"__ignoreMap":178},[220,63051,63052,63054,63056],{"class":222,"line":223},[220,63053,343],{"class":264},[220,63055,347],{"class":420},[220,63057,359],{"class":264},[220,63059,63060,63062,63064],{"class":222,"line":179},[220,63061,364],{"class":264},[220,63063,62998],{"class":420},[220,63065,386],{"class":264},[220,63067,63068,63070,63072],{"class":222,"line":389},[220,63069,402],{"class":264},[220,63071,347],{"class":420},[220,63073,359],{"class":264},[212,63075,63076],{"className":2844,"code":63019,"language":2846,"meta":178,"style":178},[99,63077,63078,63086,63094],{"__ignoreMap":178},[220,63079,63080,63082,63084],{"class":222,"line":223},[220,63081,343],{"class":264},[220,63083,347],{"class":420},[220,63085,359],{"class":264},[220,63087,63088,63090,63092],{"class":222,"line":179},[220,63089,364],{"class":264},[220,63091,62998],{"class":420},[220,63093,386],{"class":264},[220,63095,63096,63098,63100],{"class":222,"line":389},[220,63097,402],{"class":264},[220,63099,347],{"class":420},[220,63101,359],{"class":264},[212,63103,63104],{"className":468,"code":63019,"language":469,"meta":178,"style":178},[99,63105,63106,63114,63122],{"__ignoreMap":178},[220,63107,63108,63110,63112],{"class":222,"line":223},[220,63109,343],{"class":264},[220,63111,347],{"class":420},[220,63113,359],{"class":264},[220,63115,63116,63118,63120],{"class":222,"line":179},[220,63117,364],{"class":264},[220,63119,62998],{"class":420},[220,63121,386],{"class":264},[220,63123,63124,63126,63128],{"class":222,"line":389},[220,63125,402],{"class":264},[220,63127,347],{"class":420},[220,63129,359],{"class":264},[212,63131,63133],{"className":251,"code":63132,"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,63134,63135,63145,63149,63163,63167,63176,63180],{"__ignoreMap":178},[220,63136,63137,63139,63141,63143],{"class":222,"line":223},[220,63138,261],{"class":260},[220,63140,11512],{"class":264},[220,63142,268],{"class":260},[220,63144,4007],{"class":230},[220,63146,63147],{"class":222,"line":179},[220,63148,647],{"emptyLinePlaceholder":194},[220,63150,63151,63153,63155,63157,63159,63161],{"class":222,"line":389},[220,63152,1735],{"class":260},[220,63154,1738],{"class":420},[220,63156,1741],{"class":260},[220,63158,1744],{"class":260},[220,63160,1747],{"class":226},[220,63162,1750],{"class":264},[220,63164,63165],{"class":222,"line":399},[220,63166,1765],{"class":264},[220,63168,63169,63171,63174],{"class":222,"line":644},[220,63170,1770],{"class":264},[220,63172,63173],{"class":230},"'PerlinNoise'",[220,63175,2465],{"class":264},[220,63177,63178],{"class":222,"line":650},[220,63179,1787],{"class":264},[220,63181,63182],{"class":222,"line":656},[220,63183,1792],{"class":264},[1504,63185,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":63187},[63188,63189],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":62998,"description":63006},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":63196,"title":63197,"body":63198,"category":33396,"componentType":25883,"description":63205,"extension":191,"meta":63466,"navigation":194,"path":63467,"requiresChild":194,"seo":63468,"stem":63469,"__hash__":63470},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":63199,"toc":63462},[63200,63203,63206,63208,63210,63213,63215,63460],[11,63201,63197],{"id":63202},"perspective",[15,63204,63205],{},"Rotate the plane in 3D space with pan and tilt",[31911,63207],{"component":63197},[23,63209,31915],{"id":26533},[31917,63211],{":props":63212},"[{\"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,63214,31923],{"id":31922},[246,63216,63217,63262,63306,63350,63394],{":tabs":1557},[212,63218,63220],{"className":334,"code":63219,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,63221,63222,63230,63238,63246,63254],{"__ignoreMap":178},[220,63223,63224,63226,63228],{"class":222,"line":223},[220,63225,343],{"class":264},[220,63227,347],{"class":346},[220,63229,359],{"class":264},[220,63231,63232,63234,63236],{"class":222,"line":179},[220,63233,364],{"class":264},[220,63235,63197],{"class":346},[220,63237,359],{"class":264},[220,63239,63240,63242,63244],{"class":222,"line":389},[220,63241,2550],{"class":264},[220,63243,2553],{"class":346},[220,63245,386],{"class":264},[220,63247,63248,63250,63252],{"class":222,"line":399},[220,63249,2567],{"class":264},[220,63251,63197],{"class":346},[220,63253,359],{"class":264},[220,63255,63256,63258,63260],{"class":222,"line":644},[220,63257,402],{"class":264},[220,63259,347],{"class":346},[220,63261,359],{"class":264},[212,63263,63264],{"className":409,"code":63219,"language":411,"meta":178,"style":178},[99,63265,63266,63274,63282,63290,63298],{"__ignoreMap":178},[220,63267,63268,63270,63272],{"class":222,"line":223},[220,63269,343],{"class":264},[220,63271,347],{"class":420},[220,63273,359],{"class":264},[220,63275,63276,63278,63280],{"class":222,"line":179},[220,63277,364],{"class":264},[220,63279,63197],{"class":420},[220,63281,359],{"class":264},[220,63283,63284,63286,63288],{"class":222,"line":389},[220,63285,2550],{"class":264},[220,63287,2553],{"class":420},[220,63289,386],{"class":264},[220,63291,63292,63294,63296],{"class":222,"line":399},[220,63293,2567],{"class":264},[220,63295,63197],{"class":420},[220,63297,359],{"class":264},[220,63299,63300,63302,63304],{"class":222,"line":644},[220,63301,402],{"class":264},[220,63303,347],{"class":420},[220,63305,359],{"class":264},[212,63307,63308],{"className":2844,"code":63219,"language":2846,"meta":178,"style":178},[99,63309,63310,63318,63326,63334,63342],{"__ignoreMap":178},[220,63311,63312,63314,63316],{"class":222,"line":223},[220,63313,343],{"class":264},[220,63315,347],{"class":420},[220,63317,359],{"class":264},[220,63319,63320,63322,63324],{"class":222,"line":179},[220,63321,364],{"class":264},[220,63323,63197],{"class":420},[220,63325,359],{"class":264},[220,63327,63328,63330,63332],{"class":222,"line":389},[220,63329,2550],{"class":264},[220,63331,2553],{"class":420},[220,63333,386],{"class":264},[220,63335,63336,63338,63340],{"class":222,"line":399},[220,63337,2567],{"class":264},[220,63339,63197],{"class":420},[220,63341,359],{"class":264},[220,63343,63344,63346,63348],{"class":222,"line":644},[220,63345,402],{"class":264},[220,63347,347],{"class":420},[220,63349,359],{"class":264},[212,63351,63352],{"className":468,"code":63219,"language":469,"meta":178,"style":178},[99,63353,63354,63362,63370,63378,63386],{"__ignoreMap":178},[220,63355,63356,63358,63360],{"class":222,"line":223},[220,63357,343],{"class":264},[220,63359,347],{"class":420},[220,63361,359],{"class":264},[220,63363,63364,63366,63368],{"class":222,"line":179},[220,63365,364],{"class":264},[220,63367,63197],{"class":420},[220,63369,359],{"class":264},[220,63371,63372,63374,63376],{"class":222,"line":389},[220,63373,2550],{"class":264},[220,63375,2553],{"class":420},[220,63377,386],{"class":264},[220,63379,63380,63382,63384],{"class":222,"line":399},[220,63381,2567],{"class":264},[220,63383,63197],{"class":420},[220,63385,359],{"class":264},[220,63387,63388,63390,63392],{"class":222,"line":644},[220,63389,402],{"class":264},[220,63391,347],{"class":420},[220,63393,359],{"class":264},[212,63395,63397],{"className":251,"code":63396,"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,63398,63399,63409,63413,63427,63431,63440,63448,63452,63456],{"__ignoreMap":178},[220,63400,63401,63403,63405,63407],{"class":222,"line":223},[220,63402,261],{"class":260},[220,63404,11512],{"class":264},[220,63406,268],{"class":260},[220,63408,4007],{"class":230},[220,63410,63411],{"class":222,"line":179},[220,63412,647],{"emptyLinePlaceholder":194},[220,63414,63415,63417,63419,63421,63423,63425],{"class":222,"line":389},[220,63416,1735],{"class":260},[220,63418,1738],{"class":420},[220,63420,1741],{"class":260},[220,63422,1744],{"class":260},[220,63424,1747],{"class":226},[220,63426,1750],{"class":264},[220,63428,63429],{"class":222,"line":399},[220,63430,1765],{"class":264},[220,63432,63433,63435,63438],{"class":222,"line":644},[220,63434,1770],{"class":264},[220,63436,63437],{"class":230},"'Perspective'",[220,63439,7009],{"class":264},[220,63441,63442,63444,63446],{"class":222,"line":650},[220,63443,7014],{"class":264},[220,63445,3206],{"class":230},[220,63447,2465],{"class":264},[220,63449,63450],{"class":222,"line":656},[220,63451,7031],{"class":264},[220,63453,63454],{"class":222,"line":673},[220,63455,1787],{"class":264},[220,63457,63458],{"class":222,"line":682},[220,63459,1792],{"class":264},[1504,63461,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":63463},[63464,63465],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":63197,"description":63205},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":63472,"title":63473,"body":63474,"category":35559,"componentType":25883,"description":63481,"extension":191,"meta":63798,"navigation":194,"path":63799,"requiresChild":194,"seo":63800,"stem":63801,"__hash__":63802},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":63475,"toc":63794},[63476,63479,63482,63484,63486,63489,63491,63792],[11,63477,63473],{"id":63478},"pixelsort",[15,63480,63481],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[31911,63483],{"component":63473},[23,63485,31915],{"id":26533},[31917,63487],{":props":63488},"[{\"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,63490,31923],{"id":31922},[246,63492,63493,63549,63608,63664,63722],{":tabs":1557},[212,63494,63496],{"className":334,"code":63495,"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,63497,63498,63506,63513,63521,63525,63533,63541],{"__ignoreMap":178},[220,63499,63500,63502,63504],{"class":222,"line":223},[220,63501,343],{"class":264},[220,63503,347],{"class":346},[220,63505,359],{"class":264},[220,63507,63508,63510],{"class":222,"line":179},[220,63509,364],{"class":264},[220,63511,63512],{"class":346},"PixelSort\n",[220,63514,63515,63517,63519],{"class":222,"line":389},[220,63516,17405],{"class":226},[220,63518,353],{"class":264},[220,63520,48348],{"class":230},[220,63522,63523],{"class":222,"line":399},[220,63524,31959],{"class":264},[220,63526,63527,63529,63531],{"class":222,"line":644},[220,63528,2550],{"class":264},[220,63530,2553],{"class":346},[220,63532,386],{"class":264},[220,63534,63535,63537,63539],{"class":222,"line":650},[220,63536,2567],{"class":264},[220,63538,63473],{"class":346},[220,63540,359],{"class":264},[220,63542,63543,63545,63547],{"class":222,"line":656},[220,63544,402],{"class":264},[220,63546,347],{"class":346},[220,63548,359],{"class":264},[212,63550,63552],{"className":409,"code":63551,"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,63553,63554,63562,63568,63580,63584,63592,63600],{"__ignoreMap":178},[220,63555,63556,63558,63560],{"class":222,"line":223},[220,63557,343],{"class":264},[220,63559,347],{"class":420},[220,63561,359],{"class":264},[220,63563,63564,63566],{"class":222,"line":179},[220,63565,364],{"class":264},[220,63567,63512],{"class":420},[220,63569,63570,63572,63574,63576,63578],{"class":222,"line":389},[220,63571,9645],{"class":226},[220,63573,353],{"class":260},[220,63575,743],{"class":264},[220,63577,8249],{"class":420},[220,63579,749],{"class":264},[220,63581,63582],{"class":222,"line":399},[220,63583,31959],{"class":264},[220,63585,63586,63588,63590],{"class":222,"line":644},[220,63587,2550],{"class":264},[220,63589,2553],{"class":420},[220,63591,386],{"class":264},[220,63593,63594,63596,63598],{"class":222,"line":650},[220,63595,2567],{"class":264},[220,63597,63473],{"class":420},[220,63599,359],{"class":264},[220,63601,63602,63604,63606],{"class":222,"line":656},[220,63603,402],{"class":264},[220,63605,347],{"class":420},[220,63607,359],{"class":264},[212,63609,63610],{"className":2844,"code":63551,"language":2846,"meta":178,"style":178},[99,63611,63612,63620,63626,63636,63640,63648,63656],{"__ignoreMap":178},[220,63613,63614,63616,63618],{"class":222,"line":223},[220,63615,343],{"class":264},[220,63617,347],{"class":420},[220,63619,359],{"class":264},[220,63621,63622,63624],{"class":222,"line":179},[220,63623,364],{"class":264},[220,63625,63512],{"class":420},[220,63627,63628,63630,63632,63634],{"class":222,"line":389},[220,63629,9645],{"class":226},[220,63631,29871],{"class":264},[220,63633,8249],{"class":420},[220,63635,749],{"class":264},[220,63637,63638],{"class":222,"line":399},[220,63639,31959],{"class":264},[220,63641,63642,63644,63646],{"class":222,"line":644},[220,63643,2550],{"class":264},[220,63645,2553],{"class":420},[220,63647,386],{"class":264},[220,63649,63650,63652,63654],{"class":222,"line":650},[220,63651,2567],{"class":264},[220,63653,63473],{"class":420},[220,63655,359],{"class":264},[220,63657,63658,63660,63662],{"class":222,"line":656},[220,63659,402],{"class":264},[220,63661,347],{"class":420},[220,63663,359],{"class":264},[212,63665,63666],{"className":468,"code":63551,"language":469,"meta":178,"style":178},[99,63667,63668,63676,63682,63694,63698,63706,63714],{"__ignoreMap":178},[220,63669,63670,63672,63674],{"class":222,"line":223},[220,63671,343],{"class":264},[220,63673,347],{"class":420},[220,63675,359],{"class":264},[220,63677,63678,63680],{"class":222,"line":179},[220,63679,364],{"class":264},[220,63681,63512],{"class":420},[220,63683,63684,63686,63688,63690,63692],{"class":222,"line":389},[220,63685,9645],{"class":226},[220,63687,353],{"class":260},[220,63689,743],{"class":264},[220,63691,8249],{"class":420},[220,63693,749],{"class":264},[220,63695,63696],{"class":222,"line":399},[220,63697,31959],{"class":264},[220,63699,63700,63702,63704],{"class":222,"line":644},[220,63701,2550],{"class":264},[220,63703,2553],{"class":420},[220,63705,386],{"class":264},[220,63707,63708,63710,63712],{"class":222,"line":650},[220,63709,2567],{"class":264},[220,63711,63473],{"class":420},[220,63713,359],{"class":264},[220,63715,63716,63718,63720],{"class":222,"line":656},[220,63717,402],{"class":264},[220,63719,347],{"class":420},[220,63721,359],{"class":264},[212,63723,63725],{"className":251,"code":63724,"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,63726,63727,63737,63741,63755,63759,63772,63780,63784,63788],{"__ignoreMap":178},[220,63728,63729,63731,63733,63735],{"class":222,"line":223},[220,63730,261],{"class":260},[220,63732,11512],{"class":264},[220,63734,268],{"class":260},[220,63736,4007],{"class":230},[220,63738,63739],{"class":222,"line":179},[220,63740,647],{"emptyLinePlaceholder":194},[220,63742,63743,63745,63747,63749,63751,63753],{"class":222,"line":389},[220,63744,1735],{"class":260},[220,63746,1738],{"class":420},[220,63748,1741],{"class":260},[220,63750,1744],{"class":260},[220,63752,1747],{"class":226},[220,63754,1750],{"class":264},[220,63756,63757],{"class":222,"line":399},[220,63758,1765],{"class":264},[220,63760,63761,63763,63766,63768,63770],{"class":222,"line":644},[220,63762,1770],{"class":264},[220,63764,63765],{"class":230},"'PixelSort'",[220,63767,7541],{"class":264},[220,63769,8249],{"class":420},[220,63771,7546],{"class":264},[220,63773,63774,63776,63778],{"class":222,"line":650},[220,63775,7014],{"class":264},[220,63777,3206],{"class":230},[220,63779,2465],{"class":264},[220,63781,63782],{"class":222,"line":656},[220,63783,7031],{"class":264},[220,63785,63786],{"class":222,"line":673},[220,63787,1787],{"class":264},[220,63789,63790],{"class":222,"line":682},[220,63791,1792],{"class":264},[1504,63793,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63795},[63796,63797],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":63473,"description":63481},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":63804,"title":63805,"body":63806,"category":35559,"componentType":25883,"description":63813,"extension":191,"meta":64130,"navigation":194,"path":64131,"requiresChild":194,"seo":64132,"stem":64133,"__hash__":64134},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":63807,"toc":64126},[63808,63811,63814,63816,63818,63821,63823,64124],[11,63809,63805],{"id":63810},"pixelthrow",[15,63812,63813],{},"Throws pixels along the cursor's path like a fluid — brighter (or redder\u002Fgreener\u002Fbluer) pixels are flung farther, then settle back with friction",[31911,63815],{"component":63805},[23,63817,31915],{"id":26533},[31917,63819],{":props":63820},"[{\"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,63822,31923],{"id":31922},[246,63824,63825,63881,63940,63996,64054],{":tabs":1557},[212,63826,63828],{"className":334,"code":63827,"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,63829,63830,63838,63845,63853,63857,63865,63873],{"__ignoreMap":178},[220,63831,63832,63834,63836],{"class":222,"line":223},[220,63833,343],{"class":264},[220,63835,347],{"class":346},[220,63837,359],{"class":264},[220,63839,63840,63842],{"class":222,"line":179},[220,63841,364],{"class":264},[220,63843,63844],{"class":346},"PixelThrow\n",[220,63846,63847,63849,63851],{"class":222,"line":389},[220,63848,17405],{"class":226},[220,63850,353],{"class":264},[220,63852,61516],{"class":230},[220,63854,63855],{"class":222,"line":399},[220,63856,31959],{"class":264},[220,63858,63859,63861,63863],{"class":222,"line":644},[220,63860,2550],{"class":264},[220,63862,2553],{"class":346},[220,63864,386],{"class":264},[220,63866,63867,63869,63871],{"class":222,"line":650},[220,63868,2567],{"class":264},[220,63870,63805],{"class":346},[220,63872,359],{"class":264},[220,63874,63875,63877,63879],{"class":222,"line":656},[220,63876,402],{"class":264},[220,63878,347],{"class":346},[220,63880,359],{"class":264},[212,63882,63884],{"className":409,"code":63883,"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,63885,63886,63894,63900,63912,63916,63924,63932],{"__ignoreMap":178},[220,63887,63888,63890,63892],{"class":222,"line":223},[220,63889,343],{"class":264},[220,63891,347],{"class":420},[220,63893,359],{"class":264},[220,63895,63896,63898],{"class":222,"line":179},[220,63897,364],{"class":264},[220,63899,63844],{"class":420},[220,63901,63902,63904,63906,63908,63910],{"class":222,"line":389},[220,63903,9645],{"class":226},[220,63905,353],{"class":260},[220,63907,743],{"class":264},[220,63909,16976],{"class":420},[220,63911,749],{"class":264},[220,63913,63914],{"class":222,"line":399},[220,63915,31959],{"class":264},[220,63917,63918,63920,63922],{"class":222,"line":644},[220,63919,2550],{"class":264},[220,63921,2553],{"class":420},[220,63923,386],{"class":264},[220,63925,63926,63928,63930],{"class":222,"line":650},[220,63927,2567],{"class":264},[220,63929,63805],{"class":420},[220,63931,359],{"class":264},[220,63933,63934,63936,63938],{"class":222,"line":656},[220,63935,402],{"class":264},[220,63937,347],{"class":420},[220,63939,359],{"class":264},[212,63941,63942],{"className":2844,"code":63883,"language":2846,"meta":178,"style":178},[99,63943,63944,63952,63958,63968,63972,63980,63988],{"__ignoreMap":178},[220,63945,63946,63948,63950],{"class":222,"line":223},[220,63947,343],{"class":264},[220,63949,347],{"class":420},[220,63951,359],{"class":264},[220,63953,63954,63956],{"class":222,"line":179},[220,63955,364],{"class":264},[220,63957,63844],{"class":420},[220,63959,63960,63962,63964,63966],{"class":222,"line":389},[220,63961,9645],{"class":226},[220,63963,29871],{"class":264},[220,63965,16976],{"class":420},[220,63967,749],{"class":264},[220,63969,63970],{"class":222,"line":399},[220,63971,31959],{"class":264},[220,63973,63974,63976,63978],{"class":222,"line":644},[220,63975,2550],{"class":264},[220,63977,2553],{"class":420},[220,63979,386],{"class":264},[220,63981,63982,63984,63986],{"class":222,"line":650},[220,63983,2567],{"class":264},[220,63985,63805],{"class":420},[220,63987,359],{"class":264},[220,63989,63990,63992,63994],{"class":222,"line":656},[220,63991,402],{"class":264},[220,63993,347],{"class":420},[220,63995,359],{"class":264},[212,63997,63998],{"className":468,"code":63883,"language":469,"meta":178,"style":178},[99,63999,64000,64008,64014,64026,64030,64038,64046],{"__ignoreMap":178},[220,64001,64002,64004,64006],{"class":222,"line":223},[220,64003,343],{"class":264},[220,64005,347],{"class":420},[220,64007,359],{"class":264},[220,64009,64010,64012],{"class":222,"line":179},[220,64011,364],{"class":264},[220,64013,63844],{"class":420},[220,64015,64016,64018,64020,64022,64024],{"class":222,"line":389},[220,64017,9645],{"class":226},[220,64019,353],{"class":260},[220,64021,743],{"class":264},[220,64023,16976],{"class":420},[220,64025,749],{"class":264},[220,64027,64028],{"class":222,"line":399},[220,64029,31959],{"class":264},[220,64031,64032,64034,64036],{"class":222,"line":644},[220,64033,2550],{"class":264},[220,64035,2553],{"class":420},[220,64037,386],{"class":264},[220,64039,64040,64042,64044],{"class":222,"line":650},[220,64041,2567],{"class":264},[220,64043,63805],{"class":420},[220,64045,359],{"class":264},[220,64047,64048,64050,64052],{"class":222,"line":656},[220,64049,402],{"class":264},[220,64051,347],{"class":420},[220,64053,359],{"class":264},[212,64055,64057],{"className":251,"code":64056,"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,64058,64059,64069,64073,64087,64091,64104,64112,64116,64120],{"__ignoreMap":178},[220,64060,64061,64063,64065,64067],{"class":222,"line":223},[220,64062,261],{"class":260},[220,64064,11512],{"class":264},[220,64066,268],{"class":260},[220,64068,4007],{"class":230},[220,64070,64071],{"class":222,"line":179},[220,64072,647],{"emptyLinePlaceholder":194},[220,64074,64075,64077,64079,64081,64083,64085],{"class":222,"line":389},[220,64076,1735],{"class":260},[220,64078,1738],{"class":420},[220,64080,1741],{"class":260},[220,64082,1744],{"class":260},[220,64084,1747],{"class":226},[220,64086,1750],{"class":264},[220,64088,64089],{"class":222,"line":399},[220,64090,1765],{"class":264},[220,64092,64093,64095,64098,64100,64102],{"class":222,"line":644},[220,64094,1770],{"class":264},[220,64096,64097],{"class":230},"'PixelThrow'",[220,64099,7541],{"class":264},[220,64101,16976],{"class":420},[220,64103,7546],{"class":264},[220,64105,64106,64108,64110],{"class":222,"line":650},[220,64107,7014],{"class":264},[220,64109,3206],{"class":230},[220,64111,2465],{"class":264},[220,64113,64114],{"class":222,"line":656},[220,64115,7031],{"class":264},[220,64117,64118],{"class":222,"line":673},[220,64119,1787],{"class":264},[220,64121,64122],{"class":222,"line":682},[220,64123,1792],{"class":264},[1504,64125,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64127},[64128,64129],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":63805,"description":63813},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":64136,"title":64137,"body":64138,"category":32806,"componentType":25883,"description":64145,"extension":191,"meta":64406,"navigation":194,"path":64407,"requiresChild":194,"seo":64408,"stem":64409,"__hash__":64410},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":64139,"toc":64402},[64140,64143,64146,64148,64150,64153,64155,64400],[11,64141,64137],{"id":64142},"pixelate",[15,64144,64145],{},"Pixelation effect with adjustable cell size",[31911,64147],{"component":64137},[23,64149,31915],{"id":26533},[31917,64151],{":props":64152},"[{\"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,64154,31923],{"id":31922},[246,64156,64157,64202,64246,64290,64334],{":tabs":1557},[212,64158,64160],{"className":334,"code":64159,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,64161,64162,64170,64178,64186,64194],{"__ignoreMap":178},[220,64163,64164,64166,64168],{"class":222,"line":223},[220,64165,343],{"class":264},[220,64167,347],{"class":346},[220,64169,359],{"class":264},[220,64171,64172,64174,64176],{"class":222,"line":179},[220,64173,364],{"class":264},[220,64175,64137],{"class":346},[220,64177,359],{"class":264},[220,64179,64180,64182,64184],{"class":222,"line":389},[220,64181,2550],{"class":264},[220,64183,2553],{"class":346},[220,64185,386],{"class":264},[220,64187,64188,64190,64192],{"class":222,"line":399},[220,64189,2567],{"class":264},[220,64191,64137],{"class":346},[220,64193,359],{"class":264},[220,64195,64196,64198,64200],{"class":222,"line":644},[220,64197,402],{"class":264},[220,64199,347],{"class":346},[220,64201,359],{"class":264},[212,64203,64204],{"className":409,"code":64159,"language":411,"meta":178,"style":178},[99,64205,64206,64214,64222,64230,64238],{"__ignoreMap":178},[220,64207,64208,64210,64212],{"class":222,"line":223},[220,64209,343],{"class":264},[220,64211,347],{"class":420},[220,64213,359],{"class":264},[220,64215,64216,64218,64220],{"class":222,"line":179},[220,64217,364],{"class":264},[220,64219,64137],{"class":420},[220,64221,359],{"class":264},[220,64223,64224,64226,64228],{"class":222,"line":389},[220,64225,2550],{"class":264},[220,64227,2553],{"class":420},[220,64229,386],{"class":264},[220,64231,64232,64234,64236],{"class":222,"line":399},[220,64233,2567],{"class":264},[220,64235,64137],{"class":420},[220,64237,359],{"class":264},[220,64239,64240,64242,64244],{"class":222,"line":644},[220,64241,402],{"class":264},[220,64243,347],{"class":420},[220,64245,359],{"class":264},[212,64247,64248],{"className":2844,"code":64159,"language":2846,"meta":178,"style":178},[99,64249,64250,64258,64266,64274,64282],{"__ignoreMap":178},[220,64251,64252,64254,64256],{"class":222,"line":223},[220,64253,343],{"class":264},[220,64255,347],{"class":420},[220,64257,359],{"class":264},[220,64259,64260,64262,64264],{"class":222,"line":179},[220,64261,364],{"class":264},[220,64263,64137],{"class":420},[220,64265,359],{"class":264},[220,64267,64268,64270,64272],{"class":222,"line":389},[220,64269,2550],{"class":264},[220,64271,2553],{"class":420},[220,64273,386],{"class":264},[220,64275,64276,64278,64280],{"class":222,"line":399},[220,64277,2567],{"class":264},[220,64279,64137],{"class":420},[220,64281,359],{"class":264},[220,64283,64284,64286,64288],{"class":222,"line":644},[220,64285,402],{"class":264},[220,64287,347],{"class":420},[220,64289,359],{"class":264},[212,64291,64292],{"className":468,"code":64159,"language":469,"meta":178,"style":178},[99,64293,64294,64302,64310,64318,64326],{"__ignoreMap":178},[220,64295,64296,64298,64300],{"class":222,"line":223},[220,64297,343],{"class":264},[220,64299,347],{"class":420},[220,64301,359],{"class":264},[220,64303,64304,64306,64308],{"class":222,"line":179},[220,64305,364],{"class":264},[220,64307,64137],{"class":420},[220,64309,359],{"class":264},[220,64311,64312,64314,64316],{"class":222,"line":389},[220,64313,2550],{"class":264},[220,64315,2553],{"class":420},[220,64317,386],{"class":264},[220,64319,64320,64322,64324],{"class":222,"line":399},[220,64321,2567],{"class":264},[220,64323,64137],{"class":420},[220,64325,359],{"class":264},[220,64327,64328,64330,64332],{"class":222,"line":644},[220,64329,402],{"class":264},[220,64331,347],{"class":420},[220,64333,359],{"class":264},[212,64335,64337],{"className":251,"code":64336,"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,64338,64339,64349,64353,64367,64371,64380,64388,64392,64396],{"__ignoreMap":178},[220,64340,64341,64343,64345,64347],{"class":222,"line":223},[220,64342,261],{"class":260},[220,64344,11512],{"class":264},[220,64346,268],{"class":260},[220,64348,4007],{"class":230},[220,64350,64351],{"class":222,"line":179},[220,64352,647],{"emptyLinePlaceholder":194},[220,64354,64355,64357,64359,64361,64363,64365],{"class":222,"line":389},[220,64356,1735],{"class":260},[220,64358,1738],{"class":420},[220,64360,1741],{"class":260},[220,64362,1744],{"class":260},[220,64364,1747],{"class":226},[220,64366,1750],{"class":264},[220,64368,64369],{"class":222,"line":399},[220,64370,1765],{"class":264},[220,64372,64373,64375,64378],{"class":222,"line":644},[220,64374,1770],{"class":264},[220,64376,64377],{"class":230},"'Pixelate'",[220,64379,7009],{"class":264},[220,64381,64382,64384,64386],{"class":222,"line":650},[220,64383,7014],{"class":264},[220,64385,3206],{"class":230},[220,64387,2465],{"class":264},[220,64389,64390],{"class":222,"line":656},[220,64391,7031],{"class":264},[220,64393,64394],{"class":222,"line":673},[220,64395,1787],{"class":264},[220,64397,64398],{"class":222,"line":682},[220,64399,1792],{"class":264},[1504,64401,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":64403},[64404,64405],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":64137,"description":64145},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":64412,"title":13069,"body":64413,"category":33063,"componentType":25877,"description":64420,"extension":191,"meta":64661,"navigation":194,"path":64662,"requiresChild":32530,"seo":64663,"stem":64664,"__hash__":64665},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":64414,"toc":64657},[64415,64418,64421,64423,64425,64428,64430,64655],[11,64416,13069],{"id":64417},"plasma",[15,64419,64420],{},"Animated effect of glowing plasma",[31911,64422],{"component":13069},[23,64424,31915],{"id":26533},[31917,64426],{":props":64427},"[{\"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,64429,31923],{"id":31922},[246,64431,64432,64472,64515,64555,64597],{":tabs":1557},[212,64433,64435],{"className":334,"code":64434,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,64436,64437,64445,64452,64460,64464],{"__ignoreMap":178},[220,64438,64439,64441,64443],{"class":222,"line":223},[220,64440,343],{"class":264},[220,64442,347],{"class":346},[220,64444,359],{"class":264},[220,64446,64447,64449],{"class":222,"line":179},[220,64448,364],{"class":264},[220,64450,64451],{"class":346},"Plasma\n",[220,64453,64454,64456,64458],{"class":222,"line":389},[220,64455,20371],{"class":226},[220,64457,353],{"class":264},[220,64459,60678],{"class":230},[220,64461,64462],{"class":222,"line":399},[220,64463,1234],{"class":264},[220,64465,64466,64468,64470],{"class":222,"line":644},[220,64467,402],{"class":264},[220,64469,347],{"class":346},[220,64471,359],{"class":264},[212,64473,64475],{"className":409,"code":64474,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,64476,64477,64485,64491,64503,64507],{"__ignoreMap":178},[220,64478,64479,64481,64483],{"class":222,"line":223},[220,64480,343],{"class":264},[220,64482,347],{"class":420},[220,64484,359],{"class":264},[220,64486,64487,64489],{"class":222,"line":179},[220,64488,364],{"class":264},[220,64490,64451],{"class":420},[220,64492,64493,64495,64497,64499,64501],{"class":222,"line":389},[220,64494,20482],{"class":226},[220,64496,353],{"class":260},[220,64498,743],{"class":264},[220,64500,60728],{"class":420},[220,64502,749],{"class":264},[220,64504,64505],{"class":222,"line":399},[220,64506,1234],{"class":264},[220,64508,64509,64511,64513],{"class":222,"line":644},[220,64510,402],{"class":264},[220,64512,347],{"class":420},[220,64514,359],{"class":264},[212,64516,64517],{"className":2844,"code":64474,"language":2846,"meta":178,"style":178},[99,64518,64519,64527,64533,64543,64547],{"__ignoreMap":178},[220,64520,64521,64523,64525],{"class":222,"line":223},[220,64522,343],{"class":264},[220,64524,347],{"class":420},[220,64526,359],{"class":264},[220,64528,64529,64531],{"class":222,"line":179},[220,64530,364],{"class":264},[220,64532,64451],{"class":420},[220,64534,64535,64537,64539,64541],{"class":222,"line":389},[220,64536,20482],{"class":226},[220,64538,29871],{"class":264},[220,64540,60728],{"class":420},[220,64542,749],{"class":264},[220,64544,64545],{"class":222,"line":399},[220,64546,1234],{"class":264},[220,64548,64549,64551,64553],{"class":222,"line":644},[220,64550,402],{"class":264},[220,64552,347],{"class":420},[220,64554,359],{"class":264},[212,64556,64557],{"className":468,"code":64474,"language":469,"meta":178,"style":178},[99,64558,64559,64567,64573,64585,64589],{"__ignoreMap":178},[220,64560,64561,64563,64565],{"class":222,"line":223},[220,64562,343],{"class":264},[220,64564,347],{"class":420},[220,64566,359],{"class":264},[220,64568,64569,64571],{"class":222,"line":179},[220,64570,364],{"class":264},[220,64572,64451],{"class":420},[220,64574,64575,64577,64579,64581,64583],{"class":222,"line":389},[220,64576,20482],{"class":226},[220,64578,353],{"class":260},[220,64580,743],{"class":264},[220,64582,60728],{"class":420},[220,64584,749],{"class":264},[220,64586,64587],{"class":222,"line":399},[220,64588,1234],{"class":264},[220,64590,64591,64593,64595],{"class":222,"line":644},[220,64592,402],{"class":264},[220,64594,347],{"class":420},[220,64596,359],{"class":264},[212,64598,64600],{"className":251,"code":64599,"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,64601,64602,64612,64616,64630,64634,64647,64651],{"__ignoreMap":178},[220,64603,64604,64606,64608,64610],{"class":222,"line":223},[220,64605,261],{"class":260},[220,64607,11512],{"class":264},[220,64609,268],{"class":260},[220,64611,4007],{"class":230},[220,64613,64614],{"class":222,"line":179},[220,64615,647],{"emptyLinePlaceholder":194},[220,64617,64618,64620,64622,64624,64626,64628],{"class":222,"line":389},[220,64619,1735],{"class":260},[220,64621,1738],{"class":420},[220,64623,1741],{"class":260},[220,64625,1744],{"class":260},[220,64627,1747],{"class":226},[220,64629,1750],{"class":264},[220,64631,64632],{"class":222,"line":399},[220,64633,1765],{"class":264},[220,64635,64636,64638,64641,64643,64645],{"class":222,"line":644},[220,64637,1770],{"class":264},[220,64639,64640],{"class":230},"'Plasma'",[220,64642,32203],{"class":264},[220,64644,60728],{"class":420},[220,64646,1782],{"class":264},[220,64648,64649],{"class":222,"line":650},[220,64650,1787],{"class":264},[220,64652,64653],{"class":222,"line":656},[220,64654,1792],{"class":264},[1504,64656,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64658},[64659,64660],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":13069,"description":64420},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":64667,"title":64668,"body":64669,"category":36569,"componentType":25877,"description":64676,"extension":191,"meta":64861,"navigation":194,"path":64862,"requiresChild":32530,"seo":64863,"stem":64864,"__hash__":64865},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":64670,"toc":64857},[64671,64674,64677,64679,64681,64684,64686,64855],[11,64672,64668],{"id":64673},"plastic",[15,64675,64676],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[31911,64678],{"component":64668},[23,64680,31915],{"id":26533},[31917,64682],{":props":64683},"[{\"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,64685,31923],{"id":31922},[246,64687,64688,64717,64745,64773,64801],{":tabs":1557},[212,64689,64691],{"className":334,"code":64690,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,64692,64693,64701,64709],{"__ignoreMap":178},[220,64694,64695,64697,64699],{"class":222,"line":223},[220,64696,343],{"class":264},[220,64698,347],{"class":346},[220,64700,359],{"class":264},[220,64702,64703,64705,64707],{"class":222,"line":179},[220,64704,364],{"class":264},[220,64706,64668],{"class":346},[220,64708,386],{"class":264},[220,64710,64711,64713,64715],{"class":222,"line":389},[220,64712,402],{"class":264},[220,64714,347],{"class":346},[220,64716,359],{"class":264},[212,64718,64719],{"className":409,"code":64690,"language":411,"meta":178,"style":178},[99,64720,64721,64729,64737],{"__ignoreMap":178},[220,64722,64723,64725,64727],{"class":222,"line":223},[220,64724,343],{"class":264},[220,64726,347],{"class":420},[220,64728,359],{"class":264},[220,64730,64731,64733,64735],{"class":222,"line":179},[220,64732,364],{"class":264},[220,64734,64668],{"class":420},[220,64736,386],{"class":264},[220,64738,64739,64741,64743],{"class":222,"line":389},[220,64740,402],{"class":264},[220,64742,347],{"class":420},[220,64744,359],{"class":264},[212,64746,64747],{"className":2844,"code":64690,"language":2846,"meta":178,"style":178},[99,64748,64749,64757,64765],{"__ignoreMap":178},[220,64750,64751,64753,64755],{"class":222,"line":223},[220,64752,343],{"class":264},[220,64754,347],{"class":420},[220,64756,359],{"class":264},[220,64758,64759,64761,64763],{"class":222,"line":179},[220,64760,364],{"class":264},[220,64762,64668],{"class":420},[220,64764,386],{"class":264},[220,64766,64767,64769,64771],{"class":222,"line":389},[220,64768,402],{"class":264},[220,64770,347],{"class":420},[220,64772,359],{"class":264},[212,64774,64775],{"className":468,"code":64690,"language":469,"meta":178,"style":178},[99,64776,64777,64785,64793],{"__ignoreMap":178},[220,64778,64779,64781,64783],{"class":222,"line":223},[220,64780,343],{"class":264},[220,64782,347],{"class":420},[220,64784,359],{"class":264},[220,64786,64787,64789,64791],{"class":222,"line":179},[220,64788,364],{"class":264},[220,64790,64668],{"class":420},[220,64792,386],{"class":264},[220,64794,64795,64797,64799],{"class":222,"line":389},[220,64796,402],{"class":264},[220,64798,347],{"class":420},[220,64800,359],{"class":264},[212,64802,64804],{"className":251,"code":64803,"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,64805,64806,64816,64820,64834,64838,64847,64851],{"__ignoreMap":178},[220,64807,64808,64810,64812,64814],{"class":222,"line":223},[220,64809,261],{"class":260},[220,64811,11512],{"class":264},[220,64813,268],{"class":260},[220,64815,4007],{"class":230},[220,64817,64818],{"class":222,"line":179},[220,64819,647],{"emptyLinePlaceholder":194},[220,64821,64822,64824,64826,64828,64830,64832],{"class":222,"line":389},[220,64823,1735],{"class":260},[220,64825,1738],{"class":420},[220,64827,1741],{"class":260},[220,64829,1744],{"class":260},[220,64831,1747],{"class":226},[220,64833,1750],{"class":264},[220,64835,64836],{"class":222,"line":399},[220,64837,1765],{"class":264},[220,64839,64840,64842,64845],{"class":222,"line":644},[220,64841,1770],{"class":264},[220,64843,64844],{"class":230},"'Plastic'",[220,64846,2465],{"class":264},[220,64848,64849],{"class":222,"line":650},[220,64850,1787],{"class":264},[220,64852,64853],{"class":222,"line":656},[220,64854,1792],{"class":264},[1504,64856,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":64858},[64859,64860],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":64668,"description":64676},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":64867,"title":64868,"body":64869,"category":33396,"componentType":25883,"description":64876,"extension":191,"meta":65239,"navigation":194,"path":65240,"requiresChild":194,"seo":65241,"stem":65242,"__hash__":65243},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":64870,"toc":65235},[64871,64874,64877,64879,64881,64884,64886,65233],[11,64872,64868],{"id":64873},"polarcoordinates",[15,64875,64876],{},"Convert rectangular coordinates to polar space",[31911,64878],{"component":64868},[23,64880,31915],{"id":26533},[31917,64882],{":props":64883},"[{\"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,64885,31923],{"id":31922},[246,64887,64888,64952,65023,65089,65159],{":tabs":1557},[212,64889,64891],{"className":334,"code":64890,"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,64892,64893,64901,64908,64916,64924,64928,64936,64944],{"__ignoreMap":178},[220,64894,64895,64897,64899],{"class":222,"line":223},[220,64896,343],{"class":264},[220,64898,347],{"class":346},[220,64900,359],{"class":264},[220,64902,64903,64905],{"class":222,"line":179},[220,64904,364],{"class":264},[220,64906,64907],{"class":346},"PolarCoordinates\n",[220,64909,64910,64912,64914],{"class":222,"line":389},[220,64911,17405],{"class":226},[220,64913,353],{"class":264},[220,64915,36625],{"class":230},[220,64917,64918,64920,64922],{"class":222,"line":399},[220,64919,20371],{"class":226},[220,64921,353],{"class":264},[220,64923,36625],{"class":230},[220,64925,64926],{"class":222,"line":644},[220,64927,31959],{"class":264},[220,64929,64930,64932,64934],{"class":222,"line":650},[220,64931,2550],{"class":264},[220,64933,2553],{"class":346},[220,64935,386],{"class":264},[220,64937,64938,64940,64942],{"class":222,"line":656},[220,64939,2567],{"class":264},[220,64941,64868],{"class":346},[220,64943,359],{"class":264},[220,64945,64946,64948,64950],{"class":222,"line":673},[220,64947,402],{"class":264},[220,64949,347],{"class":346},[220,64951,359],{"class":264},[212,64953,64955],{"className":409,"code":64954,"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,64956,64957,64965,64971,64983,64995,64999,65007,65015],{"__ignoreMap":178},[220,64958,64959,64961,64963],{"class":222,"line":223},[220,64960,343],{"class":264},[220,64962,347],{"class":420},[220,64964,359],{"class":264},[220,64966,64967,64969],{"class":222,"line":179},[220,64968,364],{"class":264},[220,64970,64907],{"class":420},[220,64972,64973,64975,64977,64979,64981],{"class":222,"line":389},[220,64974,9645],{"class":226},[220,64976,353],{"class":260},[220,64978,743],{"class":264},[220,64980,8677],{"class":420},[220,64982,749],{"class":264},[220,64984,64985,64987,64989,64991,64993],{"class":222,"line":399},[220,64986,20482],{"class":226},[220,64988,353],{"class":260},[220,64990,743],{"class":264},[220,64992,8677],{"class":420},[220,64994,749],{"class":264},[220,64996,64997],{"class":222,"line":644},[220,64998,31959],{"class":264},[220,65000,65001,65003,65005],{"class":222,"line":650},[220,65002,2550],{"class":264},[220,65004,2553],{"class":420},[220,65006,386],{"class":264},[220,65008,65009,65011,65013],{"class":222,"line":656},[220,65010,2567],{"class":264},[220,65012,64868],{"class":420},[220,65014,359],{"class":264},[220,65016,65017,65019,65021],{"class":222,"line":673},[220,65018,402],{"class":264},[220,65020,347],{"class":420},[220,65022,359],{"class":264},[212,65024,65025],{"className":2844,"code":64954,"language":2846,"meta":178,"style":178},[99,65026,65027,65035,65041,65051,65061,65065,65073,65081],{"__ignoreMap":178},[220,65028,65029,65031,65033],{"class":222,"line":223},[220,65030,343],{"class":264},[220,65032,347],{"class":420},[220,65034,359],{"class":264},[220,65036,65037,65039],{"class":222,"line":179},[220,65038,364],{"class":264},[220,65040,64907],{"class":420},[220,65042,65043,65045,65047,65049],{"class":222,"line":389},[220,65044,9645],{"class":226},[220,65046,29871],{"class":264},[220,65048,8677],{"class":420},[220,65050,749],{"class":264},[220,65052,65053,65055,65057,65059],{"class":222,"line":399},[220,65054,20482],{"class":226},[220,65056,29871],{"class":264},[220,65058,8677],{"class":420},[220,65060,749],{"class":264},[220,65062,65063],{"class":222,"line":644},[220,65064,31959],{"class":264},[220,65066,65067,65069,65071],{"class":222,"line":650},[220,65068,2550],{"class":264},[220,65070,2553],{"class":420},[220,65072,386],{"class":264},[220,65074,65075,65077,65079],{"class":222,"line":656},[220,65076,2567],{"class":264},[220,65078,64868],{"class":420},[220,65080,359],{"class":264},[220,65082,65083,65085,65087],{"class":222,"line":673},[220,65084,402],{"class":264},[220,65086,347],{"class":420},[220,65088,359],{"class":264},[212,65090,65091],{"className":468,"code":64954,"language":469,"meta":178,"style":178},[99,65092,65093,65101,65107,65119,65131,65135,65143,65151],{"__ignoreMap":178},[220,65094,65095,65097,65099],{"class":222,"line":223},[220,65096,343],{"class":264},[220,65098,347],{"class":420},[220,65100,359],{"class":264},[220,65102,65103,65105],{"class":222,"line":179},[220,65104,364],{"class":264},[220,65106,64907],{"class":420},[220,65108,65109,65111,65113,65115,65117],{"class":222,"line":389},[220,65110,9645],{"class":226},[220,65112,353],{"class":260},[220,65114,743],{"class":264},[220,65116,8677],{"class":420},[220,65118,749],{"class":264},[220,65120,65121,65123,65125,65127,65129],{"class":222,"line":399},[220,65122,20482],{"class":226},[220,65124,353],{"class":260},[220,65126,743],{"class":264},[220,65128,8677],{"class":420},[220,65130,749],{"class":264},[220,65132,65133],{"class":222,"line":644},[220,65134,31959],{"class":264},[220,65136,65137,65139,65141],{"class":222,"line":650},[220,65138,2550],{"class":264},[220,65140,2553],{"class":420},[220,65142,386],{"class":264},[220,65144,65145,65147,65149],{"class":222,"line":656},[220,65146,2567],{"class":264},[220,65148,64868],{"class":420},[220,65150,359],{"class":264},[220,65152,65153,65155,65157],{"class":222,"line":673},[220,65154,402],{"class":264},[220,65156,347],{"class":420},[220,65158,359],{"class":264},[212,65160,65162],{"className":251,"code":65161,"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,65163,65164,65174,65178,65192,65196,65213,65221,65225,65229],{"__ignoreMap":178},[220,65165,65166,65168,65170,65172],{"class":222,"line":223},[220,65167,261],{"class":260},[220,65169,11512],{"class":264},[220,65171,268],{"class":260},[220,65173,4007],{"class":230},[220,65175,65176],{"class":222,"line":179},[220,65177,647],{"emptyLinePlaceholder":194},[220,65179,65180,65182,65184,65186,65188,65190],{"class":222,"line":389},[220,65181,1735],{"class":260},[220,65183,1738],{"class":420},[220,65185,1741],{"class":260},[220,65187,1744],{"class":260},[220,65189,1747],{"class":226},[220,65191,1750],{"class":264},[220,65193,65194],{"class":222,"line":399},[220,65195,1765],{"class":264},[220,65197,65198,65200,65203,65205,65207,65209,65211],{"class":222,"line":644},[220,65199,1770],{"class":264},[220,65201,65202],{"class":230},"'PolarCoordinates'",[220,65204,7541],{"class":264},[220,65206,8677],{"class":420},[220,65208,45203],{"class":264},[220,65210,8677],{"class":420},[220,65212,7546],{"class":264},[220,65214,65215,65217,65219],{"class":222,"line":650},[220,65216,7014],{"class":264},[220,65218,3206],{"class":230},[220,65220,2465],{"class":264},[220,65222,65223],{"class":222,"line":656},[220,65224,7031],{"class":264},[220,65226,65227],{"class":222,"line":673},[220,65228,1787],{"class":264},[220,65230,65231],{"class":222,"line":682},[220,65232,1792],{"class":264},[1504,65234,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65236},[65237,65238],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":64868,"description":64876},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":65245,"title":65246,"body":65247,"category":15908,"componentType":25877,"description":65254,"extension":191,"meta":65531,"navigation":194,"path":65532,"requiresChild":32530,"seo":65533,"stem":65534,"__hash__":65535},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":65248,"toc":65527},[65249,65252,65255,65257,65259,65262,65264,65525],[11,65250,65246],{"id":65251},"polygon",[15,65253,65254],{},"Regular polygon with adjustable sides and corner rounding",[31911,65256],{"component":65246},[23,65258,31915],{"id":26533},[31917,65260],{":props":65261},"[{\"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,65263,31923],{"id":31922},[246,65265,65266,65314,65365,65413,65463],{":tabs":1557},[212,65267,65269],{"className":334,"code":65268,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,65270,65271,65279,65286,65294,65302,65306],{"__ignoreMap":178},[220,65272,65273,65275,65277],{"class":222,"line":223},[220,65274,343],{"class":264},[220,65276,347],{"class":346},[220,65278,359],{"class":264},[220,65280,65281,65283],{"class":222,"line":179},[220,65282,364],{"class":264},[220,65284,65285],{"class":346},"Polygon\n",[220,65287,65288,65290,65292],{"class":222,"line":389},[220,65289,9635],{"class":226},[220,65291,353],{"class":264},[220,65293,9591],{"class":230},[220,65295,65296,65298,65300],{"class":222,"line":399},[220,65297,17405],{"class":226},[220,65299,353],{"class":264},[220,65301,48348],{"class":230},[220,65303,65304],{"class":222,"line":644},[220,65305,1234],{"class":264},[220,65307,65308,65310,65312],{"class":222,"line":650},[220,65309,402],{"class":264},[220,65311,347],{"class":346},[220,65313,359],{"class":264},[212,65315,65317],{"className":409,"code":65316,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,65318,65319,65327,65333,65341,65353,65357],{"__ignoreMap":178},[220,65320,65321,65323,65325],{"class":222,"line":223},[220,65322,343],{"class":264},[220,65324,347],{"class":420},[220,65326,359],{"class":264},[220,65328,65329,65331],{"class":222,"line":179},[220,65330,364],{"class":264},[220,65332,65285],{"class":420},[220,65334,65335,65337,65339],{"class":222,"line":389},[220,65336,9635],{"class":226},[220,65338,353],{"class":260},[220,65340,9591],{"class":230},[220,65342,65343,65345,65347,65349,65351],{"class":222,"line":399},[220,65344,9645],{"class":226},[220,65346,353],{"class":260},[220,65348,743],{"class":264},[220,65350,8249],{"class":420},[220,65352,749],{"class":264},[220,65354,65355],{"class":222,"line":644},[220,65356,1234],{"class":264},[220,65358,65359,65361,65363],{"class":222,"line":650},[220,65360,402],{"class":264},[220,65362,347],{"class":420},[220,65364,359],{"class":264},[212,65366,65367],{"className":2844,"code":65316,"language":2846,"meta":178,"style":178},[99,65368,65369,65377,65383,65391,65401,65405],{"__ignoreMap":178},[220,65370,65371,65373,65375],{"class":222,"line":223},[220,65372,343],{"class":264},[220,65374,347],{"class":420},[220,65376,359],{"class":264},[220,65378,65379,65381],{"class":222,"line":179},[220,65380,364],{"class":264},[220,65382,65285],{"class":420},[220,65384,65385,65387,65389],{"class":222,"line":389},[220,65386,9635],{"class":226},[220,65388,353],{"class":264},[220,65390,9591],{"class":230},[220,65392,65393,65395,65397,65399],{"class":222,"line":399},[220,65394,9645],{"class":226},[220,65396,29871],{"class":264},[220,65398,8249],{"class":420},[220,65400,749],{"class":264},[220,65402,65403],{"class":222,"line":644},[220,65404,1234],{"class":264},[220,65406,65407,65409,65411],{"class":222,"line":650},[220,65408,402],{"class":264},[220,65410,347],{"class":420},[220,65412,359],{"class":264},[212,65414,65415],{"className":468,"code":65316,"language":469,"meta":178,"style":178},[99,65416,65417,65425,65431,65439,65451,65455],{"__ignoreMap":178},[220,65418,65419,65421,65423],{"class":222,"line":223},[220,65420,343],{"class":264},[220,65422,347],{"class":420},[220,65424,359],{"class":264},[220,65426,65427,65429],{"class":222,"line":179},[220,65428,364],{"class":264},[220,65430,65285],{"class":420},[220,65432,65433,65435,65437],{"class":222,"line":389},[220,65434,9635],{"class":226},[220,65436,353],{"class":260},[220,65438,9591],{"class":230},[220,65440,65441,65443,65445,65447,65449],{"class":222,"line":399},[220,65442,9645],{"class":226},[220,65444,353],{"class":260},[220,65446,743],{"class":264},[220,65448,8249],{"class":420},[220,65450,749],{"class":264},[220,65452,65453],{"class":222,"line":644},[220,65454,1234],{"class":264},[220,65456,65457,65459,65461],{"class":222,"line":650},[220,65458,402],{"class":264},[220,65460,347],{"class":420},[220,65462,359],{"class":264},[212,65464,65466],{"className":251,"code":65465,"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,65467,65468,65478,65482,65496,65500,65517,65521],{"__ignoreMap":178},[220,65469,65470,65472,65474,65476],{"class":222,"line":223},[220,65471,261],{"class":260},[220,65473,11512],{"class":264},[220,65475,268],{"class":260},[220,65477,4007],{"class":230},[220,65479,65480],{"class":222,"line":179},[220,65481,647],{"emptyLinePlaceholder":194},[220,65483,65484,65486,65488,65490,65492,65494],{"class":222,"line":389},[220,65485,1735],{"class":260},[220,65487,1738],{"class":420},[220,65489,1741],{"class":260},[220,65491,1744],{"class":260},[220,65493,1747],{"class":226},[220,65495,1750],{"class":264},[220,65497,65498],{"class":222,"line":399},[220,65499,1765],{"class":264},[220,65501,65502,65504,65507,65509,65511,65513,65515],{"class":222,"line":644},[220,65503,1770],{"class":264},[220,65505,65506],{"class":230},"'Polygon'",[220,65508,1776],{"class":264},[220,65510,10169],{"class":230},[220,65512,6566],{"class":264},[220,65514,8249],{"class":420},[220,65516,1782],{"class":264},[220,65518,65519],{"class":222,"line":650},[220,65520,1787],{"class":264},[220,65522,65523],{"class":222,"line":656},[220,65524,1792],{"class":264},[1504,65526,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65528},[65529,65530],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":65246,"description":65254},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":65537,"title":65538,"body":65539,"category":36368,"componentType":25883,"description":65546,"extension":191,"meta":65864,"navigation":194,"path":65865,"requiresChild":194,"seo":65866,"stem":65867,"__hash__":65868},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":65540,"toc":65860},[65541,65544,65547,65549,65551,65554,65556,65858],[11,65542,65538],{"id":65543},"posterize",[15,65545,65546],{},"Reduce color depth to create a poster effect",[31911,65548],{"component":65538},[23,65550,31915],{"id":26533},[31917,65552],{":props":65553},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,65555,31923],{"id":31922},[246,65557,65558,65615,65674,65730,65788],{":tabs":1557},[212,65559,65561],{"className":334,"code":65560,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,65562,65563,65571,65578,65587,65591,65599,65607],{"__ignoreMap":178},[220,65564,65565,65567,65569],{"class":222,"line":223},[220,65566,343],{"class":264},[220,65568,347],{"class":346},[220,65570,359],{"class":264},[220,65572,65573,65575],{"class":222,"line":179},[220,65574,364],{"class":264},[220,65576,65577],{"class":346},"Posterize\n",[220,65579,65580,65582,65584],{"class":222,"line":389},[220,65581,20371],{"class":226},[220,65583,353],{"class":264},[220,65585,65586],{"class":230},"\"5\"\n",[220,65588,65589],{"class":222,"line":399},[220,65590,31959],{"class":264},[220,65592,65593,65595,65597],{"class":222,"line":644},[220,65594,2550],{"class":264},[220,65596,2553],{"class":346},[220,65598,386],{"class":264},[220,65600,65601,65603,65605],{"class":222,"line":650},[220,65602,2567],{"class":264},[220,65604,65538],{"class":346},[220,65606,359],{"class":264},[220,65608,65609,65611,65613],{"class":222,"line":656},[220,65610,402],{"class":264},[220,65612,347],{"class":346},[220,65614,359],{"class":264},[212,65616,65618],{"className":409,"code":65617,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,65619,65620,65628,65634,65646,65650,65658,65666],{"__ignoreMap":178},[220,65621,65622,65624,65626],{"class":222,"line":223},[220,65623,343],{"class":264},[220,65625,347],{"class":420},[220,65627,359],{"class":264},[220,65629,65630,65632],{"class":222,"line":179},[220,65631,364],{"class":264},[220,65633,65577],{"class":420},[220,65635,65636,65638,65640,65642,65644],{"class":222,"line":389},[220,65637,20482],{"class":226},[220,65639,353],{"class":260},[220,65641,743],{"class":264},[220,65643,22093],{"class":420},[220,65645,749],{"class":264},[220,65647,65648],{"class":222,"line":399},[220,65649,31959],{"class":264},[220,65651,65652,65654,65656],{"class":222,"line":644},[220,65653,2550],{"class":264},[220,65655,2553],{"class":420},[220,65657,386],{"class":264},[220,65659,65660,65662,65664],{"class":222,"line":650},[220,65661,2567],{"class":264},[220,65663,65538],{"class":420},[220,65665,359],{"class":264},[220,65667,65668,65670,65672],{"class":222,"line":656},[220,65669,402],{"class":264},[220,65671,347],{"class":420},[220,65673,359],{"class":264},[212,65675,65676],{"className":2844,"code":65617,"language":2846,"meta":178,"style":178},[99,65677,65678,65686,65692,65702,65706,65714,65722],{"__ignoreMap":178},[220,65679,65680,65682,65684],{"class":222,"line":223},[220,65681,343],{"class":264},[220,65683,347],{"class":420},[220,65685,359],{"class":264},[220,65687,65688,65690],{"class":222,"line":179},[220,65689,364],{"class":264},[220,65691,65577],{"class":420},[220,65693,65694,65696,65698,65700],{"class":222,"line":389},[220,65695,20482],{"class":226},[220,65697,29871],{"class":264},[220,65699,22093],{"class":420},[220,65701,749],{"class":264},[220,65703,65704],{"class":222,"line":399},[220,65705,31959],{"class":264},[220,65707,65708,65710,65712],{"class":222,"line":644},[220,65709,2550],{"class":264},[220,65711,2553],{"class":420},[220,65713,386],{"class":264},[220,65715,65716,65718,65720],{"class":222,"line":650},[220,65717,2567],{"class":264},[220,65719,65538],{"class":420},[220,65721,359],{"class":264},[220,65723,65724,65726,65728],{"class":222,"line":656},[220,65725,402],{"class":264},[220,65727,347],{"class":420},[220,65729,359],{"class":264},[212,65731,65732],{"className":468,"code":65617,"language":469,"meta":178,"style":178},[99,65733,65734,65742,65748,65760,65764,65772,65780],{"__ignoreMap":178},[220,65735,65736,65738,65740],{"class":222,"line":223},[220,65737,343],{"class":264},[220,65739,347],{"class":420},[220,65741,359],{"class":264},[220,65743,65744,65746],{"class":222,"line":179},[220,65745,364],{"class":264},[220,65747,65577],{"class":420},[220,65749,65750,65752,65754,65756,65758],{"class":222,"line":389},[220,65751,20482],{"class":226},[220,65753,353],{"class":260},[220,65755,743],{"class":264},[220,65757,22093],{"class":420},[220,65759,749],{"class":264},[220,65761,65762],{"class":222,"line":399},[220,65763,31959],{"class":264},[220,65765,65766,65768,65770],{"class":222,"line":644},[220,65767,2550],{"class":264},[220,65769,2553],{"class":420},[220,65771,386],{"class":264},[220,65773,65774,65776,65778],{"class":222,"line":650},[220,65775,2567],{"class":264},[220,65777,65538],{"class":420},[220,65779,359],{"class":264},[220,65781,65782,65784,65786],{"class":222,"line":656},[220,65783,402],{"class":264},[220,65785,347],{"class":420},[220,65787,359],{"class":264},[212,65789,65791],{"className":251,"code":65790,"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,65792,65793,65803,65807,65821,65825,65838,65846,65850,65854],{"__ignoreMap":178},[220,65794,65795,65797,65799,65801],{"class":222,"line":223},[220,65796,261],{"class":260},[220,65798,11512],{"class":264},[220,65800,268],{"class":260},[220,65802,4007],{"class":230},[220,65804,65805],{"class":222,"line":179},[220,65806,647],{"emptyLinePlaceholder":194},[220,65808,65809,65811,65813,65815,65817,65819],{"class":222,"line":389},[220,65810,1735],{"class":260},[220,65812,1738],{"class":420},[220,65814,1741],{"class":260},[220,65816,1744],{"class":260},[220,65818,1747],{"class":226},[220,65820,1750],{"class":264},[220,65822,65823],{"class":222,"line":399},[220,65824,1765],{"class":264},[220,65826,65827,65829,65832,65834,65836],{"class":222,"line":644},[220,65828,1770],{"class":264},[220,65830,65831],{"class":230},"'Posterize'",[220,65833,32203],{"class":264},[220,65835,22093],{"class":420},[220,65837,7546],{"class":264},[220,65839,65840,65842,65844],{"class":222,"line":650},[220,65841,7014],{"class":264},[220,65843,3206],{"class":230},[220,65845,2465],{"class":264},[220,65847,65848],{"class":222,"line":656},[220,65849,7031],{"class":264},[220,65851,65852],{"class":222,"line":673},[220,65853,1787],{"class":264},[220,65855,65856],{"class":222,"line":682},[220,65857,1792],{"class":264},[1504,65859,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65861},[65862,65863],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":65538,"description":65546},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":65870,"title":65871,"body":65872,"category":33063,"componentType":25877,"description":65879,"extension":191,"meta":66122,"navigation":194,"path":66123,"requiresChild":32530,"seo":66124,"stem":66125,"__hash__":66126},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":65873,"toc":66118},[65874,65877,65880,65882,65884,65887,65889,66116],[11,65875,65871],{"id":65876},"prism",[15,65878,65879],{},"A beam of light that fans out and splits into a slowly-rotating rainbow past a controllable point. Transparent background — composite over a dark layer.",[31911,65881],{"component":65871},[23,65883,31915],{"id":26533},[31917,65885],{":props":65886},"[{\"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,65888,31923],{"id":31922},[246,65890,65891,65932,65976,66016,66058],{":tabs":1557},[212,65892,65894],{"className":334,"code":65893,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,65895,65896,65904,65911,65920,65924],{"__ignoreMap":178},[220,65897,65898,65900,65902],{"class":222,"line":223},[220,65899,343],{"class":264},[220,65901,347],{"class":346},[220,65903,359],{"class":264},[220,65905,65906,65908],{"class":222,"line":179},[220,65907,364],{"class":264},[220,65909,65910],{"class":346},"Prism\n",[220,65912,65913,65915,65917],{"class":222,"line":389},[220,65914,20371],{"class":226},[220,65916,353],{"class":264},[220,65918,65919],{"class":230},"\"1.6\"\n",[220,65921,65922],{"class":222,"line":399},[220,65923,1234],{"class":264},[220,65925,65926,65928,65930],{"class":222,"line":644},[220,65927,402],{"class":264},[220,65929,347],{"class":346},[220,65931,359],{"class":264},[212,65933,65935],{"className":409,"code":65934,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,65936,65937,65945,65951,65964,65968],{"__ignoreMap":178},[220,65938,65939,65941,65943],{"class":222,"line":223},[220,65940,343],{"class":264},[220,65942,347],{"class":420},[220,65944,359],{"class":264},[220,65946,65947,65949],{"class":222,"line":179},[220,65948,364],{"class":264},[220,65950,65910],{"class":420},[220,65952,65953,65955,65957,65959,65962],{"class":222,"line":389},[220,65954,20482],{"class":226},[220,65956,353],{"class":260},[220,65958,743],{"class":264},[220,65960,65961],{"class":420},"1.6",[220,65963,749],{"class":264},[220,65965,65966],{"class":222,"line":399},[220,65967,1234],{"class":264},[220,65969,65970,65972,65974],{"class":222,"line":644},[220,65971,402],{"class":264},[220,65973,347],{"class":420},[220,65975,359],{"class":264},[212,65977,65978],{"className":2844,"code":65934,"language":2846,"meta":178,"style":178},[99,65979,65980,65988,65994,66004,66008],{"__ignoreMap":178},[220,65981,65982,65984,65986],{"class":222,"line":223},[220,65983,343],{"class":264},[220,65985,347],{"class":420},[220,65987,359],{"class":264},[220,65989,65990,65992],{"class":222,"line":179},[220,65991,364],{"class":264},[220,65993,65910],{"class":420},[220,65995,65996,65998,66000,66002],{"class":222,"line":389},[220,65997,20482],{"class":226},[220,65999,29871],{"class":264},[220,66001,65961],{"class":420},[220,66003,749],{"class":264},[220,66005,66006],{"class":222,"line":399},[220,66007,1234],{"class":264},[220,66009,66010,66012,66014],{"class":222,"line":644},[220,66011,402],{"class":264},[220,66013,347],{"class":420},[220,66015,359],{"class":264},[212,66017,66018],{"className":468,"code":65934,"language":469,"meta":178,"style":178},[99,66019,66020,66028,66034,66046,66050],{"__ignoreMap":178},[220,66021,66022,66024,66026],{"class":222,"line":223},[220,66023,343],{"class":264},[220,66025,347],{"class":420},[220,66027,359],{"class":264},[220,66029,66030,66032],{"class":222,"line":179},[220,66031,364],{"class":264},[220,66033,65910],{"class":420},[220,66035,66036,66038,66040,66042,66044],{"class":222,"line":389},[220,66037,20482],{"class":226},[220,66039,353],{"class":260},[220,66041,743],{"class":264},[220,66043,65961],{"class":420},[220,66045,749],{"class":264},[220,66047,66048],{"class":222,"line":399},[220,66049,1234],{"class":264},[220,66051,66052,66054,66056],{"class":222,"line":644},[220,66053,402],{"class":264},[220,66055,347],{"class":420},[220,66057,359],{"class":264},[212,66059,66061],{"className":251,"code":66060,"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,66062,66063,66073,66077,66091,66095,66108,66112],{"__ignoreMap":178},[220,66064,66065,66067,66069,66071],{"class":222,"line":223},[220,66066,261],{"class":260},[220,66068,11512],{"class":264},[220,66070,268],{"class":260},[220,66072,4007],{"class":230},[220,66074,66075],{"class":222,"line":179},[220,66076,647],{"emptyLinePlaceholder":194},[220,66078,66079,66081,66083,66085,66087,66089],{"class":222,"line":389},[220,66080,1735],{"class":260},[220,66082,1738],{"class":420},[220,66084,1741],{"class":260},[220,66086,1744],{"class":260},[220,66088,1747],{"class":226},[220,66090,1750],{"class":264},[220,66092,66093],{"class":222,"line":399},[220,66094,1765],{"class":264},[220,66096,66097,66099,66102,66104,66106],{"class":222,"line":644},[220,66098,1770],{"class":264},[220,66100,66101],{"class":230},"'Prism'",[220,66103,32203],{"class":264},[220,66105,65961],{"class":420},[220,66107,1782],{"class":264},[220,66109,66110],{"class":222,"line":650},[220,66111,1787],{"class":264},[220,66113,66114],{"class":222,"line":656},[220,66115,1792],{"class":264},[1504,66117,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66119},[66120,66121],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":65871,"description":65879},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":66128,"title":66129,"body":66130,"category":32234,"componentType":25883,"description":66137,"extension":191,"meta":66454,"navigation":194,"path":66455,"requiresChild":194,"seo":66456,"stem":66457,"__hash__":66458},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":66131,"toc":66450},[66132,66135,66138,66140,66142,66145,66147,66448],[11,66133,66129],{"id":66134},"progressiveblur",[15,66136,66137],{},"Blur that increases progressively in one direction",[31911,66139],{"component":66129},[23,66141,31915],{"id":26533},[31917,66143],{":props":66144},"[{\"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,66146,31923],{"id":31922},[246,66148,66149,66205,66264,66320,66378],{":tabs":1557},[212,66150,66152],{"className":334,"code":66151,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,66153,66154,66162,66169,66177,66181,66189,66197],{"__ignoreMap":178},[220,66155,66156,66158,66160],{"class":222,"line":223},[220,66157,343],{"class":264},[220,66159,347],{"class":346},[220,66161,359],{"class":264},[220,66163,66164,66166],{"class":222,"line":179},[220,66165,364],{"class":264},[220,66167,66168],{"class":346},"ProgressiveBlur\n",[220,66170,66171,66173,66175],{"class":222,"line":389},[220,66172,20371],{"class":226},[220,66174,353],{"class":264},[220,66176,35080],{"class":230},[220,66178,66179],{"class":222,"line":399},[220,66180,31959],{"class":264},[220,66182,66183,66185,66187],{"class":222,"line":644},[220,66184,2550],{"class":264},[220,66186,2553],{"class":346},[220,66188,386],{"class":264},[220,66190,66191,66193,66195],{"class":222,"line":650},[220,66192,2567],{"class":264},[220,66194,66129],{"class":346},[220,66196,359],{"class":264},[220,66198,66199,66201,66203],{"class":222,"line":656},[220,66200,402],{"class":264},[220,66202,347],{"class":346},[220,66204,359],{"class":264},[212,66206,66208],{"className":409,"code":66207,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,66209,66210,66218,66224,66236,66240,66248,66256],{"__ignoreMap":178},[220,66211,66212,66214,66216],{"class":222,"line":223},[220,66213,343],{"class":264},[220,66215,347],{"class":420},[220,66217,359],{"class":264},[220,66219,66220,66222],{"class":222,"line":179},[220,66221,364],{"class":264},[220,66223,66168],{"class":420},[220,66225,66226,66228,66230,66232,66234],{"class":222,"line":389},[220,66227,20482],{"class":226},[220,66229,353],{"class":260},[220,66231,743],{"class":264},[220,66233,35138],{"class":420},[220,66235,749],{"class":264},[220,66237,66238],{"class":222,"line":399},[220,66239,31959],{"class":264},[220,66241,66242,66244,66246],{"class":222,"line":644},[220,66243,2550],{"class":264},[220,66245,2553],{"class":420},[220,66247,386],{"class":264},[220,66249,66250,66252,66254],{"class":222,"line":650},[220,66251,2567],{"class":264},[220,66253,66129],{"class":420},[220,66255,359],{"class":264},[220,66257,66258,66260,66262],{"class":222,"line":656},[220,66259,402],{"class":264},[220,66261,347],{"class":420},[220,66263,359],{"class":264},[212,66265,66266],{"className":2844,"code":66207,"language":2846,"meta":178,"style":178},[99,66267,66268,66276,66282,66292,66296,66304,66312],{"__ignoreMap":178},[220,66269,66270,66272,66274],{"class":222,"line":223},[220,66271,343],{"class":264},[220,66273,347],{"class":420},[220,66275,359],{"class":264},[220,66277,66278,66280],{"class":222,"line":179},[220,66279,364],{"class":264},[220,66281,66168],{"class":420},[220,66283,66284,66286,66288,66290],{"class":222,"line":389},[220,66285,20482],{"class":226},[220,66287,29871],{"class":264},[220,66289,35138],{"class":420},[220,66291,749],{"class":264},[220,66293,66294],{"class":222,"line":399},[220,66295,31959],{"class":264},[220,66297,66298,66300,66302],{"class":222,"line":644},[220,66299,2550],{"class":264},[220,66301,2553],{"class":420},[220,66303,386],{"class":264},[220,66305,66306,66308,66310],{"class":222,"line":650},[220,66307,2567],{"class":264},[220,66309,66129],{"class":420},[220,66311,359],{"class":264},[220,66313,66314,66316,66318],{"class":222,"line":656},[220,66315,402],{"class":264},[220,66317,347],{"class":420},[220,66319,359],{"class":264},[212,66321,66322],{"className":468,"code":66207,"language":469,"meta":178,"style":178},[99,66323,66324,66332,66338,66350,66354,66362,66370],{"__ignoreMap":178},[220,66325,66326,66328,66330],{"class":222,"line":223},[220,66327,343],{"class":264},[220,66329,347],{"class":420},[220,66331,359],{"class":264},[220,66333,66334,66336],{"class":222,"line":179},[220,66335,364],{"class":264},[220,66337,66168],{"class":420},[220,66339,66340,66342,66344,66346,66348],{"class":222,"line":389},[220,66341,20482],{"class":226},[220,66343,353],{"class":260},[220,66345,743],{"class":264},[220,66347,35138],{"class":420},[220,66349,749],{"class":264},[220,66351,66352],{"class":222,"line":399},[220,66353,31959],{"class":264},[220,66355,66356,66358,66360],{"class":222,"line":644},[220,66357,2550],{"class":264},[220,66359,2553],{"class":420},[220,66361,386],{"class":264},[220,66363,66364,66366,66368],{"class":222,"line":650},[220,66365,2567],{"class":264},[220,66367,66129],{"class":420},[220,66369,359],{"class":264},[220,66371,66372,66374,66376],{"class":222,"line":656},[220,66373,402],{"class":264},[220,66375,347],{"class":420},[220,66377,359],{"class":264},[212,66379,66381],{"className":251,"code":66380,"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,66382,66383,66393,66397,66411,66415,66428,66436,66440,66444],{"__ignoreMap":178},[220,66384,66385,66387,66389,66391],{"class":222,"line":223},[220,66386,261],{"class":260},[220,66388,11512],{"class":264},[220,66390,268],{"class":260},[220,66392,4007],{"class":230},[220,66394,66395],{"class":222,"line":179},[220,66396,647],{"emptyLinePlaceholder":194},[220,66398,66399,66401,66403,66405,66407,66409],{"class":222,"line":389},[220,66400,1735],{"class":260},[220,66402,1738],{"class":420},[220,66404,1741],{"class":260},[220,66406,1744],{"class":260},[220,66408,1747],{"class":226},[220,66410,1750],{"class":264},[220,66412,66413],{"class":222,"line":399},[220,66414,1765],{"class":264},[220,66416,66417,66419,66422,66424,66426],{"class":222,"line":644},[220,66418,1770],{"class":264},[220,66420,66421],{"class":230},"'ProgressiveBlur'",[220,66423,32203],{"class":264},[220,66425,35138],{"class":420},[220,66427,7546],{"class":264},[220,66429,66430,66432,66434],{"class":222,"line":650},[220,66431,7014],{"class":264},[220,66433,3206],{"class":230},[220,66435,2465],{"class":264},[220,66437,66438],{"class":222,"line":656},[220,66439,7031],{"class":264},[220,66441,66442],{"class":222,"line":673},[220,66443,1787],{"class":264},[220,66445,66446],{"class":222,"line":682},[220,66447,1792],{"class":264},[1504,66449,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66451},[66452,66453],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":66129,"description":66137},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":66460,"title":66461,"body":66462,"category":33063,"componentType":25877,"description":66469,"extension":191,"meta":66710,"navigation":194,"path":66711,"requiresChild":32530,"seo":66712,"stem":66713,"__hash__":66714},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":66463,"toc":66706},[66464,66467,66470,66472,66474,66477,66479,66704],[11,66465,66461],{"id":66466},"radialgradient",[15,66468,66469],{},"Radial gradient radiating from a center point",[31911,66471],{"component":66461},[23,66473,31915],{"id":26533},[31917,66475],{":props":66476},"[{\"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,66478,31923],{"id":31922},[246,66480,66481,66521,66564,66604,66646],{":tabs":1557},[212,66482,66484],{"className":334,"code":66483,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,66485,66486,66494,66501,66509,66513],{"__ignoreMap":178},[220,66487,66488,66490,66492],{"class":222,"line":223},[220,66489,343],{"class":264},[220,66491,347],{"class":346},[220,66493,359],{"class":264},[220,66495,66496,66498],{"class":222,"line":179},[220,66497,364],{"class":264},[220,66499,66500],{"class":346},"RadialGradient\n",[220,66502,66503,66505,66507],{"class":222,"line":389},[220,66504,17405],{"class":226},[220,66506,353],{"class":264},[220,66508,36625],{"class":230},[220,66510,66511],{"class":222,"line":399},[220,66512,1234],{"class":264},[220,66514,66515,66517,66519],{"class":222,"line":644},[220,66516,402],{"class":264},[220,66518,347],{"class":346},[220,66520,359],{"class":264},[212,66522,66524],{"className":409,"code":66523,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,66525,66526,66534,66540,66552,66556],{"__ignoreMap":178},[220,66527,66528,66530,66532],{"class":222,"line":223},[220,66529,343],{"class":264},[220,66531,347],{"class":420},[220,66533,359],{"class":264},[220,66535,66536,66538],{"class":222,"line":179},[220,66537,364],{"class":264},[220,66539,66500],{"class":420},[220,66541,66542,66544,66546,66548,66550],{"class":222,"line":389},[220,66543,9645],{"class":226},[220,66545,353],{"class":260},[220,66547,743],{"class":264},[220,66549,8677],{"class":420},[220,66551,749],{"class":264},[220,66553,66554],{"class":222,"line":399},[220,66555,1234],{"class":264},[220,66557,66558,66560,66562],{"class":222,"line":644},[220,66559,402],{"class":264},[220,66561,347],{"class":420},[220,66563,359],{"class":264},[212,66565,66566],{"className":2844,"code":66523,"language":2846,"meta":178,"style":178},[99,66567,66568,66576,66582,66592,66596],{"__ignoreMap":178},[220,66569,66570,66572,66574],{"class":222,"line":223},[220,66571,343],{"class":264},[220,66573,347],{"class":420},[220,66575,359],{"class":264},[220,66577,66578,66580],{"class":222,"line":179},[220,66579,364],{"class":264},[220,66581,66500],{"class":420},[220,66583,66584,66586,66588,66590],{"class":222,"line":389},[220,66585,9645],{"class":226},[220,66587,29871],{"class":264},[220,66589,8677],{"class":420},[220,66591,749],{"class":264},[220,66593,66594],{"class":222,"line":399},[220,66595,1234],{"class":264},[220,66597,66598,66600,66602],{"class":222,"line":644},[220,66599,402],{"class":264},[220,66601,347],{"class":420},[220,66603,359],{"class":264},[212,66605,66606],{"className":468,"code":66523,"language":469,"meta":178,"style":178},[99,66607,66608,66616,66622,66634,66638],{"__ignoreMap":178},[220,66609,66610,66612,66614],{"class":222,"line":223},[220,66611,343],{"class":264},[220,66613,347],{"class":420},[220,66615,359],{"class":264},[220,66617,66618,66620],{"class":222,"line":179},[220,66619,364],{"class":264},[220,66621,66500],{"class":420},[220,66623,66624,66626,66628,66630,66632],{"class":222,"line":389},[220,66625,9645],{"class":226},[220,66627,353],{"class":260},[220,66629,743],{"class":264},[220,66631,8677],{"class":420},[220,66633,749],{"class":264},[220,66635,66636],{"class":222,"line":399},[220,66637,1234],{"class":264},[220,66639,66640,66642,66644],{"class":222,"line":644},[220,66641,402],{"class":264},[220,66643,347],{"class":420},[220,66645,359],{"class":264},[212,66647,66649],{"className":251,"code":66648,"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,66650,66651,66661,66665,66679,66683,66696,66700],{"__ignoreMap":178},[220,66652,66653,66655,66657,66659],{"class":222,"line":223},[220,66654,261],{"class":260},[220,66656,11512],{"class":264},[220,66658,268],{"class":260},[220,66660,4007],{"class":230},[220,66662,66663],{"class":222,"line":179},[220,66664,647],{"emptyLinePlaceholder":194},[220,66666,66667,66669,66671,66673,66675,66677],{"class":222,"line":389},[220,66668,1735],{"class":260},[220,66670,1738],{"class":420},[220,66672,1741],{"class":260},[220,66674,1744],{"class":260},[220,66676,1747],{"class":226},[220,66678,1750],{"class":264},[220,66680,66681],{"class":222,"line":399},[220,66682,1765],{"class":264},[220,66684,66685,66687,66690,66692,66694],{"class":222,"line":644},[220,66686,1770],{"class":264},[220,66688,66689],{"class":230},"'RadialGradient'",[220,66691,7541],{"class":264},[220,66693,8677],{"class":420},[220,66695,1782],{"class":264},[220,66697,66698],{"class":222,"line":650},[220,66699,1787],{"class":264},[220,66701,66702],{"class":222,"line":656},[220,66703,1792],{"class":264},[1504,66705,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66707},[66708,66709],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":66461,"description":66469},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":66716,"title":66717,"body":66718,"category":33673,"componentType":25883,"description":66725,"extension":191,"meta":66986,"navigation":194,"path":66987,"requiresChild":194,"seo":66988,"stem":66989,"__hash__":66990},"components\u002Fdocs\u002Fcomponents\u002FRadialWipe.md","RadialWipe",{"type":8,"value":66719,"toc":66982},[66720,66723,66726,66728,66730,66733,66735,66980],[11,66721,66717],{"id":66722},"radialwipe",[15,66724,66725],{},"Sweep the content away in a clock-hand arc around a center point",[31911,66727],{"component":66717},[23,66729,31915],{"id":26533},[31917,66731],{":props":66732},"[{\"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,66734,31923],{"id":31922},[246,66736,66737,66782,66826,66870,66914],{":tabs":1557},[212,66738,66740],{"className":334,"code":66739,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialWipe>\n \u003CCircle \u002F>\n \u003C\u002FRadialWipe>\n\u003C\u002FShader>\n",[99,66741,66742,66750,66758,66766,66774],{"__ignoreMap":178},[220,66743,66744,66746,66748],{"class":222,"line":223},[220,66745,343],{"class":264},[220,66747,347],{"class":346},[220,66749,359],{"class":264},[220,66751,66752,66754,66756],{"class":222,"line":179},[220,66753,364],{"class":264},[220,66755,66717],{"class":346},[220,66757,359],{"class":264},[220,66759,66760,66762,66764],{"class":222,"line":389},[220,66761,2550],{"class":264},[220,66763,2553],{"class":346},[220,66765,386],{"class":264},[220,66767,66768,66770,66772],{"class":222,"line":399},[220,66769,2567],{"class":264},[220,66771,66717],{"class":346},[220,66773,359],{"class":264},[220,66775,66776,66778,66780],{"class":222,"line":644},[220,66777,402],{"class":264},[220,66779,347],{"class":346},[220,66781,359],{"class":264},[212,66783,66784],{"className":409,"code":66739,"language":411,"meta":178,"style":178},[99,66785,66786,66794,66802,66810,66818],{"__ignoreMap":178},[220,66787,66788,66790,66792],{"class":222,"line":223},[220,66789,343],{"class":264},[220,66791,347],{"class":420},[220,66793,359],{"class":264},[220,66795,66796,66798,66800],{"class":222,"line":179},[220,66797,364],{"class":264},[220,66799,66717],{"class":420},[220,66801,359],{"class":264},[220,66803,66804,66806,66808],{"class":222,"line":389},[220,66805,2550],{"class":264},[220,66807,2553],{"class":420},[220,66809,386],{"class":264},[220,66811,66812,66814,66816],{"class":222,"line":399},[220,66813,2567],{"class":264},[220,66815,66717],{"class":420},[220,66817,359],{"class":264},[220,66819,66820,66822,66824],{"class":222,"line":644},[220,66821,402],{"class":264},[220,66823,347],{"class":420},[220,66825,359],{"class":264},[212,66827,66828],{"className":2844,"code":66739,"language":2846,"meta":178,"style":178},[99,66829,66830,66838,66846,66854,66862],{"__ignoreMap":178},[220,66831,66832,66834,66836],{"class":222,"line":223},[220,66833,343],{"class":264},[220,66835,347],{"class":420},[220,66837,359],{"class":264},[220,66839,66840,66842,66844],{"class":222,"line":179},[220,66841,364],{"class":264},[220,66843,66717],{"class":420},[220,66845,359],{"class":264},[220,66847,66848,66850,66852],{"class":222,"line":389},[220,66849,2550],{"class":264},[220,66851,2553],{"class":420},[220,66853,386],{"class":264},[220,66855,66856,66858,66860],{"class":222,"line":399},[220,66857,2567],{"class":264},[220,66859,66717],{"class":420},[220,66861,359],{"class":264},[220,66863,66864,66866,66868],{"class":222,"line":644},[220,66865,402],{"class":264},[220,66867,347],{"class":420},[220,66869,359],{"class":264},[212,66871,66872],{"className":468,"code":66739,"language":469,"meta":178,"style":178},[99,66873,66874,66882,66890,66898,66906],{"__ignoreMap":178},[220,66875,66876,66878,66880],{"class":222,"line":223},[220,66877,343],{"class":264},[220,66879,347],{"class":420},[220,66881,359],{"class":264},[220,66883,66884,66886,66888],{"class":222,"line":179},[220,66885,364],{"class":264},[220,66887,66717],{"class":420},[220,66889,359],{"class":264},[220,66891,66892,66894,66896],{"class":222,"line":389},[220,66893,2550],{"class":264},[220,66895,2553],{"class":420},[220,66897,386],{"class":264},[220,66899,66900,66902,66904],{"class":222,"line":399},[220,66901,2567],{"class":264},[220,66903,66717],{"class":420},[220,66905,359],{"class":264},[220,66907,66908,66910,66912],{"class":222,"line":644},[220,66909,402],{"class":264},[220,66911,347],{"class":420},[220,66913,359],{"class":264},[212,66915,66917],{"className":251,"code":66916,"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,66918,66919,66929,66933,66947,66951,66960,66968,66972,66976],{"__ignoreMap":178},[220,66920,66921,66923,66925,66927],{"class":222,"line":223},[220,66922,261],{"class":260},[220,66924,11512],{"class":264},[220,66926,268],{"class":260},[220,66928,4007],{"class":230},[220,66930,66931],{"class":222,"line":179},[220,66932,647],{"emptyLinePlaceholder":194},[220,66934,66935,66937,66939,66941,66943,66945],{"class":222,"line":389},[220,66936,1735],{"class":260},[220,66938,1738],{"class":420},[220,66940,1741],{"class":260},[220,66942,1744],{"class":260},[220,66944,1747],{"class":226},[220,66946,1750],{"class":264},[220,66948,66949],{"class":222,"line":399},[220,66950,1765],{"class":264},[220,66952,66953,66955,66958],{"class":222,"line":644},[220,66954,1770],{"class":264},[220,66956,66957],{"class":230},"'RadialWipe'",[220,66959,7009],{"class":264},[220,66961,66962,66964,66966],{"class":222,"line":650},[220,66963,7014],{"class":264},[220,66965,3206],{"class":230},[220,66967,2465],{"class":264},[220,66969,66970],{"class":222,"line":656},[220,66971,7031],{"class":264},[220,66973,66974],{"class":222,"line":673},[220,66975,1787],{"class":264},[220,66977,66978],{"class":222,"line":682},[220,66979,1792],{"class":264},[1504,66981,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":66983},[66984,66985],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fradialwipe",{"title":66717,"description":66725},"docs\u002Fcomponents\u002FRadialWipe","nUrviUP1ftpLIxdItR9innSIhwR4K8qi4Drktjb9bho",{"id":66992,"title":66993,"body":66994,"category":33673,"componentType":25883,"description":67001,"extension":191,"meta":67262,"navigation":194,"path":67263,"requiresChild":194,"seo":67264,"stem":67265,"__hash__":67266},"components\u002Fdocs\u002Fcomponents\u002FRandomBars.md","RandomBars",{"type":8,"value":66995,"toc":67258},[66996,66999,67002,67004,67006,67009,67011,67256],[11,66997,66993],{"id":66998},"randombars",[15,67000,67001],{},"Wipe the content away as parallel bars vanishing in random order",[31911,67003],{"component":66993},[23,67005,31915],{"id":26533},[31917,67007],{":props":67008},"[{\"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,67010,31923],{"id":31922},[246,67012,67013,67058,67102,67146,67190],{":tabs":1557},[212,67014,67016],{"className":334,"code":67015,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRandomBars>\n \u003CCircle \u002F>\n \u003C\u002FRandomBars>\n\u003C\u002FShader>\n",[99,67017,67018,67026,67034,67042,67050],{"__ignoreMap":178},[220,67019,67020,67022,67024],{"class":222,"line":223},[220,67021,343],{"class":264},[220,67023,347],{"class":346},[220,67025,359],{"class":264},[220,67027,67028,67030,67032],{"class":222,"line":179},[220,67029,364],{"class":264},[220,67031,66993],{"class":346},[220,67033,359],{"class":264},[220,67035,67036,67038,67040],{"class":222,"line":389},[220,67037,2550],{"class":264},[220,67039,2553],{"class":346},[220,67041,386],{"class":264},[220,67043,67044,67046,67048],{"class":222,"line":399},[220,67045,2567],{"class":264},[220,67047,66993],{"class":346},[220,67049,359],{"class":264},[220,67051,67052,67054,67056],{"class":222,"line":644},[220,67053,402],{"class":264},[220,67055,347],{"class":346},[220,67057,359],{"class":264},[212,67059,67060],{"className":409,"code":67015,"language":411,"meta":178,"style":178},[99,67061,67062,67070,67078,67086,67094],{"__ignoreMap":178},[220,67063,67064,67066,67068],{"class":222,"line":223},[220,67065,343],{"class":264},[220,67067,347],{"class":420},[220,67069,359],{"class":264},[220,67071,67072,67074,67076],{"class":222,"line":179},[220,67073,364],{"class":264},[220,67075,66993],{"class":420},[220,67077,359],{"class":264},[220,67079,67080,67082,67084],{"class":222,"line":389},[220,67081,2550],{"class":264},[220,67083,2553],{"class":420},[220,67085,386],{"class":264},[220,67087,67088,67090,67092],{"class":222,"line":399},[220,67089,2567],{"class":264},[220,67091,66993],{"class":420},[220,67093,359],{"class":264},[220,67095,67096,67098,67100],{"class":222,"line":644},[220,67097,402],{"class":264},[220,67099,347],{"class":420},[220,67101,359],{"class":264},[212,67103,67104],{"className":2844,"code":67015,"language":2846,"meta":178,"style":178},[99,67105,67106,67114,67122,67130,67138],{"__ignoreMap":178},[220,67107,67108,67110,67112],{"class":222,"line":223},[220,67109,343],{"class":264},[220,67111,347],{"class":420},[220,67113,359],{"class":264},[220,67115,67116,67118,67120],{"class":222,"line":179},[220,67117,364],{"class":264},[220,67119,66993],{"class":420},[220,67121,359],{"class":264},[220,67123,67124,67126,67128],{"class":222,"line":389},[220,67125,2550],{"class":264},[220,67127,2553],{"class":420},[220,67129,386],{"class":264},[220,67131,67132,67134,67136],{"class":222,"line":399},[220,67133,2567],{"class":264},[220,67135,66993],{"class":420},[220,67137,359],{"class":264},[220,67139,67140,67142,67144],{"class":222,"line":644},[220,67141,402],{"class":264},[220,67143,347],{"class":420},[220,67145,359],{"class":264},[212,67147,67148],{"className":468,"code":67015,"language":469,"meta":178,"style":178},[99,67149,67150,67158,67166,67174,67182],{"__ignoreMap":178},[220,67151,67152,67154,67156],{"class":222,"line":223},[220,67153,343],{"class":264},[220,67155,347],{"class":420},[220,67157,359],{"class":264},[220,67159,67160,67162,67164],{"class":222,"line":179},[220,67161,364],{"class":264},[220,67163,66993],{"class":420},[220,67165,359],{"class":264},[220,67167,67168,67170,67172],{"class":222,"line":389},[220,67169,2550],{"class":264},[220,67171,2553],{"class":420},[220,67173,386],{"class":264},[220,67175,67176,67178,67180],{"class":222,"line":399},[220,67177,2567],{"class":264},[220,67179,66993],{"class":420},[220,67181,359],{"class":264},[220,67183,67184,67186,67188],{"class":222,"line":644},[220,67185,402],{"class":264},[220,67187,347],{"class":420},[220,67189,359],{"class":264},[212,67191,67193],{"className":251,"code":67192,"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,67194,67195,67205,67209,67223,67227,67236,67244,67248,67252],{"__ignoreMap":178},[220,67196,67197,67199,67201,67203],{"class":222,"line":223},[220,67198,261],{"class":260},[220,67200,11512],{"class":264},[220,67202,268],{"class":260},[220,67204,4007],{"class":230},[220,67206,67207],{"class":222,"line":179},[220,67208,647],{"emptyLinePlaceholder":194},[220,67210,67211,67213,67215,67217,67219,67221],{"class":222,"line":389},[220,67212,1735],{"class":260},[220,67214,1738],{"class":420},[220,67216,1741],{"class":260},[220,67218,1744],{"class":260},[220,67220,1747],{"class":226},[220,67222,1750],{"class":264},[220,67224,67225],{"class":222,"line":399},[220,67226,1765],{"class":264},[220,67228,67229,67231,67234],{"class":222,"line":644},[220,67230,1770],{"class":264},[220,67232,67233],{"class":230},"'RandomBars'",[220,67235,7009],{"class":264},[220,67237,67238,67240,67242],{"class":222,"line":650},[220,67239,7014],{"class":264},[220,67241,3206],{"class":230},[220,67243,2465],{"class":264},[220,67245,67246],{"class":222,"line":656},[220,67247,7031],{"class":264},[220,67249,67250],{"class":222,"line":673},[220,67251,1787],{"class":264},[220,67253,67254],{"class":222,"line":682},[220,67255,1792],{"class":264},[1504,67257,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":67259},[67260,67261],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frandombars",{"title":66993,"description":67001},"docs\u002Fcomponents\u002FRandomBars","XgBCPA4gxuugWJlg4oDrwVA3_03S4Lb2qtTwq8ToMe0",{"id":67268,"title":67269,"body":67270,"category":35559,"componentType":25877,"description":67277,"extension":191,"meta":67462,"navigation":194,"path":67463,"requiresChild":32530,"seo":67464,"stem":67465,"__hash__":67466},"components\u002Fdocs\u002Fcomponents\u002FReactionDiffusion.md","ReactionDiffusion",{"type":8,"value":67271,"toc":67458},[67272,67275,67278,67280,67282,67285,67287,67456],[11,67273,67269],{"id":67274},"reactiondiffusion",[15,67276,67277],{},"A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor",[31911,67279],{"component":67269},[23,67281,31915],{"id":26533},[31917,67283],{":props":67284},"[{\"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,67286,31923],{"id":31922},[246,67288,67289,67318,67346,67374,67402],{":tabs":1557},[212,67290,67292],{"className":334,"code":67291,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReactionDiffusion \u002F>\n\u003C\u002FShader>\n",[99,67293,67294,67302,67310],{"__ignoreMap":178},[220,67295,67296,67298,67300],{"class":222,"line":223},[220,67297,343],{"class":264},[220,67299,347],{"class":346},[220,67301,359],{"class":264},[220,67303,67304,67306,67308],{"class":222,"line":179},[220,67305,364],{"class":264},[220,67307,67269],{"class":346},[220,67309,386],{"class":264},[220,67311,67312,67314,67316],{"class":222,"line":389},[220,67313,402],{"class":264},[220,67315,347],{"class":346},[220,67317,359],{"class":264},[212,67319,67320],{"className":409,"code":67291,"language":411,"meta":178,"style":178},[99,67321,67322,67330,67338],{"__ignoreMap":178},[220,67323,67324,67326,67328],{"class":222,"line":223},[220,67325,343],{"class":264},[220,67327,347],{"class":420},[220,67329,359],{"class":264},[220,67331,67332,67334,67336],{"class":222,"line":179},[220,67333,364],{"class":264},[220,67335,67269],{"class":420},[220,67337,386],{"class":264},[220,67339,67340,67342,67344],{"class":222,"line":389},[220,67341,402],{"class":264},[220,67343,347],{"class":420},[220,67345,359],{"class":264},[212,67347,67348],{"className":2844,"code":67291,"language":2846,"meta":178,"style":178},[99,67349,67350,67358,67366],{"__ignoreMap":178},[220,67351,67352,67354,67356],{"class":222,"line":223},[220,67353,343],{"class":264},[220,67355,347],{"class":420},[220,67357,359],{"class":264},[220,67359,67360,67362,67364],{"class":222,"line":179},[220,67361,364],{"class":264},[220,67363,67269],{"class":420},[220,67365,386],{"class":264},[220,67367,67368,67370,67372],{"class":222,"line":389},[220,67369,402],{"class":264},[220,67371,347],{"class":420},[220,67373,359],{"class":264},[212,67375,67376],{"className":468,"code":67291,"language":469,"meta":178,"style":178},[99,67377,67378,67386,67394],{"__ignoreMap":178},[220,67379,67380,67382,67384],{"class":222,"line":223},[220,67381,343],{"class":264},[220,67383,347],{"class":420},[220,67385,359],{"class":264},[220,67387,67388,67390,67392],{"class":222,"line":179},[220,67389,364],{"class":264},[220,67391,67269],{"class":420},[220,67393,386],{"class":264},[220,67395,67396,67398,67400],{"class":222,"line":389},[220,67397,402],{"class":264},[220,67399,347],{"class":420},[220,67401,359],{"class":264},[212,67403,67405],{"className":251,"code":67404,"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,67406,67407,67417,67421,67435,67439,67448,67452],{"__ignoreMap":178},[220,67408,67409,67411,67413,67415],{"class":222,"line":223},[220,67410,261],{"class":260},[220,67412,11512],{"class":264},[220,67414,268],{"class":260},[220,67416,4007],{"class":230},[220,67418,67419],{"class":222,"line":179},[220,67420,647],{"emptyLinePlaceholder":194},[220,67422,67423,67425,67427,67429,67431,67433],{"class":222,"line":389},[220,67424,1735],{"class":260},[220,67426,1738],{"class":420},[220,67428,1741],{"class":260},[220,67430,1744],{"class":260},[220,67432,1747],{"class":226},[220,67434,1750],{"class":264},[220,67436,67437],{"class":222,"line":399},[220,67438,1765],{"class":264},[220,67440,67441,67443,67446],{"class":222,"line":644},[220,67442,1770],{"class":264},[220,67444,67445],{"class":230},"'ReactionDiffusion'",[220,67447,2465],{"class":264},[220,67449,67450],{"class":222,"line":650},[220,67451,1787],{"class":264},[220,67453,67454],{"class":222,"line":656},[220,67455,1792],{"class":264},[1504,67457,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":67459},[67460,67461],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Freactiondiffusion",{"title":67269,"description":67277},"docs\u002Fcomponents\u002FReactionDiffusion","NYG8rTGKT-we5Yb6vVhrjHcbQfR7IFWMNLpjfgq1_DE",{"id":67468,"title":67469,"body":67470,"category":33396,"componentType":25883,"description":67477,"extension":191,"meta":67794,"navigation":194,"path":67795,"requiresChild":194,"seo":67796,"stem":67797,"__hash__":67798},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":67471,"toc":67790},[67472,67475,67478,67480,67482,67485,67487,67788],[11,67473,67469],{"id":67474},"rectangularcoordinates",[15,67476,67477],{},"Convert polar coordinates back to rectangular space",[31911,67479],{"component":67469},[23,67481,31915],{"id":26533},[31917,67483],{":props":67484},"[{\"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,67486,31923],{"id":31922},[246,67488,67489,67545,67604,67660,67718],{":tabs":1557},[212,67490,67492],{"className":334,"code":67491,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,67493,67494,67502,67509,67517,67521,67529,67537],{"__ignoreMap":178},[220,67495,67496,67498,67500],{"class":222,"line":223},[220,67497,343],{"class":264},[220,67499,347],{"class":346},[220,67501,359],{"class":264},[220,67503,67504,67506],{"class":222,"line":179},[220,67505,364],{"class":264},[220,67507,67508],{"class":346},"RectangularCoordinates\n",[220,67510,67511,67513,67515],{"class":222,"line":389},[220,67512,20371],{"class":226},[220,67514,353],{"class":264},[220,67516,36625],{"class":230},[220,67518,67519],{"class":222,"line":399},[220,67520,31959],{"class":264},[220,67522,67523,67525,67527],{"class":222,"line":644},[220,67524,2550],{"class":264},[220,67526,2553],{"class":346},[220,67528,386],{"class":264},[220,67530,67531,67533,67535],{"class":222,"line":650},[220,67532,2567],{"class":264},[220,67534,67469],{"class":346},[220,67536,359],{"class":264},[220,67538,67539,67541,67543],{"class":222,"line":656},[220,67540,402],{"class":264},[220,67542,347],{"class":346},[220,67544,359],{"class":264},[212,67546,67548],{"className":409,"code":67547,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,67549,67550,67558,67564,67576,67580,67588,67596],{"__ignoreMap":178},[220,67551,67552,67554,67556],{"class":222,"line":223},[220,67553,343],{"class":264},[220,67555,347],{"class":420},[220,67557,359],{"class":264},[220,67559,67560,67562],{"class":222,"line":179},[220,67561,364],{"class":264},[220,67563,67508],{"class":420},[220,67565,67566,67568,67570,67572,67574],{"class":222,"line":389},[220,67567,20482],{"class":226},[220,67569,353],{"class":260},[220,67571,743],{"class":264},[220,67573,8677],{"class":420},[220,67575,749],{"class":264},[220,67577,67578],{"class":222,"line":399},[220,67579,31959],{"class":264},[220,67581,67582,67584,67586],{"class":222,"line":644},[220,67583,2550],{"class":264},[220,67585,2553],{"class":420},[220,67587,386],{"class":264},[220,67589,67590,67592,67594],{"class":222,"line":650},[220,67591,2567],{"class":264},[220,67593,67469],{"class":420},[220,67595,359],{"class":264},[220,67597,67598,67600,67602],{"class":222,"line":656},[220,67599,402],{"class":264},[220,67601,347],{"class":420},[220,67603,359],{"class":264},[212,67605,67606],{"className":2844,"code":67547,"language":2846,"meta":178,"style":178},[99,67607,67608,67616,67622,67632,67636,67644,67652],{"__ignoreMap":178},[220,67609,67610,67612,67614],{"class":222,"line":223},[220,67611,343],{"class":264},[220,67613,347],{"class":420},[220,67615,359],{"class":264},[220,67617,67618,67620],{"class":222,"line":179},[220,67619,364],{"class":264},[220,67621,67508],{"class":420},[220,67623,67624,67626,67628,67630],{"class":222,"line":389},[220,67625,20482],{"class":226},[220,67627,29871],{"class":264},[220,67629,8677],{"class":420},[220,67631,749],{"class":264},[220,67633,67634],{"class":222,"line":399},[220,67635,31959],{"class":264},[220,67637,67638,67640,67642],{"class":222,"line":644},[220,67639,2550],{"class":264},[220,67641,2553],{"class":420},[220,67643,386],{"class":264},[220,67645,67646,67648,67650],{"class":222,"line":650},[220,67647,2567],{"class":264},[220,67649,67469],{"class":420},[220,67651,359],{"class":264},[220,67653,67654,67656,67658],{"class":222,"line":656},[220,67655,402],{"class":264},[220,67657,347],{"class":420},[220,67659,359],{"class":264},[212,67661,67662],{"className":468,"code":67547,"language":469,"meta":178,"style":178},[99,67663,67664,67672,67678,67690,67694,67702,67710],{"__ignoreMap":178},[220,67665,67666,67668,67670],{"class":222,"line":223},[220,67667,343],{"class":264},[220,67669,347],{"class":420},[220,67671,359],{"class":264},[220,67673,67674,67676],{"class":222,"line":179},[220,67675,364],{"class":264},[220,67677,67508],{"class":420},[220,67679,67680,67682,67684,67686,67688],{"class":222,"line":389},[220,67681,20482],{"class":226},[220,67683,353],{"class":260},[220,67685,743],{"class":264},[220,67687,8677],{"class":420},[220,67689,749],{"class":264},[220,67691,67692],{"class":222,"line":399},[220,67693,31959],{"class":264},[220,67695,67696,67698,67700],{"class":222,"line":644},[220,67697,2550],{"class":264},[220,67699,2553],{"class":420},[220,67701,386],{"class":264},[220,67703,67704,67706,67708],{"class":222,"line":650},[220,67705,2567],{"class":264},[220,67707,67469],{"class":420},[220,67709,359],{"class":264},[220,67711,67712,67714,67716],{"class":222,"line":656},[220,67713,402],{"class":264},[220,67715,347],{"class":420},[220,67717,359],{"class":264},[212,67719,67721],{"className":251,"code":67720,"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,67722,67723,67733,67737,67751,67755,67768,67776,67780,67784],{"__ignoreMap":178},[220,67724,67725,67727,67729,67731],{"class":222,"line":223},[220,67726,261],{"class":260},[220,67728,11512],{"class":264},[220,67730,268],{"class":260},[220,67732,4007],{"class":230},[220,67734,67735],{"class":222,"line":179},[220,67736,647],{"emptyLinePlaceholder":194},[220,67738,67739,67741,67743,67745,67747,67749],{"class":222,"line":389},[220,67740,1735],{"class":260},[220,67742,1738],{"class":420},[220,67744,1741],{"class":260},[220,67746,1744],{"class":260},[220,67748,1747],{"class":226},[220,67750,1750],{"class":264},[220,67752,67753],{"class":222,"line":399},[220,67754,1765],{"class":264},[220,67756,67757,67759,67762,67764,67766],{"class":222,"line":644},[220,67758,1770],{"class":264},[220,67760,67761],{"class":230},"'RectangularCoordinates'",[220,67763,32203],{"class":264},[220,67765,8677],{"class":420},[220,67767,7546],{"class":264},[220,67769,67770,67772,67774],{"class":222,"line":650},[220,67771,7014],{"class":264},[220,67773,3206],{"class":230},[220,67775,2465],{"class":264},[220,67777,67778],{"class":222,"line":656},[220,67779,7031],{"class":264},[220,67781,67782],{"class":222,"line":673},[220,67783,1787],{"class":264},[220,67785,67786],{"class":222,"line":682},[220,67787,1792],{"class":264},[1504,67789,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67791},[67792,67793],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":67469,"description":67477},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":67800,"title":67801,"body":67802,"category":32806,"componentType":25883,"description":67809,"extension":191,"meta":68070,"navigation":194,"path":68071,"requiresChild":194,"seo":68072,"stem":68073,"__hash__":68074},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":67803,"toc":68066},[67804,67807,67810,67812,67814,67817,67819,68064],[11,67805,67801],{"id":67806},"reflectiveplane",[15,67808,67809],{},"Reflective floor that mirrors the content above it",[31911,67811],{"component":67801},[23,67813,31915],{"id":26533},[31917,67815],{":props":67816},"[{\"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,67818,31923],{"id":31922},[246,67820,67821,67866,67910,67954,67998],{":tabs":1557},[212,67822,67824],{"className":334,"code":67823,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,67825,67826,67834,67842,67850,67858],{"__ignoreMap":178},[220,67827,67828,67830,67832],{"class":222,"line":223},[220,67829,343],{"class":264},[220,67831,347],{"class":346},[220,67833,359],{"class":264},[220,67835,67836,67838,67840],{"class":222,"line":179},[220,67837,364],{"class":264},[220,67839,67801],{"class":346},[220,67841,359],{"class":264},[220,67843,67844,67846,67848],{"class":222,"line":389},[220,67845,2550],{"class":264},[220,67847,2553],{"class":346},[220,67849,386],{"class":264},[220,67851,67852,67854,67856],{"class":222,"line":399},[220,67853,2567],{"class":264},[220,67855,67801],{"class":346},[220,67857,359],{"class":264},[220,67859,67860,67862,67864],{"class":222,"line":644},[220,67861,402],{"class":264},[220,67863,347],{"class":346},[220,67865,359],{"class":264},[212,67867,67868],{"className":409,"code":67823,"language":411,"meta":178,"style":178},[99,67869,67870,67878,67886,67894,67902],{"__ignoreMap":178},[220,67871,67872,67874,67876],{"class":222,"line":223},[220,67873,343],{"class":264},[220,67875,347],{"class":420},[220,67877,359],{"class":264},[220,67879,67880,67882,67884],{"class":222,"line":179},[220,67881,364],{"class":264},[220,67883,67801],{"class":420},[220,67885,359],{"class":264},[220,67887,67888,67890,67892],{"class":222,"line":389},[220,67889,2550],{"class":264},[220,67891,2553],{"class":420},[220,67893,386],{"class":264},[220,67895,67896,67898,67900],{"class":222,"line":399},[220,67897,2567],{"class":264},[220,67899,67801],{"class":420},[220,67901,359],{"class":264},[220,67903,67904,67906,67908],{"class":222,"line":644},[220,67905,402],{"class":264},[220,67907,347],{"class":420},[220,67909,359],{"class":264},[212,67911,67912],{"className":2844,"code":67823,"language":2846,"meta":178,"style":178},[99,67913,67914,67922,67930,67938,67946],{"__ignoreMap":178},[220,67915,67916,67918,67920],{"class":222,"line":223},[220,67917,343],{"class":264},[220,67919,347],{"class":420},[220,67921,359],{"class":264},[220,67923,67924,67926,67928],{"class":222,"line":179},[220,67925,364],{"class":264},[220,67927,67801],{"class":420},[220,67929,359],{"class":264},[220,67931,67932,67934,67936],{"class":222,"line":389},[220,67933,2550],{"class":264},[220,67935,2553],{"class":420},[220,67937,386],{"class":264},[220,67939,67940,67942,67944],{"class":222,"line":399},[220,67941,2567],{"class":264},[220,67943,67801],{"class":420},[220,67945,359],{"class":264},[220,67947,67948,67950,67952],{"class":222,"line":644},[220,67949,402],{"class":264},[220,67951,347],{"class":420},[220,67953,359],{"class":264},[212,67955,67956],{"className":468,"code":67823,"language":469,"meta":178,"style":178},[99,67957,67958,67966,67974,67982,67990],{"__ignoreMap":178},[220,67959,67960,67962,67964],{"class":222,"line":223},[220,67961,343],{"class":264},[220,67963,347],{"class":420},[220,67965,359],{"class":264},[220,67967,67968,67970,67972],{"class":222,"line":179},[220,67969,364],{"class":264},[220,67971,67801],{"class":420},[220,67973,359],{"class":264},[220,67975,67976,67978,67980],{"class":222,"line":389},[220,67977,2550],{"class":264},[220,67979,2553],{"class":420},[220,67981,386],{"class":264},[220,67983,67984,67986,67988],{"class":222,"line":399},[220,67985,2567],{"class":264},[220,67987,67801],{"class":420},[220,67989,359],{"class":264},[220,67991,67992,67994,67996],{"class":222,"line":644},[220,67993,402],{"class":264},[220,67995,347],{"class":420},[220,67997,359],{"class":264},[212,67999,68001],{"className":251,"code":68000,"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,68002,68003,68013,68017,68031,68035,68044,68052,68056,68060],{"__ignoreMap":178},[220,68004,68005,68007,68009,68011],{"class":222,"line":223},[220,68006,261],{"class":260},[220,68008,11512],{"class":264},[220,68010,268],{"class":260},[220,68012,4007],{"class":230},[220,68014,68015],{"class":222,"line":179},[220,68016,647],{"emptyLinePlaceholder":194},[220,68018,68019,68021,68023,68025,68027,68029],{"class":222,"line":389},[220,68020,1735],{"class":260},[220,68022,1738],{"class":420},[220,68024,1741],{"class":260},[220,68026,1744],{"class":260},[220,68028,1747],{"class":226},[220,68030,1750],{"class":264},[220,68032,68033],{"class":222,"line":399},[220,68034,1765],{"class":264},[220,68036,68037,68039,68042],{"class":222,"line":644},[220,68038,1770],{"class":264},[220,68040,68041],{"class":230},"'ReflectivePlane'",[220,68043,7009],{"class":264},[220,68045,68046,68048,68050],{"class":222,"line":650},[220,68047,7014],{"class":264},[220,68049,3206],{"class":230},[220,68051,2465],{"class":264},[220,68053,68054],{"class":222,"line":656},[220,68055,7031],{"class":264},[220,68057,68058],{"class":222,"line":673},[220,68059,1787],{"class":264},[220,68061,68062],{"class":222,"line":682},[220,68063,1792],{"class":264},[1504,68065,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":68067},[68068,68069],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":67801,"description":67809},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":68076,"title":68077,"body":68078,"category":33396,"componentType":25883,"description":68085,"extension":191,"meta":68402,"navigation":194,"path":68403,"requiresChild":194,"seo":68404,"stem":68405,"__hash__":68406},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":68079,"toc":68398},[68080,68083,68086,68088,68090,68093,68095,68396],[11,68081,68077],{"id":68082},"repeater",[15,68084,68085],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[31911,68087],{"component":68077},[23,68089,31915],{"id":26533},[31917,68091],{":props":68092},"[{\"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,68094,31923],{"id":31922},[246,68096,68097,68153,68212,68268,68326],{":tabs":1557},[212,68098,68100],{"className":334,"code":68099,"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,68101,68102,68110,68117,68125,68129,68137,68145],{"__ignoreMap":178},[220,68103,68104,68106,68108],{"class":222,"line":223},[220,68105,343],{"class":264},[220,68107,347],{"class":346},[220,68109,359],{"class":264},[220,68111,68112,68114],{"class":222,"line":179},[220,68113,364],{"class":264},[220,68115,68116],{"class":346},"Repeater\n",[220,68118,68119,68121,68123],{"class":222,"line":389},[220,68120,17405],{"class":226},[220,68122,353],{"class":264},[220,68124,41298],{"class":230},[220,68126,68127],{"class":222,"line":399},[220,68128,31959],{"class":264},[220,68130,68131,68133,68135],{"class":222,"line":644},[220,68132,2550],{"class":264},[220,68134,2553],{"class":346},[220,68136,386],{"class":264},[220,68138,68139,68141,68143],{"class":222,"line":650},[220,68140,2567],{"class":264},[220,68142,68077],{"class":346},[220,68144,359],{"class":264},[220,68146,68147,68149,68151],{"class":222,"line":656},[220,68148,402],{"class":264},[220,68150,347],{"class":346},[220,68152,359],{"class":264},[212,68154,68156],{"className":409,"code":68155,"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,68157,68158,68166,68172,68184,68188,68196,68204],{"__ignoreMap":178},[220,68159,68160,68162,68164],{"class":222,"line":223},[220,68161,343],{"class":264},[220,68163,347],{"class":420},[220,68165,359],{"class":264},[220,68167,68168,68170],{"class":222,"line":179},[220,68169,364],{"class":264},[220,68171,68116],{"class":420},[220,68173,68174,68176,68178,68180,68182],{"class":222,"line":389},[220,68175,9645],{"class":226},[220,68177,353],{"class":260},[220,68179,743],{"class":264},[220,68181,22004],{"class":420},[220,68183,749],{"class":264},[220,68185,68186],{"class":222,"line":399},[220,68187,31959],{"class":264},[220,68189,68190,68192,68194],{"class":222,"line":644},[220,68191,2550],{"class":264},[220,68193,2553],{"class":420},[220,68195,386],{"class":264},[220,68197,68198,68200,68202],{"class":222,"line":650},[220,68199,2567],{"class":264},[220,68201,68077],{"class":420},[220,68203,359],{"class":264},[220,68205,68206,68208,68210],{"class":222,"line":656},[220,68207,402],{"class":264},[220,68209,347],{"class":420},[220,68211,359],{"class":264},[212,68213,68214],{"className":2844,"code":68155,"language":2846,"meta":178,"style":178},[99,68215,68216,68224,68230,68240,68244,68252,68260],{"__ignoreMap":178},[220,68217,68218,68220,68222],{"class":222,"line":223},[220,68219,343],{"class":264},[220,68221,347],{"class":420},[220,68223,359],{"class":264},[220,68225,68226,68228],{"class":222,"line":179},[220,68227,364],{"class":264},[220,68229,68116],{"class":420},[220,68231,68232,68234,68236,68238],{"class":222,"line":389},[220,68233,9645],{"class":226},[220,68235,29871],{"class":264},[220,68237,22004],{"class":420},[220,68239,749],{"class":264},[220,68241,68242],{"class":222,"line":399},[220,68243,31959],{"class":264},[220,68245,68246,68248,68250],{"class":222,"line":644},[220,68247,2550],{"class":264},[220,68249,2553],{"class":420},[220,68251,386],{"class":264},[220,68253,68254,68256,68258],{"class":222,"line":650},[220,68255,2567],{"class":264},[220,68257,68077],{"class":420},[220,68259,359],{"class":264},[220,68261,68262,68264,68266],{"class":222,"line":656},[220,68263,402],{"class":264},[220,68265,347],{"class":420},[220,68267,359],{"class":264},[212,68269,68270],{"className":468,"code":68155,"language":469,"meta":178,"style":178},[99,68271,68272,68280,68286,68298,68302,68310,68318],{"__ignoreMap":178},[220,68273,68274,68276,68278],{"class":222,"line":223},[220,68275,343],{"class":264},[220,68277,347],{"class":420},[220,68279,359],{"class":264},[220,68281,68282,68284],{"class":222,"line":179},[220,68283,364],{"class":264},[220,68285,68116],{"class":420},[220,68287,68288,68290,68292,68294,68296],{"class":222,"line":389},[220,68289,9645],{"class":226},[220,68291,353],{"class":260},[220,68293,743],{"class":264},[220,68295,22004],{"class":420},[220,68297,749],{"class":264},[220,68299,68300],{"class":222,"line":399},[220,68301,31959],{"class":264},[220,68303,68304,68306,68308],{"class":222,"line":644},[220,68305,2550],{"class":264},[220,68307,2553],{"class":420},[220,68309,386],{"class":264},[220,68311,68312,68314,68316],{"class":222,"line":650},[220,68313,2567],{"class":264},[220,68315,68077],{"class":420},[220,68317,359],{"class":264},[220,68319,68320,68322,68324],{"class":222,"line":656},[220,68321,402],{"class":264},[220,68323,347],{"class":420},[220,68325,359],{"class":264},[212,68327,68329],{"className":251,"code":68328,"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,68330,68331,68341,68345,68359,68363,68376,68384,68388,68392],{"__ignoreMap":178},[220,68332,68333,68335,68337,68339],{"class":222,"line":223},[220,68334,261],{"class":260},[220,68336,11512],{"class":264},[220,68338,268],{"class":260},[220,68340,4007],{"class":230},[220,68342,68343],{"class":222,"line":179},[220,68344,647],{"emptyLinePlaceholder":194},[220,68346,68347,68349,68351,68353,68355,68357],{"class":222,"line":389},[220,68348,1735],{"class":260},[220,68350,1738],{"class":420},[220,68352,1741],{"class":260},[220,68354,1744],{"class":260},[220,68356,1747],{"class":226},[220,68358,1750],{"class":264},[220,68360,68361],{"class":222,"line":399},[220,68362,1765],{"class":264},[220,68364,68365,68367,68370,68372,68374],{"class":222,"line":644},[220,68366,1770],{"class":264},[220,68368,68369],{"class":230},"'Repeater'",[220,68371,7541],{"class":264},[220,68373,22004],{"class":420},[220,68375,7546],{"class":264},[220,68377,68378,68380,68382],{"class":222,"line":650},[220,68379,7014],{"class":264},[220,68381,3206],{"class":230},[220,68383,2465],{"class":264},[220,68385,68386],{"class":222,"line":656},[220,68387,7031],{"class":264},[220,68389,68390],{"class":222,"line":673},[220,68391,1787],{"class":264},[220,68393,68394],{"class":222,"line":682},[220,68395,1792],{"class":264},[1504,68397,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68399},[68400,68401],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":68077,"description":68085},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":68408,"title":68409,"body":68410,"category":15908,"componentType":25877,"description":68417,"extension":191,"meta":68694,"navigation":194,"path":68695,"requiresChild":32530,"seo":68696,"stem":68697,"__hash__":68698},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":68411,"toc":68690},[68412,68415,68418,68420,68422,68425,68427,68688],[11,68413,68409],{"id":68414},"ring",[15,68416,68417],{},"Annular ring (donut) with adjustable radius and band thickness",[31911,68419],{"component":68409},[23,68421,31915],{"id":26533},[31917,68423],{":props":68424},"[{\"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,68426,31923],{"id":31922},[246,68428,68429,68477,68528,68576,68626],{":tabs":1557},[212,68430,68432],{"className":334,"code":68431,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,68433,68434,68442,68449,68457,68465,68469],{"__ignoreMap":178},[220,68435,68436,68438,68440],{"class":222,"line":223},[220,68437,343],{"class":264},[220,68439,347],{"class":346},[220,68441,359],{"class":264},[220,68443,68444,68446],{"class":222,"line":179},[220,68445,364],{"class":264},[220,68447,68448],{"class":346},"Ring\n",[220,68450,68451,68453,68455],{"class":222,"line":389},[220,68452,9635],{"class":226},[220,68454,353],{"class":264},[220,68456,9591],{"class":230},[220,68458,68459,68461,68463],{"class":222,"line":399},[220,68460,17405],{"class":226},[220,68462,353],{"class":264},[220,68464,41298],{"class":230},[220,68466,68467],{"class":222,"line":644},[220,68468,1234],{"class":264},[220,68470,68471,68473,68475],{"class":222,"line":650},[220,68472,402],{"class":264},[220,68474,347],{"class":346},[220,68476,359],{"class":264},[212,68478,68480],{"className":409,"code":68479,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,68481,68482,68490,68496,68504,68516,68520],{"__ignoreMap":178},[220,68483,68484,68486,68488],{"class":222,"line":223},[220,68485,343],{"class":264},[220,68487,347],{"class":420},[220,68489,359],{"class":264},[220,68491,68492,68494],{"class":222,"line":179},[220,68493,364],{"class":264},[220,68495,68448],{"class":420},[220,68497,68498,68500,68502],{"class":222,"line":389},[220,68499,9635],{"class":226},[220,68501,353],{"class":260},[220,68503,9591],{"class":230},[220,68505,68506,68508,68510,68512,68514],{"class":222,"line":399},[220,68507,9645],{"class":226},[220,68509,353],{"class":260},[220,68511,743],{"class":264},[220,68513,22004],{"class":420},[220,68515,749],{"class":264},[220,68517,68518],{"class":222,"line":644},[220,68519,1234],{"class":264},[220,68521,68522,68524,68526],{"class":222,"line":650},[220,68523,402],{"class":264},[220,68525,347],{"class":420},[220,68527,359],{"class":264},[212,68529,68530],{"className":2844,"code":68479,"language":2846,"meta":178,"style":178},[99,68531,68532,68540,68546,68554,68564,68568],{"__ignoreMap":178},[220,68533,68534,68536,68538],{"class":222,"line":223},[220,68535,343],{"class":264},[220,68537,347],{"class":420},[220,68539,359],{"class":264},[220,68541,68542,68544],{"class":222,"line":179},[220,68543,364],{"class":264},[220,68545,68448],{"class":420},[220,68547,68548,68550,68552],{"class":222,"line":389},[220,68549,9635],{"class":226},[220,68551,353],{"class":264},[220,68553,9591],{"class":230},[220,68555,68556,68558,68560,68562],{"class":222,"line":399},[220,68557,9645],{"class":226},[220,68559,29871],{"class":264},[220,68561,22004],{"class":420},[220,68563,749],{"class":264},[220,68565,68566],{"class":222,"line":644},[220,68567,1234],{"class":264},[220,68569,68570,68572,68574],{"class":222,"line":650},[220,68571,402],{"class":264},[220,68573,347],{"class":420},[220,68575,359],{"class":264},[212,68577,68578],{"className":468,"code":68479,"language":469,"meta":178,"style":178},[99,68579,68580,68588,68594,68602,68614,68618],{"__ignoreMap":178},[220,68581,68582,68584,68586],{"class":222,"line":223},[220,68583,343],{"class":264},[220,68585,347],{"class":420},[220,68587,359],{"class":264},[220,68589,68590,68592],{"class":222,"line":179},[220,68591,364],{"class":264},[220,68593,68448],{"class":420},[220,68595,68596,68598,68600],{"class":222,"line":389},[220,68597,9635],{"class":226},[220,68599,353],{"class":260},[220,68601,9591],{"class":230},[220,68603,68604,68606,68608,68610,68612],{"class":222,"line":399},[220,68605,9645],{"class":226},[220,68607,353],{"class":260},[220,68609,743],{"class":264},[220,68611,22004],{"class":420},[220,68613,749],{"class":264},[220,68615,68616],{"class":222,"line":644},[220,68617,1234],{"class":264},[220,68619,68620,68622,68624],{"class":222,"line":650},[220,68621,402],{"class":264},[220,68623,347],{"class":420},[220,68625,359],{"class":264},[212,68627,68629],{"className":251,"code":68628,"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,68630,68631,68641,68645,68659,68663,68680,68684],{"__ignoreMap":178},[220,68632,68633,68635,68637,68639],{"class":222,"line":223},[220,68634,261],{"class":260},[220,68636,11512],{"class":264},[220,68638,268],{"class":260},[220,68640,4007],{"class":230},[220,68642,68643],{"class":222,"line":179},[220,68644,647],{"emptyLinePlaceholder":194},[220,68646,68647,68649,68651,68653,68655,68657],{"class":222,"line":389},[220,68648,1735],{"class":260},[220,68650,1738],{"class":420},[220,68652,1741],{"class":260},[220,68654,1744],{"class":260},[220,68656,1747],{"class":226},[220,68658,1750],{"class":264},[220,68660,68661],{"class":222,"line":399},[220,68662,1765],{"class":264},[220,68664,68665,68667,68670,68672,68674,68676,68678],{"class":222,"line":644},[220,68666,1770],{"class":264},[220,68668,68669],{"class":230},"'Ring'",[220,68671,1776],{"class":264},[220,68673,10169],{"class":230},[220,68675,6566],{"class":264},[220,68677,22004],{"class":420},[220,68679,1782],{"class":264},[220,68681,68682],{"class":222,"line":650},[220,68683,1787],{"class":264},[220,68685,68686],{"class":222,"line":656},[220,68687,1792],{"class":264},[1504,68689,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68691},[68692,68693],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":68409,"description":68417},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":68700,"title":68701,"body":68702,"category":33673,"componentType":25883,"description":68709,"extension":191,"meta":68970,"navigation":194,"path":68971,"requiresChild":194,"seo":68972,"stem":68973,"__hash__":68974},"components\u002Fdocs\u002Fcomponents\u002FRippleWipe.md","RippleWipe",{"type":8,"value":68703,"toc":68966},[68704,68707,68710,68712,68714,68717,68719,68964],[11,68705,68701],{"id":68706},"ripplewipe",[15,68708,68709],{},"Wipe the content away in concentric rings pulsing out from a center point",[31911,68711],{"component":68701},[23,68713,31915],{"id":26533},[31917,68715],{":props":68716},"[{\"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,68718,31923],{"id":31922},[246,68720,68721,68766,68810,68854,68898],{":tabs":1557},[212,68722,68724],{"className":334,"code":68723,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRippleWipe>\n \u003CCircle \u002F>\n \u003C\u002FRippleWipe>\n\u003C\u002FShader>\n",[99,68725,68726,68734,68742,68750,68758],{"__ignoreMap":178},[220,68727,68728,68730,68732],{"class":222,"line":223},[220,68729,343],{"class":264},[220,68731,347],{"class":346},[220,68733,359],{"class":264},[220,68735,68736,68738,68740],{"class":222,"line":179},[220,68737,364],{"class":264},[220,68739,68701],{"class":346},[220,68741,359],{"class":264},[220,68743,68744,68746,68748],{"class":222,"line":389},[220,68745,2550],{"class":264},[220,68747,2553],{"class":346},[220,68749,386],{"class":264},[220,68751,68752,68754,68756],{"class":222,"line":399},[220,68753,2567],{"class":264},[220,68755,68701],{"class":346},[220,68757,359],{"class":264},[220,68759,68760,68762,68764],{"class":222,"line":644},[220,68761,402],{"class":264},[220,68763,347],{"class":346},[220,68765,359],{"class":264},[212,68767,68768],{"className":409,"code":68723,"language":411,"meta":178,"style":178},[99,68769,68770,68778,68786,68794,68802],{"__ignoreMap":178},[220,68771,68772,68774,68776],{"class":222,"line":223},[220,68773,343],{"class":264},[220,68775,347],{"class":420},[220,68777,359],{"class":264},[220,68779,68780,68782,68784],{"class":222,"line":179},[220,68781,364],{"class":264},[220,68783,68701],{"class":420},[220,68785,359],{"class":264},[220,68787,68788,68790,68792],{"class":222,"line":389},[220,68789,2550],{"class":264},[220,68791,2553],{"class":420},[220,68793,386],{"class":264},[220,68795,68796,68798,68800],{"class":222,"line":399},[220,68797,2567],{"class":264},[220,68799,68701],{"class":420},[220,68801,359],{"class":264},[220,68803,68804,68806,68808],{"class":222,"line":644},[220,68805,402],{"class":264},[220,68807,347],{"class":420},[220,68809,359],{"class":264},[212,68811,68812],{"className":2844,"code":68723,"language":2846,"meta":178,"style":178},[99,68813,68814,68822,68830,68838,68846],{"__ignoreMap":178},[220,68815,68816,68818,68820],{"class":222,"line":223},[220,68817,343],{"class":264},[220,68819,347],{"class":420},[220,68821,359],{"class":264},[220,68823,68824,68826,68828],{"class":222,"line":179},[220,68825,364],{"class":264},[220,68827,68701],{"class":420},[220,68829,359],{"class":264},[220,68831,68832,68834,68836],{"class":222,"line":389},[220,68833,2550],{"class":264},[220,68835,2553],{"class":420},[220,68837,386],{"class":264},[220,68839,68840,68842,68844],{"class":222,"line":399},[220,68841,2567],{"class":264},[220,68843,68701],{"class":420},[220,68845,359],{"class":264},[220,68847,68848,68850,68852],{"class":222,"line":644},[220,68849,402],{"class":264},[220,68851,347],{"class":420},[220,68853,359],{"class":264},[212,68855,68856],{"className":468,"code":68723,"language":469,"meta":178,"style":178},[99,68857,68858,68866,68874,68882,68890],{"__ignoreMap":178},[220,68859,68860,68862,68864],{"class":222,"line":223},[220,68861,343],{"class":264},[220,68863,347],{"class":420},[220,68865,359],{"class":264},[220,68867,68868,68870,68872],{"class":222,"line":179},[220,68869,364],{"class":264},[220,68871,68701],{"class":420},[220,68873,359],{"class":264},[220,68875,68876,68878,68880],{"class":222,"line":389},[220,68877,2550],{"class":264},[220,68879,2553],{"class":420},[220,68881,386],{"class":264},[220,68883,68884,68886,68888],{"class":222,"line":399},[220,68885,2567],{"class":264},[220,68887,68701],{"class":420},[220,68889,359],{"class":264},[220,68891,68892,68894,68896],{"class":222,"line":644},[220,68893,402],{"class":264},[220,68895,347],{"class":420},[220,68897,359],{"class":264},[212,68899,68901],{"className":251,"code":68900,"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,68902,68903,68913,68917,68931,68935,68944,68952,68956,68960],{"__ignoreMap":178},[220,68904,68905,68907,68909,68911],{"class":222,"line":223},[220,68906,261],{"class":260},[220,68908,11512],{"class":264},[220,68910,268],{"class":260},[220,68912,4007],{"class":230},[220,68914,68915],{"class":222,"line":179},[220,68916,647],{"emptyLinePlaceholder":194},[220,68918,68919,68921,68923,68925,68927,68929],{"class":222,"line":389},[220,68920,1735],{"class":260},[220,68922,1738],{"class":420},[220,68924,1741],{"class":260},[220,68926,1744],{"class":260},[220,68928,1747],{"class":226},[220,68930,1750],{"class":264},[220,68932,68933],{"class":222,"line":399},[220,68934,1765],{"class":264},[220,68936,68937,68939,68942],{"class":222,"line":644},[220,68938,1770],{"class":264},[220,68940,68941],{"class":230},"'RippleWipe'",[220,68943,7009],{"class":264},[220,68945,68946,68948,68950],{"class":222,"line":650},[220,68947,7014],{"class":264},[220,68949,3206],{"class":230},[220,68951,2465],{"class":264},[220,68953,68954],{"class":222,"line":656},[220,68955,7031],{"class":264},[220,68957,68958],{"class":222,"line":673},[220,68959,1787],{"class":264},[220,68961,68962],{"class":222,"line":682},[220,68963,1792],{"class":264},[1504,68965,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":68967},[68968,68969],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fripplewipe",{"title":68701,"description":68709},"docs\u002Fcomponents\u002FRippleWipe","LOswGRn0XjmgHLubxtf4SiP5RFuduVhbbFC6v9OmRrU",{"id":68976,"title":68977,"body":68978,"category":33063,"componentType":25877,"description":68985,"extension":191,"meta":69170,"navigation":194,"path":69171,"requiresChild":32530,"seo":69172,"stem":69173,"__hash__":69174},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":68979,"toc":69166},[68980,68983,68986,68988,68990,68993,68995,69164],[11,68981,68977],{"id":68982},"ripples",[15,68984,68985],{},"Concentric animated ripples emanating from a point",[31911,68987],{"component":68977},[23,68989,31915],{"id":26533},[31917,68991],{":props":68992},"[{\"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,68994,31923],{"id":31922},[246,68996,68997,69026,69054,69082,69110],{":tabs":1557},[212,68998,69000],{"className":334,"code":68999,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,69001,69002,69010,69018],{"__ignoreMap":178},[220,69003,69004,69006,69008],{"class":222,"line":223},[220,69005,343],{"class":264},[220,69007,347],{"class":346},[220,69009,359],{"class":264},[220,69011,69012,69014,69016],{"class":222,"line":179},[220,69013,364],{"class":264},[220,69015,68977],{"class":346},[220,69017,386],{"class":264},[220,69019,69020,69022,69024],{"class":222,"line":389},[220,69021,402],{"class":264},[220,69023,347],{"class":346},[220,69025,359],{"class":264},[212,69027,69028],{"className":409,"code":68999,"language":411,"meta":178,"style":178},[99,69029,69030,69038,69046],{"__ignoreMap":178},[220,69031,69032,69034,69036],{"class":222,"line":223},[220,69033,343],{"class":264},[220,69035,347],{"class":420},[220,69037,359],{"class":264},[220,69039,69040,69042,69044],{"class":222,"line":179},[220,69041,364],{"class":264},[220,69043,68977],{"class":420},[220,69045,386],{"class":264},[220,69047,69048,69050,69052],{"class":222,"line":389},[220,69049,402],{"class":264},[220,69051,347],{"class":420},[220,69053,359],{"class":264},[212,69055,69056],{"className":2844,"code":68999,"language":2846,"meta":178,"style":178},[99,69057,69058,69066,69074],{"__ignoreMap":178},[220,69059,69060,69062,69064],{"class":222,"line":223},[220,69061,343],{"class":264},[220,69063,347],{"class":420},[220,69065,359],{"class":264},[220,69067,69068,69070,69072],{"class":222,"line":179},[220,69069,364],{"class":264},[220,69071,68977],{"class":420},[220,69073,386],{"class":264},[220,69075,69076,69078,69080],{"class":222,"line":389},[220,69077,402],{"class":264},[220,69079,347],{"class":420},[220,69081,359],{"class":264},[212,69083,69084],{"className":468,"code":68999,"language":469,"meta":178,"style":178},[99,69085,69086,69094,69102],{"__ignoreMap":178},[220,69087,69088,69090,69092],{"class":222,"line":223},[220,69089,343],{"class":264},[220,69091,347],{"class":420},[220,69093,359],{"class":264},[220,69095,69096,69098,69100],{"class":222,"line":179},[220,69097,364],{"class":264},[220,69099,68977],{"class":420},[220,69101,386],{"class":264},[220,69103,69104,69106,69108],{"class":222,"line":389},[220,69105,402],{"class":264},[220,69107,347],{"class":420},[220,69109,359],{"class":264},[212,69111,69113],{"className":251,"code":69112,"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,69114,69115,69125,69129,69143,69147,69156,69160],{"__ignoreMap":178},[220,69116,69117,69119,69121,69123],{"class":222,"line":223},[220,69118,261],{"class":260},[220,69120,11512],{"class":264},[220,69122,268],{"class":260},[220,69124,4007],{"class":230},[220,69126,69127],{"class":222,"line":179},[220,69128,647],{"emptyLinePlaceholder":194},[220,69130,69131,69133,69135,69137,69139,69141],{"class":222,"line":389},[220,69132,1735],{"class":260},[220,69134,1738],{"class":420},[220,69136,1741],{"class":260},[220,69138,1744],{"class":260},[220,69140,1747],{"class":226},[220,69142,1750],{"class":264},[220,69144,69145],{"class":222,"line":399},[220,69146,1765],{"class":264},[220,69148,69149,69151,69154],{"class":222,"line":644},[220,69150,1770],{"class":264},[220,69152,69153],{"class":230},"'Ripples'",[220,69155,2465],{"class":264},[220,69157,69158],{"class":222,"line":650},[220,69159,1787],{"class":264},[220,69161,69162],{"class":222,"line":656},[220,69163,1792],{"class":264},[1504,69165,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":69167},[69168,69169],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":68977,"description":68985},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":69176,"title":69177,"body":69178,"category":15908,"componentType":25877,"description":69185,"extension":191,"meta":69415,"navigation":194,"path":69416,"requiresChild":32530,"seo":69417,"stem":69418,"__hash__":69419},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":69179,"toc":69411},[69180,69183,69186,69188,69190,69193,69195,69409],[11,69181,69177],{"id":69182},"roundedrect",[15,69184,69185],{},"Rounded rectangle with adjustable width, height, and corner rounding",[31911,69187],{"component":69177},[23,69189,31915],{"id":26533},[31917,69191],{":props":69192},"[{\"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,69194,31923],{"id":31922},[246,69196,69197,69237,69275,69313,69351],{":tabs":1557},[212,69198,69200],{"className":334,"code":69199,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,69201,69202,69210,69217,69225,69229],{"__ignoreMap":178},[220,69203,69204,69206,69208],{"class":222,"line":223},[220,69205,343],{"class":264},[220,69207,347],{"class":346},[220,69209,359],{"class":264},[220,69211,69212,69214],{"class":222,"line":179},[220,69213,364],{"class":264},[220,69215,69216],{"class":346},"RoundedRect\n",[220,69218,69219,69221,69223],{"class":222,"line":389},[220,69220,9635],{"class":226},[220,69222,353],{"class":264},[220,69224,9591],{"class":230},[220,69226,69227],{"class":222,"line":399},[220,69228,1234],{"class":264},[220,69230,69231,69233,69235],{"class":222,"line":644},[220,69232,402],{"class":264},[220,69234,347],{"class":346},[220,69236,359],{"class":264},[212,69238,69239],{"className":409,"code":69199,"language":411,"meta":178,"style":178},[99,69240,69241,69249,69255,69263,69267],{"__ignoreMap":178},[220,69242,69243,69245,69247],{"class":222,"line":223},[220,69244,343],{"class":264},[220,69246,347],{"class":420},[220,69248,359],{"class":264},[220,69250,69251,69253],{"class":222,"line":179},[220,69252,364],{"class":264},[220,69254,69216],{"class":420},[220,69256,69257,69259,69261],{"class":222,"line":389},[220,69258,9635],{"class":226},[220,69260,353],{"class":260},[220,69262,9591],{"class":230},[220,69264,69265],{"class":222,"line":399},[220,69266,1234],{"class":264},[220,69268,69269,69271,69273],{"class":222,"line":644},[220,69270,402],{"class":264},[220,69272,347],{"class":420},[220,69274,359],{"class":264},[212,69276,69277],{"className":2844,"code":69199,"language":2846,"meta":178,"style":178},[99,69278,69279,69287,69293,69301,69305],{"__ignoreMap":178},[220,69280,69281,69283,69285],{"class":222,"line":223},[220,69282,343],{"class":264},[220,69284,347],{"class":420},[220,69286,359],{"class":264},[220,69288,69289,69291],{"class":222,"line":179},[220,69290,364],{"class":264},[220,69292,69216],{"class":420},[220,69294,69295,69297,69299],{"class":222,"line":389},[220,69296,9635],{"class":226},[220,69298,353],{"class":264},[220,69300,9591],{"class":230},[220,69302,69303],{"class":222,"line":399},[220,69304,1234],{"class":264},[220,69306,69307,69309,69311],{"class":222,"line":644},[220,69308,402],{"class":264},[220,69310,347],{"class":420},[220,69312,359],{"class":264},[212,69314,69315],{"className":468,"code":69199,"language":469,"meta":178,"style":178},[99,69316,69317,69325,69331,69339,69343],{"__ignoreMap":178},[220,69318,69319,69321,69323],{"class":222,"line":223},[220,69320,343],{"class":264},[220,69322,347],{"class":420},[220,69324,359],{"class":264},[220,69326,69327,69329],{"class":222,"line":179},[220,69328,364],{"class":264},[220,69330,69216],{"class":420},[220,69332,69333,69335,69337],{"class":222,"line":389},[220,69334,9635],{"class":226},[220,69336,353],{"class":260},[220,69338,9591],{"class":230},[220,69340,69341],{"class":222,"line":399},[220,69342,1234],{"class":264},[220,69344,69345,69347,69349],{"class":222,"line":644},[220,69346,402],{"class":264},[220,69348,347],{"class":420},[220,69350,359],{"class":264},[212,69352,69354],{"className":251,"code":69353,"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,69355,69356,69366,69370,69384,69388,69401,69405],{"__ignoreMap":178},[220,69357,69358,69360,69362,69364],{"class":222,"line":223},[220,69359,261],{"class":260},[220,69361,11512],{"class":264},[220,69363,268],{"class":260},[220,69365,4007],{"class":230},[220,69367,69368],{"class":222,"line":179},[220,69369,647],{"emptyLinePlaceholder":194},[220,69371,69372,69374,69376,69378,69380,69382],{"class":222,"line":389},[220,69373,1735],{"class":260},[220,69375,1738],{"class":420},[220,69377,1741],{"class":260},[220,69379,1744],{"class":260},[220,69381,1747],{"class":226},[220,69383,1750],{"class":264},[220,69385,69386],{"class":222,"line":399},[220,69387,1765],{"class":264},[220,69389,69390,69392,69395,69397,69399],{"class":222,"line":644},[220,69391,1770],{"class":264},[220,69393,69394],{"class":230},"'RoundedRect'",[220,69396,1776],{"class":264},[220,69398,10169],{"class":230},[220,69400,1782],{"class":264},[220,69402,69403],{"class":222,"line":650},[220,69404,1787],{"class":264},[220,69406,69407],{"class":222,"line":656},[220,69408,1792],{"class":264},[1504,69410,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69412},[69413,69414],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":69177,"description":69185},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":69421,"title":69422,"body":69423,"category":36368,"componentType":25883,"description":69429,"extension":191,"meta":69746,"navigation":194,"path":69747,"requiresChild":194,"seo":69748,"stem":69749,"__hash__":69750},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":69424,"toc":69742},[69425,69427,69430,69432,69434,69437,69439,69740],[11,69426,69422],{"id":8059},[15,69428,69429],{},"Adjust color saturation intensity",[31911,69431],{"component":69422},[23,69433,31915],{"id":26533},[31917,69435],{":props":69436},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,69438,31923],{"id":31922},[246,69440,69441,69497,69556,69612,69670],{":tabs":1557},[212,69442,69444],{"className":334,"code":69443,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,69445,69446,69454,69461,69469,69473,69481,69489],{"__ignoreMap":178},[220,69447,69448,69450,69452],{"class":222,"line":223},[220,69449,343],{"class":264},[220,69451,347],{"class":346},[220,69453,359],{"class":264},[220,69455,69456,69458],{"class":222,"line":179},[220,69457,364],{"class":264},[220,69459,69460],{"class":346},"Saturation\n",[220,69462,69463,69465,69467],{"class":222,"line":389},[220,69464,20371],{"class":226},[220,69466,353],{"class":264},[220,69468,36625],{"class":230},[220,69470,69471],{"class":222,"line":399},[220,69472,31959],{"class":264},[220,69474,69475,69477,69479],{"class":222,"line":644},[220,69476,2550],{"class":264},[220,69478,2553],{"class":346},[220,69480,386],{"class":264},[220,69482,69483,69485,69487],{"class":222,"line":650},[220,69484,2567],{"class":264},[220,69486,69422],{"class":346},[220,69488,359],{"class":264},[220,69490,69491,69493,69495],{"class":222,"line":656},[220,69492,402],{"class":264},[220,69494,347],{"class":346},[220,69496,359],{"class":264},[212,69498,69500],{"className":409,"code":69499,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,69501,69502,69510,69516,69528,69532,69540,69548],{"__ignoreMap":178},[220,69503,69504,69506,69508],{"class":222,"line":223},[220,69505,343],{"class":264},[220,69507,347],{"class":420},[220,69509,359],{"class":264},[220,69511,69512,69514],{"class":222,"line":179},[220,69513,364],{"class":264},[220,69515,69460],{"class":420},[220,69517,69518,69520,69522,69524,69526],{"class":222,"line":389},[220,69519,20482],{"class":226},[220,69521,353],{"class":260},[220,69523,743],{"class":264},[220,69525,8677],{"class":420},[220,69527,749],{"class":264},[220,69529,69530],{"class":222,"line":399},[220,69531,31959],{"class":264},[220,69533,69534,69536,69538],{"class":222,"line":644},[220,69535,2550],{"class":264},[220,69537,2553],{"class":420},[220,69539,386],{"class":264},[220,69541,69542,69544,69546],{"class":222,"line":650},[220,69543,2567],{"class":264},[220,69545,69422],{"class":420},[220,69547,359],{"class":264},[220,69549,69550,69552,69554],{"class":222,"line":656},[220,69551,402],{"class":264},[220,69553,347],{"class":420},[220,69555,359],{"class":264},[212,69557,69558],{"className":2844,"code":69499,"language":2846,"meta":178,"style":178},[99,69559,69560,69568,69574,69584,69588,69596,69604],{"__ignoreMap":178},[220,69561,69562,69564,69566],{"class":222,"line":223},[220,69563,343],{"class":264},[220,69565,347],{"class":420},[220,69567,359],{"class":264},[220,69569,69570,69572],{"class":222,"line":179},[220,69571,364],{"class":264},[220,69573,69460],{"class":420},[220,69575,69576,69578,69580,69582],{"class":222,"line":389},[220,69577,20482],{"class":226},[220,69579,29871],{"class":264},[220,69581,8677],{"class":420},[220,69583,749],{"class":264},[220,69585,69586],{"class":222,"line":399},[220,69587,31959],{"class":264},[220,69589,69590,69592,69594],{"class":222,"line":644},[220,69591,2550],{"class":264},[220,69593,2553],{"class":420},[220,69595,386],{"class":264},[220,69597,69598,69600,69602],{"class":222,"line":650},[220,69599,2567],{"class":264},[220,69601,69422],{"class":420},[220,69603,359],{"class":264},[220,69605,69606,69608,69610],{"class":222,"line":656},[220,69607,402],{"class":264},[220,69609,347],{"class":420},[220,69611,359],{"class":264},[212,69613,69614],{"className":468,"code":69499,"language":469,"meta":178,"style":178},[99,69615,69616,69624,69630,69642,69646,69654,69662],{"__ignoreMap":178},[220,69617,69618,69620,69622],{"class":222,"line":223},[220,69619,343],{"class":264},[220,69621,347],{"class":420},[220,69623,359],{"class":264},[220,69625,69626,69628],{"class":222,"line":179},[220,69627,364],{"class":264},[220,69629,69460],{"class":420},[220,69631,69632,69634,69636,69638,69640],{"class":222,"line":389},[220,69633,20482],{"class":226},[220,69635,353],{"class":260},[220,69637,743],{"class":264},[220,69639,8677],{"class":420},[220,69641,749],{"class":264},[220,69643,69644],{"class":222,"line":399},[220,69645,31959],{"class":264},[220,69647,69648,69650,69652],{"class":222,"line":644},[220,69649,2550],{"class":264},[220,69651,2553],{"class":420},[220,69653,386],{"class":264},[220,69655,69656,69658,69660],{"class":222,"line":650},[220,69657,2567],{"class":264},[220,69659,69422],{"class":420},[220,69661,359],{"class":264},[220,69663,69664,69666,69668],{"class":222,"line":656},[220,69665,402],{"class":264},[220,69667,347],{"class":420},[220,69669,359],{"class":264},[212,69671,69673],{"className":251,"code":69672,"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,69674,69675,69685,69689,69703,69707,69720,69728,69732,69736],{"__ignoreMap":178},[220,69676,69677,69679,69681,69683],{"class":222,"line":223},[220,69678,261],{"class":260},[220,69680,11512],{"class":264},[220,69682,268],{"class":260},[220,69684,4007],{"class":230},[220,69686,69687],{"class":222,"line":179},[220,69688,647],{"emptyLinePlaceholder":194},[220,69690,69691,69693,69695,69697,69699,69701],{"class":222,"line":389},[220,69692,1735],{"class":260},[220,69694,1738],{"class":420},[220,69696,1741],{"class":260},[220,69698,1744],{"class":260},[220,69700,1747],{"class":226},[220,69702,1750],{"class":264},[220,69704,69705],{"class":222,"line":399},[220,69706,1765],{"class":264},[220,69708,69709,69711,69714,69716,69718],{"class":222,"line":644},[220,69710,1770],{"class":264},[220,69712,69713],{"class":230},"'Saturation'",[220,69715,32203],{"class":264},[220,69717,8677],{"class":420},[220,69719,7546],{"class":264},[220,69721,69722,69724,69726],{"class":222,"line":650},[220,69723,7014],{"class":264},[220,69725,3206],{"class":230},[220,69727,2465],{"class":264},[220,69729,69730],{"class":222,"line":656},[220,69731,7031],{"class":264},[220,69733,69734],{"class":222,"line":673},[220,69735,1787],{"class":264},[220,69737,69738],{"class":222,"line":682},[220,69739,1792],{"class":264},[1504,69741,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69743},[69744,69745],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":69422,"description":69429},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":69752,"title":69753,"body":69754,"category":33063,"componentType":25877,"description":69761,"extension":191,"meta":69946,"navigation":194,"path":69947,"requiresChild":32530,"seo":69948,"stem":69949,"__hash__":69950},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":69755,"toc":69942},[69756,69759,69762,69764,69766,69769,69771,69940],[11,69757,69753],{"id":69758},"scratches",[15,69760,69761],{},"Fine hairline scratches, like a worn film or scratched surface",[31911,69763],{"component":69753},[23,69765,31915],{"id":26533},[31917,69767],{":props":69768},"[{\"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,69770,31923],{"id":31922},[246,69772,69773,69802,69830,69858,69886],{":tabs":1557},[212,69774,69776],{"className":334,"code":69775,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,69777,69778,69786,69794],{"__ignoreMap":178},[220,69779,69780,69782,69784],{"class":222,"line":223},[220,69781,343],{"class":264},[220,69783,347],{"class":346},[220,69785,359],{"class":264},[220,69787,69788,69790,69792],{"class":222,"line":179},[220,69789,364],{"class":264},[220,69791,69753],{"class":346},[220,69793,386],{"class":264},[220,69795,69796,69798,69800],{"class":222,"line":389},[220,69797,402],{"class":264},[220,69799,347],{"class":346},[220,69801,359],{"class":264},[212,69803,69804],{"className":409,"code":69775,"language":411,"meta":178,"style":178},[99,69805,69806,69814,69822],{"__ignoreMap":178},[220,69807,69808,69810,69812],{"class":222,"line":223},[220,69809,343],{"class":264},[220,69811,347],{"class":420},[220,69813,359],{"class":264},[220,69815,69816,69818,69820],{"class":222,"line":179},[220,69817,364],{"class":264},[220,69819,69753],{"class":420},[220,69821,386],{"class":264},[220,69823,69824,69826,69828],{"class":222,"line":389},[220,69825,402],{"class":264},[220,69827,347],{"class":420},[220,69829,359],{"class":264},[212,69831,69832],{"className":2844,"code":69775,"language":2846,"meta":178,"style":178},[99,69833,69834,69842,69850],{"__ignoreMap":178},[220,69835,69836,69838,69840],{"class":222,"line":223},[220,69837,343],{"class":264},[220,69839,347],{"class":420},[220,69841,359],{"class":264},[220,69843,69844,69846,69848],{"class":222,"line":179},[220,69845,364],{"class":264},[220,69847,69753],{"class":420},[220,69849,386],{"class":264},[220,69851,69852,69854,69856],{"class":222,"line":389},[220,69853,402],{"class":264},[220,69855,347],{"class":420},[220,69857,359],{"class":264},[212,69859,69860],{"className":468,"code":69775,"language":469,"meta":178,"style":178},[99,69861,69862,69870,69878],{"__ignoreMap":178},[220,69863,69864,69866,69868],{"class":222,"line":223},[220,69865,343],{"class":264},[220,69867,347],{"class":420},[220,69869,359],{"class":264},[220,69871,69872,69874,69876],{"class":222,"line":179},[220,69873,364],{"class":264},[220,69875,69753],{"class":420},[220,69877,386],{"class":264},[220,69879,69880,69882,69884],{"class":222,"line":389},[220,69881,402],{"class":264},[220,69883,347],{"class":420},[220,69885,359],{"class":264},[212,69887,69889],{"className":251,"code":69888,"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,69890,69891,69901,69905,69919,69923,69932,69936],{"__ignoreMap":178},[220,69892,69893,69895,69897,69899],{"class":222,"line":223},[220,69894,261],{"class":260},[220,69896,11512],{"class":264},[220,69898,268],{"class":260},[220,69900,4007],{"class":230},[220,69902,69903],{"class":222,"line":179},[220,69904,647],{"emptyLinePlaceholder":194},[220,69906,69907,69909,69911,69913,69915,69917],{"class":222,"line":389},[220,69908,1735],{"class":260},[220,69910,1738],{"class":420},[220,69912,1741],{"class":260},[220,69914,1744],{"class":260},[220,69916,1747],{"class":226},[220,69918,1750],{"class":264},[220,69920,69921],{"class":222,"line":399},[220,69922,1765],{"class":264},[220,69924,69925,69927,69930],{"class":222,"line":644},[220,69926,1770],{"class":264},[220,69928,69929],{"class":230},"'Scratches'",[220,69931,2465],{"class":264},[220,69933,69934],{"class":222,"line":650},[220,69935,1787],{"class":264},[220,69937,69938],{"class":222,"line":656},[220,69939,1792],{"class":264},[1504,69941,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":69943},[69944,69945],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":69753,"description":69761},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":69952,"title":69953,"body":69954,"category":36368,"componentType":25883,"description":69961,"extension":191,"meta":70222,"navigation":194,"path":70223,"requiresChild":194,"seo":70224,"stem":70225,"__hash__":70226},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":69955,"toc":70218},[69956,69959,69962,69964,69966,69969,69971,70216],[11,69957,69953],{"id":69958},"sharpness",[15,69960,69961],{},"Adjust image sharpness using a convolution kernel",[31911,69963],{"component":69953},[23,69965,31915],{"id":26533},[31917,69967],{":props":69968},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,69970,31923],{"id":31922},[246,69972,69973,70018,70062,70106,70150],{":tabs":1557},[212,69974,69976],{"className":334,"code":69975,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,69977,69978,69986,69994,70002,70010],{"__ignoreMap":178},[220,69979,69980,69982,69984],{"class":222,"line":223},[220,69981,343],{"class":264},[220,69983,347],{"class":346},[220,69985,359],{"class":264},[220,69987,69988,69990,69992],{"class":222,"line":179},[220,69989,364],{"class":264},[220,69991,69953],{"class":346},[220,69993,359],{"class":264},[220,69995,69996,69998,70000],{"class":222,"line":389},[220,69997,2550],{"class":264},[220,69999,2553],{"class":346},[220,70001,386],{"class":264},[220,70003,70004,70006,70008],{"class":222,"line":399},[220,70005,2567],{"class":264},[220,70007,69953],{"class":346},[220,70009,359],{"class":264},[220,70011,70012,70014,70016],{"class":222,"line":644},[220,70013,402],{"class":264},[220,70015,347],{"class":346},[220,70017,359],{"class":264},[212,70019,70020],{"className":409,"code":69975,"language":411,"meta":178,"style":178},[99,70021,70022,70030,70038,70046,70054],{"__ignoreMap":178},[220,70023,70024,70026,70028],{"class":222,"line":223},[220,70025,343],{"class":264},[220,70027,347],{"class":420},[220,70029,359],{"class":264},[220,70031,70032,70034,70036],{"class":222,"line":179},[220,70033,364],{"class":264},[220,70035,69953],{"class":420},[220,70037,359],{"class":264},[220,70039,70040,70042,70044],{"class":222,"line":389},[220,70041,2550],{"class":264},[220,70043,2553],{"class":420},[220,70045,386],{"class":264},[220,70047,70048,70050,70052],{"class":222,"line":399},[220,70049,2567],{"class":264},[220,70051,69953],{"class":420},[220,70053,359],{"class":264},[220,70055,70056,70058,70060],{"class":222,"line":644},[220,70057,402],{"class":264},[220,70059,347],{"class":420},[220,70061,359],{"class":264},[212,70063,70064],{"className":2844,"code":69975,"language":2846,"meta":178,"style":178},[99,70065,70066,70074,70082,70090,70098],{"__ignoreMap":178},[220,70067,70068,70070,70072],{"class":222,"line":223},[220,70069,343],{"class":264},[220,70071,347],{"class":420},[220,70073,359],{"class":264},[220,70075,70076,70078,70080],{"class":222,"line":179},[220,70077,364],{"class":264},[220,70079,69953],{"class":420},[220,70081,359],{"class":264},[220,70083,70084,70086,70088],{"class":222,"line":389},[220,70085,2550],{"class":264},[220,70087,2553],{"class":420},[220,70089,386],{"class":264},[220,70091,70092,70094,70096],{"class":222,"line":399},[220,70093,2567],{"class":264},[220,70095,69953],{"class":420},[220,70097,359],{"class":264},[220,70099,70100,70102,70104],{"class":222,"line":644},[220,70101,402],{"class":264},[220,70103,347],{"class":420},[220,70105,359],{"class":264},[212,70107,70108],{"className":468,"code":69975,"language":469,"meta":178,"style":178},[99,70109,70110,70118,70126,70134,70142],{"__ignoreMap":178},[220,70111,70112,70114,70116],{"class":222,"line":223},[220,70113,343],{"class":264},[220,70115,347],{"class":420},[220,70117,359],{"class":264},[220,70119,70120,70122,70124],{"class":222,"line":179},[220,70121,364],{"class":264},[220,70123,69953],{"class":420},[220,70125,359],{"class":264},[220,70127,70128,70130,70132],{"class":222,"line":389},[220,70129,2550],{"class":264},[220,70131,2553],{"class":420},[220,70133,386],{"class":264},[220,70135,70136,70138,70140],{"class":222,"line":399},[220,70137,2567],{"class":264},[220,70139,69953],{"class":420},[220,70141,359],{"class":264},[220,70143,70144,70146,70148],{"class":222,"line":644},[220,70145,402],{"class":264},[220,70147,347],{"class":420},[220,70149,359],{"class":264},[212,70151,70153],{"className":251,"code":70152,"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,70154,70155,70165,70169,70183,70187,70196,70204,70208,70212],{"__ignoreMap":178},[220,70156,70157,70159,70161,70163],{"class":222,"line":223},[220,70158,261],{"class":260},[220,70160,11512],{"class":264},[220,70162,268],{"class":260},[220,70164,4007],{"class":230},[220,70166,70167],{"class":222,"line":179},[220,70168,647],{"emptyLinePlaceholder":194},[220,70170,70171,70173,70175,70177,70179,70181],{"class":222,"line":389},[220,70172,1735],{"class":260},[220,70174,1738],{"class":420},[220,70176,1741],{"class":260},[220,70178,1744],{"class":260},[220,70180,1747],{"class":226},[220,70182,1750],{"class":264},[220,70184,70185],{"class":222,"line":399},[220,70186,1765],{"class":264},[220,70188,70189,70191,70194],{"class":222,"line":644},[220,70190,1770],{"class":264},[220,70192,70193],{"class":230},"'Sharpness'",[220,70195,7009],{"class":264},[220,70197,70198,70200,70202],{"class":222,"line":650},[220,70199,7014],{"class":264},[220,70201,3206],{"class":230},[220,70203,2465],{"class":264},[220,70205,70206],{"class":222,"line":656},[220,70207,7031],{"class":264},[220,70209,70210],{"class":222,"line":673},[220,70211,1787],{"class":264},[220,70213,70214],{"class":222,"line":682},[220,70215,1792],{"class":264},[1504,70217,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":70219},[70220,70221],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":69953,"description":69961},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":70228,"title":70229,"body":70230,"category":35559,"componentType":25883,"description":70237,"extension":191,"meta":70602,"navigation":194,"path":70603,"requiresChild":194,"seo":70604,"stem":70605,"__hash__":70606},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":70231,"toc":70598},[70232,70235,70238,70240,70242,70245,70247,70596],[11,70233,70229],{"id":70234},"shatter",[15,70236,70237],{},"Broken glass effect with tectonic plate displacement",[31911,70239],{"component":70229},[23,70241,31915],{"id":26533},[31917,70243],{":props":70244},"[{\"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,70246,31923],{"id":31922},[246,70248,70249,70314,70386,70452,70522],{":tabs":1557},[212,70250,70252],{"className":334,"code":70251,"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,70253,70254,70262,70269,70278,70286,70290,70298,70306],{"__ignoreMap":178},[220,70255,70256,70258,70260],{"class":222,"line":223},[220,70257,343],{"class":264},[220,70259,347],{"class":346},[220,70261,359],{"class":264},[220,70263,70264,70266],{"class":222,"line":179},[220,70265,364],{"class":264},[220,70267,70268],{"class":346},"Shatter\n",[220,70270,70271,70273,70275],{"class":222,"line":389},[220,70272,20371],{"class":226},[220,70274,353],{"class":264},[220,70276,70277],{"class":230},"\"4\"\n",[220,70279,70280,70282,70284],{"class":222,"line":399},[220,70281,17405],{"class":226},[220,70283,353],{"class":264},[220,70285,48348],{"class":230},[220,70287,70288],{"class":222,"line":644},[220,70289,31959],{"class":264},[220,70291,70292,70294,70296],{"class":222,"line":650},[220,70293,2550],{"class":264},[220,70295,2553],{"class":346},[220,70297,386],{"class":264},[220,70299,70300,70302,70304],{"class":222,"line":656},[220,70301,2567],{"class":264},[220,70303,70229],{"class":346},[220,70305,359],{"class":264},[220,70307,70308,70310,70312],{"class":222,"line":673},[220,70309,402],{"class":264},[220,70311,347],{"class":346},[220,70313,359],{"class":264},[212,70315,70317],{"className":409,"code":70316,"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,70318,70319,70327,70333,70346,70358,70362,70370,70378],{"__ignoreMap":178},[220,70320,70321,70323,70325],{"class":222,"line":223},[220,70322,343],{"class":264},[220,70324,347],{"class":420},[220,70326,359],{"class":264},[220,70328,70329,70331],{"class":222,"line":179},[220,70330,364],{"class":264},[220,70332,70268],{"class":420},[220,70334,70335,70337,70339,70341,70344],{"class":222,"line":389},[220,70336,20482],{"class":226},[220,70338,353],{"class":260},[220,70340,743],{"class":264},[220,70342,70343],{"class":420},"4",[220,70345,749],{"class":264},[220,70347,70348,70350,70352,70354,70356],{"class":222,"line":399},[220,70349,9645],{"class":226},[220,70351,353],{"class":260},[220,70353,743],{"class":264},[220,70355,8249],{"class":420},[220,70357,749],{"class":264},[220,70359,70360],{"class":222,"line":644},[220,70361,31959],{"class":264},[220,70363,70364,70366,70368],{"class":222,"line":650},[220,70365,2550],{"class":264},[220,70367,2553],{"class":420},[220,70369,386],{"class":264},[220,70371,70372,70374,70376],{"class":222,"line":656},[220,70373,2567],{"class":264},[220,70375,70229],{"class":420},[220,70377,359],{"class":264},[220,70379,70380,70382,70384],{"class":222,"line":673},[220,70381,402],{"class":264},[220,70383,347],{"class":420},[220,70385,359],{"class":264},[212,70387,70388],{"className":2844,"code":70316,"language":2846,"meta":178,"style":178},[99,70389,70390,70398,70404,70414,70424,70428,70436,70444],{"__ignoreMap":178},[220,70391,70392,70394,70396],{"class":222,"line":223},[220,70393,343],{"class":264},[220,70395,347],{"class":420},[220,70397,359],{"class":264},[220,70399,70400,70402],{"class":222,"line":179},[220,70401,364],{"class":264},[220,70403,70268],{"class":420},[220,70405,70406,70408,70410,70412],{"class":222,"line":389},[220,70407,20482],{"class":226},[220,70409,29871],{"class":264},[220,70411,70343],{"class":420},[220,70413,749],{"class":264},[220,70415,70416,70418,70420,70422],{"class":222,"line":399},[220,70417,9645],{"class":226},[220,70419,29871],{"class":264},[220,70421,8249],{"class":420},[220,70423,749],{"class":264},[220,70425,70426],{"class":222,"line":644},[220,70427,31959],{"class":264},[220,70429,70430,70432,70434],{"class":222,"line":650},[220,70431,2550],{"class":264},[220,70433,2553],{"class":420},[220,70435,386],{"class":264},[220,70437,70438,70440,70442],{"class":222,"line":656},[220,70439,2567],{"class":264},[220,70441,70229],{"class":420},[220,70443,359],{"class":264},[220,70445,70446,70448,70450],{"class":222,"line":673},[220,70447,402],{"class":264},[220,70449,347],{"class":420},[220,70451,359],{"class":264},[212,70453,70454],{"className":468,"code":70316,"language":469,"meta":178,"style":178},[99,70455,70456,70464,70470,70482,70494,70498,70506,70514],{"__ignoreMap":178},[220,70457,70458,70460,70462],{"class":222,"line":223},[220,70459,343],{"class":264},[220,70461,347],{"class":420},[220,70463,359],{"class":264},[220,70465,70466,70468],{"class":222,"line":179},[220,70467,364],{"class":264},[220,70469,70268],{"class":420},[220,70471,70472,70474,70476,70478,70480],{"class":222,"line":389},[220,70473,20482],{"class":226},[220,70475,353],{"class":260},[220,70477,743],{"class":264},[220,70479,70343],{"class":420},[220,70481,749],{"class":264},[220,70483,70484,70486,70488,70490,70492],{"class":222,"line":399},[220,70485,9645],{"class":226},[220,70487,353],{"class":260},[220,70489,743],{"class":264},[220,70491,8249],{"class":420},[220,70493,749],{"class":264},[220,70495,70496],{"class":222,"line":644},[220,70497,31959],{"class":264},[220,70499,70500,70502,70504],{"class":222,"line":650},[220,70501,2550],{"class":264},[220,70503,2553],{"class":420},[220,70505,386],{"class":264},[220,70507,70508,70510,70512],{"class":222,"line":656},[220,70509,2567],{"class":264},[220,70511,70229],{"class":420},[220,70513,359],{"class":264},[220,70515,70516,70518,70520],{"class":222,"line":673},[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: 'Shatter', props: { intensity: 4, radius: 0.4 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,70526,70527,70537,70541,70555,70559,70576,70584,70588,70592],{"__ignoreMap":178},[220,70528,70529,70531,70533,70535],{"class":222,"line":223},[220,70530,261],{"class":260},[220,70532,11512],{"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,70568,70570,70572,70574],{"class":222,"line":644},[220,70562,1770],{"class":264},[220,70564,70565],{"class":230},"'Shatter'",[220,70567,32203],{"class":264},[220,70569,70343],{"class":420},[220,70571,6566],{"class":264},[220,70573,8249],{"class":420},[220,70575,7546],{"class":264},[220,70577,70578,70580,70582],{"class":222,"line":650},[220,70579,7014],{"class":264},[220,70581,3206],{"class":230},[220,70583,2465],{"class":264},[220,70585,70586],{"class":222,"line":656},[220,70587,7031],{"class":264},[220,70589,70590],{"class":222,"line":673},[220,70591,1787],{"class":264},[220,70593,70594],{"class":222,"line":682},[220,70595,1792],{"class":264},[1504,70597,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70599},[70600,70601],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":70229,"description":70237},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":70608,"title":70609,"body":70610,"category":33063,"componentType":25877,"description":70617,"extension":191,"meta":70802,"navigation":194,"path":70803,"requiresChild":32530,"seo":70804,"stem":70805,"__hash__":70806},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":70611,"toc":70798},[70612,70615,70618,70620,70622,70625,70627,70796],[11,70613,70609],{"id":70614},"simplexnoise",[15,70616,70617],{},"Organic noise with animated movement",[31911,70619],{"component":70609},[23,70621,31915],{"id":26533},[31917,70623],{":props":70624},"[{\"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,70626,31923],{"id":31922},[246,70628,70629,70658,70686,70714,70742],{":tabs":1557},[212,70630,70632],{"className":334,"code":70631,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,70633,70634,70642,70650],{"__ignoreMap":178},[220,70635,70636,70638,70640],{"class":222,"line":223},[220,70637,343],{"class":264},[220,70639,347],{"class":346},[220,70641,359],{"class":264},[220,70643,70644,70646,70648],{"class":222,"line":179},[220,70645,364],{"class":264},[220,70647,70609],{"class":346},[220,70649,386],{"class":264},[220,70651,70652,70654,70656],{"class":222,"line":389},[220,70653,402],{"class":264},[220,70655,347],{"class":346},[220,70657,359],{"class":264},[212,70659,70660],{"className":409,"code":70631,"language":411,"meta":178,"style":178},[99,70661,70662,70670,70678],{"__ignoreMap":178},[220,70663,70664,70666,70668],{"class":222,"line":223},[220,70665,343],{"class":264},[220,70667,347],{"class":420},[220,70669,359],{"class":264},[220,70671,70672,70674,70676],{"class":222,"line":179},[220,70673,364],{"class":264},[220,70675,70609],{"class":420},[220,70677,386],{"class":264},[220,70679,70680,70682,70684],{"class":222,"line":389},[220,70681,402],{"class":264},[220,70683,347],{"class":420},[220,70685,359],{"class":264},[212,70687,70688],{"className":2844,"code":70631,"language":2846,"meta":178,"style":178},[99,70689,70690,70698,70706],{"__ignoreMap":178},[220,70691,70692,70694,70696],{"class":222,"line":223},[220,70693,343],{"class":264},[220,70695,347],{"class":420},[220,70697,359],{"class":264},[220,70699,70700,70702,70704],{"class":222,"line":179},[220,70701,364],{"class":264},[220,70703,70609],{"class":420},[220,70705,386],{"class":264},[220,70707,70708,70710,70712],{"class":222,"line":389},[220,70709,402],{"class":264},[220,70711,347],{"class":420},[220,70713,359],{"class":264},[212,70715,70716],{"className":468,"code":70631,"language":469,"meta":178,"style":178},[99,70717,70718,70726,70734],{"__ignoreMap":178},[220,70719,70720,70722,70724],{"class":222,"line":223},[220,70721,343],{"class":264},[220,70723,347],{"class":420},[220,70725,359],{"class":264},[220,70727,70728,70730,70732],{"class":222,"line":179},[220,70729,364],{"class":264},[220,70731,70609],{"class":420},[220,70733,386],{"class":264},[220,70735,70736,70738,70740],{"class":222,"line":389},[220,70737,402],{"class":264},[220,70739,347],{"class":420},[220,70741,359],{"class":264},[212,70743,70745],{"className":251,"code":70744,"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,70746,70747,70757,70761,70775,70779,70788,70792],{"__ignoreMap":178},[220,70748,70749,70751,70753,70755],{"class":222,"line":223},[220,70750,261],{"class":260},[220,70752,11512],{"class":264},[220,70754,268],{"class":260},[220,70756,4007],{"class":230},[220,70758,70759],{"class":222,"line":179},[220,70760,647],{"emptyLinePlaceholder":194},[220,70762,70763,70765,70767,70769,70771,70773],{"class":222,"line":389},[220,70764,1735],{"class":260},[220,70766,1738],{"class":420},[220,70768,1741],{"class":260},[220,70770,1744],{"class":260},[220,70772,1747],{"class":226},[220,70774,1750],{"class":264},[220,70776,70777],{"class":222,"line":399},[220,70778,1765],{"class":264},[220,70780,70781,70783,70786],{"class":222,"line":644},[220,70782,1770],{"class":264},[220,70784,70785],{"class":230},"'SimplexNoise'",[220,70787,2465],{"class":264},[220,70789,70790],{"class":222,"line":650},[220,70791,1787],{"class":264},[220,70793,70794],{"class":222,"line":656},[220,70795,1792],{"class":264},[1504,70797,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":70799},[70800,70801],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":70609,"description":70617},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":70808,"title":70809,"body":70810,"category":33063,"componentType":25877,"description":70817,"extension":191,"meta":71047,"navigation":194,"path":71048,"requiresChild":32530,"seo":71049,"stem":71050,"__hash__":71051},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":70811,"toc":71043},[70812,70815,70818,70820,70822,70825,70827,71041],[11,70813,70809],{"id":70814},"sinewave",[15,70816,70817],{},"Animated wave with thickness and softness",[31911,70819],{"component":70809},[23,70821,31915],{"id":26533},[31917,70823],{":props":70824},"[{\"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,70826,31923],{"id":31922},[246,70828,70829,70869,70907,70945,70983],{":tabs":1557},[212,70830,70832],{"className":334,"code":70831,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,70833,70834,70842,70849,70857,70861],{"__ignoreMap":178},[220,70835,70836,70838,70840],{"class":222,"line":223},[220,70837,343],{"class":264},[220,70839,347],{"class":346},[220,70841,359],{"class":264},[220,70843,70844,70846],{"class":222,"line":179},[220,70845,364],{"class":264},[220,70847,70848],{"class":346},"SineWave\n",[220,70850,70851,70853,70855],{"class":222,"line":389},[220,70852,9635],{"class":226},[220,70854,353],{"class":264},[220,70856,9591],{"class":230},[220,70858,70859],{"class":222,"line":399},[220,70860,1234],{"class":264},[220,70862,70863,70865,70867],{"class":222,"line":644},[220,70864,402],{"class":264},[220,70866,347],{"class":346},[220,70868,359],{"class":264},[212,70870,70871],{"className":409,"code":70831,"language":411,"meta":178,"style":178},[99,70872,70873,70881,70887,70895,70899],{"__ignoreMap":178},[220,70874,70875,70877,70879],{"class":222,"line":223},[220,70876,343],{"class":264},[220,70878,347],{"class":420},[220,70880,359],{"class":264},[220,70882,70883,70885],{"class":222,"line":179},[220,70884,364],{"class":264},[220,70886,70848],{"class":420},[220,70888,70889,70891,70893],{"class":222,"line":389},[220,70890,9635],{"class":226},[220,70892,353],{"class":260},[220,70894,9591],{"class":230},[220,70896,70897],{"class":222,"line":399},[220,70898,1234],{"class":264},[220,70900,70901,70903,70905],{"class":222,"line":644},[220,70902,402],{"class":264},[220,70904,347],{"class":420},[220,70906,359],{"class":264},[212,70908,70909],{"className":2844,"code":70831,"language":2846,"meta":178,"style":178},[99,70910,70911,70919,70925,70933,70937],{"__ignoreMap":178},[220,70912,70913,70915,70917],{"class":222,"line":223},[220,70914,343],{"class":264},[220,70916,347],{"class":420},[220,70918,359],{"class":264},[220,70920,70921,70923],{"class":222,"line":179},[220,70922,364],{"class":264},[220,70924,70848],{"class":420},[220,70926,70927,70929,70931],{"class":222,"line":389},[220,70928,9635],{"class":226},[220,70930,353],{"class":264},[220,70932,9591],{"class":230},[220,70934,70935],{"class":222,"line":399},[220,70936,1234],{"class":264},[220,70938,70939,70941,70943],{"class":222,"line":644},[220,70940,402],{"class":264},[220,70942,347],{"class":420},[220,70944,359],{"class":264},[212,70946,70947],{"className":468,"code":70831,"language":469,"meta":178,"style":178},[99,70948,70949,70957,70963,70971,70975],{"__ignoreMap":178},[220,70950,70951,70953,70955],{"class":222,"line":223},[220,70952,343],{"class":264},[220,70954,347],{"class":420},[220,70956,359],{"class":264},[220,70958,70959,70961],{"class":222,"line":179},[220,70960,364],{"class":264},[220,70962,70848],{"class":420},[220,70964,70965,70967,70969],{"class":222,"line":389},[220,70966,9635],{"class":226},[220,70968,353],{"class":260},[220,70970,9591],{"class":230},[220,70972,70973],{"class":222,"line":399},[220,70974,1234],{"class":264},[220,70976,70977,70979,70981],{"class":222,"line":644},[220,70978,402],{"class":264},[220,70980,347],{"class":420},[220,70982,359],{"class":264},[212,70984,70986],{"className":251,"code":70985,"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,70987,70988,70998,71002,71016,71020,71033,71037],{"__ignoreMap":178},[220,70989,70990,70992,70994,70996],{"class":222,"line":223},[220,70991,261],{"class":260},[220,70993,11512],{"class":264},[220,70995,268],{"class":260},[220,70997,4007],{"class":230},[220,70999,71000],{"class":222,"line":179},[220,71001,647],{"emptyLinePlaceholder":194},[220,71003,71004,71006,71008,71010,71012,71014],{"class":222,"line":389},[220,71005,1735],{"class":260},[220,71007,1738],{"class":420},[220,71009,1741],{"class":260},[220,71011,1744],{"class":260},[220,71013,1747],{"class":226},[220,71015,1750],{"class":264},[220,71017,71018],{"class":222,"line":399},[220,71019,1765],{"class":264},[220,71021,71022,71024,71027,71029,71031],{"class":222,"line":644},[220,71023,1770],{"class":264},[220,71025,71026],{"class":230},"'SineWave'",[220,71028,1776],{"class":264},[220,71030,10169],{"class":230},[220,71032,1782],{"class":264},[220,71034,71035],{"class":222,"line":650},[220,71036,1787],{"class":264},[220,71038,71039],{"class":222,"line":656},[220,71040,1792],{"class":264},[1504,71042,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71044},[71045,71046],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":70809,"description":70817},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":71053,"title":71054,"body":71055,"category":33673,"componentType":25883,"description":71062,"extension":191,"meta":71323,"navigation":194,"path":71324,"requiresChild":194,"seo":71325,"stem":71326,"__hash__":71327},"components\u002Fdocs\u002Fcomponents\u002FSliceWipe.md","SliceWipe",{"type":8,"value":71056,"toc":71319},[71057,71060,71063,71065,71067,71070,71072,71317],[11,71058,71054],{"id":71059},"slicewipe",[15,71061,71062],{},"Slice the content into strips that slide away in alternating directions",[31911,71064],{"component":71054},[23,71066,31915],{"id":26533},[31917,71068],{":props":71069},"[{\"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,71071,31923],{"id":31922},[246,71073,71074,71119,71163,71207,71251],{":tabs":1557},[212,71075,71077],{"className":334,"code":71076,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSliceWipe>\n \u003CCircle \u002F>\n \u003C\u002FSliceWipe>\n\u003C\u002FShader>\n",[99,71078,71079,71087,71095,71103,71111],{"__ignoreMap":178},[220,71080,71081,71083,71085],{"class":222,"line":223},[220,71082,343],{"class":264},[220,71084,347],{"class":346},[220,71086,359],{"class":264},[220,71088,71089,71091,71093],{"class":222,"line":179},[220,71090,364],{"class":264},[220,71092,71054],{"class":346},[220,71094,359],{"class":264},[220,71096,71097,71099,71101],{"class":222,"line":389},[220,71098,2550],{"class":264},[220,71100,2553],{"class":346},[220,71102,386],{"class":264},[220,71104,71105,71107,71109],{"class":222,"line":399},[220,71106,2567],{"class":264},[220,71108,71054],{"class":346},[220,71110,359],{"class":264},[220,71112,71113,71115,71117],{"class":222,"line":644},[220,71114,402],{"class":264},[220,71116,347],{"class":346},[220,71118,359],{"class":264},[212,71120,71121],{"className":409,"code":71076,"language":411,"meta":178,"style":178},[99,71122,71123,71131,71139,71147,71155],{"__ignoreMap":178},[220,71124,71125,71127,71129],{"class":222,"line":223},[220,71126,343],{"class":264},[220,71128,347],{"class":420},[220,71130,359],{"class":264},[220,71132,71133,71135,71137],{"class":222,"line":179},[220,71134,364],{"class":264},[220,71136,71054],{"class":420},[220,71138,359],{"class":264},[220,71140,71141,71143,71145],{"class":222,"line":389},[220,71142,2550],{"class":264},[220,71144,2553],{"class":420},[220,71146,386],{"class":264},[220,71148,71149,71151,71153],{"class":222,"line":399},[220,71150,2567],{"class":264},[220,71152,71054],{"class":420},[220,71154,359],{"class":264},[220,71156,71157,71159,71161],{"class":222,"line":644},[220,71158,402],{"class":264},[220,71160,347],{"class":420},[220,71162,359],{"class":264},[212,71164,71165],{"className":2844,"code":71076,"language":2846,"meta":178,"style":178},[99,71166,71167,71175,71183,71191,71199],{"__ignoreMap":178},[220,71168,71169,71171,71173],{"class":222,"line":223},[220,71170,343],{"class":264},[220,71172,347],{"class":420},[220,71174,359],{"class":264},[220,71176,71177,71179,71181],{"class":222,"line":179},[220,71178,364],{"class":264},[220,71180,71054],{"class":420},[220,71182,359],{"class":264},[220,71184,71185,71187,71189],{"class":222,"line":389},[220,71186,2550],{"class":264},[220,71188,2553],{"class":420},[220,71190,386],{"class":264},[220,71192,71193,71195,71197],{"class":222,"line":399},[220,71194,2567],{"class":264},[220,71196,71054],{"class":420},[220,71198,359],{"class":264},[220,71200,71201,71203,71205],{"class":222,"line":644},[220,71202,402],{"class":264},[220,71204,347],{"class":420},[220,71206,359],{"class":264},[212,71208,71209],{"className":468,"code":71076,"language":469,"meta":178,"style":178},[99,71210,71211,71219,71227,71235,71243],{"__ignoreMap":178},[220,71212,71213,71215,71217],{"class":222,"line":223},[220,71214,343],{"class":264},[220,71216,347],{"class":420},[220,71218,359],{"class":264},[220,71220,71221,71223,71225],{"class":222,"line":179},[220,71222,364],{"class":264},[220,71224,71054],{"class":420},[220,71226,359],{"class":264},[220,71228,71229,71231,71233],{"class":222,"line":389},[220,71230,2550],{"class":264},[220,71232,2553],{"class":420},[220,71234,386],{"class":264},[220,71236,71237,71239,71241],{"class":222,"line":399},[220,71238,2567],{"class":264},[220,71240,71054],{"class":420},[220,71242,359],{"class":264},[220,71244,71245,71247,71249],{"class":222,"line":644},[220,71246,402],{"class":264},[220,71248,347],{"class":420},[220,71250,359],{"class":264},[212,71252,71254],{"className":251,"code":71253,"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,71255,71256,71266,71270,71284,71288,71297,71305,71309,71313],{"__ignoreMap":178},[220,71257,71258,71260,71262,71264],{"class":222,"line":223},[220,71259,261],{"class":260},[220,71261,11512],{"class":264},[220,71263,268],{"class":260},[220,71265,4007],{"class":230},[220,71267,71268],{"class":222,"line":179},[220,71269,647],{"emptyLinePlaceholder":194},[220,71271,71272,71274,71276,71278,71280,71282],{"class":222,"line":389},[220,71273,1735],{"class":260},[220,71275,1738],{"class":420},[220,71277,1741],{"class":260},[220,71279,1744],{"class":260},[220,71281,1747],{"class":226},[220,71283,1750],{"class":264},[220,71285,71286],{"class":222,"line":399},[220,71287,1765],{"class":264},[220,71289,71290,71292,71295],{"class":222,"line":644},[220,71291,1770],{"class":264},[220,71293,71294],{"class":230},"'SliceWipe'",[220,71296,7009],{"class":264},[220,71298,71299,71301,71303],{"class":222,"line":650},[220,71300,7014],{"class":264},[220,71302,3206],{"class":230},[220,71304,2465],{"class":264},[220,71306,71307],{"class":222,"line":656},[220,71308,7031],{"class":264},[220,71310,71311],{"class":222,"line":673},[220,71312,1787],{"class":264},[220,71314,71315],{"class":222,"line":682},[220,71316,1792],{"class":264},[1504,71318,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":71320},[71321,71322],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fslicewipe",{"title":71054,"description":71062},"docs\u002Fcomponents\u002FSliceWipe","USVVGPmSms2A_JjUbAZu4pSl0AhaAY6Dkor41vykVBA",{"id":71329,"title":71330,"body":71331,"category":35559,"componentType":25877,"description":71338,"extension":191,"meta":71579,"navigation":194,"path":71580,"requiresChild":32530,"seo":71581,"stem":71582,"__hash__":71583},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":71332,"toc":71575},[71333,71336,71339,71341,71343,71346,71348,71573],[11,71334,71330],{"id":71335},"smoke",[15,71337,71338],{},"Realistic fluid smoke simulation with vorticity dynamics",[31911,71340],{"component":71330},[23,71342,31915],{"id":26533},[31917,71344],{":props":71345},"[{\"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,71347,31923],{"id":31922},[246,71349,71350,71390,71433,71473,71515],{":tabs":1557},[212,71351,71353],{"className":334,"code":71352,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71354,71355,71363,71370,71378,71382],{"__ignoreMap":178},[220,71356,71357,71359,71361],{"class":222,"line":223},[220,71358,343],{"class":264},[220,71360,347],{"class":346},[220,71362,359],{"class":264},[220,71364,71365,71367],{"class":222,"line":179},[220,71366,364],{"class":264},[220,71368,71369],{"class":346},"Smoke\n",[220,71371,71372,71374,71376],{"class":222,"line":389},[220,71373,20371],{"class":226},[220,71375,353],{"class":264},[220,71377,36625],{"class":230},[220,71379,71380],{"class":222,"line":399},[220,71381,1234],{"class":264},[220,71383,71384,71386,71388],{"class":222,"line":644},[220,71385,402],{"class":264},[220,71387,347],{"class":346},[220,71389,359],{"class":264},[212,71391,71393],{"className":409,"code":71392,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71394,71395,71403,71409,71421,71425],{"__ignoreMap":178},[220,71396,71397,71399,71401],{"class":222,"line":223},[220,71398,343],{"class":264},[220,71400,347],{"class":420},[220,71402,359],{"class":264},[220,71404,71405,71407],{"class":222,"line":179},[220,71406,364],{"class":264},[220,71408,71369],{"class":420},[220,71410,71411,71413,71415,71417,71419],{"class":222,"line":389},[220,71412,20482],{"class":226},[220,71414,353],{"class":260},[220,71416,743],{"class":264},[220,71418,8677],{"class":420},[220,71420,749],{"class":264},[220,71422,71423],{"class":222,"line":399},[220,71424,1234],{"class":264},[220,71426,71427,71429,71431],{"class":222,"line":644},[220,71428,402],{"class":264},[220,71430,347],{"class":420},[220,71432,359],{"class":264},[212,71434,71435],{"className":2844,"code":71392,"language":2846,"meta":178,"style":178},[99,71436,71437,71445,71451,71461,71465],{"__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],{"class":222,"line":179},[220,71448,364],{"class":264},[220,71450,71369],{"class":420},[220,71452,71453,71455,71457,71459],{"class":222,"line":389},[220,71454,20482],{"class":226},[220,71456,29871],{"class":264},[220,71458,8677],{"class":420},[220,71460,749],{"class":264},[220,71462,71463],{"class":222,"line":399},[220,71464,1234],{"class":264},[220,71466,71467,71469,71471],{"class":222,"line":644},[220,71468,402],{"class":264},[220,71470,347],{"class":420},[220,71472,359],{"class":264},[212,71474,71475],{"className":468,"code":71392,"language":469,"meta":178,"style":178},[99,71476,71477,71485,71491,71503,71507],{"__ignoreMap":178},[220,71478,71479,71481,71483],{"class":222,"line":223},[220,71480,343],{"class":264},[220,71482,347],{"class":420},[220,71484,359],{"class":264},[220,71486,71487,71489],{"class":222,"line":179},[220,71488,364],{"class":264},[220,71490,71369],{"class":420},[220,71492,71493,71495,71497,71499,71501],{"class":222,"line":389},[220,71494,20482],{"class":226},[220,71496,353],{"class":260},[220,71498,743],{"class":264},[220,71500,8677],{"class":420},[220,71502,749],{"class":264},[220,71504,71505],{"class":222,"line":399},[220,71506,1234],{"class":264},[220,71508,71509,71511,71513],{"class":222,"line":644},[220,71510,402],{"class":264},[220,71512,347],{"class":420},[220,71514,359],{"class":264},[212,71516,71518],{"className":251,"code":71517,"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,71519,71520,71530,71534,71548,71552,71565,71569],{"__ignoreMap":178},[220,71521,71522,71524,71526,71528],{"class":222,"line":223},[220,71523,261],{"class":260},[220,71525,11512],{"class":264},[220,71527,268],{"class":260},[220,71529,4007],{"class":230},[220,71531,71532],{"class":222,"line":179},[220,71533,647],{"emptyLinePlaceholder":194},[220,71535,71536,71538,71540,71542,71544,71546],{"class":222,"line":389},[220,71537,1735],{"class":260},[220,71539,1738],{"class":420},[220,71541,1741],{"class":260},[220,71543,1744],{"class":260},[220,71545,1747],{"class":226},[220,71547,1750],{"class":264},[220,71549,71550],{"class":222,"line":399},[220,71551,1765],{"class":264},[220,71553,71554,71556,71559,71561,71563],{"class":222,"line":644},[220,71555,1770],{"class":264},[220,71557,71558],{"class":230},"'Smoke'",[220,71560,32203],{"class":264},[220,71562,8677],{"class":420},[220,71564,1782],{"class":264},[220,71566,71567],{"class":222,"line":650},[220,71568,1787],{"class":264},[220,71570,71571],{"class":222,"line":656},[220,71572,1792],{"class":264},[1504,71574,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71576},[71577,71578],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":71330,"description":71338},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":71585,"title":23176,"body":71586,"category":36569,"componentType":25877,"description":71593,"extension":191,"meta":71834,"navigation":194,"path":71835,"requiresChild":32530,"seo":71836,"stem":71837,"__hash__":71838},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":71587,"toc":71830},[71588,71591,71594,71596,71598,71601,71603,71828],[11,71589,23176],{"id":71590},"smokefill",[15,71592,71593],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[31911,71595],{"component":23176},[23,71597,31915],{"id":26533},[31917,71599],{":props":71600},"[{\"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,71602,31923],{"id":31922},[246,71604,71605,71645,71688,71728,71770],{":tabs":1557},[212,71606,71608],{"className":334,"code":71607,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71609,71610,71618,71625,71633,71637],{"__ignoreMap":178},[220,71611,71612,71614,71616],{"class":222,"line":223},[220,71613,343],{"class":264},[220,71615,347],{"class":346},[220,71617,359],{"class":264},[220,71619,71620,71622],{"class":222,"line":179},[220,71621,364],{"class":264},[220,71623,71624],{"class":346},"SmokeFill\n",[220,71626,71627,71629,71631],{"class":222,"line":389},[220,71628,20371],{"class":226},[220,71630,353],{"class":264},[220,71632,36625],{"class":230},[220,71634,71635],{"class":222,"line":399},[220,71636,1234],{"class":264},[220,71638,71639,71641,71643],{"class":222,"line":644},[220,71640,402],{"class":264},[220,71642,347],{"class":346},[220,71644,359],{"class":264},[212,71646,71648],{"className":409,"code":71647,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71649,71650,71658,71664,71676,71680],{"__ignoreMap":178},[220,71651,71652,71654,71656],{"class":222,"line":223},[220,71653,343],{"class":264},[220,71655,347],{"class":420},[220,71657,359],{"class":264},[220,71659,71660,71662],{"class":222,"line":179},[220,71661,364],{"class":264},[220,71663,71624],{"class":420},[220,71665,71666,71668,71670,71672,71674],{"class":222,"line":389},[220,71667,20482],{"class":226},[220,71669,353],{"class":260},[220,71671,743],{"class":264},[220,71673,8677],{"class":420},[220,71675,749],{"class":264},[220,71677,71678],{"class":222,"line":399},[220,71679,1234],{"class":264},[220,71681,71682,71684,71686],{"class":222,"line":644},[220,71683,402],{"class":264},[220,71685,347],{"class":420},[220,71687,359],{"class":264},[212,71689,71690],{"className":2844,"code":71647,"language":2846,"meta":178,"style":178},[99,71691,71692,71700,71706,71716,71720],{"__ignoreMap":178},[220,71693,71694,71696,71698],{"class":222,"line":223},[220,71695,343],{"class":264},[220,71697,347],{"class":420},[220,71699,359],{"class":264},[220,71701,71702,71704],{"class":222,"line":179},[220,71703,364],{"class":264},[220,71705,71624],{"class":420},[220,71707,71708,71710,71712,71714],{"class":222,"line":389},[220,71709,20482],{"class":226},[220,71711,29871],{"class":264},[220,71713,8677],{"class":420},[220,71715,749],{"class":264},[220,71717,71718],{"class":222,"line":399},[220,71719,1234],{"class":264},[220,71721,71722,71724,71726],{"class":222,"line":644},[220,71723,402],{"class":264},[220,71725,347],{"class":420},[220,71727,359],{"class":264},[212,71729,71730],{"className":468,"code":71647,"language":469,"meta":178,"style":178},[99,71731,71732,71740,71746,71758,71762],{"__ignoreMap":178},[220,71733,71734,71736,71738],{"class":222,"line":223},[220,71735,343],{"class":264},[220,71737,347],{"class":420},[220,71739,359],{"class":264},[220,71741,71742,71744],{"class":222,"line":179},[220,71743,364],{"class":264},[220,71745,71624],{"class":420},[220,71747,71748,71750,71752,71754,71756],{"class":222,"line":389},[220,71749,20482],{"class":226},[220,71751,353],{"class":260},[220,71753,743],{"class":264},[220,71755,8677],{"class":420},[220,71757,749],{"class":264},[220,71759,71760],{"class":222,"line":399},[220,71761,1234],{"class":264},[220,71763,71764,71766,71768],{"class":222,"line":644},[220,71765,402],{"class":264},[220,71767,347],{"class":420},[220,71769,359],{"class":264},[212,71771,71773],{"className":251,"code":71772,"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,71774,71775,71785,71789,71803,71807,71820,71824],{"__ignoreMap":178},[220,71776,71777,71779,71781,71783],{"class":222,"line":223},[220,71778,261],{"class":260},[220,71780,11512],{"class":264},[220,71782,268],{"class":260},[220,71784,4007],{"class":230},[220,71786,71787],{"class":222,"line":179},[220,71788,647],{"emptyLinePlaceholder":194},[220,71790,71791,71793,71795,71797,71799,71801],{"class":222,"line":389},[220,71792,1735],{"class":260},[220,71794,1738],{"class":420},[220,71796,1741],{"class":260},[220,71798,1744],{"class":260},[220,71800,1747],{"class":226},[220,71802,1750],{"class":264},[220,71804,71805],{"class":222,"line":399},[220,71806,1765],{"class":264},[220,71808,71809,71811,71814,71816,71818],{"class":222,"line":644},[220,71810,1770],{"class":264},[220,71812,71813],{"class":230},"'SmokeFill'",[220,71815,32203],{"class":264},[220,71817,8677],{"class":420},[220,71819,1782],{"class":264},[220,71821,71822],{"class":222,"line":650},[220,71823,1787],{"class":264},[220,71825,71826],{"class":222,"line":656},[220,71827,1792],{"class":264},[1504,71829,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71831},[71832,71833],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":23176,"description":71593},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":71840,"title":71841,"body":71842,"category":35559,"componentType":25877,"description":71849,"extension":191,"meta":72090,"navigation":194,"path":72091,"requiresChild":32530,"seo":72092,"stem":72093,"__hash__":72094},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":71843,"toc":72086},[71844,71847,71850,71852,71854,71857,71859,72084],[11,71845,71841],{"id":71846},"smokeflow",[15,71848,71849],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[31911,71851],{"component":71841},[23,71853,31915],{"id":26533},[31917,71855],{":props":71856},"[{\"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,71858,31923],{"id":31922},[246,71860,71861,71901,71944,71984,72026],{":tabs":1557},[212,71862,71864],{"className":334,"code":71863,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71865,71866,71874,71881,71889,71893],{"__ignoreMap":178},[220,71867,71868,71870,71872],{"class":222,"line":223},[220,71869,343],{"class":264},[220,71871,347],{"class":346},[220,71873,359],{"class":264},[220,71875,71876,71878],{"class":222,"line":179},[220,71877,364],{"class":264},[220,71879,71880],{"class":346},"SmokeFlow\n",[220,71882,71883,71885,71887],{"class":222,"line":389},[220,71884,20371],{"class":226},[220,71886,353],{"class":264},[220,71888,36625],{"class":230},[220,71890,71891],{"class":222,"line":399},[220,71892,1234],{"class":264},[220,71894,71895,71897,71899],{"class":222,"line":644},[220,71896,402],{"class":264},[220,71898,347],{"class":346},[220,71900,359],{"class":264},[212,71902,71904],{"className":409,"code":71903,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71905,71906,71914,71920,71932,71936],{"__ignoreMap":178},[220,71907,71908,71910,71912],{"class":222,"line":223},[220,71909,343],{"class":264},[220,71911,347],{"class":420},[220,71913,359],{"class":264},[220,71915,71916,71918],{"class":222,"line":179},[220,71917,364],{"class":264},[220,71919,71880],{"class":420},[220,71921,71922,71924,71926,71928,71930],{"class":222,"line":389},[220,71923,20482],{"class":226},[220,71925,353],{"class":260},[220,71927,743],{"class":264},[220,71929,8677],{"class":420},[220,71931,749],{"class":264},[220,71933,71934],{"class":222,"line":399},[220,71935,1234],{"class":264},[220,71937,71938,71940,71942],{"class":222,"line":644},[220,71939,402],{"class":264},[220,71941,347],{"class":420},[220,71943,359],{"class":264},[212,71945,71946],{"className":2844,"code":71903,"language":2846,"meta":178,"style":178},[99,71947,71948,71956,71962,71972,71976],{"__ignoreMap":178},[220,71949,71950,71952,71954],{"class":222,"line":223},[220,71951,343],{"class":264},[220,71953,347],{"class":420},[220,71955,359],{"class":264},[220,71957,71958,71960],{"class":222,"line":179},[220,71959,364],{"class":264},[220,71961,71880],{"class":420},[220,71963,71964,71966,71968,71970],{"class":222,"line":389},[220,71965,20482],{"class":226},[220,71967,29871],{"class":264},[220,71969,8677],{"class":420},[220,71971,749],{"class":264},[220,71973,71974],{"class":222,"line":399},[220,71975,1234],{"class":264},[220,71977,71978,71980,71982],{"class":222,"line":644},[220,71979,402],{"class":264},[220,71981,347],{"class":420},[220,71983,359],{"class":264},[212,71985,71986],{"className":468,"code":71903,"language":469,"meta":178,"style":178},[99,71987,71988,71996,72002,72014,72018],{"__ignoreMap":178},[220,71989,71990,71992,71994],{"class":222,"line":223},[220,71991,343],{"class":264},[220,71993,347],{"class":420},[220,71995,359],{"class":264},[220,71997,71998,72000],{"class":222,"line":179},[220,71999,364],{"class":264},[220,72001,71880],{"class":420},[220,72003,72004,72006,72008,72010,72012],{"class":222,"line":389},[220,72005,20482],{"class":226},[220,72007,353],{"class":260},[220,72009,743],{"class":264},[220,72011,8677],{"class":420},[220,72013,749],{"class":264},[220,72015,72016],{"class":222,"line":399},[220,72017,1234],{"class":264},[220,72019,72020,72022,72024],{"class":222,"line":644},[220,72021,402],{"class":264},[220,72023,347],{"class":420},[220,72025,359],{"class":264},[212,72027,72029],{"className":251,"code":72028,"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,72030,72031,72041,72045,72059,72063,72076,72080],{"__ignoreMap":178},[220,72032,72033,72035,72037,72039],{"class":222,"line":223},[220,72034,261],{"class":260},[220,72036,11512],{"class":264},[220,72038,268],{"class":260},[220,72040,4007],{"class":230},[220,72042,72043],{"class":222,"line":179},[220,72044,647],{"emptyLinePlaceholder":194},[220,72046,72047,72049,72051,72053,72055,72057],{"class":222,"line":389},[220,72048,1735],{"class":260},[220,72050,1738],{"class":420},[220,72052,1741],{"class":260},[220,72054,1744],{"class":260},[220,72056,1747],{"class":226},[220,72058,1750],{"class":264},[220,72060,72061],{"class":222,"line":399},[220,72062,1765],{"class":264},[220,72064,72065,72067,72070,72072,72074],{"class":222,"line":644},[220,72066,1770],{"class":264},[220,72068,72069],{"class":230},"'SmokeFlow'",[220,72071,32203],{"class":264},[220,72073,8677],{"class":420},[220,72075,1782],{"class":264},[220,72077,72078],{"class":222,"line":650},[220,72079,1787],{"class":264},[220,72081,72082],{"class":222,"line":656},[220,72083,1792],{"class":264},[1504,72085,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72087},[72088,72089],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":71841,"description":71849},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":72096,"title":72097,"body":72098,"category":36368,"componentType":25883,"description":72105,"extension":191,"meta":72366,"navigation":194,"path":72367,"requiresChild":194,"seo":72368,"stem":72369,"__hash__":72370},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":72099,"toc":72362},[72100,72103,72106,72108,72110,72113,72115,72360],[11,72101,72097],{"id":72102},"solarize",[15,72104,72105],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[31911,72107],{"component":72097},[23,72109,31915],{"id":26533},[31917,72111],{":props":72112},"[{\"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,72114,31923],{"id":31922},[246,72116,72117,72162,72206,72250,72294],{":tabs":1557},[212,72118,72120],{"className":334,"code":72119,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,72121,72122,72130,72138,72146,72154],{"__ignoreMap":178},[220,72123,72124,72126,72128],{"class":222,"line":223},[220,72125,343],{"class":264},[220,72127,347],{"class":346},[220,72129,359],{"class":264},[220,72131,72132,72134,72136],{"class":222,"line":179},[220,72133,364],{"class":264},[220,72135,72097],{"class":346},[220,72137,359],{"class":264},[220,72139,72140,72142,72144],{"class":222,"line":389},[220,72141,2550],{"class":264},[220,72143,2553],{"class":346},[220,72145,386],{"class":264},[220,72147,72148,72150,72152],{"class":222,"line":399},[220,72149,2567],{"class":264},[220,72151,72097],{"class":346},[220,72153,359],{"class":264},[220,72155,72156,72158,72160],{"class":222,"line":644},[220,72157,402],{"class":264},[220,72159,347],{"class":346},[220,72161,359],{"class":264},[212,72163,72164],{"className":409,"code":72119,"language":411,"meta":178,"style":178},[99,72165,72166,72174,72182,72190,72198],{"__ignoreMap":178},[220,72167,72168,72170,72172],{"class":222,"line":223},[220,72169,343],{"class":264},[220,72171,347],{"class":420},[220,72173,359],{"class":264},[220,72175,72176,72178,72180],{"class":222,"line":179},[220,72177,364],{"class":264},[220,72179,72097],{"class":420},[220,72181,359],{"class":264},[220,72183,72184,72186,72188],{"class":222,"line":389},[220,72185,2550],{"class":264},[220,72187,2553],{"class":420},[220,72189,386],{"class":264},[220,72191,72192,72194,72196],{"class":222,"line":399},[220,72193,2567],{"class":264},[220,72195,72097],{"class":420},[220,72197,359],{"class":264},[220,72199,72200,72202,72204],{"class":222,"line":644},[220,72201,402],{"class":264},[220,72203,347],{"class":420},[220,72205,359],{"class":264},[212,72207,72208],{"className":2844,"code":72119,"language":2846,"meta":178,"style":178},[99,72209,72210,72218,72226,72234,72242],{"__ignoreMap":178},[220,72211,72212,72214,72216],{"class":222,"line":223},[220,72213,343],{"class":264},[220,72215,347],{"class":420},[220,72217,359],{"class":264},[220,72219,72220,72222,72224],{"class":222,"line":179},[220,72221,364],{"class":264},[220,72223,72097],{"class":420},[220,72225,359],{"class":264},[220,72227,72228,72230,72232],{"class":222,"line":389},[220,72229,2550],{"class":264},[220,72231,2553],{"class":420},[220,72233,386],{"class":264},[220,72235,72236,72238,72240],{"class":222,"line":399},[220,72237,2567],{"class":264},[220,72239,72097],{"class":420},[220,72241,359],{"class":264},[220,72243,72244,72246,72248],{"class":222,"line":644},[220,72245,402],{"class":264},[220,72247,347],{"class":420},[220,72249,359],{"class":264},[212,72251,72252],{"className":468,"code":72119,"language":469,"meta":178,"style":178},[99,72253,72254,72262,72270,72278,72286],{"__ignoreMap":178},[220,72255,72256,72258,72260],{"class":222,"line":223},[220,72257,343],{"class":264},[220,72259,347],{"class":420},[220,72261,359],{"class":264},[220,72263,72264,72266,72268],{"class":222,"line":179},[220,72265,364],{"class":264},[220,72267,72097],{"class":420},[220,72269,359],{"class":264},[220,72271,72272,72274,72276],{"class":222,"line":389},[220,72273,2550],{"class":264},[220,72275,2553],{"class":420},[220,72277,386],{"class":264},[220,72279,72280,72282,72284],{"class":222,"line":399},[220,72281,2567],{"class":264},[220,72283,72097],{"class":420},[220,72285,359],{"class":264},[220,72287,72288,72290,72292],{"class":222,"line":644},[220,72289,402],{"class":264},[220,72291,347],{"class":420},[220,72293,359],{"class":264},[212,72295,72297],{"className":251,"code":72296,"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,72298,72299,72309,72313,72327,72331,72340,72348,72352,72356],{"__ignoreMap":178},[220,72300,72301,72303,72305,72307],{"class":222,"line":223},[220,72302,261],{"class":260},[220,72304,11512],{"class":264},[220,72306,268],{"class":260},[220,72308,4007],{"class":230},[220,72310,72311],{"class":222,"line":179},[220,72312,647],{"emptyLinePlaceholder":194},[220,72314,72315,72317,72319,72321,72323,72325],{"class":222,"line":389},[220,72316,1735],{"class":260},[220,72318,1738],{"class":420},[220,72320,1741],{"class":260},[220,72322,1744],{"class":260},[220,72324,1747],{"class":226},[220,72326,1750],{"class":264},[220,72328,72329],{"class":222,"line":399},[220,72330,1765],{"class":264},[220,72332,72333,72335,72338],{"class":222,"line":644},[220,72334,1770],{"class":264},[220,72336,72337],{"class":230},"'Solarize'",[220,72339,7009],{"class":264},[220,72341,72342,72344,72346],{"class":222,"line":650},[220,72343,7014],{"class":264},[220,72345,3206],{"class":230},[220,72347,2465],{"class":264},[220,72349,72350],{"class":222,"line":656},[220,72351,7031],{"class":264},[220,72353,72354],{"class":222,"line":673},[220,72355,1787],{"class":264},[220,72357,72358],{"class":222,"line":682},[220,72359,1792],{"class":264},[1504,72361,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":72363},[72364,72365],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":72097,"description":72105},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":72372,"title":1585,"body":72373,"category":33063,"componentType":25877,"description":72380,"extension":191,"meta":72610,"navigation":194,"path":72611,"requiresChild":32530,"seo":72612,"stem":72613,"__hash__":72614},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":72374,"toc":72606},[72375,72378,72381,72383,72385,72388,72390,72604],[11,72376,1585],{"id":72377},"solidcolor",[15,72379,72380],{},"Fill the canvas with a single solid color",[31911,72382],{"component":1585},[23,72384,31915],{"id":26533},[31917,72386],{":props":72387},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,72389,31923],{"id":31922},[246,72391,72392,72433,72471,72509,72547],{":tabs":1557},[212,72393,72395],{"className":334,"code":72394,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,72396,72397,72405,72412,72421,72425],{"__ignoreMap":178},[220,72398,72399,72401,72403],{"class":222,"line":223},[220,72400,343],{"class":264},[220,72402,347],{"class":346},[220,72404,359],{"class":264},[220,72406,72407,72409],{"class":222,"line":179},[220,72408,364],{"class":264},[220,72410,72411],{"class":346},"SolidColor\n",[220,72413,72414,72416,72418],{"class":222,"line":389},[220,72415,9635],{"class":226},[220,72417,353],{"class":264},[220,72419,72420],{"class":230},"\"#5b18ca\"\n",[220,72422,72423],{"class":222,"line":399},[220,72424,1234],{"class":264},[220,72426,72427,72429,72431],{"class":222,"line":644},[220,72428,402],{"class":264},[220,72430,347],{"class":346},[220,72432,359],{"class":264},[212,72434,72435],{"className":409,"code":72394,"language":411,"meta":178,"style":178},[99,72436,72437,72445,72451,72459,72463],{"__ignoreMap":178},[220,72438,72439,72441,72443],{"class":222,"line":223},[220,72440,343],{"class":264},[220,72442,347],{"class":420},[220,72444,359],{"class":264},[220,72446,72447,72449],{"class":222,"line":179},[220,72448,364],{"class":264},[220,72450,72411],{"class":420},[220,72452,72453,72455,72457],{"class":222,"line":389},[220,72454,9635],{"class":226},[220,72456,353],{"class":260},[220,72458,72420],{"class":230},[220,72460,72461],{"class":222,"line":399},[220,72462,1234],{"class":264},[220,72464,72465,72467,72469],{"class":222,"line":644},[220,72466,402],{"class":264},[220,72468,347],{"class":420},[220,72470,359],{"class":264},[212,72472,72473],{"className":2844,"code":72394,"language":2846,"meta":178,"style":178},[99,72474,72475,72483,72489,72497,72501],{"__ignoreMap":178},[220,72476,72477,72479,72481],{"class":222,"line":223},[220,72478,343],{"class":264},[220,72480,347],{"class":420},[220,72482,359],{"class":264},[220,72484,72485,72487],{"class":222,"line":179},[220,72486,364],{"class":264},[220,72488,72411],{"class":420},[220,72490,72491,72493,72495],{"class":222,"line":389},[220,72492,9635],{"class":226},[220,72494,353],{"class":264},[220,72496,72420],{"class":230},[220,72498,72499],{"class":222,"line":399},[220,72500,1234],{"class":264},[220,72502,72503,72505,72507],{"class":222,"line":644},[220,72504,402],{"class":264},[220,72506,347],{"class":420},[220,72508,359],{"class":264},[212,72510,72511],{"className":468,"code":72394,"language":469,"meta":178,"style":178},[99,72512,72513,72521,72527,72535,72539],{"__ignoreMap":178},[220,72514,72515,72517,72519],{"class":222,"line":223},[220,72516,343],{"class":264},[220,72518,347],{"class":420},[220,72520,359],{"class":264},[220,72522,72523,72525],{"class":222,"line":179},[220,72524,364],{"class":264},[220,72526,72411],{"class":420},[220,72528,72529,72531,72533],{"class":222,"line":389},[220,72530,9635],{"class":226},[220,72532,353],{"class":260},[220,72534,72420],{"class":230},[220,72536,72537],{"class":222,"line":399},[220,72538,1234],{"class":264},[220,72540,72541,72543,72545],{"class":222,"line":644},[220,72542,402],{"class":264},[220,72544,347],{"class":420},[220,72546,359],{"class":264},[212,72548,72550],{"className":251,"code":72549,"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,72551,72552,72562,72566,72580,72584,72596,72600],{"__ignoreMap":178},[220,72553,72554,72556,72558,72560],{"class":222,"line":223},[220,72555,261],{"class":260},[220,72557,11512],{"class":264},[220,72559,268],{"class":260},[220,72561,4007],{"class":230},[220,72563,72564],{"class":222,"line":179},[220,72565,647],{"emptyLinePlaceholder":194},[220,72567,72568,72570,72572,72574,72576,72578],{"class":222,"line":389},[220,72569,1735],{"class":260},[220,72571,1738],{"class":420},[220,72573,1741],{"class":260},[220,72575,1744],{"class":260},[220,72577,1747],{"class":226},[220,72579,1750],{"class":264},[220,72581,72582],{"class":222,"line":399},[220,72583,1765],{"class":264},[220,72585,72586,72588,72590,72592,72594],{"class":222,"line":644},[220,72587,1770],{"class":264},[220,72589,1773],{"class":230},[220,72591,1776],{"class":264},[220,72593,1779],{"class":230},[220,72595,1782],{"class":264},[220,72597,72598],{"class":222,"line":650},[220,72599,1787],{"class":264},[220,72601,72602],{"class":222,"line":656},[220,72603,1792],{"class":264},[1504,72605,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72607},[72608,72609],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":72380},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":72616,"title":72617,"body":72618,"category":33396,"componentType":25883,"description":72625,"extension":191,"meta":72942,"navigation":194,"path":72943,"requiresChild":194,"seo":72944,"stem":72945,"__hash__":72946},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":72619,"toc":72938},[72620,72623,72626,72628,72630,72633,72635,72936],[11,72621,72617],{"id":72622},"spherize",[15,72624,72625],{},"Map content onto a 3D sphere surface with depth distortion",[31911,72627],{"component":72617},[23,72629,31915],{"id":26533},[31917,72631],{":props":72632},"[{\"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,72634,31923],{"id":31922},[246,72636,72637,72693,72752,72808,72866],{":tabs":1557},[212,72638,72640],{"className":334,"code":72639,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,72641,72642,72650,72657,72665,72669,72677,72685],{"__ignoreMap":178},[220,72643,72644,72646,72648],{"class":222,"line":223},[220,72645,343],{"class":264},[220,72647,347],{"class":346},[220,72649,359],{"class":264},[220,72651,72652,72654],{"class":222,"line":179},[220,72653,364],{"class":264},[220,72655,72656],{"class":346},"Spherize\n",[220,72658,72659,72661,72663],{"class":222,"line":389},[220,72660,17405],{"class":226},[220,72662,353],{"class":264},[220,72664,36625],{"class":230},[220,72666,72667],{"class":222,"line":399},[220,72668,31959],{"class":264},[220,72670,72671,72673,72675],{"class":222,"line":644},[220,72672,2550],{"class":264},[220,72674,2553],{"class":346},[220,72676,386],{"class":264},[220,72678,72679,72681,72683],{"class":222,"line":650},[220,72680,2567],{"class":264},[220,72682,72617],{"class":346},[220,72684,359],{"class":264},[220,72686,72687,72689,72691],{"class":222,"line":656},[220,72688,402],{"class":264},[220,72690,347],{"class":346},[220,72692,359],{"class":264},[212,72694,72696],{"className":409,"code":72695,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,72697,72698,72706,72712,72724,72728,72736,72744],{"__ignoreMap":178},[220,72699,72700,72702,72704],{"class":222,"line":223},[220,72701,343],{"class":264},[220,72703,347],{"class":420},[220,72705,359],{"class":264},[220,72707,72708,72710],{"class":222,"line":179},[220,72709,364],{"class":264},[220,72711,72656],{"class":420},[220,72713,72714,72716,72718,72720,72722],{"class":222,"line":389},[220,72715,9645],{"class":226},[220,72717,353],{"class":260},[220,72719,743],{"class":264},[220,72721,8677],{"class":420},[220,72723,749],{"class":264},[220,72725,72726],{"class":222,"line":399},[220,72727,31959],{"class":264},[220,72729,72730,72732,72734],{"class":222,"line":644},[220,72731,2550],{"class":264},[220,72733,2553],{"class":420},[220,72735,386],{"class":264},[220,72737,72738,72740,72742],{"class":222,"line":650},[220,72739,2567],{"class":264},[220,72741,72617],{"class":420},[220,72743,359],{"class":264},[220,72745,72746,72748,72750],{"class":222,"line":656},[220,72747,402],{"class":264},[220,72749,347],{"class":420},[220,72751,359],{"class":264},[212,72753,72754],{"className":2844,"code":72695,"language":2846,"meta":178,"style":178},[99,72755,72756,72764,72770,72780,72784,72792,72800],{"__ignoreMap":178},[220,72757,72758,72760,72762],{"class":222,"line":223},[220,72759,343],{"class":264},[220,72761,347],{"class":420},[220,72763,359],{"class":264},[220,72765,72766,72768],{"class":222,"line":179},[220,72767,364],{"class":264},[220,72769,72656],{"class":420},[220,72771,72772,72774,72776,72778],{"class":222,"line":389},[220,72773,9645],{"class":226},[220,72775,29871],{"class":264},[220,72777,8677],{"class":420},[220,72779,749],{"class":264},[220,72781,72782],{"class":222,"line":399},[220,72783,31959],{"class":264},[220,72785,72786,72788,72790],{"class":222,"line":644},[220,72787,2550],{"class":264},[220,72789,2553],{"class":420},[220,72791,386],{"class":264},[220,72793,72794,72796,72798],{"class":222,"line":650},[220,72795,2567],{"class":264},[220,72797,72617],{"class":420},[220,72799,359],{"class":264},[220,72801,72802,72804,72806],{"class":222,"line":656},[220,72803,402],{"class":264},[220,72805,347],{"class":420},[220,72807,359],{"class":264},[212,72809,72810],{"className":468,"code":72695,"language":469,"meta":178,"style":178},[99,72811,72812,72820,72826,72838,72842,72850,72858],{"__ignoreMap":178},[220,72813,72814,72816,72818],{"class":222,"line":223},[220,72815,343],{"class":264},[220,72817,347],{"class":420},[220,72819,359],{"class":264},[220,72821,72822,72824],{"class":222,"line":179},[220,72823,364],{"class":264},[220,72825,72656],{"class":420},[220,72827,72828,72830,72832,72834,72836],{"class":222,"line":389},[220,72829,9645],{"class":226},[220,72831,353],{"class":260},[220,72833,743],{"class":264},[220,72835,8677],{"class":420},[220,72837,749],{"class":264},[220,72839,72840],{"class":222,"line":399},[220,72841,31959],{"class":264},[220,72843,72844,72846,72848],{"class":222,"line":644},[220,72845,2550],{"class":264},[220,72847,2553],{"class":420},[220,72849,386],{"class":264},[220,72851,72852,72854,72856],{"class":222,"line":650},[220,72853,2567],{"class":264},[220,72855,72617],{"class":420},[220,72857,359],{"class":264},[220,72859,72860,72862,72864],{"class":222,"line":656},[220,72861,402],{"class":264},[220,72863,347],{"class":420},[220,72865,359],{"class":264},[212,72867,72869],{"className":251,"code":72868,"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,72870,72871,72881,72885,72899,72903,72916,72924,72928,72932],{"__ignoreMap":178},[220,72872,72873,72875,72877,72879],{"class":222,"line":223},[220,72874,261],{"class":260},[220,72876,11512],{"class":264},[220,72878,268],{"class":260},[220,72880,4007],{"class":230},[220,72882,72883],{"class":222,"line":179},[220,72884,647],{"emptyLinePlaceholder":194},[220,72886,72887,72889,72891,72893,72895,72897],{"class":222,"line":389},[220,72888,1735],{"class":260},[220,72890,1738],{"class":420},[220,72892,1741],{"class":260},[220,72894,1744],{"class":260},[220,72896,1747],{"class":226},[220,72898,1750],{"class":264},[220,72900,72901],{"class":222,"line":399},[220,72902,1765],{"class":264},[220,72904,72905,72907,72910,72912,72914],{"class":222,"line":644},[220,72906,1770],{"class":264},[220,72908,72909],{"class":230},"'Spherize'",[220,72911,7541],{"class":264},[220,72913,8677],{"class":420},[220,72915,7546],{"class":264},[220,72917,72918,72920,72922],{"class":222,"line":650},[220,72919,7014],{"class":264},[220,72921,3206],{"class":230},[220,72923,2465],{"class":264},[220,72925,72926],{"class":222,"line":656},[220,72927,7031],{"class":264},[220,72929,72930],{"class":222,"line":673},[220,72931,1787],{"class":264},[220,72933,72934],{"class":222,"line":682},[220,72935,1792],{"class":264},[1504,72937,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72939},[72940,72941],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":72617,"description":72625},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":72948,"title":72949,"body":72950,"category":33063,"componentType":25877,"description":72957,"extension":191,"meta":73142,"navigation":194,"path":73143,"requiresChild":32530,"seo":73144,"stem":73145,"__hash__":73146},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":72951,"toc":73138},[72952,72955,72958,72960,72962,72965,72967,73136],[11,72953,72949],{"id":72954},"spiral",[15,72956,72957],{},"Rotating spiral pattern with animated movement",[31911,72959],{"component":72949},[23,72961,31915],{"id":26533},[31917,72963],{":props":72964},"[{\"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,72966,31923],{"id":31922},[246,72968,72969,72998,73026,73054,73082],{":tabs":1557},[212,72970,72972],{"className":334,"code":72971,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,72973,72974,72982,72990],{"__ignoreMap":178},[220,72975,72976,72978,72980],{"class":222,"line":223},[220,72977,343],{"class":264},[220,72979,347],{"class":346},[220,72981,359],{"class":264},[220,72983,72984,72986,72988],{"class":222,"line":179},[220,72985,364],{"class":264},[220,72987,72949],{"class":346},[220,72989,386],{"class":264},[220,72991,72992,72994,72996],{"class":222,"line":389},[220,72993,402],{"class":264},[220,72995,347],{"class":346},[220,72997,359],{"class":264},[212,72999,73000],{"className":409,"code":72971,"language":411,"meta":178,"style":178},[99,73001,73002,73010,73018],{"__ignoreMap":178},[220,73003,73004,73006,73008],{"class":222,"line":223},[220,73005,343],{"class":264},[220,73007,347],{"class":420},[220,73009,359],{"class":264},[220,73011,73012,73014,73016],{"class":222,"line":179},[220,73013,364],{"class":264},[220,73015,72949],{"class":420},[220,73017,386],{"class":264},[220,73019,73020,73022,73024],{"class":222,"line":389},[220,73021,402],{"class":264},[220,73023,347],{"class":420},[220,73025,359],{"class":264},[212,73027,73028],{"className":2844,"code":72971,"language":2846,"meta":178,"style":178},[99,73029,73030,73038,73046],{"__ignoreMap":178},[220,73031,73032,73034,73036],{"class":222,"line":223},[220,73033,343],{"class":264},[220,73035,347],{"class":420},[220,73037,359],{"class":264},[220,73039,73040,73042,73044],{"class":222,"line":179},[220,73041,364],{"class":264},[220,73043,72949],{"class":420},[220,73045,386],{"class":264},[220,73047,73048,73050,73052],{"class":222,"line":389},[220,73049,402],{"class":264},[220,73051,347],{"class":420},[220,73053,359],{"class":264},[212,73055,73056],{"className":468,"code":72971,"language":469,"meta":178,"style":178},[99,73057,73058,73066,73074],{"__ignoreMap":178},[220,73059,73060,73062,73064],{"class":222,"line":223},[220,73061,343],{"class":264},[220,73063,347],{"class":420},[220,73065,359],{"class":264},[220,73067,73068,73070,73072],{"class":222,"line":179},[220,73069,364],{"class":264},[220,73071,72949],{"class":420},[220,73073,386],{"class":264},[220,73075,73076,73078,73080],{"class":222,"line":389},[220,73077,402],{"class":264},[220,73079,347],{"class":420},[220,73081,359],{"class":264},[212,73083,73085],{"className":251,"code":73084,"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,73086,73087,73097,73101,73115,73119,73128,73132],{"__ignoreMap":178},[220,73088,73089,73091,73093,73095],{"class":222,"line":223},[220,73090,261],{"class":260},[220,73092,11512],{"class":264},[220,73094,268],{"class":260},[220,73096,4007],{"class":230},[220,73098,73099],{"class":222,"line":179},[220,73100,647],{"emptyLinePlaceholder":194},[220,73102,73103,73105,73107,73109,73111,73113],{"class":222,"line":389},[220,73104,1735],{"class":260},[220,73106,1738],{"class":420},[220,73108,1741],{"class":260},[220,73110,1744],{"class":260},[220,73112,1747],{"class":226},[220,73114,1750],{"class":264},[220,73116,73117],{"class":222,"line":399},[220,73118,1765],{"class":264},[220,73120,73121,73123,73126],{"class":222,"line":644},[220,73122,1770],{"class":264},[220,73124,73125],{"class":230},"'Spiral'",[220,73127,2465],{"class":264},[220,73129,73130],{"class":222,"line":650},[220,73131,1787],{"class":264},[220,73133,73134],{"class":222,"line":656},[220,73135,1792],{"class":264},[1504,73137,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73139},[73140,73141],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":72949,"description":72957},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":73148,"title":73149,"body":73150,"category":15908,"componentType":25877,"description":73157,"extension":191,"meta":73434,"navigation":194,"path":73435,"requiresChild":32530,"seo":73436,"stem":73437,"__hash__":73438},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":73151,"toc":73430},[73152,73155,73158,73160,73162,73165,73167,73428],[11,73153,73149],{"id":73154},"star",[15,73156,73157],{},"Classic star polygon with straight sides and sharp pointed tips",[31911,73159],{"component":73149},[23,73161,31915],{"id":26533},[31917,73163],{":props":73164},"[{\"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,73166,31923],{"id":31922},[246,73168,73169,73217,73268,73316,73366],{":tabs":1557},[212,73170,73172],{"className":334,"code":73171,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,73173,73174,73182,73189,73197,73205,73209],{"__ignoreMap":178},[220,73175,73176,73178,73180],{"class":222,"line":223},[220,73177,343],{"class":264},[220,73179,347],{"class":346},[220,73181,359],{"class":264},[220,73183,73184,73186],{"class":222,"line":179},[220,73185,364],{"class":264},[220,73187,73188],{"class":346},"Star\n",[220,73190,73191,73193,73195],{"class":222,"line":389},[220,73192,9635],{"class":226},[220,73194,353],{"class":264},[220,73196,9591],{"class":230},[220,73198,73199,73201,73203],{"class":222,"line":399},[220,73200,17405],{"class":226},[220,73202,353],{"class":264},[220,73204,48348],{"class":230},[220,73206,73207],{"class":222,"line":644},[220,73208,1234],{"class":264},[220,73210,73211,73213,73215],{"class":222,"line":650},[220,73212,402],{"class":264},[220,73214,347],{"class":346},[220,73216,359],{"class":264},[212,73218,73220],{"className":409,"code":73219,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,73221,73222,73230,73236,73244,73256,73260],{"__ignoreMap":178},[220,73223,73224,73226,73228],{"class":222,"line":223},[220,73225,343],{"class":264},[220,73227,347],{"class":420},[220,73229,359],{"class":264},[220,73231,73232,73234],{"class":222,"line":179},[220,73233,364],{"class":264},[220,73235,73188],{"class":420},[220,73237,73238,73240,73242],{"class":222,"line":389},[220,73239,9635],{"class":226},[220,73241,353],{"class":260},[220,73243,9591],{"class":230},[220,73245,73246,73248,73250,73252,73254],{"class":222,"line":399},[220,73247,9645],{"class":226},[220,73249,353],{"class":260},[220,73251,743],{"class":264},[220,73253,8249],{"class":420},[220,73255,749],{"class":264},[220,73257,73258],{"class":222,"line":644},[220,73259,1234],{"class":264},[220,73261,73262,73264,73266],{"class":222,"line":650},[220,73263,402],{"class":264},[220,73265,347],{"class":420},[220,73267,359],{"class":264},[212,73269,73270],{"className":2844,"code":73219,"language":2846,"meta":178,"style":178},[99,73271,73272,73280,73286,73294,73304,73308],{"__ignoreMap":178},[220,73273,73274,73276,73278],{"class":222,"line":223},[220,73275,343],{"class":264},[220,73277,347],{"class":420},[220,73279,359],{"class":264},[220,73281,73282,73284],{"class":222,"line":179},[220,73283,364],{"class":264},[220,73285,73188],{"class":420},[220,73287,73288,73290,73292],{"class":222,"line":389},[220,73289,9635],{"class":226},[220,73291,353],{"class":264},[220,73293,9591],{"class":230},[220,73295,73296,73298,73300,73302],{"class":222,"line":399},[220,73297,9645],{"class":226},[220,73299,29871],{"class":264},[220,73301,8249],{"class":420},[220,73303,749],{"class":264},[220,73305,73306],{"class":222,"line":644},[220,73307,1234],{"class":264},[220,73309,73310,73312,73314],{"class":222,"line":650},[220,73311,402],{"class":264},[220,73313,347],{"class":420},[220,73315,359],{"class":264},[212,73317,73318],{"className":468,"code":73219,"language":469,"meta":178,"style":178},[99,73319,73320,73328,73334,73342,73354,73358],{"__ignoreMap":178},[220,73321,73322,73324,73326],{"class":222,"line":223},[220,73323,343],{"class":264},[220,73325,347],{"class":420},[220,73327,359],{"class":264},[220,73329,73330,73332],{"class":222,"line":179},[220,73331,364],{"class":264},[220,73333,73188],{"class":420},[220,73335,73336,73338,73340],{"class":222,"line":389},[220,73337,9635],{"class":226},[220,73339,353],{"class":260},[220,73341,9591],{"class":230},[220,73343,73344,73346,73348,73350,73352],{"class":222,"line":399},[220,73345,9645],{"class":226},[220,73347,353],{"class":260},[220,73349,743],{"class":264},[220,73351,8249],{"class":420},[220,73353,749],{"class":264},[220,73355,73356],{"class":222,"line":644},[220,73357,1234],{"class":264},[220,73359,73360,73362,73364],{"class":222,"line":650},[220,73361,402],{"class":264},[220,73363,347],{"class":420},[220,73365,359],{"class":264},[212,73367,73369],{"className":251,"code":73368,"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,73370,73371,73381,73385,73399,73403,73420,73424],{"__ignoreMap":178},[220,73372,73373,73375,73377,73379],{"class":222,"line":223},[220,73374,261],{"class":260},[220,73376,11512],{"class":264},[220,73378,268],{"class":260},[220,73380,4007],{"class":230},[220,73382,73383],{"class":222,"line":179},[220,73384,647],{"emptyLinePlaceholder":194},[220,73386,73387,73389,73391,73393,73395,73397],{"class":222,"line":389},[220,73388,1735],{"class":260},[220,73390,1738],{"class":420},[220,73392,1741],{"class":260},[220,73394,1744],{"class":260},[220,73396,1747],{"class":226},[220,73398,1750],{"class":264},[220,73400,73401],{"class":222,"line":399},[220,73402,1765],{"class":264},[220,73404,73405,73407,73410,73412,73414,73416,73418],{"class":222,"line":644},[220,73406,1770],{"class":264},[220,73408,73409],{"class":230},"'Star'",[220,73411,1776],{"class":264},[220,73413,10169],{"class":230},[220,73415,6566],{"class":264},[220,73417,8249],{"class":420},[220,73419,1782],{"class":264},[220,73421,73422],{"class":222,"line":650},[220,73423,1787],{"class":264},[220,73425,73426],{"class":222,"line":656},[220,73427,1792],{"class":264},[1504,73429,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73431},[73432,73433],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":73149,"description":73157},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":73440,"title":73441,"body":73442,"category":32806,"componentType":25883,"description":73449,"extension":191,"meta":73766,"navigation":194,"path":73767,"requiresChild":194,"seo":73768,"stem":73769,"__hash__":73770},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":73443,"toc":73762},[73444,73447,73450,73452,73454,73457,73459,73760],[11,73445,73441],{"id":73446},"stone",[15,73448,73449],{},"Applies a marbled stone relief and surface distortion to child content",[31911,73451],{"component":73441},[23,73453,31915],{"id":26533},[31917,73455],{":props":73456},"[{\"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,73458,31923],{"id":31922},[246,73460,73461,73517,73576,73632,73690],{":tabs":1557},[212,73462,73464],{"className":334,"code":73463,"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,73465,73466,73474,73481,73489,73493,73501,73509],{"__ignoreMap":178},[220,73467,73468,73470,73472],{"class":222,"line":223},[220,73469,343],{"class":264},[220,73471,347],{"class":346},[220,73473,359],{"class":264},[220,73475,73476,73478],{"class":222,"line":179},[220,73477,364],{"class":264},[220,73479,73480],{"class":346},"Stone\n",[220,73482,73483,73485,73487],{"class":222,"line":389},[220,73484,20371],{"class":226},[220,73486,353],{"class":264},[220,73488,42358],{"class":230},[220,73490,73491],{"class":222,"line":399},[220,73492,31959],{"class":264},[220,73494,73495,73497,73499],{"class":222,"line":644},[220,73496,2550],{"class":264},[220,73498,2553],{"class":346},[220,73500,386],{"class":264},[220,73502,73503,73505,73507],{"class":222,"line":650},[220,73504,2567],{"class":264},[220,73506,73441],{"class":346},[220,73508,359],{"class":264},[220,73510,73511,73513,73515],{"class":222,"line":656},[220,73512,402],{"class":264},[220,73514,347],{"class":346},[220,73516,359],{"class":264},[212,73518,73520],{"className":409,"code":73519,"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,73521,73522,73530,73536,73548,73552,73560,73568],{"__ignoreMap":178},[220,73523,73524,73526,73528],{"class":222,"line":223},[220,73525,343],{"class":264},[220,73527,347],{"class":420},[220,73529,359],{"class":264},[220,73531,73532,73534],{"class":222,"line":179},[220,73533,364],{"class":264},[220,73535,73480],{"class":420},[220,73537,73538,73540,73542,73544,73546],{"class":222,"line":389},[220,73539,20482],{"class":226},[220,73541,353],{"class":260},[220,73543,743],{"class":264},[220,73545,7754],{"class":420},[220,73547,749],{"class":264},[220,73549,73550],{"class":222,"line":399},[220,73551,31959],{"class":264},[220,73553,73554,73556,73558],{"class":222,"line":644},[220,73555,2550],{"class":264},[220,73557,2553],{"class":420},[220,73559,386],{"class":264},[220,73561,73562,73564,73566],{"class":222,"line":650},[220,73563,2567],{"class":264},[220,73565,73441],{"class":420},[220,73567,359],{"class":264},[220,73569,73570,73572,73574],{"class":222,"line":656},[220,73571,402],{"class":264},[220,73573,347],{"class":420},[220,73575,359],{"class":264},[212,73577,73578],{"className":2844,"code":73519,"language":2846,"meta":178,"style":178},[99,73579,73580,73588,73594,73604,73608,73616,73624],{"__ignoreMap":178},[220,73581,73582,73584,73586],{"class":222,"line":223},[220,73583,343],{"class":264},[220,73585,347],{"class":420},[220,73587,359],{"class":264},[220,73589,73590,73592],{"class":222,"line":179},[220,73591,364],{"class":264},[220,73593,73480],{"class":420},[220,73595,73596,73598,73600,73602],{"class":222,"line":389},[220,73597,20482],{"class":226},[220,73599,29871],{"class":264},[220,73601,7754],{"class":420},[220,73603,749],{"class":264},[220,73605,73606],{"class":222,"line":399},[220,73607,31959],{"class":264},[220,73609,73610,73612,73614],{"class":222,"line":644},[220,73611,2550],{"class":264},[220,73613,2553],{"class":420},[220,73615,386],{"class":264},[220,73617,73618,73620,73622],{"class":222,"line":650},[220,73619,2567],{"class":264},[220,73621,73441],{"class":420},[220,73623,359],{"class":264},[220,73625,73626,73628,73630],{"class":222,"line":656},[220,73627,402],{"class":264},[220,73629,347],{"class":420},[220,73631,359],{"class":264},[212,73633,73634],{"className":468,"code":73519,"language":469,"meta":178,"style":178},[99,73635,73636,73644,73650,73662,73666,73674,73682],{"__ignoreMap":178},[220,73637,73638,73640,73642],{"class":222,"line":223},[220,73639,343],{"class":264},[220,73641,347],{"class":420},[220,73643,359],{"class":264},[220,73645,73646,73648],{"class":222,"line":179},[220,73647,364],{"class":264},[220,73649,73480],{"class":420},[220,73651,73652,73654,73656,73658,73660],{"class":222,"line":389},[220,73653,20482],{"class":226},[220,73655,353],{"class":260},[220,73657,743],{"class":264},[220,73659,7754],{"class":420},[220,73661,749],{"class":264},[220,73663,73664],{"class":222,"line":399},[220,73665,31959],{"class":264},[220,73667,73668,73670,73672],{"class":222,"line":644},[220,73669,2550],{"class":264},[220,73671,2553],{"class":420},[220,73673,386],{"class":264},[220,73675,73676,73678,73680],{"class":222,"line":650},[220,73677,2567],{"class":264},[220,73679,73441],{"class":420},[220,73681,359],{"class":264},[220,73683,73684,73686,73688],{"class":222,"line":656},[220,73685,402],{"class":264},[220,73687,347],{"class":420},[220,73689,359],{"class":264},[212,73691,73693],{"className":251,"code":73692,"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,73694,73695,73705,73709,73723,73727,73740,73748,73752,73756],{"__ignoreMap":178},[220,73696,73697,73699,73701,73703],{"class":222,"line":223},[220,73698,261],{"class":260},[220,73700,11512],{"class":264},[220,73702,268],{"class":260},[220,73704,4007],{"class":230},[220,73706,73707],{"class":222,"line":179},[220,73708,647],{"emptyLinePlaceholder":194},[220,73710,73711,73713,73715,73717,73719,73721],{"class":222,"line":389},[220,73712,1735],{"class":260},[220,73714,1738],{"class":420},[220,73716,1741],{"class":260},[220,73718,1744],{"class":260},[220,73720,1747],{"class":226},[220,73722,1750],{"class":264},[220,73724,73725],{"class":222,"line":399},[220,73726,1765],{"class":264},[220,73728,73729,73731,73734,73736,73738],{"class":222,"line":644},[220,73730,1770],{"class":264},[220,73732,73733],{"class":230},"'Stone'",[220,73735,32203],{"class":264},[220,73737,7754],{"class":420},[220,73739,7546],{"class":264},[220,73741,73742,73744,73746],{"class":222,"line":650},[220,73743,7014],{"class":264},[220,73745,3206],{"class":230},[220,73747,2465],{"class":264},[220,73749,73750],{"class":222,"line":656},[220,73751,7031],{"class":264},[220,73753,73754],{"class":222,"line":673},[220,73755,1787],{"class":264},[220,73757,73758],{"class":222,"line":682},[220,73759,1792],{"class":264},[1504,73761,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73763},[73764,73765],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":73441,"description":73449},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":73772,"title":73773,"body":73774,"category":33063,"componentType":25877,"description":73781,"extension":191,"meta":73966,"navigation":194,"path":73967,"requiresChild":32530,"seo":73968,"stem":73969,"__hash__":73970},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":73775,"toc":73962},[73776,73779,73782,73784,73786,73789,73791,73960],[11,73777,73773],{"id":73778},"strands",[15,73780,73781],{},"Flowing ribbons of light with a multi-color gradient",[31911,73783],{"component":73773},[23,73785,31915],{"id":26533},[31917,73787],{":props":73788},"[{\"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,73790,31923],{"id":31922},[246,73792,73793,73822,73850,73878,73906],{":tabs":1557},[212,73794,73796],{"className":334,"code":73795,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,73797,73798,73806,73814],{"__ignoreMap":178},[220,73799,73800,73802,73804],{"class":222,"line":223},[220,73801,343],{"class":264},[220,73803,347],{"class":346},[220,73805,359],{"class":264},[220,73807,73808,73810,73812],{"class":222,"line":179},[220,73809,364],{"class":264},[220,73811,73773],{"class":346},[220,73813,386],{"class":264},[220,73815,73816,73818,73820],{"class":222,"line":389},[220,73817,402],{"class":264},[220,73819,347],{"class":346},[220,73821,359],{"class":264},[212,73823,73824],{"className":409,"code":73795,"language":411,"meta":178,"style":178},[99,73825,73826,73834,73842],{"__ignoreMap":178},[220,73827,73828,73830,73832],{"class":222,"line":223},[220,73829,343],{"class":264},[220,73831,347],{"class":420},[220,73833,359],{"class":264},[220,73835,73836,73838,73840],{"class":222,"line":179},[220,73837,364],{"class":264},[220,73839,73773],{"class":420},[220,73841,386],{"class":264},[220,73843,73844,73846,73848],{"class":222,"line":389},[220,73845,402],{"class":264},[220,73847,347],{"class":420},[220,73849,359],{"class":264},[212,73851,73852],{"className":2844,"code":73795,"language":2846,"meta":178,"style":178},[99,73853,73854,73862,73870],{"__ignoreMap":178},[220,73855,73856,73858,73860],{"class":222,"line":223},[220,73857,343],{"class":264},[220,73859,347],{"class":420},[220,73861,359],{"class":264},[220,73863,73864,73866,73868],{"class":222,"line":179},[220,73865,364],{"class":264},[220,73867,73773],{"class":420},[220,73869,386],{"class":264},[220,73871,73872,73874,73876],{"class":222,"line":389},[220,73873,402],{"class":264},[220,73875,347],{"class":420},[220,73877,359],{"class":264},[212,73879,73880],{"className":468,"code":73795,"language":469,"meta":178,"style":178},[99,73881,73882,73890,73898],{"__ignoreMap":178},[220,73883,73884,73886,73888],{"class":222,"line":223},[220,73885,343],{"class":264},[220,73887,347],{"class":420},[220,73889,359],{"class":264},[220,73891,73892,73894,73896],{"class":222,"line":179},[220,73893,364],{"class":264},[220,73895,73773],{"class":420},[220,73897,386],{"class":264},[220,73899,73900,73902,73904],{"class":222,"line":389},[220,73901,402],{"class":264},[220,73903,347],{"class":420},[220,73905,359],{"class":264},[212,73907,73909],{"className":251,"code":73908,"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,73910,73911,73921,73925,73939,73943,73952,73956],{"__ignoreMap":178},[220,73912,73913,73915,73917,73919],{"class":222,"line":223},[220,73914,261],{"class":260},[220,73916,11512],{"class":264},[220,73918,268],{"class":260},[220,73920,4007],{"class":230},[220,73922,73923],{"class":222,"line":179},[220,73924,647],{"emptyLinePlaceholder":194},[220,73926,73927,73929,73931,73933,73935,73937],{"class":222,"line":389},[220,73928,1735],{"class":260},[220,73930,1738],{"class":420},[220,73932,1741],{"class":260},[220,73934,1744],{"class":260},[220,73936,1747],{"class":226},[220,73938,1750],{"class":264},[220,73940,73941],{"class":222,"line":399},[220,73942,1765],{"class":264},[220,73944,73945,73947,73950],{"class":222,"line":644},[220,73946,1770],{"class":264},[220,73948,73949],{"class":230},"'Strands'",[220,73951,2465],{"class":264},[220,73953,73954],{"class":222,"line":650},[220,73955,1787],{"class":264},[220,73957,73958],{"class":222,"line":656},[220,73959,1792],{"class":264},[1504,73961,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73963},[73964,73965],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":73773,"description":73781},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":73972,"title":73973,"body":73974,"category":33396,"componentType":25883,"description":73981,"extension":191,"meta":74242,"navigation":194,"path":74243,"requiresChild":194,"seo":74244,"stem":74245,"__hash__":74246},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":73975,"toc":74238},[73976,73979,73982,73984,73986,73989,73991,74236],[11,73977,73973],{"id":73978},"stretch",[15,73980,73981],{},"Stretch content towards a direction from a center point",[31911,73983],{"component":73973},[23,73985,31915],{"id":26533},[31917,73987],{":props":73988},"[{\"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,73990,31923],{"id":31922},[246,73992,73993,74038,74082,74126,74170],{":tabs":1557},[212,73994,73996],{"className":334,"code":73995,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,73997,73998,74006,74014,74022,74030],{"__ignoreMap":178},[220,73999,74000,74002,74004],{"class":222,"line":223},[220,74001,343],{"class":264},[220,74003,347],{"class":346},[220,74005,359],{"class":264},[220,74007,74008,74010,74012],{"class":222,"line":179},[220,74009,364],{"class":264},[220,74011,73973],{"class":346},[220,74013,359],{"class":264},[220,74015,74016,74018,74020],{"class":222,"line":389},[220,74017,2550],{"class":264},[220,74019,2553],{"class":346},[220,74021,386],{"class":264},[220,74023,74024,74026,74028],{"class":222,"line":399},[220,74025,2567],{"class":264},[220,74027,73973],{"class":346},[220,74029,359],{"class":264},[220,74031,74032,74034,74036],{"class":222,"line":644},[220,74033,402],{"class":264},[220,74035,347],{"class":346},[220,74037,359],{"class":264},[212,74039,74040],{"className":409,"code":73995,"language":411,"meta":178,"style":178},[99,74041,74042,74050,74058,74066,74074],{"__ignoreMap":178},[220,74043,74044,74046,74048],{"class":222,"line":223},[220,74045,343],{"class":264},[220,74047,347],{"class":420},[220,74049,359],{"class":264},[220,74051,74052,74054,74056],{"class":222,"line":179},[220,74053,364],{"class":264},[220,74055,73973],{"class":420},[220,74057,359],{"class":264},[220,74059,74060,74062,74064],{"class":222,"line":389},[220,74061,2550],{"class":264},[220,74063,2553],{"class":420},[220,74065,386],{"class":264},[220,74067,74068,74070,74072],{"class":222,"line":399},[220,74069,2567],{"class":264},[220,74071,73973],{"class":420},[220,74073,359],{"class":264},[220,74075,74076,74078,74080],{"class":222,"line":644},[220,74077,402],{"class":264},[220,74079,347],{"class":420},[220,74081,359],{"class":264},[212,74083,74084],{"className":2844,"code":73995,"language":2846,"meta":178,"style":178},[99,74085,74086,74094,74102,74110,74118],{"__ignoreMap":178},[220,74087,74088,74090,74092],{"class":222,"line":223},[220,74089,343],{"class":264},[220,74091,347],{"class":420},[220,74093,359],{"class":264},[220,74095,74096,74098,74100],{"class":222,"line":179},[220,74097,364],{"class":264},[220,74099,73973],{"class":420},[220,74101,359],{"class":264},[220,74103,74104,74106,74108],{"class":222,"line":389},[220,74105,2550],{"class":264},[220,74107,2553],{"class":420},[220,74109,386],{"class":264},[220,74111,74112,74114,74116],{"class":222,"line":399},[220,74113,2567],{"class":264},[220,74115,73973],{"class":420},[220,74117,359],{"class":264},[220,74119,74120,74122,74124],{"class":222,"line":644},[220,74121,402],{"class":264},[220,74123,347],{"class":420},[220,74125,359],{"class":264},[212,74127,74128],{"className":468,"code":73995,"language":469,"meta":178,"style":178},[99,74129,74130,74138,74146,74154,74162],{"__ignoreMap":178},[220,74131,74132,74134,74136],{"class":222,"line":223},[220,74133,343],{"class":264},[220,74135,347],{"class":420},[220,74137,359],{"class":264},[220,74139,74140,74142,74144],{"class":222,"line":179},[220,74141,364],{"class":264},[220,74143,73973],{"class":420},[220,74145,359],{"class":264},[220,74147,74148,74150,74152],{"class":222,"line":389},[220,74149,2550],{"class":264},[220,74151,2553],{"class":420},[220,74153,386],{"class":264},[220,74155,74156,74158,74160],{"class":222,"line":399},[220,74157,2567],{"class":264},[220,74159,73973],{"class":420},[220,74161,359],{"class":264},[220,74163,74164,74166,74168],{"class":222,"line":644},[220,74165,402],{"class":264},[220,74167,347],{"class":420},[220,74169,359],{"class":264},[212,74171,74173],{"className":251,"code":74172,"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,74174,74175,74185,74189,74203,74207,74216,74224,74228,74232],{"__ignoreMap":178},[220,74176,74177,74179,74181,74183],{"class":222,"line":223},[220,74178,261],{"class":260},[220,74180,11512],{"class":264},[220,74182,268],{"class":260},[220,74184,4007],{"class":230},[220,74186,74187],{"class":222,"line":179},[220,74188,647],{"emptyLinePlaceholder":194},[220,74190,74191,74193,74195,74197,74199,74201],{"class":222,"line":389},[220,74192,1735],{"class":260},[220,74194,1738],{"class":420},[220,74196,1741],{"class":260},[220,74198,1744],{"class":260},[220,74200,1747],{"class":226},[220,74202,1750],{"class":264},[220,74204,74205],{"class":222,"line":399},[220,74206,1765],{"class":264},[220,74208,74209,74211,74214],{"class":222,"line":644},[220,74210,1770],{"class":264},[220,74212,74213],{"class":230},"'Stretch'",[220,74215,7009],{"class":264},[220,74217,74218,74220,74222],{"class":222,"line":650},[220,74219,7014],{"class":264},[220,74221,3206],{"class":230},[220,74223,2465],{"class":264},[220,74225,74226],{"class":222,"line":656},[220,74227,7031],{"class":264},[220,74229,74230],{"class":222,"line":673},[220,74231,1787],{"class":264},[220,74233,74234],{"class":222,"line":682},[220,74235,1792],{"class":264},[1504,74237,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":74239},[74240,74241],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":73973,"description":73981},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":74248,"title":15839,"body":74249,"category":33063,"componentType":25877,"description":74256,"extension":191,"meta":74440,"navigation":194,"path":74441,"requiresChild":32530,"seo":74442,"stem":74443,"__hash__":74444},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":74250,"toc":74436},[74251,74254,74257,74259,74261,74264,74266,74434],[11,74252,15839],{"id":74253},"stripes",[15,74255,74256],{},"Alternating colored stripes with animation",[31911,74258],{"component":15839},[23,74260,31915],{"id":26533},[31917,74262],{":props":74263},"[{\"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,74265,31923],{"id":31922},[246,74267,74268,74297,74325,74353,74381],{":tabs":1557},[212,74269,74271],{"className":334,"code":74270,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,74272,74273,74281,74289],{"__ignoreMap":178},[220,74274,74275,74277,74279],{"class":222,"line":223},[220,74276,343],{"class":264},[220,74278,347],{"class":346},[220,74280,359],{"class":264},[220,74282,74283,74285,74287],{"class":222,"line":179},[220,74284,364],{"class":264},[220,74286,15839],{"class":346},[220,74288,386],{"class":264},[220,74290,74291,74293,74295],{"class":222,"line":389},[220,74292,402],{"class":264},[220,74294,347],{"class":346},[220,74296,359],{"class":264},[212,74298,74299],{"className":409,"code":74270,"language":411,"meta":178,"style":178},[99,74300,74301,74309,74317],{"__ignoreMap":178},[220,74302,74303,74305,74307],{"class":222,"line":223},[220,74304,343],{"class":264},[220,74306,347],{"class":420},[220,74308,359],{"class":264},[220,74310,74311,74313,74315],{"class":222,"line":179},[220,74312,364],{"class":264},[220,74314,15839],{"class":420},[220,74316,386],{"class":264},[220,74318,74319,74321,74323],{"class":222,"line":389},[220,74320,402],{"class":264},[220,74322,347],{"class":420},[220,74324,359],{"class":264},[212,74326,74327],{"className":2844,"code":74270,"language":2846,"meta":178,"style":178},[99,74328,74329,74337,74345],{"__ignoreMap":178},[220,74330,74331,74333,74335],{"class":222,"line":223},[220,74332,343],{"class":264},[220,74334,347],{"class":420},[220,74336,359],{"class":264},[220,74338,74339,74341,74343],{"class":222,"line":179},[220,74340,364],{"class":264},[220,74342,15839],{"class":420},[220,74344,386],{"class":264},[220,74346,74347,74349,74351],{"class":222,"line":389},[220,74348,402],{"class":264},[220,74350,347],{"class":420},[220,74352,359],{"class":264},[212,74354,74355],{"className":468,"code":74270,"language":469,"meta":178,"style":178},[99,74356,74357,74365,74373],{"__ignoreMap":178},[220,74358,74359,74361,74363],{"class":222,"line":223},[220,74360,343],{"class":264},[220,74362,347],{"class":420},[220,74364,359],{"class":264},[220,74366,74367,74369,74371],{"class":222,"line":179},[220,74368,364],{"class":264},[220,74370,15839],{"class":420},[220,74372,386],{"class":264},[220,74374,74375,74377,74379],{"class":222,"line":389},[220,74376,402],{"class":264},[220,74378,347],{"class":420},[220,74380,359],{"class":264},[212,74382,74384],{"className":251,"code":74383,"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,74385,74386,74396,74400,74414,74418,74426,74430],{"__ignoreMap":178},[220,74387,74388,74390,74392,74394],{"class":222,"line":223},[220,74389,261],{"class":260},[220,74391,11512],{"class":264},[220,74393,268],{"class":260},[220,74395,4007],{"class":230},[220,74397,74398],{"class":222,"line":179},[220,74399,647],{"emptyLinePlaceholder":194},[220,74401,74402,74404,74406,74408,74410,74412],{"class":222,"line":389},[220,74403,1735],{"class":260},[220,74405,1738],{"class":420},[220,74407,1741],{"class":260},[220,74409,1744],{"class":260},[220,74411,1747],{"class":226},[220,74413,1750],{"class":264},[220,74415,74416],{"class":222,"line":399},[220,74417,1765],{"class":264},[220,74419,74420,74422,74424],{"class":222,"line":644},[220,74421,1770],{"class":264},[220,74423,17097],{"class":230},[220,74425,2465],{"class":264},[220,74427,74428],{"class":222,"line":650},[220,74429,1787],{"class":264},[220,74431,74432],{"class":222,"line":656},[220,74433,1792],{"class":264},[1504,74435,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":74437},[74438,74439],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":15839,"description":74256},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":74446,"title":74447,"body":74448,"category":33063,"componentType":25877,"description":74455,"extension":191,"meta":74687,"navigation":194,"path":74688,"requiresChild":32530,"seo":74689,"stem":74690,"__hash__":74691},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":74449,"toc":74683},[74450,74453,74456,74458,74460,74463,74465,74681],[11,74451,74447],{"id":74452},"studiobackground",[15,74454,74455],{},"Multi-light studio background with ambient motion.",[31911,74457],{"component":74447},[23,74459,31915],{"id":26533},[31917,74461],{":props":74462},"[{\"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,74464,31923],{"id":31922},[246,74466,74467,74508,74546,74584,74622],{":tabs":1557},[212,74468,74470],{"className":334,"code":74469,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,74471,74472,74480,74487,74496,74500],{"__ignoreMap":178},[220,74473,74474,74476,74478],{"class":222,"line":223},[220,74475,343],{"class":264},[220,74477,347],{"class":346},[220,74479,359],{"class":264},[220,74481,74482,74484],{"class":222,"line":179},[220,74483,364],{"class":264},[220,74485,74486],{"class":346},"StudioBackground\n",[220,74488,74489,74491,74493],{"class":222,"line":389},[220,74490,9635],{"class":226},[220,74492,353],{"class":264},[220,74494,74495],{"class":230},"\"#d8dbec\"\n",[220,74497,74498],{"class":222,"line":399},[220,74499,1234],{"class":264},[220,74501,74502,74504,74506],{"class":222,"line":644},[220,74503,402],{"class":264},[220,74505,347],{"class":346},[220,74507,359],{"class":264},[212,74509,74510],{"className":409,"code":74469,"language":411,"meta":178,"style":178},[99,74511,74512,74520,74526,74534,74538],{"__ignoreMap":178},[220,74513,74514,74516,74518],{"class":222,"line":223},[220,74515,343],{"class":264},[220,74517,347],{"class":420},[220,74519,359],{"class":264},[220,74521,74522,74524],{"class":222,"line":179},[220,74523,364],{"class":264},[220,74525,74486],{"class":420},[220,74527,74528,74530,74532],{"class":222,"line":389},[220,74529,9635],{"class":226},[220,74531,353],{"class":260},[220,74533,74495],{"class":230},[220,74535,74536],{"class":222,"line":399},[220,74537,1234],{"class":264},[220,74539,74540,74542,74544],{"class":222,"line":644},[220,74541,402],{"class":264},[220,74543,347],{"class":420},[220,74545,359],{"class":264},[212,74547,74548],{"className":2844,"code":74469,"language":2846,"meta":178,"style":178},[99,74549,74550,74558,74564,74572,74576],{"__ignoreMap":178},[220,74551,74552,74554,74556],{"class":222,"line":223},[220,74553,343],{"class":264},[220,74555,347],{"class":420},[220,74557,359],{"class":264},[220,74559,74560,74562],{"class":222,"line":179},[220,74561,364],{"class":264},[220,74563,74486],{"class":420},[220,74565,74566,74568,74570],{"class":222,"line":389},[220,74567,9635],{"class":226},[220,74569,353],{"class":264},[220,74571,74495],{"class":230},[220,74573,74574],{"class":222,"line":399},[220,74575,1234],{"class":264},[220,74577,74578,74580,74582],{"class":222,"line":644},[220,74579,402],{"class":264},[220,74581,347],{"class":420},[220,74583,359],{"class":264},[212,74585,74586],{"className":468,"code":74469,"language":469,"meta":178,"style":178},[99,74587,74588,74596,74602,74610,74614],{"__ignoreMap":178},[220,74589,74590,74592,74594],{"class":222,"line":223},[220,74591,343],{"class":264},[220,74593,347],{"class":420},[220,74595,359],{"class":264},[220,74597,74598,74600],{"class":222,"line":179},[220,74599,364],{"class":264},[220,74601,74486],{"class":420},[220,74603,74604,74606,74608],{"class":222,"line":389},[220,74605,9635],{"class":226},[220,74607,353],{"class":260},[220,74609,74495],{"class":230},[220,74611,74612],{"class":222,"line":399},[220,74613,1234],{"class":264},[220,74615,74616,74618,74620],{"class":222,"line":644},[220,74617,402],{"class":264},[220,74619,347],{"class":420},[220,74621,359],{"class":264},[212,74623,74625],{"className":251,"code":74624,"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,74626,74627,74637,74641,74655,74659,74673,74677],{"__ignoreMap":178},[220,74628,74629,74631,74633,74635],{"class":222,"line":223},[220,74630,261],{"class":260},[220,74632,11512],{"class":264},[220,74634,268],{"class":260},[220,74636,4007],{"class":230},[220,74638,74639],{"class":222,"line":179},[220,74640,647],{"emptyLinePlaceholder":194},[220,74642,74643,74645,74647,74649,74651,74653],{"class":222,"line":389},[220,74644,1735],{"class":260},[220,74646,1738],{"class":420},[220,74648,1741],{"class":260},[220,74650,1744],{"class":260},[220,74652,1747],{"class":226},[220,74654,1750],{"class":264},[220,74656,74657],{"class":222,"line":399},[220,74658,1765],{"class":264},[220,74660,74661,74663,74666,74668,74671],{"class":222,"line":644},[220,74662,1770],{"class":264},[220,74664,74665],{"class":230},"'StudioBackground'",[220,74667,1776],{"class":264},[220,74669,74670],{"class":230},"'#d8dbec'",[220,74672,1782],{"class":264},[220,74674,74675],{"class":222,"line":650},[220,74676,1787],{"class":264},[220,74678,74679],{"class":222,"line":656},[220,74680,1792],{"class":264},[1504,74682,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74684},[74685,74686],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":74447,"description":74455},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":74693,"title":74694,"body":74695,"category":33063,"componentType":25877,"description":74702,"extension":191,"meta":74981,"navigation":194,"path":74982,"requiresChild":32530,"seo":74983,"stem":74984,"__hash__":74985},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":74696,"toc":74977},[74697,74700,74703,74705,74707,74710,74712,74975],[11,74698,74694],{"id":74699},"sunburst",[15,74701,74702],{},"Radial sunburst rays emanating from a center point",[31911,74704],{"component":74694},[23,74706,31915],{"id":26533},[31917,74708],{":props":74709},"[{\"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,74711,31923],{"id":31922},[246,74713,74714,74763,74814,74862,74912],{":tabs":1557},[212,74715,74717],{"className":334,"code":74716,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,74718,74719,74727,74734,74743,74751,74755],{"__ignoreMap":178},[220,74720,74721,74723,74725],{"class":222,"line":223},[220,74722,343],{"class":264},[220,74724,347],{"class":346},[220,74726,359],{"class":264},[220,74728,74729,74731],{"class":222,"line":179},[220,74730,364],{"class":264},[220,74732,74733],{"class":346},"SunBurst\n",[220,74735,74736,74738,74740],{"class":222,"line":389},[220,74737,9635],{"class":226},[220,74739,353],{"class":264},[220,74741,74742],{"class":230},"\"#ffdd88\"\n",[220,74744,74745,74747,74749],{"class":222,"line":399},[220,74746,17405],{"class":226},[220,74748,353],{"class":264},[220,74750,9650],{"class":230},[220,74752,74753],{"class":222,"line":644},[220,74754,1234],{"class":264},[220,74756,74757,74759,74761],{"class":222,"line":650},[220,74758,402],{"class":264},[220,74760,347],{"class":346},[220,74762,359],{"class":264},[212,74764,74766],{"className":409,"code":74765,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,74767,74768,74776,74782,74790,74802,74806],{"__ignoreMap":178},[220,74769,74770,74772,74774],{"class":222,"line":223},[220,74771,343],{"class":264},[220,74773,347],{"class":420},[220,74775,359],{"class":264},[220,74777,74778,74780],{"class":222,"line":179},[220,74779,364],{"class":264},[220,74781,74733],{"class":420},[220,74783,74784,74786,74788],{"class":222,"line":389},[220,74785,9635],{"class":226},[220,74787,353],{"class":260},[220,74789,74742],{"class":230},[220,74791,74792,74794,74796,74798,74800],{"class":222,"line":399},[220,74793,9645],{"class":226},[220,74795,353],{"class":260},[220,74797,743],{"class":264},[220,74799,6299],{"class":420},[220,74801,749],{"class":264},[220,74803,74804],{"class":222,"line":644},[220,74805,1234],{"class":264},[220,74807,74808,74810,74812],{"class":222,"line":650},[220,74809,402],{"class":264},[220,74811,347],{"class":420},[220,74813,359],{"class":264},[212,74815,74816],{"className":2844,"code":74765,"language":2846,"meta":178,"style":178},[99,74817,74818,74826,74832,74840,74850,74854],{"__ignoreMap":178},[220,74819,74820,74822,74824],{"class":222,"line":223},[220,74821,343],{"class":264},[220,74823,347],{"class":420},[220,74825,359],{"class":264},[220,74827,74828,74830],{"class":222,"line":179},[220,74829,364],{"class":264},[220,74831,74733],{"class":420},[220,74833,74834,74836,74838],{"class":222,"line":389},[220,74835,9635],{"class":226},[220,74837,353],{"class":264},[220,74839,74742],{"class":230},[220,74841,74842,74844,74846,74848],{"class":222,"line":399},[220,74843,9645],{"class":226},[220,74845,29871],{"class":264},[220,74847,6299],{"class":420},[220,74849,749],{"class":264},[220,74851,74852],{"class":222,"line":644},[220,74853,1234],{"class":264},[220,74855,74856,74858,74860],{"class":222,"line":650},[220,74857,402],{"class":264},[220,74859,347],{"class":420},[220,74861,359],{"class":264},[212,74863,74864],{"className":468,"code":74765,"language":469,"meta":178,"style":178},[99,74865,74866,74874,74880,74888,74900,74904],{"__ignoreMap":178},[220,74867,74868,74870,74872],{"class":222,"line":223},[220,74869,343],{"class":264},[220,74871,347],{"class":420},[220,74873,359],{"class":264},[220,74875,74876,74878],{"class":222,"line":179},[220,74877,364],{"class":264},[220,74879,74733],{"class":420},[220,74881,74882,74884,74886],{"class":222,"line":389},[220,74883,9635],{"class":226},[220,74885,353],{"class":260},[220,74887,74742],{"class":230},[220,74889,74890,74892,74894,74896,74898],{"class":222,"line":399},[220,74891,9645],{"class":226},[220,74893,353],{"class":260},[220,74895,743],{"class":264},[220,74897,6299],{"class":420},[220,74899,749],{"class":264},[220,74901,74902],{"class":222,"line":644},[220,74903,1234],{"class":264},[220,74905,74906,74908,74910],{"class":222,"line":650},[220,74907,402],{"class":264},[220,74909,347],{"class":420},[220,74911,359],{"class":264},[212,74913,74915],{"className":251,"code":74914,"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,74916,74917,74927,74931,74945,74949,74967,74971],{"__ignoreMap":178},[220,74918,74919,74921,74923,74925],{"class":222,"line":223},[220,74920,261],{"class":260},[220,74922,11512],{"class":264},[220,74924,268],{"class":260},[220,74926,4007],{"class":230},[220,74928,74929],{"class":222,"line":179},[220,74930,647],{"emptyLinePlaceholder":194},[220,74932,74933,74935,74937,74939,74941,74943],{"class":222,"line":389},[220,74934,1735],{"class":260},[220,74936,1738],{"class":420},[220,74938,1741],{"class":260},[220,74940,1744],{"class":260},[220,74942,1747],{"class":226},[220,74944,1750],{"class":264},[220,74946,74947],{"class":222,"line":399},[220,74948,1765],{"class":264},[220,74950,74951,74953,74956,74958,74961,74963,74965],{"class":222,"line":644},[220,74952,1770],{"class":264},[220,74954,74955],{"class":230},"'SunBurst'",[220,74957,1776],{"class":264},[220,74959,74960],{"class":230},"'#ffdd88'",[220,74962,6566],{"class":264},[220,74964,6299],{"class":420},[220,74966,1782],{"class":264},[220,74968,74969],{"class":222,"line":650},[220,74970,1787],{"class":264},[220,74972,74973],{"class":222,"line":656},[220,74974,1792],{"class":264},[1504,74976,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74978},[74979,74980],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":74694,"description":74702},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":74987,"title":74988,"body":74989,"category":33396,"componentType":25883,"description":74996,"extension":191,"meta":75257,"navigation":194,"path":75258,"requiresChild":194,"seo":75259,"stem":75260,"__hash__":75261},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":74990,"toc":75253},[74991,74994,74997,74999,75001,75004,75006,75251],[11,74992,74988],{"id":74993},"surface3d",[15,74995,74996],{},"Drapes child content over a 3D wave surface with perspective and lighting",[31911,74998],{"component":74988},[23,75000,31915],{"id":26533},[31917,75002],{":props":75003},"[{\"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,75005,31923],{"id":31922},[246,75007,75008,75053,75097,75141,75185],{":tabs":1557},[212,75009,75011],{"className":334,"code":75010,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,75012,75013,75021,75029,75037,75045],{"__ignoreMap":178},[220,75014,75015,75017,75019],{"class":222,"line":223},[220,75016,343],{"class":264},[220,75018,347],{"class":346},[220,75020,359],{"class":264},[220,75022,75023,75025,75027],{"class":222,"line":179},[220,75024,364],{"class":264},[220,75026,74988],{"class":346},[220,75028,359],{"class":264},[220,75030,75031,75033,75035],{"class":222,"line":389},[220,75032,2550],{"class":264},[220,75034,2553],{"class":346},[220,75036,386],{"class":264},[220,75038,75039,75041,75043],{"class":222,"line":399},[220,75040,2567],{"class":264},[220,75042,74988],{"class":346},[220,75044,359],{"class":264},[220,75046,75047,75049,75051],{"class":222,"line":644},[220,75048,402],{"class":264},[220,75050,347],{"class":346},[220,75052,359],{"class":264},[212,75054,75055],{"className":409,"code":75010,"language":411,"meta":178,"style":178},[99,75056,75057,75065,75073,75081,75089],{"__ignoreMap":178},[220,75058,75059,75061,75063],{"class":222,"line":223},[220,75060,343],{"class":264},[220,75062,347],{"class":420},[220,75064,359],{"class":264},[220,75066,75067,75069,75071],{"class":222,"line":179},[220,75068,364],{"class":264},[220,75070,74988],{"class":420},[220,75072,359],{"class":264},[220,75074,75075,75077,75079],{"class":222,"line":389},[220,75076,2550],{"class":264},[220,75078,2553],{"class":420},[220,75080,386],{"class":264},[220,75082,75083,75085,75087],{"class":222,"line":399},[220,75084,2567],{"class":264},[220,75086,74988],{"class":420},[220,75088,359],{"class":264},[220,75090,75091,75093,75095],{"class":222,"line":644},[220,75092,402],{"class":264},[220,75094,347],{"class":420},[220,75096,359],{"class":264},[212,75098,75099],{"className":2844,"code":75010,"language":2846,"meta":178,"style":178},[99,75100,75101,75109,75117,75125,75133],{"__ignoreMap":178},[220,75102,75103,75105,75107],{"class":222,"line":223},[220,75104,343],{"class":264},[220,75106,347],{"class":420},[220,75108,359],{"class":264},[220,75110,75111,75113,75115],{"class":222,"line":179},[220,75112,364],{"class":264},[220,75114,74988],{"class":420},[220,75116,359],{"class":264},[220,75118,75119,75121,75123],{"class":222,"line":389},[220,75120,2550],{"class":264},[220,75122,2553],{"class":420},[220,75124,386],{"class":264},[220,75126,75127,75129,75131],{"class":222,"line":399},[220,75128,2567],{"class":264},[220,75130,74988],{"class":420},[220,75132,359],{"class":264},[220,75134,75135,75137,75139],{"class":222,"line":644},[220,75136,402],{"class":264},[220,75138,347],{"class":420},[220,75140,359],{"class":264},[212,75142,75143],{"className":468,"code":75010,"language":469,"meta":178,"style":178},[99,75144,75145,75153,75161,75169,75177],{"__ignoreMap":178},[220,75146,75147,75149,75151],{"class":222,"line":223},[220,75148,343],{"class":264},[220,75150,347],{"class":420},[220,75152,359],{"class":264},[220,75154,75155,75157,75159],{"class":222,"line":179},[220,75156,364],{"class":264},[220,75158,74988],{"class":420},[220,75160,359],{"class":264},[220,75162,75163,75165,75167],{"class":222,"line":389},[220,75164,2550],{"class":264},[220,75166,2553],{"class":420},[220,75168,386],{"class":264},[220,75170,75171,75173,75175],{"class":222,"line":399},[220,75172,2567],{"class":264},[220,75174,74988],{"class":420},[220,75176,359],{"class":264},[220,75178,75179,75181,75183],{"class":222,"line":644},[220,75180,402],{"class":264},[220,75182,347],{"class":420},[220,75184,359],{"class":264},[212,75186,75188],{"className":251,"code":75187,"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,75189,75190,75200,75204,75218,75222,75231,75239,75243,75247],{"__ignoreMap":178},[220,75191,75192,75194,75196,75198],{"class":222,"line":223},[220,75193,261],{"class":260},[220,75195,11512],{"class":264},[220,75197,268],{"class":260},[220,75199,4007],{"class":230},[220,75201,75202],{"class":222,"line":179},[220,75203,647],{"emptyLinePlaceholder":194},[220,75205,75206,75208,75210,75212,75214,75216],{"class":222,"line":389},[220,75207,1735],{"class":260},[220,75209,1738],{"class":420},[220,75211,1741],{"class":260},[220,75213,1744],{"class":260},[220,75215,1747],{"class":226},[220,75217,1750],{"class":264},[220,75219,75220],{"class":222,"line":399},[220,75221,1765],{"class":264},[220,75223,75224,75226,75229],{"class":222,"line":644},[220,75225,1770],{"class":264},[220,75227,75228],{"class":230},"'Surface3D'",[220,75230,7009],{"class":264},[220,75232,75233,75235,75237],{"class":222,"line":650},[220,75234,7014],{"class":264},[220,75236,3206],{"class":230},[220,75238,2465],{"class":264},[220,75240,75241],{"class":222,"line":656},[220,75242,7031],{"class":264},[220,75244,75245],{"class":222,"line":673},[220,75246,1787],{"class":264},[220,75248,75249],{"class":222,"line":682},[220,75250,1792],{"class":264},[1504,75252,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":75254},[75255,75256],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":74988,"description":74996},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":75263,"title":14003,"body":75264,"category":33063,"componentType":25877,"description":75271,"extension":191,"meta":75456,"navigation":194,"path":75457,"requiresChild":32530,"seo":75458,"stem":75459,"__hash__":75460},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":75265,"toc":75452},[75266,75269,75272,75274,75276,75279,75281,75450],[11,75267,14003],{"id":75268},"swirl",[15,75270,75271],{},"Flowing swirl pattern with multi-layered noise",[31911,75273],{"component":14003},[23,75275,31915],{"id":26533},[31917,75277],{":props":75278},"[{\"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,75280,31923],{"id":31922},[246,75282,75283,75312,75340,75368,75396],{":tabs":1557},[212,75284,75286],{"className":334,"code":75285,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,75287,75288,75296,75304],{"__ignoreMap":178},[220,75289,75290,75292,75294],{"class":222,"line":223},[220,75291,343],{"class":264},[220,75293,347],{"class":346},[220,75295,359],{"class":264},[220,75297,75298,75300,75302],{"class":222,"line":179},[220,75299,364],{"class":264},[220,75301,14003],{"class":346},[220,75303,386],{"class":264},[220,75305,75306,75308,75310],{"class":222,"line":389},[220,75307,402],{"class":264},[220,75309,347],{"class":346},[220,75311,359],{"class":264},[212,75313,75314],{"className":409,"code":75285,"language":411,"meta":178,"style":178},[99,75315,75316,75324,75332],{"__ignoreMap":178},[220,75317,75318,75320,75322],{"class":222,"line":223},[220,75319,343],{"class":264},[220,75321,347],{"class":420},[220,75323,359],{"class":264},[220,75325,75326,75328,75330],{"class":222,"line":179},[220,75327,364],{"class":264},[220,75329,14003],{"class":420},[220,75331,386],{"class":264},[220,75333,75334,75336,75338],{"class":222,"line":389},[220,75335,402],{"class":264},[220,75337,347],{"class":420},[220,75339,359],{"class":264},[212,75341,75342],{"className":2844,"code":75285,"language":2846,"meta":178,"style":178},[99,75343,75344,75352,75360],{"__ignoreMap":178},[220,75345,75346,75348,75350],{"class":222,"line":223},[220,75347,343],{"class":264},[220,75349,347],{"class":420},[220,75351,359],{"class":264},[220,75353,75354,75356,75358],{"class":222,"line":179},[220,75355,364],{"class":264},[220,75357,14003],{"class":420},[220,75359,386],{"class":264},[220,75361,75362,75364,75366],{"class":222,"line":389},[220,75363,402],{"class":264},[220,75365,347],{"class":420},[220,75367,359],{"class":264},[212,75369,75370],{"className":468,"code":75285,"language":469,"meta":178,"style":178},[99,75371,75372,75380,75388],{"__ignoreMap":178},[220,75373,75374,75376,75378],{"class":222,"line":223},[220,75375,343],{"class":264},[220,75377,347],{"class":420},[220,75379,359],{"class":264},[220,75381,75382,75384,75386],{"class":222,"line":179},[220,75383,364],{"class":264},[220,75385,14003],{"class":420},[220,75387,386],{"class":264},[220,75389,75390,75392,75394],{"class":222,"line":389},[220,75391,402],{"class":264},[220,75393,347],{"class":420},[220,75395,359],{"class":264},[212,75397,75399],{"className":251,"code":75398,"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,75400,75401,75411,75415,75429,75433,75442,75446],{"__ignoreMap":178},[220,75402,75403,75405,75407,75409],{"class":222,"line":223},[220,75404,261],{"class":260},[220,75406,11512],{"class":264},[220,75408,268],{"class":260},[220,75410,4007],{"class":230},[220,75412,75413],{"class":222,"line":179},[220,75414,647],{"emptyLinePlaceholder":194},[220,75416,75417,75419,75421,75423,75425,75427],{"class":222,"line":389},[220,75418,1735],{"class":260},[220,75420,1738],{"class":420},[220,75422,1741],{"class":260},[220,75424,1744],{"class":260},[220,75426,1747],{"class":226},[220,75428,1750],{"class":264},[220,75430,75431],{"class":222,"line":399},[220,75432,1765],{"class":264},[220,75434,75435,75437,75440],{"class":222,"line":644},[220,75436,1770],{"class":264},[220,75438,75439],{"class":230},"'Swirl'",[220,75441,2465],{"class":264},[220,75443,75444],{"class":222,"line":650},[220,75445,1787],{"class":264},[220,75447,75448],{"class":222,"line":656},[220,75449,1792],{"class":264},[1504,75451,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":75453},[75454,75455],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":14003,"description":75271},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":75462,"title":75463,"body":75464,"category":15908,"componentType":25877,"description":75471,"extension":191,"meta":75749,"navigation":194,"path":75750,"requiresChild":32530,"seo":75751,"stem":75752,"__hash__":75753},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":75465,"toc":75745},[75466,75469,75472,75474,75476,75479,75481,75743],[11,75467,75463],{"id":75468},"teardrop",[15,75470,75471],{},"Teardrop — a rounded bulb tapering to a sharp point",[31911,75473],{"component":75463},[23,75475,31915],{"id":26533},[31917,75477],{":props":75478},"[{\"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,75480,31923],{"id":31922},[246,75482,75483,75532,75583,75631,75681],{":tabs":1557},[212,75484,75486],{"className":334,"code":75485,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,75487,75488,75496,75503,75511,75520,75524],{"__ignoreMap":178},[220,75489,75490,75492,75494],{"class":222,"line":223},[220,75491,343],{"class":264},[220,75493,347],{"class":346},[220,75495,359],{"class":264},[220,75497,75498,75500],{"class":222,"line":179},[220,75499,364],{"class":264},[220,75501,75502],{"class":346},"Teardrop\n",[220,75504,75505,75507,75509],{"class":222,"line":389},[220,75506,9635],{"class":226},[220,75508,353],{"class":264},[220,75510,9591],{"class":230},[220,75512,75513,75515,75517],{"class":222,"line":399},[220,75514,17405],{"class":226},[220,75516,353],{"class":264},[220,75518,75519],{"class":230},"\"0.22\"\n",[220,75521,75522],{"class":222,"line":644},[220,75523,1234],{"class":264},[220,75525,75526,75528,75530],{"class":222,"line":650},[220,75527,402],{"class":264},[220,75529,347],{"class":346},[220,75531,359],{"class":264},[212,75533,75535],{"className":409,"code":75534,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,75536,75537,75545,75551,75559,75571,75575],{"__ignoreMap":178},[220,75538,75539,75541,75543],{"class":222,"line":223},[220,75540,343],{"class":264},[220,75542,347],{"class":420},[220,75544,359],{"class":264},[220,75546,75547,75549],{"class":222,"line":179},[220,75548,364],{"class":264},[220,75550,75502],{"class":420},[220,75552,75553,75555,75557],{"class":222,"line":389},[220,75554,9635],{"class":226},[220,75556,353],{"class":260},[220,75558,9591],{"class":230},[220,75560,75561,75563,75565,75567,75569],{"class":222,"line":399},[220,75562,9645],{"class":226},[220,75564,353],{"class":260},[220,75566,743],{"class":264},[220,75568,23949],{"class":420},[220,75570,749],{"class":264},[220,75572,75573],{"class":222,"line":644},[220,75574,1234],{"class":264},[220,75576,75577,75579,75581],{"class":222,"line":650},[220,75578,402],{"class":264},[220,75580,347],{"class":420},[220,75582,359],{"class":264},[212,75584,75585],{"className":2844,"code":75534,"language":2846,"meta":178,"style":178},[99,75586,75587,75595,75601,75609,75619,75623],{"__ignoreMap":178},[220,75588,75589,75591,75593],{"class":222,"line":223},[220,75590,343],{"class":264},[220,75592,347],{"class":420},[220,75594,359],{"class":264},[220,75596,75597,75599],{"class":222,"line":179},[220,75598,364],{"class":264},[220,75600,75502],{"class":420},[220,75602,75603,75605,75607],{"class":222,"line":389},[220,75604,9635],{"class":226},[220,75606,353],{"class":264},[220,75608,9591],{"class":230},[220,75610,75611,75613,75615,75617],{"class":222,"line":399},[220,75612,9645],{"class":226},[220,75614,29871],{"class":264},[220,75616,23949],{"class":420},[220,75618,749],{"class":264},[220,75620,75621],{"class":222,"line":644},[220,75622,1234],{"class":264},[220,75624,75625,75627,75629],{"class":222,"line":650},[220,75626,402],{"class":264},[220,75628,347],{"class":420},[220,75630,359],{"class":264},[212,75632,75633],{"className":468,"code":75534,"language":469,"meta":178,"style":178},[99,75634,75635,75643,75649,75657,75669,75673],{"__ignoreMap":178},[220,75636,75637,75639,75641],{"class":222,"line":223},[220,75638,343],{"class":264},[220,75640,347],{"class":420},[220,75642,359],{"class":264},[220,75644,75645,75647],{"class":222,"line":179},[220,75646,364],{"class":264},[220,75648,75502],{"class":420},[220,75650,75651,75653,75655],{"class":222,"line":389},[220,75652,9635],{"class":226},[220,75654,353],{"class":260},[220,75656,9591],{"class":230},[220,75658,75659,75661,75663,75665,75667],{"class":222,"line":399},[220,75660,9645],{"class":226},[220,75662,353],{"class":260},[220,75664,743],{"class":264},[220,75666,23949],{"class":420},[220,75668,749],{"class":264},[220,75670,75671],{"class":222,"line":644},[220,75672,1234],{"class":264},[220,75674,75675,75677,75679],{"class":222,"line":650},[220,75676,402],{"class":264},[220,75678,347],{"class":420},[220,75680,359],{"class":264},[212,75682,75684],{"className":251,"code":75683,"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,75685,75686,75696,75700,75714,75718,75735,75739],{"__ignoreMap":178},[220,75687,75688,75690,75692,75694],{"class":222,"line":223},[220,75689,261],{"class":260},[220,75691,11512],{"class":264},[220,75693,268],{"class":260},[220,75695,4007],{"class":230},[220,75697,75698],{"class":222,"line":179},[220,75699,647],{"emptyLinePlaceholder":194},[220,75701,75702,75704,75706,75708,75710,75712],{"class":222,"line":389},[220,75703,1735],{"class":260},[220,75705,1738],{"class":420},[220,75707,1741],{"class":260},[220,75709,1744],{"class":260},[220,75711,1747],{"class":226},[220,75713,1750],{"class":264},[220,75715,75716],{"class":222,"line":399},[220,75717,1765],{"class":264},[220,75719,75720,75722,75725,75727,75729,75731,75733],{"class":222,"line":644},[220,75721,1770],{"class":264},[220,75723,75724],{"class":230},"'Teardrop'",[220,75726,1776],{"class":264},[220,75728,10169],{"class":230},[220,75730,6566],{"class":264},[220,75732,23949],{"class":420},[220,75734,1782],{"class":264},[220,75736,75737],{"class":222,"line":650},[220,75738,1787],{"class":264},[220,75740,75741],{"class":222,"line":656},[220,75742,1792],{"class":264},[1504,75744,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75746},[75747,75748],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":75463,"description":75471},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":75755,"title":75756,"body":75757,"category":33063,"componentType":25877,"description":75763,"extension":191,"meta":75993,"navigation":194,"path":75994,"requiresChild":32530,"seo":75995,"stem":75996,"__hash__":75997},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":75758,"toc":75989},[75759,75761,75764,75766,75768,75771,75773,75987],[11,75760,75756],{"id":15644},[15,75762,75763],{},"Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture",[31911,75765],{"component":75756},[23,75767,31915],{"id":26533},[31917,75769],{":props":75770},"[{\"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,75772,31923],{"id":31922},[246,75774,75775,75815,75853,75891,75929],{":tabs":1557},[212,75776,75778],{"className":334,"code":75777,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,75779,75780,75788,75795,75803,75807],{"__ignoreMap":178},[220,75781,75782,75784,75786],{"class":222,"line":223},[220,75783,343],{"class":264},[220,75785,347],{"class":346},[220,75787,359],{"class":264},[220,75789,75790,75792],{"class":222,"line":179},[220,75791,364],{"class":264},[220,75793,75794],{"class":346},"Text\n",[220,75796,75797,75799,75801],{"class":222,"line":389},[220,75798,9635],{"class":226},[220,75800,353],{"class":264},[220,75802,9591],{"class":230},[220,75804,75805],{"class":222,"line":399},[220,75806,1234],{"class":264},[220,75808,75809,75811,75813],{"class":222,"line":644},[220,75810,402],{"class":264},[220,75812,347],{"class":346},[220,75814,359],{"class":264},[212,75816,75817],{"className":409,"code":75777,"language":411,"meta":178,"style":178},[99,75818,75819,75827,75833,75841,75845],{"__ignoreMap":178},[220,75820,75821,75823,75825],{"class":222,"line":223},[220,75822,343],{"class":264},[220,75824,347],{"class":420},[220,75826,359],{"class":264},[220,75828,75829,75831],{"class":222,"line":179},[220,75830,364],{"class":264},[220,75832,75794],{"class":420},[220,75834,75835,75837,75839],{"class":222,"line":389},[220,75836,9635],{"class":226},[220,75838,353],{"class":260},[220,75840,9591],{"class":230},[220,75842,75843],{"class":222,"line":399},[220,75844,1234],{"class":264},[220,75846,75847,75849,75851],{"class":222,"line":644},[220,75848,402],{"class":264},[220,75850,347],{"class":420},[220,75852,359],{"class":264},[212,75854,75855],{"className":2844,"code":75777,"language":2846,"meta":178,"style":178},[99,75856,75857,75865,75871,75879,75883],{"__ignoreMap":178},[220,75858,75859,75861,75863],{"class":222,"line":223},[220,75860,343],{"class":264},[220,75862,347],{"class":420},[220,75864,359],{"class":264},[220,75866,75867,75869],{"class":222,"line":179},[220,75868,364],{"class":264},[220,75870,75794],{"class":420},[220,75872,75873,75875,75877],{"class":222,"line":389},[220,75874,9635],{"class":226},[220,75876,353],{"class":264},[220,75878,9591],{"class":230},[220,75880,75881],{"class":222,"line":399},[220,75882,1234],{"class":264},[220,75884,75885,75887,75889],{"class":222,"line":644},[220,75886,402],{"class":264},[220,75888,347],{"class":420},[220,75890,359],{"class":264},[212,75892,75893],{"className":468,"code":75777,"language":469,"meta":178,"style":178},[99,75894,75895,75903,75909,75917,75921],{"__ignoreMap":178},[220,75896,75897,75899,75901],{"class":222,"line":223},[220,75898,343],{"class":264},[220,75900,347],{"class":420},[220,75902,359],{"class":264},[220,75904,75905,75907],{"class":222,"line":179},[220,75906,364],{"class":264},[220,75908,75794],{"class":420},[220,75910,75911,75913,75915],{"class":222,"line":389},[220,75912,9635],{"class":226},[220,75914,353],{"class":260},[220,75916,9591],{"class":230},[220,75918,75919],{"class":222,"line":399},[220,75920,1234],{"class":264},[220,75922,75923,75925,75927],{"class":222,"line":644},[220,75924,402],{"class":264},[220,75926,347],{"class":420},[220,75928,359],{"class":264},[212,75930,75932],{"className":251,"code":75931,"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,75933,75934,75944,75948,75962,75966,75979,75983],{"__ignoreMap":178},[220,75935,75936,75938,75940,75942],{"class":222,"line":223},[220,75937,261],{"class":260},[220,75939,11512],{"class":264},[220,75941,268],{"class":260},[220,75943,4007],{"class":230},[220,75945,75946],{"class":222,"line":179},[220,75947,647],{"emptyLinePlaceholder":194},[220,75949,75950,75952,75954,75956,75958,75960],{"class":222,"line":389},[220,75951,1735],{"class":260},[220,75953,1738],{"class":420},[220,75955,1741],{"class":260},[220,75957,1744],{"class":260},[220,75959,1747],{"class":226},[220,75961,1750],{"class":264},[220,75963,75964],{"class":222,"line":399},[220,75965,1765],{"class":264},[220,75967,75968,75970,75973,75975,75977],{"class":222,"line":644},[220,75969,1770],{"class":264},[220,75971,75972],{"class":230},"'Text'",[220,75974,1776],{"class":264},[220,75976,10169],{"class":230},[220,75978,1782],{"class":264},[220,75980,75981],{"class":222,"line":650},[220,75982,1787],{"class":264},[220,75984,75985],{"class":222,"line":656},[220,75986,1792],{"class":264},[1504,75988,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75990},[75991,75992],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":75756,"description":75763},"docs\u002Fcomponents\u002FText","V5GqEdlu-00Hi0ZR7eKOTsShbIRkhUQooFlrXUwGSSs",{"id":75999,"title":23169,"body":76000,"category":36569,"componentType":25877,"description":76007,"extension":191,"meta":76248,"navigation":194,"path":76249,"requiresChild":32530,"seo":76250,"stem":76251,"__hash__":76252},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":76001,"toc":76244},[76002,76005,76008,76010,76012,76015,76017,76242],[11,76003,23169],{"id":76004},"thinfilm",[15,76006,76007],{},"Iridescent thin-film edge",[31911,76009],{"component":23169},[23,76011,31915],{"id":26533},[31917,76013],{":props":76014},"[{\"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,76016,31923],{"id":31922},[246,76018,76019,76059,76102,76142,76184],{":tabs":1557},[212,76020,76022],{"className":334,"code":76021,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,76023,76024,76032,76039,76047,76051],{"__ignoreMap":178},[220,76025,76026,76028,76030],{"class":222,"line":223},[220,76027,343],{"class":264},[220,76029,347],{"class":346},[220,76031,359],{"class":264},[220,76033,76034,76036],{"class":222,"line":179},[220,76035,364],{"class":264},[220,76037,76038],{"class":346},"ThinFilm\n",[220,76040,76041,76043,76045],{"class":222,"line":389},[220,76042,20371],{"class":226},[220,76044,353],{"class":264},[220,76046,36625],{"class":230},[220,76048,76049],{"class":222,"line":399},[220,76050,1234],{"class":264},[220,76052,76053,76055,76057],{"class":222,"line":644},[220,76054,402],{"class":264},[220,76056,347],{"class":346},[220,76058,359],{"class":264},[212,76060,76062],{"className":409,"code":76061,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,76063,76064,76072,76078,76090,76094],{"__ignoreMap":178},[220,76065,76066,76068,76070],{"class":222,"line":223},[220,76067,343],{"class":264},[220,76069,347],{"class":420},[220,76071,359],{"class":264},[220,76073,76074,76076],{"class":222,"line":179},[220,76075,364],{"class":264},[220,76077,76038],{"class":420},[220,76079,76080,76082,76084,76086,76088],{"class":222,"line":389},[220,76081,20482],{"class":226},[220,76083,353],{"class":260},[220,76085,743],{"class":264},[220,76087,8677],{"class":420},[220,76089,749],{"class":264},[220,76091,76092],{"class":222,"line":399},[220,76093,1234],{"class":264},[220,76095,76096,76098,76100],{"class":222,"line":644},[220,76097,402],{"class":264},[220,76099,347],{"class":420},[220,76101,359],{"class":264},[212,76103,76104],{"className":2844,"code":76061,"language":2846,"meta":178,"style":178},[99,76105,76106,76114,76120,76130,76134],{"__ignoreMap":178},[220,76107,76108,76110,76112],{"class":222,"line":223},[220,76109,343],{"class":264},[220,76111,347],{"class":420},[220,76113,359],{"class":264},[220,76115,76116,76118],{"class":222,"line":179},[220,76117,364],{"class":264},[220,76119,76038],{"class":420},[220,76121,76122,76124,76126,76128],{"class":222,"line":389},[220,76123,20482],{"class":226},[220,76125,29871],{"class":264},[220,76127,8677],{"class":420},[220,76129,749],{"class":264},[220,76131,76132],{"class":222,"line":399},[220,76133,1234],{"class":264},[220,76135,76136,76138,76140],{"class":222,"line":644},[220,76137,402],{"class":264},[220,76139,347],{"class":420},[220,76141,359],{"class":264},[212,76143,76144],{"className":468,"code":76061,"language":469,"meta":178,"style":178},[99,76145,76146,76154,76160,76172,76176],{"__ignoreMap":178},[220,76147,76148,76150,76152],{"class":222,"line":223},[220,76149,343],{"class":264},[220,76151,347],{"class":420},[220,76153,359],{"class":264},[220,76155,76156,76158],{"class":222,"line":179},[220,76157,364],{"class":264},[220,76159,76038],{"class":420},[220,76161,76162,76164,76166,76168,76170],{"class":222,"line":389},[220,76163,20482],{"class":226},[220,76165,353],{"class":260},[220,76167,743],{"class":264},[220,76169,8677],{"class":420},[220,76171,749],{"class":264},[220,76173,76174],{"class":222,"line":399},[220,76175,1234],{"class":264},[220,76177,76178,76180,76182],{"class":222,"line":644},[220,76179,402],{"class":264},[220,76181,347],{"class":420},[220,76183,359],{"class":264},[212,76185,76187],{"className":251,"code":76186,"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,76188,76189,76199,76203,76217,76221,76234,76238],{"__ignoreMap":178},[220,76190,76191,76193,76195,76197],{"class":222,"line":223},[220,76192,261],{"class":260},[220,76194,11512],{"class":264},[220,76196,268],{"class":260},[220,76198,4007],{"class":230},[220,76200,76201],{"class":222,"line":179},[220,76202,647],{"emptyLinePlaceholder":194},[220,76204,76205,76207,76209,76211,76213,76215],{"class":222,"line":389},[220,76206,1735],{"class":260},[220,76208,1738],{"class":420},[220,76210,1741],{"class":260},[220,76212,1744],{"class":260},[220,76214,1747],{"class":226},[220,76216,1750],{"class":264},[220,76218,76219],{"class":222,"line":399},[220,76220,1765],{"class":264},[220,76222,76223,76225,76228,76230,76232],{"class":222,"line":644},[220,76224,1770],{"class":264},[220,76226,76227],{"class":230},"'ThinFilm'",[220,76229,32203],{"class":264},[220,76231,8677],{"class":420},[220,76233,1782],{"class":264},[220,76235,76236],{"class":222,"line":650},[220,76237,1787],{"class":264},[220,76239,76240],{"class":222,"line":656},[220,76241,1792],{"class":264},[1504,76243,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76245},[76246,76247],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":23169,"description":76007},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":76254,"title":76255,"body":76256,"category":32234,"componentType":25883,"description":76263,"extension":191,"meta":76580,"navigation":194,"path":76581,"requiresChild":194,"seo":76582,"stem":76583,"__hash__":76584},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":76257,"toc":76576},[76258,76261,76264,76266,76268,76271,76273,76574],[11,76259,76255],{"id":76260},"tiltshift",[15,76262,76263],{},"Selective focus blur mimicking tilt-shift photography",[31911,76265],{"component":76255},[23,76267,31915],{"id":26533},[31917,76269],{":props":76270},"[{\"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,76272,31923],{"id":31922},[246,76274,76275,76331,76390,76446,76504],{":tabs":1557},[212,76276,76278],{"className":334,"code":76277,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,76279,76280,76288,76295,76303,76307,76315,76323],{"__ignoreMap":178},[220,76281,76282,76284,76286],{"class":222,"line":223},[220,76283,343],{"class":264},[220,76285,347],{"class":346},[220,76287,359],{"class":264},[220,76289,76290,76292],{"class":222,"line":179},[220,76291,364],{"class":264},[220,76293,76294],{"class":346},"TiltShift\n",[220,76296,76297,76299,76301],{"class":222,"line":389},[220,76298,20371],{"class":226},[220,76300,353],{"class":264},[220,76302,35080],{"class":230},[220,76304,76305],{"class":222,"line":399},[220,76306,31959],{"class":264},[220,76308,76309,76311,76313],{"class":222,"line":644},[220,76310,2550],{"class":264},[220,76312,2553],{"class":346},[220,76314,386],{"class":264},[220,76316,76317,76319,76321],{"class":222,"line":650},[220,76318,2567],{"class":264},[220,76320,76255],{"class":346},[220,76322,359],{"class":264},[220,76324,76325,76327,76329],{"class":222,"line":656},[220,76326,402],{"class":264},[220,76328,347],{"class":346},[220,76330,359],{"class":264},[212,76332,76334],{"className":409,"code":76333,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,76335,76336,76344,76350,76362,76366,76374,76382],{"__ignoreMap":178},[220,76337,76338,76340,76342],{"class":222,"line":223},[220,76339,343],{"class":264},[220,76341,347],{"class":420},[220,76343,359],{"class":264},[220,76345,76346,76348],{"class":222,"line":179},[220,76347,364],{"class":264},[220,76349,76294],{"class":420},[220,76351,76352,76354,76356,76358,76360],{"class":222,"line":389},[220,76353,20482],{"class":226},[220,76355,353],{"class":260},[220,76357,743],{"class":264},[220,76359,35138],{"class":420},[220,76361,749],{"class":264},[220,76363,76364],{"class":222,"line":399},[220,76365,31959],{"class":264},[220,76367,76368,76370,76372],{"class":222,"line":644},[220,76369,2550],{"class":264},[220,76371,2553],{"class":420},[220,76373,386],{"class":264},[220,76375,76376,76378,76380],{"class":222,"line":650},[220,76377,2567],{"class":264},[220,76379,76255],{"class":420},[220,76381,359],{"class":264},[220,76383,76384,76386,76388],{"class":222,"line":656},[220,76385,402],{"class":264},[220,76387,347],{"class":420},[220,76389,359],{"class":264},[212,76391,76392],{"className":2844,"code":76333,"language":2846,"meta":178,"style":178},[99,76393,76394,76402,76408,76418,76422,76430,76438],{"__ignoreMap":178},[220,76395,76396,76398,76400],{"class":222,"line":223},[220,76397,343],{"class":264},[220,76399,347],{"class":420},[220,76401,359],{"class":264},[220,76403,76404,76406],{"class":222,"line":179},[220,76405,364],{"class":264},[220,76407,76294],{"class":420},[220,76409,76410,76412,76414,76416],{"class":222,"line":389},[220,76411,20482],{"class":226},[220,76413,29871],{"class":264},[220,76415,35138],{"class":420},[220,76417,749],{"class":264},[220,76419,76420],{"class":222,"line":399},[220,76421,31959],{"class":264},[220,76423,76424,76426,76428],{"class":222,"line":644},[220,76425,2550],{"class":264},[220,76427,2553],{"class":420},[220,76429,386],{"class":264},[220,76431,76432,76434,76436],{"class":222,"line":650},[220,76433,2567],{"class":264},[220,76435,76255],{"class":420},[220,76437,359],{"class":264},[220,76439,76440,76442,76444],{"class":222,"line":656},[220,76441,402],{"class":264},[220,76443,347],{"class":420},[220,76445,359],{"class":264},[212,76447,76448],{"className":468,"code":76333,"language":469,"meta":178,"style":178},[99,76449,76450,76458,76464,76476,76480,76488,76496],{"__ignoreMap":178},[220,76451,76452,76454,76456],{"class":222,"line":223},[220,76453,343],{"class":264},[220,76455,347],{"class":420},[220,76457,359],{"class":264},[220,76459,76460,76462],{"class":222,"line":179},[220,76461,364],{"class":264},[220,76463,76294],{"class":420},[220,76465,76466,76468,76470,76472,76474],{"class":222,"line":389},[220,76467,20482],{"class":226},[220,76469,353],{"class":260},[220,76471,743],{"class":264},[220,76473,35138],{"class":420},[220,76475,749],{"class":264},[220,76477,76478],{"class":222,"line":399},[220,76479,31959],{"class":264},[220,76481,76482,76484,76486],{"class":222,"line":644},[220,76483,2550],{"class":264},[220,76485,2553],{"class":420},[220,76487,386],{"class":264},[220,76489,76490,76492,76494],{"class":222,"line":650},[220,76491,2567],{"class":264},[220,76493,76255],{"class":420},[220,76495,359],{"class":264},[220,76497,76498,76500,76502],{"class":222,"line":656},[220,76499,402],{"class":264},[220,76501,347],{"class":420},[220,76503,359],{"class":264},[212,76505,76507],{"className":251,"code":76506,"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,76508,76509,76519,76523,76537,76541,76554,76562,76566,76570],{"__ignoreMap":178},[220,76510,76511,76513,76515,76517],{"class":222,"line":223},[220,76512,261],{"class":260},[220,76514,11512],{"class":264},[220,76516,268],{"class":260},[220,76518,4007],{"class":230},[220,76520,76521],{"class":222,"line":179},[220,76522,647],{"emptyLinePlaceholder":194},[220,76524,76525,76527,76529,76531,76533,76535],{"class":222,"line":389},[220,76526,1735],{"class":260},[220,76528,1738],{"class":420},[220,76530,1741],{"class":260},[220,76532,1744],{"class":260},[220,76534,1747],{"class":226},[220,76536,1750],{"class":264},[220,76538,76539],{"class":222,"line":399},[220,76540,1765],{"class":264},[220,76542,76543,76545,76548,76550,76552],{"class":222,"line":644},[220,76544,1770],{"class":264},[220,76546,76547],{"class":230},"'TiltShift'",[220,76549,32203],{"class":264},[220,76551,35138],{"class":420},[220,76553,7546],{"class":264},[220,76555,76556,76558,76560],{"class":222,"line":650},[220,76557,7014],{"class":264},[220,76559,3206],{"class":230},[220,76561,2465],{"class":264},[220,76563,76564],{"class":222,"line":656},[220,76565,7031],{"class":264},[220,76567,76568],{"class":222,"line":673},[220,76569,1787],{"class":264},[220,76571,76572],{"class":222,"line":682},[220,76573,1792],{"class":264},[1504,76575,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76577},[76578,76579],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":76255,"description":76263},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":76586,"title":76587,"body":76588,"category":32806,"componentType":25883,"description":76595,"extension":191,"meta":76856,"navigation":194,"path":76857,"requiresChild":194,"seo":76858,"stem":76859,"__hash__":76860},"components\u002Fdocs\u002Fcomponents\u002FTimeTrail.md","TimeTrail",{"type":8,"value":76589,"toc":76852},[76590,76593,76596,76598,76600,76603,76605,76850],[11,76591,76587],{"id":76592},"timetrail",[15,76594,76595],{},"An Echo-style temporal trail — whatever moves sheds a smooth, decaying long-exposure ghost trail (frame-difference Motion mode works on opaque images and video; Alpha mode trails a shape's coverage), with optional zoom-feedback tunnels and rainbow light-painting",[31911,76597],{"component":76587},[23,76599,31915],{"id":26533},[31917,76601],{":props":76602},"[{\"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,76604,31923],{"id":31922},[246,76606,76607,76652,76696,76740,76784],{":tabs":1557},[212,76608,76610],{"className":334,"code":76609,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTimeTrail>\n \u003CCircle \u002F>\n \u003C\u002FTimeTrail>\n\u003C\u002FShader>\n",[99,76611,76612,76620,76628,76636,76644],{"__ignoreMap":178},[220,76613,76614,76616,76618],{"class":222,"line":223},[220,76615,343],{"class":264},[220,76617,347],{"class":346},[220,76619,359],{"class":264},[220,76621,76622,76624,76626],{"class":222,"line":179},[220,76623,364],{"class":264},[220,76625,76587],{"class":346},[220,76627,359],{"class":264},[220,76629,76630,76632,76634],{"class":222,"line":389},[220,76631,2550],{"class":264},[220,76633,2553],{"class":346},[220,76635,386],{"class":264},[220,76637,76638,76640,76642],{"class":222,"line":399},[220,76639,2567],{"class":264},[220,76641,76587],{"class":346},[220,76643,359],{"class":264},[220,76645,76646,76648,76650],{"class":222,"line":644},[220,76647,402],{"class":264},[220,76649,347],{"class":346},[220,76651,359],{"class":264},[212,76653,76654],{"className":409,"code":76609,"language":411,"meta":178,"style":178},[99,76655,76656,76664,76672,76680,76688],{"__ignoreMap":178},[220,76657,76658,76660,76662],{"class":222,"line":223},[220,76659,343],{"class":264},[220,76661,347],{"class":420},[220,76663,359],{"class":264},[220,76665,76666,76668,76670],{"class":222,"line":179},[220,76667,364],{"class":264},[220,76669,76587],{"class":420},[220,76671,359],{"class":264},[220,76673,76674,76676,76678],{"class":222,"line":389},[220,76675,2550],{"class":264},[220,76677,2553],{"class":420},[220,76679,386],{"class":264},[220,76681,76682,76684,76686],{"class":222,"line":399},[220,76683,2567],{"class":264},[220,76685,76587],{"class":420},[220,76687,359],{"class":264},[220,76689,76690,76692,76694],{"class":222,"line":644},[220,76691,402],{"class":264},[220,76693,347],{"class":420},[220,76695,359],{"class":264},[212,76697,76698],{"className":2844,"code":76609,"language":2846,"meta":178,"style":178},[99,76699,76700,76708,76716,76724,76732],{"__ignoreMap":178},[220,76701,76702,76704,76706],{"class":222,"line":223},[220,76703,343],{"class":264},[220,76705,347],{"class":420},[220,76707,359],{"class":264},[220,76709,76710,76712,76714],{"class":222,"line":179},[220,76711,364],{"class":264},[220,76713,76587],{"class":420},[220,76715,359],{"class":264},[220,76717,76718,76720,76722],{"class":222,"line":389},[220,76719,2550],{"class":264},[220,76721,2553],{"class":420},[220,76723,386],{"class":264},[220,76725,76726,76728,76730],{"class":222,"line":399},[220,76727,2567],{"class":264},[220,76729,76587],{"class":420},[220,76731,359],{"class":264},[220,76733,76734,76736,76738],{"class":222,"line":644},[220,76735,402],{"class":264},[220,76737,347],{"class":420},[220,76739,359],{"class":264},[212,76741,76742],{"className":468,"code":76609,"language":469,"meta":178,"style":178},[99,76743,76744,76752,76760,76768,76776],{"__ignoreMap":178},[220,76745,76746,76748,76750],{"class":222,"line":223},[220,76747,343],{"class":264},[220,76749,347],{"class":420},[220,76751,359],{"class":264},[220,76753,76754,76756,76758],{"class":222,"line":179},[220,76755,364],{"class":264},[220,76757,76587],{"class":420},[220,76759,359],{"class":264},[220,76761,76762,76764,76766],{"class":222,"line":389},[220,76763,2550],{"class":264},[220,76765,2553],{"class":420},[220,76767,386],{"class":264},[220,76769,76770,76772,76774],{"class":222,"line":399},[220,76771,2567],{"class":264},[220,76773,76587],{"class":420},[220,76775,359],{"class":264},[220,76777,76778,76780,76782],{"class":222,"line":644},[220,76779,402],{"class":264},[220,76781,347],{"class":420},[220,76783,359],{"class":264},[212,76785,76787],{"className":251,"code":76786,"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,76788,76789,76799,76803,76817,76821,76830,76838,76842,76846],{"__ignoreMap":178},[220,76790,76791,76793,76795,76797],{"class":222,"line":223},[220,76792,261],{"class":260},[220,76794,11512],{"class":264},[220,76796,268],{"class":260},[220,76798,4007],{"class":230},[220,76800,76801],{"class":222,"line":179},[220,76802,647],{"emptyLinePlaceholder":194},[220,76804,76805,76807,76809,76811,76813,76815],{"class":222,"line":389},[220,76806,1735],{"class":260},[220,76808,1738],{"class":420},[220,76810,1741],{"class":260},[220,76812,1744],{"class":260},[220,76814,1747],{"class":226},[220,76816,1750],{"class":264},[220,76818,76819],{"class":222,"line":399},[220,76820,1765],{"class":264},[220,76822,76823,76825,76828],{"class":222,"line":644},[220,76824,1770],{"class":264},[220,76826,76827],{"class":230},"'TimeTrail'",[220,76829,7009],{"class":264},[220,76831,76832,76834,76836],{"class":222,"line":650},[220,76833,7014],{"class":264},[220,76835,3206],{"class":230},[220,76837,2465],{"class":264},[220,76839,76840],{"class":222,"line":656},[220,76841,7031],{"class":264},[220,76843,76844],{"class":222,"line":673},[220,76845,1787],{"class":264},[220,76847,76848],{"class":222,"line":682},[220,76849,1792],{"class":264},[1504,76851,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":76853},[76854,76855],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftimetrail",{"title":76587,"description":76595},"docs\u002Fcomponents\u002FTimeTrail","UE92ll69s2IbTEP3QBBWCS9JFrQ-A1hkv-YEwMYNTXk",{"id":76862,"title":76863,"body":76864,"category":36368,"componentType":25883,"description":76871,"extension":191,"meta":77179,"navigation":194,"path":77180,"requiresChild":194,"seo":77181,"stem":77182,"__hash__":77183},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":76865,"toc":77175},[76866,76869,76872,76874,76876,76879,76881,77173],[11,76867,76863],{"id":76868},"tint",[15,76870,76871],{},"Apply a color tint to the image",[31911,76873],{"component":76863},[23,76875,31915],{"id":26533},[31917,76877],{":props":76878},"[{\"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,76880,31923],{"id":31922},[246,76882,76883,76940,76994,77048,77102],{":tabs":1557},[212,76884,76886],{"className":334,"code":76885,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,76887,76888,76896,76903,76912,76916,76924,76932],{"__ignoreMap":178},[220,76889,76890,76892,76894],{"class":222,"line":223},[220,76891,343],{"class":264},[220,76893,347],{"class":346},[220,76895,359],{"class":264},[220,76897,76898,76900],{"class":222,"line":179},[220,76899,364],{"class":264},[220,76901,76902],{"class":346},"Tint\n",[220,76904,76905,76907,76909],{"class":222,"line":389},[220,76906,9635],{"class":226},[220,76908,353],{"class":264},[220,76910,76911],{"class":230},"\"#ff8800\"\n",[220,76913,76914],{"class":222,"line":399},[220,76915,31959],{"class":264},[220,76917,76918,76920,76922],{"class":222,"line":644},[220,76919,2550],{"class":264},[220,76921,2553],{"class":346},[220,76923,386],{"class":264},[220,76925,76926,76928,76930],{"class":222,"line":650},[220,76927,2567],{"class":264},[220,76929,76863],{"class":346},[220,76931,359],{"class":264},[220,76933,76934,76936,76938],{"class":222,"line":656},[220,76935,402],{"class":264},[220,76937,347],{"class":346},[220,76939,359],{"class":264},[212,76941,76942],{"className":409,"code":76885,"language":411,"meta":178,"style":178},[99,76943,76944,76952,76958,76966,76970,76978,76986],{"__ignoreMap":178},[220,76945,76946,76948,76950],{"class":222,"line":223},[220,76947,343],{"class":264},[220,76949,347],{"class":420},[220,76951,359],{"class":264},[220,76953,76954,76956],{"class":222,"line":179},[220,76955,364],{"class":264},[220,76957,76902],{"class":420},[220,76959,76960,76962,76964],{"class":222,"line":389},[220,76961,9635],{"class":226},[220,76963,353],{"class":260},[220,76965,76911],{"class":230},[220,76967,76968],{"class":222,"line":399},[220,76969,31959],{"class":264},[220,76971,76972,76974,76976],{"class":222,"line":644},[220,76973,2550],{"class":264},[220,76975,2553],{"class":420},[220,76977,386],{"class":264},[220,76979,76980,76982,76984],{"class":222,"line":650},[220,76981,2567],{"class":264},[220,76983,76863],{"class":420},[220,76985,359],{"class":264},[220,76987,76988,76990,76992],{"class":222,"line":656},[220,76989,402],{"class":264},[220,76991,347],{"class":420},[220,76993,359],{"class":264},[212,76995,76996],{"className":2844,"code":76885,"language":2846,"meta":178,"style":178},[99,76997,76998,77006,77012,77020,77024,77032,77040],{"__ignoreMap":178},[220,76999,77000,77002,77004],{"class":222,"line":223},[220,77001,343],{"class":264},[220,77003,347],{"class":420},[220,77005,359],{"class":264},[220,77007,77008,77010],{"class":222,"line":179},[220,77009,364],{"class":264},[220,77011,76902],{"class":420},[220,77013,77014,77016,77018],{"class":222,"line":389},[220,77015,9635],{"class":226},[220,77017,353],{"class":264},[220,77019,76911],{"class":230},[220,77021,77022],{"class":222,"line":399},[220,77023,31959],{"class":264},[220,77025,77026,77028,77030],{"class":222,"line":644},[220,77027,2550],{"class":264},[220,77029,2553],{"class":420},[220,77031,386],{"class":264},[220,77033,77034,77036,77038],{"class":222,"line":650},[220,77035,2567],{"class":264},[220,77037,76863],{"class":420},[220,77039,359],{"class":264},[220,77041,77042,77044,77046],{"class":222,"line":656},[220,77043,402],{"class":264},[220,77045,347],{"class":420},[220,77047,359],{"class":264},[212,77049,77050],{"className":468,"code":76885,"language":469,"meta":178,"style":178},[99,77051,77052,77060,77066,77074,77078,77086,77094],{"__ignoreMap":178},[220,77053,77054,77056,77058],{"class":222,"line":223},[220,77055,343],{"class":264},[220,77057,347],{"class":420},[220,77059,359],{"class":264},[220,77061,77062,77064],{"class":222,"line":179},[220,77063,364],{"class":264},[220,77065,76902],{"class":420},[220,77067,77068,77070,77072],{"class":222,"line":389},[220,77069,9635],{"class":226},[220,77071,353],{"class":260},[220,77073,76911],{"class":230},[220,77075,77076],{"class":222,"line":399},[220,77077,31959],{"class":264},[220,77079,77080,77082,77084],{"class":222,"line":644},[220,77081,2550],{"class":264},[220,77083,2553],{"class":420},[220,77085,386],{"class":264},[220,77087,77088,77090,77092],{"class":222,"line":650},[220,77089,2567],{"class":264},[220,77091,76863],{"class":420},[220,77093,359],{"class":264},[220,77095,77096,77098,77100],{"class":222,"line":656},[220,77097,402],{"class":264},[220,77099,347],{"class":420},[220,77101,359],{"class":264},[212,77103,77105],{"className":251,"code":77104,"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,77106,77107,77117,77121,77135,77139,77153,77161,77165,77169],{"__ignoreMap":178},[220,77108,77109,77111,77113,77115],{"class":222,"line":223},[220,77110,261],{"class":260},[220,77112,11512],{"class":264},[220,77114,268],{"class":260},[220,77116,4007],{"class":230},[220,77118,77119],{"class":222,"line":179},[220,77120,647],{"emptyLinePlaceholder":194},[220,77122,77123,77125,77127,77129,77131,77133],{"class":222,"line":389},[220,77124,1735],{"class":260},[220,77126,1738],{"class":420},[220,77128,1741],{"class":260},[220,77130,1744],{"class":260},[220,77132,1747],{"class":226},[220,77134,1750],{"class":264},[220,77136,77137],{"class":222,"line":399},[220,77138,1765],{"class":264},[220,77140,77141,77143,77146,77148,77151],{"class":222,"line":644},[220,77142,1770],{"class":264},[220,77144,77145],{"class":230},"'Tint'",[220,77147,1776],{"class":264},[220,77149,77150],{"class":230},"'#ff8800'",[220,77152,7546],{"class":264},[220,77154,77155,77157,77159],{"class":222,"line":650},[220,77156,7014],{"class":264},[220,77158,3206],{"class":230},[220,77160,2465],{"class":264},[220,77162,77163],{"class":222,"line":656},[220,77164,7031],{"class":264},[220,77166,77167],{"class":222,"line":673},[220,77168,1787],{"class":264},[220,77170,77171],{"class":222,"line":682},[220,77172,1792],{"class":264},[1504,77174,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77176},[77177,77178],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":76863,"description":76871},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":77185,"title":77186,"body":77187,"category":15908,"componentType":25877,"description":77194,"extension":191,"meta":77424,"navigation":194,"path":77425,"requiresChild":32530,"seo":77426,"stem":77427,"__hash__":77428},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":77188,"toc":77420},[77189,77192,77195,77197,77199,77202,77204,77418],[11,77190,77186],{"id":77191},"trapezoid",[15,77193,77194],{},"Trapezoid with adjustable top and bottom widths and height",[31911,77196],{"component":77186},[23,77198,31915],{"id":26533},[31917,77200],{":props":77201},"[{\"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,77203,31923],{"id":31922},[246,77205,77206,77246,77284,77322,77360],{":tabs":1557},[212,77207,77209],{"className":334,"code":77208,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,77210,77211,77219,77226,77234,77238],{"__ignoreMap":178},[220,77212,77213,77215,77217],{"class":222,"line":223},[220,77214,343],{"class":264},[220,77216,347],{"class":346},[220,77218,359],{"class":264},[220,77220,77221,77223],{"class":222,"line":179},[220,77222,364],{"class":264},[220,77224,77225],{"class":346},"Trapezoid\n",[220,77227,77228,77230,77232],{"class":222,"line":389},[220,77229,9635],{"class":226},[220,77231,353],{"class":264},[220,77233,9591],{"class":230},[220,77235,77236],{"class":222,"line":399},[220,77237,1234],{"class":264},[220,77239,77240,77242,77244],{"class":222,"line":644},[220,77241,402],{"class":264},[220,77243,347],{"class":346},[220,77245,359],{"class":264},[212,77247,77248],{"className":409,"code":77208,"language":411,"meta":178,"style":178},[99,77249,77250,77258,77264,77272,77276],{"__ignoreMap":178},[220,77251,77252,77254,77256],{"class":222,"line":223},[220,77253,343],{"class":264},[220,77255,347],{"class":420},[220,77257,359],{"class":264},[220,77259,77260,77262],{"class":222,"line":179},[220,77261,364],{"class":264},[220,77263,77225],{"class":420},[220,77265,77266,77268,77270],{"class":222,"line":389},[220,77267,9635],{"class":226},[220,77269,353],{"class":260},[220,77271,9591],{"class":230},[220,77273,77274],{"class":222,"line":399},[220,77275,1234],{"class":264},[220,77277,77278,77280,77282],{"class":222,"line":644},[220,77279,402],{"class":264},[220,77281,347],{"class":420},[220,77283,359],{"class":264},[212,77285,77286],{"className":2844,"code":77208,"language":2846,"meta":178,"style":178},[99,77287,77288,77296,77302,77310,77314],{"__ignoreMap":178},[220,77289,77290,77292,77294],{"class":222,"line":223},[220,77291,343],{"class":264},[220,77293,347],{"class":420},[220,77295,359],{"class":264},[220,77297,77298,77300],{"class":222,"line":179},[220,77299,364],{"class":264},[220,77301,77225],{"class":420},[220,77303,77304,77306,77308],{"class":222,"line":389},[220,77305,9635],{"class":226},[220,77307,353],{"class":264},[220,77309,9591],{"class":230},[220,77311,77312],{"class":222,"line":399},[220,77313,1234],{"class":264},[220,77315,77316,77318,77320],{"class":222,"line":644},[220,77317,402],{"class":264},[220,77319,347],{"class":420},[220,77321,359],{"class":264},[212,77323,77324],{"className":468,"code":77208,"language":469,"meta":178,"style":178},[99,77325,77326,77334,77340,77348,77352],{"__ignoreMap":178},[220,77327,77328,77330,77332],{"class":222,"line":223},[220,77329,343],{"class":264},[220,77331,347],{"class":420},[220,77333,359],{"class":264},[220,77335,77336,77338],{"class":222,"line":179},[220,77337,364],{"class":264},[220,77339,77225],{"class":420},[220,77341,77342,77344,77346],{"class":222,"line":389},[220,77343,9635],{"class":226},[220,77345,353],{"class":260},[220,77347,9591],{"class":230},[220,77349,77350],{"class":222,"line":399},[220,77351,1234],{"class":264},[220,77353,77354,77356,77358],{"class":222,"line":644},[220,77355,402],{"class":264},[220,77357,347],{"class":420},[220,77359,359],{"class":264},[212,77361,77363],{"className":251,"code":77362,"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,77364,77365,77375,77379,77393,77397,77410,77414],{"__ignoreMap":178},[220,77366,77367,77369,77371,77373],{"class":222,"line":223},[220,77368,261],{"class":260},[220,77370,11512],{"class":264},[220,77372,268],{"class":260},[220,77374,4007],{"class":230},[220,77376,77377],{"class":222,"line":179},[220,77378,647],{"emptyLinePlaceholder":194},[220,77380,77381,77383,77385,77387,77389,77391],{"class":222,"line":389},[220,77382,1735],{"class":260},[220,77384,1738],{"class":420},[220,77386,1741],{"class":260},[220,77388,1744],{"class":260},[220,77390,1747],{"class":226},[220,77392,1750],{"class":264},[220,77394,77395],{"class":222,"line":399},[220,77396,1765],{"class":264},[220,77398,77399,77401,77404,77406,77408],{"class":222,"line":644},[220,77400,1770],{"class":264},[220,77402,77403],{"class":230},"'Trapezoid'",[220,77405,1776],{"class":264},[220,77407,10169],{"class":230},[220,77409,1782],{"class":264},[220,77411,77412],{"class":222,"line":650},[220,77413,1787],{"class":264},[220,77415,77416],{"class":222,"line":656},[220,77417,1792],{"class":264},[1504,77419,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77421},[77422,77423],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":77186,"description":77194},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":77430,"title":77431,"body":77432,"category":33063,"componentType":25877,"description":77439,"extension":191,"meta":77624,"navigation":194,"path":77625,"requiresChild":32530,"seo":77626,"stem":77627,"__hash__":77628},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":77433,"toc":77620},[77434,77437,77440,77442,77444,77447,77449,77618],[11,77435,77431],{"id":77436},"triangulargrid",[15,77438,77439],{},"Tiling grid of equilateral triangles with optional animated row offsets",[31911,77441],{"component":77431},[23,77443,31915],{"id":26533},[31917,77445],{":props":77446},"[{\"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,77448,31923],{"id":31922},[246,77450,77451,77480,77508,77536,77564],{":tabs":1557},[212,77452,77454],{"className":334,"code":77453,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,77455,77456,77464,77472],{"__ignoreMap":178},[220,77457,77458,77460,77462],{"class":222,"line":223},[220,77459,343],{"class":264},[220,77461,347],{"class":346},[220,77463,359],{"class":264},[220,77465,77466,77468,77470],{"class":222,"line":179},[220,77467,364],{"class":264},[220,77469,77431],{"class":346},[220,77471,386],{"class":264},[220,77473,77474,77476,77478],{"class":222,"line":389},[220,77475,402],{"class":264},[220,77477,347],{"class":346},[220,77479,359],{"class":264},[212,77481,77482],{"className":409,"code":77453,"language":411,"meta":178,"style":178},[99,77483,77484,77492,77500],{"__ignoreMap":178},[220,77485,77486,77488,77490],{"class":222,"line":223},[220,77487,343],{"class":264},[220,77489,347],{"class":420},[220,77491,359],{"class":264},[220,77493,77494,77496,77498],{"class":222,"line":179},[220,77495,364],{"class":264},[220,77497,77431],{"class":420},[220,77499,386],{"class":264},[220,77501,77502,77504,77506],{"class":222,"line":389},[220,77503,402],{"class":264},[220,77505,347],{"class":420},[220,77507,359],{"class":264},[212,77509,77510],{"className":2844,"code":77453,"language":2846,"meta":178,"style":178},[99,77511,77512,77520,77528],{"__ignoreMap":178},[220,77513,77514,77516,77518],{"class":222,"line":223},[220,77515,343],{"class":264},[220,77517,347],{"class":420},[220,77519,359],{"class":264},[220,77521,77522,77524,77526],{"class":222,"line":179},[220,77523,364],{"class":264},[220,77525,77431],{"class":420},[220,77527,386],{"class":264},[220,77529,77530,77532,77534],{"class":222,"line":389},[220,77531,402],{"class":264},[220,77533,347],{"class":420},[220,77535,359],{"class":264},[212,77537,77538],{"className":468,"code":77453,"language":469,"meta":178,"style":178},[99,77539,77540,77548,77556],{"__ignoreMap":178},[220,77541,77542,77544,77546],{"class":222,"line":223},[220,77543,343],{"class":264},[220,77545,347],{"class":420},[220,77547,359],{"class":264},[220,77549,77550,77552,77554],{"class":222,"line":179},[220,77551,364],{"class":264},[220,77553,77431],{"class":420},[220,77555,386],{"class":264},[220,77557,77558,77560,77562],{"class":222,"line":389},[220,77559,402],{"class":264},[220,77561,347],{"class":420},[220,77563,359],{"class":264},[212,77565,77567],{"className":251,"code":77566,"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,77568,77569,77579,77583,77597,77601,77610,77614],{"__ignoreMap":178},[220,77570,77571,77573,77575,77577],{"class":222,"line":223},[220,77572,261],{"class":260},[220,77574,11512],{"class":264},[220,77576,268],{"class":260},[220,77578,4007],{"class":230},[220,77580,77581],{"class":222,"line":179},[220,77582,647],{"emptyLinePlaceholder":194},[220,77584,77585,77587,77589,77591,77593,77595],{"class":222,"line":389},[220,77586,1735],{"class":260},[220,77588,1738],{"class":420},[220,77590,1741],{"class":260},[220,77592,1744],{"class":260},[220,77594,1747],{"class":226},[220,77596,1750],{"class":264},[220,77598,77599],{"class":222,"line":399},[220,77600,1765],{"class":264},[220,77602,77603,77605,77608],{"class":222,"line":644},[220,77604,1770],{"class":264},[220,77606,77607],{"class":230},"'TriangularGrid'",[220,77609,2465],{"class":264},[220,77611,77612],{"class":222,"line":650},[220,77613,1787],{"class":264},[220,77615,77616],{"class":222,"line":656},[220,77617,1792],{"class":264},[1504,77619,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77621},[77622,77623],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":77431,"description":77439},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":77630,"title":77631,"body":77632,"category":36368,"componentType":25883,"description":77639,"extension":191,"meta":77900,"navigation":194,"path":77901,"requiresChild":194,"seo":77902,"stem":77903,"__hash__":77904},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":77633,"toc":77896},[77634,77637,77640,77642,77644,77647,77649,77894],[11,77635,77631],{"id":77636},"tritone",[15,77638,77639],{},"Map colors to three tones: shadows, midtones, highlights",[31911,77641],{"component":77631},[23,77643,31915],{"id":26533},[31917,77645],{":props":77646},"[{\"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,77648,31923],{"id":31922},[246,77650,77651,77696,77740,77784,77828],{":tabs":1557},[212,77652,77654],{"className":334,"code":77653,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,77655,77656,77664,77672,77680,77688],{"__ignoreMap":178},[220,77657,77658,77660,77662],{"class":222,"line":223},[220,77659,343],{"class":264},[220,77661,347],{"class":346},[220,77663,359],{"class":264},[220,77665,77666,77668,77670],{"class":222,"line":179},[220,77667,364],{"class":264},[220,77669,77631],{"class":346},[220,77671,359],{"class":264},[220,77673,77674,77676,77678],{"class":222,"line":389},[220,77675,2550],{"class":264},[220,77677,2553],{"class":346},[220,77679,386],{"class":264},[220,77681,77682,77684,77686],{"class":222,"line":399},[220,77683,2567],{"class":264},[220,77685,77631],{"class":346},[220,77687,359],{"class":264},[220,77689,77690,77692,77694],{"class":222,"line":644},[220,77691,402],{"class":264},[220,77693,347],{"class":346},[220,77695,359],{"class":264},[212,77697,77698],{"className":409,"code":77653,"language":411,"meta":178,"style":178},[99,77699,77700,77708,77716,77724,77732],{"__ignoreMap":178},[220,77701,77702,77704,77706],{"class":222,"line":223},[220,77703,343],{"class":264},[220,77705,347],{"class":420},[220,77707,359],{"class":264},[220,77709,77710,77712,77714],{"class":222,"line":179},[220,77711,364],{"class":264},[220,77713,77631],{"class":420},[220,77715,359],{"class":264},[220,77717,77718,77720,77722],{"class":222,"line":389},[220,77719,2550],{"class":264},[220,77721,2553],{"class":420},[220,77723,386],{"class":264},[220,77725,77726,77728,77730],{"class":222,"line":399},[220,77727,2567],{"class":264},[220,77729,77631],{"class":420},[220,77731,359],{"class":264},[220,77733,77734,77736,77738],{"class":222,"line":644},[220,77735,402],{"class":264},[220,77737,347],{"class":420},[220,77739,359],{"class":264},[212,77741,77742],{"className":2844,"code":77653,"language":2846,"meta":178,"style":178},[99,77743,77744,77752,77760,77768,77776],{"__ignoreMap":178},[220,77745,77746,77748,77750],{"class":222,"line":223},[220,77747,343],{"class":264},[220,77749,347],{"class":420},[220,77751,359],{"class":264},[220,77753,77754,77756,77758],{"class":222,"line":179},[220,77755,364],{"class":264},[220,77757,77631],{"class":420},[220,77759,359],{"class":264},[220,77761,77762,77764,77766],{"class":222,"line":389},[220,77763,2550],{"class":264},[220,77765,2553],{"class":420},[220,77767,386],{"class":264},[220,77769,77770,77772,77774],{"class":222,"line":399},[220,77771,2567],{"class":264},[220,77773,77631],{"class":420},[220,77775,359],{"class":264},[220,77777,77778,77780,77782],{"class":222,"line":644},[220,77779,402],{"class":264},[220,77781,347],{"class":420},[220,77783,359],{"class":264},[212,77785,77786],{"className":468,"code":77653,"language":469,"meta":178,"style":178},[99,77787,77788,77796,77804,77812,77820],{"__ignoreMap":178},[220,77789,77790,77792,77794],{"class":222,"line":223},[220,77791,343],{"class":264},[220,77793,347],{"class":420},[220,77795,359],{"class":264},[220,77797,77798,77800,77802],{"class":222,"line":179},[220,77799,364],{"class":264},[220,77801,77631],{"class":420},[220,77803,359],{"class":264},[220,77805,77806,77808,77810],{"class":222,"line":389},[220,77807,2550],{"class":264},[220,77809,2553],{"class":420},[220,77811,386],{"class":264},[220,77813,77814,77816,77818],{"class":222,"line":399},[220,77815,2567],{"class":264},[220,77817,77631],{"class":420},[220,77819,359],{"class":264},[220,77821,77822,77824,77826],{"class":222,"line":644},[220,77823,402],{"class":264},[220,77825,347],{"class":420},[220,77827,359],{"class":264},[212,77829,77831],{"className":251,"code":77830,"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,77832,77833,77843,77847,77861,77865,77874,77882,77886,77890],{"__ignoreMap":178},[220,77834,77835,77837,77839,77841],{"class":222,"line":223},[220,77836,261],{"class":260},[220,77838,11512],{"class":264},[220,77840,268],{"class":260},[220,77842,4007],{"class":230},[220,77844,77845],{"class":222,"line":179},[220,77846,647],{"emptyLinePlaceholder":194},[220,77848,77849,77851,77853,77855,77857,77859],{"class":222,"line":389},[220,77850,1735],{"class":260},[220,77852,1738],{"class":420},[220,77854,1741],{"class":260},[220,77856,1744],{"class":260},[220,77858,1747],{"class":226},[220,77860,1750],{"class":264},[220,77862,77863],{"class":222,"line":399},[220,77864,1765],{"class":264},[220,77866,77867,77869,77872],{"class":222,"line":644},[220,77868,1770],{"class":264},[220,77870,77871],{"class":230},"'Tritone'",[220,77873,7009],{"class":264},[220,77875,77876,77878,77880],{"class":222,"line":650},[220,77877,7014],{"class":264},[220,77879,3206],{"class":230},[220,77881,2465],{"class":264},[220,77883,77884],{"class":222,"line":656},[220,77885,7031],{"class":264},[220,77887,77888],{"class":222,"line":673},[220,77889,1787],{"class":264},[220,77891,77892],{"class":222,"line":682},[220,77893,1792],{"class":264},[1504,77895,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77897},[77898,77899],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":77631,"description":77639},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":77906,"title":77907,"body":77908,"category":33063,"componentType":25877,"description":77915,"extension":191,"meta":78100,"navigation":194,"path":78101,"requiresChild":32530,"seo":78102,"stem":78103,"__hash__":78104},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":77909,"toc":78096},[77910,77913,77916,77918,77920,77923,77925,78094],[11,77911,77907],{"id":77912},"truchet",[15,77914,77915],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[31911,77917],{"component":77907},[23,77919,31915],{"id":26533},[31917,77921],{":props":77922},"[{\"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,77924,31923],{"id":31922},[246,77926,77927,77956,77984,78012,78040],{":tabs":1557},[212,77928,77930],{"className":334,"code":77929,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,77931,77932,77940,77948],{"__ignoreMap":178},[220,77933,77934,77936,77938],{"class":222,"line":223},[220,77935,343],{"class":264},[220,77937,347],{"class":346},[220,77939,359],{"class":264},[220,77941,77942,77944,77946],{"class":222,"line":179},[220,77943,364],{"class":264},[220,77945,77907],{"class":346},[220,77947,386],{"class":264},[220,77949,77950,77952,77954],{"class":222,"line":389},[220,77951,402],{"class":264},[220,77953,347],{"class":346},[220,77955,359],{"class":264},[212,77957,77958],{"className":409,"code":77929,"language":411,"meta":178,"style":178},[99,77959,77960,77968,77976],{"__ignoreMap":178},[220,77961,77962,77964,77966],{"class":222,"line":223},[220,77963,343],{"class":264},[220,77965,347],{"class":420},[220,77967,359],{"class":264},[220,77969,77970,77972,77974],{"class":222,"line":179},[220,77971,364],{"class":264},[220,77973,77907],{"class":420},[220,77975,386],{"class":264},[220,77977,77978,77980,77982],{"class":222,"line":389},[220,77979,402],{"class":264},[220,77981,347],{"class":420},[220,77983,359],{"class":264},[212,77985,77986],{"className":2844,"code":77929,"language":2846,"meta":178,"style":178},[99,77987,77988,77996,78004],{"__ignoreMap":178},[220,77989,77990,77992,77994],{"class":222,"line":223},[220,77991,343],{"class":264},[220,77993,347],{"class":420},[220,77995,359],{"class":264},[220,77997,77998,78000,78002],{"class":222,"line":179},[220,77999,364],{"class":264},[220,78001,77907],{"class":420},[220,78003,386],{"class":264},[220,78005,78006,78008,78010],{"class":222,"line":389},[220,78007,402],{"class":264},[220,78009,347],{"class":420},[220,78011,359],{"class":264},[212,78013,78014],{"className":468,"code":77929,"language":469,"meta":178,"style":178},[99,78015,78016,78024,78032],{"__ignoreMap":178},[220,78017,78018,78020,78022],{"class":222,"line":223},[220,78019,343],{"class":264},[220,78021,347],{"class":420},[220,78023,359],{"class":264},[220,78025,78026,78028,78030],{"class":222,"line":179},[220,78027,364],{"class":264},[220,78029,77907],{"class":420},[220,78031,386],{"class":264},[220,78033,78034,78036,78038],{"class":222,"line":389},[220,78035,402],{"class":264},[220,78037,347],{"class":420},[220,78039,359],{"class":264},[212,78041,78043],{"className":251,"code":78042,"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,78044,78045,78055,78059,78073,78077,78086,78090],{"__ignoreMap":178},[220,78046,78047,78049,78051,78053],{"class":222,"line":223},[220,78048,261],{"class":260},[220,78050,11512],{"class":264},[220,78052,268],{"class":260},[220,78054,4007],{"class":230},[220,78056,78057],{"class":222,"line":179},[220,78058,647],{"emptyLinePlaceholder":194},[220,78060,78061,78063,78065,78067,78069,78071],{"class":222,"line":389},[220,78062,1735],{"class":260},[220,78064,1738],{"class":420},[220,78066,1741],{"class":260},[220,78068,1744],{"class":260},[220,78070,1747],{"class":226},[220,78072,1750],{"class":264},[220,78074,78075],{"class":222,"line":399},[220,78076,1765],{"class":264},[220,78078,78079,78081,78084],{"class":222,"line":644},[220,78080,1770],{"class":264},[220,78082,78083],{"class":230},"'Truchet'",[220,78085,2465],{"class":264},[220,78087,78088],{"class":222,"line":650},[220,78089,1787],{"class":264},[220,78091,78092],{"class":222,"line":656},[220,78093,1792],{"class":264},[1504,78095,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":78097},[78098,78099],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":77907,"description":77915},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":78106,"title":78107,"body":78108,"category":33396,"componentType":25883,"description":78115,"extension":191,"meta":78432,"navigation":194,"path":78433,"requiresChild":194,"seo":78434,"stem":78435,"__hash__":78436},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":78109,"toc":78428},[78110,78113,78116,78118,78120,78123,78125,78426],[11,78111,78107],{"id":78112},"twirl",[15,78114,78115],{},"Rotate and twist content around a center point",[31911,78117],{"component":78107},[23,78119,31915],{"id":26533},[31917,78121],{":props":78122},"[{\"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,78124,31923],{"id":31922},[246,78126,78127,78183,78242,78298,78356],{":tabs":1557},[212,78128,78130],{"className":334,"code":78129,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,78131,78132,78140,78147,78155,78159,78167,78175],{"__ignoreMap":178},[220,78133,78134,78136,78138],{"class":222,"line":223},[220,78135,343],{"class":264},[220,78137,347],{"class":346},[220,78139,359],{"class":264},[220,78141,78142,78144],{"class":222,"line":179},[220,78143,364],{"class":264},[220,78145,78146],{"class":346},"Twirl\n",[220,78148,78149,78151,78153],{"class":222,"line":389},[220,78150,20371],{"class":226},[220,78152,353],{"class":264},[220,78154,36625],{"class":230},[220,78156,78157],{"class":222,"line":399},[220,78158,31959],{"class":264},[220,78160,78161,78163,78165],{"class":222,"line":644},[220,78162,2550],{"class":264},[220,78164,2553],{"class":346},[220,78166,386],{"class":264},[220,78168,78169,78171,78173],{"class":222,"line":650},[220,78170,2567],{"class":264},[220,78172,78107],{"class":346},[220,78174,359],{"class":264},[220,78176,78177,78179,78181],{"class":222,"line":656},[220,78178,402],{"class":264},[220,78180,347],{"class":346},[220,78182,359],{"class":264},[212,78184,78186],{"className":409,"code":78185,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,78187,78188,78196,78202,78214,78218,78226,78234],{"__ignoreMap":178},[220,78189,78190,78192,78194],{"class":222,"line":223},[220,78191,343],{"class":264},[220,78193,347],{"class":420},[220,78195,359],{"class":264},[220,78197,78198,78200],{"class":222,"line":179},[220,78199,364],{"class":264},[220,78201,78146],{"class":420},[220,78203,78204,78206,78208,78210,78212],{"class":222,"line":389},[220,78205,20482],{"class":226},[220,78207,353],{"class":260},[220,78209,743],{"class":264},[220,78211,8677],{"class":420},[220,78213,749],{"class":264},[220,78215,78216],{"class":222,"line":399},[220,78217,31959],{"class":264},[220,78219,78220,78222,78224],{"class":222,"line":644},[220,78221,2550],{"class":264},[220,78223,2553],{"class":420},[220,78225,386],{"class":264},[220,78227,78228,78230,78232],{"class":222,"line":650},[220,78229,2567],{"class":264},[220,78231,78107],{"class":420},[220,78233,359],{"class":264},[220,78235,78236,78238,78240],{"class":222,"line":656},[220,78237,402],{"class":264},[220,78239,347],{"class":420},[220,78241,359],{"class":264},[212,78243,78244],{"className":2844,"code":78185,"language":2846,"meta":178,"style":178},[99,78245,78246,78254,78260,78270,78274,78282,78290],{"__ignoreMap":178},[220,78247,78248,78250,78252],{"class":222,"line":223},[220,78249,343],{"class":264},[220,78251,347],{"class":420},[220,78253,359],{"class":264},[220,78255,78256,78258],{"class":222,"line":179},[220,78257,364],{"class":264},[220,78259,78146],{"class":420},[220,78261,78262,78264,78266,78268],{"class":222,"line":389},[220,78263,20482],{"class":226},[220,78265,29871],{"class":264},[220,78267,8677],{"class":420},[220,78269,749],{"class":264},[220,78271,78272],{"class":222,"line":399},[220,78273,31959],{"class":264},[220,78275,78276,78278,78280],{"class":222,"line":644},[220,78277,2550],{"class":264},[220,78279,2553],{"class":420},[220,78281,386],{"class":264},[220,78283,78284,78286,78288],{"class":222,"line":650},[220,78285,2567],{"class":264},[220,78287,78107],{"class":420},[220,78289,359],{"class":264},[220,78291,78292,78294,78296],{"class":222,"line":656},[220,78293,402],{"class":264},[220,78295,347],{"class":420},[220,78297,359],{"class":264},[212,78299,78300],{"className":468,"code":78185,"language":469,"meta":178,"style":178},[99,78301,78302,78310,78316,78328,78332,78340,78348],{"__ignoreMap":178},[220,78303,78304,78306,78308],{"class":222,"line":223},[220,78305,343],{"class":264},[220,78307,347],{"class":420},[220,78309,359],{"class":264},[220,78311,78312,78314],{"class":222,"line":179},[220,78313,364],{"class":264},[220,78315,78146],{"class":420},[220,78317,78318,78320,78322,78324,78326],{"class":222,"line":389},[220,78319,20482],{"class":226},[220,78321,353],{"class":260},[220,78323,743],{"class":264},[220,78325,8677],{"class":420},[220,78327,749],{"class":264},[220,78329,78330],{"class":222,"line":399},[220,78331,31959],{"class":264},[220,78333,78334,78336,78338],{"class":222,"line":644},[220,78335,2550],{"class":264},[220,78337,2553],{"class":420},[220,78339,386],{"class":264},[220,78341,78342,78344,78346],{"class":222,"line":650},[220,78343,2567],{"class":264},[220,78345,78107],{"class":420},[220,78347,359],{"class":264},[220,78349,78350,78352,78354],{"class":222,"line":656},[220,78351,402],{"class":264},[220,78353,347],{"class":420},[220,78355,359],{"class":264},[212,78357,78359],{"className":251,"code":78358,"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,78360,78361,78371,78375,78389,78393,78406,78414,78418,78422],{"__ignoreMap":178},[220,78362,78363,78365,78367,78369],{"class":222,"line":223},[220,78364,261],{"class":260},[220,78366,11512],{"class":264},[220,78368,268],{"class":260},[220,78370,4007],{"class":230},[220,78372,78373],{"class":222,"line":179},[220,78374,647],{"emptyLinePlaceholder":194},[220,78376,78377,78379,78381,78383,78385,78387],{"class":222,"line":389},[220,78378,1735],{"class":260},[220,78380,1738],{"class":420},[220,78382,1741],{"class":260},[220,78384,1744],{"class":260},[220,78386,1747],{"class":226},[220,78388,1750],{"class":264},[220,78390,78391],{"class":222,"line":399},[220,78392,1765],{"class":264},[220,78394,78395,78397,78400,78402,78404],{"class":222,"line":644},[220,78396,1770],{"class":264},[220,78398,78399],{"class":230},"'Twirl'",[220,78401,32203],{"class":264},[220,78403,8677],{"class":420},[220,78405,7546],{"class":264},[220,78407,78408,78410,78412],{"class":222,"line":650},[220,78409,7014],{"class":264},[220,78411,3206],{"class":230},[220,78413,2465],{"class":264},[220,78415,78416],{"class":222,"line":656},[220,78417,7031],{"class":264},[220,78419,78420],{"class":222,"line":673},[220,78421,1787],{"class":264},[220,78423,78424],{"class":222,"line":682},[220,78425,1792],{"class":264},[1504,78427,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78429},[78430,78431],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":78107,"description":78115},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":78438,"title":78439,"body":78440,"category":32806,"componentType":25883,"description":78447,"extension":191,"meta":78708,"navigation":194,"path":78709,"requiresChild":194,"seo":78710,"stem":78711,"__hash__":78712},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":78441,"toc":78704},[78442,78445,78448,78450,78452,78455,78457,78702],[11,78443,78439],{"id":78444},"vhs",[15,78446,78447],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[31911,78449],{"component":78439},[23,78451,31915],{"id":26533},[31917,78453],{":props":78454},"[{\"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,78456,31923],{"id":31922},[246,78458,78459,78504,78548,78592,78636],{":tabs":1557},[212,78460,78462],{"className":334,"code":78461,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,78463,78464,78472,78480,78488,78496],{"__ignoreMap":178},[220,78465,78466,78468,78470],{"class":222,"line":223},[220,78467,343],{"class":264},[220,78469,347],{"class":346},[220,78471,359],{"class":264},[220,78473,78474,78476,78478],{"class":222,"line":179},[220,78475,364],{"class":264},[220,78477,78439],{"class":346},[220,78479,359],{"class":264},[220,78481,78482,78484,78486],{"class":222,"line":389},[220,78483,2550],{"class":264},[220,78485,2553],{"class":346},[220,78487,386],{"class":264},[220,78489,78490,78492,78494],{"class":222,"line":399},[220,78491,2567],{"class":264},[220,78493,78439],{"class":346},[220,78495,359],{"class":264},[220,78497,78498,78500,78502],{"class":222,"line":644},[220,78499,402],{"class":264},[220,78501,347],{"class":346},[220,78503,359],{"class":264},[212,78505,78506],{"className":409,"code":78461,"language":411,"meta":178,"style":178},[99,78507,78508,78516,78524,78532,78540],{"__ignoreMap":178},[220,78509,78510,78512,78514],{"class":222,"line":223},[220,78511,343],{"class":264},[220,78513,347],{"class":420},[220,78515,359],{"class":264},[220,78517,78518,78520,78522],{"class":222,"line":179},[220,78519,364],{"class":264},[220,78521,78439],{"class":420},[220,78523,359],{"class":264},[220,78525,78526,78528,78530],{"class":222,"line":389},[220,78527,2550],{"class":264},[220,78529,2553],{"class":420},[220,78531,386],{"class":264},[220,78533,78534,78536,78538],{"class":222,"line":399},[220,78535,2567],{"class":264},[220,78537,78439],{"class":420},[220,78539,359],{"class":264},[220,78541,78542,78544,78546],{"class":222,"line":644},[220,78543,402],{"class":264},[220,78545,347],{"class":420},[220,78547,359],{"class":264},[212,78549,78550],{"className":2844,"code":78461,"language":2846,"meta":178,"style":178},[99,78551,78552,78560,78568,78576,78584],{"__ignoreMap":178},[220,78553,78554,78556,78558],{"class":222,"line":223},[220,78555,343],{"class":264},[220,78557,347],{"class":420},[220,78559,359],{"class":264},[220,78561,78562,78564,78566],{"class":222,"line":179},[220,78563,364],{"class":264},[220,78565,78439],{"class":420},[220,78567,359],{"class":264},[220,78569,78570,78572,78574],{"class":222,"line":389},[220,78571,2550],{"class":264},[220,78573,2553],{"class":420},[220,78575,386],{"class":264},[220,78577,78578,78580,78582],{"class":222,"line":399},[220,78579,2567],{"class":264},[220,78581,78439],{"class":420},[220,78583,359],{"class":264},[220,78585,78586,78588,78590],{"class":222,"line":644},[220,78587,402],{"class":264},[220,78589,347],{"class":420},[220,78591,359],{"class":264},[212,78593,78594],{"className":468,"code":78461,"language":469,"meta":178,"style":178},[99,78595,78596,78604,78612,78620,78628],{"__ignoreMap":178},[220,78597,78598,78600,78602],{"class":222,"line":223},[220,78599,343],{"class":264},[220,78601,347],{"class":420},[220,78603,359],{"class":264},[220,78605,78606,78608,78610],{"class":222,"line":179},[220,78607,364],{"class":264},[220,78609,78439],{"class":420},[220,78611,359],{"class":264},[220,78613,78614,78616,78618],{"class":222,"line":389},[220,78615,2550],{"class":264},[220,78617,2553],{"class":420},[220,78619,386],{"class":264},[220,78621,78622,78624,78626],{"class":222,"line":399},[220,78623,2567],{"class":264},[220,78625,78439],{"class":420},[220,78627,359],{"class":264},[220,78629,78630,78632,78634],{"class":222,"line":644},[220,78631,402],{"class":264},[220,78633,347],{"class":420},[220,78635,359],{"class":264},[212,78637,78639],{"className":251,"code":78638,"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,78640,78641,78651,78655,78669,78673,78682,78690,78694,78698],{"__ignoreMap":178},[220,78642,78643,78645,78647,78649],{"class":222,"line":223},[220,78644,261],{"class":260},[220,78646,11512],{"class":264},[220,78648,268],{"class":260},[220,78650,4007],{"class":230},[220,78652,78653],{"class":222,"line":179},[220,78654,647],{"emptyLinePlaceholder":194},[220,78656,78657,78659,78661,78663,78665,78667],{"class":222,"line":389},[220,78658,1735],{"class":260},[220,78660,1738],{"class":420},[220,78662,1741],{"class":260},[220,78664,1744],{"class":260},[220,78666,1747],{"class":226},[220,78668,1750],{"class":264},[220,78670,78671],{"class":222,"line":399},[220,78672,1765],{"class":264},[220,78674,78675,78677,78680],{"class":222,"line":644},[220,78676,1770],{"class":264},[220,78678,78679],{"class":230},"'VHS'",[220,78681,7009],{"class":264},[220,78683,78684,78686,78688],{"class":222,"line":650},[220,78685,7014],{"class":264},[220,78687,3206],{"class":230},[220,78689,2465],{"class":264},[220,78691,78692],{"class":222,"line":656},[220,78693,7031],{"class":264},[220,78695,78696],{"class":222,"line":673},[220,78697,1787],{"class":264},[220,78699,78700],{"class":222,"line":682},[220,78701,1792],{"class":264},[1504,78703,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":78705},[78706,78707],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":78439,"description":78447},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":78714,"title":78715,"body":78716,"category":33673,"componentType":25883,"description":78723,"extension":191,"meta":78984,"navigation":194,"path":78985,"requiresChild":194,"seo":78986,"stem":78987,"__hash__":78988},"components\u002Fdocs\u002Fcomponents\u002FVenetianBlinds.md","VenetianBlinds",{"type":8,"value":78717,"toc":78980},[78718,78721,78724,78726,78728,78731,78733,78978],[11,78719,78715],{"id":78720},"venetianblinds",[15,78722,78723],{},"Wipe the content away behind a set of parallel closing strips",[31911,78725],{"component":78715},[23,78727,31915],{"id":26533},[31917,78729],{":props":78730},"[{\"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,78732,31923],{"id":31922},[246,78734,78735,78780,78824,78868,78912],{":tabs":1557},[212,78736,78738],{"className":334,"code":78737,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVenetianBlinds>\n \u003CCircle \u002F>\n \u003C\u002FVenetianBlinds>\n\u003C\u002FShader>\n",[99,78739,78740,78748,78756,78764,78772],{"__ignoreMap":178},[220,78741,78742,78744,78746],{"class":222,"line":223},[220,78743,343],{"class":264},[220,78745,347],{"class":346},[220,78747,359],{"class":264},[220,78749,78750,78752,78754],{"class":222,"line":179},[220,78751,364],{"class":264},[220,78753,78715],{"class":346},[220,78755,359],{"class":264},[220,78757,78758,78760,78762],{"class":222,"line":389},[220,78759,2550],{"class":264},[220,78761,2553],{"class":346},[220,78763,386],{"class":264},[220,78765,78766,78768,78770],{"class":222,"line":399},[220,78767,2567],{"class":264},[220,78769,78715],{"class":346},[220,78771,359],{"class":264},[220,78773,78774,78776,78778],{"class":222,"line":644},[220,78775,402],{"class":264},[220,78777,347],{"class":346},[220,78779,359],{"class":264},[212,78781,78782],{"className":409,"code":78737,"language":411,"meta":178,"style":178},[99,78783,78784,78792,78800,78808,78816],{"__ignoreMap":178},[220,78785,78786,78788,78790],{"class":222,"line":223},[220,78787,343],{"class":264},[220,78789,347],{"class":420},[220,78791,359],{"class":264},[220,78793,78794,78796,78798],{"class":222,"line":179},[220,78795,364],{"class":264},[220,78797,78715],{"class":420},[220,78799,359],{"class":264},[220,78801,78802,78804,78806],{"class":222,"line":389},[220,78803,2550],{"class":264},[220,78805,2553],{"class":420},[220,78807,386],{"class":264},[220,78809,78810,78812,78814],{"class":222,"line":399},[220,78811,2567],{"class":264},[220,78813,78715],{"class":420},[220,78815,359],{"class":264},[220,78817,78818,78820,78822],{"class":222,"line":644},[220,78819,402],{"class":264},[220,78821,347],{"class":420},[220,78823,359],{"class":264},[212,78825,78826],{"className":2844,"code":78737,"language":2846,"meta":178,"style":178},[99,78827,78828,78836,78844,78852,78860],{"__ignoreMap":178},[220,78829,78830,78832,78834],{"class":222,"line":223},[220,78831,343],{"class":264},[220,78833,347],{"class":420},[220,78835,359],{"class":264},[220,78837,78838,78840,78842],{"class":222,"line":179},[220,78839,364],{"class":264},[220,78841,78715],{"class":420},[220,78843,359],{"class":264},[220,78845,78846,78848,78850],{"class":222,"line":389},[220,78847,2550],{"class":264},[220,78849,2553],{"class":420},[220,78851,386],{"class":264},[220,78853,78854,78856,78858],{"class":222,"line":399},[220,78855,2567],{"class":264},[220,78857,78715],{"class":420},[220,78859,359],{"class":264},[220,78861,78862,78864,78866],{"class":222,"line":644},[220,78863,402],{"class":264},[220,78865,347],{"class":420},[220,78867,359],{"class":264},[212,78869,78870],{"className":468,"code":78737,"language":469,"meta":178,"style":178},[99,78871,78872,78880,78888,78896,78904],{"__ignoreMap":178},[220,78873,78874,78876,78878],{"class":222,"line":223},[220,78875,343],{"class":264},[220,78877,347],{"class":420},[220,78879,359],{"class":264},[220,78881,78882,78884,78886],{"class":222,"line":179},[220,78883,364],{"class":264},[220,78885,78715],{"class":420},[220,78887,359],{"class":264},[220,78889,78890,78892,78894],{"class":222,"line":389},[220,78891,2550],{"class":264},[220,78893,2553],{"class":420},[220,78895,386],{"class":264},[220,78897,78898,78900,78902],{"class":222,"line":399},[220,78899,2567],{"class":264},[220,78901,78715],{"class":420},[220,78903,359],{"class":264},[220,78905,78906,78908,78910],{"class":222,"line":644},[220,78907,402],{"class":264},[220,78909,347],{"class":420},[220,78911,359],{"class":264},[212,78913,78915],{"className":251,"code":78914,"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,78916,78917,78927,78931,78945,78949,78958,78966,78970,78974],{"__ignoreMap":178},[220,78918,78919,78921,78923,78925],{"class":222,"line":223},[220,78920,261],{"class":260},[220,78922,11512],{"class":264},[220,78924,268],{"class":260},[220,78926,4007],{"class":230},[220,78928,78929],{"class":222,"line":179},[220,78930,647],{"emptyLinePlaceholder":194},[220,78932,78933,78935,78937,78939,78941,78943],{"class":222,"line":389},[220,78934,1735],{"class":260},[220,78936,1738],{"class":420},[220,78938,1741],{"class":260},[220,78940,1744],{"class":260},[220,78942,1747],{"class":226},[220,78944,1750],{"class":264},[220,78946,78947],{"class":222,"line":399},[220,78948,1765],{"class":264},[220,78950,78951,78953,78956],{"class":222,"line":644},[220,78952,1770],{"class":264},[220,78954,78955],{"class":230},"'VenetianBlinds'",[220,78957,7009],{"class":264},[220,78959,78960,78962,78964],{"class":222,"line":650},[220,78961,7014],{"class":264},[220,78963,3206],{"class":230},[220,78965,2465],{"class":264},[220,78967,78968],{"class":222,"line":656},[220,78969,7031],{"class":264},[220,78971,78972],{"class":222,"line":673},[220,78973,1787],{"class":264},[220,78975,78976],{"class":222,"line":682},[220,78977,1792],{"class":264},[1504,78979,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":78981},[78982,78983],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvenetianblinds",{"title":78715,"description":78723},"docs\u002Fcomponents\u002FVenetianBlinds","8-qPMX2YWIT5WLSW0uX6dk_pMBAHnuGY__KnerJvx9c",{"id":78990,"title":78991,"body":78992,"category":15908,"componentType":25877,"description":78999,"extension":191,"meta":79276,"navigation":194,"path":79277,"requiresChild":32530,"seo":79278,"stem":79279,"__hash__":79280},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":78993,"toc":79272},[78994,78997,79000,79002,79004,79007,79009,79270],[11,78995,78991],{"id":78996},"vesica",[15,78998,78999],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[31911,79001],{"component":78991},[23,79003,31915],{"id":26533},[31917,79005],{":props":79006},"[{\"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,79008,31923],{"id":31922},[246,79010,79011,79059,79110,79158,79208],{":tabs":1557},[212,79012,79014],{"className":334,"code":79013,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,79015,79016,79024,79031,79039,79047,79051],{"__ignoreMap":178},[220,79017,79018,79020,79022],{"class":222,"line":223},[220,79019,343],{"class":264},[220,79021,347],{"class":346},[220,79023,359],{"class":264},[220,79025,79026,79028],{"class":222,"line":179},[220,79027,364],{"class":264},[220,79029,79030],{"class":346},"Vesica\n",[220,79032,79033,79035,79037],{"class":222,"line":389},[220,79034,9635],{"class":226},[220,79036,353],{"class":264},[220,79038,9591],{"class":230},[220,79040,79041,79043,79045],{"class":222,"line":399},[220,79042,17405],{"class":226},[220,79044,353],{"class":264},[220,79046,41591],{"class":230},[220,79048,79049],{"class":222,"line":644},[220,79050,1234],{"class":264},[220,79052,79053,79055,79057],{"class":222,"line":650},[220,79054,402],{"class":264},[220,79056,347],{"class":346},[220,79058,359],{"class":264},[212,79060,79062],{"className":409,"code":79061,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,79063,79064,79072,79078,79086,79098,79102],{"__ignoreMap":178},[220,79065,79066,79068,79070],{"class":222,"line":223},[220,79067,343],{"class":264},[220,79069,347],{"class":420},[220,79071,359],{"class":264},[220,79073,79074,79076],{"class":222,"line":179},[220,79075,364],{"class":264},[220,79077,79030],{"class":420},[220,79079,79080,79082,79084],{"class":222,"line":389},[220,79081,9635],{"class":226},[220,79083,353],{"class":260},[220,79085,9591],{"class":230},[220,79087,79088,79090,79092,79094,79096],{"class":222,"line":399},[220,79089,9645],{"class":226},[220,79091,353],{"class":260},[220,79093,743],{"class":264},[220,79095,21148],{"class":420},[220,79097,749],{"class":264},[220,79099,79100],{"class":222,"line":644},[220,79101,1234],{"class":264},[220,79103,79104,79106,79108],{"class":222,"line":650},[220,79105,402],{"class":264},[220,79107,347],{"class":420},[220,79109,359],{"class":264},[212,79111,79112],{"className":2844,"code":79061,"language":2846,"meta":178,"style":178},[99,79113,79114,79122,79128,79136,79146,79150],{"__ignoreMap":178},[220,79115,79116,79118,79120],{"class":222,"line":223},[220,79117,343],{"class":264},[220,79119,347],{"class":420},[220,79121,359],{"class":264},[220,79123,79124,79126],{"class":222,"line":179},[220,79125,364],{"class":264},[220,79127,79030],{"class":420},[220,79129,79130,79132,79134],{"class":222,"line":389},[220,79131,9635],{"class":226},[220,79133,353],{"class":264},[220,79135,9591],{"class":230},[220,79137,79138,79140,79142,79144],{"class":222,"line":399},[220,79139,9645],{"class":226},[220,79141,29871],{"class":264},[220,79143,21148],{"class":420},[220,79145,749],{"class":264},[220,79147,79148],{"class":222,"line":644},[220,79149,1234],{"class":264},[220,79151,79152,79154,79156],{"class":222,"line":650},[220,79153,402],{"class":264},[220,79155,347],{"class":420},[220,79157,359],{"class":264},[212,79159,79160],{"className":468,"code":79061,"language":469,"meta":178,"style":178},[99,79161,79162,79170,79176,79184,79196,79200],{"__ignoreMap":178},[220,79163,79164,79166,79168],{"class":222,"line":223},[220,79165,343],{"class":264},[220,79167,347],{"class":420},[220,79169,359],{"class":264},[220,79171,79172,79174],{"class":222,"line":179},[220,79173,364],{"class":264},[220,79175,79030],{"class":420},[220,79177,79178,79180,79182],{"class":222,"line":389},[220,79179,9635],{"class":226},[220,79181,353],{"class":260},[220,79183,9591],{"class":230},[220,79185,79186,79188,79190,79192,79194],{"class":222,"line":399},[220,79187,9645],{"class":226},[220,79189,353],{"class":260},[220,79191,743],{"class":264},[220,79193,21148],{"class":420},[220,79195,749],{"class":264},[220,79197,79198],{"class":222,"line":644},[220,79199,1234],{"class":264},[220,79201,79202,79204,79206],{"class":222,"line":650},[220,79203,402],{"class":264},[220,79205,347],{"class":420},[220,79207,359],{"class":264},[212,79209,79211],{"className":251,"code":79210,"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,79212,79213,79223,79227,79241,79245,79262,79266],{"__ignoreMap":178},[220,79214,79215,79217,79219,79221],{"class":222,"line":223},[220,79216,261],{"class":260},[220,79218,11512],{"class":264},[220,79220,268],{"class":260},[220,79222,4007],{"class":230},[220,79224,79225],{"class":222,"line":179},[220,79226,647],{"emptyLinePlaceholder":194},[220,79228,79229,79231,79233,79235,79237,79239],{"class":222,"line":389},[220,79230,1735],{"class":260},[220,79232,1738],{"class":420},[220,79234,1741],{"class":260},[220,79236,1744],{"class":260},[220,79238,1747],{"class":226},[220,79240,1750],{"class":264},[220,79242,79243],{"class":222,"line":399},[220,79244,1765],{"class":264},[220,79246,79247,79249,79252,79254,79256,79258,79260],{"class":222,"line":644},[220,79248,1770],{"class":264},[220,79250,79251],{"class":230},"'Vesica'",[220,79253,1776],{"class":264},[220,79255,10169],{"class":230},[220,79257,6566],{"class":264},[220,79259,21148],{"class":420},[220,79261,1782],{"class":264},[220,79263,79264],{"class":222,"line":650},[220,79265,1787],{"class":264},[220,79267,79268],{"class":222,"line":656},[220,79269,1792],{"class":264},[1504,79271,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79273},[79274,79275],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":78991,"description":78999},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":79282,"title":79283,"body":79284,"category":36368,"componentType":25883,"description":79291,"extension":191,"meta":79609,"navigation":194,"path":79610,"requiresChild":194,"seo":79611,"stem":79612,"__hash__":79613},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":79285,"toc":79605},[79286,79289,79292,79294,79296,79299,79301,79603],[11,79287,79283],{"id":79288},"vibrance",[15,79290,79291],{},"Selective saturation adjustment protecting skin tones",[31911,79293],{"component":79283},[23,79295,31915],{"id":26533},[31917,79297],{":props":79298},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,79300,31923],{"id":31922},[246,79302,79303,79360,79419,79475,79533],{":tabs":1557},[212,79304,79306],{"className":334,"code":79305,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,79307,79308,79316,79323,79332,79336,79344,79352],{"__ignoreMap":178},[220,79309,79310,79312,79314],{"class":222,"line":223},[220,79311,343],{"class":264},[220,79313,347],{"class":346},[220,79315,359],{"class":264},[220,79317,79318,79320],{"class":222,"line":179},[220,79319,364],{"class":264},[220,79321,79322],{"class":346},"Vibrance\n",[220,79324,79325,79327,79329],{"class":222,"line":389},[220,79326,20371],{"class":226},[220,79328,353],{"class":264},[220,79330,79331],{"class":230},"\"0\"\n",[220,79333,79334],{"class":222,"line":399},[220,79335,31959],{"class":264},[220,79337,79338,79340,79342],{"class":222,"line":644},[220,79339,2550],{"class":264},[220,79341,2553],{"class":346},[220,79343,386],{"class":264},[220,79345,79346,79348,79350],{"class":222,"line":650},[220,79347,2567],{"class":264},[220,79349,79283],{"class":346},[220,79351,359],{"class":264},[220,79353,79354,79356,79358],{"class":222,"line":656},[220,79355,402],{"class":264},[220,79357,347],{"class":346},[220,79359,359],{"class":264},[212,79361,79363],{"className":409,"code":79362,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,79364,79365,79373,79379,79391,79395,79403,79411],{"__ignoreMap":178},[220,79366,79367,79369,79371],{"class":222,"line":223},[220,79368,343],{"class":264},[220,79370,347],{"class":420},[220,79372,359],{"class":264},[220,79374,79375,79377],{"class":222,"line":179},[220,79376,364],{"class":264},[220,79378,79322],{"class":420},[220,79380,79381,79383,79385,79387,79389],{"class":222,"line":389},[220,79382,20482],{"class":226},[220,79384,353],{"class":260},[220,79386,743],{"class":264},[220,79388,8673],{"class":420},[220,79390,749],{"class":264},[220,79392,79393],{"class":222,"line":399},[220,79394,31959],{"class":264},[220,79396,79397,79399,79401],{"class":222,"line":644},[220,79398,2550],{"class":264},[220,79400,2553],{"class":420},[220,79402,386],{"class":264},[220,79404,79405,79407,79409],{"class":222,"line":650},[220,79406,2567],{"class":264},[220,79408,79283],{"class":420},[220,79410,359],{"class":264},[220,79412,79413,79415,79417],{"class":222,"line":656},[220,79414,402],{"class":264},[220,79416,347],{"class":420},[220,79418,359],{"class":264},[212,79420,79421],{"className":2844,"code":79362,"language":2846,"meta":178,"style":178},[99,79422,79423,79431,79437,79447,79451,79459,79467],{"__ignoreMap":178},[220,79424,79425,79427,79429],{"class":222,"line":223},[220,79426,343],{"class":264},[220,79428,347],{"class":420},[220,79430,359],{"class":264},[220,79432,79433,79435],{"class":222,"line":179},[220,79434,364],{"class":264},[220,79436,79322],{"class":420},[220,79438,79439,79441,79443,79445],{"class":222,"line":389},[220,79440,20482],{"class":226},[220,79442,29871],{"class":264},[220,79444,8673],{"class":420},[220,79446,749],{"class":264},[220,79448,79449],{"class":222,"line":399},[220,79450,31959],{"class":264},[220,79452,79453,79455,79457],{"class":222,"line":644},[220,79454,2550],{"class":264},[220,79456,2553],{"class":420},[220,79458,386],{"class":264},[220,79460,79461,79463,79465],{"class":222,"line":650},[220,79462,2567],{"class":264},[220,79464,79283],{"class":420},[220,79466,359],{"class":264},[220,79468,79469,79471,79473],{"class":222,"line":656},[220,79470,402],{"class":264},[220,79472,347],{"class":420},[220,79474,359],{"class":264},[212,79476,79477],{"className":468,"code":79362,"language":469,"meta":178,"style":178},[99,79478,79479,79487,79493,79505,79509,79517,79525],{"__ignoreMap":178},[220,79480,79481,79483,79485],{"class":222,"line":223},[220,79482,343],{"class":264},[220,79484,347],{"class":420},[220,79486,359],{"class":264},[220,79488,79489,79491],{"class":222,"line":179},[220,79490,364],{"class":264},[220,79492,79322],{"class":420},[220,79494,79495,79497,79499,79501,79503],{"class":222,"line":389},[220,79496,20482],{"class":226},[220,79498,353],{"class":260},[220,79500,743],{"class":264},[220,79502,8673],{"class":420},[220,79504,749],{"class":264},[220,79506,79507],{"class":222,"line":399},[220,79508,31959],{"class":264},[220,79510,79511,79513,79515],{"class":222,"line":644},[220,79512,2550],{"class":264},[220,79514,2553],{"class":420},[220,79516,386],{"class":264},[220,79518,79519,79521,79523],{"class":222,"line":650},[220,79520,2567],{"class":264},[220,79522,79283],{"class":420},[220,79524,359],{"class":264},[220,79526,79527,79529,79531],{"class":222,"line":656},[220,79528,402],{"class":264},[220,79530,347],{"class":420},[220,79532,359],{"class":264},[212,79534,79536],{"className":251,"code":79535,"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,79537,79538,79548,79552,79566,79570,79583,79591,79595,79599],{"__ignoreMap":178},[220,79539,79540,79542,79544,79546],{"class":222,"line":223},[220,79541,261],{"class":260},[220,79543,11512],{"class":264},[220,79545,268],{"class":260},[220,79547,4007],{"class":230},[220,79549,79550],{"class":222,"line":179},[220,79551,647],{"emptyLinePlaceholder":194},[220,79553,79554,79556,79558,79560,79562,79564],{"class":222,"line":389},[220,79555,1735],{"class":260},[220,79557,1738],{"class":420},[220,79559,1741],{"class":260},[220,79561,1744],{"class":260},[220,79563,1747],{"class":226},[220,79565,1750],{"class":264},[220,79567,79568],{"class":222,"line":399},[220,79569,1765],{"class":264},[220,79571,79572,79574,79577,79579,79581],{"class":222,"line":644},[220,79573,1770],{"class":264},[220,79575,79576],{"class":230},"'Vibrance'",[220,79578,32203],{"class":264},[220,79580,8673],{"class":420},[220,79582,7546],{"class":264},[220,79584,79585,79587,79589],{"class":222,"line":650},[220,79586,7014],{"class":264},[220,79588,3206],{"class":230},[220,79590,2465],{"class":264},[220,79592,79593],{"class":222,"line":656},[220,79594,7031],{"class":264},[220,79596,79597],{"class":222,"line":673},[220,79598,1787],{"class":264},[220,79600,79601],{"class":222,"line":682},[220,79602,1792],{"class":264},[1504,79604,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79606},[79607,79608],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":79283,"description":79291},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":79615,"title":79616,"body":79617,"category":33063,"componentType":25877,"description":79624,"extension":191,"meta":79809,"navigation":194,"path":79810,"requiresChild":32530,"seo":79811,"stem":79812,"__hash__":79813},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":79618,"toc":79805},[79619,79622,79625,79627,79629,79632,79634,79803],[11,79620,79616],{"id":79621},"videotexture",[15,79623,79624],{},"Display a video with customizable playback and object-fit modes",[31911,79626],{"component":79616},[23,79628,31915],{"id":26533},[31917,79630],{":props":79631},"[{\"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,79633,31923],{"id":31922},[246,79635,79636,79665,79693,79721,79749],{":tabs":1557},[212,79637,79639],{"className":334,"code":79638,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,79640,79641,79649,79657],{"__ignoreMap":178},[220,79642,79643,79645,79647],{"class":222,"line":223},[220,79644,343],{"class":264},[220,79646,347],{"class":346},[220,79648,359],{"class":264},[220,79650,79651,79653,79655],{"class":222,"line":179},[220,79652,364],{"class":264},[220,79654,79616],{"class":346},[220,79656,386],{"class":264},[220,79658,79659,79661,79663],{"class":222,"line":389},[220,79660,402],{"class":264},[220,79662,347],{"class":346},[220,79664,359],{"class":264},[212,79666,79667],{"className":409,"code":79638,"language":411,"meta":178,"style":178},[99,79668,79669,79677,79685],{"__ignoreMap":178},[220,79670,79671,79673,79675],{"class":222,"line":223},[220,79672,343],{"class":264},[220,79674,347],{"class":420},[220,79676,359],{"class":264},[220,79678,79679,79681,79683],{"class":222,"line":179},[220,79680,364],{"class":264},[220,79682,79616],{"class":420},[220,79684,386],{"class":264},[220,79686,79687,79689,79691],{"class":222,"line":389},[220,79688,402],{"class":264},[220,79690,347],{"class":420},[220,79692,359],{"class":264},[212,79694,79695],{"className":2844,"code":79638,"language":2846,"meta":178,"style":178},[99,79696,79697,79705,79713],{"__ignoreMap":178},[220,79698,79699,79701,79703],{"class":222,"line":223},[220,79700,343],{"class":264},[220,79702,347],{"class":420},[220,79704,359],{"class":264},[220,79706,79707,79709,79711],{"class":222,"line":179},[220,79708,364],{"class":264},[220,79710,79616],{"class":420},[220,79712,386],{"class":264},[220,79714,79715,79717,79719],{"class":222,"line":389},[220,79716,402],{"class":264},[220,79718,347],{"class":420},[220,79720,359],{"class":264},[212,79722,79723],{"className":468,"code":79638,"language":469,"meta":178,"style":178},[99,79724,79725,79733,79741],{"__ignoreMap":178},[220,79726,79727,79729,79731],{"class":222,"line":223},[220,79728,343],{"class":264},[220,79730,347],{"class":420},[220,79732,359],{"class":264},[220,79734,79735,79737,79739],{"class":222,"line":179},[220,79736,364],{"class":264},[220,79738,79616],{"class":420},[220,79740,386],{"class":264},[220,79742,79743,79745,79747],{"class":222,"line":389},[220,79744,402],{"class":264},[220,79746,347],{"class":420},[220,79748,359],{"class":264},[212,79750,79752],{"className":251,"code":79751,"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,79753,79754,79764,79768,79782,79786,79795,79799],{"__ignoreMap":178},[220,79755,79756,79758,79760,79762],{"class":222,"line":223},[220,79757,261],{"class":260},[220,79759,11512],{"class":264},[220,79761,268],{"class":260},[220,79763,4007],{"class":230},[220,79765,79766],{"class":222,"line":179},[220,79767,647],{"emptyLinePlaceholder":194},[220,79769,79770,79772,79774,79776,79778,79780],{"class":222,"line":389},[220,79771,1735],{"class":260},[220,79773,1738],{"class":420},[220,79775,1741],{"class":260},[220,79777,1744],{"class":260},[220,79779,1747],{"class":226},[220,79781,1750],{"class":264},[220,79783,79784],{"class":222,"line":399},[220,79785,1765],{"class":264},[220,79787,79788,79790,79793],{"class":222,"line":644},[220,79789,1770],{"class":264},[220,79791,79792],{"class":230},"'VideoTexture'",[220,79794,2465],{"class":264},[220,79796,79797],{"class":222,"line":650},[220,79798,1787],{"class":264},[220,79800,79801],{"class":222,"line":656},[220,79802,1792],{"class":264},[1504,79804,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":79806},[79807,79808],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":79616,"description":79624},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":79815,"title":79816,"body":79817,"category":32806,"componentType":25883,"description":79824,"extension":191,"meta":80223,"navigation":194,"path":80224,"requiresChild":194,"seo":80225,"stem":80226,"__hash__":80227},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":79818,"toc":80219},[79819,79822,79825,79827,79829,79832,79834,80217],[11,79820,79816],{"id":79821},"vignette",[15,79823,79824],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[31911,79826],{"component":79816},[23,79828,31915],{"id":26533},[31917,79830],{":props":79831},"[{\"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,79833,31923],{"id":31922},[246,79835,79836,79908,79987,80061,80139],{":tabs":1557},[212,79837,79839],{"className":334,"code":79838,"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,79840,79841,79849,79856,79864,79872,79880,79884,79892,79900],{"__ignoreMap":178},[220,79842,79843,79845,79847],{"class":222,"line":223},[220,79844,343],{"class":264},[220,79846,347],{"class":346},[220,79848,359],{"class":264},[220,79850,79851,79853],{"class":222,"line":179},[220,79852,364],{"class":264},[220,79854,79855],{"class":346},"Vignette\n",[220,79857,79858,79860,79862],{"class":222,"line":389},[220,79859,9635],{"class":226},[220,79861,353],{"class":264},[220,79863,19474],{"class":230},[220,79865,79866,79868,79870],{"class":222,"line":399},[220,79867,17405],{"class":226},[220,79869,353],{"class":264},[220,79871,42358],{"class":230},[220,79873,79874,79876,79878],{"class":222,"line":644},[220,79875,20371],{"class":226},[220,79877,353],{"class":264},[220,79879,36625],{"class":230},[220,79881,79882],{"class":222,"line":650},[220,79883,31959],{"class":264},[220,79885,79886,79888,79890],{"class":222,"line":656},[220,79887,2550],{"class":264},[220,79889,2553],{"class":346},[220,79891,386],{"class":264},[220,79893,79894,79896,79898],{"class":222,"line":673},[220,79895,2567],{"class":264},[220,79897,79816],{"class":346},[220,79899,359],{"class":264},[220,79901,79902,79904,79906],{"class":222,"line":682},[220,79903,402],{"class":264},[220,79905,347],{"class":346},[220,79907,359],{"class":264},[212,79909,79911],{"className":409,"code":79910,"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,79912,79913,79921,79927,79935,79947,79959,79963,79971,79979],{"__ignoreMap":178},[220,79914,79915,79917,79919],{"class":222,"line":223},[220,79916,343],{"class":264},[220,79918,347],{"class":420},[220,79920,359],{"class":264},[220,79922,79923,79925],{"class":222,"line":179},[220,79924,364],{"class":264},[220,79926,79855],{"class":420},[220,79928,79929,79931,79933],{"class":222,"line":389},[220,79930,9635],{"class":226},[220,79932,353],{"class":260},[220,79934,19474],{"class":230},[220,79936,79937,79939,79941,79943,79945],{"class":222,"line":399},[220,79938,9645],{"class":226},[220,79940,353],{"class":260},[220,79942,743],{"class":264},[220,79944,7754],{"class":420},[220,79946,749],{"class":264},[220,79948,79949,79951,79953,79955,79957],{"class":222,"line":644},[220,79950,20482],{"class":226},[220,79952,353],{"class":260},[220,79954,743],{"class":264},[220,79956,8677],{"class":420},[220,79958,749],{"class":264},[220,79960,79961],{"class":222,"line":650},[220,79962,31959],{"class":264},[220,79964,79965,79967,79969],{"class":222,"line":656},[220,79966,2550],{"class":264},[220,79968,2553],{"class":420},[220,79970,386],{"class":264},[220,79972,79973,79975,79977],{"class":222,"line":673},[220,79974,2567],{"class":264},[220,79976,79816],{"class":420},[220,79978,359],{"class":264},[220,79980,79981,79983,79985],{"class":222,"line":682},[220,79982,402],{"class":264},[220,79984,347],{"class":420},[220,79986,359],{"class":264},[212,79988,79989],{"className":2844,"code":79910,"language":2846,"meta":178,"style":178},[99,79990,79991,79999,80005,80013,80023,80033,80037,80045,80053],{"__ignoreMap":178},[220,79992,79993,79995,79997],{"class":222,"line":223},[220,79994,343],{"class":264},[220,79996,347],{"class":420},[220,79998,359],{"class":264},[220,80000,80001,80003],{"class":222,"line":179},[220,80002,364],{"class":264},[220,80004,79855],{"class":420},[220,80006,80007,80009,80011],{"class":222,"line":389},[220,80008,9635],{"class":226},[220,80010,353],{"class":264},[220,80012,19474],{"class":230},[220,80014,80015,80017,80019,80021],{"class":222,"line":399},[220,80016,9645],{"class":226},[220,80018,29871],{"class":264},[220,80020,7754],{"class":420},[220,80022,749],{"class":264},[220,80024,80025,80027,80029,80031],{"class":222,"line":644},[220,80026,20482],{"class":226},[220,80028,29871],{"class":264},[220,80030,8677],{"class":420},[220,80032,749],{"class":264},[220,80034,80035],{"class":222,"line":650},[220,80036,31959],{"class":264},[220,80038,80039,80041,80043],{"class":222,"line":656},[220,80040,2550],{"class":264},[220,80042,2553],{"class":420},[220,80044,386],{"class":264},[220,80046,80047,80049,80051],{"class":222,"line":673},[220,80048,2567],{"class":264},[220,80050,79816],{"class":420},[220,80052,359],{"class":264},[220,80054,80055,80057,80059],{"class":222,"line":682},[220,80056,402],{"class":264},[220,80058,347],{"class":420},[220,80060,359],{"class":264},[212,80062,80063],{"className":468,"code":79910,"language":469,"meta":178,"style":178},[99,80064,80065,80073,80079,80087,80099,80111,80115,80123,80131],{"__ignoreMap":178},[220,80066,80067,80069,80071],{"class":222,"line":223},[220,80068,343],{"class":264},[220,80070,347],{"class":420},[220,80072,359],{"class":264},[220,80074,80075,80077],{"class":222,"line":179},[220,80076,364],{"class":264},[220,80078,79855],{"class":420},[220,80080,80081,80083,80085],{"class":222,"line":389},[220,80082,9635],{"class":226},[220,80084,353],{"class":260},[220,80086,19474],{"class":230},[220,80088,80089,80091,80093,80095,80097],{"class":222,"line":399},[220,80090,9645],{"class":226},[220,80092,353],{"class":260},[220,80094,743],{"class":264},[220,80096,7754],{"class":420},[220,80098,749],{"class":264},[220,80100,80101,80103,80105,80107,80109],{"class":222,"line":644},[220,80102,20482],{"class":226},[220,80104,353],{"class":260},[220,80106,743],{"class":264},[220,80108,8677],{"class":420},[220,80110,749],{"class":264},[220,80112,80113],{"class":222,"line":650},[220,80114,31959],{"class":264},[220,80116,80117,80119,80121],{"class":222,"line":656},[220,80118,2550],{"class":264},[220,80120,2553],{"class":420},[220,80122,386],{"class":264},[220,80124,80125,80127,80129],{"class":222,"line":673},[220,80126,2567],{"class":264},[220,80128,79816],{"class":420},[220,80130,359],{"class":264},[220,80132,80133,80135,80137],{"class":222,"line":682},[220,80134,402],{"class":264},[220,80136,347],{"class":420},[220,80138,359],{"class":264},[212,80140,80142],{"className":251,"code":80141,"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,80143,80144,80154,80158,80172,80176,80197,80205,80209,80213],{"__ignoreMap":178},[220,80145,80146,80148,80150,80152],{"class":222,"line":223},[220,80147,261],{"class":260},[220,80149,11512],{"class":264},[220,80151,268],{"class":260},[220,80153,4007],{"class":230},[220,80155,80156],{"class":222,"line":179},[220,80157,647],{"emptyLinePlaceholder":194},[220,80159,80160,80162,80164,80166,80168,80170],{"class":222,"line":389},[220,80161,1735],{"class":260},[220,80163,1738],{"class":420},[220,80165,1741],{"class":260},[220,80167,1744],{"class":260},[220,80169,1747],{"class":226},[220,80171,1750],{"class":264},[220,80173,80174],{"class":222,"line":399},[220,80175,1765],{"class":264},[220,80177,80178,80180,80183,80185,80187,80189,80191,80193,80195],{"class":222,"line":644},[220,80179,1770],{"class":264},[220,80181,80182],{"class":230},"'Vignette'",[220,80184,1776],{"class":264},[220,80186,20034],{"class":230},[220,80188,6566],{"class":264},[220,80190,7754],{"class":420},[220,80192,45203],{"class":264},[220,80194,8677],{"class":420},[220,80196,7546],{"class":264},[220,80198,80199,80201,80203],{"class":222,"line":650},[220,80200,7014],{"class":264},[220,80202,3206],{"class":230},[220,80204,2465],{"class":264},[220,80206,80207],{"class":222,"line":656},[220,80208,7031],{"class":264},[220,80210,80211],{"class":222,"line":673},[220,80212,1787],{"class":264},[220,80214,80215],{"class":222,"line":682},[220,80216,1792],{"class":264},[1504,80218,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80220},[80221,80222],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":79816,"description":79824},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":80229,"title":80230,"body":80231,"category":33063,"componentType":25877,"description":80238,"extension":191,"meta":80423,"navigation":194,"path":80424,"requiresChild":32530,"seo":80425,"stem":80426,"__hash__":80427},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":80232,"toc":80419},[80233,80236,80239,80241,80243,80246,80248,80417],[11,80234,80230],{"id":80235},"voronoi",[15,80237,80238],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[31911,80240],{"component":80230},[23,80242,31915],{"id":26533},[31917,80244],{":props":80245},"[{\"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,80247,31923],{"id":31922},[246,80249,80250,80279,80307,80335,80363],{":tabs":1557},[212,80251,80253],{"className":334,"code":80252,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,80254,80255,80263,80271],{"__ignoreMap":178},[220,80256,80257,80259,80261],{"class":222,"line":223},[220,80258,343],{"class":264},[220,80260,347],{"class":346},[220,80262,359],{"class":264},[220,80264,80265,80267,80269],{"class":222,"line":179},[220,80266,364],{"class":264},[220,80268,80230],{"class":346},[220,80270,386],{"class":264},[220,80272,80273,80275,80277],{"class":222,"line":389},[220,80274,402],{"class":264},[220,80276,347],{"class":346},[220,80278,359],{"class":264},[212,80280,80281],{"className":409,"code":80252,"language":411,"meta":178,"style":178},[99,80282,80283,80291,80299],{"__ignoreMap":178},[220,80284,80285,80287,80289],{"class":222,"line":223},[220,80286,343],{"class":264},[220,80288,347],{"class":420},[220,80290,359],{"class":264},[220,80292,80293,80295,80297],{"class":222,"line":179},[220,80294,364],{"class":264},[220,80296,80230],{"class":420},[220,80298,386],{"class":264},[220,80300,80301,80303,80305],{"class":222,"line":389},[220,80302,402],{"class":264},[220,80304,347],{"class":420},[220,80306,359],{"class":264},[212,80308,80309],{"className":2844,"code":80252,"language":2846,"meta":178,"style":178},[99,80310,80311,80319,80327],{"__ignoreMap":178},[220,80312,80313,80315,80317],{"class":222,"line":223},[220,80314,343],{"class":264},[220,80316,347],{"class":420},[220,80318,359],{"class":264},[220,80320,80321,80323,80325],{"class":222,"line":179},[220,80322,364],{"class":264},[220,80324,80230],{"class":420},[220,80326,386],{"class":264},[220,80328,80329,80331,80333],{"class":222,"line":389},[220,80330,402],{"class":264},[220,80332,347],{"class":420},[220,80334,359],{"class":264},[212,80336,80337],{"className":468,"code":80252,"language":469,"meta":178,"style":178},[99,80338,80339,80347,80355],{"__ignoreMap":178},[220,80340,80341,80343,80345],{"class":222,"line":223},[220,80342,343],{"class":264},[220,80344,347],{"class":420},[220,80346,359],{"class":264},[220,80348,80349,80351,80353],{"class":222,"line":179},[220,80350,364],{"class":264},[220,80352,80230],{"class":420},[220,80354,386],{"class":264},[220,80356,80357,80359,80361],{"class":222,"line":389},[220,80358,402],{"class":264},[220,80360,347],{"class":420},[220,80362,359],{"class":264},[212,80364,80366],{"className":251,"code":80365,"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,80367,80368,80378,80382,80396,80400,80409,80413],{"__ignoreMap":178},[220,80369,80370,80372,80374,80376],{"class":222,"line":223},[220,80371,261],{"class":260},[220,80373,11512],{"class":264},[220,80375,268],{"class":260},[220,80377,4007],{"class":230},[220,80379,80380],{"class":222,"line":179},[220,80381,647],{"emptyLinePlaceholder":194},[220,80383,80384,80386,80388,80390,80392,80394],{"class":222,"line":389},[220,80385,1735],{"class":260},[220,80387,1738],{"class":420},[220,80389,1741],{"class":260},[220,80391,1744],{"class":260},[220,80393,1747],{"class":226},[220,80395,1750],{"class":264},[220,80397,80398],{"class":222,"line":399},[220,80399,1765],{"class":264},[220,80401,80402,80404,80407],{"class":222,"line":644},[220,80403,1770],{"class":264},[220,80405,80406],{"class":230},"'Voronoi'",[220,80408,2465],{"class":264},[220,80410,80411],{"class":222,"line":650},[220,80412,1787],{"class":264},[220,80414,80415],{"class":222,"line":656},[220,80416,1792],{"class":264},[1504,80418,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80420},[80421,80422],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":80230,"description":80238},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":80429,"title":80430,"body":80431,"category":36569,"componentType":25877,"description":80438,"extension":191,"meta":80623,"navigation":194,"path":80624,"requiresChild":32530,"seo":80625,"stem":80626,"__hash__":80627},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":80432,"toc":80619},[80433,80436,80439,80441,80443,80446,80448,80617],[11,80434,80430],{"id":80435},"water",[15,80437,80438],{},"Translucent water — a refractive, light-absorbing body that deepens to its colour with thickness, wrapped in a wind-driven wave surface that reflects a procedural sky, with Fresnel-bright grazing edges and foam breaking on the crests and shoreline",[31911,80440],{"component":80430},[23,80442,31915],{"id":26533},[31917,80444],{":props":80445},"[{\"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,80447,31923],{"id":31922},[246,80449,80450,80479,80507,80535,80563],{":tabs":1557},[212,80451,80453],{"className":334,"code":80452,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,80454,80455,80463,80471],{"__ignoreMap":178},[220,80456,80457,80459,80461],{"class":222,"line":223},[220,80458,343],{"class":264},[220,80460,347],{"class":346},[220,80462,359],{"class":264},[220,80464,80465,80467,80469],{"class":222,"line":179},[220,80466,364],{"class":264},[220,80468,80430],{"class":346},[220,80470,386],{"class":264},[220,80472,80473,80475,80477],{"class":222,"line":389},[220,80474,402],{"class":264},[220,80476,347],{"class":346},[220,80478,359],{"class":264},[212,80480,80481],{"className":409,"code":80452,"language":411,"meta":178,"style":178},[99,80482,80483,80491,80499],{"__ignoreMap":178},[220,80484,80485,80487,80489],{"class":222,"line":223},[220,80486,343],{"class":264},[220,80488,347],{"class":420},[220,80490,359],{"class":264},[220,80492,80493,80495,80497],{"class":222,"line":179},[220,80494,364],{"class":264},[220,80496,80430],{"class":420},[220,80498,386],{"class":264},[220,80500,80501,80503,80505],{"class":222,"line":389},[220,80502,402],{"class":264},[220,80504,347],{"class":420},[220,80506,359],{"class":264},[212,80508,80509],{"className":2844,"code":80452,"language":2846,"meta":178,"style":178},[99,80510,80511,80519,80527],{"__ignoreMap":178},[220,80512,80513,80515,80517],{"class":222,"line":223},[220,80514,343],{"class":264},[220,80516,347],{"class":420},[220,80518,359],{"class":264},[220,80520,80521,80523,80525],{"class":222,"line":179},[220,80522,364],{"class":264},[220,80524,80430],{"class":420},[220,80526,386],{"class":264},[220,80528,80529,80531,80533],{"class":222,"line":389},[220,80530,402],{"class":264},[220,80532,347],{"class":420},[220,80534,359],{"class":264},[212,80536,80537],{"className":468,"code":80452,"language":469,"meta":178,"style":178},[99,80538,80539,80547,80555],{"__ignoreMap":178},[220,80540,80541,80543,80545],{"class":222,"line":223},[220,80542,343],{"class":264},[220,80544,347],{"class":420},[220,80546,359],{"class":264},[220,80548,80549,80551,80553],{"class":222,"line":179},[220,80550,364],{"class":264},[220,80552,80430],{"class":420},[220,80554,386],{"class":264},[220,80556,80557,80559,80561],{"class":222,"line":389},[220,80558,402],{"class":264},[220,80560,347],{"class":420},[220,80562,359],{"class":264},[212,80564,80566],{"className":251,"code":80565,"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,80567,80568,80578,80582,80596,80600,80609,80613],{"__ignoreMap":178},[220,80569,80570,80572,80574,80576],{"class":222,"line":223},[220,80571,261],{"class":260},[220,80573,11512],{"class":264},[220,80575,268],{"class":260},[220,80577,4007],{"class":230},[220,80579,80580],{"class":222,"line":179},[220,80581,647],{"emptyLinePlaceholder":194},[220,80583,80584,80586,80588,80590,80592,80594],{"class":222,"line":389},[220,80585,1735],{"class":260},[220,80587,1738],{"class":420},[220,80589,1741],{"class":260},[220,80591,1744],{"class":260},[220,80593,1747],{"class":226},[220,80595,1750],{"class":264},[220,80597,80598],{"class":222,"line":399},[220,80599,1765],{"class":264},[220,80601,80602,80604,80607],{"class":222,"line":644},[220,80603,1770],{"class":264},[220,80605,80606],{"class":230},"'Water'",[220,80608,2465],{"class":264},[220,80610,80611],{"class":222,"line":650},[220,80612,1787],{"class":264},[220,80614,80615],{"class":222,"line":656},[220,80616,1792],{"class":264},[1504,80618,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80620},[80621,80622],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":80430,"description":80438},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":80629,"title":80630,"body":80631,"category":32806,"componentType":25883,"description":80638,"extension":191,"meta":80955,"navigation":194,"path":80956,"requiresChild":194,"seo":80957,"stem":80958,"__hash__":80959},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":80632,"toc":80951},[80633,80636,80639,80641,80643,80646,80648,80949],[11,80634,80630],{"id":80635},"watercolor",[15,80637,80638],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[31911,80640],{"component":80630},[23,80642,31915],{"id":26533},[31917,80644],{":props":80645},"[{\"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,80647,31923],{"id":31922},[246,80649,80650,80706,80765,80821,80879],{":tabs":1557},[212,80651,80653],{"className":334,"code":80652,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,80654,80655,80663,80670,80678,80682,80690,80698],{"__ignoreMap":178},[220,80656,80657,80659,80661],{"class":222,"line":223},[220,80658,343],{"class":264},[220,80660,347],{"class":346},[220,80662,359],{"class":264},[220,80664,80665,80667],{"class":222,"line":179},[220,80666,364],{"class":264},[220,80668,80669],{"class":346},"Watercolor\n",[220,80671,80672,80674,80676],{"class":222,"line":389},[220,80673,17405],{"class":226},[220,80675,353],{"class":264},[220,80677,38669],{"class":230},[220,80679,80680],{"class":222,"line":399},[220,80681,31959],{"class":264},[220,80683,80684,80686,80688],{"class":222,"line":644},[220,80685,2550],{"class":264},[220,80687,2553],{"class":346},[220,80689,386],{"class":264},[220,80691,80692,80694,80696],{"class":222,"line":650},[220,80693,2567],{"class":264},[220,80695,80630],{"class":346},[220,80697,359],{"class":264},[220,80699,80700,80702,80704],{"class":222,"line":656},[220,80701,402],{"class":264},[220,80703,347],{"class":346},[220,80705,359],{"class":264},[212,80707,80709],{"className":409,"code":80708,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,80710,80711,80719,80725,80737,80741,80749,80757],{"__ignoreMap":178},[220,80712,80713,80715,80717],{"class":222,"line":223},[220,80714,343],{"class":264},[220,80716,347],{"class":420},[220,80718,359],{"class":264},[220,80720,80721,80723],{"class":222,"line":179},[220,80722,364],{"class":264},[220,80724,80669],{"class":420},[220,80726,80727,80729,80731,80733,80735],{"class":222,"line":389},[220,80728,9645],{"class":226},[220,80730,353],{"class":260},[220,80732,743],{"class":264},[220,80734,38723],{"class":420},[220,80736,749],{"class":264},[220,80738,80739],{"class":222,"line":399},[220,80740,31959],{"class":264},[220,80742,80743,80745,80747],{"class":222,"line":644},[220,80744,2550],{"class":264},[220,80746,2553],{"class":420},[220,80748,386],{"class":264},[220,80750,80751,80753,80755],{"class":222,"line":650},[220,80752,2567],{"class":264},[220,80754,80630],{"class":420},[220,80756,359],{"class":264},[220,80758,80759,80761,80763],{"class":222,"line":656},[220,80760,402],{"class":264},[220,80762,347],{"class":420},[220,80764,359],{"class":264},[212,80766,80767],{"className":2844,"code":80708,"language":2846,"meta":178,"style":178},[99,80768,80769,80777,80783,80793,80797,80805,80813],{"__ignoreMap":178},[220,80770,80771,80773,80775],{"class":222,"line":223},[220,80772,343],{"class":264},[220,80774,347],{"class":420},[220,80776,359],{"class":264},[220,80778,80779,80781],{"class":222,"line":179},[220,80780,364],{"class":264},[220,80782,80669],{"class":420},[220,80784,80785,80787,80789,80791],{"class":222,"line":389},[220,80786,9645],{"class":226},[220,80788,29871],{"class":264},[220,80790,38723],{"class":420},[220,80792,749],{"class":264},[220,80794,80795],{"class":222,"line":399},[220,80796,31959],{"class":264},[220,80798,80799,80801,80803],{"class":222,"line":644},[220,80800,2550],{"class":264},[220,80802,2553],{"class":420},[220,80804,386],{"class":264},[220,80806,80807,80809,80811],{"class":222,"line":650},[220,80808,2567],{"class":264},[220,80810,80630],{"class":420},[220,80812,359],{"class":264},[220,80814,80815,80817,80819],{"class":222,"line":656},[220,80816,402],{"class":264},[220,80818,347],{"class":420},[220,80820,359],{"class":264},[212,80822,80823],{"className":468,"code":80708,"language":469,"meta":178,"style":178},[99,80824,80825,80833,80839,80851,80855,80863,80871],{"__ignoreMap":178},[220,80826,80827,80829,80831],{"class":222,"line":223},[220,80828,343],{"class":264},[220,80830,347],{"class":420},[220,80832,359],{"class":264},[220,80834,80835,80837],{"class":222,"line":179},[220,80836,364],{"class":264},[220,80838,80669],{"class":420},[220,80840,80841,80843,80845,80847,80849],{"class":222,"line":389},[220,80842,9645],{"class":226},[220,80844,353],{"class":260},[220,80846,743],{"class":264},[220,80848,38723],{"class":420},[220,80850,749],{"class":264},[220,80852,80853],{"class":222,"line":399},[220,80854,31959],{"class":264},[220,80856,80857,80859,80861],{"class":222,"line":644},[220,80858,2550],{"class":264},[220,80860,2553],{"class":420},[220,80862,386],{"class":264},[220,80864,80865,80867,80869],{"class":222,"line":650},[220,80866,2567],{"class":264},[220,80868,80630],{"class":420},[220,80870,359],{"class":264},[220,80872,80873,80875,80877],{"class":222,"line":656},[220,80874,402],{"class":264},[220,80876,347],{"class":420},[220,80878,359],{"class":264},[212,80880,80882],{"className":251,"code":80881,"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,80883,80884,80894,80898,80912,80916,80929,80937,80941,80945],{"__ignoreMap":178},[220,80885,80886,80888,80890,80892],{"class":222,"line":223},[220,80887,261],{"class":260},[220,80889,11512],{"class":264},[220,80891,268],{"class":260},[220,80893,4007],{"class":230},[220,80895,80896],{"class":222,"line":179},[220,80897,647],{"emptyLinePlaceholder":194},[220,80899,80900,80902,80904,80906,80908,80910],{"class":222,"line":389},[220,80901,1735],{"class":260},[220,80903,1738],{"class":420},[220,80905,1741],{"class":260},[220,80907,1744],{"class":260},[220,80909,1747],{"class":226},[220,80911,1750],{"class":264},[220,80913,80914],{"class":222,"line":399},[220,80915,1765],{"class":264},[220,80917,80918,80920,80923,80925,80927],{"class":222,"line":644},[220,80919,1770],{"class":264},[220,80921,80922],{"class":230},"'Watercolor'",[220,80924,7541],{"class":264},[220,80926,38723],{"class":420},[220,80928,7546],{"class":264},[220,80930,80931,80933,80935],{"class":222,"line":650},[220,80932,7014],{"class":264},[220,80934,3206],{"class":230},[220,80936,2465],{"class":264},[220,80938,80939],{"class":222,"line":656},[220,80940,7031],{"class":264},[220,80942,80943],{"class":222,"line":673},[220,80944,1787],{"class":264},[220,80946,80947],{"class":222,"line":682},[220,80948,1792],{"class":264},[1504,80950,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80952},[80953,80954],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":80630,"description":80638},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":80961,"title":80962,"body":80963,"category":33396,"componentType":25883,"description":80970,"extension":191,"meta":81231,"navigation":194,"path":81232,"requiresChild":194,"seo":81233,"stem":81234,"__hash__":81235},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":80964,"toc":81227},[80965,80968,80971,80973,80975,80978,80980,81225],[11,80966,80962],{"id":80967},"wavedistortion",[15,80969,80970],{},"Wave-based distortion with multiple waveform types",[31911,80972],{"component":80962},[23,80974,31915],{"id":26533},[31917,80976],{":props":80977},"[{\"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,80979,31923],{"id":31922},[246,80981,80982,81027,81071,81115,81159],{":tabs":1557},[212,80983,80985],{"className":334,"code":80984,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,80986,80987,80995,81003,81011,81019],{"__ignoreMap":178},[220,80988,80989,80991,80993],{"class":222,"line":223},[220,80990,343],{"class":264},[220,80992,347],{"class":346},[220,80994,359],{"class":264},[220,80996,80997,80999,81001],{"class":222,"line":179},[220,80998,364],{"class":264},[220,81000,80962],{"class":346},[220,81002,359],{"class":264},[220,81004,81005,81007,81009],{"class":222,"line":389},[220,81006,2550],{"class":264},[220,81008,2553],{"class":346},[220,81010,386],{"class":264},[220,81012,81013,81015,81017],{"class":222,"line":399},[220,81014,2567],{"class":264},[220,81016,80962],{"class":346},[220,81018,359],{"class":264},[220,81020,81021,81023,81025],{"class":222,"line":644},[220,81022,402],{"class":264},[220,81024,347],{"class":346},[220,81026,359],{"class":264},[212,81028,81029],{"className":409,"code":80984,"language":411,"meta":178,"style":178},[99,81030,81031,81039,81047,81055,81063],{"__ignoreMap":178},[220,81032,81033,81035,81037],{"class":222,"line":223},[220,81034,343],{"class":264},[220,81036,347],{"class":420},[220,81038,359],{"class":264},[220,81040,81041,81043,81045],{"class":222,"line":179},[220,81042,364],{"class":264},[220,81044,80962],{"class":420},[220,81046,359],{"class":264},[220,81048,81049,81051,81053],{"class":222,"line":389},[220,81050,2550],{"class":264},[220,81052,2553],{"class":420},[220,81054,386],{"class":264},[220,81056,81057,81059,81061],{"class":222,"line":399},[220,81058,2567],{"class":264},[220,81060,80962],{"class":420},[220,81062,359],{"class":264},[220,81064,81065,81067,81069],{"class":222,"line":644},[220,81066,402],{"class":264},[220,81068,347],{"class":420},[220,81070,359],{"class":264},[212,81072,81073],{"className":2844,"code":80984,"language":2846,"meta":178,"style":178},[99,81074,81075,81083,81091,81099,81107],{"__ignoreMap":178},[220,81076,81077,81079,81081],{"class":222,"line":223},[220,81078,343],{"class":264},[220,81080,347],{"class":420},[220,81082,359],{"class":264},[220,81084,81085,81087,81089],{"class":222,"line":179},[220,81086,364],{"class":264},[220,81088,80962],{"class":420},[220,81090,359],{"class":264},[220,81092,81093,81095,81097],{"class":222,"line":389},[220,81094,2550],{"class":264},[220,81096,2553],{"class":420},[220,81098,386],{"class":264},[220,81100,81101,81103,81105],{"class":222,"line":399},[220,81102,2567],{"class":264},[220,81104,80962],{"class":420},[220,81106,359],{"class":264},[220,81108,81109,81111,81113],{"class":222,"line":644},[220,81110,402],{"class":264},[220,81112,347],{"class":420},[220,81114,359],{"class":264},[212,81116,81117],{"className":468,"code":80984,"language":469,"meta":178,"style":178},[99,81118,81119,81127,81135,81143,81151],{"__ignoreMap":178},[220,81120,81121,81123,81125],{"class":222,"line":223},[220,81122,343],{"class":264},[220,81124,347],{"class":420},[220,81126,359],{"class":264},[220,81128,81129,81131,81133],{"class":222,"line":179},[220,81130,364],{"class":264},[220,81132,80962],{"class":420},[220,81134,359],{"class":264},[220,81136,81137,81139,81141],{"class":222,"line":389},[220,81138,2550],{"class":264},[220,81140,2553],{"class":420},[220,81142,386],{"class":264},[220,81144,81145,81147,81149],{"class":222,"line":399},[220,81146,2567],{"class":264},[220,81148,80962],{"class":420},[220,81150,359],{"class":264},[220,81152,81153,81155,81157],{"class":222,"line":644},[220,81154,402],{"class":264},[220,81156,347],{"class":420},[220,81158,359],{"class":264},[212,81160,81162],{"className":251,"code":81161,"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,81163,81164,81174,81178,81192,81196,81205,81213,81217,81221],{"__ignoreMap":178},[220,81165,81166,81168,81170,81172],{"class":222,"line":223},[220,81167,261],{"class":260},[220,81169,11512],{"class":264},[220,81171,268],{"class":260},[220,81173,4007],{"class":230},[220,81175,81176],{"class":222,"line":179},[220,81177,647],{"emptyLinePlaceholder":194},[220,81179,81180,81182,81184,81186,81188,81190],{"class":222,"line":389},[220,81181,1735],{"class":260},[220,81183,1738],{"class":420},[220,81185,1741],{"class":260},[220,81187,1744],{"class":260},[220,81189,1747],{"class":226},[220,81191,1750],{"class":264},[220,81193,81194],{"class":222,"line":399},[220,81195,1765],{"class":264},[220,81197,81198,81200,81203],{"class":222,"line":644},[220,81199,1770],{"class":264},[220,81201,81202],{"class":230},"'WaveDistortion'",[220,81204,7009],{"class":264},[220,81206,81207,81209,81211],{"class":222,"line":650},[220,81208,7014],{"class":264},[220,81210,3206],{"class":230},[220,81212,2465],{"class":264},[220,81214,81215],{"class":222,"line":656},[220,81216,7031],{"class":264},[220,81218,81219],{"class":222,"line":673},[220,81220,1787],{"class":264},[220,81222,81223],{"class":222,"line":682},[220,81224,1792],{"class":264},[1504,81226,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81228},[81229,81230],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":80962,"description":80970},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":81237,"title":81238,"body":81239,"category":33063,"componentType":25877,"description":81246,"extension":191,"meta":81431,"navigation":194,"path":81432,"requiresChild":32530,"seo":81433,"stem":81434,"__hash__":81435},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":81240,"toc":81427},[81241,81244,81247,81249,81251,81254,81256,81425],[11,81242,81238],{"id":81243},"waveletnoise",[15,81245,81246],{},"Rotating banded wavelets that ripple as they animate",[31911,81248],{"component":81238},[23,81250,31915],{"id":26533},[31917,81252],{":props":81253},"[{\"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,81255,31923],{"id":31922},[246,81257,81258,81287,81315,81343,81371],{":tabs":1557},[212,81259,81261],{"className":334,"code":81260,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,81262,81263,81271,81279],{"__ignoreMap":178},[220,81264,81265,81267,81269],{"class":222,"line":223},[220,81266,343],{"class":264},[220,81268,347],{"class":346},[220,81270,359],{"class":264},[220,81272,81273,81275,81277],{"class":222,"line":179},[220,81274,364],{"class":264},[220,81276,81238],{"class":346},[220,81278,386],{"class":264},[220,81280,81281,81283,81285],{"class":222,"line":389},[220,81282,402],{"class":264},[220,81284,347],{"class":346},[220,81286,359],{"class":264},[212,81288,81289],{"className":409,"code":81260,"language":411,"meta":178,"style":178},[99,81290,81291,81299,81307],{"__ignoreMap":178},[220,81292,81293,81295,81297],{"class":222,"line":223},[220,81294,343],{"class":264},[220,81296,347],{"class":420},[220,81298,359],{"class":264},[220,81300,81301,81303,81305],{"class":222,"line":179},[220,81302,364],{"class":264},[220,81304,81238],{"class":420},[220,81306,386],{"class":264},[220,81308,81309,81311,81313],{"class":222,"line":389},[220,81310,402],{"class":264},[220,81312,347],{"class":420},[220,81314,359],{"class":264},[212,81316,81317],{"className":2844,"code":81260,"language":2846,"meta":178,"style":178},[99,81318,81319,81327,81335],{"__ignoreMap":178},[220,81320,81321,81323,81325],{"class":222,"line":223},[220,81322,343],{"class":264},[220,81324,347],{"class":420},[220,81326,359],{"class":264},[220,81328,81329,81331,81333],{"class":222,"line":179},[220,81330,364],{"class":264},[220,81332,81238],{"class":420},[220,81334,386],{"class":264},[220,81336,81337,81339,81341],{"class":222,"line":389},[220,81338,402],{"class":264},[220,81340,347],{"class":420},[220,81342,359],{"class":264},[212,81344,81345],{"className":468,"code":81260,"language":469,"meta":178,"style":178},[99,81346,81347,81355,81363],{"__ignoreMap":178},[220,81348,81349,81351,81353],{"class":222,"line":223},[220,81350,343],{"class":264},[220,81352,347],{"class":420},[220,81354,359],{"class":264},[220,81356,81357,81359,81361],{"class":222,"line":179},[220,81358,364],{"class":264},[220,81360,81238],{"class":420},[220,81362,386],{"class":264},[220,81364,81365,81367,81369],{"class":222,"line":389},[220,81366,402],{"class":264},[220,81368,347],{"class":420},[220,81370,359],{"class":264},[212,81372,81374],{"className":251,"code":81373,"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,81375,81376,81386,81390,81404,81408,81417,81421],{"__ignoreMap":178},[220,81377,81378,81380,81382,81384],{"class":222,"line":223},[220,81379,261],{"class":260},[220,81381,11512],{"class":264},[220,81383,268],{"class":260},[220,81385,4007],{"class":230},[220,81387,81388],{"class":222,"line":179},[220,81389,647],{"emptyLinePlaceholder":194},[220,81391,81392,81394,81396,81398,81400,81402],{"class":222,"line":389},[220,81393,1735],{"class":260},[220,81395,1738],{"class":420},[220,81397,1741],{"class":260},[220,81399,1744],{"class":260},[220,81401,1747],{"class":226},[220,81403,1750],{"class":264},[220,81405,81406],{"class":222,"line":399},[220,81407,1765],{"class":264},[220,81409,81410,81412,81415],{"class":222,"line":644},[220,81411,1770],{"class":264},[220,81413,81414],{"class":230},"'WaveletNoise'",[220,81416,2465],{"class":264},[220,81418,81419],{"class":222,"line":650},[220,81420,1787],{"class":264},[220,81422,81423],{"class":222,"line":656},[220,81424,1792],{"class":264},[1504,81426,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81428},[81429,81430],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":81238,"description":81246},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":81437,"title":81438,"body":81439,"category":33063,"componentType":25877,"description":81446,"extension":191,"meta":81631,"navigation":194,"path":81632,"requiresChild":32530,"seo":81633,"stem":81634,"__hash__":81635},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":81440,"toc":81627},[81441,81444,81447,81449,81451,81454,81456,81625],[11,81442,81438],{"id":81443},"weave",[15,81445,81446],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[31911,81448],{"component":81438},[23,81450,31915],{"id":26533},[31917,81452],{":props":81453},"[{\"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,81455,31923],{"id":31922},[246,81457,81458,81487,81515,81543,81571],{":tabs":1557},[212,81459,81461],{"className":334,"code":81460,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,81462,81463,81471,81479],{"__ignoreMap":178},[220,81464,81465,81467,81469],{"class":222,"line":223},[220,81466,343],{"class":264},[220,81468,347],{"class":346},[220,81470,359],{"class":264},[220,81472,81473,81475,81477],{"class":222,"line":179},[220,81474,364],{"class":264},[220,81476,81438],{"class":346},[220,81478,386],{"class":264},[220,81480,81481,81483,81485],{"class":222,"line":389},[220,81482,402],{"class":264},[220,81484,347],{"class":346},[220,81486,359],{"class":264},[212,81488,81489],{"className":409,"code":81460,"language":411,"meta":178,"style":178},[99,81490,81491,81499,81507],{"__ignoreMap":178},[220,81492,81493,81495,81497],{"class":222,"line":223},[220,81494,343],{"class":264},[220,81496,347],{"class":420},[220,81498,359],{"class":264},[220,81500,81501,81503,81505],{"class":222,"line":179},[220,81502,364],{"class":264},[220,81504,81438],{"class":420},[220,81506,386],{"class":264},[220,81508,81509,81511,81513],{"class":222,"line":389},[220,81510,402],{"class":264},[220,81512,347],{"class":420},[220,81514,359],{"class":264},[212,81516,81517],{"className":2844,"code":81460,"language":2846,"meta":178,"style":178},[99,81518,81519,81527,81535],{"__ignoreMap":178},[220,81520,81521,81523,81525],{"class":222,"line":223},[220,81522,343],{"class":264},[220,81524,347],{"class":420},[220,81526,359],{"class":264},[220,81528,81529,81531,81533],{"class":222,"line":179},[220,81530,364],{"class":264},[220,81532,81438],{"class":420},[220,81534,386],{"class":264},[220,81536,81537,81539,81541],{"class":222,"line":389},[220,81538,402],{"class":264},[220,81540,347],{"class":420},[220,81542,359],{"class":264},[212,81544,81545],{"className":468,"code":81460,"language":469,"meta":178,"style":178},[99,81546,81547,81555,81563],{"__ignoreMap":178},[220,81548,81549,81551,81553],{"class":222,"line":223},[220,81550,343],{"class":264},[220,81552,347],{"class":420},[220,81554,359],{"class":264},[220,81556,81557,81559,81561],{"class":222,"line":179},[220,81558,364],{"class":264},[220,81560,81438],{"class":420},[220,81562,386],{"class":264},[220,81564,81565,81567,81569],{"class":222,"line":389},[220,81566,402],{"class":264},[220,81568,347],{"class":420},[220,81570,359],{"class":264},[212,81572,81574],{"className":251,"code":81573,"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,81575,81576,81586,81590,81604,81608,81617,81621],{"__ignoreMap":178},[220,81577,81578,81580,81582,81584],{"class":222,"line":223},[220,81579,261],{"class":260},[220,81581,11512],{"class":264},[220,81583,268],{"class":260},[220,81585,4007],{"class":230},[220,81587,81588],{"class":222,"line":179},[220,81589,647],{"emptyLinePlaceholder":194},[220,81591,81592,81594,81596,81598,81600,81602],{"class":222,"line":389},[220,81593,1735],{"class":260},[220,81595,1738],{"class":420},[220,81597,1741],{"class":260},[220,81599,1744],{"class":260},[220,81601,1747],{"class":226},[220,81603,1750],{"class":264},[220,81605,81606],{"class":222,"line":399},[220,81607,1765],{"class":264},[220,81609,81610,81612,81615],{"class":222,"line":644},[220,81611,1770],{"class":264},[220,81613,81614],{"class":230},"'Weave'",[220,81616,2465],{"class":264},[220,81618,81619],{"class":222,"line":650},[220,81620,1787],{"class":264},[220,81622,81623],{"class":222,"line":656},[220,81624,1792],{"class":264},[1504,81626,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81628},[81629,81630],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":81438,"description":81446},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":81637,"title":81638,"body":81639,"category":33063,"componentType":25877,"description":81646,"extension":191,"meta":81831,"navigation":194,"path":81832,"requiresChild":32530,"seo":81833,"stem":81834,"__hash__":81835},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":81640,"toc":81827},[81641,81644,81647,81649,81651,81654,81656,81825],[11,81642,81638],{"id":81643},"webcamtexture",[15,81645,81646],{},"Display a live webcam feed with customizable object-fit modes",[31911,81648],{"component":81638},[23,81650,31915],{"id":26533},[31917,81652],{":props":81653},"[{\"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,81655,31923],{"id":31922},[246,81657,81658,81687,81715,81743,81771],{":tabs":1557},[212,81659,81661],{"className":334,"code":81660,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,81662,81663,81671,81679],{"__ignoreMap":178},[220,81664,81665,81667,81669],{"class":222,"line":223},[220,81666,343],{"class":264},[220,81668,347],{"class":346},[220,81670,359],{"class":264},[220,81672,81673,81675,81677],{"class":222,"line":179},[220,81674,364],{"class":264},[220,81676,81638],{"class":346},[220,81678,386],{"class":264},[220,81680,81681,81683,81685],{"class":222,"line":389},[220,81682,402],{"class":264},[220,81684,347],{"class":346},[220,81686,359],{"class":264},[212,81688,81689],{"className":409,"code":81660,"language":411,"meta":178,"style":178},[99,81690,81691,81699,81707],{"__ignoreMap":178},[220,81692,81693,81695,81697],{"class":222,"line":223},[220,81694,343],{"class":264},[220,81696,347],{"class":420},[220,81698,359],{"class":264},[220,81700,81701,81703,81705],{"class":222,"line":179},[220,81702,364],{"class":264},[220,81704,81638],{"class":420},[220,81706,386],{"class":264},[220,81708,81709,81711,81713],{"class":222,"line":389},[220,81710,402],{"class":264},[220,81712,347],{"class":420},[220,81714,359],{"class":264},[212,81716,81717],{"className":2844,"code":81660,"language":2846,"meta":178,"style":178},[99,81718,81719,81727,81735],{"__ignoreMap":178},[220,81720,81721,81723,81725],{"class":222,"line":223},[220,81722,343],{"class":264},[220,81724,347],{"class":420},[220,81726,359],{"class":264},[220,81728,81729,81731,81733],{"class":222,"line":179},[220,81730,364],{"class":264},[220,81732,81638],{"class":420},[220,81734,386],{"class":264},[220,81736,81737,81739,81741],{"class":222,"line":389},[220,81738,402],{"class":264},[220,81740,347],{"class":420},[220,81742,359],{"class":264},[212,81744,81745],{"className":468,"code":81660,"language":469,"meta":178,"style":178},[99,81746,81747,81755,81763],{"__ignoreMap":178},[220,81748,81749,81751,81753],{"class":222,"line":223},[220,81750,343],{"class":264},[220,81752,347],{"class":420},[220,81754,359],{"class":264},[220,81756,81757,81759,81761],{"class":222,"line":179},[220,81758,364],{"class":264},[220,81760,81638],{"class":420},[220,81762,386],{"class":264},[220,81764,81765,81767,81769],{"class":222,"line":389},[220,81766,402],{"class":264},[220,81768,347],{"class":420},[220,81770,359],{"class":264},[212,81772,81774],{"className":251,"code":81773,"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,81775,81776,81786,81790,81804,81808,81817,81821],{"__ignoreMap":178},[220,81777,81778,81780,81782,81784],{"class":222,"line":223},[220,81779,261],{"class":260},[220,81781,11512],{"class":264},[220,81783,268],{"class":260},[220,81785,4007],{"class":230},[220,81787,81788],{"class":222,"line":179},[220,81789,647],{"emptyLinePlaceholder":194},[220,81791,81792,81794,81796,81798,81800,81802],{"class":222,"line":389},[220,81793,1735],{"class":260},[220,81795,1738],{"class":420},[220,81797,1741],{"class":260},[220,81799,1744],{"class":260},[220,81801,1747],{"class":226},[220,81803,1750],{"class":264},[220,81805,81806],{"class":222,"line":399},[220,81807,1765],{"class":264},[220,81809,81810,81812,81815],{"class":222,"line":644},[220,81811,1770],{"class":264},[220,81813,81814],{"class":230},"'WebcamTexture'",[220,81816,2465],{"class":264},[220,81818,81819],{"class":222,"line":650},[220,81820,1787],{"class":264},[220,81822,81823],{"class":222,"line":656},[220,81824,1792],{"class":264},[1504,81826,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81828},[81829,81830],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":81638,"description":81646},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":81837,"title":81838,"body":81839,"category":32806,"componentType":25883,"description":81846,"extension":191,"meta":82163,"navigation":194,"path":82164,"requiresChild":194,"seo":82165,"stem":82166,"__hash__":82167},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":81840,"toc":82159},[81841,81844,81847,81849,81851,81854,81856,82157],[11,81842,81838],{"id":81843},"wool",[15,81845,81846],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[31911,81848],{"component":81838},[23,81850,31915],{"id":26533},[31917,81852],{":props":81853},"[{\"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,81855,31923],{"id":31922},[246,81857,81858,81914,81973,82029,82087],{":tabs":1557},[212,81859,81861],{"className":334,"code":81860,"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,81862,81863,81871,81878,81886,81890,81898,81906],{"__ignoreMap":178},[220,81864,81865,81867,81869],{"class":222,"line":223},[220,81866,343],{"class":264},[220,81868,347],{"class":346},[220,81870,359],{"class":264},[220,81872,81873,81875],{"class":222,"line":179},[220,81874,364],{"class":264},[220,81876,81877],{"class":346},"Wool\n",[220,81879,81880,81882,81884],{"class":222,"line":389},[220,81881,20371],{"class":226},[220,81883,353],{"class":264},[220,81885,42358],{"class":230},[220,81887,81888],{"class":222,"line":399},[220,81889,31959],{"class":264},[220,81891,81892,81894,81896],{"class":222,"line":644},[220,81893,2550],{"class":264},[220,81895,2553],{"class":346},[220,81897,386],{"class":264},[220,81899,81900,81902,81904],{"class":222,"line":650},[220,81901,2567],{"class":264},[220,81903,81838],{"class":346},[220,81905,359],{"class":264},[220,81907,81908,81910,81912],{"class":222,"line":656},[220,81909,402],{"class":264},[220,81911,347],{"class":346},[220,81913,359],{"class":264},[212,81915,81917],{"className":409,"code":81916,"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,81918,81919,81927,81933,81945,81949,81957,81965],{"__ignoreMap":178},[220,81920,81921,81923,81925],{"class":222,"line":223},[220,81922,343],{"class":264},[220,81924,347],{"class":420},[220,81926,359],{"class":264},[220,81928,81929,81931],{"class":222,"line":179},[220,81930,364],{"class":264},[220,81932,81877],{"class":420},[220,81934,81935,81937,81939,81941,81943],{"class":222,"line":389},[220,81936,20482],{"class":226},[220,81938,353],{"class":260},[220,81940,743],{"class":264},[220,81942,7754],{"class":420},[220,81944,749],{"class":264},[220,81946,81947],{"class":222,"line":399},[220,81948,31959],{"class":264},[220,81950,81951,81953,81955],{"class":222,"line":644},[220,81952,2550],{"class":264},[220,81954,2553],{"class":420},[220,81956,386],{"class":264},[220,81958,81959,81961,81963],{"class":222,"line":650},[220,81960,2567],{"class":264},[220,81962,81838],{"class":420},[220,81964,359],{"class":264},[220,81966,81967,81969,81971],{"class":222,"line":656},[220,81968,402],{"class":264},[220,81970,347],{"class":420},[220,81972,359],{"class":264},[212,81974,81975],{"className":2844,"code":81916,"language":2846,"meta":178,"style":178},[99,81976,81977,81985,81991,82001,82005,82013,82021],{"__ignoreMap":178},[220,81978,81979,81981,81983],{"class":222,"line":223},[220,81980,343],{"class":264},[220,81982,347],{"class":420},[220,81984,359],{"class":264},[220,81986,81987,81989],{"class":222,"line":179},[220,81988,364],{"class":264},[220,81990,81877],{"class":420},[220,81992,81993,81995,81997,81999],{"class":222,"line":389},[220,81994,20482],{"class":226},[220,81996,29871],{"class":264},[220,81998,7754],{"class":420},[220,82000,749],{"class":264},[220,82002,82003],{"class":222,"line":399},[220,82004,31959],{"class":264},[220,82006,82007,82009,82011],{"class":222,"line":644},[220,82008,2550],{"class":264},[220,82010,2553],{"class":420},[220,82012,386],{"class":264},[220,82014,82015,82017,82019],{"class":222,"line":650},[220,82016,2567],{"class":264},[220,82018,81838],{"class":420},[220,82020,359],{"class":264},[220,82022,82023,82025,82027],{"class":222,"line":656},[220,82024,402],{"class":264},[220,82026,347],{"class":420},[220,82028,359],{"class":264},[212,82030,82031],{"className":468,"code":81916,"language":469,"meta":178,"style":178},[99,82032,82033,82041,82047,82059,82063,82071,82079],{"__ignoreMap":178},[220,82034,82035,82037,82039],{"class":222,"line":223},[220,82036,343],{"class":264},[220,82038,347],{"class":420},[220,82040,359],{"class":264},[220,82042,82043,82045],{"class":222,"line":179},[220,82044,364],{"class":264},[220,82046,81877],{"class":420},[220,82048,82049,82051,82053,82055,82057],{"class":222,"line":389},[220,82050,20482],{"class":226},[220,82052,353],{"class":260},[220,82054,743],{"class":264},[220,82056,7754],{"class":420},[220,82058,749],{"class":264},[220,82060,82061],{"class":222,"line":399},[220,82062,31959],{"class":264},[220,82064,82065,82067,82069],{"class":222,"line":644},[220,82066,2550],{"class":264},[220,82068,2553],{"class":420},[220,82070,386],{"class":264},[220,82072,82073,82075,82077],{"class":222,"line":650},[220,82074,2567],{"class":264},[220,82076,81838],{"class":420},[220,82078,359],{"class":264},[220,82080,82081,82083,82085],{"class":222,"line":656},[220,82082,402],{"class":264},[220,82084,347],{"class":420},[220,82086,359],{"class":264},[212,82088,82090],{"className":251,"code":82089,"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,82091,82092,82102,82106,82120,82124,82137,82145,82149,82153],{"__ignoreMap":178},[220,82093,82094,82096,82098,82100],{"class":222,"line":223},[220,82095,261],{"class":260},[220,82097,11512],{"class":264},[220,82099,268],{"class":260},[220,82101,4007],{"class":230},[220,82103,82104],{"class":222,"line":179},[220,82105,647],{"emptyLinePlaceholder":194},[220,82107,82108,82110,82112,82114,82116,82118],{"class":222,"line":389},[220,82109,1735],{"class":260},[220,82111,1738],{"class":420},[220,82113,1741],{"class":260},[220,82115,1744],{"class":260},[220,82117,1747],{"class":226},[220,82119,1750],{"class":264},[220,82121,82122],{"class":222,"line":399},[220,82123,1765],{"class":264},[220,82125,82126,82128,82131,82133,82135],{"class":222,"line":644},[220,82127,1770],{"class":264},[220,82129,82130],{"class":230},"'Wool'",[220,82132,32203],{"class":264},[220,82134,7754],{"class":420},[220,82136,7546],{"class":264},[220,82138,82139,82141,82143],{"class":222,"line":650},[220,82140,7014],{"class":264},[220,82142,3206],{"class":230},[220,82144,2465],{"class":264},[220,82146,82147],{"class":222,"line":656},[220,82148,7031],{"class":264},[220,82150,82151],{"class":222,"line":673},[220,82152,1787],{"class":264},[220,82154,82155],{"class":222,"line":682},[220,82156,1792],{"class":264},[1504,82158,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":82160},[82161,82162],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":81838,"description":81846},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":82169,"title":82170,"body":82171,"category":33063,"componentType":25877,"description":82178,"extension":191,"meta":82363,"navigation":194,"path":82364,"requiresChild":32530,"seo":82365,"stem":82366,"__hash__":82367},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":82172,"toc":82359},[82173,82176,82179,82181,82183,82186,82188,82357],[11,82174,82170],{"id":82175},"worleynoise",[15,82177,82178],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[31911,82180],{"component":82170},[23,82182,31915],{"id":26533},[31917,82184],{":props":82185},"[{\"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,82187,31923],{"id":31922},[246,82189,82190,82219,82247,82275,82303],{":tabs":1557},[212,82191,82193],{"className":334,"code":82192,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[99,82194,82195,82203,82211],{"__ignoreMap":178},[220,82196,82197,82199,82201],{"class":222,"line":223},[220,82198,343],{"class":264},[220,82200,347],{"class":346},[220,82202,359],{"class":264},[220,82204,82205,82207,82209],{"class":222,"line":179},[220,82206,364],{"class":264},[220,82208,82170],{"class":346},[220,82210,386],{"class":264},[220,82212,82213,82215,82217],{"class":222,"line":389},[220,82214,402],{"class":264},[220,82216,347],{"class":346},[220,82218,359],{"class":264},[212,82220,82221],{"className":409,"code":82192,"language":411,"meta":178,"style":178},[99,82222,82223,82231,82239],{"__ignoreMap":178},[220,82224,82225,82227,82229],{"class":222,"line":223},[220,82226,343],{"class":264},[220,82228,347],{"class":420},[220,82230,359],{"class":264},[220,82232,82233,82235,82237],{"class":222,"line":179},[220,82234,364],{"class":264},[220,82236,82170],{"class":420},[220,82238,386],{"class":264},[220,82240,82241,82243,82245],{"class":222,"line":389},[220,82242,402],{"class":264},[220,82244,347],{"class":420},[220,82246,359],{"class":264},[212,82248,82249],{"className":2844,"code":82192,"language":2846,"meta":178,"style":178},[99,82250,82251,82259,82267],{"__ignoreMap":178},[220,82252,82253,82255,82257],{"class":222,"line":223},[220,82254,343],{"class":264},[220,82256,347],{"class":420},[220,82258,359],{"class":264},[220,82260,82261,82263,82265],{"class":222,"line":179},[220,82262,364],{"class":264},[220,82264,82170],{"class":420},[220,82266,386],{"class":264},[220,82268,82269,82271,82273],{"class":222,"line":389},[220,82270,402],{"class":264},[220,82272,347],{"class":420},[220,82274,359],{"class":264},[212,82276,82277],{"className":468,"code":82192,"language":469,"meta":178,"style":178},[99,82278,82279,82287,82295],{"__ignoreMap":178},[220,82280,82281,82283,82285],{"class":222,"line":223},[220,82282,343],{"class":264},[220,82284,347],{"class":420},[220,82286,359],{"class":264},[220,82288,82289,82291,82293],{"class":222,"line":179},[220,82290,364],{"class":264},[220,82292,82170],{"class":420},[220,82294,386],{"class":264},[220,82296,82297,82299,82301],{"class":222,"line":389},[220,82298,402],{"class":264},[220,82300,347],{"class":420},[220,82302,359],{"class":264},[212,82304,82306],{"className":251,"code":82305,"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,82307,82308,82318,82322,82336,82340,82349,82353],{"__ignoreMap":178},[220,82309,82310,82312,82314,82316],{"class":222,"line":223},[220,82311,261],{"class":260},[220,82313,11512],{"class":264},[220,82315,268],{"class":260},[220,82317,4007],{"class":230},[220,82319,82320],{"class":222,"line":179},[220,82321,647],{"emptyLinePlaceholder":194},[220,82323,82324,82326,82328,82330,82332,82334],{"class":222,"line":389},[220,82325,1735],{"class":260},[220,82327,1738],{"class":420},[220,82329,1741],{"class":260},[220,82331,1744],{"class":260},[220,82333,1747],{"class":226},[220,82335,1750],{"class":264},[220,82337,82338],{"class":222,"line":399},[220,82339,1765],{"class":264},[220,82341,82342,82344,82347],{"class":222,"line":644},[220,82343,1770],{"class":264},[220,82345,82346],{"class":230},"'WorleyNoise'",[220,82348,2465],{"class":264},[220,82350,82351],{"class":222,"line":650},[220,82352,1787],{"class":264},[220,82354,82355],{"class":222,"line":656},[220,82356,1792],{"class":264},[1504,82358,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":82360},[82361,82362],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":82170,"description":82178},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":82369,"title":82370,"body":82371,"category":32234,"componentType":25883,"description":82378,"extension":191,"meta":82695,"navigation":194,"path":82696,"requiresChild":194,"seo":82697,"stem":82698,"__hash__":82699},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":82372,"toc":82691},[82373,82376,82379,82381,82383,82386,82388,82689],[11,82374,82370],{"id":82375},"zoomblur",[15,82377,82378],{},"Radial zoom blur expanding from a center point",[31911,82380],{"component":82370},[23,82382,31915],{"id":26533},[31917,82384],{":props":82385},"[{\"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,82387,31923],{"id":31922},[246,82389,82390,82446,82505,82561,82619],{":tabs":1557},[212,82391,82393],{"className":334,"code":82392,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,82394,82395,82403,82410,82418,82422,82430,82438],{"__ignoreMap":178},[220,82396,82397,82399,82401],{"class":222,"line":223},[220,82398,343],{"class":264},[220,82400,347],{"class":346},[220,82402,359],{"class":264},[220,82404,82405,82407],{"class":222,"line":179},[220,82406,364],{"class":264},[220,82408,82409],{"class":346},"ZoomBlur\n",[220,82411,82412,82414,82416],{"class":222,"line":389},[220,82413,20371],{"class":226},[220,82415,353],{"class":264},[220,82417,43792],{"class":230},[220,82419,82420],{"class":222,"line":399},[220,82421,31959],{"class":264},[220,82423,82424,82426,82428],{"class":222,"line":644},[220,82425,2550],{"class":264},[220,82427,2553],{"class":346},[220,82429,386],{"class":264},[220,82431,82432,82434,82436],{"class":222,"line":650},[220,82433,2567],{"class":264},[220,82435,82370],{"class":346},[220,82437,359],{"class":264},[220,82439,82440,82442,82444],{"class":222,"line":656},[220,82441,402],{"class":264},[220,82443,347],{"class":346},[220,82445,359],{"class":264},[212,82447,82449],{"className":409,"code":82448,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,82450,82451,82459,82465,82477,82481,82489,82497],{"__ignoreMap":178},[220,82452,82453,82455,82457],{"class":222,"line":223},[220,82454,343],{"class":264},[220,82456,347],{"class":420},[220,82458,359],{"class":264},[220,82460,82461,82463],{"class":222,"line":179},[220,82462,364],{"class":264},[220,82464,82409],{"class":420},[220,82466,82467,82469,82471,82473,82475],{"class":222,"line":389},[220,82468,20482],{"class":226},[220,82470,353],{"class":260},[220,82472,743],{"class":264},[220,82474,24010],{"class":420},[220,82476,749],{"class":264},[220,82478,82479],{"class":222,"line":399},[220,82480,31959],{"class":264},[220,82482,82483,82485,82487],{"class":222,"line":644},[220,82484,2550],{"class":264},[220,82486,2553],{"class":420},[220,82488,386],{"class":264},[220,82490,82491,82493,82495],{"class":222,"line":650},[220,82492,2567],{"class":264},[220,82494,82370],{"class":420},[220,82496,359],{"class":264},[220,82498,82499,82501,82503],{"class":222,"line":656},[220,82500,402],{"class":264},[220,82502,347],{"class":420},[220,82504,359],{"class":264},[212,82506,82507],{"className":2844,"code":82448,"language":2846,"meta":178,"style":178},[99,82508,82509,82517,82523,82533,82537,82545,82553],{"__ignoreMap":178},[220,82510,82511,82513,82515],{"class":222,"line":223},[220,82512,343],{"class":264},[220,82514,347],{"class":420},[220,82516,359],{"class":264},[220,82518,82519,82521],{"class":222,"line":179},[220,82520,364],{"class":264},[220,82522,82409],{"class":420},[220,82524,82525,82527,82529,82531],{"class":222,"line":389},[220,82526,20482],{"class":226},[220,82528,29871],{"class":264},[220,82530,24010],{"class":420},[220,82532,749],{"class":264},[220,82534,82535],{"class":222,"line":399},[220,82536,31959],{"class":264},[220,82538,82539,82541,82543],{"class":222,"line":644},[220,82540,2550],{"class":264},[220,82542,2553],{"class":420},[220,82544,386],{"class":264},[220,82546,82547,82549,82551],{"class":222,"line":650},[220,82548,2567],{"class":264},[220,82550,82370],{"class":420},[220,82552,359],{"class":264},[220,82554,82555,82557,82559],{"class":222,"line":656},[220,82556,402],{"class":264},[220,82558,347],{"class":420},[220,82560,359],{"class":264},[212,82562,82563],{"className":468,"code":82448,"language":469,"meta":178,"style":178},[99,82564,82565,82573,82579,82591,82595,82603,82611],{"__ignoreMap":178},[220,82566,82567,82569,82571],{"class":222,"line":223},[220,82568,343],{"class":264},[220,82570,347],{"class":420},[220,82572,359],{"class":264},[220,82574,82575,82577],{"class":222,"line":179},[220,82576,364],{"class":264},[220,82578,82409],{"class":420},[220,82580,82581,82583,82585,82587,82589],{"class":222,"line":389},[220,82582,20482],{"class":226},[220,82584,353],{"class":260},[220,82586,743],{"class":264},[220,82588,24010],{"class":420},[220,82590,749],{"class":264},[220,82592,82593],{"class":222,"line":399},[220,82594,31959],{"class":264},[220,82596,82597,82599,82601],{"class":222,"line":644},[220,82598,2550],{"class":264},[220,82600,2553],{"class":420},[220,82602,386],{"class":264},[220,82604,82605,82607,82609],{"class":222,"line":650},[220,82606,2567],{"class":264},[220,82608,82370],{"class":420},[220,82610,359],{"class":264},[220,82612,82613,82615,82617],{"class":222,"line":656},[220,82614,402],{"class":264},[220,82616,347],{"class":420},[220,82618,359],{"class":264},[212,82620,82622],{"className":251,"code":82621,"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,82623,82624,82634,82638,82652,82656,82669,82677,82681,82685],{"__ignoreMap":178},[220,82625,82626,82628,82630,82632],{"class":222,"line":223},[220,82627,261],{"class":260},[220,82629,11512],{"class":264},[220,82631,268],{"class":260},[220,82633,4007],{"class":230},[220,82635,82636],{"class":222,"line":179},[220,82637,647],{"emptyLinePlaceholder":194},[220,82639,82640,82642,82644,82646,82648,82650],{"class":222,"line":389},[220,82641,1735],{"class":260},[220,82643,1738],{"class":420},[220,82645,1741],{"class":260},[220,82647,1744],{"class":260},[220,82649,1747],{"class":226},[220,82651,1750],{"class":264},[220,82653,82654],{"class":222,"line":399},[220,82655,1765],{"class":264},[220,82657,82658,82660,82663,82665,82667],{"class":222,"line":644},[220,82659,1770],{"class":264},[220,82661,82662],{"class":230},"'ZoomBlur'",[220,82664,32203],{"class":264},[220,82666,24010],{"class":420},[220,82668,7546],{"class":264},[220,82670,82671,82673,82675],{"class":222,"line":650},[220,82672,7014],{"class":264},[220,82674,3206],{"class":230},[220,82676,2465],{"class":264},[220,82678,82679],{"class":222,"line":656},[220,82680,7031],{"class":264},[220,82682,82683],{"class":222,"line":673},[220,82684,1787],{"class":264},[220,82686,82687],{"class":222,"line":682},[220,82688,1792],{"class":264},[1504,82690,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":82692},[82693,82694],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":82370,"description":82378},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":39192,"title":39193,"body":82701,"category":36569,"componentType":25877,"description":39201,"extension":191,"meta":82887,"navigation":194,"path":39387,"requiresChild":32530,"seo":82888,"stem":39389,"__hash__":39390},{"type":8,"value":82702,"toc":82883},[82703,82705,82707,82709,82711,82713,82715,82881],[11,82704,39193],{"id":39198},[15,82706,39201],{},[31911,82708],{"component":39193},[23,82710,31915],{"id":26533},[31917,82712],{":props":39208},[23,82714,31923],{"id":31922},[246,82716,82717,82745,82773,82801,82829],{":tabs":1557},[212,82718,82719],{"className":334,"code":39215,"language":336,"meta":178,"style":178},[99,82720,82721,82729,82737],{"__ignoreMap":178},[220,82722,82723,82725,82727],{"class":222,"line":223},[220,82724,343],{"class":264},[220,82726,347],{"class":346},[220,82728,359],{"class":264},[220,82730,82731,82733,82735],{"class":222,"line":179},[220,82732,364],{"class":264},[220,82734,39193],{"class":346},[220,82736,386],{"class":264},[220,82738,82739,82741,82743],{"class":222,"line":389},[220,82740,402],{"class":264},[220,82742,347],{"class":346},[220,82744,359],{"class":264},[212,82746,82747],{"className":409,"code":39215,"language":411,"meta":178,"style":178},[99,82748,82749,82757,82765],{"__ignoreMap":178},[220,82750,82751,82753,82755],{"class":222,"line":223},[220,82752,343],{"class":264},[220,82754,347],{"class":420},[220,82756,359],{"class":264},[220,82758,82759,82761,82763],{"class":222,"line":179},[220,82760,364],{"class":264},[220,82762,39193],{"class":420},[220,82764,386],{"class":264},[220,82766,82767,82769,82771],{"class":222,"line":389},[220,82768,402],{"class":264},[220,82770,347],{"class":420},[220,82772,359],{"class":264},[212,82774,82775],{"className":2844,"code":39215,"language":2846,"meta":178,"style":178},[99,82776,82777,82785,82793],{"__ignoreMap":178},[220,82778,82779,82781,82783],{"class":222,"line":223},[220,82780,343],{"class":264},[220,82782,347],{"class":420},[220,82784,359],{"class":264},[220,82786,82787,82789,82791],{"class":222,"line":179},[220,82788,364],{"class":264},[220,82790,39193],{"class":420},[220,82792,386],{"class":264},[220,82794,82795,82797,82799],{"class":222,"line":389},[220,82796,402],{"class":264},[220,82798,347],{"class":420},[220,82800,359],{"class":264},[212,82802,82803],{"className":468,"code":39215,"language":469,"meta":178,"style":178},[99,82804,82805,82813,82821],{"__ignoreMap":178},[220,82806,82807,82809,82811],{"class":222,"line":223},[220,82808,343],{"class":264},[220,82810,347],{"class":420},[220,82812,359],{"class":264},[220,82814,82815,82817,82819],{"class":222,"line":179},[220,82816,364],{"class":264},[220,82818,39193],{"class":420},[220,82820,386],{"class":264},[220,82822,82823,82825,82827],{"class":222,"line":389},[220,82824,402],{"class":264},[220,82826,347],{"class":420},[220,82828,359],{"class":264},[212,82830,82831],{"className":251,"code":39328,"language":253,"meta":178,"style":178},[99,82832,82833,82843,82847,82861,82865,82873,82877],{"__ignoreMap":178},[220,82834,82835,82837,82839,82841],{"class":222,"line":223},[220,82836,261],{"class":260},[220,82838,11512],{"class":264},[220,82840,268],{"class":260},[220,82842,4007],{"class":230},[220,82844,82845],{"class":222,"line":179},[220,82846,647],{"emptyLinePlaceholder":194},[220,82848,82849,82851,82853,82855,82857,82859],{"class":222,"line":389},[220,82850,1735],{"class":260},[220,82852,1738],{"class":420},[220,82854,1741],{"class":260},[220,82856,1744],{"class":260},[220,82858,1747],{"class":226},[220,82860,1750],{"class":264},[220,82862,82863],{"class":222,"line":399},[220,82864,1765],{"class":264},[220,82866,82867,82869,82871],{"class":222,"line":644},[220,82868,1770],{"class":264},[220,82870,39369],{"class":230},[220,82872,2465],{"class":264},[220,82874,82875],{"class":222,"line":650},[220,82876,1787],{"class":264},[220,82878,82879],{"class":222,"line":656},[220,82880,1792],{"class":264},[1504,82882,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":82884},[82885,82886],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},{"title":39193,"description":39201},[82890,82891],{"title":38917,"path":39187,"stem":39189,"children":-1},{"title":2553,"path":39676,"stem":39678,"children":-1}]