[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":31898,"doc-\u002Fdocs\u002Fcomponents\u002Flensdistortion":82256,"doc-surr-\u002Fdocs\u002Fcomponents\u002Flensdistortion":82524},[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 .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":1508},[1509,1510,1511,1512,1513,1514,1515],{"id":209,"depth":179,"text":210},{"id":240,"depth":179,"text":241},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":1466,"depth":179,"text":1467},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect",[1518],"js","rocket",{},"\u002Fdocs\u002Fguide\u002Fquickstart",{"title":201,"description":1516},"docs\u002Fguide\u002F1.quickstart","RLtYLVxbyz880RPys2dp6cNKLwK4NqJJSna_QbNEVBQ",{"id":1526,"title":1527,"body":1528,"category":2240,"description":2241,"exclude":190,"extension":191,"forceFramework":190,"icon":2242,"meta":2243,"navigation":194,"path":2244,"seo":2245,"stem":2246,"__hash__":2247},"guide\u002Fdocs\u002Fguide\u002F10.color-space.md","Color Space",{"type":8,"value":1529,"toc":2236},[1530,1533,1537,1544,1555,1793,1833,1837,1851,1872,1889,1912,1916,1919,1929,1939,2125,2220,2233],[11,1531,1527],{"id":1532},"color-space",[19,1534],{":preset":1535,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#ffffff\"}},{\"type\":\"Repeater\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"count\":64,\"hueShift\":10,\"instanceRotation\":-92,\"instanceScale\":1.015,\"jitterScale\":{\"axis\":\"x\",\"type\":\"mouse\",\"momentum\":0.3,\"outputMin\":0,\"outputMax\":0.655,\"smoothing\":0.45},\"mode\":\"linear\",\"spacing\":0},\"children\":[{\"type\":\"Beam\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"endPosition\":{\"x\":0.82,\"y\":0.9},\"endSoftness\":20,\"endThickness\":0.1,\"insideColor\":\"#7a8ff5\",\"startPosition\":{\"x\":0.68,\"y\":0.37},\"startSoftness\":0.3,\"startThickness\":0.1}}]},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"color\":\"#000000\",\"fontFamily\":\"Geist\",\"fontSize\":0.050833333333333335,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"colors\",\"visible\":true}}]}","aces",[15,1538,1539,1540,1543],{},"By default, Shaders uses ",[159,1541,1542],{},"Display P3 linear"," color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.",[15,1545,1546,1547,1550,1551,1554],{},"To match your design tool exactly, set ",[99,1548,1549],{},"colorSpace"," to ",[99,1552,1553],{},"'srgb'",":",[246,1556,1558,1604,1646,1686,1726],{":tabs":1557},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[212,1559,1561],{"className":334,"code":1560,"language":336,"meta":178,"style":178},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1562,1563,1579,1596],{"__ignoreMap":178},[220,1564,1565,1567,1569,1572,1574,1577],{"class":222,"line":223},[220,1566,343],{"class":264},[220,1568,347],{"class":346},[220,1570,1571],{"class":226}," color-space",[220,1573,353],{"class":264},[220,1575,1576],{"class":230},"\"srgb\"",[220,1578,359],{"class":264},[220,1580,1581,1583,1586,1589,1591,1594],{"class":222,"line":179},[220,1582,364],{"class":264},[220,1584,1585],{"class":346},"SolidColor",[220,1587,1588],{"class":226}," color",[220,1590,353],{"class":264},[220,1592,1593],{"class":230},"\"#5b18ca\"",[220,1595,386],{"class":264},[220,1597,1598,1600,1602],{"class":222,"line":389},[220,1599,402],{"class":264},[220,1601,347],{"class":346},[220,1603,359],{"class":264},[212,1605,1607],{"className":409,"code":1606,"language":411,"meta":178,"style":178},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1608,1609,1624,1638],{"__ignoreMap":178},[220,1610,1611,1613,1615,1618,1620,1622],{"class":222,"line":223},[220,1612,343],{"class":264},[220,1614,347],{"class":420},[220,1616,1617],{"class":226}," colorSpace",[220,1619,353],{"class":260},[220,1621,1576],{"class":230},[220,1623,359],{"class":264},[220,1625,1626,1628,1630,1632,1634,1636],{"class":222,"line":179},[220,1627,364],{"class":264},[220,1629,1585],{"class":420},[220,1631,1588],{"class":226},[220,1633,353],{"class":260},[220,1635,1593],{"class":230},[220,1637,386],{"class":264},[220,1639,1640,1642,1644],{"class":222,"line":389},[220,1641,402],{"class":264},[220,1643,347],{"class":420},[220,1645,359],{"class":264},[212,1647,1648],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1649,1650,1664,1678],{"__ignoreMap":178},[220,1651,1652,1654,1656,1658,1660,1662],{"class":222,"line":223},[220,1653,343],{"class":264},[220,1655,347],{"class":420},[220,1657,1617],{"class":226},[220,1659,353],{"class":260},[220,1661,1576],{"class":230},[220,1663,359],{"class":264},[220,1665,1666,1668,1670,1672,1674,1676],{"class":222,"line":179},[220,1667,364],{"class":264},[220,1669,1585],{"class":420},[220,1671,1588],{"class":226},[220,1673,353],{"class":260},[220,1675,1593],{"class":230},[220,1677,386],{"class":264},[220,1679,1680,1682,1684],{"class":222,"line":389},[220,1681,402],{"class":264},[220,1683,347],{"class":420},[220,1685,359],{"class":264},[212,1687,1688],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1689,1690,1704,1718],{"__ignoreMap":178},[220,1691,1692,1694,1696,1698,1700,1702],{"class":222,"line":223},[220,1693,343],{"class":264},[220,1695,347],{"class":420},[220,1697,1617],{"class":226},[220,1699,353],{"class":260},[220,1701,1576],{"class":230},[220,1703,359],{"class":264},[220,1705,1706,1708,1710,1712,1714,1716],{"class":222,"line":179},[220,1707,364],{"class":264},[220,1709,1585],{"class":420},[220,1711,1588],{"class":226},[220,1713,353],{"class":260},[220,1715,1593],{"class":230},[220,1717,386],{"class":264},[220,1719,1720,1722,1724],{"class":222,"line":389},[220,1721,402],{"class":264},[220,1723,347],{"class":420},[220,1725,359],{"class":264},[212,1727,1729],{"className":251,"code":1728,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,1730,1731,1751,1761,1766,1783,1788],{"__ignoreMap":178},[220,1732,1733,1736,1739,1742,1745,1748],{"class":222,"line":223},[220,1734,1735],{"class":260},"const",[220,1737,1738],{"class":420}," shader",[220,1740,1741],{"class":260}," =",[220,1743,1744],{"class":260}," await",[220,1746,1747],{"class":226}," createShader",[220,1749,1750],{"class":264},"(canvas, {\n",[220,1752,1753,1756,1758],{"class":222,"line":179},[220,1754,1755],{"class":264}," colorSpace: ",[220,1757,1553],{"class":230},[220,1759,1760],{"class":264},",\n",[220,1762,1763],{"class":222,"line":389},[220,1764,1765],{"class":264}," components: [\n",[220,1767,1768,1771,1774,1777,1780],{"class":222,"line":399},[220,1769,1770],{"class":264}," { type: ",[220,1772,1773],{"class":230},"'SolidColor'",[220,1775,1776],{"class":264},", props: { color: ",[220,1778,1779],{"class":230},"'#5b18ca'",[220,1781,1782],{"class":264}," } }\n",[220,1784,1785],{"class":222,"line":644},[220,1786,1787],{"class":264}," ]\n",[220,1789,1790],{"class":222,"line":650},[220,1791,1792],{"class":264},"})\n",[1794,1795,1796,1809],"table",{},[1797,1798,1799],"thead",{},[1800,1801,1802,1806],"tr",{},[1803,1804,1805],"th",{},"Value",[1803,1807,1808],{},"Description",[1810,1811,1812,1823],"tbody",{},[1800,1813,1814,1820],{},[1815,1816,1817],"td",{},[99,1818,1819],{},"p3-linear",[1815,1821,1822],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1800,1824,1825,1830],{},[1815,1826,1827],{},[99,1828,1829],{},"srgb",[1815,1831,1832],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1834,1836],{"id":1835},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1838,1839,1840,1842,1843,1845,1846,1850],{},"The ",[99,1841,1549],{}," prop on ",[99,1844,101],{}," controls the ",[1847,1848,1849],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1852,1853,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871],{},"Several gradient and color components also have their own ",[99,1855,1549],{}," prop that controls how colors ",[1847,1858,1859],{},"interpolate between stops"," (for example, between ",[99,1862,1863],{},"colorA"," and ",[99,1866,1867],{},"colorB"," in a ",[99,1870,367],{},"). These are two separate concepts:",[34,1873,1874,1883],{},[37,1875,1876,1879,1880,1882],{},[159,1877,1878],{},"Output color space"," — set on the root ",[99,1881,101],{},", affects the entire canvas output",[37,1884,1885,1888],{},[159,1886,1887],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1890,1891,1892,1895,1896,1895,1899,1895,1902,1895,1905,1895,1908,1911],{},"Available interpolation modes (where supported): ",[99,1893,1894],{},"linear",", ",[99,1897,1898],{},"oklch",[99,1900,1901],{},"oklab",[99,1903,1904],{},"hsl",[99,1906,1907],{},"hsv",[99,1909,1910],{},"lch",". See individual component docs for options.",[23,1913,1915],{"id":1914},"tone-mapping","Tone mapping",[19,1917],{":preset":1918,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#16171a\"}},{\"type\":\"Prism\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"beamColor\":\"#f0f0f0\",\"beamWidth\":0.002,\"endFalloff\":1.4,\"intensity\":2.45,\"position\":{\"x\":0,\"y\":0.5},\"saturation\":0.96,\"softness\":0.2,\"speed\":0.13,\"splitPosition\":{\"x\":0.33,\"y\":0.5},\"spread\":0.93,\"startFalloff\":0}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"blur\":20,\"center\":{\"x\":0.4,\"y\":0.5},\"edgeSoftness\":0.8,\"fresnel\":0,\"fresnelSoftness\":0.6,\"highlight\":0,\"highlightSoftness\":0.1,\"innerZoom\":0.5,\"lightAngle\":172,\"refraction\":0.41,\"scale\":0.5571594449767269,\"shape\":{\"depth\":0.425,\"bevel\":0.03,\"rotX\":0,\"rotY\":-80,\"rotZ\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"type\":\"svg\",\"svgUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FvIlF2DpaDiin.svg\",\"geometry\":\"extrude\"},\"shapeSdfUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FDODKZwnr2rPw_sdf.bin\",\"shapeType\":\"svgExtrude3D\",\"thickness\":1}},{\"type\":\"Text\",\"props\":{\"blendMode\":\"difference\",\"center\":{\"x\":0.73,\"y\":0.5},\"fontFamily\":\"Geist\",\"letterSpacing\":-0.045,\"text\":\"tone mapping\"}},{\"type\":\"Halftone\",\"props\":{\"blackAngle\":131,\"cyanAngle\":241,\"frequency\":183,\"magentaAngle\":165,\"misprint\":0.004,\"opacity\":0.05,\"style\":\"cmyk\",\"yellowAngle\":76}}]}",[15,1920,1921,1922,1925,1926,1928],{},"When you layer additive blend modes like ",[99,1923,1924],{},"linearDodge"," or build up bright glows, color channels can exceed 1.0 (HDR values). In the default ",[99,1927,1894],{}," mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.",[15,1930,1931,1932,1935,1936,1938],{},"Set ",[99,1933,1934],{},"toneMapping"," on the root ",[99,1937,101],{}," component:",[246,1940,1941,1975,2013,2047,2081],{":tabs":1557},[212,1942,1944],{"className":334,"code":1943,"language":336,"meta":178,"style":178},"\u003CShader tone-mapping=\"aces\">\n \u003C!-- your components -->\n\u003C\u002FShader>\n",[99,1945,1946,1962,1967],{"__ignoreMap":178},[220,1947,1948,1950,1952,1955,1957,1960],{"class":222,"line":223},[220,1949,343],{"class":264},[220,1951,347],{"class":346},[220,1953,1954],{"class":226}," tone-mapping",[220,1956,353],{"class":264},[220,1958,1959],{"class":230},"\"aces\"",[220,1961,359],{"class":264},[220,1963,1964],{"class":222,"line":179},[220,1965,1966],{"class":609}," \u003C!-- your components -->\n",[220,1968,1969,1971,1973],{"class":222,"line":389},[220,1970,402],{"class":264},[220,1972,347],{"class":346},[220,1974,359],{"class":264},[212,1976,1978],{"className":409,"code":1977,"language":411,"meta":178,"style":178},"\u003CShader toneMapping=\"aces\">\n {\u002F* your components *\u002F}\n\u003C\u002FShader>\n",[99,1979,1980,1995,2005],{"__ignoreMap":178},[220,1981,1982,1984,1986,1989,1991,1993],{"class":222,"line":223},[220,1983,343],{"class":264},[220,1985,347],{"class":420},[220,1987,1988],{"class":226}," toneMapping",[220,1990,353],{"class":260},[220,1992,1959],{"class":230},[220,1994,359],{"class":264},[220,1996,1997,2000,2003],{"class":222,"line":179},[220,1998,1999],{"class":264}," {",[220,2001,2002],{"class":609},"\u002F* your components *\u002F",[220,2004,749],{"class":264},[220,2006,2007,2009,2011],{"class":222,"line":389},[220,2008,402],{"class":264},[220,2010,347],{"class":420},[220,2012,359],{"class":264},[212,2014,2015],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2016,2017,2031,2039],{"__ignoreMap":178},[220,2018,2019,2021,2023,2025,2027,2029],{"class":222,"line":223},[220,2020,343],{"class":264},[220,2022,347],{"class":420},[220,2024,1988],{"class":226},[220,2026,353],{"class":260},[220,2028,1959],{"class":230},[220,2030,359],{"class":264},[220,2032,2033,2035,2037],{"class":222,"line":179},[220,2034,1999],{"class":264},[220,2036,2002],{"class":609},[220,2038,749],{"class":264},[220,2040,2041,2043,2045],{"class":222,"line":389},[220,2042,402],{"class":264},[220,2044,347],{"class":420},[220,2046,359],{"class":264},[212,2048,2049],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2050,2051,2065,2073],{"__ignoreMap":178},[220,2052,2053,2055,2057,2059,2061,2063],{"class":222,"line":223},[220,2054,343],{"class":264},[220,2056,347],{"class":420},[220,2058,1988],{"class":226},[220,2060,353],{"class":260},[220,2062,1959],{"class":230},[220,2064,359],{"class":264},[220,2066,2067,2069,2071],{"class":222,"line":179},[220,2068,1999],{"class":264},[220,2070,2002],{"class":609},[220,2072,749],{"class":264},[220,2074,2075,2077,2079],{"class":222,"line":389},[220,2076,402],{"class":264},[220,2078,347],{"class":420},[220,2080,359],{"class":264},[212,2082,2084],{"className":251,"code":2083,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n toneMapping: 'aces',\n components: [\u002F* ... *\u002F]\n})\n",[99,2085,2086,2100,2110,2121],{"__ignoreMap":178},[220,2087,2088,2090,2092,2094,2096,2098],{"class":222,"line":223},[220,2089,1735],{"class":260},[220,2091,1738],{"class":420},[220,2093,1741],{"class":260},[220,2095,1744],{"class":260},[220,2097,1747],{"class":226},[220,2099,1750],{"class":264},[220,2101,2102,2105,2108],{"class":222,"line":179},[220,2103,2104],{"class":264}," toneMapping: ",[220,2106,2107],{"class":230},"'aces'",[220,2109,1760],{"class":264},[220,2111,2112,2115,2118],{"class":222,"line":389},[220,2113,2114],{"class":264}," components: [",[220,2116,2117],{"class":609},"\u002F* ... *\u002F",[220,2119,2120],{"class":264},"]\n",[220,2122,2123],{"class":222,"line":399},[220,2124,1792],{"class":264},[1794,2126,2127,2136],{},[1797,2128,2129],{},[1800,2130,2131,2133],{},[1803,2132,1805],{},[1803,2134,2135],{},"Character",[1810,2137,2138,2147,2161,2171,2180,2190,2200,2210],{},[1800,2139,2140,2144],{},[1815,2141,2142],{},[99,2143,1894],{},[1815,2145,2146],{},"No compression (default). Values pass through as-is.",[1800,2148,2149,2154],{},[1815,2150,2151],{},[99,2152,2153],{},"reinhard",[1815,2155,2156,2157,2160],{},"Classic ",[99,2158,2159],{},"x \u002F (1 + x)"," curve. Gentle, natural roll-off.",[1800,2162,2163,2168],{},[1815,2164,2165],{},[99,2166,2167],{},"cineon",[1815,2169,2170],{},"Optimized filmic curve. Warm, contrasty highlights.",[1800,2172,2173,2177],{},[1815,2174,2175],{},[99,2176,1536],{},[1815,2178,2179],{},"ACES Filmic. Industry-standard cinematic look — punchy colors, slightly darker overall.",[1800,2181,2182,2187],{},[1815,2183,2184],{},[99,2185,2186],{},"agx",[1815,2188,2189],{},"AgX. Modern operator with the best hue accuracy at high saturation.",[1800,2191,2192,2197],{},[1815,2193,2194],{},[99,2195,2196],{},"neutral",[1815,2198,2199],{},"Khronos Neutral. Accurate, minimal stylization.",[1800,2201,2202,2207],{},[1815,2203,2204],{},[99,2205,2206],{},"hable",[1815,2208,2209],{},"Uncharted 2 \u002F Hable. Warm, smooth whites with a filmic shoulder.",[1800,2211,2212,2217],{},[1815,2213,2214],{},[99,2215,2216],{},"unreal",[1815,2218,2219],{},"Unreal Engine curve. Bright and smooth.",[15,2221,2222,1864,2224,2226,2227,2229,2230,2232],{},[99,2223,1934],{},[99,2225,1549],{}," are independent — they can be combined freely. ",[99,2228,1934],{}," compresses the brightness range of the final image; ",[99,2231,1549],{}," controls the color gamut used for output.",[1504,2234,2235],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":2237},[2238,2239],{"id":1835,"depth":179,"text":1836},{"id":1914,"depth":179,"text":1915},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"\u002Fdocs\u002Fguide\u002Fcolor-space",{"title":1527,"description":2241},"docs\u002Fguide\u002F10.color-space","W8MzsN0s4f5yEfaxEb0_FCLb6CsNfC8O_RAnfSLf-dM",{"id":2249,"title":2250,"body":2251,"category":2240,"description":2479,"exclude":190,"extension":191,"forceFramework":190,"icon":2480,"meta":2481,"navigation":194,"path":2482,"seo":2483,"stem":2484,"__hash__":2485},"guide\u002Fdocs\u002Fguide\u002F11.telemetry.md","Telemetry",{"type":8,"value":2252,"toc":2477},[2253,2256,2259,2270,2273,2474],[11,2254,2250],{"id":2255},"telemetry",[15,2257,2258],{},"Shaders collects anonymous usage data to help improve the library. This includes the domain where the shader is installed and runtime FPS data. No personal information is captured.",[15,2260,2261,2262,2265,2266,2269],{},"Telemetry is ",[159,2263,2264],{},"automatically disabled"," when running on ",[99,2267,2268],{},"localhost"," or in development environments.",[15,2271,2272],{},"To disable it explicitly in production:",[246,2274,2275,2312,2352,2388,2424],{":tabs":1557},[212,2276,2278],{"className":334,"code":2277,"language":336,"meta":178,"style":178},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2279,2280,2296,2304],{"__ignoreMap":178},[220,2281,2282,2284,2286,2289,2291,2294],{"class":222,"line":223},[220,2283,343],{"class":264},[220,2285,347],{"class":346},[220,2287,2288],{"class":226}," :disable-telemetry",[220,2290,353],{"class":264},[220,2292,2293],{"class":230},"\"true\"",[220,2295,359],{"class":264},[220,2297,2298,2300,2302],{"class":222,"line":179},[220,2299,364],{"class":264},[220,2301,367],{"class":346},[220,2303,386],{"class":264},[220,2305,2306,2308,2310],{"class":222,"line":389},[220,2307,402],{"class":264},[220,2309,347],{"class":346},[220,2311,359],{"class":264},[212,2313,2315],{"className":409,"code":2314,"language":411,"meta":178,"style":178},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2316,2317,2336,2344],{"__ignoreMap":178},[220,2318,2319,2321,2323,2326,2328,2330,2333],{"class":222,"line":223},[220,2320,343],{"class":264},[220,2322,347],{"class":420},[220,2324,2325],{"class":226}," disableTelemetry",[220,2327,353],{"class":260},[220,2329,743],{"class":264},[220,2331,2332],{"class":420},"true",[220,2334,2335],{"class":264},"}>\n",[220,2337,2338,2340,2342],{"class":222,"line":179},[220,2339,364],{"class":264},[220,2341,367],{"class":420},[220,2343,386],{"class":264},[220,2345,2346,2348,2350],{"class":222,"line":389},[220,2347,402],{"class":264},[220,2349,347],{"class":420},[220,2351,359],{"class":264},[212,2353,2354],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2355,2356,2372,2380],{"__ignoreMap":178},[220,2357,2358,2360,2362,2364,2366,2368,2370],{"class":222,"line":223},[220,2359,343],{"class":264},[220,2361,347],{"class":420},[220,2363,2325],{"class":226},[220,2365,353],{"class":260},[220,2367,743],{"class":264},[220,2369,2332],{"class":420},[220,2371,2335],{"class":264},[220,2373,2374,2376,2378],{"class":222,"line":179},[220,2375,364],{"class":264},[220,2377,367],{"class":420},[220,2379,386],{"class":264},[220,2381,2382,2384,2386],{"class":222,"line":389},[220,2383,402],{"class":264},[220,2385,347],{"class":420},[220,2387,359],{"class":264},[212,2389,2390],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2391,2392,2408,2416],{"__ignoreMap":178},[220,2393,2394,2396,2398,2400,2402,2404,2406],{"class":222,"line":223},[220,2395,343],{"class":264},[220,2397,347],{"class":420},[220,2399,2325],{"class":226},[220,2401,353],{"class":260},[220,2403,743],{"class":264},[220,2405,2332],{"class":420},[220,2407,2335],{"class":264},[220,2409,2410,2412,2414],{"class":222,"line":179},[220,2411,364],{"class":264},[220,2413,367],{"class":420},[220,2415,386],{"class":264},[220,2417,2418,2420,2422],{"class":222,"line":389},[220,2419,402],{"class":264},[220,2421,347],{"class":420},[220,2423,359],{"class":264},[212,2425,2427],{"className":251,"code":2426,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,2428,2429,2443,2452,2456,2466,2470],{"__ignoreMap":178},[220,2430,2431,2433,2435,2437,2439,2441],{"class":222,"line":223},[220,2432,1735],{"class":260},[220,2434,1738],{"class":420},[220,2436,1741],{"class":260},[220,2438,1744],{"class":260},[220,2440,1747],{"class":226},[220,2442,1750],{"class":264},[220,2444,2445,2448,2450],{"class":222,"line":179},[220,2446,2447],{"class":264}," disableTelemetry: ",[220,2449,2332],{"class":420},[220,2451,1760],{"class":264},[220,2453,2454],{"class":222,"line":389},[220,2455,1765],{"class":264},[220,2457,2458,2460,2463],{"class":222,"line":399},[220,2459,1770],{"class":264},[220,2461,2462],{"class":230},"'LinearGradient'",[220,2464,2465],{"class":264},", props: {} }\n",[220,2467,2468],{"class":222,"line":644},[220,2469,1787],{"class":264},[220,2471,2472],{"class":222,"line":650},[220,2473,1792],{"class":264},[1504,2475,2476],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":2478},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"\u002Fdocs\u002Fguide\u002Ftelemetry",{"title":2250,"description":2479},"docs\u002Fguide\u002F11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2487,"title":2488,"body":2489,"category":2240,"description":4441,"exclude":190,"extension":191,"forceFramework":190,"icon":4442,"meta":4443,"navigation":194,"path":4444,"seo":4445,"stem":4446,"__hash__":4447},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":4430},[2491,2494,2497,2501,2506,3261,3266,3271,3285,3292,3296,3312,3316,3322,3325,3329,3339,4073,4077,4083,4364,4368,4371,4427],[11,2492,2488],{"id":2493},"hooks-events",[15,2495,2496],{},"Shaders provides lifecycle hooks that let you respond to key moments in the rendering pipeline. This is useful for orchestrating UI transitions, hiding loading states, or triggering animations once the shader is ready.",[23,2498,2500],{"id":2499},"onready","onReady",[15,2502,1839,2503,2505],{},[99,2504,2500],{}," hook fires once after the GPU has compiled the shader and the first frame is ready to render. This is the ideal moment to fade in the shader, remove a loading skeleton, or start a dependent animation.",[246,2507,2508,2671,2842,2971,3121],{":tabs":1557},[212,2509,2511],{"className":334,"code":2510,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @ready=\"onShaderReady\" :style=\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst visible = ref(false)\n\nfunction onShaderReady() {\n visible.value = true\n}\n\u003C\u002Fscript>\n",[99,2512,2513,2522,2546,2563,2572,2580,2584,2596,2608,2612,2633,2637,2648,2658,2662],{"__ignoreMap":178},[220,2514,2515,2517,2520],{"class":222,"line":223},[220,2516,343],{"class":264},[220,2518,2519],{"class":346},"template",[220,2521,359],{"class":264},[220,2523,2524,2526,2528,2531,2533,2536,2539,2541,2544],{"class":222,"line":179},[220,2525,364],{"class":264},[220,2527,347],{"class":346},[220,2529,2530],{"class":226}," @ready",[220,2532,353],{"class":264},[220,2534,2535],{"class":230},"\"onShaderReady\"",[220,2537,2538],{"class":226}," :style",[220,2540,353],{"class":264},[220,2542,2543],{"class":230},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[220,2545,359],{"class":264},[220,2547,2548,2551,2554,2556,2558,2561],{"class":222,"line":389},[220,2549,2550],{"class":264}," \u003C",[220,2552,2553],{"class":346},"Circle",[220,2555,1588],{"class":226},[220,2557,353],{"class":264},[220,2559,2560],{"class":230},"\"#ff0088\"",[220,2562,386],{"class":264},[220,2564,2565,2568,2570],{"class":222,"line":399},[220,2566,2567],{"class":264}," \u003C\u002F",[220,2569,347],{"class":346},[220,2571,359],{"class":264},[220,2573,2574,2576,2578],{"class":222,"line":644},[220,2575,402],{"class":264},[220,2577,2519],{"class":346},[220,2579,359],{"class":264},[220,2581,2582],{"class":222,"line":650},[220,2583,647],{"emptyLinePlaceholder":194},[220,2585,2586,2588,2591,2594],{"class":222,"line":656},[220,2587,343],{"class":264},[220,2589,2590],{"class":346},"script",[220,2592,2593],{"class":226}," setup",[220,2595,359],{"class":264},[220,2597,2598,2600,2603,2605],{"class":222,"line":673},[220,2599,261],{"class":260},[220,2601,2602],{"class":264}," { ref } ",[220,2604,268],{"class":260},[220,2606,2607],{"class":230}," 'vue'\n",[220,2609,2610],{"class":222,"line":682},[220,2611,647],{"emptyLinePlaceholder":194},[220,2613,2614,2616,2619,2621,2624,2627,2630],{"class":222,"line":691},[220,2615,1735],{"class":260},[220,2617,2618],{"class":420}," visible",[220,2620,1741],{"class":260},[220,2622,2623],{"class":226}," ref",[220,2625,2626],{"class":264},"(",[220,2628,2629],{"class":420},"false",[220,2631,2632],{"class":264},")\n",[220,2634,2635],{"class":222,"line":696},[220,2636,647],{"emptyLinePlaceholder":194},[220,2638,2639,2642,2645],{"class":222,"line":702},[220,2640,2641],{"class":260},"function",[220,2643,2644],{"class":226}," onShaderReady",[220,2646,2647],{"class":264},"() {\n",[220,2649,2650,2653,2655],{"class":222,"line":718},[220,2651,2652],{"class":264}," visible.value ",[220,2654,353],{"class":260},[220,2656,2657],{"class":420}," true\n",[220,2659,2660],{"class":222,"line":727},[220,2661,749],{"class":264},[220,2663,2665,2667,2669],{"class":222,"line":2664},15,[220,2666,402],{"class":264},[220,2668,2590],{"class":346},[220,2670,359],{"class":264},[212,2672,2674],{"className":409,"code":2673,"language":411,"meta":178,"style":178},"import { useState } from 'react'\n\nfunction App() {\n const [visible, setVisible] = useState(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2675,2676,2688,2692,2701,2731,2735,2743,2750,2773,2804,2809,2824,2833,2838],{"__ignoreMap":178},[220,2677,2678,2680,2683,2685],{"class":222,"line":223},[220,2679,261],{"class":260},[220,2681,2682],{"class":264}," { useState } ",[220,2684,268],{"class":260},[220,2686,2687],{"class":230}," 'react'\n",[220,2689,2690],{"class":222,"line":179},[220,2691,647],{"emptyLinePlaceholder":194},[220,2693,2694,2696,2699],{"class":222,"line":389},[220,2695,2641],{"class":260},[220,2697,2698],{"class":226}," App",[220,2700,2647],{"class":264},[220,2702,2703,2706,2709,2712,2714,2717,2720,2722,2725,2727,2729],{"class":222,"line":399},[220,2704,2705],{"class":260}," const",[220,2707,2708],{"class":264}," [",[220,2710,2711],{"class":420},"visible",[220,2713,1895],{"class":264},[220,2715,2716],{"class":420},"setVisible",[220,2718,2719],{"class":264},"] ",[220,2721,353],{"class":260},[220,2723,2724],{"class":226}," useState",[220,2726,2626],{"class":264},[220,2728,2629],{"class":420},[220,2730,2632],{"class":264},[220,2732,2733],{"class":222,"line":644},[220,2734,647],{"emptyLinePlaceholder":194},[220,2736,2737,2740],{"class":222,"line":650},[220,2738,2739],{"class":260}," return",[220,2741,2742],{"class":264}," (\n",[220,2744,2745,2747],{"class":222,"line":656},[220,2746,2550],{"class":264},[220,2748,2749],{"class":420},"Shader\n",[220,2751,2752,2755,2757,2760,2763,2766,2768,2770],{"class":222,"line":673},[220,2753,2754],{"class":226}," onReady",[220,2756,353],{"class":260},[220,2758,2759],{"class":264},"{() ",[220,2761,2762],{"class":260},"=>",[220,2764,2765],{"class":226}," setVisible",[220,2767,2626],{"class":264},[220,2769,2332],{"class":420},[220,2771,2772],{"class":264},")}\n",[220,2774,2775,2778,2780,2783,2786,2789,2792,2795,2798,2801],{"class":222,"line":682},[220,2776,2777],{"class":226}," style",[220,2779,353],{"class":260},[220,2781,2782],{"class":264},"{{ opacity: visible ",[220,2784,2785],{"class":260},"?",[220,2787,2788],{"class":420}," 1",[220,2790,2791],{"class":260}," :",[220,2793,2794],{"class":420}," 0",[220,2796,2797],{"class":264},", transition: ",[220,2799,2800],{"class":230},"'opacity 0.5s'",[220,2802,2803],{"class":264}," }}\n",[220,2805,2806],{"class":222,"line":691},[220,2807,2808],{"class":264}," >\n",[220,2810,2811,2814,2816,2818,2820,2822],{"class":222,"line":696},[220,2812,2813],{"class":264}," \u003C",[220,2815,2553],{"class":420},[220,2817,1588],{"class":226},[220,2819,353],{"class":260},[220,2821,2560],{"class":230},[220,2823,386],{"class":264},[220,2825,2826,2829,2831],{"class":222,"line":702},[220,2827,2828],{"class":264}," \u003C\u002F",[220,2830,347],{"class":420},[220,2832,359],{"class":264},[220,2834,2835],{"class":222,"line":718},[220,2836,2837],{"class":264}," )\n",[220,2839,2840],{"class":222,"line":727},[220,2841,749],{"class":264},[212,2843,2847],{"className":2844,"code":2845,"language":2846,"meta":178,"style":178},"language-svelte shiki shiki-themes github-dark","\u003Cscript>\n let visible = $state(false)\n\u003C\u002Fscript>\n\n\u003CShader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition=\"opacity 0.5s\">\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n","svelte",[99,2848,2849,2857,2879,2887,2891,2949,2963],{"__ignoreMap":178},[220,2850,2851,2853,2855],{"class":222,"line":223},[220,2852,343],{"class":264},[220,2854,2590],{"class":346},[220,2856,359],{"class":264},[220,2858,2859,2862,2865,2867,2870,2873,2875,2877],{"class":222,"line":179},[220,2860,2861],{"class":260}," let",[220,2863,2864],{"class":264}," visible ",[220,2866,353],{"class":260},[220,2868,2869],{"class":264}," $",[220,2871,2872],{"class":226},"state",[220,2874,2626],{"class":264},[220,2876,2629],{"class":420},[220,2878,2632],{"class":264},[220,2880,2881,2883,2885],{"class":222,"line":389},[220,2882,402],{"class":264},[220,2884,2590],{"class":346},[220,2886,359],{"class":264},[220,2888,2889],{"class":222,"line":399},[220,2890,647],{"emptyLinePlaceholder":194},[220,2892,2893,2895,2897,2900,2903,2905,2907,2909,2912,2915,2917,2919,2922,2925,2927,2929,2931,2933,2935,2937,2939,2942,2944,2947],{"class":222,"line":644},[220,2894,343],{"class":264},[220,2896,347],{"class":420},[220,2898,2899],{"class":226}," onready",[220,2901,2902],{"class":264},"={() ",[220,2904,2762],{"class":260},[220,2906,2864],{"class":264},[220,2908,353],{"class":260},[220,2910,2911],{"class":420}," true",[220,2913,2914],{"class":264},"} ",[220,2916,1504],{"class":226},[220,2918,1554],{"class":264},[220,2920,2921],{"class":420},"opacity",[220,2923,2924],{"class":264},"={visible ",[220,2926,2785],{"class":260},[220,2928,2788],{"class":420},[220,2930,2791],{"class":260},[220,2932,2794],{"class":420},[220,2934,2914],{"class":264},[220,2936,1504],{"class":226},[220,2938,1554],{"class":264},[220,2940,2941],{"class":420},"transition",[220,2943,353],{"class":264},[220,2945,2946],{"class":230},"\"opacity 0.5s\"",[220,2948,359],{"class":264},[220,2950,2951,2953,2955,2957,2959,2961],{"class":222,"line":650},[220,2952,364],{"class":264},[220,2954,2553],{"class":420},[220,2956,1588],{"class":226},[220,2958,353],{"class":264},[220,2960,2560],{"class":230},[220,2962,386],{"class":264},[220,2964,2965,2967,2969],{"class":222,"line":656},[220,2966,402],{"class":264},[220,2968,347],{"class":420},[220,2970,359],{"class":264},[212,2972,2974],{"className":468,"code":2973,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\n\nfunction App() {\n const [visible, setVisible] = createSignal(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible() ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2975,2976,2988,2992,3000,3025,3029,3035,3041,3059,3087,3091,3105,3113,3117],{"__ignoreMap":178},[220,2977,2978,2980,2983,2985],{"class":222,"line":223},[220,2979,261],{"class":260},[220,2981,2982],{"class":264}," { createSignal } ",[220,2984,268],{"class":260},[220,2986,2987],{"class":230}," 'solid-js'\n",[220,2989,2990],{"class":222,"line":179},[220,2991,647],{"emptyLinePlaceholder":194},[220,2993,2994,2996,2998],{"class":222,"line":389},[220,2995,2641],{"class":260},[220,2997,2698],{"class":226},[220,2999,2647],{"class":264},[220,3001,3002,3004,3006,3008,3010,3012,3014,3016,3019,3021,3023],{"class":222,"line":399},[220,3003,2705],{"class":260},[220,3005,2708],{"class":264},[220,3007,2711],{"class":420},[220,3009,1895],{"class":264},[220,3011,2716],{"class":420},[220,3013,2719],{"class":264},[220,3015,353],{"class":260},[220,3017,3018],{"class":226}," createSignal",[220,3020,2626],{"class":264},[220,3022,2629],{"class":420},[220,3024,2632],{"class":264},[220,3026,3027],{"class":222,"line":644},[220,3028,647],{"emptyLinePlaceholder":194},[220,3030,3031,3033],{"class":222,"line":650},[220,3032,2739],{"class":260},[220,3034,2742],{"class":264},[220,3036,3037,3039],{"class":222,"line":656},[220,3038,2550],{"class":264},[220,3040,2749],{"class":420},[220,3042,3043,3045,3047,3049,3051,3053,3055,3057],{"class":222,"line":673},[220,3044,2754],{"class":226},[220,3046,353],{"class":260},[220,3048,2759],{"class":264},[220,3050,2762],{"class":260},[220,3052,2765],{"class":226},[220,3054,2626],{"class":264},[220,3056,2332],{"class":420},[220,3058,2772],{"class":264},[220,3060,3061,3063,3065,3068,3070,3073,3075,3077,3079,3081,3083,3085],{"class":222,"line":682},[220,3062,2777],{"class":226},[220,3064,353],{"class":260},[220,3066,3067],{"class":264},"{{ opacity: ",[220,3069,2711],{"class":226},[220,3071,3072],{"class":264},"() ",[220,3074,2785],{"class":260},[220,3076,2788],{"class":420},[220,3078,2791],{"class":260},[220,3080,2794],{"class":420},[220,3082,2797],{"class":264},[220,3084,2800],{"class":230},[220,3086,2803],{"class":264},[220,3088,3089],{"class":222,"line":691},[220,3090,2808],{"class":264},[220,3092,3093,3095,3097,3099,3101,3103],{"class":222,"line":696},[220,3094,2813],{"class":264},[220,3096,2553],{"class":420},[220,3098,1588],{"class":226},[220,3100,353],{"class":260},[220,3102,2560],{"class":230},[220,3104,386],{"class":264},[220,3106,3107,3109,3111],{"class":222,"line":702},[220,3108,2828],{"class":264},[220,3110,347],{"class":420},[220,3112,359],{"class":264},[220,3114,3115],{"class":222,"line":718},[220,3116,2837],{"class":264},[220,3118,3119],{"class":222,"line":727},[220,3120,749],{"class":264},[212,3122,3125],{"className":3123,"code":3124,"language":1518,"meta":178,"style":178},"language-js shiki shiki-themes github-dark","const canvas = document.getElementById('my-canvas')\n\n\u002F\u002F Start hidden\ncanvas.style.opacity = '0'\ncanvas.style.transition = 'opacity 0.5s'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }\n ]\n}, {\n onReady: () => {\n canvas.style.opacity = '1'\n }\n})\n",[99,3126,3127,3149,3153,3158,3168,3178,3182,3196,3200,3220,3224,3229,3242,3252,3257],{"__ignoreMap":178},[220,3128,3129,3131,3134,3136,3139,3142,3144,3147],{"class":222,"line":223},[220,3130,1735],{"class":260},[220,3132,3133],{"class":420}," canvas",[220,3135,1741],{"class":260},[220,3137,3138],{"class":264}," document.",[220,3140,3141],{"class":226},"getElementById",[220,3143,2626],{"class":264},[220,3145,3146],{"class":230},"'my-canvas'",[220,3148,2632],{"class":264},[220,3150,3151],{"class":222,"line":179},[220,3152,647],{"emptyLinePlaceholder":194},[220,3154,3155],{"class":222,"line":389},[220,3156,3157],{"class":609},"\u002F\u002F Start hidden\n",[220,3159,3160,3163,3165],{"class":222,"line":399},[220,3161,3162],{"class":264},"canvas.style.opacity ",[220,3164,353],{"class":260},[220,3166,3167],{"class":230}," '0'\n",[220,3169,3170,3173,3175],{"class":222,"line":644},[220,3171,3172],{"class":264},"canvas.style.transition ",[220,3174,353],{"class":260},[220,3176,3177],{"class":230}," 'opacity 0.5s'\n",[220,3179,3180],{"class":222,"line":650},[220,3181,647],{"emptyLinePlaceholder":194},[220,3183,3184,3186,3188,3190,3192,3194],{"class":222,"line":656},[220,3185,1735],{"class":260},[220,3187,1738],{"class":420},[220,3189,1741],{"class":260},[220,3191,1744],{"class":260},[220,3193,1747],{"class":226},[220,3195,1750],{"class":264},[220,3197,3198],{"class":222,"line":673},[220,3199,1765],{"class":264},[220,3201,3202,3204,3207,3210,3213,3215,3218],{"class":222,"line":682},[220,3203,1770],{"class":264},[220,3205,3206],{"class":230},"'Circle'",[220,3208,3209],{"class":264},", id: ",[220,3211,3212],{"class":230},"'c1'",[220,3214,1776],{"class":264},[220,3216,3217],{"class":230},"'#ff0088'",[220,3219,1782],{"class":264},[220,3221,3222],{"class":222,"line":691},[220,3223,1787],{"class":264},[220,3225,3226],{"class":222,"line":696},[220,3227,3228],{"class":264},"}, {\n",[220,3230,3231,3234,3237,3239],{"class":222,"line":702},[220,3232,3233],{"class":226}," onReady",[220,3235,3236],{"class":264},": () ",[220,3238,2762],{"class":260},[220,3240,3241],{"class":264}," {\n",[220,3243,3244,3247,3249],{"class":222,"line":718},[220,3245,3246],{"class":264}," canvas.style.opacity ",[220,3248,353],{"class":260},[220,3250,3251],{"class":230}," '1'\n",[220,3253,3254],{"class":222,"line":727},[220,3255,3256],{"class":264}," }\n",[220,3258,3259],{"class":222,"line":2664},[220,3260,1792],{"class":264},[3262,3263,3265],"h3",{"id":3264},"timing","Timing",[15,3267,3268,3270],{},[99,3269,2500],{}," fires after the shader's node tree has been compiled into a GPU pipeline and is actively rendering. This means:",[34,3272,3273,3276,3279,3282],{},[37,3274,3275],{},"The WebGPU renderer is initialized",[37,3277,3278],{},"All child shader components have registered",[37,3280,3281],{},"The composed shader pipeline has been compiled",[37,3283,3284],{},"The first frame is ready to display",[15,3286,3287,3288,3291],{},"The callback fires ",[159,3289,3290],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3262,3293,3295],{"id":3294},"notes","Notes",[34,3297,3298,3303],{},[37,3299,3300,3302],{},[99,3301,2500],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[37,3304,3305,3306,3308,3309,3311],{},"If the ",[99,3307,101],{}," component starts off-screen and initializes lazily when scrolled into view, ",[99,3310,2500],{}," fires after that deferred initialization completes",[23,3313,3315],{"id":3314},"unsupported-browsers","Unsupported browsers",[15,3317,3318,3319,3321],{},"Shaders is WebGPU-only. On a browser or driver that can't provide a working GPU device — an\nolder Safari, Firefox with WebGPU still behind a flag, a blocklisted or exhausted driver — the\ncanvas simply stays transparent. ",[99,3320,2500],{}," never fires, nothing is written to the console, and\nthe rest of your page is completely unaffected.",[15,3323,3324],{},"If you want to render your own fallback instead of empty space, you have two options.",[3262,3326,3328],{"id":3327},"check-before-you-mount","Check before you mount",[15,3330,3331,3334,3335,3338],{},[99,3332,3333],{},"isWebGPUSupported()"," is a synchronous check for whether the browser exposes WebGPU at all.\n",[99,3336,3337],{},"getWebGPUSupport()"," goes further and actually asks for an adapter, so it also catches\nblocklisted drivers — its result is cached for the page.",[246,3340,3341,3529,3698,3818,3991],{":tabs":1557},[212,3342,3344],{"className":334,"code":3343,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader v-if=\"supported\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv v-else class=\"fallback\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fvue'\n\nconst supported = ref(false)\nonMounted(async () => {\n supported.value = (await getWebGPUSupport()).supported\n})\n\u003C\u002Fscript>\n",[99,3345,3346,3354,3370,3384,3392,3415,3423,3427,3437,3448,3459,3463,3480,3497,3516,3520],{"__ignoreMap":178},[220,3347,3348,3350,3352],{"class":222,"line":223},[220,3349,343],{"class":264},[220,3351,2519],{"class":346},[220,3353,359],{"class":264},[220,3355,3356,3358,3360,3363,3365,3368],{"class":222,"line":179},[220,3357,364],{"class":264},[220,3359,347],{"class":346},[220,3361,3362],{"class":226}," v-if",[220,3364,353],{"class":264},[220,3366,3367],{"class":230},"\"supported\"",[220,3369,359],{"class":264},[220,3371,3372,3374,3376,3378,3380,3382],{"class":222,"line":389},[220,3373,2550],{"class":264},[220,3375,2553],{"class":346},[220,3377,1588],{"class":226},[220,3379,353],{"class":264},[220,3381,2560],{"class":230},[220,3383,386],{"class":264},[220,3385,3386,3388,3390],{"class":222,"line":399},[220,3387,2567],{"class":264},[220,3389,347],{"class":346},[220,3391,359],{"class":264},[220,3393,3394,3396,3399,3402,3404,3406,3409,3413],{"class":222,"line":644},[220,3395,364],{"class":264},[220,3397,3398],{"class":346},"div",[220,3400,3401],{"class":226}," v-else",[220,3403,350],{"class":226},[220,3405,353],{"class":264},[220,3407,3408],{"class":230},"\"fallback\"",[220,3410,3412],{"class":3411},"s6RL2"," \u002F",[220,3414,359],{"class":264},[220,3416,3417,3419,3421],{"class":222,"line":650},[220,3418,402],{"class":264},[220,3420,2519],{"class":346},[220,3422,359],{"class":264},[220,3424,3425],{"class":222,"line":656},[220,3426,647],{"emptyLinePlaceholder":194},[220,3428,3429,3431,3433,3435],{"class":222,"line":673},[220,3430,343],{"class":264},[220,3432,2590],{"class":346},[220,3434,2593],{"class":226},[220,3436,359],{"class":264},[220,3438,3439,3441,3444,3446],{"class":222,"line":682},[220,3440,261],{"class":260},[220,3442,3443],{"class":264}," { ref, onMounted } ",[220,3445,268],{"class":260},[220,3447,2607],{"class":230},[220,3449,3450,3452,3455,3457],{"class":222,"line":691},[220,3451,261],{"class":260},[220,3453,3454],{"class":264}," { Shader, Circle, getWebGPUSupport } ",[220,3456,268],{"class":260},[220,3458,271],{"class":230},[220,3460,3461],{"class":222,"line":696},[220,3462,647],{"emptyLinePlaceholder":194},[220,3464,3465,3467,3470,3472,3474,3476,3478],{"class":222,"line":702},[220,3466,1735],{"class":260},[220,3468,3469],{"class":420}," supported",[220,3471,1741],{"class":260},[220,3473,2623],{"class":226},[220,3475,2626],{"class":264},[220,3477,2629],{"class":420},[220,3479,2632],{"class":264},[220,3481,3482,3485,3487,3490,3493,3495],{"class":222,"line":718},[220,3483,3484],{"class":226},"onMounted",[220,3486,2626],{"class":264},[220,3488,3489],{"class":260},"async",[220,3491,3492],{"class":264}," () ",[220,3494,2762],{"class":260},[220,3496,3241],{"class":264},[220,3498,3499,3502,3504,3507,3510,3513],{"class":222,"line":727},[220,3500,3501],{"class":264}," supported.value ",[220,3503,353],{"class":260},[220,3505,3506],{"class":264}," (",[220,3508,3509],{"class":260},"await",[220,3511,3512],{"class":226}," getWebGPUSupport",[220,3514,3515],{"class":264},"()).supported\n",[220,3517,3518],{"class":222,"line":2664},[220,3519,1792],{"class":264},[220,3521,3523,3525,3527],{"class":222,"line":3522},16,[220,3524,402],{"class":264},[220,3526,2590],{"class":346},[220,3528,359],{"class":264},[212,3530,3532],{"className":409,"code":3531,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Freact'\n\nfunction App() {\n const [supported, setSupported] = useState(false)\n useEffect(() => {\n getWebGPUSupport().then(({ supported }) => setSupported(supported))\n }, [])\n\n return supported\n ? \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n : \u003Cdiv className=\"fallback\" \u002F>\n}\n",[99,3533,3534,3545,3555,3559,3567,3593,3605,3633,3638,3642,3649,3677,3694],{"__ignoreMap":178},[220,3535,3536,3538,3541,3543],{"class":222,"line":223},[220,3537,261],{"class":260},[220,3539,3540],{"class":264}," { useState, useEffect } ",[220,3542,268],{"class":260},[220,3544,2687],{"class":230},[220,3546,3547,3549,3551,3553],{"class":222,"line":179},[220,3548,261],{"class":260},[220,3550,3454],{"class":264},[220,3552,268],{"class":260},[220,3554,287],{"class":230},[220,3556,3557],{"class":222,"line":389},[220,3558,647],{"emptyLinePlaceholder":194},[220,3560,3561,3563,3565],{"class":222,"line":399},[220,3562,2641],{"class":260},[220,3564,2698],{"class":226},[220,3566,2647],{"class":264},[220,3568,3569,3571,3573,3576,3578,3581,3583,3585,3587,3589,3591],{"class":222,"line":644},[220,3570,2705],{"class":260},[220,3572,2708],{"class":264},[220,3574,3575],{"class":420},"supported",[220,3577,1895],{"class":264},[220,3579,3580],{"class":420},"setSupported",[220,3582,2719],{"class":264},[220,3584,353],{"class":260},[220,3586,2724],{"class":226},[220,3588,2626],{"class":264},[220,3590,2629],{"class":420},[220,3592,2632],{"class":264},[220,3594,3595,3598,3601,3603],{"class":222,"line":650},[220,3596,3597],{"class":226}," useEffect",[220,3599,3600],{"class":264},"(() ",[220,3602,2762],{"class":260},[220,3604,3241],{"class":264},[220,3606,3607,3610,3613,3616,3619,3622,3625,3627,3630],{"class":222,"line":656},[220,3608,3609],{"class":226}," getWebGPUSupport",[220,3611,3612],{"class":264},"().",[220,3614,3615],{"class":226},"then",[220,3617,3618],{"class":264},"(({ ",[220,3620,3575],{"class":3621},"s9osk",[220,3623,3624],{"class":264}," }) ",[220,3626,2762],{"class":260},[220,3628,3629],{"class":226}," setSupported",[220,3631,3632],{"class":264},"(supported))\n",[220,3634,3635],{"class":222,"line":673},[220,3636,3637],{"class":264}," }, [])\n",[220,3639,3640],{"class":222,"line":682},[220,3641,647],{"emptyLinePlaceholder":194},[220,3643,3644,3646],{"class":222,"line":691},[220,3645,2739],{"class":260},[220,3647,3648],{"class":264}," supported\n",[220,3650,3651,3654,3657,3659,3662,3664,3666,3668,3670,3673,3675],{"class":222,"line":696},[220,3652,3653],{"class":260}," ?",[220,3655,3656],{"class":264}," \u003C",[220,3658,347],{"class":420},[220,3660,3661],{"class":264},">\u003C",[220,3663,2553],{"class":420},[220,3665,1588],{"class":226},[220,3667,353],{"class":260},[220,3669,2560],{"class":230},[220,3671,3672],{"class":264}," \u002F>\u003C\u002F",[220,3674,347],{"class":420},[220,3676,359],{"class":264},[220,3678,3679,3682,3684,3686,3688,3690,3692],{"class":222,"line":702},[220,3680,3681],{"class":260}," :",[220,3683,3656],{"class":264},[220,3685,3398],{"class":346},[220,3687,423],{"class":226},[220,3689,353],{"class":260},[220,3691,3408],{"class":230},[220,3693,386],{"class":264},[220,3695,3696],{"class":222,"line":718},[220,3697,749],{"class":264},[212,3699,3701],{"className":468,"code":3700,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n\n let supported = $state(false)\n getWebGPUSupport().then((info) => { supported = info.supported })\n\u003C\u002Fscript>\n\n{#if supported}\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n{:else}\n \u003Cdiv class=\"fallback\">\u003C\u002Fdiv>\n{\u002Fif}\n",[99,3702,3703,3711,3716,3720,3725,3735,3743,3747,3758,3780,3790,3809],{"__ignoreMap":178},[220,3704,3705,3707,3709],{"class":222,"line":223},[220,3706,343],{"class":264},[220,3708,2590],{"class":346},[220,3710,359],{"class":264},[220,3712,3713],{"class":222,"line":179},[220,3714,3715],{"class":264}," import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n",[220,3717,3718],{"class":222,"line":389},[220,3719,647],{"emptyLinePlaceholder":194},[220,3721,3722],{"class":222,"line":399},[220,3723,3724],{"class":264}," let supported = $state(false)\n",[220,3726,3727,3730,3732],{"class":222,"line":644},[220,3728,3729],{"class":264}," getWebGPUSupport().then((info) => { supported ",[220,3731,353],{"class":260},[220,3733,3734],{"class":264}," info.supported })\n",[220,3736,3737,3739,3741],{"class":222,"line":650},[220,3738,402],{"class":264},[220,3740,2590],{"class":346},[220,3742,359],{"class":264},[220,3744,3745],{"class":222,"line":656},[220,3746,647],{"emptyLinePlaceholder":194},[220,3748,3749,3752,3755],{"class":222,"line":673},[220,3750,3751],{"class":264},"{#",[220,3753,3754],{"class":260},"if",[220,3756,3757],{"class":264}," supported}\n",[220,3759,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":222,"line":682},[220,3761,364],{"class":264},[220,3763,347],{"class":420},[220,3765,3661],{"class":264},[220,3767,2553],{"class":420},[220,3769,1588],{"class":226},[220,3771,353],{"class":260},[220,3773,2560],{"class":230},[220,3775,3672],{"class":264},[220,3777,347],{"class":420},[220,3779,359],{"class":264},[220,3781,3782,3785,3788],{"class":222,"line":691},[220,3783,3784],{"class":264},"{:",[220,3786,3787],{"class":260},"else",[220,3789,749],{"class":264},[220,3791,3792,3794,3796,3798,3800,3802,3805,3807],{"class":222,"line":696},[220,3793,364],{"class":264},[220,3795,3398],{"class":346},[220,3797,350],{"class":226},[220,3799,353],{"class":260},[220,3801,3408],{"class":230},[220,3803,3804],{"class":264},">\u003C\u002F",[220,3806,3398],{"class":346},[220,3808,359],{"class":264},[220,3810,3811,3813,3816],{"class":222,"line":702},[220,3812,743],{"class":264},[220,3814,3815],{"class":260},"\u002Fif",[220,3817,749],{"class":264},[212,3819,3821],{"className":409,"code":3820,"language":411,"meta":178,"style":178},"import { createSignal, onMount, Show } from 'solid-js'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsolid'\n\nfunction App() {\n const [supported, setSupported] = createSignal(false)\n onMount(async () => setSupported((await getWebGPUSupport()).supported))\n\n return (\n \u003CShow when={supported()} fallback={\u003Cdiv class=\"fallback\" \u002F>}>\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n \u003C\u002FShow>\n )\n}\n",[99,3822,3823,3834,3844,3848,3856,3880,3905,3909,3915,3953,3975,3983,3987],{"__ignoreMap":178},[220,3824,3825,3827,3830,3832],{"class":222,"line":223},[220,3826,261],{"class":260},[220,3828,3829],{"class":264}," { createSignal, onMount, Show } ",[220,3831,268],{"class":260},[220,3833,2987],{"class":230},[220,3835,3836,3838,3840,3842],{"class":222,"line":179},[220,3837,261],{"class":260},[220,3839,3454],{"class":264},[220,3841,268],{"class":260},[220,3843,319],{"class":230},[220,3845,3846],{"class":222,"line":389},[220,3847,647],{"emptyLinePlaceholder":194},[220,3849,3850,3852,3854],{"class":222,"line":399},[220,3851,2641],{"class":260},[220,3853,2698],{"class":226},[220,3855,2647],{"class":264},[220,3857,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878],{"class":222,"line":644},[220,3859,2705],{"class":260},[220,3861,2708],{"class":264},[220,3863,3575],{"class":420},[220,3865,1895],{"class":264},[220,3867,3580],{"class":420},[220,3869,2719],{"class":264},[220,3871,353],{"class":260},[220,3873,3018],{"class":226},[220,3875,2626],{"class":264},[220,3877,2629],{"class":420},[220,3879,2632],{"class":264},[220,3881,3882,3885,3887,3889,3891,3893,3895,3898,3900,3902],{"class":222,"line":650},[220,3883,3884],{"class":226}," onMount",[220,3886,2626],{"class":264},[220,3888,3489],{"class":260},[220,3890,3492],{"class":264},[220,3892,2762],{"class":260},[220,3894,3629],{"class":226},[220,3896,3897],{"class":264},"((",[220,3899,3509],{"class":260},[220,3901,3512],{"class":226},[220,3903,3904],{"class":264},"()).supported))\n",[220,3906,3907],{"class":222,"line":656},[220,3908,647],{"emptyLinePlaceholder":194},[220,3910,3911,3913],{"class":222,"line":673},[220,3912,2739],{"class":260},[220,3914,2742],{"class":264},[220,3916,3917,3919,3922,3925,3927,3929,3931,3934,3937,3939,3942,3944,3946,3948,3950],{"class":222,"line":682},[220,3918,2550],{"class":264},[220,3920,3921],{"class":420},"Show",[220,3923,3924],{"class":226}," when",[220,3926,353],{"class":260},[220,3928,743],{"class":264},[220,3930,3575],{"class":226},[220,3932,3933],{"class":264},"()} ",[220,3935,3936],{"class":226},"fallback",[220,3938,353],{"class":260},[220,3940,3941],{"class":264},"{\u003C",[220,3943,3398],{"class":346},[220,3945,350],{"class":226},[220,3947,353],{"class":260},[220,3949,3408],{"class":230},[220,3951,3952],{"class":264}," \u002F>}>\n",[220,3954,3955,3957,3959,3961,3963,3965,3967,3969,3971,3973],{"class":222,"line":691},[220,3956,2813],{"class":264},[220,3958,347],{"class":420},[220,3960,3661],{"class":264},[220,3962,2553],{"class":420},[220,3964,1588],{"class":226},[220,3966,353],{"class":260},[220,3968,2560],{"class":230},[220,3970,3672],{"class":264},[220,3972,347],{"class":420},[220,3974,359],{"class":264},[220,3976,3977,3979,3981],{"class":222,"line":696},[220,3978,2828],{"class":264},[220,3980,3921],{"class":420},[220,3982,359],{"class":264},[220,3984,3985],{"class":222,"line":702},[220,3986,2837],{"class":264},[220,3988,3989],{"class":222,"line":718},[220,3990,749],{"class":264},[212,3992,3994],{"className":3123,"code":3993,"language":1518,"meta":178,"style":178},"import { createShader, getWebGPUSupport } from 'shaders\u002Fjs'\n\nconst { supported } = await getWebGPUSupport()\nif (supported) {\n await createShader(canvas, preset)\n} else {\n canvas.replaceWith(fallbackElement)\n}\n",[99,3995,3996,4008,4012,4033,4040,4050,4058,4069],{"__ignoreMap":178},[220,3997,3998,4000,4003,4005],{"class":222,"line":223},[220,3999,261],{"class":260},[220,4001,4002],{"class":264}," { createShader, getWebGPUSupport } ",[220,4004,268],{"class":260},[220,4006,4007],{"class":230}," 'shaders\u002Fjs'\n",[220,4009,4010],{"class":222,"line":179},[220,4011,647],{"emptyLinePlaceholder":194},[220,4013,4014,4016,4019,4021,4024,4026,4028,4030],{"class":222,"line":389},[220,4015,1735],{"class":260},[220,4017,4018],{"class":264}," { ",[220,4020,3575],{"class":420},[220,4022,4023],{"class":264}," } ",[220,4025,353],{"class":260},[220,4027,1744],{"class":260},[220,4029,3512],{"class":226},[220,4031,4032],{"class":264},"()\n",[220,4034,4035,4037],{"class":222,"line":399},[220,4036,3754],{"class":260},[220,4038,4039],{"class":264}," (supported) {\n",[220,4041,4042,4045,4047],{"class":222,"line":644},[220,4043,4044],{"class":260}," await",[220,4046,1747],{"class":226},[220,4048,4049],{"class":264},"(canvas, preset)\n",[220,4051,4052,4054,4056],{"class":222,"line":650},[220,4053,2914],{"class":264},[220,4055,3787],{"class":260},[220,4057,3241],{"class":264},[220,4059,4060,4063,4066],{"class":222,"line":656},[220,4061,4062],{"class":264}," canvas.",[220,4064,4065],{"class":226},"replaceWith",[220,4067,4068],{"class":264},"(fallbackElement)\n",[220,4070,4071],{"class":222,"line":673},[220,4072,749],{"class":264},[3262,4074,4076],{"id":4075},"react-to-it-after-the-fact","React to it after the fact",[15,4078,1839,4079,4082],{},[99,4080,4081],{},"unavailable"," event fires at most once if the GPU can't be used — either because it was\nnever available, or because it became unusable later (device loss with no recovery, an\nout-of-memory refusal, a driver that can't run the compiled pipeline). By the time it fires the\ncanvas has already been cleared and every GPU resource released.",[246,4084,4085,4144,4203,4254,4303],{":tabs":1557},[212,4086,4088],{"className":334,"code":4087,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @unavailable=\"showFallback = true\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,4089,4090,4098,4114,4128,4136],{"__ignoreMap":178},[220,4091,4092,4094,4096],{"class":222,"line":223},[220,4093,343],{"class":264},[220,4095,2519],{"class":346},[220,4097,359],{"class":264},[220,4099,4100,4102,4104,4107,4109,4112],{"class":222,"line":179},[220,4101,364],{"class":264},[220,4103,347],{"class":346},[220,4105,4106],{"class":226}," @unavailable",[220,4108,353],{"class":264},[220,4110,4111],{"class":230},"\"showFallback = true\"",[220,4113,359],{"class":264},[220,4115,4116,4118,4120,4122,4124,4126],{"class":222,"line":389},[220,4117,2550],{"class":264},[220,4119,2553],{"class":346},[220,4121,1588],{"class":226},[220,4123,353],{"class":264},[220,4125,2560],{"class":230},[220,4127,386],{"class":264},[220,4129,4130,4132,4134],{"class":222,"line":399},[220,4131,2567],{"class":264},[220,4133,347],{"class":346},[220,4135,359],{"class":264},[220,4137,4138,4140,4142],{"class":222,"line":644},[220,4139,402],{"class":264},[220,4141,2519],{"class":346},[220,4143,359],{"class":264},[212,4145,4147],{"className":409,"code":4146,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={(reason) => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4148,4149,4181,4195],{"__ignoreMap":178},[220,4150,4151,4153,4155,4158,4160,4163,4166,4169,4171,4174,4176,4178],{"class":222,"line":223},[220,4152,343],{"class":264},[220,4154,347],{"class":420},[220,4156,4157],{"class":226}," onUnavailable",[220,4159,353],{"class":260},[220,4161,4162],{"class":264},"{(",[220,4164,4165],{"class":3621},"reason",[220,4167,4168],{"class":264},") ",[220,4170,2762],{"class":260},[220,4172,4173],{"class":226}," setShowFallback",[220,4175,2626],{"class":264},[220,4177,2332],{"class":420},[220,4179,4180],{"class":264},")}>\n",[220,4182,4183,4185,4187,4189,4191,4193],{"class":222,"line":179},[220,4184,364],{"class":264},[220,4186,2553],{"class":420},[220,4188,1588],{"class":226},[220,4190,353],{"class":260},[220,4192,2560],{"class":230},[220,4194,386],{"class":264},[220,4196,4197,4199,4201],{"class":222,"line":389},[220,4198,402],{"class":264},[220,4200,347],{"class":420},[220,4202,359],{"class":264},[212,4204,4206],{"className":468,"code":4205,"language":469,"meta":178,"style":178},"\u003CShader onunavailable={() => (showFallback = true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4207,4208,4232,4246],{"__ignoreMap":178},[220,4209,4210,4212,4214,4217,4219,4221,4223,4226,4228,4230],{"class":222,"line":223},[220,4211,343],{"class":264},[220,4213,347],{"class":420},[220,4215,4216],{"class":226}," onunavailable",[220,4218,353],{"class":260},[220,4220,2759],{"class":264},[220,4222,2762],{"class":260},[220,4224,4225],{"class":264}," (showFallback ",[220,4227,353],{"class":260},[220,4229,2911],{"class":420},[220,4231,4180],{"class":264},[220,4233,4234,4236,4238,4240,4242,4244],{"class":222,"line":179},[220,4235,364],{"class":264},[220,4237,2553],{"class":420},[220,4239,1588],{"class":226},[220,4241,353],{"class":260},[220,4243,2560],{"class":230},[220,4245,386],{"class":264},[220,4247,4248,4250,4252],{"class":222,"line":389},[220,4249,402],{"class":264},[220,4251,347],{"class":420},[220,4253,359],{"class":264},[212,4255,4257],{"className":409,"code":4256,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={() => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4258,4259,4281,4295],{"__ignoreMap":178},[220,4260,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279],{"class":222,"line":223},[220,4262,343],{"class":264},[220,4264,347],{"class":420},[220,4266,4157],{"class":226},[220,4268,353],{"class":260},[220,4270,2759],{"class":264},[220,4272,2762],{"class":260},[220,4274,4173],{"class":226},[220,4276,2626],{"class":264},[220,4278,2332],{"class":420},[220,4280,4180],{"class":264},[220,4282,4283,4285,4287,4289,4291,4293],{"class":222,"line":179},[220,4284,364],{"class":264},[220,4286,2553],{"class":420},[220,4288,1588],{"class":226},[220,4290,353],{"class":260},[220,4292,2560],{"class":230},[220,4294,386],{"class":264},[220,4296,4297,4299,4301],{"class":222,"line":389},[220,4298,402],{"class":264},[220,4300,347],{"class":420},[220,4302,359],{"class":264},[212,4304,4306],{"className":3123,"code":4305,"language":1518,"meta":178,"style":178},"await createShader(canvas, preset, {\n onError: (reason) => {\n \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n showFallback(reason)\n }\n})\n",[99,4307,4308,4317,4333,4338,4343,4348,4356,4360],{"__ignoreMap":178},[220,4309,4310,4312,4314],{"class":222,"line":223},[220,4311,3509],{"class":260},[220,4313,1747],{"class":226},[220,4315,4316],{"class":264},"(canvas, preset, {\n",[220,4318,4319,4322,4325,4327,4329,4331],{"class":222,"line":179},[220,4320,4321],{"class":226}," onError",[220,4323,4324],{"class":264},": (",[220,4326,4165],{"class":3621},[220,4328,4168],{"class":264},[220,4330,2762],{"class":260},[220,4332,3241],{"class":264},[220,4334,4335],{"class":222,"line":389},[220,4336,4337],{"class":609}," \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n",[220,4339,4340],{"class":222,"line":399},[220,4341,4342],{"class":609}," \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n",[220,4344,4345],{"class":222,"line":644},[220,4346,4347],{"class":609}," \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n",[220,4349,4350,4353],{"class":222,"line":650},[220,4351,4352],{"class":226}," showFallback",[220,4354,4355],{"class":264},"(reason)\n",[220,4357,4358],{"class":222,"line":656},[220,4359,3256],{"class":264},[220,4361,4362],{"class":222,"line":673},[220,4363,1792],{"class":264},[3262,4365,4367],{"id":4366},"debugging","Debugging",[15,4369,4370],{},"Shaders keeps quiet in production on purpose — an embedded background effect must never fill\na host page's console with errors the visitor can do nothing about. When you need to see what\nthe renderer is actually doing, switch diagnostics on:",[212,4372,4374],{"className":3123,"code":4373,"language":1518,"meta":178,"style":178},"localStorage.setItem('shaders:debug', '1') \u002F\u002F persists for the origin\n\u002F\u002F or, in code:\nimport { setShadersDebug } from 'shaders\u002Fvue'\nsetShadersDebug(true)\n",[99,4375,4376,4400,4405,4416],{"__ignoreMap":178},[220,4377,4378,4381,4384,4386,4389,4391,4394,4397],{"class":222,"line":223},[220,4379,4380],{"class":264},"localStorage.",[220,4382,4383],{"class":226},"setItem",[220,4385,2626],{"class":264},[220,4387,4388],{"class":230},"'shaders:debug'",[220,4390,1895],{"class":264},[220,4392,4393],{"class":230},"'1'",[220,4395,4396],{"class":264},") ",[220,4398,4399],{"class":609},"\u002F\u002F persists for the origin\n",[220,4401,4402],{"class":222,"line":179},[220,4403,4404],{"class":609},"\u002F\u002F or, in code:\n",[220,4406,4407,4409,4412,4414],{"class":222,"line":389},[220,4408,261],{"class":260},[220,4410,4411],{"class":264}," { setShadersDebug } ",[220,4413,268],{"class":260},[220,4415,271],{"class":230},[220,4417,4418,4421,4423,4425],{"class":222,"line":399},[220,4419,4420],{"class":226},"setShadersDebug",[220,4422,2626],{"class":264},[220,4424,2332],{"class":420},[220,4426,2632],{"class":264},[1504,4428,4429],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":4431},[4432,4436],{"id":2499,"depth":179,"text":2500,"children":4433},[4434,4435],{"id":3264,"depth":389,"text":3265},{"id":3294,"depth":389,"text":3295},{"id":3314,"depth":179,"text":3315,"children":4437},[4438,4439,4440],{"id":3327,"depth":389,"text":3328},{"id":4075,"depth":389,"text":4076},{"id":4366,"depth":389,"text":4367},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":4441},"docs\u002Fguide\u002F12.hooks-events","5swX9Xt3mdKh2Ke08B_93ih7fjlcaeZgbTwEfxtu2To",{"id":4449,"title":4450,"body":4451,"category":2240,"description":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,39480,39680,39956,40288,40488,40764,41040,41333,41626,41901,42100,42479,42733,43066,43266,43542,43875,44151,44427,44670,45039,45315,45560,45834,46110,46310,46586,46786,47062,47338,47614,47814,48090,48383,48583,48859,49059,49335,49535,49735,49935,50209,50540,50872,51203,51459,51659,51935,52205,52450,52826,53097,53297,53573,53867,54073,54273,54520,54720,54996,55196,55490,55760,56036,56236,56512,56788,57068,57323,57584,57916,58248,58446,58722,58922,59300,59500,59700,59976,60176,60470,60746,61022,61355,61631,61876,62152,62352,62552,62751,63027,63359,63691,63967,64222,64422,64800,65092,65425,65683,66015,66271,66547,66823,67023,67355,67631,67963,68255,68531,68731,68976,69307,69507,69783,70163,70363,70608,70884,71140,71395,71651,71927,72171,72503,72703,72995,73327,73527,73803,74001,74248,74542,74818,75017,75310,75554,75809,76141,76417,76740,76985,77185,77461,77661,77993,78269,78545,78837,79170,79370,79784,79984,80184,80516,80792,80992,81192,81392,81724,81924],{"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\":\"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","X6ouSbZ77zKffUpJ7quDAdvuyIaM6zcwqjSynJdeoHc",{"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\":\"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","Vug8R9Ib1Nal1wvFebaB3aW1EfJ6nVWs50q_JfYhFoA",{"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":2553,"body":39193,"category":15908,"componentType":25877,"description":39200,"extension":191,"meta":39475,"navigation":194,"path":39476,"requiresChild":32530,"seo":39477,"stem":39478,"__hash__":39479},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":39194,"toc":39471},[39195,39198,39201,39203,39205,39208,39210,39469],[11,39196,2553],{"id":39197},"circle",[15,39199,39200],{},"Generate a circle with adjustable size and softness",[31911,39202],{"component":2553},[23,39204,31915],{"id":26533},[31917,39206],{":props":39207},"[{\"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,39209,31923],{"id":31922},[246,39211,39212,39259,39310,39358,39408],{":tabs":1557},[212,39213,39215],{"className":334,"code":39214,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,39216,39217,39225,39231,39239,39247,39251],{"__ignoreMap":178},[220,39218,39219,39221,39223],{"class":222,"line":223},[220,39220,343],{"class":264},[220,39222,347],{"class":346},[220,39224,359],{"class":264},[220,39226,39227,39229],{"class":222,"line":179},[220,39228,364],{"class":264},[220,39230,9630],{"class":346},[220,39232,39233,39235,39237],{"class":222,"line":389},[220,39234,9635],{"class":226},[220,39236,353],{"class":264},[220,39238,9591],{"class":230},[220,39240,39241,39243,39245],{"class":222,"line":399},[220,39242,17405],{"class":226},[220,39244,353],{"class":264},[220,39246,36625],{"class":230},[220,39248,39249],{"class":222,"line":644},[220,39250,1234],{"class":264},[220,39252,39253,39255,39257],{"class":222,"line":650},[220,39254,402],{"class":264},[220,39256,347],{"class":346},[220,39258,359],{"class":264},[212,39260,39262],{"className":409,"code":39261,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,39263,39264,39272,39278,39286,39298,39302],{"__ignoreMap":178},[220,39265,39266,39268,39270],{"class":222,"line":223},[220,39267,343],{"class":264},[220,39269,347],{"class":420},[220,39271,359],{"class":264},[220,39273,39274,39276],{"class":222,"line":179},[220,39275,364],{"class":264},[220,39277,9630],{"class":420},[220,39279,39280,39282,39284],{"class":222,"line":389},[220,39281,9635],{"class":226},[220,39283,353],{"class":260},[220,39285,9591],{"class":230},[220,39287,39288,39290,39292,39294,39296],{"class":222,"line":399},[220,39289,9645],{"class":226},[220,39291,353],{"class":260},[220,39293,743],{"class":264},[220,39295,8677],{"class":420},[220,39297,749],{"class":264},[220,39299,39300],{"class":222,"line":644},[220,39301,1234],{"class":264},[220,39303,39304,39306,39308],{"class":222,"line":650},[220,39305,402],{"class":264},[220,39307,347],{"class":420},[220,39309,359],{"class":264},[212,39311,39312],{"className":2844,"code":39261,"language":2846,"meta":178,"style":178},[99,39313,39314,39322,39328,39336,39346,39350],{"__ignoreMap":178},[220,39315,39316,39318,39320],{"class":222,"line":223},[220,39317,343],{"class":264},[220,39319,347],{"class":420},[220,39321,359],{"class":264},[220,39323,39324,39326],{"class":222,"line":179},[220,39325,364],{"class":264},[220,39327,9630],{"class":420},[220,39329,39330,39332,39334],{"class":222,"line":389},[220,39331,9635],{"class":226},[220,39333,353],{"class":264},[220,39335,9591],{"class":230},[220,39337,39338,39340,39342,39344],{"class":222,"line":399},[220,39339,9645],{"class":226},[220,39341,29871],{"class":264},[220,39343,8677],{"class":420},[220,39345,749],{"class":264},[220,39347,39348],{"class":222,"line":644},[220,39349,1234],{"class":264},[220,39351,39352,39354,39356],{"class":222,"line":650},[220,39353,402],{"class":264},[220,39355,347],{"class":420},[220,39357,359],{"class":264},[212,39359,39360],{"className":468,"code":39261,"language":469,"meta":178,"style":178},[99,39361,39362,39370,39376,39384,39396,39400],{"__ignoreMap":178},[220,39363,39364,39366,39368],{"class":222,"line":223},[220,39365,343],{"class":264},[220,39367,347],{"class":420},[220,39369,359],{"class":264},[220,39371,39372,39374],{"class":222,"line":179},[220,39373,364],{"class":264},[220,39375,9630],{"class":420},[220,39377,39378,39380,39382],{"class":222,"line":389},[220,39379,9635],{"class":226},[220,39381,353],{"class":260},[220,39383,9591],{"class":230},[220,39385,39386,39388,39390,39392,39394],{"class":222,"line":399},[220,39387,9645],{"class":226},[220,39389,353],{"class":260},[220,39391,743],{"class":264},[220,39393,8677],{"class":420},[220,39395,749],{"class":264},[220,39397,39398],{"class":222,"line":644},[220,39399,1234],{"class":264},[220,39401,39402,39404,39406],{"class":222,"line":650},[220,39403,402],{"class":264},[220,39405,347],{"class":420},[220,39407,359],{"class":264},[212,39409,39411],{"className":251,"code":39410,"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,39412,39413,39423,39427,39441,39445,39461,39465],{"__ignoreMap":178},[220,39414,39415,39417,39419,39421],{"class":222,"line":223},[220,39416,261],{"class":260},[220,39418,11512],{"class":264},[220,39420,268],{"class":260},[220,39422,4007],{"class":230},[220,39424,39425],{"class":222,"line":179},[220,39426,647],{"emptyLinePlaceholder":194},[220,39428,39429,39431,39433,39435,39437,39439],{"class":222,"line":389},[220,39430,1735],{"class":260},[220,39432,1738],{"class":420},[220,39434,1741],{"class":260},[220,39436,1744],{"class":260},[220,39438,1747],{"class":226},[220,39440,1750],{"class":264},[220,39442,39443],{"class":222,"line":399},[220,39444,1765],{"class":264},[220,39446,39447,39449,39451,39453,39455,39457,39459],{"class":222,"line":644},[220,39448,1770],{"class":264},[220,39450,3206],{"class":230},[220,39452,1776],{"class":264},[220,39454,10169],{"class":230},[220,39456,6566],{"class":264},[220,39458,8677],{"class":420},[220,39460,1782],{"class":264},[220,39462,39463],{"class":222,"line":650},[220,39464,1787],{"class":264},[220,39466,39467],{"class":222,"line":656},[220,39468,1792],{"class":264},[1504,39470,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39472},[39473,39474],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":39200},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":39481,"title":39482,"body":39483,"category":33063,"componentType":25877,"description":39490,"extension":191,"meta":39675,"navigation":194,"path":39676,"requiresChild":32530,"seo":39677,"stem":39678,"__hash__":39679},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":39484,"toc":39671},[39485,39488,39491,39493,39495,39498,39500,39669],[11,39486,39482],{"id":39487},"colorwheel",[15,39489,39490],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[31911,39492],{"component":39482},[23,39494,31915],{"id":26533},[31917,39496],{":props":39497},"[{\"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,39499,31923],{"id":31922},[246,39501,39502,39531,39559,39587,39615],{":tabs":1557},[212,39503,39505],{"className":334,"code":39504,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,39506,39507,39515,39523],{"__ignoreMap":178},[220,39508,39509,39511,39513],{"class":222,"line":223},[220,39510,343],{"class":264},[220,39512,347],{"class":346},[220,39514,359],{"class":264},[220,39516,39517,39519,39521],{"class":222,"line":179},[220,39518,364],{"class":264},[220,39520,39482],{"class":346},[220,39522,386],{"class":264},[220,39524,39525,39527,39529],{"class":222,"line":389},[220,39526,402],{"class":264},[220,39528,347],{"class":346},[220,39530,359],{"class":264},[212,39532,39533],{"className":409,"code":39504,"language":411,"meta":178,"style":178},[99,39534,39535,39543,39551],{"__ignoreMap":178},[220,39536,39537,39539,39541],{"class":222,"line":223},[220,39538,343],{"class":264},[220,39540,347],{"class":420},[220,39542,359],{"class":264},[220,39544,39545,39547,39549],{"class":222,"line":179},[220,39546,364],{"class":264},[220,39548,39482],{"class":420},[220,39550,386],{"class":264},[220,39552,39553,39555,39557],{"class":222,"line":389},[220,39554,402],{"class":264},[220,39556,347],{"class":420},[220,39558,359],{"class":264},[212,39560,39561],{"className":2844,"code":39504,"language":2846,"meta":178,"style":178},[99,39562,39563,39571,39579],{"__ignoreMap":178},[220,39564,39565,39567,39569],{"class":222,"line":223},[220,39566,343],{"class":264},[220,39568,347],{"class":420},[220,39570,359],{"class":264},[220,39572,39573,39575,39577],{"class":222,"line":179},[220,39574,364],{"class":264},[220,39576,39482],{"class":420},[220,39578,386],{"class":264},[220,39580,39581,39583,39585],{"class":222,"line":389},[220,39582,402],{"class":264},[220,39584,347],{"class":420},[220,39586,359],{"class":264},[212,39588,39589],{"className":468,"code":39504,"language":469,"meta":178,"style":178},[99,39590,39591,39599,39607],{"__ignoreMap":178},[220,39592,39593,39595,39597],{"class":222,"line":223},[220,39594,343],{"class":264},[220,39596,347],{"class":420},[220,39598,359],{"class":264},[220,39600,39601,39603,39605],{"class":222,"line":179},[220,39602,364],{"class":264},[220,39604,39482],{"class":420},[220,39606,386],{"class":264},[220,39608,39609,39611,39613],{"class":222,"line":389},[220,39610,402],{"class":264},[220,39612,347],{"class":420},[220,39614,359],{"class":264},[212,39616,39618],{"className":251,"code":39617,"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,39619,39620,39630,39634,39648,39652,39661,39665],{"__ignoreMap":178},[220,39621,39622,39624,39626,39628],{"class":222,"line":223},[220,39623,261],{"class":260},[220,39625,11512],{"class":264},[220,39627,268],{"class":260},[220,39629,4007],{"class":230},[220,39631,39632],{"class":222,"line":179},[220,39633,647],{"emptyLinePlaceholder":194},[220,39635,39636,39638,39640,39642,39644,39646],{"class":222,"line":389},[220,39637,1735],{"class":260},[220,39639,1738],{"class":420},[220,39641,1741],{"class":260},[220,39643,1744],{"class":260},[220,39645,1747],{"class":226},[220,39647,1750],{"class":264},[220,39649,39650],{"class":222,"line":399},[220,39651,1765],{"class":264},[220,39653,39654,39656,39659],{"class":222,"line":644},[220,39655,1770],{"class":264},[220,39657,39658],{"class":230},"'ColorWheel'",[220,39660,2465],{"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,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39672},[39673,39674],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":39482,"description":39490},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":39681,"title":39682,"body":39683,"category":32806,"componentType":25883,"description":39690,"extension":191,"meta":39951,"navigation":194,"path":39952,"requiresChild":194,"seo":39953,"stem":39954,"__hash__":39955},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":39684,"toc":39947},[39685,39688,39691,39693,39695,39698,39700,39945],[11,39686,39682],{"id":39687},"compressionartifacts",[15,39689,39690],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[31911,39692],{"component":39682},[23,39694,31915],{"id":26533},[31917,39696],{":props":39697},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,39699,31923],{"id":31922},[246,39701,39702,39747,39791,39835,39879],{":tabs":1557},[212,39703,39705],{"className":334,"code":39704,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,39706,39707,39715,39723,39731,39739],{"__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,359],{"class":264},[220,39724,39725,39727,39729],{"class":222,"line":389},[220,39726,2550],{"class":264},[220,39728,2553],{"class":346},[220,39730,386],{"class":264},[220,39732,39733,39735,39737],{"class":222,"line":399},[220,39734,2567],{"class":264},[220,39736,39682],{"class":346},[220,39738,359],{"class":264},[220,39740,39741,39743,39745],{"class":222,"line":644},[220,39742,402],{"class":264},[220,39744,347],{"class":346},[220,39746,359],{"class":264},[212,39748,39749],{"className":409,"code":39704,"language":411,"meta":178,"style":178},[99,39750,39751,39759,39767,39775,39783],{"__ignoreMap":178},[220,39752,39753,39755,39757],{"class":222,"line":223},[220,39754,343],{"class":264},[220,39756,347],{"class":420},[220,39758,359],{"class":264},[220,39760,39761,39763,39765],{"class":222,"line":179},[220,39762,364],{"class":264},[220,39764,39682],{"class":420},[220,39766,359],{"class":264},[220,39768,39769,39771,39773],{"class":222,"line":389},[220,39770,2550],{"class":264},[220,39772,2553],{"class":420},[220,39774,386],{"class":264},[220,39776,39777,39779,39781],{"class":222,"line":399},[220,39778,2567],{"class":264},[220,39780,39682],{"class":420},[220,39782,359],{"class":264},[220,39784,39785,39787,39789],{"class":222,"line":644},[220,39786,402],{"class":264},[220,39788,347],{"class":420},[220,39790,359],{"class":264},[212,39792,39793],{"className":2844,"code":39704,"language":2846,"meta":178,"style":178},[99,39794,39795,39803,39811,39819,39827],{"__ignoreMap":178},[220,39796,39797,39799,39801],{"class":222,"line":223},[220,39798,343],{"class":264},[220,39800,347],{"class":420},[220,39802,359],{"class":264},[220,39804,39805,39807,39809],{"class":222,"line":179},[220,39806,364],{"class":264},[220,39808,39682],{"class":420},[220,39810,359],{"class":264},[220,39812,39813,39815,39817],{"class":222,"line":389},[220,39814,2550],{"class":264},[220,39816,2553],{"class":420},[220,39818,386],{"class":264},[220,39820,39821,39823,39825],{"class":222,"line":399},[220,39822,2567],{"class":264},[220,39824,39682],{"class":420},[220,39826,359],{"class":264},[220,39828,39829,39831,39833],{"class":222,"line":644},[220,39830,402],{"class":264},[220,39832,347],{"class":420},[220,39834,359],{"class":264},[212,39836,39837],{"className":468,"code":39704,"language":469,"meta":178,"style":178},[99,39838,39839,39847,39855,39863,39871],{"__ignoreMap":178},[220,39840,39841,39843,39845],{"class":222,"line":223},[220,39842,343],{"class":264},[220,39844,347],{"class":420},[220,39846,359],{"class":264},[220,39848,39849,39851,39853],{"class":222,"line":179},[220,39850,364],{"class":264},[220,39852,39682],{"class":420},[220,39854,359],{"class":264},[220,39856,39857,39859,39861],{"class":222,"line":389},[220,39858,2550],{"class":264},[220,39860,2553],{"class":420},[220,39862,386],{"class":264},[220,39864,39865,39867,39869],{"class":222,"line":399},[220,39866,2567],{"class":264},[220,39868,39682],{"class":420},[220,39870,359],{"class":264},[220,39872,39873,39875,39877],{"class":222,"line":644},[220,39874,402],{"class":264},[220,39876,347],{"class":420},[220,39878,359],{"class":264},[212,39880,39882],{"className":251,"code":39881,"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,39883,39884,39894,39898,39912,39916,39925,39933,39937,39941],{"__ignoreMap":178},[220,39885,39886,39888,39890,39892],{"class":222,"line":223},[220,39887,261],{"class":260},[220,39889,11512],{"class":264},[220,39891,268],{"class":260},[220,39893,4007],{"class":230},[220,39895,39896],{"class":222,"line":179},[220,39897,647],{"emptyLinePlaceholder":194},[220,39899,39900,39902,39904,39906,39908,39910],{"class":222,"line":389},[220,39901,1735],{"class":260},[220,39903,1738],{"class":420},[220,39905,1741],{"class":260},[220,39907,1744],{"class":260},[220,39909,1747],{"class":226},[220,39911,1750],{"class":264},[220,39913,39914],{"class":222,"line":399},[220,39915,1765],{"class":264},[220,39917,39918,39920,39923],{"class":222,"line":644},[220,39919,1770],{"class":264},[220,39921,39922],{"class":230},"'CompressionArtifacts'",[220,39924,7009],{"class":264},[220,39926,39927,39929,39931],{"class":222,"line":650},[220,39928,7014],{"class":264},[220,39930,3206],{"class":230},[220,39932,2465],{"class":264},[220,39934,39935],{"class":222,"line":656},[220,39936,7031],{"class":264},[220,39938,39939],{"class":222,"line":673},[220,39940,1787],{"class":264},[220,39942,39943],{"class":222,"line":682},[220,39944,1792],{"class":264},[1504,39946,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39948},[39949,39950],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":39682,"description":39690},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":39957,"title":39958,"body":39959,"category":33396,"componentType":25883,"description":39966,"extension":191,"meta":40283,"navigation":194,"path":40284,"requiresChild":194,"seo":40285,"stem":40286,"__hash__":40287},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":39960,"toc":40279},[39961,39964,39967,39969,39971,39974,39976,40277],[11,39962,39958],{"id":39963},"concentricspin",[15,39965,39966],{},"Concentric rings that each rotate the underlying image by different amounts",[31911,39968],{"component":39958},[23,39970,31915],{"id":26533},[31917,39972],{":props":39973},"[{\"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,39975,31923],{"id":31922},[246,39977,39978,40034,40093,40149,40207],{":tabs":1557},[212,39979,39981],{"className":334,"code":39980,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,39982,39983,39991,39998,40006,40010,40018,40026],{"__ignoreMap":178},[220,39984,39985,39987,39989],{"class":222,"line":223},[220,39986,343],{"class":264},[220,39988,347],{"class":346},[220,39990,359],{"class":264},[220,39992,39993,39995],{"class":222,"line":179},[220,39994,364],{"class":264},[220,39996,39997],{"class":346},"ConcentricSpin\n",[220,39999,40000,40002,40004],{"class":222,"line":389},[220,40001,20371],{"class":226},[220,40003,353],{"class":264},[220,40005,31954],{"class":230},[220,40007,40008],{"class":222,"line":399},[220,40009,31959],{"class":264},[220,40011,40012,40014,40016],{"class":222,"line":644},[220,40013,2550],{"class":264},[220,40015,2553],{"class":346},[220,40017,386],{"class":264},[220,40019,40020,40022,40024],{"class":222,"line":650},[220,40021,2567],{"class":264},[220,40023,39958],{"class":346},[220,40025,359],{"class":264},[220,40027,40028,40030,40032],{"class":222,"line":656},[220,40029,402],{"class":264},[220,40031,347],{"class":346},[220,40033,359],{"class":264},[212,40035,40037],{"className":409,"code":40036,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40038,40039,40047,40053,40065,40069,40077,40085],{"__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],{"class":222,"line":179},[220,40050,364],{"class":264},[220,40052,39997],{"class":420},[220,40054,40055,40057,40059,40061,40063],{"class":222,"line":389},[220,40056,20482],{"class":226},[220,40058,353],{"class":260},[220,40060,743],{"class":264},[220,40062,24800],{"class":420},[220,40064,749],{"class":264},[220,40066,40067],{"class":222,"line":399},[220,40068,31959],{"class":264},[220,40070,40071,40073,40075],{"class":222,"line":644},[220,40072,2550],{"class":264},[220,40074,2553],{"class":420},[220,40076,386],{"class":264},[220,40078,40079,40081,40083],{"class":222,"line":650},[220,40080,2567],{"class":264},[220,40082,39958],{"class":420},[220,40084,359],{"class":264},[220,40086,40087,40089,40091],{"class":222,"line":656},[220,40088,402],{"class":264},[220,40090,347],{"class":420},[220,40092,359],{"class":264},[212,40094,40095],{"className":2844,"code":40036,"language":2846,"meta":178,"style":178},[99,40096,40097,40105,40111,40121,40125,40133,40141],{"__ignoreMap":178},[220,40098,40099,40101,40103],{"class":222,"line":223},[220,40100,343],{"class":264},[220,40102,347],{"class":420},[220,40104,359],{"class":264},[220,40106,40107,40109],{"class":222,"line":179},[220,40108,364],{"class":264},[220,40110,39997],{"class":420},[220,40112,40113,40115,40117,40119],{"class":222,"line":389},[220,40114,20482],{"class":226},[220,40116,29871],{"class":264},[220,40118,24800],{"class":420},[220,40120,749],{"class":264},[220,40122,40123],{"class":222,"line":399},[220,40124,31959],{"class":264},[220,40126,40127,40129,40131],{"class":222,"line":644},[220,40128,2550],{"class":264},[220,40130,2553],{"class":420},[220,40132,386],{"class":264},[220,40134,40135,40137,40139],{"class":222,"line":650},[220,40136,2567],{"class":264},[220,40138,39958],{"class":420},[220,40140,359],{"class":264},[220,40142,40143,40145,40147],{"class":222,"line":656},[220,40144,402],{"class":264},[220,40146,347],{"class":420},[220,40148,359],{"class":264},[212,40150,40151],{"className":468,"code":40036,"language":469,"meta":178,"style":178},[99,40152,40153,40161,40167,40179,40183,40191,40199],{"__ignoreMap":178},[220,40154,40155,40157,40159],{"class":222,"line":223},[220,40156,343],{"class":264},[220,40158,347],{"class":420},[220,40160,359],{"class":264},[220,40162,40163,40165],{"class":222,"line":179},[220,40164,364],{"class":264},[220,40166,39997],{"class":420},[220,40168,40169,40171,40173,40175,40177],{"class":222,"line":389},[220,40170,20482],{"class":226},[220,40172,353],{"class":260},[220,40174,743],{"class":264},[220,40176,24800],{"class":420},[220,40178,749],{"class":264},[220,40180,40181],{"class":222,"line":399},[220,40182,31959],{"class":264},[220,40184,40185,40187,40189],{"class":222,"line":644},[220,40186,2550],{"class":264},[220,40188,2553],{"class":420},[220,40190,386],{"class":264},[220,40192,40193,40195,40197],{"class":222,"line":650},[220,40194,2567],{"class":264},[220,40196,39958],{"class":420},[220,40198,359],{"class":264},[220,40200,40201,40203,40205],{"class":222,"line":656},[220,40202,402],{"class":264},[220,40204,347],{"class":420},[220,40206,359],{"class":264},[212,40208,40210],{"className":251,"code":40209,"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,40211,40212,40222,40226,40240,40244,40257,40265,40269,40273],{"__ignoreMap":178},[220,40213,40214,40216,40218,40220],{"class":222,"line":223},[220,40215,261],{"class":260},[220,40217,11512],{"class":264},[220,40219,268],{"class":260},[220,40221,4007],{"class":230},[220,40223,40224],{"class":222,"line":179},[220,40225,647],{"emptyLinePlaceholder":194},[220,40227,40228,40230,40232,40234,40236,40238],{"class":222,"line":389},[220,40229,1735],{"class":260},[220,40231,1738],{"class":420},[220,40233,1741],{"class":260},[220,40235,1744],{"class":260},[220,40237,1747],{"class":226},[220,40239,1750],{"class":264},[220,40241,40242],{"class":222,"line":399},[220,40243,1765],{"class":264},[220,40245,40246,40248,40251,40253,40255],{"class":222,"line":644},[220,40247,1770],{"class":264},[220,40249,40250],{"class":230},"'ConcentricSpin'",[220,40252,32203],{"class":264},[220,40254,24800],{"class":420},[220,40256,7546],{"class":264},[220,40258,40259,40261,40263],{"class":222,"line":650},[220,40260,7014],{"class":264},[220,40262,3206],{"class":230},[220,40264,2465],{"class":264},[220,40266,40267],{"class":222,"line":656},[220,40268,7031],{"class":264},[220,40270,40271],{"class":222,"line":673},[220,40272,1787],{"class":264},[220,40274,40275],{"class":222,"line":682},[220,40276,1792],{"class":264},[1504,40278,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40280},[40281,40282],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":39958,"description":39966},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":40289,"title":40290,"body":40291,"category":33063,"componentType":25877,"description":40298,"extension":191,"meta":40483,"navigation":194,"path":40484,"requiresChild":32530,"seo":40485,"stem":40486,"__hash__":40487},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":40292,"toc":40479},[40293,40296,40299,40301,40303,40306,40308,40477],[11,40294,40290],{"id":40295},"conicgradient",[15,40297,40298],{},"Colors sweep in a full circle around a center point, like a color wheel",[31911,40300],{"component":40290},[23,40302,31915],{"id":26533},[31917,40304],{":props":40305},"[{\"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,40307,31923],{"id":31922},[246,40309,40310,40339,40367,40395,40423],{":tabs":1557},[212,40311,40313],{"className":334,"code":40312,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,40314,40315,40323,40331],{"__ignoreMap":178},[220,40316,40317,40319,40321],{"class":222,"line":223},[220,40318,343],{"class":264},[220,40320,347],{"class":346},[220,40322,359],{"class":264},[220,40324,40325,40327,40329],{"class":222,"line":179},[220,40326,364],{"class":264},[220,40328,40290],{"class":346},[220,40330,386],{"class":264},[220,40332,40333,40335,40337],{"class":222,"line":389},[220,40334,402],{"class":264},[220,40336,347],{"class":346},[220,40338,359],{"class":264},[212,40340,40341],{"className":409,"code":40312,"language":411,"meta":178,"style":178},[99,40342,40343,40351,40359],{"__ignoreMap":178},[220,40344,40345,40347,40349],{"class":222,"line":223},[220,40346,343],{"class":264},[220,40348,347],{"class":420},[220,40350,359],{"class":264},[220,40352,40353,40355,40357],{"class":222,"line":179},[220,40354,364],{"class":264},[220,40356,40290],{"class":420},[220,40358,386],{"class":264},[220,40360,40361,40363,40365],{"class":222,"line":389},[220,40362,402],{"class":264},[220,40364,347],{"class":420},[220,40366,359],{"class":264},[212,40368,40369],{"className":2844,"code":40312,"language":2846,"meta":178,"style":178},[99,40370,40371,40379,40387],{"__ignoreMap":178},[220,40372,40373,40375,40377],{"class":222,"line":223},[220,40374,343],{"class":264},[220,40376,347],{"class":420},[220,40378,359],{"class":264},[220,40380,40381,40383,40385],{"class":222,"line":179},[220,40382,364],{"class":264},[220,40384,40290],{"class":420},[220,40386,386],{"class":264},[220,40388,40389,40391,40393],{"class":222,"line":389},[220,40390,402],{"class":264},[220,40392,347],{"class":420},[220,40394,359],{"class":264},[212,40396,40397],{"className":468,"code":40312,"language":469,"meta":178,"style":178},[99,40398,40399,40407,40415],{"__ignoreMap":178},[220,40400,40401,40403,40405],{"class":222,"line":223},[220,40402,343],{"class":264},[220,40404,347],{"class":420},[220,40406,359],{"class":264},[220,40408,40409,40411,40413],{"class":222,"line":179},[220,40410,364],{"class":264},[220,40412,40290],{"class":420},[220,40414,386],{"class":264},[220,40416,40417,40419,40421],{"class":222,"line":389},[220,40418,402],{"class":264},[220,40420,347],{"class":420},[220,40422,359],{"class":264},[212,40424,40426],{"className":251,"code":40425,"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,40427,40428,40438,40442,40456,40460,40469,40473],{"__ignoreMap":178},[220,40429,40430,40432,40434,40436],{"class":222,"line":223},[220,40431,261],{"class":260},[220,40433,11512],{"class":264},[220,40435,268],{"class":260},[220,40437,4007],{"class":230},[220,40439,40440],{"class":222,"line":179},[220,40441,647],{"emptyLinePlaceholder":194},[220,40443,40444,40446,40448,40450,40452,40454],{"class":222,"line":389},[220,40445,1735],{"class":260},[220,40447,1738],{"class":420},[220,40449,1741],{"class":260},[220,40451,1744],{"class":260},[220,40453,1747],{"class":226},[220,40455,1750],{"class":264},[220,40457,40458],{"class":222,"line":399},[220,40459,1765],{"class":264},[220,40461,40462,40464,40467],{"class":222,"line":644},[220,40463,1770],{"class":264},[220,40465,40466],{"class":230},"'ConicGradient'",[220,40468,2465],{"class":264},[220,40470,40471],{"class":222,"line":650},[220,40472,1787],{"class":264},[220,40474,40475],{"class":222,"line":656},[220,40476,1792],{"class":264},[1504,40478,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40480},[40481,40482],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":40290,"description":40298},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":40489,"title":40490,"body":40491,"category":32806,"componentType":25883,"description":40498,"extension":191,"meta":40759,"navigation":194,"path":40760,"requiresChild":194,"seo":40761,"stem":40762,"__hash__":40763},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":40492,"toc":40755},[40493,40496,40499,40501,40503,40506,40508,40753],[11,40494,40490],{"id":40495},"contourlines",[15,40497,40498],{},"Draw topographical contour lines based on luminance or alpha",[31911,40500],{"component":40490},[23,40502,31915],{"id":26533},[31917,40504],{":props":40505},"[{\"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,40507,31923],{"id":31922},[246,40509,40510,40555,40599,40643,40687],{":tabs":1557},[212,40511,40513],{"className":334,"code":40512,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,40514,40515,40523,40531,40539,40547],{"__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,359],{"class":264},[220,40532,40533,40535,40537],{"class":222,"line":389},[220,40534,2550],{"class":264},[220,40536,2553],{"class":346},[220,40538,386],{"class":264},[220,40540,40541,40543,40545],{"class":222,"line":399},[220,40542,2567],{"class":264},[220,40544,40490],{"class":346},[220,40546,359],{"class":264},[220,40548,40549,40551,40553],{"class":222,"line":644},[220,40550,402],{"class":264},[220,40552,347],{"class":346},[220,40554,359],{"class":264},[212,40556,40557],{"className":409,"code":40512,"language":411,"meta":178,"style":178},[99,40558,40559,40567,40575,40583,40591],{"__ignoreMap":178},[220,40560,40561,40563,40565],{"class":222,"line":223},[220,40562,343],{"class":264},[220,40564,347],{"class":420},[220,40566,359],{"class":264},[220,40568,40569,40571,40573],{"class":222,"line":179},[220,40570,364],{"class":264},[220,40572,40490],{"class":420},[220,40574,359],{"class":264},[220,40576,40577,40579,40581],{"class":222,"line":389},[220,40578,2550],{"class":264},[220,40580,2553],{"class":420},[220,40582,386],{"class":264},[220,40584,40585,40587,40589],{"class":222,"line":399},[220,40586,2567],{"class":264},[220,40588,40490],{"class":420},[220,40590,359],{"class":264},[220,40592,40593,40595,40597],{"class":222,"line":644},[220,40594,402],{"class":264},[220,40596,347],{"class":420},[220,40598,359],{"class":264},[212,40600,40601],{"className":2844,"code":40512,"language":2846,"meta":178,"style":178},[99,40602,40603,40611,40619,40627,40635],{"__ignoreMap":178},[220,40604,40605,40607,40609],{"class":222,"line":223},[220,40606,343],{"class":264},[220,40608,347],{"class":420},[220,40610,359],{"class":264},[220,40612,40613,40615,40617],{"class":222,"line":179},[220,40614,364],{"class":264},[220,40616,40490],{"class":420},[220,40618,359],{"class":264},[220,40620,40621,40623,40625],{"class":222,"line":389},[220,40622,2550],{"class":264},[220,40624,2553],{"class":420},[220,40626,386],{"class":264},[220,40628,40629,40631,40633],{"class":222,"line":399},[220,40630,2567],{"class":264},[220,40632,40490],{"class":420},[220,40634,359],{"class":264},[220,40636,40637,40639,40641],{"class":222,"line":644},[220,40638,402],{"class":264},[220,40640,347],{"class":420},[220,40642,359],{"class":264},[212,40644,40645],{"className":468,"code":40512,"language":469,"meta":178,"style":178},[99,40646,40647,40655,40663,40671,40679],{"__ignoreMap":178},[220,40648,40649,40651,40653],{"class":222,"line":223},[220,40650,343],{"class":264},[220,40652,347],{"class":420},[220,40654,359],{"class":264},[220,40656,40657,40659,40661],{"class":222,"line":179},[220,40658,364],{"class":264},[220,40660,40490],{"class":420},[220,40662,359],{"class":264},[220,40664,40665,40667,40669],{"class":222,"line":389},[220,40666,2550],{"class":264},[220,40668,2553],{"class":420},[220,40670,386],{"class":264},[220,40672,40673,40675,40677],{"class":222,"line":399},[220,40674,2567],{"class":264},[220,40676,40490],{"class":420},[220,40678,359],{"class":264},[220,40680,40681,40683,40685],{"class":222,"line":644},[220,40682,402],{"class":264},[220,40684,347],{"class":420},[220,40686,359],{"class":264},[212,40688,40690],{"className":251,"code":40689,"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,40691,40692,40702,40706,40720,40724,40733,40741,40745,40749],{"__ignoreMap":178},[220,40693,40694,40696,40698,40700],{"class":222,"line":223},[220,40695,261],{"class":260},[220,40697,11512],{"class":264},[220,40699,268],{"class":260},[220,40701,4007],{"class":230},[220,40703,40704],{"class":222,"line":179},[220,40705,647],{"emptyLinePlaceholder":194},[220,40707,40708,40710,40712,40714,40716,40718],{"class":222,"line":389},[220,40709,1735],{"class":260},[220,40711,1738],{"class":420},[220,40713,1741],{"class":260},[220,40715,1744],{"class":260},[220,40717,1747],{"class":226},[220,40719,1750],{"class":264},[220,40721,40722],{"class":222,"line":399},[220,40723,1765],{"class":264},[220,40725,40726,40728,40731],{"class":222,"line":644},[220,40727,1770],{"class":264},[220,40729,40730],{"class":230},"'ContourLines'",[220,40732,7009],{"class":264},[220,40734,40735,40737,40739],{"class":222,"line":650},[220,40736,7014],{"class":264},[220,40738,3206],{"class":230},[220,40740,2465],{"class":264},[220,40742,40743],{"class":222,"line":656},[220,40744,7031],{"class":264},[220,40746,40747],{"class":222,"line":673},[220,40748,1787],{"class":264},[220,40750,40751],{"class":222,"line":682},[220,40752,1792],{"class":264},[1504,40754,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40756},[40757,40758],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":40490,"description":40498},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":40765,"title":40766,"body":40767,"category":33396,"componentType":25883,"description":40774,"extension":191,"meta":41035,"navigation":194,"path":41036,"requiresChild":194,"seo":41037,"stem":41038,"__hash__":41039},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":40768,"toc":41031},[40769,40772,40775,40777,40779,40782,40784,41029],[11,40770,40766],{"id":40771},"cornerpin",[15,40773,40774],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[31911,40776],{"component":40766},[23,40778,31915],{"id":26533},[31917,40780],{":props":40781},"[{\"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,40783,31923],{"id":31922},[246,40785,40786,40831,40875,40919,40963],{":tabs":1557},[212,40787,40789],{"className":334,"code":40788,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,40790,40791,40799,40807,40815,40823],{"__ignoreMap":178},[220,40792,40793,40795,40797],{"class":222,"line":223},[220,40794,343],{"class":264},[220,40796,347],{"class":346},[220,40798,359],{"class":264},[220,40800,40801,40803,40805],{"class":222,"line":179},[220,40802,364],{"class":264},[220,40804,40766],{"class":346},[220,40806,359],{"class":264},[220,40808,40809,40811,40813],{"class":222,"line":389},[220,40810,2550],{"class":264},[220,40812,2553],{"class":346},[220,40814,386],{"class":264},[220,40816,40817,40819,40821],{"class":222,"line":399},[220,40818,2567],{"class":264},[220,40820,40766],{"class":346},[220,40822,359],{"class":264},[220,40824,40825,40827,40829],{"class":222,"line":644},[220,40826,402],{"class":264},[220,40828,347],{"class":346},[220,40830,359],{"class":264},[212,40832,40833],{"className":409,"code":40788,"language":411,"meta":178,"style":178},[99,40834,40835,40843,40851,40859,40867],{"__ignoreMap":178},[220,40836,40837,40839,40841],{"class":222,"line":223},[220,40838,343],{"class":264},[220,40840,347],{"class":420},[220,40842,359],{"class":264},[220,40844,40845,40847,40849],{"class":222,"line":179},[220,40846,364],{"class":264},[220,40848,40766],{"class":420},[220,40850,359],{"class":264},[220,40852,40853,40855,40857],{"class":222,"line":389},[220,40854,2550],{"class":264},[220,40856,2553],{"class":420},[220,40858,386],{"class":264},[220,40860,40861,40863,40865],{"class":222,"line":399},[220,40862,2567],{"class":264},[220,40864,40766],{"class":420},[220,40866,359],{"class":264},[220,40868,40869,40871,40873],{"class":222,"line":644},[220,40870,402],{"class":264},[220,40872,347],{"class":420},[220,40874,359],{"class":264},[212,40876,40877],{"className":2844,"code":40788,"language":2846,"meta":178,"style":178},[99,40878,40879,40887,40895,40903,40911],{"__ignoreMap":178},[220,40880,40881,40883,40885],{"class":222,"line":223},[220,40882,343],{"class":264},[220,40884,347],{"class":420},[220,40886,359],{"class":264},[220,40888,40889,40891,40893],{"class":222,"line":179},[220,40890,364],{"class":264},[220,40892,40766],{"class":420},[220,40894,359],{"class":264},[220,40896,40897,40899,40901],{"class":222,"line":389},[220,40898,2550],{"class":264},[220,40900,2553],{"class":420},[220,40902,386],{"class":264},[220,40904,40905,40907,40909],{"class":222,"line":399},[220,40906,2567],{"class":264},[220,40908,40766],{"class":420},[220,40910,359],{"class":264},[220,40912,40913,40915,40917],{"class":222,"line":644},[220,40914,402],{"class":264},[220,40916,347],{"class":420},[220,40918,359],{"class":264},[212,40920,40921],{"className":468,"code":40788,"language":469,"meta":178,"style":178},[99,40922,40923,40931,40939,40947,40955],{"__ignoreMap":178},[220,40924,40925,40927,40929],{"class":222,"line":223},[220,40926,343],{"class":264},[220,40928,347],{"class":420},[220,40930,359],{"class":264},[220,40932,40933,40935,40937],{"class":222,"line":179},[220,40934,364],{"class":264},[220,40936,40766],{"class":420},[220,40938,359],{"class":264},[220,40940,40941,40943,40945],{"class":222,"line":389},[220,40942,2550],{"class":264},[220,40944,2553],{"class":420},[220,40946,386],{"class":264},[220,40948,40949,40951,40953],{"class":222,"line":399},[220,40950,2567],{"class":264},[220,40952,40766],{"class":420},[220,40954,359],{"class":264},[220,40956,40957,40959,40961],{"class":222,"line":644},[220,40958,402],{"class":264},[220,40960,347],{"class":420},[220,40962,359],{"class":264},[212,40964,40966],{"className":251,"code":40965,"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,40967,40968,40978,40982,40996,41000,41009,41017,41021,41025],{"__ignoreMap":178},[220,40969,40970,40972,40974,40976],{"class":222,"line":223},[220,40971,261],{"class":260},[220,40973,11512],{"class":264},[220,40975,268],{"class":260},[220,40977,4007],{"class":230},[220,40979,40980],{"class":222,"line":179},[220,40981,647],{"emptyLinePlaceholder":194},[220,40983,40984,40986,40988,40990,40992,40994],{"class":222,"line":389},[220,40985,1735],{"class":260},[220,40987,1738],{"class":420},[220,40989,1741],{"class":260},[220,40991,1744],{"class":260},[220,40993,1747],{"class":226},[220,40995,1750],{"class":264},[220,40997,40998],{"class":222,"line":399},[220,40999,1765],{"class":264},[220,41001,41002,41004,41007],{"class":222,"line":644},[220,41003,1770],{"class":264},[220,41005,41006],{"class":230},"'CornerPin'",[220,41008,7009],{"class":264},[220,41010,41011,41013,41015],{"class":222,"line":650},[220,41012,7014],{"class":264},[220,41014,3206],{"class":230},[220,41016,2465],{"class":264},[220,41018,41019],{"class":222,"line":656},[220,41020,7031],{"class":264},[220,41022,41023],{"class":222,"line":673},[220,41024,1787],{"class":264},[220,41026,41027],{"class":222,"line":682},[220,41028,1792],{"class":264},[1504,41030,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":41032},[41033,41034],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":40766,"description":40774},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":41041,"title":41042,"body":41043,"category":15908,"componentType":25877,"description":41050,"extension":191,"meta":41328,"navigation":194,"path":41329,"requiresChild":32530,"seo":41330,"stem":41331,"__hash__":41332},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":41044,"toc":41324},[41045,41048,41051,41053,41055,41058,41060,41322],[11,41046,41042],{"id":41047},"crescent",[15,41049,41050],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[31911,41052],{"component":41042},[23,41054,31915],{"id":26533},[31917,41056],{":props":41057},"[{\"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,41059,31923],{"id":31922},[246,41061,41062,41111,41162,41210,41260],{":tabs":1557},[212,41063,41065],{"className":334,"code":41064,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,41066,41067,41075,41082,41090,41099,41103],{"__ignoreMap":178},[220,41068,41069,41071,41073],{"class":222,"line":223},[220,41070,343],{"class":264},[220,41072,347],{"class":346},[220,41074,359],{"class":264},[220,41076,41077,41079],{"class":222,"line":179},[220,41078,364],{"class":264},[220,41080,41081],{"class":346},"Crescent\n",[220,41083,41084,41086,41088],{"class":222,"line":389},[220,41085,9635],{"class":226},[220,41087,353],{"class":264},[220,41089,9591],{"class":230},[220,41091,41092,41094,41096],{"class":222,"line":399},[220,41093,17405],{"class":226},[220,41095,353],{"class":264},[220,41097,41098],{"class":230},"\"0.3\"\n",[220,41100,41101],{"class":222,"line":644},[220,41102,1234],{"class":264},[220,41104,41105,41107,41109],{"class":222,"line":650},[220,41106,402],{"class":264},[220,41108,347],{"class":346},[220,41110,359],{"class":264},[212,41112,41114],{"className":409,"code":41113,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,41115,41116,41124,41130,41138,41150,41154],{"__ignoreMap":178},[220,41117,41118,41120,41122],{"class":222,"line":223},[220,41119,343],{"class":264},[220,41121,347],{"class":420},[220,41123,359],{"class":264},[220,41125,41126,41128],{"class":222,"line":179},[220,41127,364],{"class":264},[220,41129,41081],{"class":420},[220,41131,41132,41134,41136],{"class":222,"line":389},[220,41133,9635],{"class":226},[220,41135,353],{"class":260},[220,41137,9591],{"class":230},[220,41139,41140,41142,41144,41146,41148],{"class":222,"line":399},[220,41141,9645],{"class":226},[220,41143,353],{"class":260},[220,41145,743],{"class":264},[220,41147,22004],{"class":420},[220,41149,749],{"class":264},[220,41151,41152],{"class":222,"line":644},[220,41153,1234],{"class":264},[220,41155,41156,41158,41160],{"class":222,"line":650},[220,41157,402],{"class":264},[220,41159,347],{"class":420},[220,41161,359],{"class":264},[212,41163,41164],{"className":2844,"code":41113,"language":2846,"meta":178,"style":178},[99,41165,41166,41174,41180,41188,41198,41202],{"__ignoreMap":178},[220,41167,41168,41170,41172],{"class":222,"line":223},[220,41169,343],{"class":264},[220,41171,347],{"class":420},[220,41173,359],{"class":264},[220,41175,41176,41178],{"class":222,"line":179},[220,41177,364],{"class":264},[220,41179,41081],{"class":420},[220,41181,41182,41184,41186],{"class":222,"line":389},[220,41183,9635],{"class":226},[220,41185,353],{"class":264},[220,41187,9591],{"class":230},[220,41189,41190,41192,41194,41196],{"class":222,"line":399},[220,41191,9645],{"class":226},[220,41193,29871],{"class":264},[220,41195,22004],{"class":420},[220,41197,749],{"class":264},[220,41199,41200],{"class":222,"line":644},[220,41201,1234],{"class":264},[220,41203,41204,41206,41208],{"class":222,"line":650},[220,41205,402],{"class":264},[220,41207,347],{"class":420},[220,41209,359],{"class":264},[212,41211,41212],{"className":468,"code":41113,"language":469,"meta":178,"style":178},[99,41213,41214,41222,41228,41236,41248,41252],{"__ignoreMap":178},[220,41215,41216,41218,41220],{"class":222,"line":223},[220,41217,343],{"class":264},[220,41219,347],{"class":420},[220,41221,359],{"class":264},[220,41223,41224,41226],{"class":222,"line":179},[220,41225,364],{"class":264},[220,41227,41081],{"class":420},[220,41229,41230,41232,41234],{"class":222,"line":389},[220,41231,9635],{"class":226},[220,41233,353],{"class":260},[220,41235,9591],{"class":230},[220,41237,41238,41240,41242,41244,41246],{"class":222,"line":399},[220,41239,9645],{"class":226},[220,41241,353],{"class":260},[220,41243,743],{"class":264},[220,41245,22004],{"class":420},[220,41247,749],{"class":264},[220,41249,41250],{"class":222,"line":644},[220,41251,1234],{"class":264},[220,41253,41254,41256,41258],{"class":222,"line":650},[220,41255,402],{"class":264},[220,41257,347],{"class":420},[220,41259,359],{"class":264},[212,41261,41263],{"className":251,"code":41262,"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,41264,41265,41275,41279,41293,41297,41314,41318],{"__ignoreMap":178},[220,41266,41267,41269,41271,41273],{"class":222,"line":223},[220,41268,261],{"class":260},[220,41270,11512],{"class":264},[220,41272,268],{"class":260},[220,41274,4007],{"class":230},[220,41276,41277],{"class":222,"line":179},[220,41278,647],{"emptyLinePlaceholder":194},[220,41280,41281,41283,41285,41287,41289,41291],{"class":222,"line":389},[220,41282,1735],{"class":260},[220,41284,1738],{"class":420},[220,41286,1741],{"class":260},[220,41288,1744],{"class":260},[220,41290,1747],{"class":226},[220,41292,1750],{"class":264},[220,41294,41295],{"class":222,"line":399},[220,41296,1765],{"class":264},[220,41298,41299,41301,41304,41306,41308,41310,41312],{"class":222,"line":644},[220,41300,1770],{"class":264},[220,41302,41303],{"class":230},"'Crescent'",[220,41305,1776],{"class":264},[220,41307,10169],{"class":230},[220,41309,6566],{"class":264},[220,41311,22004],{"class":420},[220,41313,1782],{"class":264},[220,41315,41316],{"class":222,"line":650},[220,41317,1787],{"class":264},[220,41319,41320],{"class":222,"line":656},[220,41321,1792],{"class":264},[1504,41323,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41325},[41326,41327],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":41042,"description":41050},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":41334,"title":41335,"body":41336,"category":15908,"componentType":25877,"description":41343,"extension":191,"meta":41621,"navigation":194,"path":41622,"requiresChild":32530,"seo":41623,"stem":41624,"__hash__":41625},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":41337,"toc":41617},[41338,41341,41344,41346,41348,41351,41353,41615],[11,41339,41335],{"id":41340},"cross",[15,41342,41343],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[31911,41345],{"component":41335},[23,41347,31915],{"id":26533},[31917,41349],{":props":41350},"[{\"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,41352,31923],{"id":31922},[246,41354,41355,41404,41455,41503,41553],{":tabs":1557},[212,41356,41358],{"className":334,"code":41357,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,41359,41360,41368,41375,41383,41392,41396],{"__ignoreMap":178},[220,41361,41362,41364,41366],{"class":222,"line":223},[220,41363,343],{"class":264},[220,41365,347],{"class":346},[220,41367,359],{"class":264},[220,41369,41370,41372],{"class":222,"line":179},[220,41371,364],{"class":264},[220,41373,41374],{"class":346},"Cross\n",[220,41376,41377,41379,41381],{"class":222,"line":389},[220,41378,9635],{"class":226},[220,41380,353],{"class":264},[220,41382,9591],{"class":230},[220,41384,41385,41387,41389],{"class":222,"line":399},[220,41386,17405],{"class":226},[220,41388,353],{"class":264},[220,41390,41391],{"class":230},"\"0.35\"\n",[220,41393,41394],{"class":222,"line":644},[220,41395,1234],{"class":264},[220,41397,41398,41400,41402],{"class":222,"line":650},[220,41399,402],{"class":264},[220,41401,347],{"class":346},[220,41403,359],{"class":264},[212,41405,41407],{"className":409,"code":41406,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,41408,41409,41417,41423,41431,41443,41447],{"__ignoreMap":178},[220,41410,41411,41413,41415],{"class":222,"line":223},[220,41412,343],{"class":264},[220,41414,347],{"class":420},[220,41416,359],{"class":264},[220,41418,41419,41421],{"class":222,"line":179},[220,41420,364],{"class":264},[220,41422,41374],{"class":420},[220,41424,41425,41427,41429],{"class":222,"line":389},[220,41426,9635],{"class":226},[220,41428,353],{"class":260},[220,41430,9591],{"class":230},[220,41432,41433,41435,41437,41439,41441],{"class":222,"line":399},[220,41434,9645],{"class":226},[220,41436,353],{"class":260},[220,41438,743],{"class":264},[220,41440,21148],{"class":420},[220,41442,749],{"class":264},[220,41444,41445],{"class":222,"line":644},[220,41446,1234],{"class":264},[220,41448,41449,41451,41453],{"class":222,"line":650},[220,41450,402],{"class":264},[220,41452,347],{"class":420},[220,41454,359],{"class":264},[212,41456,41457],{"className":2844,"code":41406,"language":2846,"meta":178,"style":178},[99,41458,41459,41467,41473,41481,41491,41495],{"__ignoreMap":178},[220,41460,41461,41463,41465],{"class":222,"line":223},[220,41462,343],{"class":264},[220,41464,347],{"class":420},[220,41466,359],{"class":264},[220,41468,41469,41471],{"class":222,"line":179},[220,41470,364],{"class":264},[220,41472,41374],{"class":420},[220,41474,41475,41477,41479],{"class":222,"line":389},[220,41476,9635],{"class":226},[220,41478,353],{"class":264},[220,41480,9591],{"class":230},[220,41482,41483,41485,41487,41489],{"class":222,"line":399},[220,41484,9645],{"class":226},[220,41486,29871],{"class":264},[220,41488,21148],{"class":420},[220,41490,749],{"class":264},[220,41492,41493],{"class":222,"line":644},[220,41494,1234],{"class":264},[220,41496,41497,41499,41501],{"class":222,"line":650},[220,41498,402],{"class":264},[220,41500,347],{"class":420},[220,41502,359],{"class":264},[212,41504,41505],{"className":468,"code":41406,"language":469,"meta":178,"style":178},[99,41506,41507,41515,41521,41529,41541,41545],{"__ignoreMap":178},[220,41508,41509,41511,41513],{"class":222,"line":223},[220,41510,343],{"class":264},[220,41512,347],{"class":420},[220,41514,359],{"class":264},[220,41516,41517,41519],{"class":222,"line":179},[220,41518,364],{"class":264},[220,41520,41374],{"class":420},[220,41522,41523,41525,41527],{"class":222,"line":389},[220,41524,9635],{"class":226},[220,41526,353],{"class":260},[220,41528,9591],{"class":230},[220,41530,41531,41533,41535,41537,41539],{"class":222,"line":399},[220,41532,9645],{"class":226},[220,41534,353],{"class":260},[220,41536,743],{"class":264},[220,41538,21148],{"class":420},[220,41540,749],{"class":264},[220,41542,41543],{"class":222,"line":644},[220,41544,1234],{"class":264},[220,41546,41547,41549,41551],{"class":222,"line":650},[220,41548,402],{"class":264},[220,41550,347],{"class":420},[220,41552,359],{"class":264},[212,41554,41556],{"className":251,"code":41555,"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,41557,41558,41568,41572,41586,41590,41607,41611],{"__ignoreMap":178},[220,41559,41560,41562,41564,41566],{"class":222,"line":223},[220,41561,261],{"class":260},[220,41563,11512],{"class":264},[220,41565,268],{"class":260},[220,41567,4007],{"class":230},[220,41569,41570],{"class":222,"line":179},[220,41571,647],{"emptyLinePlaceholder":194},[220,41573,41574,41576,41578,41580,41582,41584],{"class":222,"line":389},[220,41575,1735],{"class":260},[220,41577,1738],{"class":420},[220,41579,1741],{"class":260},[220,41581,1744],{"class":260},[220,41583,1747],{"class":226},[220,41585,1750],{"class":264},[220,41587,41588],{"class":222,"line":399},[220,41589,1765],{"class":264},[220,41591,41592,41594,41597,41599,41601,41603,41605],{"class":222,"line":644},[220,41593,1770],{"class":264},[220,41595,41596],{"class":230},"'Cross'",[220,41598,1776],{"class":264},[220,41600,10169],{"class":230},[220,41602,6566],{"class":264},[220,41604,21148],{"class":420},[220,41606,1782],{"class":264},[220,41608,41609],{"class":222,"line":650},[220,41610,1787],{"class":264},[220,41612,41613],{"class":222,"line":656},[220,41614,1792],{"class":264},[1504,41616,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41618},[41619,41620],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":41335,"description":41343},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":41627,"title":23172,"body":41628,"category":36569,"componentType":25883,"description":41635,"extension":191,"meta":41896,"navigation":194,"path":41897,"requiresChild":194,"seo":41898,"stem":41899,"__hash__":41900},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":41629,"toc":41892},[41630,41633,41636,41638,41640,41643,41645,41890],[11,41631,23172],{"id":41632},"crystal",[15,41634,41635],{},"Diamond-like crystal lens with faceted refraction.",[31911,41637],{"component":23172},[23,41639,31915],{"id":26533},[31917,41641],{":props":41642},"[{\"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,41644,31923],{"id":31922},[246,41646,41647,41692,41736,41780,41824],{":tabs":1557},[212,41648,41650],{"className":334,"code":41649,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,41651,41652,41660,41668,41676,41684],{"__ignoreMap":178},[220,41653,41654,41656,41658],{"class":222,"line":223},[220,41655,343],{"class":264},[220,41657,347],{"class":346},[220,41659,359],{"class":264},[220,41661,41662,41664,41666],{"class":222,"line":179},[220,41663,364],{"class":264},[220,41665,23172],{"class":346},[220,41667,359],{"class":264},[220,41669,41670,41672,41674],{"class":222,"line":389},[220,41671,2550],{"class":264},[220,41673,2553],{"class":346},[220,41675,386],{"class":264},[220,41677,41678,41680,41682],{"class":222,"line":399},[220,41679,2567],{"class":264},[220,41681,23172],{"class":346},[220,41683,359],{"class":264},[220,41685,41686,41688,41690],{"class":222,"line":644},[220,41687,402],{"class":264},[220,41689,347],{"class":346},[220,41691,359],{"class":264},[212,41693,41694],{"className":409,"code":41649,"language":411,"meta":178,"style":178},[99,41695,41696,41704,41712,41720,41728],{"__ignoreMap":178},[220,41697,41698,41700,41702],{"class":222,"line":223},[220,41699,343],{"class":264},[220,41701,347],{"class":420},[220,41703,359],{"class":264},[220,41705,41706,41708,41710],{"class":222,"line":179},[220,41707,364],{"class":264},[220,41709,23172],{"class":420},[220,41711,359],{"class":264},[220,41713,41714,41716,41718],{"class":222,"line":389},[220,41715,2550],{"class":264},[220,41717,2553],{"class":420},[220,41719,386],{"class":264},[220,41721,41722,41724,41726],{"class":222,"line":399},[220,41723,2567],{"class":264},[220,41725,23172],{"class":420},[220,41727,359],{"class":264},[220,41729,41730,41732,41734],{"class":222,"line":644},[220,41731,402],{"class":264},[220,41733,347],{"class":420},[220,41735,359],{"class":264},[212,41737,41738],{"className":2844,"code":41649,"language":2846,"meta":178,"style":178},[99,41739,41740,41748,41756,41764,41772],{"__ignoreMap":178},[220,41741,41742,41744,41746],{"class":222,"line":223},[220,41743,343],{"class":264},[220,41745,347],{"class":420},[220,41747,359],{"class":264},[220,41749,41750,41752,41754],{"class":222,"line":179},[220,41751,364],{"class":264},[220,41753,23172],{"class":420},[220,41755,359],{"class":264},[220,41757,41758,41760,41762],{"class":222,"line":389},[220,41759,2550],{"class":264},[220,41761,2553],{"class":420},[220,41763,386],{"class":264},[220,41765,41766,41768,41770],{"class":222,"line":399},[220,41767,2567],{"class":264},[220,41769,23172],{"class":420},[220,41771,359],{"class":264},[220,41773,41774,41776,41778],{"class":222,"line":644},[220,41775,402],{"class":264},[220,41777,347],{"class":420},[220,41779,359],{"class":264},[212,41781,41782],{"className":468,"code":41649,"language":469,"meta":178,"style":178},[99,41783,41784,41792,41800,41808,41816],{"__ignoreMap":178},[220,41785,41786,41788,41790],{"class":222,"line":223},[220,41787,343],{"class":264},[220,41789,347],{"class":420},[220,41791,359],{"class":264},[220,41793,41794,41796,41798],{"class":222,"line":179},[220,41795,364],{"class":264},[220,41797,23172],{"class":420},[220,41799,359],{"class":264},[220,41801,41802,41804,41806],{"class":222,"line":389},[220,41803,2550],{"class":264},[220,41805,2553],{"class":420},[220,41807,386],{"class":264},[220,41809,41810,41812,41814],{"class":222,"line":399},[220,41811,2567],{"class":264},[220,41813,23172],{"class":420},[220,41815,359],{"class":264},[220,41817,41818,41820,41822],{"class":222,"line":644},[220,41819,402],{"class":264},[220,41821,347],{"class":420},[220,41823,359],{"class":264},[212,41825,41827],{"className":251,"code":41826,"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,41828,41829,41839,41843,41857,41861,41870,41878,41882,41886],{"__ignoreMap":178},[220,41830,41831,41833,41835,41837],{"class":222,"line":223},[220,41832,261],{"class":260},[220,41834,11512],{"class":264},[220,41836,268],{"class":260},[220,41838,4007],{"class":230},[220,41840,41841],{"class":222,"line":179},[220,41842,647],{"emptyLinePlaceholder":194},[220,41844,41845,41847,41849,41851,41853,41855],{"class":222,"line":389},[220,41846,1735],{"class":260},[220,41848,1738],{"class":420},[220,41850,1741],{"class":260},[220,41852,1744],{"class":260},[220,41854,1747],{"class":226},[220,41856,1750],{"class":264},[220,41858,41859],{"class":222,"line":399},[220,41860,1765],{"class":264},[220,41862,41863,41865,41868],{"class":222,"line":644},[220,41864,1770],{"class":264},[220,41866,41867],{"class":230},"'Crystal'",[220,41869,7009],{"class":264},[220,41871,41872,41874,41876],{"class":222,"line":650},[220,41873,7014],{"class":264},[220,41875,3206],{"class":230},[220,41877,2465],{"class":264},[220,41879,41880],{"class":222,"line":656},[220,41881,7031],{"class":264},[220,41883,41884],{"class":222,"line":673},[220,41885,1787],{"class":264},[220,41887,41888],{"class":222,"line":682},[220,41889,1792],{"class":264},[1504,41891,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":41893},[41894,41895],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":23172,"description":41635},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":41902,"title":41903,"body":41904,"category":33063,"componentType":25877,"description":41911,"extension":191,"meta":42095,"navigation":194,"path":42096,"requiresChild":32530,"seo":42097,"stem":42098,"__hash__":42099},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":41905,"toc":42091},[41906,41909,41912,41914,41916,41918,41920,42089],[11,41907,41903],{"id":41908},"curlnoise",[15,41910,41911],{},"Swirling divergence-free flow field that drifts over time",[31911,41913],{"component":41903},[23,41915,31915],{"id":26533},[31917,41917],{":props":34648},[23,41919,31923],{"id":31922},[246,41921,41922,41951,41979,42007,42035],{":tabs":1557},[212,41923,41925],{"className":334,"code":41924,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,41926,41927,41935,41943],{"__ignoreMap":178},[220,41928,41929,41931,41933],{"class":222,"line":223},[220,41930,343],{"class":264},[220,41932,347],{"class":346},[220,41934,359],{"class":264},[220,41936,41937,41939,41941],{"class":222,"line":179},[220,41938,364],{"class":264},[220,41940,41903],{"class":346},[220,41942,386],{"class":264},[220,41944,41945,41947,41949],{"class":222,"line":389},[220,41946,402],{"class":264},[220,41948,347],{"class":346},[220,41950,359],{"class":264},[212,41952,41953],{"className":409,"code":41924,"language":411,"meta":178,"style":178},[99,41954,41955,41963,41971],{"__ignoreMap":178},[220,41956,41957,41959,41961],{"class":222,"line":223},[220,41958,343],{"class":264},[220,41960,347],{"class":420},[220,41962,359],{"class":264},[220,41964,41965,41967,41969],{"class":222,"line":179},[220,41966,364],{"class":264},[220,41968,41903],{"class":420},[220,41970,386],{"class":264},[220,41972,41973,41975,41977],{"class":222,"line":389},[220,41974,402],{"class":264},[220,41976,347],{"class":420},[220,41978,359],{"class":264},[212,41980,41981],{"className":2844,"code":41924,"language":2846,"meta":178,"style":178},[99,41982,41983,41991,41999],{"__ignoreMap":178},[220,41984,41985,41987,41989],{"class":222,"line":223},[220,41986,343],{"class":264},[220,41988,347],{"class":420},[220,41990,359],{"class":264},[220,41992,41993,41995,41997],{"class":222,"line":179},[220,41994,364],{"class":264},[220,41996,41903],{"class":420},[220,41998,386],{"class":264},[220,42000,42001,42003,42005],{"class":222,"line":389},[220,42002,402],{"class":264},[220,42004,347],{"class":420},[220,42006,359],{"class":264},[212,42008,42009],{"className":468,"code":41924,"language":469,"meta":178,"style":178},[99,42010,42011,42019,42027],{"__ignoreMap":178},[220,42012,42013,42015,42017],{"class":222,"line":223},[220,42014,343],{"class":264},[220,42016,347],{"class":420},[220,42018,359],{"class":264},[220,42020,42021,42023,42025],{"class":222,"line":179},[220,42022,364],{"class":264},[220,42024,41903],{"class":420},[220,42026,386],{"class":264},[220,42028,42029,42031,42033],{"class":222,"line":389},[220,42030,402],{"class":264},[220,42032,347],{"class":420},[220,42034,359],{"class":264},[212,42036,42038],{"className":251,"code":42037,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CurlNoise', props: {} }\n ]\n})\n",[99,42039,42040,42050,42054,42068,42072,42081,42085],{"__ignoreMap":178},[220,42041,42042,42044,42046,42048],{"class":222,"line":223},[220,42043,261],{"class":260},[220,42045,11512],{"class":264},[220,42047,268],{"class":260},[220,42049,4007],{"class":230},[220,42051,42052],{"class":222,"line":179},[220,42053,647],{"emptyLinePlaceholder":194},[220,42055,42056,42058,42060,42062,42064,42066],{"class":222,"line":389},[220,42057,1735],{"class":260},[220,42059,1738],{"class":420},[220,42061,1741],{"class":260},[220,42063,1744],{"class":260},[220,42065,1747],{"class":226},[220,42067,1750],{"class":264},[220,42069,42070],{"class":222,"line":399},[220,42071,1765],{"class":264},[220,42073,42074,42076,42079],{"class":222,"line":644},[220,42075,1770],{"class":264},[220,42077,42078],{"class":230},"'CurlNoise'",[220,42080,2465],{"class":264},[220,42082,42083],{"class":222,"line":650},[220,42084,1787],{"class":264},[220,42086,42087],{"class":222,"line":656},[220,42088,1792],{"class":264},[1504,42090,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":42092},[42093,42094],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":41903,"description":41911},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":42101,"title":14426,"body":42102,"category":35559,"componentType":25883,"description":42109,"extension":191,"meta":42474,"navigation":194,"path":42475,"requiresChild":194,"seo":42476,"stem":42477,"__hash__":42478},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":42103,"toc":42470},[42104,42107,42110,42112,42114,42117,42119,42468],[11,42105,14426],{"id":42106},"cursorripples",[15,42108,42109],{},"Fluid-like ripple distortion",[31911,42111],{"component":14426},[23,42113,31915],{"id":26533},[31917,42115],{":props":42116},"[{\"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,42118,31923],{"id":31922},[246,42120,42121,42187,42258,42324,42394],{":tabs":1557},[212,42122,42124],{"className":334,"code":42123,"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,42125,42126,42134,42141,42150,42159,42163,42171,42179],{"__ignoreMap":178},[220,42127,42128,42130,42132],{"class":222,"line":223},[220,42129,343],{"class":264},[220,42131,347],{"class":346},[220,42133,359],{"class":264},[220,42135,42136,42138],{"class":222,"line":179},[220,42137,364],{"class":264},[220,42139,42140],{"class":346},"CursorRipples\n",[220,42142,42143,42145,42147],{"class":222,"line":389},[220,42144,20371],{"class":226},[220,42146,353],{"class":264},[220,42148,42149],{"class":230},"\"10\"\n",[220,42151,42152,42154,42156],{"class":222,"line":399},[220,42153,17405],{"class":226},[220,42155,353],{"class":264},[220,42157,42158],{"class":230},"\"0.5\"\n",[220,42160,42161],{"class":222,"line":644},[220,42162,31959],{"class":264},[220,42164,42165,42167,42169],{"class":222,"line":650},[220,42166,2550],{"class":264},[220,42168,2553],{"class":346},[220,42170,386],{"class":264},[220,42172,42173,42175,42177],{"class":222,"line":656},[220,42174,2567],{"class":264},[220,42176,14426],{"class":346},[220,42178,359],{"class":264},[220,42180,42181,42183,42185],{"class":222,"line":673},[220,42182,402],{"class":264},[220,42184,347],{"class":346},[220,42186,359],{"class":264},[212,42188,42190],{"className":409,"code":42189,"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,42191,42192,42200,42206,42218,42230,42234,42242,42250],{"__ignoreMap":178},[220,42193,42194,42196,42198],{"class":222,"line":223},[220,42195,343],{"class":264},[220,42197,347],{"class":420},[220,42199,359],{"class":264},[220,42201,42202,42204],{"class":222,"line":179},[220,42203,364],{"class":264},[220,42205,42140],{"class":420},[220,42207,42208,42210,42212,42214,42216],{"class":222,"line":389},[220,42209,20482],{"class":226},[220,42211,353],{"class":260},[220,42213,743],{"class":264},[220,42215,23850],{"class":420},[220,42217,749],{"class":264},[220,42219,42220,42222,42224,42226,42228],{"class":222,"line":399},[220,42221,9645],{"class":226},[220,42223,353],{"class":260},[220,42225,743],{"class":264},[220,42227,7754],{"class":420},[220,42229,749],{"class":264},[220,42231,42232],{"class":222,"line":644},[220,42233,31959],{"class":264},[220,42235,42236,42238,42240],{"class":222,"line":650},[220,42237,2550],{"class":264},[220,42239,2553],{"class":420},[220,42241,386],{"class":264},[220,42243,42244,42246,42248],{"class":222,"line":656},[220,42245,2567],{"class":264},[220,42247,14426],{"class":420},[220,42249,359],{"class":264},[220,42251,42252,42254,42256],{"class":222,"line":673},[220,42253,402],{"class":264},[220,42255,347],{"class":420},[220,42257,359],{"class":264},[212,42259,42260],{"className":2844,"code":42189,"language":2846,"meta":178,"style":178},[99,42261,42262,42270,42276,42286,42296,42300,42308,42316],{"__ignoreMap":178},[220,42263,42264,42266,42268],{"class":222,"line":223},[220,42265,343],{"class":264},[220,42267,347],{"class":420},[220,42269,359],{"class":264},[220,42271,42272,42274],{"class":222,"line":179},[220,42273,364],{"class":264},[220,42275,42140],{"class":420},[220,42277,42278,42280,42282,42284],{"class":222,"line":389},[220,42279,20482],{"class":226},[220,42281,29871],{"class":264},[220,42283,23850],{"class":420},[220,42285,749],{"class":264},[220,42287,42288,42290,42292,42294],{"class":222,"line":399},[220,42289,9645],{"class":226},[220,42291,29871],{"class":264},[220,42293,7754],{"class":420},[220,42295,749],{"class":264},[220,42297,42298],{"class":222,"line":644},[220,42299,31959],{"class":264},[220,42301,42302,42304,42306],{"class":222,"line":650},[220,42303,2550],{"class":264},[220,42305,2553],{"class":420},[220,42307,386],{"class":264},[220,42309,42310,42312,42314],{"class":222,"line":656},[220,42311,2567],{"class":264},[220,42313,14426],{"class":420},[220,42315,359],{"class":264},[220,42317,42318,42320,42322],{"class":222,"line":673},[220,42319,402],{"class":264},[220,42321,347],{"class":420},[220,42323,359],{"class":264},[212,42325,42326],{"className":468,"code":42189,"language":469,"meta":178,"style":178},[99,42327,42328,42336,42342,42354,42366,42370,42378,42386],{"__ignoreMap":178},[220,42329,42330,42332,42334],{"class":222,"line":223},[220,42331,343],{"class":264},[220,42333,347],{"class":420},[220,42335,359],{"class":264},[220,42337,42338,42340],{"class":222,"line":179},[220,42339,364],{"class":264},[220,42341,42140],{"class":420},[220,42343,42344,42346,42348,42350,42352],{"class":222,"line":389},[220,42345,20482],{"class":226},[220,42347,353],{"class":260},[220,42349,743],{"class":264},[220,42351,23850],{"class":420},[220,42353,749],{"class":264},[220,42355,42356,42358,42360,42362,42364],{"class":222,"line":399},[220,42357,9645],{"class":226},[220,42359,353],{"class":260},[220,42361,743],{"class":264},[220,42363,7754],{"class":420},[220,42365,749],{"class":264},[220,42367,42368],{"class":222,"line":644},[220,42369,31959],{"class":264},[220,42371,42372,42374,42376],{"class":222,"line":650},[220,42373,2550],{"class":264},[220,42375,2553],{"class":420},[220,42377,386],{"class":264},[220,42379,42380,42382,42384],{"class":222,"line":656},[220,42381,2567],{"class":264},[220,42383,14426],{"class":420},[220,42385,359],{"class":264},[220,42387,42388,42390,42392],{"class":222,"line":673},[220,42389,402],{"class":264},[220,42391,347],{"class":420},[220,42393,359],{"class":264},[212,42395,42397],{"className":251,"code":42396,"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,42398,42399,42409,42413,42427,42431,42448,42456,42460,42464],{"__ignoreMap":178},[220,42400,42401,42403,42405,42407],{"class":222,"line":223},[220,42402,261],{"class":260},[220,42404,11512],{"class":264},[220,42406,268],{"class":260},[220,42408,4007],{"class":230},[220,42410,42411],{"class":222,"line":179},[220,42412,647],{"emptyLinePlaceholder":194},[220,42414,42415,42417,42419,42421,42423,42425],{"class":222,"line":389},[220,42416,1735],{"class":260},[220,42418,1738],{"class":420},[220,42420,1741],{"class":260},[220,42422,1744],{"class":260},[220,42424,1747],{"class":226},[220,42426,1750],{"class":264},[220,42428,42429],{"class":222,"line":399},[220,42430,1765],{"class":264},[220,42432,42433,42435,42438,42440,42442,42444,42446],{"class":222,"line":644},[220,42434,1770],{"class":264},[220,42436,42437],{"class":230},"'CursorRipples'",[220,42439,32203],{"class":264},[220,42441,23850],{"class":420},[220,42443,6566],{"class":264},[220,42445,7754],{"class":420},[220,42447,7546],{"class":264},[220,42449,42450,42452,42454],{"class":222,"line":650},[220,42451,7014],{"class":264},[220,42453,3206],{"class":230},[220,42455,2465],{"class":264},[220,42457,42458],{"class":222,"line":656},[220,42459,7031],{"class":264},[220,42461,42462],{"class":222,"line":673},[220,42463,1787],{"class":264},[220,42465,42466],{"class":222,"line":682},[220,42467,1792],{"class":264},[1504,42469,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42471},[42472,42473],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":14426,"description":42109},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":42480,"title":394,"body":42481,"category":35559,"componentType":25877,"description":42488,"extension":191,"meta":42728,"navigation":194,"path":42729,"requiresChild":32530,"seo":42730,"stem":42731,"__hash__":42732},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":42482,"toc":42724},[42483,42486,42489,42491,42493,42496,42498,42722],[11,42484,394],{"id":42485},"cursortrail",[15,42487,42488],{},"Animated trail effect that tracks cursor movement",[31911,42490],{"component":394},[23,42492,31915],{"id":26533},[31917,42494],{":props":42495},"[{\"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,42497,31923],{"id":31922},[246,42499,42500,42540,42583,42623,42665],{":tabs":1557},[212,42501,42503],{"className":334,"code":42502,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,42504,42505,42513,42520,42528,42532],{"__ignoreMap":178},[220,42506,42507,42509,42511],{"class":222,"line":223},[220,42508,343],{"class":264},[220,42510,347],{"class":346},[220,42512,359],{"class":264},[220,42514,42515,42517],{"class":222,"line":179},[220,42516,364],{"class":264},[220,42518,42519],{"class":346},"CursorTrail\n",[220,42521,42522,42524,42526],{"class":222,"line":389},[220,42523,17405],{"class":226},[220,42525,353],{"class":264},[220,42527,42158],{"class":230},[220,42529,42530],{"class":222,"line":399},[220,42531,1234],{"class":264},[220,42533,42534,42536,42538],{"class":222,"line":644},[220,42535,402],{"class":264},[220,42537,347],{"class":346},[220,42539,359],{"class":264},[212,42541,42543],{"className":409,"code":42542,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,42544,42545,42553,42559,42571,42575],{"__ignoreMap":178},[220,42546,42547,42549,42551],{"class":222,"line":223},[220,42548,343],{"class":264},[220,42550,347],{"class":420},[220,42552,359],{"class":264},[220,42554,42555,42557],{"class":222,"line":179},[220,42556,364],{"class":264},[220,42558,42519],{"class":420},[220,42560,42561,42563,42565,42567,42569],{"class":222,"line":389},[220,42562,9645],{"class":226},[220,42564,353],{"class":260},[220,42566,743],{"class":264},[220,42568,7754],{"class":420},[220,42570,749],{"class":264},[220,42572,42573],{"class":222,"line":399},[220,42574,1234],{"class":264},[220,42576,42577,42579,42581],{"class":222,"line":644},[220,42578,402],{"class":264},[220,42580,347],{"class":420},[220,42582,359],{"class":264},[212,42584,42585],{"className":2844,"code":42542,"language":2846,"meta":178,"style":178},[99,42586,42587,42595,42601,42611,42615],{"__ignoreMap":178},[220,42588,42589,42591,42593],{"class":222,"line":223},[220,42590,343],{"class":264},[220,42592,347],{"class":420},[220,42594,359],{"class":264},[220,42596,42597,42599],{"class":222,"line":179},[220,42598,364],{"class":264},[220,42600,42519],{"class":420},[220,42602,42603,42605,42607,42609],{"class":222,"line":389},[220,42604,9645],{"class":226},[220,42606,29871],{"class":264},[220,42608,7754],{"class":420},[220,42610,749],{"class":264},[220,42612,42613],{"class":222,"line":399},[220,42614,1234],{"class":264},[220,42616,42617,42619,42621],{"class":222,"line":644},[220,42618,402],{"class":264},[220,42620,347],{"class":420},[220,42622,359],{"class":264},[212,42624,42625],{"className":468,"code":42542,"language":469,"meta":178,"style":178},[99,42626,42627,42635,42641,42653,42657],{"__ignoreMap":178},[220,42628,42629,42631,42633],{"class":222,"line":223},[220,42630,343],{"class":264},[220,42632,347],{"class":420},[220,42634,359],{"class":264},[220,42636,42637,42639],{"class":222,"line":179},[220,42638,364],{"class":264},[220,42640,42519],{"class":420},[220,42642,42643,42645,42647,42649,42651],{"class":222,"line":389},[220,42644,9645],{"class":226},[220,42646,353],{"class":260},[220,42648,743],{"class":264},[220,42650,7754],{"class":420},[220,42652,749],{"class":264},[220,42654,42655],{"class":222,"line":399},[220,42656,1234],{"class":264},[220,42658,42659,42661,42663],{"class":222,"line":644},[220,42660,402],{"class":264},[220,42662,347],{"class":420},[220,42664,359],{"class":264},[212,42666,42668],{"className":251,"code":42667,"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,42669,42670,42680,42684,42698,42702,42714,42718],{"__ignoreMap":178},[220,42671,42672,42674,42676,42678],{"class":222,"line":223},[220,42673,261],{"class":260},[220,42675,11512],{"class":264},[220,42677,268],{"class":260},[220,42679,4007],{"class":230},[220,42681,42682],{"class":222,"line":179},[220,42683,647],{"emptyLinePlaceholder":194},[220,42685,42686,42688,42690,42692,42694,42696],{"class":222,"line":389},[220,42687,1735],{"class":260},[220,42689,1738],{"class":420},[220,42691,1741],{"class":260},[220,42693,1744],{"class":260},[220,42695,1747],{"class":226},[220,42697,1750],{"class":264},[220,42699,42700],{"class":222,"line":399},[220,42701,1765],{"class":264},[220,42703,42704,42706,42708,42710,42712],{"class":222,"line":644},[220,42705,1770],{"class":264},[220,42707,26365],{"class":230},[220,42709,7541],{"class":264},[220,42711,7754],{"class":420},[220,42713,1782],{"class":264},[220,42715,42716],{"class":222,"line":650},[220,42717,1787],{"class":264},[220,42719,42720],{"class":222,"line":656},[220,42721,1792],{"class":264},[1504,42723,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42725},[42726,42727],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":42488},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":42734,"title":42735,"body":42736,"category":32806,"componentType":25883,"description":42743,"extension":191,"meta":43061,"navigation":194,"path":43062,"requiresChild":194,"seo":43063,"stem":43064,"__hash__":43065},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":42737,"toc":43057},[42738,42741,42744,42746,42748,42751,42753,43055],[11,42739,42735],{"id":42740},"datamosh",[15,42742,42743],{},"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,42745],{"component":42735},[23,42747,31915],{"id":26533},[31917,42749],{":props":42750},"[{\"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,42752,31923],{"id":31922},[246,42754,42755,42812,42871,42927,42985],{":tabs":1557},[212,42756,42758],{"className":334,"code":42757,"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,42759,42760,42768,42775,42784,42788,42796,42804],{"__ignoreMap":178},[220,42761,42762,42764,42766],{"class":222,"line":223},[220,42763,343],{"class":264},[220,42765,347],{"class":346},[220,42767,359],{"class":264},[220,42769,42770,42772],{"class":222,"line":179},[220,42771,364],{"class":264},[220,42773,42774],{"class":346},"DataMosh\n",[220,42776,42777,42779,42781],{"class":222,"line":389},[220,42778,20371],{"class":226},[220,42780,353],{"class":264},[220,42782,42783],{"class":230},"\"0.7\"\n",[220,42785,42786],{"class":222,"line":399},[220,42787,31959],{"class":264},[220,42789,42790,42792,42794],{"class":222,"line":644},[220,42791,2550],{"class":264},[220,42793,2553],{"class":346},[220,42795,386],{"class":264},[220,42797,42798,42800,42802],{"class":222,"line":650},[220,42799,2567],{"class":264},[220,42801,42735],{"class":346},[220,42803,359],{"class":264},[220,42805,42806,42808,42810],{"class":222,"line":656},[220,42807,402],{"class":264},[220,42809,347],{"class":346},[220,42811,359],{"class":264},[212,42813,42815],{"className":409,"code":42814,"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,42816,42817,42825,42831,42843,42847,42855,42863],{"__ignoreMap":178},[220,42818,42819,42821,42823],{"class":222,"line":223},[220,42820,343],{"class":264},[220,42822,347],{"class":420},[220,42824,359],{"class":264},[220,42826,42827,42829],{"class":222,"line":179},[220,42828,364],{"class":264},[220,42830,42774],{"class":420},[220,42832,42833,42835,42837,42839,42841],{"class":222,"line":389},[220,42834,20482],{"class":226},[220,42836,353],{"class":260},[220,42838,743],{"class":264},[220,42840,18944],{"class":420},[220,42842,749],{"class":264},[220,42844,42845],{"class":222,"line":399},[220,42846,31959],{"class":264},[220,42848,42849,42851,42853],{"class":222,"line":644},[220,42850,2550],{"class":264},[220,42852,2553],{"class":420},[220,42854,386],{"class":264},[220,42856,42857,42859,42861],{"class":222,"line":650},[220,42858,2567],{"class":264},[220,42860,42735],{"class":420},[220,42862,359],{"class":264},[220,42864,42865,42867,42869],{"class":222,"line":656},[220,42866,402],{"class":264},[220,42868,347],{"class":420},[220,42870,359],{"class":264},[212,42872,42873],{"className":2844,"code":42814,"language":2846,"meta":178,"style":178},[99,42874,42875,42883,42889,42899,42903,42911,42919],{"__ignoreMap":178},[220,42876,42877,42879,42881],{"class":222,"line":223},[220,42878,343],{"class":264},[220,42880,347],{"class":420},[220,42882,359],{"class":264},[220,42884,42885,42887],{"class":222,"line":179},[220,42886,364],{"class":264},[220,42888,42774],{"class":420},[220,42890,42891,42893,42895,42897],{"class":222,"line":389},[220,42892,20482],{"class":226},[220,42894,29871],{"class":264},[220,42896,18944],{"class":420},[220,42898,749],{"class":264},[220,42900,42901],{"class":222,"line":399},[220,42902,31959],{"class":264},[220,42904,42905,42907,42909],{"class":222,"line":644},[220,42906,2550],{"class":264},[220,42908,2553],{"class":420},[220,42910,386],{"class":264},[220,42912,42913,42915,42917],{"class":222,"line":650},[220,42914,2567],{"class":264},[220,42916,42735],{"class":420},[220,42918,359],{"class":264},[220,42920,42921,42923,42925],{"class":222,"line":656},[220,42922,402],{"class":264},[220,42924,347],{"class":420},[220,42926,359],{"class":264},[212,42928,42929],{"className":468,"code":42814,"language":469,"meta":178,"style":178},[99,42930,42931,42939,42945,42957,42961,42969,42977],{"__ignoreMap":178},[220,42932,42933,42935,42937],{"class":222,"line":223},[220,42934,343],{"class":264},[220,42936,347],{"class":420},[220,42938,359],{"class":264},[220,42940,42941,42943],{"class":222,"line":179},[220,42942,364],{"class":264},[220,42944,42774],{"class":420},[220,42946,42947,42949,42951,42953,42955],{"class":222,"line":389},[220,42948,20482],{"class":226},[220,42950,353],{"class":260},[220,42952,743],{"class":264},[220,42954,18944],{"class":420},[220,42956,749],{"class":264},[220,42958,42959],{"class":222,"line":399},[220,42960,31959],{"class":264},[220,42962,42963,42965,42967],{"class":222,"line":644},[220,42964,2550],{"class":264},[220,42966,2553],{"class":420},[220,42968,386],{"class":264},[220,42970,42971,42973,42975],{"class":222,"line":650},[220,42972,2567],{"class":264},[220,42974,42735],{"class":420},[220,42976,359],{"class":264},[220,42978,42979,42981,42983],{"class":222,"line":656},[220,42980,402],{"class":264},[220,42982,347],{"class":420},[220,42984,359],{"class":264},[212,42986,42988],{"className":251,"code":42987,"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,42989,42990,43000,43004,43018,43022,43035,43043,43047,43051],{"__ignoreMap":178},[220,42991,42992,42994,42996,42998],{"class":222,"line":223},[220,42993,261],{"class":260},[220,42995,11512],{"class":264},[220,42997,268],{"class":260},[220,42999,4007],{"class":230},[220,43001,43002],{"class":222,"line":179},[220,43003,647],{"emptyLinePlaceholder":194},[220,43005,43006,43008,43010,43012,43014,43016],{"class":222,"line":389},[220,43007,1735],{"class":260},[220,43009,1738],{"class":420},[220,43011,1741],{"class":260},[220,43013,1744],{"class":260},[220,43015,1747],{"class":226},[220,43017,1750],{"class":264},[220,43019,43020],{"class":222,"line":399},[220,43021,1765],{"class":264},[220,43023,43024,43026,43029,43031,43033],{"class":222,"line":644},[220,43025,1770],{"class":264},[220,43027,43028],{"class":230},"'DataMosh'",[220,43030,32203],{"class":264},[220,43032,18944],{"class":420},[220,43034,7546],{"class":264},[220,43036,43037,43039,43041],{"class":222,"line":650},[220,43038,7014],{"class":264},[220,43040,3206],{"class":230},[220,43042,2465],{"class":264},[220,43044,43045],{"class":222,"line":656},[220,43046,7031],{"class":264},[220,43048,43049],{"class":222,"line":673},[220,43050,1787],{"class":264},[220,43052,43053],{"class":222,"line":682},[220,43054,1792],{"class":264},[1504,43056,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43058},[43059,43060],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":42735,"description":42743},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":43067,"title":43068,"body":43069,"category":33063,"componentType":25877,"description":43076,"extension":191,"meta":43261,"navigation":194,"path":43262,"requiresChild":32530,"seo":43263,"stem":43264,"__hash__":43265},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":43070,"toc":43257},[43071,43074,43077,43079,43081,43084,43086,43255],[11,43072,43068],{"id":43073},"diamondgradient",[15,43075,43076],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[31911,43078],{"component":43068},[23,43080,31915],{"id":26533},[31917,43082],{":props":43083},"[{\"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,43085,31923],{"id":31922},[246,43087,43088,43117,43145,43173,43201],{":tabs":1557},[212,43089,43091],{"className":334,"code":43090,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,43092,43093,43101,43109],{"__ignoreMap":178},[220,43094,43095,43097,43099],{"class":222,"line":223},[220,43096,343],{"class":264},[220,43098,347],{"class":346},[220,43100,359],{"class":264},[220,43102,43103,43105,43107],{"class":222,"line":179},[220,43104,364],{"class":264},[220,43106,43068],{"class":346},[220,43108,386],{"class":264},[220,43110,43111,43113,43115],{"class":222,"line":389},[220,43112,402],{"class":264},[220,43114,347],{"class":346},[220,43116,359],{"class":264},[212,43118,43119],{"className":409,"code":43090,"language":411,"meta":178,"style":178},[99,43120,43121,43129,43137],{"__ignoreMap":178},[220,43122,43123,43125,43127],{"class":222,"line":223},[220,43124,343],{"class":264},[220,43126,347],{"class":420},[220,43128,359],{"class":264},[220,43130,43131,43133,43135],{"class":222,"line":179},[220,43132,364],{"class":264},[220,43134,43068],{"class":420},[220,43136,386],{"class":264},[220,43138,43139,43141,43143],{"class":222,"line":389},[220,43140,402],{"class":264},[220,43142,347],{"class":420},[220,43144,359],{"class":264},[212,43146,43147],{"className":2844,"code":43090,"language":2846,"meta":178,"style":178},[99,43148,43149,43157,43165],{"__ignoreMap":178},[220,43150,43151,43153,43155],{"class":222,"line":223},[220,43152,343],{"class":264},[220,43154,347],{"class":420},[220,43156,359],{"class":264},[220,43158,43159,43161,43163],{"class":222,"line":179},[220,43160,364],{"class":264},[220,43162,43068],{"class":420},[220,43164,386],{"class":264},[220,43166,43167,43169,43171],{"class":222,"line":389},[220,43168,402],{"class":264},[220,43170,347],{"class":420},[220,43172,359],{"class":264},[212,43174,43175],{"className":468,"code":43090,"language":469,"meta":178,"style":178},[99,43176,43177,43185,43193],{"__ignoreMap":178},[220,43178,43179,43181,43183],{"class":222,"line":223},[220,43180,343],{"class":264},[220,43182,347],{"class":420},[220,43184,359],{"class":264},[220,43186,43187,43189,43191],{"class":222,"line":179},[220,43188,364],{"class":264},[220,43190,43068],{"class":420},[220,43192,386],{"class":264},[220,43194,43195,43197,43199],{"class":222,"line":389},[220,43196,402],{"class":264},[220,43198,347],{"class":420},[220,43200,359],{"class":264},[212,43202,43204],{"className":251,"code":43203,"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,43205,43206,43216,43220,43234,43238,43247,43251],{"__ignoreMap":178},[220,43207,43208,43210,43212,43214],{"class":222,"line":223},[220,43209,261],{"class":260},[220,43211,11512],{"class":264},[220,43213,268],{"class":260},[220,43215,4007],{"class":230},[220,43217,43218],{"class":222,"line":179},[220,43219,647],{"emptyLinePlaceholder":194},[220,43221,43222,43224,43226,43228,43230,43232],{"class":222,"line":389},[220,43223,1735],{"class":260},[220,43225,1738],{"class":420},[220,43227,1741],{"class":260},[220,43229,1744],{"class":260},[220,43231,1747],{"class":226},[220,43233,1750],{"class":264},[220,43235,43236],{"class":222,"line":399},[220,43237,1765],{"class":264},[220,43239,43240,43242,43245],{"class":222,"line":644},[220,43241,1770],{"class":264},[220,43243,43244],{"class":230},"'DiamondGradient'",[220,43246,2465],{"class":264},[220,43248,43249],{"class":222,"line":650},[220,43250,1787],{"class":264},[220,43252,43253],{"class":222,"line":656},[220,43254,1792],{"class":264},[1504,43256,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":43258},[43259,43260],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":43068,"description":43076},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":43267,"title":43268,"body":43269,"category":33673,"componentType":25883,"description":43276,"extension":191,"meta":43537,"navigation":194,"path":43538,"requiresChild":194,"seo":43539,"stem":43540,"__hash__":43541},"components\u002Fdocs\u002Fcomponents\u002FDiamondWipe.md","DiamondWipe",{"type":8,"value":43270,"toc":43533},[43271,43274,43277,43279,43281,43284,43286,43531],[11,43272,43268],{"id":43273},"diamondwipe",[15,43275,43276],{},"Wipe the content away through a lattice of growing diamonds",[31911,43278],{"component":43268},[23,43280,31915],{"id":26533},[31917,43282],{":props":43283},"[{\"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,43285,31923],{"id":31922},[246,43287,43288,43333,43377,43421,43465],{":tabs":1557},[212,43289,43291],{"className":334,"code":43290,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondWipe>\n \u003CCircle \u002F>\n \u003C\u002FDiamondWipe>\n\u003C\u002FShader>\n",[99,43292,43293,43301,43309,43317,43325],{"__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,359],{"class":264},[220,43310,43311,43313,43315],{"class":222,"line":389},[220,43312,2550],{"class":264},[220,43314,2553],{"class":346},[220,43316,386],{"class":264},[220,43318,43319,43321,43323],{"class":222,"line":399},[220,43320,2567],{"class":264},[220,43322,43268],{"class":346},[220,43324,359],{"class":264},[220,43326,43327,43329,43331],{"class":222,"line":644},[220,43328,402],{"class":264},[220,43330,347],{"class":346},[220,43332,359],{"class":264},[212,43334,43335],{"className":409,"code":43290,"language":411,"meta":178,"style":178},[99,43336,43337,43345,43353,43361,43369],{"__ignoreMap":178},[220,43338,43339,43341,43343],{"class":222,"line":223},[220,43340,343],{"class":264},[220,43342,347],{"class":420},[220,43344,359],{"class":264},[220,43346,43347,43349,43351],{"class":222,"line":179},[220,43348,364],{"class":264},[220,43350,43268],{"class":420},[220,43352,359],{"class":264},[220,43354,43355,43357,43359],{"class":222,"line":389},[220,43356,2550],{"class":264},[220,43358,2553],{"class":420},[220,43360,386],{"class":264},[220,43362,43363,43365,43367],{"class":222,"line":399},[220,43364,2567],{"class":264},[220,43366,43268],{"class":420},[220,43368,359],{"class":264},[220,43370,43371,43373,43375],{"class":222,"line":644},[220,43372,402],{"class":264},[220,43374,347],{"class":420},[220,43376,359],{"class":264},[212,43378,43379],{"className":2844,"code":43290,"language":2846,"meta":178,"style":178},[99,43380,43381,43389,43397,43405,43413],{"__ignoreMap":178},[220,43382,43383,43385,43387],{"class":222,"line":223},[220,43384,343],{"class":264},[220,43386,347],{"class":420},[220,43388,359],{"class":264},[220,43390,43391,43393,43395],{"class":222,"line":179},[220,43392,364],{"class":264},[220,43394,43268],{"class":420},[220,43396,359],{"class":264},[220,43398,43399,43401,43403],{"class":222,"line":389},[220,43400,2550],{"class":264},[220,43402,2553],{"class":420},[220,43404,386],{"class":264},[220,43406,43407,43409,43411],{"class":222,"line":399},[220,43408,2567],{"class":264},[220,43410,43268],{"class":420},[220,43412,359],{"class":264},[220,43414,43415,43417,43419],{"class":222,"line":644},[220,43416,402],{"class":264},[220,43418,347],{"class":420},[220,43420,359],{"class":264},[212,43422,43423],{"className":468,"code":43290,"language":469,"meta":178,"style":178},[99,43424,43425,43433,43441,43449,43457],{"__ignoreMap":178},[220,43426,43427,43429,43431],{"class":222,"line":223},[220,43428,343],{"class":264},[220,43430,347],{"class":420},[220,43432,359],{"class":264},[220,43434,43435,43437,43439],{"class":222,"line":179},[220,43436,364],{"class":264},[220,43438,43268],{"class":420},[220,43440,359],{"class":264},[220,43442,43443,43445,43447],{"class":222,"line":389},[220,43444,2550],{"class":264},[220,43446,2553],{"class":420},[220,43448,386],{"class":264},[220,43450,43451,43453,43455],{"class":222,"line":399},[220,43452,2567],{"class":264},[220,43454,43268],{"class":420},[220,43456,359],{"class":264},[220,43458,43459,43461,43463],{"class":222,"line":644},[220,43460,402],{"class":264},[220,43462,347],{"class":420},[220,43464,359],{"class":264},[212,43466,43468],{"className":251,"code":43467,"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,43469,43470,43480,43484,43498,43502,43511,43519,43523,43527],{"__ignoreMap":178},[220,43471,43472,43474,43476,43478],{"class":222,"line":223},[220,43473,261],{"class":260},[220,43475,11512],{"class":264},[220,43477,268],{"class":260},[220,43479,4007],{"class":230},[220,43481,43482],{"class":222,"line":179},[220,43483,647],{"emptyLinePlaceholder":194},[220,43485,43486,43488,43490,43492,43494,43496],{"class":222,"line":389},[220,43487,1735],{"class":260},[220,43489,1738],{"class":420},[220,43491,1741],{"class":260},[220,43493,1744],{"class":260},[220,43495,1747],{"class":226},[220,43497,1750],{"class":264},[220,43499,43500],{"class":222,"line":399},[220,43501,1765],{"class":264},[220,43503,43504,43506,43509],{"class":222,"line":644},[220,43505,1770],{"class":264},[220,43507,43508],{"class":230},"'DiamondWipe'",[220,43510,7009],{"class":264},[220,43512,43513,43515,43517],{"class":222,"line":650},[220,43514,7014],{"class":264},[220,43516,3206],{"class":230},[220,43518,2465],{"class":264},[220,43520,43521],{"class":222,"line":656},[220,43522,7031],{"class":264},[220,43524,43525],{"class":222,"line":673},[220,43526,1787],{"class":264},[220,43528,43529],{"class":222,"line":682},[220,43530,1792],{"class":264},[1504,43532,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":43534},[43535,43536],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondwipe",{"title":43268,"description":43276},"docs\u002Fcomponents\u002FDiamondWipe","KVM9D5et0aht_X23sPAUaS_o9p9s4ipXzKcG_Xwj6PA",{"id":43543,"title":43544,"body":43545,"category":32234,"componentType":25883,"description":43552,"extension":191,"meta":43870,"navigation":194,"path":43871,"requiresChild":194,"seo":43872,"stem":43873,"__hash__":43874},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":43546,"toc":43866},[43547,43550,43553,43555,43557,43560,43562,43864],[11,43548,43544],{"id":43549},"diffuseblur",[15,43551,43552],{},"Grain-like pixel displacement at random",[31911,43554],{"component":43544},[23,43556,31915],{"id":26533},[31917,43558],{":props":43559},"[{\"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,43561,31923],{"id":31922},[246,43563,43564,43621,43680,43736,43794],{":tabs":1557},[212,43565,43567],{"className":334,"code":43566,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43568,43569,43577,43584,43593,43597,43605,43613],{"__ignoreMap":178},[220,43570,43571,43573,43575],{"class":222,"line":223},[220,43572,343],{"class":264},[220,43574,347],{"class":346},[220,43576,359],{"class":264},[220,43578,43579,43581],{"class":222,"line":179},[220,43580,364],{"class":264},[220,43582,43583],{"class":346},"DiffuseBlur\n",[220,43585,43586,43588,43590],{"class":222,"line":389},[220,43587,20371],{"class":226},[220,43589,353],{"class":264},[220,43591,43592],{"class":230},"\"30\"\n",[220,43594,43595],{"class":222,"line":399},[220,43596,31959],{"class":264},[220,43598,43599,43601,43603],{"class":222,"line":644},[220,43600,2550],{"class":264},[220,43602,2553],{"class":346},[220,43604,386],{"class":264},[220,43606,43607,43609,43611],{"class":222,"line":650},[220,43608,2567],{"class":264},[220,43610,43544],{"class":346},[220,43612,359],{"class":264},[220,43614,43615,43617,43619],{"class":222,"line":656},[220,43616,402],{"class":264},[220,43618,347],{"class":346},[220,43620,359],{"class":264},[212,43622,43624],{"className":409,"code":43623,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43625,43626,43634,43640,43652,43656,43664,43672],{"__ignoreMap":178},[220,43627,43628,43630,43632],{"class":222,"line":223},[220,43629,343],{"class":264},[220,43631,347],{"class":420},[220,43633,359],{"class":264},[220,43635,43636,43638],{"class":222,"line":179},[220,43637,364],{"class":264},[220,43639,43583],{"class":420},[220,43641,43642,43644,43646,43648,43650],{"class":222,"line":389},[220,43643,20482],{"class":226},[220,43645,353],{"class":260},[220,43647,743],{"class":264},[220,43649,24010],{"class":420},[220,43651,749],{"class":264},[220,43653,43654],{"class":222,"line":399},[220,43655,31959],{"class":264},[220,43657,43658,43660,43662],{"class":222,"line":644},[220,43659,2550],{"class":264},[220,43661,2553],{"class":420},[220,43663,386],{"class":264},[220,43665,43666,43668,43670],{"class":222,"line":650},[220,43667,2567],{"class":264},[220,43669,43544],{"class":420},[220,43671,359],{"class":264},[220,43673,43674,43676,43678],{"class":222,"line":656},[220,43675,402],{"class":264},[220,43677,347],{"class":420},[220,43679,359],{"class":264},[212,43681,43682],{"className":2844,"code":43623,"language":2846,"meta":178,"style":178},[99,43683,43684,43692,43698,43708,43712,43720,43728],{"__ignoreMap":178},[220,43685,43686,43688,43690],{"class":222,"line":223},[220,43687,343],{"class":264},[220,43689,347],{"class":420},[220,43691,359],{"class":264},[220,43693,43694,43696],{"class":222,"line":179},[220,43695,364],{"class":264},[220,43697,43583],{"class":420},[220,43699,43700,43702,43704,43706],{"class":222,"line":389},[220,43701,20482],{"class":226},[220,43703,29871],{"class":264},[220,43705,24010],{"class":420},[220,43707,749],{"class":264},[220,43709,43710],{"class":222,"line":399},[220,43711,31959],{"class":264},[220,43713,43714,43716,43718],{"class":222,"line":644},[220,43715,2550],{"class":264},[220,43717,2553],{"class":420},[220,43719,386],{"class":264},[220,43721,43722,43724,43726],{"class":222,"line":650},[220,43723,2567],{"class":264},[220,43725,43544],{"class":420},[220,43727,359],{"class":264},[220,43729,43730,43732,43734],{"class":222,"line":656},[220,43731,402],{"class":264},[220,43733,347],{"class":420},[220,43735,359],{"class":264},[212,43737,43738],{"className":468,"code":43623,"language":469,"meta":178,"style":178},[99,43739,43740,43748,43754,43766,43770,43778,43786],{"__ignoreMap":178},[220,43741,43742,43744,43746],{"class":222,"line":223},[220,43743,343],{"class":264},[220,43745,347],{"class":420},[220,43747,359],{"class":264},[220,43749,43750,43752],{"class":222,"line":179},[220,43751,364],{"class":264},[220,43753,43583],{"class":420},[220,43755,43756,43758,43760,43762,43764],{"class":222,"line":389},[220,43757,20482],{"class":226},[220,43759,353],{"class":260},[220,43761,743],{"class":264},[220,43763,24010],{"class":420},[220,43765,749],{"class":264},[220,43767,43768],{"class":222,"line":399},[220,43769,31959],{"class":264},[220,43771,43772,43774,43776],{"class":222,"line":644},[220,43773,2550],{"class":264},[220,43775,2553],{"class":420},[220,43777,386],{"class":264},[220,43779,43780,43782,43784],{"class":222,"line":650},[220,43781,2567],{"class":264},[220,43783,43544],{"class":420},[220,43785,359],{"class":264},[220,43787,43788,43790,43792],{"class":222,"line":656},[220,43789,402],{"class":264},[220,43791,347],{"class":420},[220,43793,359],{"class":264},[212,43795,43797],{"className":251,"code":43796,"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,43798,43799,43809,43813,43827,43831,43844,43852,43856,43860],{"__ignoreMap":178},[220,43800,43801,43803,43805,43807],{"class":222,"line":223},[220,43802,261],{"class":260},[220,43804,11512],{"class":264},[220,43806,268],{"class":260},[220,43808,4007],{"class":230},[220,43810,43811],{"class":222,"line":179},[220,43812,647],{"emptyLinePlaceholder":194},[220,43814,43815,43817,43819,43821,43823,43825],{"class":222,"line":389},[220,43816,1735],{"class":260},[220,43818,1738],{"class":420},[220,43820,1741],{"class":260},[220,43822,1744],{"class":260},[220,43824,1747],{"class":226},[220,43826,1750],{"class":264},[220,43828,43829],{"class":222,"line":399},[220,43830,1765],{"class":264},[220,43832,43833,43835,43838,43840,43842],{"class":222,"line":644},[220,43834,1770],{"class":264},[220,43836,43837],{"class":230},"'DiffuseBlur'",[220,43839,32203],{"class":264},[220,43841,24010],{"class":420},[220,43843,7546],{"class":264},[220,43845,43846,43848,43850],{"class":222,"line":650},[220,43847,7014],{"class":264},[220,43849,3206],{"class":230},[220,43851,2465],{"class":264},[220,43853,43854],{"class":222,"line":656},[220,43855,7031],{"class":264},[220,43857,43858],{"class":222,"line":673},[220,43859,1787],{"class":264},[220,43861,43862],{"class":222,"line":682},[220,43863,1792],{"class":264},[1504,43865,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43867},[43868,43869],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":43544,"description":43552},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":43876,"title":43877,"body":43878,"category":33396,"componentType":25883,"description":43885,"extension":191,"meta":44146,"navigation":194,"path":44147,"requiresChild":194,"seo":44148,"stem":44149,"__hash__":44150},"components\u002Fdocs\u002Fcomponents\u002FDisplacementMap.md","DisplacementMap",{"type":8,"value":43879,"toc":44142},[43880,43883,43886,43888,43890,43893,43895,44140],[11,43881,43877],{"id":43882},"displacementmap",[15,43884,43885],{},"Distorts child content using another layer's pixels as a displacement map",[31911,43887],{"component":43877},[23,43889,31915],{"id":26533},[31917,43891],{":props":43892},"[{\"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,43894,31923],{"id":31922},[246,43896,43897,43942,43986,44030,44074],{":tabs":1557},[212,43898,43900],{"className":334,"code":43899,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDisplacementMap>\n \u003CCircle \u002F>\n \u003C\u002FDisplacementMap>\n\u003C\u002FShader>\n",[99,43901,43902,43910,43918,43926,43934],{"__ignoreMap":178},[220,43903,43904,43906,43908],{"class":222,"line":223},[220,43905,343],{"class":264},[220,43907,347],{"class":346},[220,43909,359],{"class":264},[220,43911,43912,43914,43916],{"class":222,"line":179},[220,43913,364],{"class":264},[220,43915,43877],{"class":346},[220,43917,359],{"class":264},[220,43919,43920,43922,43924],{"class":222,"line":389},[220,43921,2550],{"class":264},[220,43923,2553],{"class":346},[220,43925,386],{"class":264},[220,43927,43928,43930,43932],{"class":222,"line":399},[220,43929,2567],{"class":264},[220,43931,43877],{"class":346},[220,43933,359],{"class":264},[220,43935,43936,43938,43940],{"class":222,"line":644},[220,43937,402],{"class":264},[220,43939,347],{"class":346},[220,43941,359],{"class":264},[212,43943,43944],{"className":409,"code":43899,"language":411,"meta":178,"style":178},[99,43945,43946,43954,43962,43970,43978],{"__ignoreMap":178},[220,43947,43948,43950,43952],{"class":222,"line":223},[220,43949,343],{"class":264},[220,43951,347],{"class":420},[220,43953,359],{"class":264},[220,43955,43956,43958,43960],{"class":222,"line":179},[220,43957,364],{"class":264},[220,43959,43877],{"class":420},[220,43961,359],{"class":264},[220,43963,43964,43966,43968],{"class":222,"line":389},[220,43965,2550],{"class":264},[220,43967,2553],{"class":420},[220,43969,386],{"class":264},[220,43971,43972,43974,43976],{"class":222,"line":399},[220,43973,2567],{"class":264},[220,43975,43877],{"class":420},[220,43977,359],{"class":264},[220,43979,43980,43982,43984],{"class":222,"line":644},[220,43981,402],{"class":264},[220,43983,347],{"class":420},[220,43985,359],{"class":264},[212,43987,43988],{"className":2844,"code":43899,"language":2846,"meta":178,"style":178},[99,43989,43990,43998,44006,44014,44022],{"__ignoreMap":178},[220,43991,43992,43994,43996],{"class":222,"line":223},[220,43993,343],{"class":264},[220,43995,347],{"class":420},[220,43997,359],{"class":264},[220,43999,44000,44002,44004],{"class":222,"line":179},[220,44001,364],{"class":264},[220,44003,43877],{"class":420},[220,44005,359],{"class":264},[220,44007,44008,44010,44012],{"class":222,"line":389},[220,44009,2550],{"class":264},[220,44011,2553],{"class":420},[220,44013,386],{"class":264},[220,44015,44016,44018,44020],{"class":222,"line":399},[220,44017,2567],{"class":264},[220,44019,43877],{"class":420},[220,44021,359],{"class":264},[220,44023,44024,44026,44028],{"class":222,"line":644},[220,44025,402],{"class":264},[220,44027,347],{"class":420},[220,44029,359],{"class":264},[212,44031,44032],{"className":468,"code":43899,"language":469,"meta":178,"style":178},[99,44033,44034,44042,44050,44058,44066],{"__ignoreMap":178},[220,44035,44036,44038,44040],{"class":222,"line":223},[220,44037,343],{"class":264},[220,44039,347],{"class":420},[220,44041,359],{"class":264},[220,44043,44044,44046,44048],{"class":222,"line":179},[220,44045,364],{"class":264},[220,44047,43877],{"class":420},[220,44049,359],{"class":264},[220,44051,44052,44054,44056],{"class":222,"line":389},[220,44053,2550],{"class":264},[220,44055,2553],{"class":420},[220,44057,386],{"class":264},[220,44059,44060,44062,44064],{"class":222,"line":399},[220,44061,2567],{"class":264},[220,44063,43877],{"class":420},[220,44065,359],{"class":264},[220,44067,44068,44070,44072],{"class":222,"line":644},[220,44069,402],{"class":264},[220,44071,347],{"class":420},[220,44073,359],{"class":264},[212,44075,44077],{"className":251,"code":44076,"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,44078,44079,44089,44093,44107,44111,44120,44128,44132,44136],{"__ignoreMap":178},[220,44080,44081,44083,44085,44087],{"class":222,"line":223},[220,44082,261],{"class":260},[220,44084,11512],{"class":264},[220,44086,268],{"class":260},[220,44088,4007],{"class":230},[220,44090,44091],{"class":222,"line":179},[220,44092,647],{"emptyLinePlaceholder":194},[220,44094,44095,44097,44099,44101,44103,44105],{"class":222,"line":389},[220,44096,1735],{"class":260},[220,44098,1738],{"class":420},[220,44100,1741],{"class":260},[220,44102,1744],{"class":260},[220,44104,1747],{"class":226},[220,44106,1750],{"class":264},[220,44108,44109],{"class":222,"line":399},[220,44110,1765],{"class":264},[220,44112,44113,44115,44118],{"class":222,"line":644},[220,44114,1770],{"class":264},[220,44116,44117],{"class":230},"'DisplacementMap'",[220,44119,7009],{"class":264},[220,44121,44122,44124,44126],{"class":222,"line":650},[220,44123,7014],{"class":264},[220,44125,3206],{"class":230},[220,44127,2465],{"class":264},[220,44129,44130],{"class":222,"line":656},[220,44131,7031],{"class":264},[220,44133,44134],{"class":222,"line":673},[220,44135,1787],{"class":264},[220,44137,44138],{"class":222,"line":682},[220,44139,1792],{"class":264},[1504,44141,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":44143},[44144,44145],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdisplacementmap",{"title":43877,"description":43885},"docs\u002Fcomponents\u002FDisplacementMap","HycyWL6qHg4DTwqZElHNgjHrKGK_TxnCG4rLePq5EZc",{"id":44152,"title":44153,"body":44154,"category":32806,"componentType":25883,"description":44161,"extension":191,"meta":44422,"navigation":194,"path":44423,"requiresChild":194,"seo":44424,"stem":44425,"__hash__":44426},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":44155,"toc":44418},[44156,44159,44162,44164,44166,44169,44171,44416],[11,44157,44153],{"id":44158},"dither",[15,44160,44161],{},"Dithering effect with multiple pattern options",[31911,44163],{"component":44153},[23,44165,31915],{"id":26533},[31917,44167],{":props":44168},"[{\"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,44170,31923],{"id":31922},[246,44172,44173,44218,44262,44306,44350],{":tabs":1557},[212,44174,44176],{"className":334,"code":44175,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,44177,44178,44186,44194,44202,44210],{"__ignoreMap":178},[220,44179,44180,44182,44184],{"class":222,"line":223},[220,44181,343],{"class":264},[220,44183,347],{"class":346},[220,44185,359],{"class":264},[220,44187,44188,44190,44192],{"class":222,"line":179},[220,44189,364],{"class":264},[220,44191,44153],{"class":346},[220,44193,359],{"class":264},[220,44195,44196,44198,44200],{"class":222,"line":389},[220,44197,2550],{"class":264},[220,44199,2553],{"class":346},[220,44201,386],{"class":264},[220,44203,44204,44206,44208],{"class":222,"line":399},[220,44205,2567],{"class":264},[220,44207,44153],{"class":346},[220,44209,359],{"class":264},[220,44211,44212,44214,44216],{"class":222,"line":644},[220,44213,402],{"class":264},[220,44215,347],{"class":346},[220,44217,359],{"class":264},[212,44219,44220],{"className":409,"code":44175,"language":411,"meta":178,"style":178},[99,44221,44222,44230,44238,44246,44254],{"__ignoreMap":178},[220,44223,44224,44226,44228],{"class":222,"line":223},[220,44225,343],{"class":264},[220,44227,347],{"class":420},[220,44229,359],{"class":264},[220,44231,44232,44234,44236],{"class":222,"line":179},[220,44233,364],{"class":264},[220,44235,44153],{"class":420},[220,44237,359],{"class":264},[220,44239,44240,44242,44244],{"class":222,"line":389},[220,44241,2550],{"class":264},[220,44243,2553],{"class":420},[220,44245,386],{"class":264},[220,44247,44248,44250,44252],{"class":222,"line":399},[220,44249,2567],{"class":264},[220,44251,44153],{"class":420},[220,44253,359],{"class":264},[220,44255,44256,44258,44260],{"class":222,"line":644},[220,44257,402],{"class":264},[220,44259,347],{"class":420},[220,44261,359],{"class":264},[212,44263,44264],{"className":2844,"code":44175,"language":2846,"meta":178,"style":178},[99,44265,44266,44274,44282,44290,44298],{"__ignoreMap":178},[220,44267,44268,44270,44272],{"class":222,"line":223},[220,44269,343],{"class":264},[220,44271,347],{"class":420},[220,44273,359],{"class":264},[220,44275,44276,44278,44280],{"class":222,"line":179},[220,44277,364],{"class":264},[220,44279,44153],{"class":420},[220,44281,359],{"class":264},[220,44283,44284,44286,44288],{"class":222,"line":389},[220,44285,2550],{"class":264},[220,44287,2553],{"class":420},[220,44289,386],{"class":264},[220,44291,44292,44294,44296],{"class":222,"line":399},[220,44293,2567],{"class":264},[220,44295,44153],{"class":420},[220,44297,359],{"class":264},[220,44299,44300,44302,44304],{"class":222,"line":644},[220,44301,402],{"class":264},[220,44303,347],{"class":420},[220,44305,359],{"class":264},[212,44307,44308],{"className":468,"code":44175,"language":469,"meta":178,"style":178},[99,44309,44310,44318,44326,44334,44342],{"__ignoreMap":178},[220,44311,44312,44314,44316],{"class":222,"line":223},[220,44313,343],{"class":264},[220,44315,347],{"class":420},[220,44317,359],{"class":264},[220,44319,44320,44322,44324],{"class":222,"line":179},[220,44321,364],{"class":264},[220,44323,44153],{"class":420},[220,44325,359],{"class":264},[220,44327,44328,44330,44332],{"class":222,"line":389},[220,44329,2550],{"class":264},[220,44331,2553],{"class":420},[220,44333,386],{"class":264},[220,44335,44336,44338,44340],{"class":222,"line":399},[220,44337,2567],{"class":264},[220,44339,44153],{"class":420},[220,44341,359],{"class":264},[220,44343,44344,44346,44348],{"class":222,"line":644},[220,44345,402],{"class":264},[220,44347,347],{"class":420},[220,44349,359],{"class":264},[212,44351,44353],{"className":251,"code":44352,"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,44354,44355,44365,44369,44383,44387,44396,44404,44408,44412],{"__ignoreMap":178},[220,44356,44357,44359,44361,44363],{"class":222,"line":223},[220,44358,261],{"class":260},[220,44360,11512],{"class":264},[220,44362,268],{"class":260},[220,44364,4007],{"class":230},[220,44366,44367],{"class":222,"line":179},[220,44368,647],{"emptyLinePlaceholder":194},[220,44370,44371,44373,44375,44377,44379,44381],{"class":222,"line":389},[220,44372,1735],{"class":260},[220,44374,1738],{"class":420},[220,44376,1741],{"class":260},[220,44378,1744],{"class":260},[220,44380,1747],{"class":226},[220,44382,1750],{"class":264},[220,44384,44385],{"class":222,"line":399},[220,44386,1765],{"class":264},[220,44388,44389,44391,44394],{"class":222,"line":644},[220,44390,1770],{"class":264},[220,44392,44393],{"class":230},"'Dither'",[220,44395,7009],{"class":264},[220,44397,44398,44400,44402],{"class":222,"line":650},[220,44399,7014],{"class":264},[220,44401,3206],{"class":230},[220,44403,2465],{"class":264},[220,44405,44406],{"class":222,"line":656},[220,44407,7031],{"class":264},[220,44409,44410],{"class":222,"line":673},[220,44411,1787],{"class":264},[220,44413,44414],{"class":222,"line":682},[220,44415,1792],{"class":264},[1504,44417,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":44419},[44420,44421],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":44153,"description":44161},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":44428,"title":44429,"body":44430,"category":33063,"componentType":25877,"description":44437,"extension":191,"meta":44665,"navigation":194,"path":44666,"requiresChild":32530,"seo":44667,"stem":44668,"__hash__":44669},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":44431,"toc":44661},[44432,44435,44438,44440,44442,44445,44447,44659],[11,44433,44429],{"id":44434},"dotgrid",[15,44436,44437],{},"Grid of dots with optional twinkling animation",[31911,44439],{"component":44429},[23,44441,31915],{"id":26533},[31917,44443],{":props":44444},"[{\"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,44446,31923],{"id":31922},[246,44448,44449,44488,44526,44564,44602],{":tabs":1557},[212,44450,44452],{"className":334,"code":44451,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,44453,44454,44462,44468,44476,44480],{"__ignoreMap":178},[220,44455,44456,44458,44460],{"class":222,"line":223},[220,44457,343],{"class":264},[220,44459,347],{"class":346},[220,44461,359],{"class":264},[220,44463,44464,44466],{"class":222,"line":179},[220,44465,364],{"class":264},[220,44467,19503],{"class":346},[220,44469,44470,44472,44474],{"class":222,"line":389},[220,44471,9635],{"class":226},[220,44473,353],{"class":264},[220,44475,9591],{"class":230},[220,44477,44478],{"class":222,"line":399},[220,44479,1234],{"class":264},[220,44481,44482,44484,44486],{"class":222,"line":644},[220,44483,402],{"class":264},[220,44485,347],{"class":346},[220,44487,359],{"class":264},[212,44489,44490],{"className":409,"code":44451,"language":411,"meta":178,"style":178},[99,44491,44492,44500,44506,44514,44518],{"__ignoreMap":178},[220,44493,44494,44496,44498],{"class":222,"line":223},[220,44495,343],{"class":264},[220,44497,347],{"class":420},[220,44499,359],{"class":264},[220,44501,44502,44504],{"class":222,"line":179},[220,44503,364],{"class":264},[220,44505,19503],{"class":420},[220,44507,44508,44510,44512],{"class":222,"line":389},[220,44509,9635],{"class":226},[220,44511,353],{"class":260},[220,44513,9591],{"class":230},[220,44515,44516],{"class":222,"line":399},[220,44517,1234],{"class":264},[220,44519,44520,44522,44524],{"class":222,"line":644},[220,44521,402],{"class":264},[220,44523,347],{"class":420},[220,44525,359],{"class":264},[212,44527,44528],{"className":2844,"code":44451,"language":2846,"meta":178,"style":178},[99,44529,44530,44538,44544,44552,44556],{"__ignoreMap":178},[220,44531,44532,44534,44536],{"class":222,"line":223},[220,44533,343],{"class":264},[220,44535,347],{"class":420},[220,44537,359],{"class":264},[220,44539,44540,44542],{"class":222,"line":179},[220,44541,364],{"class":264},[220,44543,19503],{"class":420},[220,44545,44546,44548,44550],{"class":222,"line":389},[220,44547,9635],{"class":226},[220,44549,353],{"class":264},[220,44551,9591],{"class":230},[220,44553,44554],{"class":222,"line":399},[220,44555,1234],{"class":264},[220,44557,44558,44560,44562],{"class":222,"line":644},[220,44559,402],{"class":264},[220,44561,347],{"class":420},[220,44563,359],{"class":264},[212,44565,44566],{"className":468,"code":44451,"language":469,"meta":178,"style":178},[99,44567,44568,44576,44582,44590,44594],{"__ignoreMap":178},[220,44569,44570,44572,44574],{"class":222,"line":223},[220,44571,343],{"class":264},[220,44573,347],{"class":420},[220,44575,359],{"class":264},[220,44577,44578,44580],{"class":222,"line":179},[220,44579,364],{"class":264},[220,44581,19503],{"class":420},[220,44583,44584,44586,44588],{"class":222,"line":389},[220,44585,9635],{"class":226},[220,44587,353],{"class":260},[220,44589,9591],{"class":230},[220,44591,44592],{"class":222,"line":399},[220,44593,1234],{"class":264},[220,44595,44596,44598,44600],{"class":222,"line":644},[220,44597,402],{"class":264},[220,44599,347],{"class":420},[220,44601,359],{"class":264},[212,44603,44605],{"className":251,"code":44604,"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,44606,44607,44617,44621,44635,44639,44651,44655],{"__ignoreMap":178},[220,44608,44609,44611,44613,44615],{"class":222,"line":223},[220,44610,261],{"class":260},[220,44612,11512],{"class":264},[220,44614,268],{"class":260},[220,44616,4007],{"class":230},[220,44618,44619],{"class":222,"line":179},[220,44620,647],{"emptyLinePlaceholder":194},[220,44622,44623,44625,44627,44629,44631,44633],{"class":222,"line":389},[220,44624,1735],{"class":260},[220,44626,1738],{"class":420},[220,44628,1741],{"class":260},[220,44630,1744],{"class":260},[220,44632,1747],{"class":226},[220,44634,1750],{"class":264},[220,44636,44637],{"class":222,"line":399},[220,44638,1765],{"class":264},[220,44640,44641,44643,44645,44647,44649],{"class":222,"line":644},[220,44642,1770],{"class":264},[220,44644,20056],{"class":230},[220,44646,1776],{"class":264},[220,44648,10169],{"class":230},[220,44650,1782],{"class":264},[220,44652,44653],{"class":222,"line":650},[220,44654,1787],{"class":264},[220,44656,44657],{"class":222,"line":656},[220,44658,1792],{"class":264},[1504,44660,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44662},[44663,44664],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":44429,"description":44437},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":44671,"title":44672,"body":44673,"category":32806,"componentType":25883,"description":44680,"extension":191,"meta":45034,"navigation":194,"path":45035,"requiresChild":194,"seo":45036,"stem":45037,"__hash__":45038},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":44674,"toc":45030},[44675,44678,44681,44683,44685,44688,44690,45028],[11,44676,44672],{"id":44677},"dropshadow",[15,44679,44680],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[31911,44682],{"component":44672},[23,44684,31915],{"id":26533},[31917,44686],{":props":44687},"[{\"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,44689,31923],{"id":31922},[246,44691,44692,44756,44823,44887,44953],{":tabs":1557},[212,44693,44695],{"className":334,"code":44694,"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,44696,44697,44705,44712,44720,44728,44732,44740,44748],{"__ignoreMap":178},[220,44698,44699,44701,44703],{"class":222,"line":223},[220,44700,343],{"class":264},[220,44702,347],{"class":346},[220,44704,359],{"class":264},[220,44706,44707,44709],{"class":222,"line":179},[220,44708,364],{"class":264},[220,44710,44711],{"class":346},"DropShadow\n",[220,44713,44714,44716,44718],{"class":222,"line":389},[220,44715,9635],{"class":226},[220,44717,353],{"class":264},[220,44719,19474],{"class":230},[220,44721,44722,44724,44726],{"class":222,"line":399},[220,44723,20371],{"class":226},[220,44725,353],{"class":264},[220,44727,42158],{"class":230},[220,44729,44730],{"class":222,"line":644},[220,44731,31959],{"class":264},[220,44733,44734,44736,44738],{"class":222,"line":650},[220,44735,2550],{"class":264},[220,44737,2553],{"class":346},[220,44739,386],{"class":264},[220,44741,44742,44744,44746],{"class":222,"line":656},[220,44743,2567],{"class":264},[220,44745,44672],{"class":346},[220,44747,359],{"class":264},[220,44749,44750,44752,44754],{"class":222,"line":673},[220,44751,402],{"class":264},[220,44753,347],{"class":346},[220,44755,359],{"class":264},[212,44757,44759],{"className":409,"code":44758,"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,44760,44761,44769,44775,44783,44795,44799,44807,44815],{"__ignoreMap":178},[220,44762,44763,44765,44767],{"class":222,"line":223},[220,44764,343],{"class":264},[220,44766,347],{"class":420},[220,44768,359],{"class":264},[220,44770,44771,44773],{"class":222,"line":179},[220,44772,364],{"class":264},[220,44774,44711],{"class":420},[220,44776,44777,44779,44781],{"class":222,"line":389},[220,44778,9635],{"class":226},[220,44780,353],{"class":260},[220,44782,19474],{"class":230},[220,44784,44785,44787,44789,44791,44793],{"class":222,"line":399},[220,44786,20482],{"class":226},[220,44788,353],{"class":260},[220,44790,743],{"class":264},[220,44792,7754],{"class":420},[220,44794,749],{"class":264},[220,44796,44797],{"class":222,"line":644},[220,44798,31959],{"class":264},[220,44800,44801,44803,44805],{"class":222,"line":650},[220,44802,2550],{"class":264},[220,44804,2553],{"class":420},[220,44806,386],{"class":264},[220,44808,44809,44811,44813],{"class":222,"line":656},[220,44810,2567],{"class":264},[220,44812,44672],{"class":420},[220,44814,359],{"class":264},[220,44816,44817,44819,44821],{"class":222,"line":673},[220,44818,402],{"class":264},[220,44820,347],{"class":420},[220,44822,359],{"class":264},[212,44824,44825],{"className":2844,"code":44758,"language":2846,"meta":178,"style":178},[99,44826,44827,44835,44841,44849,44859,44863,44871,44879],{"__ignoreMap":178},[220,44828,44829,44831,44833],{"class":222,"line":223},[220,44830,343],{"class":264},[220,44832,347],{"class":420},[220,44834,359],{"class":264},[220,44836,44837,44839],{"class":222,"line":179},[220,44838,364],{"class":264},[220,44840,44711],{"class":420},[220,44842,44843,44845,44847],{"class":222,"line":389},[220,44844,9635],{"class":226},[220,44846,353],{"class":264},[220,44848,19474],{"class":230},[220,44850,44851,44853,44855,44857],{"class":222,"line":399},[220,44852,20482],{"class":226},[220,44854,29871],{"class":264},[220,44856,7754],{"class":420},[220,44858,749],{"class":264},[220,44860,44861],{"class":222,"line":644},[220,44862,31959],{"class":264},[220,44864,44865,44867,44869],{"class":222,"line":650},[220,44866,2550],{"class":264},[220,44868,2553],{"class":420},[220,44870,386],{"class":264},[220,44872,44873,44875,44877],{"class":222,"line":656},[220,44874,2567],{"class":264},[220,44876,44672],{"class":420},[220,44878,359],{"class":264},[220,44880,44881,44883,44885],{"class":222,"line":673},[220,44882,402],{"class":264},[220,44884,347],{"class":420},[220,44886,359],{"class":264},[212,44888,44889],{"className":468,"code":44758,"language":469,"meta":178,"style":178},[99,44890,44891,44899,44905,44913,44925,44929,44937,44945],{"__ignoreMap":178},[220,44892,44893,44895,44897],{"class":222,"line":223},[220,44894,343],{"class":264},[220,44896,347],{"class":420},[220,44898,359],{"class":264},[220,44900,44901,44903],{"class":222,"line":179},[220,44902,364],{"class":264},[220,44904,44711],{"class":420},[220,44906,44907,44909,44911],{"class":222,"line":389},[220,44908,9635],{"class":226},[220,44910,353],{"class":260},[220,44912,19474],{"class":230},[220,44914,44915,44917,44919,44921,44923],{"class":222,"line":399},[220,44916,20482],{"class":226},[220,44918,353],{"class":260},[220,44920,743],{"class":264},[220,44922,7754],{"class":420},[220,44924,749],{"class":264},[220,44926,44927],{"class":222,"line":644},[220,44928,31959],{"class":264},[220,44930,44931,44933,44935],{"class":222,"line":650},[220,44932,2550],{"class":264},[220,44934,2553],{"class":420},[220,44936,386],{"class":264},[220,44938,44939,44941,44943],{"class":222,"line":656},[220,44940,2567],{"class":264},[220,44942,44672],{"class":420},[220,44944,359],{"class":264},[220,44946,44947,44949,44951],{"class":222,"line":673},[220,44948,402],{"class":264},[220,44950,347],{"class":420},[220,44952,359],{"class":264},[212,44954,44956],{"className":251,"code":44955,"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,44957,44958,44968,44972,44986,44990,45008,45016,45020,45024],{"__ignoreMap":178},[220,44959,44960,44962,44964,44966],{"class":222,"line":223},[220,44961,261],{"class":260},[220,44963,11512],{"class":264},[220,44965,268],{"class":260},[220,44967,4007],{"class":230},[220,44969,44970],{"class":222,"line":179},[220,44971,647],{"emptyLinePlaceholder":194},[220,44973,44974,44976,44978,44980,44982,44984],{"class":222,"line":389},[220,44975,1735],{"class":260},[220,44977,1738],{"class":420},[220,44979,1741],{"class":260},[220,44981,1744],{"class":260},[220,44983,1747],{"class":226},[220,44985,1750],{"class":264},[220,44987,44988],{"class":222,"line":399},[220,44989,1765],{"class":264},[220,44991,44992,44994,44997,44999,45001,45004,45006],{"class":222,"line":644},[220,44993,1770],{"class":264},[220,44995,44996],{"class":230},"'DropShadow'",[220,44998,1776],{"class":264},[220,45000,20034],{"class":230},[220,45002,45003],{"class":264},", intensity: ",[220,45005,7754],{"class":420},[220,45007,7546],{"class":264},[220,45009,45010,45012,45014],{"class":222,"line":650},[220,45011,7014],{"class":264},[220,45013,3206],{"class":230},[220,45015,2465],{"class":264},[220,45017,45018],{"class":222,"line":656},[220,45019,7031],{"class":264},[220,45021,45022],{"class":222,"line":673},[220,45023,1787],{"class":264},[220,45025,45026],{"class":222,"line":682},[220,45027,1792],{"class":264},[1504,45029,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45031},[45032,45033],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":44672,"description":44680},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":45040,"title":45041,"body":45042,"category":36368,"componentType":25883,"description":45049,"extension":191,"meta":45310,"navigation":194,"path":45311,"requiresChild":194,"seo":45312,"stem":45313,"__hash__":45314},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":45043,"toc":45306},[45044,45047,45050,45052,45054,45057,45059,45304],[11,45045,45041],{"id":45046},"duotone",[15,45048,45049],{},"Map colors to two tones based on luminance",[31911,45051],{"component":45041},[23,45053,31915],{"id":26533},[31917,45055],{":props":45056},"[{\"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,45058,31923],{"id":31922},[246,45060,45061,45106,45150,45194,45238],{":tabs":1557},[212,45062,45064],{"className":334,"code":45063,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,45065,45066,45074,45082,45090,45098],{"__ignoreMap":178},[220,45067,45068,45070,45072],{"class":222,"line":223},[220,45069,343],{"class":264},[220,45071,347],{"class":346},[220,45073,359],{"class":264},[220,45075,45076,45078,45080],{"class":222,"line":179},[220,45077,364],{"class":264},[220,45079,45041],{"class":346},[220,45081,359],{"class":264},[220,45083,45084,45086,45088],{"class":222,"line":389},[220,45085,2550],{"class":264},[220,45087,2553],{"class":346},[220,45089,386],{"class":264},[220,45091,45092,45094,45096],{"class":222,"line":399},[220,45093,2567],{"class":264},[220,45095,45041],{"class":346},[220,45097,359],{"class":264},[220,45099,45100,45102,45104],{"class":222,"line":644},[220,45101,402],{"class":264},[220,45103,347],{"class":346},[220,45105,359],{"class":264},[212,45107,45108],{"className":409,"code":45063,"language":411,"meta":178,"style":178},[99,45109,45110,45118,45126,45134,45142],{"__ignoreMap":178},[220,45111,45112,45114,45116],{"class":222,"line":223},[220,45113,343],{"class":264},[220,45115,347],{"class":420},[220,45117,359],{"class":264},[220,45119,45120,45122,45124],{"class":222,"line":179},[220,45121,364],{"class":264},[220,45123,45041],{"class":420},[220,45125,359],{"class":264},[220,45127,45128,45130,45132],{"class":222,"line":389},[220,45129,2550],{"class":264},[220,45131,2553],{"class":420},[220,45133,386],{"class":264},[220,45135,45136,45138,45140],{"class":222,"line":399},[220,45137,2567],{"class":264},[220,45139,45041],{"class":420},[220,45141,359],{"class":264},[220,45143,45144,45146,45148],{"class":222,"line":644},[220,45145,402],{"class":264},[220,45147,347],{"class":420},[220,45149,359],{"class":264},[212,45151,45152],{"className":2844,"code":45063,"language":2846,"meta":178,"style":178},[99,45153,45154,45162,45170,45178,45186],{"__ignoreMap":178},[220,45155,45156,45158,45160],{"class":222,"line":223},[220,45157,343],{"class":264},[220,45159,347],{"class":420},[220,45161,359],{"class":264},[220,45163,45164,45166,45168],{"class":222,"line":179},[220,45165,364],{"class":264},[220,45167,45041],{"class":420},[220,45169,359],{"class":264},[220,45171,45172,45174,45176],{"class":222,"line":389},[220,45173,2550],{"class":264},[220,45175,2553],{"class":420},[220,45177,386],{"class":264},[220,45179,45180,45182,45184],{"class":222,"line":399},[220,45181,2567],{"class":264},[220,45183,45041],{"class":420},[220,45185,359],{"class":264},[220,45187,45188,45190,45192],{"class":222,"line":644},[220,45189,402],{"class":264},[220,45191,347],{"class":420},[220,45193,359],{"class":264},[212,45195,45196],{"className":468,"code":45063,"language":469,"meta":178,"style":178},[99,45197,45198,45206,45214,45222,45230],{"__ignoreMap":178},[220,45199,45200,45202,45204],{"class":222,"line":223},[220,45201,343],{"class":264},[220,45203,347],{"class":420},[220,45205,359],{"class":264},[220,45207,45208,45210,45212],{"class":222,"line":179},[220,45209,364],{"class":264},[220,45211,45041],{"class":420},[220,45213,359],{"class":264},[220,45215,45216,45218,45220],{"class":222,"line":389},[220,45217,2550],{"class":264},[220,45219,2553],{"class":420},[220,45221,386],{"class":264},[220,45223,45224,45226,45228],{"class":222,"line":399},[220,45225,2567],{"class":264},[220,45227,45041],{"class":420},[220,45229,359],{"class":264},[220,45231,45232,45234,45236],{"class":222,"line":644},[220,45233,402],{"class":264},[220,45235,347],{"class":420},[220,45237,359],{"class":264},[212,45239,45241],{"className":251,"code":45240,"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,45242,45243,45253,45257,45271,45275,45284,45292,45296,45300],{"__ignoreMap":178},[220,45244,45245,45247,45249,45251],{"class":222,"line":223},[220,45246,261],{"class":260},[220,45248,11512],{"class":264},[220,45250,268],{"class":260},[220,45252,4007],{"class":230},[220,45254,45255],{"class":222,"line":179},[220,45256,647],{"emptyLinePlaceholder":194},[220,45258,45259,45261,45263,45265,45267,45269],{"class":222,"line":389},[220,45260,1735],{"class":260},[220,45262,1738],{"class":420},[220,45264,1741],{"class":260},[220,45266,1744],{"class":260},[220,45268,1747],{"class":226},[220,45270,1750],{"class":264},[220,45272,45273],{"class":222,"line":399},[220,45274,1765],{"class":264},[220,45276,45277,45279,45282],{"class":222,"line":644},[220,45278,1770],{"class":264},[220,45280,45281],{"class":230},"'Duotone'",[220,45283,7009],{"class":264},[220,45285,45286,45288,45290],{"class":222,"line":650},[220,45287,7014],{"class":264},[220,45289,3206],{"class":230},[220,45291,2465],{"class":264},[220,45293,45294],{"class":222,"line":656},[220,45295,7031],{"class":264},[220,45297,45298],{"class":222,"line":673},[220,45299,1787],{"class":264},[220,45301,45302],{"class":222,"line":682},[220,45303,1792],{"class":264},[1504,45305,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":45307},[45308,45309],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":45041,"description":45049},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":45316,"title":45317,"body":45318,"category":15908,"componentType":25877,"description":45325,"extension":191,"meta":45555,"navigation":194,"path":45556,"requiresChild":32530,"seo":45557,"stem":45558,"__hash__":45559},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":45319,"toc":45551},[45320,45323,45326,45328,45330,45333,45335,45549],[11,45321,45317],{"id":45322},"ellipse",[15,45324,45325],{},"Ellipse with independently adjustable horizontal and vertical radii",[31911,45327],{"component":45317},[23,45329,31915],{"id":26533},[31917,45331],{":props":45332},"[{\"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,45334,31923],{"id":31922},[246,45336,45337,45377,45415,45453,45491],{":tabs":1557},[212,45338,45340],{"className":334,"code":45339,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,45341,45342,45350,45357,45365,45369],{"__ignoreMap":178},[220,45343,45344,45346,45348],{"class":222,"line":223},[220,45345,343],{"class":264},[220,45347,347],{"class":346},[220,45349,359],{"class":264},[220,45351,45352,45354],{"class":222,"line":179},[220,45353,364],{"class":264},[220,45355,45356],{"class":346},"Ellipse\n",[220,45358,45359,45361,45363],{"class":222,"line":389},[220,45360,9635],{"class":226},[220,45362,353],{"class":264},[220,45364,9591],{"class":230},[220,45366,45367],{"class":222,"line":399},[220,45368,1234],{"class":264},[220,45370,45371,45373,45375],{"class":222,"line":644},[220,45372,402],{"class":264},[220,45374,347],{"class":346},[220,45376,359],{"class":264},[212,45378,45379],{"className":409,"code":45339,"language":411,"meta":178,"style":178},[99,45380,45381,45389,45395,45403,45407],{"__ignoreMap":178},[220,45382,45383,45385,45387],{"class":222,"line":223},[220,45384,343],{"class":264},[220,45386,347],{"class":420},[220,45388,359],{"class":264},[220,45390,45391,45393],{"class":222,"line":179},[220,45392,364],{"class":264},[220,45394,45356],{"class":420},[220,45396,45397,45399,45401],{"class":222,"line":389},[220,45398,9635],{"class":226},[220,45400,353],{"class":260},[220,45402,9591],{"class":230},[220,45404,45405],{"class":222,"line":399},[220,45406,1234],{"class":264},[220,45408,45409,45411,45413],{"class":222,"line":644},[220,45410,402],{"class":264},[220,45412,347],{"class":420},[220,45414,359],{"class":264},[212,45416,45417],{"className":2844,"code":45339,"language":2846,"meta":178,"style":178},[99,45418,45419,45427,45433,45441,45445],{"__ignoreMap":178},[220,45420,45421,45423,45425],{"class":222,"line":223},[220,45422,343],{"class":264},[220,45424,347],{"class":420},[220,45426,359],{"class":264},[220,45428,45429,45431],{"class":222,"line":179},[220,45430,364],{"class":264},[220,45432,45356],{"class":420},[220,45434,45435,45437,45439],{"class":222,"line":389},[220,45436,9635],{"class":226},[220,45438,353],{"class":264},[220,45440,9591],{"class":230},[220,45442,45443],{"class":222,"line":399},[220,45444,1234],{"class":264},[220,45446,45447,45449,45451],{"class":222,"line":644},[220,45448,402],{"class":264},[220,45450,347],{"class":420},[220,45452,359],{"class":264},[212,45454,45455],{"className":468,"code":45339,"language":469,"meta":178,"style":178},[99,45456,45457,45465,45471,45479,45483],{"__ignoreMap":178},[220,45458,45459,45461,45463],{"class":222,"line":223},[220,45460,343],{"class":264},[220,45462,347],{"class":420},[220,45464,359],{"class":264},[220,45466,45467,45469],{"class":222,"line":179},[220,45468,364],{"class":264},[220,45470,45356],{"class":420},[220,45472,45473,45475,45477],{"class":222,"line":389},[220,45474,9635],{"class":226},[220,45476,353],{"class":260},[220,45478,9591],{"class":230},[220,45480,45481],{"class":222,"line":399},[220,45482,1234],{"class":264},[220,45484,45485,45487,45489],{"class":222,"line":644},[220,45486,402],{"class":264},[220,45488,347],{"class":420},[220,45490,359],{"class":264},[212,45492,45494],{"className":251,"code":45493,"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,45495,45496,45506,45510,45524,45528,45541,45545],{"__ignoreMap":178},[220,45497,45498,45500,45502,45504],{"class":222,"line":223},[220,45499,261],{"class":260},[220,45501,11512],{"class":264},[220,45503,268],{"class":260},[220,45505,4007],{"class":230},[220,45507,45508],{"class":222,"line":179},[220,45509,647],{"emptyLinePlaceholder":194},[220,45511,45512,45514,45516,45518,45520,45522],{"class":222,"line":389},[220,45513,1735],{"class":260},[220,45515,1738],{"class":420},[220,45517,1741],{"class":260},[220,45519,1744],{"class":260},[220,45521,1747],{"class":226},[220,45523,1750],{"class":264},[220,45525,45526],{"class":222,"line":399},[220,45527,1765],{"class":264},[220,45529,45530,45532,45535,45537,45539],{"class":222,"line":644},[220,45531,1770],{"class":264},[220,45533,45534],{"class":230},"'Ellipse'",[220,45536,1776],{"class":264},[220,45538,10169],{"class":230},[220,45540,1782],{"class":264},[220,45542,45543],{"class":222,"line":650},[220,45544,1787],{"class":264},[220,45546,45547],{"class":222,"line":656},[220,45548,1792],{"class":264},[1504,45550,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45552},[45553,45554],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":45317,"description":45325},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":45561,"title":20984,"body":45562,"category":36569,"componentType":25883,"description":45569,"extension":191,"meta":45829,"navigation":194,"path":45830,"requiresChild":194,"seo":45831,"stem":45832,"__hash__":45833},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":45563,"toc":45825},[45564,45567,45570,45572,45574,45577,45579,45823],[11,45565,20984],{"id":45566},"emboss",[15,45568,45569],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[31911,45571],{"component":20984},[23,45573,31915],{"id":26533},[31917,45575],{":props":45576},"[{\"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,45578,31923],{"id":31922},[246,45580,45581,45626,45670,45714,45758],{":tabs":1557},[212,45582,45584],{"className":334,"code":45583,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,45585,45586,45594,45602,45610,45618],{"__ignoreMap":178},[220,45587,45588,45590,45592],{"class":222,"line":223},[220,45589,343],{"class":264},[220,45591,347],{"class":346},[220,45593,359],{"class":264},[220,45595,45596,45598,45600],{"class":222,"line":179},[220,45597,364],{"class":264},[220,45599,20984],{"class":346},[220,45601,359],{"class":264},[220,45603,45604,45606,45608],{"class":222,"line":389},[220,45605,2550],{"class":264},[220,45607,2553],{"class":346},[220,45609,386],{"class":264},[220,45611,45612,45614,45616],{"class":222,"line":399},[220,45613,2567],{"class":264},[220,45615,20984],{"class":346},[220,45617,359],{"class":264},[220,45619,45620,45622,45624],{"class":222,"line":644},[220,45621,402],{"class":264},[220,45623,347],{"class":346},[220,45625,359],{"class":264},[212,45627,45628],{"className":409,"code":45583,"language":411,"meta":178,"style":178},[99,45629,45630,45638,45646,45654,45662],{"__ignoreMap":178},[220,45631,45632,45634,45636],{"class":222,"line":223},[220,45633,343],{"class":264},[220,45635,347],{"class":420},[220,45637,359],{"class":264},[220,45639,45640,45642,45644],{"class":222,"line":179},[220,45641,364],{"class":264},[220,45643,20984],{"class":420},[220,45645,359],{"class":264},[220,45647,45648,45650,45652],{"class":222,"line":389},[220,45649,2550],{"class":264},[220,45651,2553],{"class":420},[220,45653,386],{"class":264},[220,45655,45656,45658,45660],{"class":222,"line":399},[220,45657,2567],{"class":264},[220,45659,20984],{"class":420},[220,45661,359],{"class":264},[220,45663,45664,45666,45668],{"class":222,"line":644},[220,45665,402],{"class":264},[220,45667,347],{"class":420},[220,45669,359],{"class":264},[212,45671,45672],{"className":2844,"code":45583,"language":2846,"meta":178,"style":178},[99,45673,45674,45682,45690,45698,45706],{"__ignoreMap":178},[220,45675,45676,45678,45680],{"class":222,"line":223},[220,45677,343],{"class":264},[220,45679,347],{"class":420},[220,45681,359],{"class":264},[220,45683,45684,45686,45688],{"class":222,"line":179},[220,45685,364],{"class":264},[220,45687,20984],{"class":420},[220,45689,359],{"class":264},[220,45691,45692,45694,45696],{"class":222,"line":389},[220,45693,2550],{"class":264},[220,45695,2553],{"class":420},[220,45697,386],{"class":264},[220,45699,45700,45702,45704],{"class":222,"line":399},[220,45701,2567],{"class":264},[220,45703,20984],{"class":420},[220,45705,359],{"class":264},[220,45707,45708,45710,45712],{"class":222,"line":644},[220,45709,402],{"class":264},[220,45711,347],{"class":420},[220,45713,359],{"class":264},[212,45715,45716],{"className":468,"code":45583,"language":469,"meta":178,"style":178},[99,45717,45718,45726,45734,45742,45750],{"__ignoreMap":178},[220,45719,45720,45722,45724],{"class":222,"line":223},[220,45721,343],{"class":264},[220,45723,347],{"class":420},[220,45725,359],{"class":264},[220,45727,45728,45730,45732],{"class":222,"line":179},[220,45729,364],{"class":264},[220,45731,20984],{"class":420},[220,45733,359],{"class":264},[220,45735,45736,45738,45740],{"class":222,"line":389},[220,45737,2550],{"class":264},[220,45739,2553],{"class":420},[220,45741,386],{"class":264},[220,45743,45744,45746,45748],{"class":222,"line":399},[220,45745,2567],{"class":264},[220,45747,20984],{"class":420},[220,45749,359],{"class":264},[220,45751,45752,45754,45756],{"class":222,"line":644},[220,45753,402],{"class":264},[220,45755,347],{"class":420},[220,45757,359],{"class":264},[212,45759,45761],{"className":251,"code":45760,"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,45762,45763,45773,45777,45791,45795,45803,45811,45815,45819],{"__ignoreMap":178},[220,45764,45765,45767,45769,45771],{"class":222,"line":223},[220,45766,261],{"class":260},[220,45768,11512],{"class":264},[220,45770,268],{"class":260},[220,45772,4007],{"class":230},[220,45774,45775],{"class":222,"line":179},[220,45776,647],{"emptyLinePlaceholder":194},[220,45778,45779,45781,45783,45785,45787,45789],{"class":222,"line":389},[220,45780,1735],{"class":260},[220,45782,1738],{"class":420},[220,45784,1741],{"class":260},[220,45786,1744],{"class":260},[220,45788,1747],{"class":226},[220,45790,1750],{"class":264},[220,45792,45793],{"class":222,"line":399},[220,45794,1765],{"class":264},[220,45796,45797,45799,45801],{"class":222,"line":644},[220,45798,1770],{"class":264},[220,45800,21647],{"class":230},[220,45802,7009],{"class":264},[220,45804,45805,45807,45809],{"class":222,"line":650},[220,45806,7014],{"class":264},[220,45808,3206],{"class":230},[220,45810,2465],{"class":264},[220,45812,45813],{"class":222,"line":656},[220,45814,7031],{"class":264},[220,45816,45817],{"class":222,"line":673},[220,45818,1787],{"class":264},[220,45820,45821],{"class":222,"line":682},[220,45822,1792],{"class":264},[1504,45824,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":45826},[45827,45828],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":20984,"description":45569},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":45835,"title":45836,"body":45837,"category":32806,"componentType":25883,"description":45844,"extension":191,"meta":46105,"navigation":194,"path":46106,"requiresChild":194,"seo":46107,"stem":46108,"__hash__":46109},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":45838,"toc":46101},[45839,45842,45845,45847,45849,45852,45854,46099],[11,45840,45836],{"id":45841},"engraving",[15,45843,45844],{},"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,45846],{"component":45836},[23,45848,31915],{"id":26533},[31917,45850],{":props":45851},"[{\"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,45853,31923],{"id":31922},[246,45855,45856,45901,45945,45989,46033],{":tabs":1557},[212,45857,45859],{"className":334,"code":45858,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,45860,45861,45869,45877,45885,45893],{"__ignoreMap":178},[220,45862,45863,45865,45867],{"class":222,"line":223},[220,45864,343],{"class":264},[220,45866,347],{"class":346},[220,45868,359],{"class":264},[220,45870,45871,45873,45875],{"class":222,"line":179},[220,45872,364],{"class":264},[220,45874,45836],{"class":346},[220,45876,359],{"class":264},[220,45878,45879,45881,45883],{"class":222,"line":389},[220,45880,2550],{"class":264},[220,45882,2553],{"class":346},[220,45884,386],{"class":264},[220,45886,45887,45889,45891],{"class":222,"line":399},[220,45888,2567],{"class":264},[220,45890,45836],{"class":346},[220,45892,359],{"class":264},[220,45894,45895,45897,45899],{"class":222,"line":644},[220,45896,402],{"class":264},[220,45898,347],{"class":346},[220,45900,359],{"class":264},[212,45902,45903],{"className":409,"code":45858,"language":411,"meta":178,"style":178},[99,45904,45905,45913,45921,45929,45937],{"__ignoreMap":178},[220,45906,45907,45909,45911],{"class":222,"line":223},[220,45908,343],{"class":264},[220,45910,347],{"class":420},[220,45912,359],{"class":264},[220,45914,45915,45917,45919],{"class":222,"line":179},[220,45916,364],{"class":264},[220,45918,45836],{"class":420},[220,45920,359],{"class":264},[220,45922,45923,45925,45927],{"class":222,"line":389},[220,45924,2550],{"class":264},[220,45926,2553],{"class":420},[220,45928,386],{"class":264},[220,45930,45931,45933,45935],{"class":222,"line":399},[220,45932,2567],{"class":264},[220,45934,45836],{"class":420},[220,45936,359],{"class":264},[220,45938,45939,45941,45943],{"class":222,"line":644},[220,45940,402],{"class":264},[220,45942,347],{"class":420},[220,45944,359],{"class":264},[212,45946,45947],{"className":2844,"code":45858,"language":2846,"meta":178,"style":178},[99,45948,45949,45957,45965,45973,45981],{"__ignoreMap":178},[220,45950,45951,45953,45955],{"class":222,"line":223},[220,45952,343],{"class":264},[220,45954,347],{"class":420},[220,45956,359],{"class":264},[220,45958,45959,45961,45963],{"class":222,"line":179},[220,45960,364],{"class":264},[220,45962,45836],{"class":420},[220,45964,359],{"class":264},[220,45966,45967,45969,45971],{"class":222,"line":389},[220,45968,2550],{"class":264},[220,45970,2553],{"class":420},[220,45972,386],{"class":264},[220,45974,45975,45977,45979],{"class":222,"line":399},[220,45976,2567],{"class":264},[220,45978,45836],{"class":420},[220,45980,359],{"class":264},[220,45982,45983,45985,45987],{"class":222,"line":644},[220,45984,402],{"class":264},[220,45986,347],{"class":420},[220,45988,359],{"class":264},[212,45990,45991],{"className":468,"code":45858,"language":469,"meta":178,"style":178},[99,45992,45993,46001,46009,46017,46025],{"__ignoreMap":178},[220,45994,45995,45997,45999],{"class":222,"line":223},[220,45996,343],{"class":264},[220,45998,347],{"class":420},[220,46000,359],{"class":264},[220,46002,46003,46005,46007],{"class":222,"line":179},[220,46004,364],{"class":264},[220,46006,45836],{"class":420},[220,46008,359],{"class":264},[220,46010,46011,46013,46015],{"class":222,"line":389},[220,46012,2550],{"class":264},[220,46014,2553],{"class":420},[220,46016,386],{"class":264},[220,46018,46019,46021,46023],{"class":222,"line":399},[220,46020,2567],{"class":264},[220,46022,45836],{"class":420},[220,46024,359],{"class":264},[220,46026,46027,46029,46031],{"class":222,"line":644},[220,46028,402],{"class":264},[220,46030,347],{"class":420},[220,46032,359],{"class":264},[212,46034,46036],{"className":251,"code":46035,"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,46037,46038,46048,46052,46066,46070,46079,46087,46091,46095],{"__ignoreMap":178},[220,46039,46040,46042,46044,46046],{"class":222,"line":223},[220,46041,261],{"class":260},[220,46043,11512],{"class":264},[220,46045,268],{"class":260},[220,46047,4007],{"class":230},[220,46049,46050],{"class":222,"line":179},[220,46051,647],{"emptyLinePlaceholder":194},[220,46053,46054,46056,46058,46060,46062,46064],{"class":222,"line":389},[220,46055,1735],{"class":260},[220,46057,1738],{"class":420},[220,46059,1741],{"class":260},[220,46061,1744],{"class":260},[220,46063,1747],{"class":226},[220,46065,1750],{"class":264},[220,46067,46068],{"class":222,"line":399},[220,46069,1765],{"class":264},[220,46071,46072,46074,46077],{"class":222,"line":644},[220,46073,1770],{"class":264},[220,46075,46076],{"class":230},"'Engraving'",[220,46078,7009],{"class":264},[220,46080,46081,46083,46085],{"class":222,"line":650},[220,46082,7014],{"class":264},[220,46084,3206],{"class":230},[220,46086,2465],{"class":264},[220,46088,46089],{"class":222,"line":656},[220,46090,7031],{"class":264},[220,46092,46093],{"class":222,"line":673},[220,46094,1787],{"class":264},[220,46096,46097],{"class":222,"line":682},[220,46098,1792],{"class":264},[1504,46100,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46102},[46103,46104],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":45836,"description":45844},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":46111,"title":46112,"body":46113,"category":33063,"componentType":25877,"description":46120,"extension":191,"meta":46305,"navigation":194,"path":46306,"requiresChild":32530,"seo":46307,"stem":46308,"__hash__":46309},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":46114,"toc":46301},[46115,46118,46121,46123,46125,46128,46130,46299],[11,46116,46112],{"id":46117},"erosionnoise",[15,46119,46120],{},"Branching, hydraulic-erosion ridges carved into noise",[31911,46122],{"component":46112},[23,46124,31915],{"id":26533},[31917,46126],{":props":46127},"[{\"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,46129,31923],{"id":31922},[246,46131,46132,46161,46189,46217,46245],{":tabs":1557},[212,46133,46135],{"className":334,"code":46134,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,46136,46137,46145,46153],{"__ignoreMap":178},[220,46138,46139,46141,46143],{"class":222,"line":223},[220,46140,343],{"class":264},[220,46142,347],{"class":346},[220,46144,359],{"class":264},[220,46146,46147,46149,46151],{"class":222,"line":179},[220,46148,364],{"class":264},[220,46150,46112],{"class":346},[220,46152,386],{"class":264},[220,46154,46155,46157,46159],{"class":222,"line":389},[220,46156,402],{"class":264},[220,46158,347],{"class":346},[220,46160,359],{"class":264},[212,46162,46163],{"className":409,"code":46134,"language":411,"meta":178,"style":178},[99,46164,46165,46173,46181],{"__ignoreMap":178},[220,46166,46167,46169,46171],{"class":222,"line":223},[220,46168,343],{"class":264},[220,46170,347],{"class":420},[220,46172,359],{"class":264},[220,46174,46175,46177,46179],{"class":222,"line":179},[220,46176,364],{"class":264},[220,46178,46112],{"class":420},[220,46180,386],{"class":264},[220,46182,46183,46185,46187],{"class":222,"line":389},[220,46184,402],{"class":264},[220,46186,347],{"class":420},[220,46188,359],{"class":264},[212,46190,46191],{"className":2844,"code":46134,"language":2846,"meta":178,"style":178},[99,46192,46193,46201,46209],{"__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,46112],{"class":420},[220,46208,386],{"class":264},[220,46210,46211,46213,46215],{"class":222,"line":389},[220,46212,402],{"class":264},[220,46214,347],{"class":420},[220,46216,359],{"class":264},[212,46218,46219],{"className":468,"code":46134,"language":469,"meta":178,"style":178},[99,46220,46221,46229,46237],{"__ignoreMap":178},[220,46222,46223,46225,46227],{"class":222,"line":223},[220,46224,343],{"class":264},[220,46226,347],{"class":420},[220,46228,359],{"class":264},[220,46230,46231,46233,46235],{"class":222,"line":179},[220,46232,364],{"class":264},[220,46234,46112],{"class":420},[220,46236,386],{"class":264},[220,46238,46239,46241,46243],{"class":222,"line":389},[220,46240,402],{"class":264},[220,46242,347],{"class":420},[220,46244,359],{"class":264},[212,46246,46248],{"className":251,"code":46247,"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,46249,46250,46260,46264,46278,46282,46291,46295],{"__ignoreMap":178},[220,46251,46252,46254,46256,46258],{"class":222,"line":223},[220,46253,261],{"class":260},[220,46255,11512],{"class":264},[220,46257,268],{"class":260},[220,46259,4007],{"class":230},[220,46261,46262],{"class":222,"line":179},[220,46263,647],{"emptyLinePlaceholder":194},[220,46265,46266,46268,46270,46272,46274,46276],{"class":222,"line":389},[220,46267,1735],{"class":260},[220,46269,1738],{"class":420},[220,46271,1741],{"class":260},[220,46273,1744],{"class":260},[220,46275,1747],{"class":226},[220,46277,1750],{"class":264},[220,46279,46280],{"class":222,"line":399},[220,46281,1765],{"class":264},[220,46283,46284,46286,46289],{"class":222,"line":644},[220,46285,1770],{"class":264},[220,46287,46288],{"class":230},"'ErosionNoise'",[220,46290,2465],{"class":264},[220,46292,46293],{"class":222,"line":650},[220,46294,1787],{"class":264},[220,46296,46297],{"class":222,"line":656},[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\u002Ferosionnoise",{"title":46112,"description":46120},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":46311,"title":46312,"body":46313,"category":36368,"componentType":25883,"description":46320,"extension":191,"meta":46581,"navigation":194,"path":46582,"requiresChild":194,"seo":46583,"stem":46584,"__hash__":46585},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":46314,"toc":46577},[46315,46318,46321,46323,46325,46328,46330,46575],[11,46316,46312],{"id":46317},"exposure",[15,46319,46320],{},"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,46322],{"component":46312},[23,46324,31915],{"id":26533},[31917,46326],{":props":46327},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,46329,31923],{"id":31922},[246,46331,46332,46377,46421,46465,46509],{":tabs":1557},[212,46333,46335],{"className":334,"code":46334,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,46336,46337,46345,46353,46361,46369],{"__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,359],{"class":264},[220,46354,46355,46357,46359],{"class":222,"line":389},[220,46356,2550],{"class":264},[220,46358,2553],{"class":346},[220,46360,386],{"class":264},[220,46362,46363,46365,46367],{"class":222,"line":399},[220,46364,2567],{"class":264},[220,46366,46312],{"class":346},[220,46368,359],{"class":264},[220,46370,46371,46373,46375],{"class":222,"line":644},[220,46372,402],{"class":264},[220,46374,347],{"class":346},[220,46376,359],{"class":264},[212,46378,46379],{"className":409,"code":46334,"language":411,"meta":178,"style":178},[99,46380,46381,46389,46397,46405,46413],{"__ignoreMap":178},[220,46382,46383,46385,46387],{"class":222,"line":223},[220,46384,343],{"class":264},[220,46386,347],{"class":420},[220,46388,359],{"class":264},[220,46390,46391,46393,46395],{"class":222,"line":179},[220,46392,364],{"class":264},[220,46394,46312],{"class":420},[220,46396,359],{"class":264},[220,46398,46399,46401,46403],{"class":222,"line":389},[220,46400,2550],{"class":264},[220,46402,2553],{"class":420},[220,46404,386],{"class":264},[220,46406,46407,46409,46411],{"class":222,"line":399},[220,46408,2567],{"class":264},[220,46410,46312],{"class":420},[220,46412,359],{"class":264},[220,46414,46415,46417,46419],{"class":222,"line":644},[220,46416,402],{"class":264},[220,46418,347],{"class":420},[220,46420,359],{"class":264},[212,46422,46423],{"className":2844,"code":46334,"language":2846,"meta":178,"style":178},[99,46424,46425,46433,46441,46449,46457],{"__ignoreMap":178},[220,46426,46427,46429,46431],{"class":222,"line":223},[220,46428,343],{"class":264},[220,46430,347],{"class":420},[220,46432,359],{"class":264},[220,46434,46435,46437,46439],{"class":222,"line":179},[220,46436,364],{"class":264},[220,46438,46312],{"class":420},[220,46440,359],{"class":264},[220,46442,46443,46445,46447],{"class":222,"line":389},[220,46444,2550],{"class":264},[220,46446,2553],{"class":420},[220,46448,386],{"class":264},[220,46450,46451,46453,46455],{"class":222,"line":399},[220,46452,2567],{"class":264},[220,46454,46312],{"class":420},[220,46456,359],{"class":264},[220,46458,46459,46461,46463],{"class":222,"line":644},[220,46460,402],{"class":264},[220,46462,347],{"class":420},[220,46464,359],{"class":264},[212,46466,46467],{"className":468,"code":46334,"language":469,"meta":178,"style":178},[99,46468,46469,46477,46485,46493,46501],{"__ignoreMap":178},[220,46470,46471,46473,46475],{"class":222,"line":223},[220,46472,343],{"class":264},[220,46474,347],{"class":420},[220,46476,359],{"class":264},[220,46478,46479,46481,46483],{"class":222,"line":179},[220,46480,364],{"class":264},[220,46482,46312],{"class":420},[220,46484,359],{"class":264},[220,46486,46487,46489,46491],{"class":222,"line":389},[220,46488,2550],{"class":264},[220,46490,2553],{"class":420},[220,46492,386],{"class":264},[220,46494,46495,46497,46499],{"class":222,"line":399},[220,46496,2567],{"class":264},[220,46498,46312],{"class":420},[220,46500,359],{"class":264},[220,46502,46503,46505,46507],{"class":222,"line":644},[220,46504,402],{"class":264},[220,46506,347],{"class":420},[220,46508,359],{"class":264},[212,46510,46512],{"className":251,"code":46511,"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,46513,46514,46524,46528,46542,46546,46555,46563,46567,46571],{"__ignoreMap":178},[220,46515,46516,46518,46520,46522],{"class":222,"line":223},[220,46517,261],{"class":260},[220,46519,11512],{"class":264},[220,46521,268],{"class":260},[220,46523,4007],{"class":230},[220,46525,46526],{"class":222,"line":179},[220,46527,647],{"emptyLinePlaceholder":194},[220,46529,46530,46532,46534,46536,46538,46540],{"class":222,"line":389},[220,46531,1735],{"class":260},[220,46533,1738],{"class":420},[220,46535,1741],{"class":260},[220,46537,1744],{"class":260},[220,46539,1747],{"class":226},[220,46541,1750],{"class":264},[220,46543,46544],{"class":222,"line":399},[220,46545,1765],{"class":264},[220,46547,46548,46550,46553],{"class":222,"line":644},[220,46549,1770],{"class":264},[220,46551,46552],{"class":230},"'Exposure'",[220,46554,7009],{"class":264},[220,46556,46557,46559,46561],{"class":222,"line":650},[220,46558,7014],{"class":264},[220,46560,3206],{"class":230},[220,46562,2465],{"class":264},[220,46564,46565],{"class":222,"line":656},[220,46566,7031],{"class":264},[220,46568,46569],{"class":222,"line":673},[220,46570,1787],{"class":264},[220,46572,46573],{"class":222,"line":682},[220,46574,1792],{"class":264},[1504,46576,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46578},[46579,46580],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":46312,"description":46320},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":46587,"title":46588,"body":46589,"category":33063,"componentType":25877,"description":46596,"extension":191,"meta":46781,"navigation":194,"path":46782,"requiresChild":32530,"seo":46783,"stem":46784,"__hash__":46785},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":46590,"toc":46777},[46591,46594,46597,46599,46601,46604,46606,46775],[11,46592,46588],{"id":46593},"fallinglines",[15,46595,46596],{},"Directional falling lines with a leading-to-trailing color fade",[31911,46598],{"component":46588},[23,46600,31915],{"id":26533},[31917,46602],{":props":46603},"[{\"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,46605,31923],{"id":31922},[246,46607,46608,46637,46665,46693,46721],{":tabs":1557},[212,46609,46611],{"className":334,"code":46610,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,46612,46613,46621,46629],{"__ignoreMap":178},[220,46614,46615,46617,46619],{"class":222,"line":223},[220,46616,343],{"class":264},[220,46618,347],{"class":346},[220,46620,359],{"class":264},[220,46622,46623,46625,46627],{"class":222,"line":179},[220,46624,364],{"class":264},[220,46626,46588],{"class":346},[220,46628,386],{"class":264},[220,46630,46631,46633,46635],{"class":222,"line":389},[220,46632,402],{"class":264},[220,46634,347],{"class":346},[220,46636,359],{"class":264},[212,46638,46639],{"className":409,"code":46610,"language":411,"meta":178,"style":178},[99,46640,46641,46649,46657],{"__ignoreMap":178},[220,46642,46643,46645,46647],{"class":222,"line":223},[220,46644,343],{"class":264},[220,46646,347],{"class":420},[220,46648,359],{"class":264},[220,46650,46651,46653,46655],{"class":222,"line":179},[220,46652,364],{"class":264},[220,46654,46588],{"class":420},[220,46656,386],{"class":264},[220,46658,46659,46661,46663],{"class":222,"line":389},[220,46660,402],{"class":264},[220,46662,347],{"class":420},[220,46664,359],{"class":264},[212,46666,46667],{"className":2844,"code":46610,"language":2846,"meta":178,"style":178},[99,46668,46669,46677,46685],{"__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,46588],{"class":420},[220,46684,386],{"class":264},[220,46686,46687,46689,46691],{"class":222,"line":389},[220,46688,402],{"class":264},[220,46690,347],{"class":420},[220,46692,359],{"class":264},[212,46694,46695],{"className":468,"code":46610,"language":469,"meta":178,"style":178},[99,46696,46697,46705,46713],{"__ignoreMap":178},[220,46698,46699,46701,46703],{"class":222,"line":223},[220,46700,343],{"class":264},[220,46702,347],{"class":420},[220,46704,359],{"class":264},[220,46706,46707,46709,46711],{"class":222,"line":179},[220,46708,364],{"class":264},[220,46710,46588],{"class":420},[220,46712,386],{"class":264},[220,46714,46715,46717,46719],{"class":222,"line":389},[220,46716,402],{"class":264},[220,46718,347],{"class":420},[220,46720,359],{"class":264},[212,46722,46724],{"className":251,"code":46723,"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,46725,46726,46736,46740,46754,46758,46767,46771],{"__ignoreMap":178},[220,46727,46728,46730,46732,46734],{"class":222,"line":223},[220,46729,261],{"class":260},[220,46731,11512],{"class":264},[220,46733,268],{"class":260},[220,46735,4007],{"class":230},[220,46737,46738],{"class":222,"line":179},[220,46739,647],{"emptyLinePlaceholder":194},[220,46741,46742,46744,46746,46748,46750,46752],{"class":222,"line":389},[220,46743,1735],{"class":260},[220,46745,1738],{"class":420},[220,46747,1741],{"class":260},[220,46749,1744],{"class":260},[220,46751,1747],{"class":226},[220,46753,1750],{"class":264},[220,46755,46756],{"class":222,"line":399},[220,46757,1765],{"class":264},[220,46759,46760,46762,46765],{"class":222,"line":644},[220,46761,1770],{"class":264},[220,46763,46764],{"class":230},"'FallingLines'",[220,46766,2465],{"class":264},[220,46768,46769],{"class":222,"line":650},[220,46770,1787],{"class":264},[220,46772,46773],{"class":222,"line":656},[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\u002Ffallinglines",{"title":46588,"description":46596},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":46787,"title":46788,"body":46789,"category":32806,"componentType":25883,"description":46796,"extension":191,"meta":47057,"navigation":194,"path":47058,"requiresChild":194,"seo":47059,"stem":47060,"__hash__":47061},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":46790,"toc":47053},[46791,46794,46797,46799,46801,46804,46806,47051],[11,46792,46788],{"id":46793},"filmgrain",[15,46795,46796],{},"Analog film grain texture overlay, weighted toward darker areas",[31911,46798],{"component":46788},[23,46800,31915],{"id":26533},[31917,46802],{":props":46803},"[{\"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,46805,31923],{"id":31922},[246,46807,46808,46853,46897,46941,46985],{":tabs":1557},[212,46809,46811],{"className":334,"code":46810,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,46812,46813,46821,46829,46837,46845],{"__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,359],{"class":264},[220,46830,46831,46833,46835],{"class":222,"line":389},[220,46832,2550],{"class":264},[220,46834,2553],{"class":346},[220,46836,386],{"class":264},[220,46838,46839,46841,46843],{"class":222,"line":399},[220,46840,2567],{"class":264},[220,46842,46788],{"class":346},[220,46844,359],{"class":264},[220,46846,46847,46849,46851],{"class":222,"line":644},[220,46848,402],{"class":264},[220,46850,347],{"class":346},[220,46852,359],{"class":264},[212,46854,46855],{"className":409,"code":46810,"language":411,"meta":178,"style":178},[99,46856,46857,46865,46873,46881,46889],{"__ignoreMap":178},[220,46858,46859,46861,46863],{"class":222,"line":223},[220,46860,343],{"class":264},[220,46862,347],{"class":420},[220,46864,359],{"class":264},[220,46866,46867,46869,46871],{"class":222,"line":179},[220,46868,364],{"class":264},[220,46870,46788],{"class":420},[220,46872,359],{"class":264},[220,46874,46875,46877,46879],{"class":222,"line":389},[220,46876,2550],{"class":264},[220,46878,2553],{"class":420},[220,46880,386],{"class":264},[220,46882,46883,46885,46887],{"class":222,"line":399},[220,46884,2567],{"class":264},[220,46886,46788],{"class":420},[220,46888,359],{"class":264},[220,46890,46891,46893,46895],{"class":222,"line":644},[220,46892,402],{"class":264},[220,46894,347],{"class":420},[220,46896,359],{"class":264},[212,46898,46899],{"className":2844,"code":46810,"language":2846,"meta":178,"style":178},[99,46900,46901,46909,46917,46925,46933],{"__ignoreMap":178},[220,46902,46903,46905,46907],{"class":222,"line":223},[220,46904,343],{"class":264},[220,46906,347],{"class":420},[220,46908,359],{"class":264},[220,46910,46911,46913,46915],{"class":222,"line":179},[220,46912,364],{"class":264},[220,46914,46788],{"class":420},[220,46916,359],{"class":264},[220,46918,46919,46921,46923],{"class":222,"line":389},[220,46920,2550],{"class":264},[220,46922,2553],{"class":420},[220,46924,386],{"class":264},[220,46926,46927,46929,46931],{"class":222,"line":399},[220,46928,2567],{"class":264},[220,46930,46788],{"class":420},[220,46932,359],{"class":264},[220,46934,46935,46937,46939],{"class":222,"line":644},[220,46936,402],{"class":264},[220,46938,347],{"class":420},[220,46940,359],{"class":264},[212,46942,46943],{"className":468,"code":46810,"language":469,"meta":178,"style":178},[99,46944,46945,46953,46961,46969,46977],{"__ignoreMap":178},[220,46946,46947,46949,46951],{"class":222,"line":223},[220,46948,343],{"class":264},[220,46950,347],{"class":420},[220,46952,359],{"class":264},[220,46954,46955,46957,46959],{"class":222,"line":179},[220,46956,364],{"class":264},[220,46958,46788],{"class":420},[220,46960,359],{"class":264},[220,46962,46963,46965,46967],{"class":222,"line":389},[220,46964,2550],{"class":264},[220,46966,2553],{"class":420},[220,46968,386],{"class":264},[220,46970,46971,46973,46975],{"class":222,"line":399},[220,46972,2567],{"class":264},[220,46974,46788],{"class":420},[220,46976,359],{"class":264},[220,46978,46979,46981,46983],{"class":222,"line":644},[220,46980,402],{"class":264},[220,46982,347],{"class":420},[220,46984,359],{"class":264},[212,46986,46988],{"className":251,"code":46987,"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,46989,46990,47000,47004,47018,47022,47031,47039,47043,47047],{"__ignoreMap":178},[220,46991,46992,46994,46996,46998],{"class":222,"line":223},[220,46993,261],{"class":260},[220,46995,11512],{"class":264},[220,46997,268],{"class":260},[220,46999,4007],{"class":230},[220,47001,47002],{"class":222,"line":179},[220,47003,647],{"emptyLinePlaceholder":194},[220,47005,47006,47008,47010,47012,47014,47016],{"class":222,"line":389},[220,47007,1735],{"class":260},[220,47009,1738],{"class":420},[220,47011,1741],{"class":260},[220,47013,1744],{"class":260},[220,47015,1747],{"class":226},[220,47017,1750],{"class":264},[220,47019,47020],{"class":222,"line":399},[220,47021,1765],{"class":264},[220,47023,47024,47026,47029],{"class":222,"line":644},[220,47025,1770],{"class":264},[220,47027,47028],{"class":230},"'FilmGrain'",[220,47030,7009],{"class":264},[220,47032,47033,47035,47037],{"class":222,"line":650},[220,47034,7014],{"class":264},[220,47036,3206],{"class":230},[220,47038,2465],{"class":264},[220,47040,47041],{"class":222,"line":656},[220,47042,7031],{"class":264},[220,47044,47045],{"class":222,"line":673},[220,47046,1787],{"class":264},[220,47048,47049],{"class":222,"line":682},[220,47050,1792],{"class":264},[1504,47052,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47054},[47055,47056],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":46788,"description":46796},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":47063,"title":47064,"body":47065,"category":36368,"componentType":25883,"description":47072,"extension":191,"meta":47333,"navigation":194,"path":47334,"requiresChild":194,"seo":47335,"stem":47336,"__hash__":47337},"components\u002Fdocs\u002Fcomponents\u002FFilmStock.md","FilmStock",{"type":8,"value":47066,"toc":47329},[47067,47070,47073,47075,47077,47080,47082,47327],[11,47068,47064],{"id":47069},"filmstock",[15,47071,47072],{},"Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave",[31911,47074],{"component":47064},[23,47076,31915],{"id":26533},[31917,47078],{":props":47079},"[{\"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,47081,31923],{"id":31922},[246,47083,47084,47129,47173,47217,47261],{":tabs":1557},[212,47085,47087],{"className":334,"code":47086,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmStock>\n \u003CCircle \u002F>\n \u003C\u002FFilmStock>\n\u003C\u002FShader>\n",[99,47088,47089,47097,47105,47113,47121],{"__ignoreMap":178},[220,47090,47091,47093,47095],{"class":222,"line":223},[220,47092,343],{"class":264},[220,47094,347],{"class":346},[220,47096,359],{"class":264},[220,47098,47099,47101,47103],{"class":222,"line":179},[220,47100,364],{"class":264},[220,47102,47064],{"class":346},[220,47104,359],{"class":264},[220,47106,47107,47109,47111],{"class":222,"line":389},[220,47108,2550],{"class":264},[220,47110,2553],{"class":346},[220,47112,386],{"class":264},[220,47114,47115,47117,47119],{"class":222,"line":399},[220,47116,2567],{"class":264},[220,47118,47064],{"class":346},[220,47120,359],{"class":264},[220,47122,47123,47125,47127],{"class":222,"line":644},[220,47124,402],{"class":264},[220,47126,347],{"class":346},[220,47128,359],{"class":264},[212,47130,47131],{"className":409,"code":47086,"language":411,"meta":178,"style":178},[99,47132,47133,47141,47149,47157,47165],{"__ignoreMap":178},[220,47134,47135,47137,47139],{"class":222,"line":223},[220,47136,343],{"class":264},[220,47138,347],{"class":420},[220,47140,359],{"class":264},[220,47142,47143,47145,47147],{"class":222,"line":179},[220,47144,364],{"class":264},[220,47146,47064],{"class":420},[220,47148,359],{"class":264},[220,47150,47151,47153,47155],{"class":222,"line":389},[220,47152,2550],{"class":264},[220,47154,2553],{"class":420},[220,47156,386],{"class":264},[220,47158,47159,47161,47163],{"class":222,"line":399},[220,47160,2567],{"class":264},[220,47162,47064],{"class":420},[220,47164,359],{"class":264},[220,47166,47167,47169,47171],{"class":222,"line":644},[220,47168,402],{"class":264},[220,47170,347],{"class":420},[220,47172,359],{"class":264},[212,47174,47175],{"className":2844,"code":47086,"language":2846,"meta":178,"style":178},[99,47176,47177,47185,47193,47201,47209],{"__ignoreMap":178},[220,47178,47179,47181,47183],{"class":222,"line":223},[220,47180,343],{"class":264},[220,47182,347],{"class":420},[220,47184,359],{"class":264},[220,47186,47187,47189,47191],{"class":222,"line":179},[220,47188,364],{"class":264},[220,47190,47064],{"class":420},[220,47192,359],{"class":264},[220,47194,47195,47197,47199],{"class":222,"line":389},[220,47196,2550],{"class":264},[220,47198,2553],{"class":420},[220,47200,386],{"class":264},[220,47202,47203,47205,47207],{"class":222,"line":399},[220,47204,2567],{"class":264},[220,47206,47064],{"class":420},[220,47208,359],{"class":264},[220,47210,47211,47213,47215],{"class":222,"line":644},[220,47212,402],{"class":264},[220,47214,347],{"class":420},[220,47216,359],{"class":264},[212,47218,47219],{"className":468,"code":47086,"language":469,"meta":178,"style":178},[99,47220,47221,47229,47237,47245,47253],{"__ignoreMap":178},[220,47222,47223,47225,47227],{"class":222,"line":223},[220,47224,343],{"class":264},[220,47226,347],{"class":420},[220,47228,359],{"class":264},[220,47230,47231,47233,47235],{"class":222,"line":179},[220,47232,364],{"class":264},[220,47234,47064],{"class":420},[220,47236,359],{"class":264},[220,47238,47239,47241,47243],{"class":222,"line":389},[220,47240,2550],{"class":264},[220,47242,2553],{"class":420},[220,47244,386],{"class":264},[220,47246,47247,47249,47251],{"class":222,"line":399},[220,47248,2567],{"class":264},[220,47250,47064],{"class":420},[220,47252,359],{"class":264},[220,47254,47255,47257,47259],{"class":222,"line":644},[220,47256,402],{"class":264},[220,47258,347],{"class":420},[220,47260,359],{"class":264},[212,47262,47264],{"className":251,"code":47263,"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,47265,47266,47276,47280,47294,47298,47307,47315,47319,47323],{"__ignoreMap":178},[220,47267,47268,47270,47272,47274],{"class":222,"line":223},[220,47269,261],{"class":260},[220,47271,11512],{"class":264},[220,47273,268],{"class":260},[220,47275,4007],{"class":230},[220,47277,47278],{"class":222,"line":179},[220,47279,647],{"emptyLinePlaceholder":194},[220,47281,47282,47284,47286,47288,47290,47292],{"class":222,"line":389},[220,47283,1735],{"class":260},[220,47285,1738],{"class":420},[220,47287,1741],{"class":260},[220,47289,1744],{"class":260},[220,47291,1747],{"class":226},[220,47293,1750],{"class":264},[220,47295,47296],{"class":222,"line":399},[220,47297,1765],{"class":264},[220,47299,47300,47302,47305],{"class":222,"line":644},[220,47301,1770],{"class":264},[220,47303,47304],{"class":230},"'FilmStock'",[220,47306,7009],{"class":264},[220,47308,47309,47311,47313],{"class":222,"line":650},[220,47310,7014],{"class":264},[220,47312,3206],{"class":230},[220,47314,2465],{"class":264},[220,47316,47317],{"class":222,"line":656},[220,47318,7031],{"class":264},[220,47320,47321],{"class":222,"line":673},[220,47322,1787],{"class":264},[220,47324,47325],{"class":222,"line":682},[220,47326,1792],{"class":264},[1504,47328,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47330},[47331,47332],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffilmstock",{"title":47064,"description":47072},"docs\u002Fcomponents\u002FFilmStock","7G7V30XyBVTR6eEcxr1nWz6_QIArP0YFqNLOoQt5-5A",{"id":47339,"title":47340,"body":47341,"category":33396,"componentType":25883,"description":47348,"extension":191,"meta":47609,"navigation":194,"path":47610,"requiresChild":194,"seo":47611,"stem":47612,"__hash__":47613},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":47342,"toc":47605},[47343,47346,47349,47351,47353,47356,47358,47603],[11,47344,47340],{"id":47345},"flip",[15,47347,47348],{},"Mirror content horizontally, vertically, or both",[31911,47350],{"component":47340},[23,47352,31915],{"id":26533},[31917,47354],{":props":47355},"[{\"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,47357,31923],{"id":31922},[246,47359,47360,47405,47449,47493,47537],{":tabs":1557},[212,47361,47363],{"className":334,"code":47362,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[99,47364,47365,47373,47381,47389,47397],{"__ignoreMap":178},[220,47366,47367,47369,47371],{"class":222,"line":223},[220,47368,343],{"class":264},[220,47370,347],{"class":346},[220,47372,359],{"class":264},[220,47374,47375,47377,47379],{"class":222,"line":179},[220,47376,364],{"class":264},[220,47378,47340],{"class":346},[220,47380,359],{"class":264},[220,47382,47383,47385,47387],{"class":222,"line":389},[220,47384,2550],{"class":264},[220,47386,2553],{"class":346},[220,47388,386],{"class":264},[220,47390,47391,47393,47395],{"class":222,"line":399},[220,47392,2567],{"class":264},[220,47394,47340],{"class":346},[220,47396,359],{"class":264},[220,47398,47399,47401,47403],{"class":222,"line":644},[220,47400,402],{"class":264},[220,47402,347],{"class":346},[220,47404,359],{"class":264},[212,47406,47407],{"className":409,"code":47362,"language":411,"meta":178,"style":178},[99,47408,47409,47417,47425,47433,47441],{"__ignoreMap":178},[220,47410,47411,47413,47415],{"class":222,"line":223},[220,47412,343],{"class":264},[220,47414,347],{"class":420},[220,47416,359],{"class":264},[220,47418,47419,47421,47423],{"class":222,"line":179},[220,47420,364],{"class":264},[220,47422,47340],{"class":420},[220,47424,359],{"class":264},[220,47426,47427,47429,47431],{"class":222,"line":389},[220,47428,2550],{"class":264},[220,47430,2553],{"class":420},[220,47432,386],{"class":264},[220,47434,47435,47437,47439],{"class":222,"line":399},[220,47436,2567],{"class":264},[220,47438,47340],{"class":420},[220,47440,359],{"class":264},[220,47442,47443,47445,47447],{"class":222,"line":644},[220,47444,402],{"class":264},[220,47446,347],{"class":420},[220,47448,359],{"class":264},[212,47450,47451],{"className":2844,"code":47362,"language":2846,"meta":178,"style":178},[99,47452,47453,47461,47469,47477,47485],{"__ignoreMap":178},[220,47454,47455,47457,47459],{"class":222,"line":223},[220,47456,343],{"class":264},[220,47458,347],{"class":420},[220,47460,359],{"class":264},[220,47462,47463,47465,47467],{"class":222,"line":179},[220,47464,364],{"class":264},[220,47466,47340],{"class":420},[220,47468,359],{"class":264},[220,47470,47471,47473,47475],{"class":222,"line":389},[220,47472,2550],{"class":264},[220,47474,2553],{"class":420},[220,47476,386],{"class":264},[220,47478,47479,47481,47483],{"class":222,"line":399},[220,47480,2567],{"class":264},[220,47482,47340],{"class":420},[220,47484,359],{"class":264},[220,47486,47487,47489,47491],{"class":222,"line":644},[220,47488,402],{"class":264},[220,47490,347],{"class":420},[220,47492,359],{"class":264},[212,47494,47495],{"className":468,"code":47362,"language":469,"meta":178,"style":178},[99,47496,47497,47505,47513,47521,47529],{"__ignoreMap":178},[220,47498,47499,47501,47503],{"class":222,"line":223},[220,47500,343],{"class":264},[220,47502,347],{"class":420},[220,47504,359],{"class":264},[220,47506,47507,47509,47511],{"class":222,"line":179},[220,47508,364],{"class":264},[220,47510,47340],{"class":420},[220,47512,359],{"class":264},[220,47514,47515,47517,47519],{"class":222,"line":389},[220,47516,2550],{"class":264},[220,47518,2553],{"class":420},[220,47520,386],{"class":264},[220,47522,47523,47525,47527],{"class":222,"line":399},[220,47524,2567],{"class":264},[220,47526,47340],{"class":420},[220,47528,359],{"class":264},[220,47530,47531,47533,47535],{"class":222,"line":644},[220,47532,402],{"class":264},[220,47534,347],{"class":420},[220,47536,359],{"class":264},[212,47538,47540],{"className":251,"code":47539,"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,47541,47542,47552,47556,47570,47574,47583,47591,47595,47599],{"__ignoreMap":178},[220,47543,47544,47546,47548,47550],{"class":222,"line":223},[220,47545,261],{"class":260},[220,47547,11512],{"class":264},[220,47549,268],{"class":260},[220,47551,4007],{"class":230},[220,47553,47554],{"class":222,"line":179},[220,47555,647],{"emptyLinePlaceholder":194},[220,47557,47558,47560,47562,47564,47566,47568],{"class":222,"line":389},[220,47559,1735],{"class":260},[220,47561,1738],{"class":420},[220,47563,1741],{"class":260},[220,47565,1744],{"class":260},[220,47567,1747],{"class":226},[220,47569,1750],{"class":264},[220,47571,47572],{"class":222,"line":399},[220,47573,1765],{"class":264},[220,47575,47576,47578,47581],{"class":222,"line":644},[220,47577,1770],{"class":264},[220,47579,47580],{"class":230},"'Flip'",[220,47582,7009],{"class":264},[220,47584,47585,47587,47589],{"class":222,"line":650},[220,47586,7014],{"class":264},[220,47588,3206],{"class":230},[220,47590,2465],{"class":264},[220,47592,47593],{"class":222,"line":656},[220,47594,7031],{"class":264},[220,47596,47597],{"class":222,"line":673},[220,47598,1787],{"class":264},[220,47600,47601],{"class":222,"line":682},[220,47602,1792],{"class":264},[1504,47604,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47606},[47607,47608],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":47340,"description":47348},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":47615,"title":47616,"body":47617,"category":33063,"componentType":25877,"description":47624,"extension":191,"meta":47809,"navigation":194,"path":47810,"requiresChild":32530,"seo":47811,"stem":47812,"__hash__":47813},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":47618,"toc":47805},[47619,47622,47625,47627,47629,47632,47634,47803],[11,47620,47616],{"id":47621},"floatingparticles",[15,47623,47624],{},"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,47626],{"component":47616},[23,47628,31915],{"id":26533},[31917,47630],{":props":47631},"[{\"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,47633,31923],{"id":31922},[246,47635,47636,47665,47693,47721,47749],{":tabs":1557},[212,47637,47639],{"className":334,"code":47638,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,47640,47641,47649,47657],{"__ignoreMap":178},[220,47642,47643,47645,47647],{"class":222,"line":223},[220,47644,343],{"class":264},[220,47646,347],{"class":346},[220,47648,359],{"class":264},[220,47650,47651,47653,47655],{"class":222,"line":179},[220,47652,364],{"class":264},[220,47654,47616],{"class":346},[220,47656,386],{"class":264},[220,47658,47659,47661,47663],{"class":222,"line":389},[220,47660,402],{"class":264},[220,47662,347],{"class":346},[220,47664,359],{"class":264},[212,47666,47667],{"className":409,"code":47638,"language":411,"meta":178,"style":178},[99,47668,47669,47677,47685],{"__ignoreMap":178},[220,47670,47671,47673,47675],{"class":222,"line":223},[220,47672,343],{"class":264},[220,47674,347],{"class":420},[220,47676,359],{"class":264},[220,47678,47679,47681,47683],{"class":222,"line":179},[220,47680,364],{"class":264},[220,47682,47616],{"class":420},[220,47684,386],{"class":264},[220,47686,47687,47689,47691],{"class":222,"line":389},[220,47688,402],{"class":264},[220,47690,347],{"class":420},[220,47692,359],{"class":264},[212,47694,47695],{"className":2844,"code":47638,"language":2846,"meta":178,"style":178},[99,47696,47697,47705,47713],{"__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,47616],{"class":420},[220,47712,386],{"class":264},[220,47714,47715,47717,47719],{"class":222,"line":389},[220,47716,402],{"class":264},[220,47718,347],{"class":420},[220,47720,359],{"class":264},[212,47722,47723],{"className":468,"code":47638,"language":469,"meta":178,"style":178},[99,47724,47725,47733,47741],{"__ignoreMap":178},[220,47726,47727,47729,47731],{"class":222,"line":223},[220,47728,343],{"class":264},[220,47730,347],{"class":420},[220,47732,359],{"class":264},[220,47734,47735,47737,47739],{"class":222,"line":179},[220,47736,364],{"class":264},[220,47738,47616],{"class":420},[220,47740,386],{"class":264},[220,47742,47743,47745,47747],{"class":222,"line":389},[220,47744,402],{"class":264},[220,47746,347],{"class":420},[220,47748,359],{"class":264},[212,47750,47752],{"className":251,"code":47751,"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,47753,47754,47764,47768,47782,47786,47795,47799],{"__ignoreMap":178},[220,47755,47756,47758,47760,47762],{"class":222,"line":223},[220,47757,261],{"class":260},[220,47759,11512],{"class":264},[220,47761,268],{"class":260},[220,47763,4007],{"class":230},[220,47765,47766],{"class":222,"line":179},[220,47767,647],{"emptyLinePlaceholder":194},[220,47769,47770,47772,47774,47776,47778,47780],{"class":222,"line":389},[220,47771,1735],{"class":260},[220,47773,1738],{"class":420},[220,47775,1741],{"class":260},[220,47777,1744],{"class":260},[220,47779,1747],{"class":226},[220,47781,1750],{"class":264},[220,47783,47784],{"class":222,"line":399},[220,47785,1765],{"class":264},[220,47787,47788,47790,47793],{"class":222,"line":644},[220,47789,1770],{"class":264},[220,47791,47792],{"class":230},"'FloatingParticles'",[220,47794,2465],{"class":264},[220,47796,47797],{"class":222,"line":650},[220,47798,1787],{"class":264},[220,47800,47801],{"class":222,"line":656},[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\u002Ffloatingparticles",{"title":47616,"description":47624},"docs\u002Fcomponents\u002FFloatingParticles","2vzJ2ZLCZ_o9DprZbQ9-7pRvNJ0fcraR48tKiBUaJNs",{"id":47815,"title":47816,"body":47817,"category":33396,"componentType":25883,"description":47824,"extension":191,"meta":48085,"navigation":194,"path":48086,"requiresChild":194,"seo":48087,"stem":48088,"__hash__":48089},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":47818,"toc":48081},[47819,47822,47825,47827,47829,47832,47834,48079],[11,47820,47816],{"id":47821},"flowfield",[15,47823,47824],{},"Fluid-like distortion with constant smooth motion",[31911,47826],{"component":47816},[23,47828,31915],{"id":26533},[31917,47830],{":props":47831},"[{\"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,47833,31923],{"id":31922},[246,47835,47836,47881,47925,47969,48013],{":tabs":1557},[212,47837,47839],{"className":334,"code":47838,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,47840,47841,47849,47857,47865,47873],{"__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,359],{"class":264},[220,47858,47859,47861,47863],{"class":222,"line":389},[220,47860,2550],{"class":264},[220,47862,2553],{"class":346},[220,47864,386],{"class":264},[220,47866,47867,47869,47871],{"class":222,"line":399},[220,47868,2567],{"class":264},[220,47870,47816],{"class":346},[220,47872,359],{"class":264},[220,47874,47875,47877,47879],{"class":222,"line":644},[220,47876,402],{"class":264},[220,47878,347],{"class":346},[220,47880,359],{"class":264},[212,47882,47883],{"className":409,"code":47838,"language":411,"meta":178,"style":178},[99,47884,47885,47893,47901,47909,47917],{"__ignoreMap":178},[220,47886,47887,47889,47891],{"class":222,"line":223},[220,47888,343],{"class":264},[220,47890,347],{"class":420},[220,47892,359],{"class":264},[220,47894,47895,47897,47899],{"class":222,"line":179},[220,47896,364],{"class":264},[220,47898,47816],{"class":420},[220,47900,359],{"class":264},[220,47902,47903,47905,47907],{"class":222,"line":389},[220,47904,2550],{"class":264},[220,47906,2553],{"class":420},[220,47908,386],{"class":264},[220,47910,47911,47913,47915],{"class":222,"line":399},[220,47912,2567],{"class":264},[220,47914,47816],{"class":420},[220,47916,359],{"class":264},[220,47918,47919,47921,47923],{"class":222,"line":644},[220,47920,402],{"class":264},[220,47922,347],{"class":420},[220,47924,359],{"class":264},[212,47926,47927],{"className":2844,"code":47838,"language":2846,"meta":178,"style":178},[99,47928,47929,47937,47945,47953,47961],{"__ignoreMap":178},[220,47930,47931,47933,47935],{"class":222,"line":223},[220,47932,343],{"class":264},[220,47934,347],{"class":420},[220,47936,359],{"class":264},[220,47938,47939,47941,47943],{"class":222,"line":179},[220,47940,364],{"class":264},[220,47942,47816],{"class":420},[220,47944,359],{"class":264},[220,47946,47947,47949,47951],{"class":222,"line":389},[220,47948,2550],{"class":264},[220,47950,2553],{"class":420},[220,47952,386],{"class":264},[220,47954,47955,47957,47959],{"class":222,"line":399},[220,47956,2567],{"class":264},[220,47958,47816],{"class":420},[220,47960,359],{"class":264},[220,47962,47963,47965,47967],{"class":222,"line":644},[220,47964,402],{"class":264},[220,47966,347],{"class":420},[220,47968,359],{"class":264},[212,47970,47971],{"className":468,"code":47838,"language":469,"meta":178,"style":178},[99,47972,47973,47981,47989,47997,48005],{"__ignoreMap":178},[220,47974,47975,47977,47979],{"class":222,"line":223},[220,47976,343],{"class":264},[220,47978,347],{"class":420},[220,47980,359],{"class":264},[220,47982,47983,47985,47987],{"class":222,"line":179},[220,47984,364],{"class":264},[220,47986,47816],{"class":420},[220,47988,359],{"class":264},[220,47990,47991,47993,47995],{"class":222,"line":389},[220,47992,2550],{"class":264},[220,47994,2553],{"class":420},[220,47996,386],{"class":264},[220,47998,47999,48001,48003],{"class":222,"line":399},[220,48000,2567],{"class":264},[220,48002,47816],{"class":420},[220,48004,359],{"class":264},[220,48006,48007,48009,48011],{"class":222,"line":644},[220,48008,402],{"class":264},[220,48010,347],{"class":420},[220,48012,359],{"class":264},[212,48014,48016],{"className":251,"code":48015,"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,48017,48018,48028,48032,48046,48050,48059,48067,48071,48075],{"__ignoreMap":178},[220,48019,48020,48022,48024,48026],{"class":222,"line":223},[220,48021,261],{"class":260},[220,48023,11512],{"class":264},[220,48025,268],{"class":260},[220,48027,4007],{"class":230},[220,48029,48030],{"class":222,"line":179},[220,48031,647],{"emptyLinePlaceholder":194},[220,48033,48034,48036,48038,48040,48042,48044],{"class":222,"line":389},[220,48035,1735],{"class":260},[220,48037,1738],{"class":420},[220,48039,1741],{"class":260},[220,48041,1744],{"class":260},[220,48043,1747],{"class":226},[220,48045,1750],{"class":264},[220,48047,48048],{"class":222,"line":399},[220,48049,1765],{"class":264},[220,48051,48052,48054,48057],{"class":222,"line":644},[220,48053,1770],{"class":264},[220,48055,48056],{"class":230},"'FlowField'",[220,48058,7009],{"class":264},[220,48060,48061,48063,48065],{"class":222,"line":650},[220,48062,7014],{"class":264},[220,48064,3206],{"class":230},[220,48066,2465],{"class":264},[220,48068,48069],{"class":222,"line":656},[220,48070,7031],{"class":264},[220,48072,48073],{"class":222,"line":673},[220,48074,1787],{"class":264},[220,48076,48077],{"class":222,"line":682},[220,48078,1792],{"class":264},[1504,48080,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48082},[48083,48084],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":47816,"description":47824},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":48091,"title":48092,"body":48093,"category":15908,"componentType":25877,"description":48100,"extension":191,"meta":48378,"navigation":194,"path":48379,"requiresChild":32530,"seo":48380,"stem":48381,"__hash__":48382},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":48094,"toc":48374},[48095,48098,48101,48103,48105,48108,48110,48372],[11,48096,48092],{"id":48097},"flower",[15,48099,48100],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[31911,48102],{"component":48092},[23,48104,31915],{"id":26533},[31917,48106],{":props":48107},"[{\"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,48109,31923],{"id":31922},[246,48111,48112,48161,48212,48260,48310],{":tabs":1557},[212,48113,48115],{"className":334,"code":48114,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,48116,48117,48125,48132,48140,48149,48153],{"__ignoreMap":178},[220,48118,48119,48121,48123],{"class":222,"line":223},[220,48120,343],{"class":264},[220,48122,347],{"class":346},[220,48124,359],{"class":264},[220,48126,48127,48129],{"class":222,"line":179},[220,48128,364],{"class":264},[220,48130,48131],{"class":346},"Flower\n",[220,48133,48134,48136,48138],{"class":222,"line":389},[220,48135,9635],{"class":226},[220,48137,353],{"class":264},[220,48139,9591],{"class":230},[220,48141,48142,48144,48146],{"class":222,"line":399},[220,48143,17405],{"class":226},[220,48145,353],{"class":264},[220,48147,48148],{"class":230},"\"0.4\"\n",[220,48150,48151],{"class":222,"line":644},[220,48152,1234],{"class":264},[220,48154,48155,48157,48159],{"class":222,"line":650},[220,48156,402],{"class":264},[220,48158,347],{"class":346},[220,48160,359],{"class":264},[212,48162,48164],{"className":409,"code":48163,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,48165,48166,48174,48180,48188,48200,48204],{"__ignoreMap":178},[220,48167,48168,48170,48172],{"class":222,"line":223},[220,48169,343],{"class":264},[220,48171,347],{"class":420},[220,48173,359],{"class":264},[220,48175,48176,48178],{"class":222,"line":179},[220,48177,364],{"class":264},[220,48179,48131],{"class":420},[220,48181,48182,48184,48186],{"class":222,"line":389},[220,48183,9635],{"class":226},[220,48185,353],{"class":260},[220,48187,9591],{"class":230},[220,48189,48190,48192,48194,48196,48198],{"class":222,"line":399},[220,48191,9645],{"class":226},[220,48193,353],{"class":260},[220,48195,743],{"class":264},[220,48197,8249],{"class":420},[220,48199,749],{"class":264},[220,48201,48202],{"class":222,"line":644},[220,48203,1234],{"class":264},[220,48205,48206,48208,48210],{"class":222,"line":650},[220,48207,402],{"class":264},[220,48209,347],{"class":420},[220,48211,359],{"class":264},[212,48213,48214],{"className":2844,"code":48163,"language":2846,"meta":178,"style":178},[99,48215,48216,48224,48230,48238,48248,48252],{"__ignoreMap":178},[220,48217,48218,48220,48222],{"class":222,"line":223},[220,48219,343],{"class":264},[220,48221,347],{"class":420},[220,48223,359],{"class":264},[220,48225,48226,48228],{"class":222,"line":179},[220,48227,364],{"class":264},[220,48229,48131],{"class":420},[220,48231,48232,48234,48236],{"class":222,"line":389},[220,48233,9635],{"class":226},[220,48235,353],{"class":264},[220,48237,9591],{"class":230},[220,48239,48240,48242,48244,48246],{"class":222,"line":399},[220,48241,9645],{"class":226},[220,48243,29871],{"class":264},[220,48245,8249],{"class":420},[220,48247,749],{"class":264},[220,48249,48250],{"class":222,"line":644},[220,48251,1234],{"class":264},[220,48253,48254,48256,48258],{"class":222,"line":650},[220,48255,402],{"class":264},[220,48257,347],{"class":420},[220,48259,359],{"class":264},[212,48261,48262],{"className":468,"code":48163,"language":469,"meta":178,"style":178},[99,48263,48264,48272,48278,48286,48298,48302],{"__ignoreMap":178},[220,48265,48266,48268,48270],{"class":222,"line":223},[220,48267,343],{"class":264},[220,48269,347],{"class":420},[220,48271,359],{"class":264},[220,48273,48274,48276],{"class":222,"line":179},[220,48275,364],{"class":264},[220,48277,48131],{"class":420},[220,48279,48280,48282,48284],{"class":222,"line":389},[220,48281,9635],{"class":226},[220,48283,353],{"class":260},[220,48285,9591],{"class":230},[220,48287,48288,48290,48292,48294,48296],{"class":222,"line":399},[220,48289,9645],{"class":226},[220,48291,353],{"class":260},[220,48293,743],{"class":264},[220,48295,8249],{"class":420},[220,48297,749],{"class":264},[220,48299,48300],{"class":222,"line":644},[220,48301,1234],{"class":264},[220,48303,48304,48306,48308],{"class":222,"line":650},[220,48305,402],{"class":264},[220,48307,347],{"class":420},[220,48309,359],{"class":264},[212,48311,48313],{"className":251,"code":48312,"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,48314,48315,48325,48329,48343,48347,48364,48368],{"__ignoreMap":178},[220,48316,48317,48319,48321,48323],{"class":222,"line":223},[220,48318,261],{"class":260},[220,48320,11512],{"class":264},[220,48322,268],{"class":260},[220,48324,4007],{"class":230},[220,48326,48327],{"class":222,"line":179},[220,48328,647],{"emptyLinePlaceholder":194},[220,48330,48331,48333,48335,48337,48339,48341],{"class":222,"line":389},[220,48332,1735],{"class":260},[220,48334,1738],{"class":420},[220,48336,1741],{"class":260},[220,48338,1744],{"class":260},[220,48340,1747],{"class":226},[220,48342,1750],{"class":264},[220,48344,48345],{"class":222,"line":399},[220,48346,1765],{"class":264},[220,48348,48349,48351,48354,48356,48358,48360,48362],{"class":222,"line":644},[220,48350,1770],{"class":264},[220,48352,48353],{"class":230},"'Flower'",[220,48355,1776],{"class":264},[220,48357,10169],{"class":230},[220,48359,6566],{"class":264},[220,48361,8249],{"class":420},[220,48363,1782],{"class":264},[220,48365,48366],{"class":222,"line":650},[220,48367,1787],{"class":264},[220,48369,48370],{"class":222,"line":656},[220,48371,1792],{"class":264},[1504,48373,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48375},[48376,48377],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":48092,"description":48100},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":48384,"title":48385,"body":48386,"category":33063,"componentType":25877,"description":48393,"extension":191,"meta":48578,"navigation":194,"path":48579,"requiresChild":32530,"seo":48580,"stem":48581,"__hash__":48582},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":48387,"toc":48574},[48388,48391,48394,48396,48398,48401,48403,48572],[11,48389,48385],{"id":48390},"flowinggradient",[15,48392,48393],{},"Liquid silk gradient with organic flowing color bands",[31911,48395],{"component":48385},[23,48397,31915],{"id":26533},[31917,48399],{":props":48400},"[{\"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,48402,31923],{"id":31922},[246,48404,48405,48434,48462,48490,48518],{":tabs":1557},[212,48406,48408],{"className":334,"code":48407,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,48409,48410,48418,48426],{"__ignoreMap":178},[220,48411,48412,48414,48416],{"class":222,"line":223},[220,48413,343],{"class":264},[220,48415,347],{"class":346},[220,48417,359],{"class":264},[220,48419,48420,48422,48424],{"class":222,"line":179},[220,48421,364],{"class":264},[220,48423,48385],{"class":346},[220,48425,386],{"class":264},[220,48427,48428,48430,48432],{"class":222,"line":389},[220,48429,402],{"class":264},[220,48431,347],{"class":346},[220,48433,359],{"class":264},[212,48435,48436],{"className":409,"code":48407,"language":411,"meta":178,"style":178},[99,48437,48438,48446,48454],{"__ignoreMap":178},[220,48439,48440,48442,48444],{"class":222,"line":223},[220,48441,343],{"class":264},[220,48443,347],{"class":420},[220,48445,359],{"class":264},[220,48447,48448,48450,48452],{"class":222,"line":179},[220,48449,364],{"class":264},[220,48451,48385],{"class":420},[220,48453,386],{"class":264},[220,48455,48456,48458,48460],{"class":222,"line":389},[220,48457,402],{"class":264},[220,48459,347],{"class":420},[220,48461,359],{"class":264},[212,48463,48464],{"className":2844,"code":48407,"language":2846,"meta":178,"style":178},[99,48465,48466,48474,48482],{"__ignoreMap":178},[220,48467,48468,48470,48472],{"class":222,"line":223},[220,48469,343],{"class":264},[220,48471,347],{"class":420},[220,48473,359],{"class":264},[220,48475,48476,48478,48480],{"class":222,"line":179},[220,48477,364],{"class":264},[220,48479,48385],{"class":420},[220,48481,386],{"class":264},[220,48483,48484,48486,48488],{"class":222,"line":389},[220,48485,402],{"class":264},[220,48487,347],{"class":420},[220,48489,359],{"class":264},[212,48491,48492],{"className":468,"code":48407,"language":469,"meta":178,"style":178},[99,48493,48494,48502,48510],{"__ignoreMap":178},[220,48495,48496,48498,48500],{"class":222,"line":223},[220,48497,343],{"class":264},[220,48499,347],{"class":420},[220,48501,359],{"class":264},[220,48503,48504,48506,48508],{"class":222,"line":179},[220,48505,364],{"class":264},[220,48507,48385],{"class":420},[220,48509,386],{"class":264},[220,48511,48512,48514,48516],{"class":222,"line":389},[220,48513,402],{"class":264},[220,48515,347],{"class":420},[220,48517,359],{"class":264},[212,48519,48521],{"className":251,"code":48520,"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,48522,48523,48533,48537,48551,48555,48564,48568],{"__ignoreMap":178},[220,48524,48525,48527,48529,48531],{"class":222,"line":223},[220,48526,261],{"class":260},[220,48528,11512],{"class":264},[220,48530,268],{"class":260},[220,48532,4007],{"class":230},[220,48534,48535],{"class":222,"line":179},[220,48536,647],{"emptyLinePlaceholder":194},[220,48538,48539,48541,48543,48545,48547,48549],{"class":222,"line":389},[220,48540,1735],{"class":260},[220,48542,1738],{"class":420},[220,48544,1741],{"class":260},[220,48546,1744],{"class":260},[220,48548,1747],{"class":226},[220,48550,1750],{"class":264},[220,48552,48553],{"class":222,"line":399},[220,48554,1765],{"class":264},[220,48556,48557,48559,48562],{"class":222,"line":644},[220,48558,1770],{"class":264},[220,48560,48561],{"class":230},"'FlowingGradient'",[220,48563,2465],{"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,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48575},[48576,48577],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":48385,"description":48393},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":48584,"title":48585,"body":48586,"category":33396,"componentType":25883,"description":48593,"extension":191,"meta":48854,"navigation":194,"path":48855,"requiresChild":194,"seo":48856,"stem":48857,"__hash__":48858},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":48587,"toc":48850},[48588,48591,48594,48596,48598,48601,48603,48848],[11,48589,48585],{"id":48590},"flutedglass",[15,48592,48593],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[31911,48595],{"component":48585},[23,48597,31915],{"id":26533},[31917,48599],{":props":48600},"[{\"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,48602,31923],{"id":31922},[246,48604,48605,48650,48694,48738,48782],{":tabs":1557},[212,48606,48608],{"className":334,"code":48607,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,48609,48610,48618,48626,48634,48642],{"__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,359],{"class":264},[220,48627,48628,48630,48632],{"class":222,"line":389},[220,48629,2550],{"class":264},[220,48631,2553],{"class":346},[220,48633,386],{"class":264},[220,48635,48636,48638,48640],{"class":222,"line":399},[220,48637,2567],{"class":264},[220,48639,48585],{"class":346},[220,48641,359],{"class":264},[220,48643,48644,48646,48648],{"class":222,"line":644},[220,48645,402],{"class":264},[220,48647,347],{"class":346},[220,48649,359],{"class":264},[212,48651,48652],{"className":409,"code":48607,"language":411,"meta":178,"style":178},[99,48653,48654,48662,48670,48678,48686],{"__ignoreMap":178},[220,48655,48656,48658,48660],{"class":222,"line":223},[220,48657,343],{"class":264},[220,48659,347],{"class":420},[220,48661,359],{"class":264},[220,48663,48664,48666,48668],{"class":222,"line":179},[220,48665,364],{"class":264},[220,48667,48585],{"class":420},[220,48669,359],{"class":264},[220,48671,48672,48674,48676],{"class":222,"line":389},[220,48673,2550],{"class":264},[220,48675,2553],{"class":420},[220,48677,386],{"class":264},[220,48679,48680,48682,48684],{"class":222,"line":399},[220,48681,2567],{"class":264},[220,48683,48585],{"class":420},[220,48685,359],{"class":264},[220,48687,48688,48690,48692],{"class":222,"line":644},[220,48689,402],{"class":264},[220,48691,347],{"class":420},[220,48693,359],{"class":264},[212,48695,48696],{"className":2844,"code":48607,"language":2846,"meta":178,"style":178},[99,48697,48698,48706,48714,48722,48730],{"__ignoreMap":178},[220,48699,48700,48702,48704],{"class":222,"line":223},[220,48701,343],{"class":264},[220,48703,347],{"class":420},[220,48705,359],{"class":264},[220,48707,48708,48710,48712],{"class":222,"line":179},[220,48709,364],{"class":264},[220,48711,48585],{"class":420},[220,48713,359],{"class":264},[220,48715,48716,48718,48720],{"class":222,"line":389},[220,48717,2550],{"class":264},[220,48719,2553],{"class":420},[220,48721,386],{"class":264},[220,48723,48724,48726,48728],{"class":222,"line":399},[220,48725,2567],{"class":264},[220,48727,48585],{"class":420},[220,48729,359],{"class":264},[220,48731,48732,48734,48736],{"class":222,"line":644},[220,48733,402],{"class":264},[220,48735,347],{"class":420},[220,48737,359],{"class":264},[212,48739,48740],{"className":468,"code":48607,"language":469,"meta":178,"style":178},[99,48741,48742,48750,48758,48766,48774],{"__ignoreMap":178},[220,48743,48744,48746,48748],{"class":222,"line":223},[220,48745,343],{"class":264},[220,48747,347],{"class":420},[220,48749,359],{"class":264},[220,48751,48752,48754,48756],{"class":222,"line":179},[220,48753,364],{"class":264},[220,48755,48585],{"class":420},[220,48757,359],{"class":264},[220,48759,48760,48762,48764],{"class":222,"line":389},[220,48761,2550],{"class":264},[220,48763,2553],{"class":420},[220,48765,386],{"class":264},[220,48767,48768,48770,48772],{"class":222,"line":399},[220,48769,2567],{"class":264},[220,48771,48585],{"class":420},[220,48773,359],{"class":264},[220,48775,48776,48778,48780],{"class":222,"line":644},[220,48777,402],{"class":264},[220,48779,347],{"class":420},[220,48781,359],{"class":264},[212,48783,48785],{"className":251,"code":48784,"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,48786,48787,48797,48801,48815,48819,48828,48836,48840,48844],{"__ignoreMap":178},[220,48788,48789,48791,48793,48795],{"class":222,"line":223},[220,48790,261],{"class":260},[220,48792,11512],{"class":264},[220,48794,268],{"class":260},[220,48796,4007],{"class":230},[220,48798,48799],{"class":222,"line":179},[220,48800,647],{"emptyLinePlaceholder":194},[220,48802,48803,48805,48807,48809,48811,48813],{"class":222,"line":389},[220,48804,1735],{"class":260},[220,48806,1738],{"class":420},[220,48808,1741],{"class":260},[220,48810,1744],{"class":260},[220,48812,1747],{"class":226},[220,48814,1750],{"class":264},[220,48816,48817],{"class":222,"line":399},[220,48818,1765],{"class":264},[220,48820,48821,48823,48826],{"class":222,"line":644},[220,48822,1770],{"class":264},[220,48824,48825],{"class":230},"'FlutedGlass'",[220,48827,7009],{"class":264},[220,48829,48830,48832,48834],{"class":222,"line":650},[220,48831,7014],{"class":264},[220,48833,3206],{"class":230},[220,48835,2465],{"class":264},[220,48837,48838],{"class":222,"line":656},[220,48839,7031],{"class":264},[220,48841,48842],{"class":222,"line":673},[220,48843,1787],{"class":264},[220,48845,48846],{"class":222,"line":682},[220,48847,1792],{"class":264},[1504,48849,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48851},[48852,48853],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":48585,"description":48593},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":48860,"title":48861,"body":48862,"category":35559,"componentType":25877,"description":48869,"extension":191,"meta":49054,"navigation":194,"path":49055,"requiresChild":32530,"seo":49056,"stem":49057,"__hash__":49058},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":48863,"toc":49050},[48864,48867,48870,48872,48874,48877,48879,49048],[11,48865,48861],{"id":48866},"fog",[15,48868,48869],{},"Fog that fills the screen and interacts with the mouse",[31911,48871],{"component":48861},[23,48873,31915],{"id":26533},[31917,48875],{":props":48876},"[{\"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,48878,31923],{"id":31922},[246,48880,48881,48910,48938,48966,48994],{":tabs":1557},[212,48882,48884],{"className":334,"code":48883,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,48885,48886,48894,48902],{"__ignoreMap":178},[220,48887,48888,48890,48892],{"class":222,"line":223},[220,48889,343],{"class":264},[220,48891,347],{"class":346},[220,48893,359],{"class":264},[220,48895,48896,48898,48900],{"class":222,"line":179},[220,48897,364],{"class":264},[220,48899,48861],{"class":346},[220,48901,386],{"class":264},[220,48903,48904,48906,48908],{"class":222,"line":389},[220,48905,402],{"class":264},[220,48907,347],{"class":346},[220,48909,359],{"class":264},[212,48911,48912],{"className":409,"code":48883,"language":411,"meta":178,"style":178},[99,48913,48914,48922,48930],{"__ignoreMap":178},[220,48915,48916,48918,48920],{"class":222,"line":223},[220,48917,343],{"class":264},[220,48919,347],{"class":420},[220,48921,359],{"class":264},[220,48923,48924,48926,48928],{"class":222,"line":179},[220,48925,364],{"class":264},[220,48927,48861],{"class":420},[220,48929,386],{"class":264},[220,48931,48932,48934,48936],{"class":222,"line":389},[220,48933,402],{"class":264},[220,48935,347],{"class":420},[220,48937,359],{"class":264},[212,48939,48940],{"className":2844,"code":48883,"language":2846,"meta":178,"style":178},[99,48941,48942,48950,48958],{"__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,48861],{"class":420},[220,48957,386],{"class":264},[220,48959,48960,48962,48964],{"class":222,"line":389},[220,48961,402],{"class":264},[220,48963,347],{"class":420},[220,48965,359],{"class":264},[212,48967,48968],{"className":468,"code":48883,"language":469,"meta":178,"style":178},[99,48969,48970,48978,48986],{"__ignoreMap":178},[220,48971,48972,48974,48976],{"class":222,"line":223},[220,48973,343],{"class":264},[220,48975,347],{"class":420},[220,48977,359],{"class":264},[220,48979,48980,48982,48984],{"class":222,"line":179},[220,48981,364],{"class":264},[220,48983,48861],{"class":420},[220,48985,386],{"class":264},[220,48987,48988,48990,48992],{"class":222,"line":389},[220,48989,402],{"class":264},[220,48991,347],{"class":420},[220,48993,359],{"class":264},[212,48995,48997],{"className":251,"code":48996,"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,48998,48999,49009,49013,49027,49031,49040,49044],{"__ignoreMap":178},[220,49000,49001,49003,49005,49007],{"class":222,"line":223},[220,49002,261],{"class":260},[220,49004,11512],{"class":264},[220,49006,268],{"class":260},[220,49008,4007],{"class":230},[220,49010,49011],{"class":222,"line":179},[220,49012,647],{"emptyLinePlaceholder":194},[220,49014,49015,49017,49019,49021,49023,49025],{"class":222,"line":389},[220,49016,1735],{"class":260},[220,49018,1738],{"class":420},[220,49020,1741],{"class":260},[220,49022,1744],{"class":260},[220,49024,1747],{"class":226},[220,49026,1750],{"class":264},[220,49028,49029],{"class":222,"line":399},[220,49030,1765],{"class":264},[220,49032,49033,49035,49038],{"class":222,"line":644},[220,49034,1770],{"class":264},[220,49036,49037],{"class":230},"'Fog'",[220,49039,2465],{"class":264},[220,49041,49042],{"class":222,"line":650},[220,49043,1787],{"class":264},[220,49045,49046],{"class":222,"line":656},[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\u002Ffog",{"title":48861,"description":48869},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":49060,"title":49061,"body":49062,"category":33396,"componentType":25883,"description":49069,"extension":191,"meta":49330,"navigation":194,"path":49331,"requiresChild":194,"seo":49332,"stem":49333,"__hash__":49334},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":49063,"toc":49326},[49064,49067,49070,49072,49074,49077,49079,49324],[11,49065,49061],{"id":49066},"form3d",[15,49068,49069],{},"Wraps child content onto a 3D raymarched shape with lighting.",[31911,49071],{"component":49061},[23,49073,31915],{"id":26533},[31917,49075],{":props":49076},"[{\"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,49078,31923],{"id":31922},[246,49080,49081,49126,49170,49214,49258],{":tabs":1557},[212,49082,49084],{"className":334,"code":49083,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,49085,49086,49094,49102,49110,49118],{"__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,359],{"class":264},[220,49103,49104,49106,49108],{"class":222,"line":389},[220,49105,2550],{"class":264},[220,49107,2553],{"class":346},[220,49109,386],{"class":264},[220,49111,49112,49114,49116],{"class":222,"line":399},[220,49113,2567],{"class":264},[220,49115,49061],{"class":346},[220,49117,359],{"class":264},[220,49119,49120,49122,49124],{"class":222,"line":644},[220,49121,402],{"class":264},[220,49123,347],{"class":346},[220,49125,359],{"class":264},[212,49127,49128],{"className":409,"code":49083,"language":411,"meta":178,"style":178},[99,49129,49130,49138,49146,49154,49162],{"__ignoreMap":178},[220,49131,49132,49134,49136],{"class":222,"line":223},[220,49133,343],{"class":264},[220,49135,347],{"class":420},[220,49137,359],{"class":264},[220,49139,49140,49142,49144],{"class":222,"line":179},[220,49141,364],{"class":264},[220,49143,49061],{"class":420},[220,49145,359],{"class":264},[220,49147,49148,49150,49152],{"class":222,"line":389},[220,49149,2550],{"class":264},[220,49151,2553],{"class":420},[220,49153,386],{"class":264},[220,49155,49156,49158,49160],{"class":222,"line":399},[220,49157,2567],{"class":264},[220,49159,49061],{"class":420},[220,49161,359],{"class":264},[220,49163,49164,49166,49168],{"class":222,"line":644},[220,49165,402],{"class":264},[220,49167,347],{"class":420},[220,49169,359],{"class":264},[212,49171,49172],{"className":2844,"code":49083,"language":2846,"meta":178,"style":178},[99,49173,49174,49182,49190,49198,49206],{"__ignoreMap":178},[220,49175,49176,49178,49180],{"class":222,"line":223},[220,49177,343],{"class":264},[220,49179,347],{"class":420},[220,49181,359],{"class":264},[220,49183,49184,49186,49188],{"class":222,"line":179},[220,49185,364],{"class":264},[220,49187,49061],{"class":420},[220,49189,359],{"class":264},[220,49191,49192,49194,49196],{"class":222,"line":389},[220,49193,2550],{"class":264},[220,49195,2553],{"class":420},[220,49197,386],{"class":264},[220,49199,49200,49202,49204],{"class":222,"line":399},[220,49201,2567],{"class":264},[220,49203,49061],{"class":420},[220,49205,359],{"class":264},[220,49207,49208,49210,49212],{"class":222,"line":644},[220,49209,402],{"class":264},[220,49211,347],{"class":420},[220,49213,359],{"class":264},[212,49215,49216],{"className":468,"code":49083,"language":469,"meta":178,"style":178},[99,49217,49218,49226,49234,49242,49250],{"__ignoreMap":178},[220,49219,49220,49222,49224],{"class":222,"line":223},[220,49221,343],{"class":264},[220,49223,347],{"class":420},[220,49225,359],{"class":264},[220,49227,49228,49230,49232],{"class":222,"line":179},[220,49229,364],{"class":264},[220,49231,49061],{"class":420},[220,49233,359],{"class":264},[220,49235,49236,49238,49240],{"class":222,"line":389},[220,49237,2550],{"class":264},[220,49239,2553],{"class":420},[220,49241,386],{"class":264},[220,49243,49244,49246,49248],{"class":222,"line":399},[220,49245,2567],{"class":264},[220,49247,49061],{"class":420},[220,49249,359],{"class":264},[220,49251,49252,49254,49256],{"class":222,"line":644},[220,49253,402],{"class":264},[220,49255,347],{"class":420},[220,49257,359],{"class":264},[212,49259,49261],{"className":251,"code":49260,"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,49262,49263,49273,49277,49291,49295,49304,49312,49316,49320],{"__ignoreMap":178},[220,49264,49265,49267,49269,49271],{"class":222,"line":223},[220,49266,261],{"class":260},[220,49268,11512],{"class":264},[220,49270,268],{"class":260},[220,49272,4007],{"class":230},[220,49274,49275],{"class":222,"line":179},[220,49276,647],{"emptyLinePlaceholder":194},[220,49278,49279,49281,49283,49285,49287,49289],{"class":222,"line":389},[220,49280,1735],{"class":260},[220,49282,1738],{"class":420},[220,49284,1741],{"class":260},[220,49286,1744],{"class":260},[220,49288,1747],{"class":226},[220,49290,1750],{"class":264},[220,49292,49293],{"class":222,"line":399},[220,49294,1765],{"class":264},[220,49296,49297,49299,49302],{"class":222,"line":644},[220,49298,1770],{"class":264},[220,49300,49301],{"class":230},"'Form3D'",[220,49303,7009],{"class":264},[220,49305,49306,49308,49310],{"class":222,"line":650},[220,49307,7014],{"class":264},[220,49309,3206],{"class":230},[220,49311,2465],{"class":264},[220,49313,49314],{"class":222,"line":656},[220,49315,7031],{"class":264},[220,49317,49318],{"class":222,"line":673},[220,49319,1787],{"class":264},[220,49321,49322],{"class":222,"line":682},[220,49323,1792],{"class":264},[1504,49325,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49327},[49328,49329],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":49061,"description":49069},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":49336,"title":49337,"body":49338,"category":33063,"componentType":25877,"description":49345,"extension":191,"meta":49530,"navigation":194,"path":49531,"requiresChild":32530,"seo":49532,"stem":49533,"__hash__":49534},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":49339,"toc":49526},[49340,49343,49346,49348,49350,49353,49355,49524],[11,49341,49337],{"id":49342},"fractalnoise",[15,49344,49345],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[31911,49347],{"component":49337},[23,49349,31915],{"id":26533},[31917,49351],{":props":49352},"[{\"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,49354,31923],{"id":31922},[246,49356,49357,49386,49414,49442,49470],{":tabs":1557},[212,49358,49360],{"className":334,"code":49359,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,49361,49362,49370,49378],{"__ignoreMap":178},[220,49363,49364,49366,49368],{"class":222,"line":223},[220,49365,343],{"class":264},[220,49367,347],{"class":346},[220,49369,359],{"class":264},[220,49371,49372,49374,49376],{"class":222,"line":179},[220,49373,364],{"class":264},[220,49375,49337],{"class":346},[220,49377,386],{"class":264},[220,49379,49380,49382,49384],{"class":222,"line":389},[220,49381,402],{"class":264},[220,49383,347],{"class":346},[220,49385,359],{"class":264},[212,49387,49388],{"className":409,"code":49359,"language":411,"meta":178,"style":178},[99,49389,49390,49398,49406],{"__ignoreMap":178},[220,49391,49392,49394,49396],{"class":222,"line":223},[220,49393,343],{"class":264},[220,49395,347],{"class":420},[220,49397,359],{"class":264},[220,49399,49400,49402,49404],{"class":222,"line":179},[220,49401,364],{"class":264},[220,49403,49337],{"class":420},[220,49405,386],{"class":264},[220,49407,49408,49410,49412],{"class":222,"line":389},[220,49409,402],{"class":264},[220,49411,347],{"class":420},[220,49413,359],{"class":264},[212,49415,49416],{"className":2844,"code":49359,"language":2846,"meta":178,"style":178},[99,49417,49418,49426,49434],{"__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,49337],{"class":420},[220,49433,386],{"class":264},[220,49435,49436,49438,49440],{"class":222,"line":389},[220,49437,402],{"class":264},[220,49439,347],{"class":420},[220,49441,359],{"class":264},[212,49443,49444],{"className":468,"code":49359,"language":469,"meta":178,"style":178},[99,49445,49446,49454,49462],{"__ignoreMap":178},[220,49447,49448,49450,49452],{"class":222,"line":223},[220,49449,343],{"class":264},[220,49451,347],{"class":420},[220,49453,359],{"class":264},[220,49455,49456,49458,49460],{"class":222,"line":179},[220,49457,364],{"class":264},[220,49459,49337],{"class":420},[220,49461,386],{"class":264},[220,49463,49464,49466,49468],{"class":222,"line":389},[220,49465,402],{"class":264},[220,49467,347],{"class":420},[220,49469,359],{"class":264},[212,49471,49473],{"className":251,"code":49472,"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,49474,49475,49485,49489,49503,49507,49516,49520],{"__ignoreMap":178},[220,49476,49477,49479,49481,49483],{"class":222,"line":223},[220,49478,261],{"class":260},[220,49480,11512],{"class":264},[220,49482,268],{"class":260},[220,49484,4007],{"class":230},[220,49486,49487],{"class":222,"line":179},[220,49488,647],{"emptyLinePlaceholder":194},[220,49490,49491,49493,49495,49497,49499,49501],{"class":222,"line":389},[220,49492,1735],{"class":260},[220,49494,1738],{"class":420},[220,49496,1741],{"class":260},[220,49498,1744],{"class":260},[220,49500,1747],{"class":226},[220,49502,1750],{"class":264},[220,49504,49505],{"class":222,"line":399},[220,49506,1765],{"class":264},[220,49508,49509,49511,49514],{"class":222,"line":644},[220,49510,1770],{"class":264},[220,49512,49513],{"class":230},"'FractalNoise'",[220,49515,2465],{"class":264},[220,49517,49518],{"class":222,"line":650},[220,49519,1787],{"class":264},[220,49521,49522],{"class":222,"line":656},[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\u002Ffractalnoise",{"title":49337,"description":49345},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":49536,"title":49537,"body":49538,"category":36569,"componentType":25877,"description":49545,"extension":191,"meta":49730,"navigation":194,"path":49731,"requiresChild":32530,"seo":49732,"stem":49733,"__hash__":49734},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":49539,"toc":49726},[49540,49543,49546,49548,49550,49553,49555,49724],[11,49541,49537],{"id":49542},"frost",[15,49544,49545],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[31911,49547],{"component":49537},[23,49549,31915],{"id":26533},[31917,49551],{":props":49552},"[{\"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,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 \u003CFrost \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: 'Frost', 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},"'Frost'",[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\u002Ffrost",{"title":49537,"description":49545},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":49736,"title":49737,"body":49738,"category":33063,"componentType":25877,"description":49745,"extension":191,"meta":49930,"navigation":194,"path":49931,"requiresChild":32530,"seo":49932,"stem":49933,"__hash__":49934},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":49739,"toc":49926},[49740,49743,49746,49748,49750,49753,49755,49924],[11,49741,49737],{"id":49742},"gabornoise",[15,49744,49745],{},"Oriented sine-grain noise with a fingerprint-like flow",[31911,49747],{"component":49737},[23,49749,31915],{"id":26533},[31917,49751],{":props":49752},"[{\"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,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 \u003CGaborNoise \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: 'GaborNoise', 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},"'GaborNoise'",[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\u002Fgabornoise",{"title":49737,"description":49745},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":49936,"title":15466,"body":49937,"category":36569,"componentType":25883,"description":49944,"extension":191,"meta":50204,"navigation":194,"path":50205,"requiresChild":194,"seo":50206,"stem":50207,"__hash__":50208},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":49938,"toc":50200},[49939,49942,49945,49947,49949,49952,49954,50198],[11,49940,15466],{"id":49941},"glass",[15,49943,49944],{},"Optically realistic glass lens driven in a custom shape",[31911,49946],{"component":15466},[23,49948,31915],{"id":26533},[31917,49950],{":props":49951},"[{\"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,49953,31923],{"id":31922},[246,49955,49956,50001,50045,50089,50133],{":tabs":1557},[212,49957,49959],{"className":334,"code":49958,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,49960,49961,49969,49977,49985,49993],{"__ignoreMap":178},[220,49962,49963,49965,49967],{"class":222,"line":223},[220,49964,343],{"class":264},[220,49966,347],{"class":346},[220,49968,359],{"class":264},[220,49970,49971,49973,49975],{"class":222,"line":179},[220,49972,364],{"class":264},[220,49974,15466],{"class":346},[220,49976,359],{"class":264},[220,49978,49979,49981,49983],{"class":222,"line":389},[220,49980,2550],{"class":264},[220,49982,2553],{"class":346},[220,49984,386],{"class":264},[220,49986,49987,49989,49991],{"class":222,"line":399},[220,49988,2567],{"class":264},[220,49990,15466],{"class":346},[220,49992,359],{"class":264},[220,49994,49995,49997,49999],{"class":222,"line":644},[220,49996,402],{"class":264},[220,49998,347],{"class":346},[220,50000,359],{"class":264},[212,50002,50003],{"className":409,"code":49958,"language":411,"meta":178,"style":178},[99,50004,50005,50013,50021,50029,50037],{"__ignoreMap":178},[220,50006,50007,50009,50011],{"class":222,"line":223},[220,50008,343],{"class":264},[220,50010,347],{"class":420},[220,50012,359],{"class":264},[220,50014,50015,50017,50019],{"class":222,"line":179},[220,50016,364],{"class":264},[220,50018,15466],{"class":420},[220,50020,359],{"class":264},[220,50022,50023,50025,50027],{"class":222,"line":389},[220,50024,2550],{"class":264},[220,50026,2553],{"class":420},[220,50028,386],{"class":264},[220,50030,50031,50033,50035],{"class":222,"line":399},[220,50032,2567],{"class":264},[220,50034,15466],{"class":420},[220,50036,359],{"class":264},[220,50038,50039,50041,50043],{"class":222,"line":644},[220,50040,402],{"class":264},[220,50042,347],{"class":420},[220,50044,359],{"class":264},[212,50046,50047],{"className":2844,"code":49958,"language":2846,"meta":178,"style":178},[99,50048,50049,50057,50065,50073,50081],{"__ignoreMap":178},[220,50050,50051,50053,50055],{"class":222,"line":223},[220,50052,343],{"class":264},[220,50054,347],{"class":420},[220,50056,359],{"class":264},[220,50058,50059,50061,50063],{"class":222,"line":179},[220,50060,364],{"class":264},[220,50062,15466],{"class":420},[220,50064,359],{"class":264},[220,50066,50067,50069,50071],{"class":222,"line":389},[220,50068,2550],{"class":264},[220,50070,2553],{"class":420},[220,50072,386],{"class":264},[220,50074,50075,50077,50079],{"class":222,"line":399},[220,50076,2567],{"class":264},[220,50078,15466],{"class":420},[220,50080,359],{"class":264},[220,50082,50083,50085,50087],{"class":222,"line":644},[220,50084,402],{"class":264},[220,50086,347],{"class":420},[220,50088,359],{"class":264},[212,50090,50091],{"className":468,"code":49958,"language":469,"meta":178,"style":178},[99,50092,50093,50101,50109,50117,50125],{"__ignoreMap":178},[220,50094,50095,50097,50099],{"class":222,"line":223},[220,50096,343],{"class":264},[220,50098,347],{"class":420},[220,50100,359],{"class":264},[220,50102,50103,50105,50107],{"class":222,"line":179},[220,50104,364],{"class":264},[220,50106,15466],{"class":420},[220,50108,359],{"class":264},[220,50110,50111,50113,50115],{"class":222,"line":389},[220,50112,2550],{"class":264},[220,50114,2553],{"class":420},[220,50116,386],{"class":264},[220,50118,50119,50121,50123],{"class":222,"line":399},[220,50120,2567],{"class":264},[220,50122,15466],{"class":420},[220,50124,359],{"class":264},[220,50126,50127,50129,50131],{"class":222,"line":644},[220,50128,402],{"class":264},[220,50130,347],{"class":420},[220,50132,359],{"class":264},[212,50134,50136],{"className":251,"code":50135,"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,50137,50138,50148,50152,50166,50170,50178,50186,50190,50194],{"__ignoreMap":178},[220,50139,50140,50142,50144,50146],{"class":222,"line":223},[220,50141,261],{"class":260},[220,50143,11512],{"class":264},[220,50145,268],{"class":260},[220,50147,4007],{"class":230},[220,50149,50150],{"class":222,"line":179},[220,50151,647],{"emptyLinePlaceholder":194},[220,50153,50154,50156,50158,50160,50162,50164],{"class":222,"line":389},[220,50155,1735],{"class":260},[220,50157,1738],{"class":420},[220,50159,1741],{"class":260},[220,50161,1744],{"class":260},[220,50163,1747],{"class":226},[220,50165,1750],{"class":264},[220,50167,50168],{"class":222,"line":399},[220,50169,1765],{"class":264},[220,50171,50172,50174,50176],{"class":222,"line":644},[220,50173,1770],{"class":264},[220,50175,21533],{"class":230},[220,50177,7009],{"class":264},[220,50179,50180,50182,50184],{"class":222,"line":650},[220,50181,7014],{"class":264},[220,50183,3206],{"class":230},[220,50185,2465],{"class":264},[220,50187,50188],{"class":222,"line":656},[220,50189,7031],{"class":264},[220,50191,50192],{"class":222,"line":673},[220,50193,1787],{"class":264},[220,50195,50196],{"class":222,"line":682},[220,50197,1792],{"class":264},[1504,50199,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":50201},[50202,50203],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":15466,"description":49944},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":50210,"title":6225,"body":50211,"category":33396,"componentType":25883,"description":50218,"extension":191,"meta":50535,"navigation":194,"path":50536,"requiresChild":194,"seo":50537,"stem":50538,"__hash__":50539},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":50212,"toc":50531},[50213,50216,50219,50221,50223,50226,50228,50529],[11,50214,6225],{"id":50215},"glasstiles",[15,50217,50218],{},"Refraction-like distortion in a tile grid pattern",[31911,50220],{"component":6225},[23,50222,31915],{"id":26533},[31917,50224],{":props":50225},"[{\"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,50227,31923],{"id":31922},[246,50229,50230,50287,50346,50402,50460],{":tabs":1557},[212,50231,50233],{"className":334,"code":50232,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50234,50235,50243,50250,50259,50263,50271,50279],{"__ignoreMap":178},[220,50236,50237,50239,50241],{"class":222,"line":223},[220,50238,343],{"class":264},[220,50240,347],{"class":346},[220,50242,359],{"class":264},[220,50244,50245,50247],{"class":222,"line":179},[220,50246,364],{"class":264},[220,50248,50249],{"class":346},"GlassTiles\n",[220,50251,50252,50254,50256],{"class":222,"line":389},[220,50253,20371],{"class":226},[220,50255,353],{"class":264},[220,50257,50258],{"class":230},"\"2\"\n",[220,50260,50261],{"class":222,"line":399},[220,50262,31959],{"class":264},[220,50264,50265,50267,50269],{"class":222,"line":644},[220,50266,2550],{"class":264},[220,50268,2553],{"class":346},[220,50270,386],{"class":264},[220,50272,50273,50275,50277],{"class":222,"line":650},[220,50274,2567],{"class":264},[220,50276,6225],{"class":346},[220,50278,359],{"class":264},[220,50280,50281,50283,50285],{"class":222,"line":656},[220,50282,402],{"class":264},[220,50284,347],{"class":346},[220,50286,359],{"class":264},[212,50288,50290],{"className":409,"code":50289,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50291,50292,50300,50306,50318,50322,50330,50338],{"__ignoreMap":178},[220,50293,50294,50296,50298],{"class":222,"line":223},[220,50295,343],{"class":264},[220,50297,347],{"class":420},[220,50299,359],{"class":264},[220,50301,50302,50304],{"class":222,"line":179},[220,50303,364],{"class":264},[220,50305,50249],{"class":420},[220,50307,50308,50310,50312,50314,50316],{"class":222,"line":389},[220,50309,20482],{"class":226},[220,50311,353],{"class":260},[220,50313,743],{"class":264},[220,50315,7214],{"class":420},[220,50317,749],{"class":264},[220,50319,50320],{"class":222,"line":399},[220,50321,31959],{"class":264},[220,50323,50324,50326,50328],{"class":222,"line":644},[220,50325,2550],{"class":264},[220,50327,2553],{"class":420},[220,50329,386],{"class":264},[220,50331,50332,50334,50336],{"class":222,"line":650},[220,50333,2567],{"class":264},[220,50335,6225],{"class":420},[220,50337,359],{"class":264},[220,50339,50340,50342,50344],{"class":222,"line":656},[220,50341,402],{"class":264},[220,50343,347],{"class":420},[220,50345,359],{"class":264},[212,50347,50348],{"className":2844,"code":50289,"language":2846,"meta":178,"style":178},[99,50349,50350,50358,50364,50374,50378,50386,50394],{"__ignoreMap":178},[220,50351,50352,50354,50356],{"class":222,"line":223},[220,50353,343],{"class":264},[220,50355,347],{"class":420},[220,50357,359],{"class":264},[220,50359,50360,50362],{"class":222,"line":179},[220,50361,364],{"class":264},[220,50363,50249],{"class":420},[220,50365,50366,50368,50370,50372],{"class":222,"line":389},[220,50367,20482],{"class":226},[220,50369,29871],{"class":264},[220,50371,7214],{"class":420},[220,50373,749],{"class":264},[220,50375,50376],{"class":222,"line":399},[220,50377,31959],{"class":264},[220,50379,50380,50382,50384],{"class":222,"line":644},[220,50381,2550],{"class":264},[220,50383,2553],{"class":420},[220,50385,386],{"class":264},[220,50387,50388,50390,50392],{"class":222,"line":650},[220,50389,2567],{"class":264},[220,50391,6225],{"class":420},[220,50393,359],{"class":264},[220,50395,50396,50398,50400],{"class":222,"line":656},[220,50397,402],{"class":264},[220,50399,347],{"class":420},[220,50401,359],{"class":264},[212,50403,50404],{"className":468,"code":50289,"language":469,"meta":178,"style":178},[99,50405,50406,50414,50420,50432,50436,50444,50452],{"__ignoreMap":178},[220,50407,50408,50410,50412],{"class":222,"line":223},[220,50409,343],{"class":264},[220,50411,347],{"class":420},[220,50413,359],{"class":264},[220,50415,50416,50418],{"class":222,"line":179},[220,50417,364],{"class":264},[220,50419,50249],{"class":420},[220,50421,50422,50424,50426,50428,50430],{"class":222,"line":389},[220,50423,20482],{"class":226},[220,50425,353],{"class":260},[220,50427,743],{"class":264},[220,50429,7214],{"class":420},[220,50431,749],{"class":264},[220,50433,50434],{"class":222,"line":399},[220,50435,31959],{"class":264},[220,50437,50438,50440,50442],{"class":222,"line":644},[220,50439,2550],{"class":264},[220,50441,2553],{"class":420},[220,50443,386],{"class":264},[220,50445,50446,50448,50450],{"class":222,"line":650},[220,50447,2567],{"class":264},[220,50449,6225],{"class":420},[220,50451,359],{"class":264},[220,50453,50454,50456,50458],{"class":222,"line":656},[220,50455,402],{"class":264},[220,50457,347],{"class":420},[220,50459,359],{"class":264},[212,50461,50463],{"className":251,"code":50462,"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,50464,50465,50475,50479,50493,50497,50509,50517,50521,50525],{"__ignoreMap":178},[220,50466,50467,50469,50471,50473],{"class":222,"line":223},[220,50468,261],{"class":260},[220,50470,11512],{"class":264},[220,50472,268],{"class":260},[220,50474,4007],{"class":230},[220,50476,50477],{"class":222,"line":179},[220,50478,647],{"emptyLinePlaceholder":194},[220,50480,50481,50483,50485,50487,50489,50491],{"class":222,"line":389},[220,50482,1735],{"class":260},[220,50484,1738],{"class":420},[220,50486,1741],{"class":260},[220,50488,1744],{"class":260},[220,50490,1747],{"class":226},[220,50492,1750],{"class":264},[220,50494,50495],{"class":222,"line":399},[220,50496,1765],{"class":264},[220,50498,50499,50501,50503,50505,50507],{"class":222,"line":644},[220,50500,1770],{"class":264},[220,50502,6583],{"class":230},[220,50504,32203],{"class":264},[220,50506,7214],{"class":420},[220,50508,7546],{"class":264},[220,50510,50511,50513,50515],{"class":222,"line":650},[220,50512,7014],{"class":264},[220,50514,3206],{"class":230},[220,50516,2465],{"class":264},[220,50518,50519],{"class":222,"line":656},[220,50520,7031],{"class":264},[220,50522,50523],{"class":222,"line":673},[220,50524,1787],{"class":264},[220,50526,50527],{"class":222,"line":682},[220,50528,1792],{"class":264},[1504,50530,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50532},[50533,50534],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":6225,"description":50218},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":50541,"title":50542,"body":50543,"category":32806,"componentType":25883,"description":50550,"extension":191,"meta":50867,"navigation":194,"path":50868,"requiresChild":194,"seo":50869,"stem":50870,"__hash__":50871},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":50544,"toc":50863},[50545,50548,50551,50553,50555,50558,50560,50861],[11,50546,50542],{"id":50547},"glitch",[15,50549,50550],{},"Digital glitch that melts pixels and distorts colors",[31911,50552],{"component":50542},[23,50554,31915],{"id":26533},[31917,50556],{":props":50557},"[{\"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,50559,31923],{"id":31922},[246,50561,50562,50618,50677,50733,50791],{":tabs":1557},[212,50563,50565],{"className":334,"code":50564,"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,50566,50567,50575,50582,50590,50594,50602,50610],{"__ignoreMap":178},[220,50568,50569,50571,50573],{"class":222,"line":223},[220,50570,343],{"class":264},[220,50572,347],{"class":346},[220,50574,359],{"class":264},[220,50576,50577,50579],{"class":222,"line":179},[220,50578,364],{"class":264},[220,50580,50581],{"class":346},"Glitch\n",[220,50583,50584,50586,50588],{"class":222,"line":389},[220,50585,20371],{"class":226},[220,50587,353],{"class":264},[220,50589,42158],{"class":230},[220,50591,50592],{"class":222,"line":399},[220,50593,31959],{"class":264},[220,50595,50596,50598,50600],{"class":222,"line":644},[220,50597,2550],{"class":264},[220,50599,2553],{"class":346},[220,50601,386],{"class":264},[220,50603,50604,50606,50608],{"class":222,"line":650},[220,50605,2567],{"class":264},[220,50607,50542],{"class":346},[220,50609,359],{"class":264},[220,50611,50612,50614,50616],{"class":222,"line":656},[220,50613,402],{"class":264},[220,50615,347],{"class":346},[220,50617,359],{"class":264},[212,50619,50621],{"className":409,"code":50620,"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,50622,50623,50631,50637,50649,50653,50661,50669],{"__ignoreMap":178},[220,50624,50625,50627,50629],{"class":222,"line":223},[220,50626,343],{"class":264},[220,50628,347],{"class":420},[220,50630,359],{"class":264},[220,50632,50633,50635],{"class":222,"line":179},[220,50634,364],{"class":264},[220,50636,50581],{"class":420},[220,50638,50639,50641,50643,50645,50647],{"class":222,"line":389},[220,50640,20482],{"class":226},[220,50642,353],{"class":260},[220,50644,743],{"class":264},[220,50646,7754],{"class":420},[220,50648,749],{"class":264},[220,50650,50651],{"class":222,"line":399},[220,50652,31959],{"class":264},[220,50654,50655,50657,50659],{"class":222,"line":644},[220,50656,2550],{"class":264},[220,50658,2553],{"class":420},[220,50660,386],{"class":264},[220,50662,50663,50665,50667],{"class":222,"line":650},[220,50664,2567],{"class":264},[220,50666,50542],{"class":420},[220,50668,359],{"class":264},[220,50670,50671,50673,50675],{"class":222,"line":656},[220,50672,402],{"class":264},[220,50674,347],{"class":420},[220,50676,359],{"class":264},[212,50678,50679],{"className":2844,"code":50620,"language":2846,"meta":178,"style":178},[99,50680,50681,50689,50695,50705,50709,50717,50725],{"__ignoreMap":178},[220,50682,50683,50685,50687],{"class":222,"line":223},[220,50684,343],{"class":264},[220,50686,347],{"class":420},[220,50688,359],{"class":264},[220,50690,50691,50693],{"class":222,"line":179},[220,50692,364],{"class":264},[220,50694,50581],{"class":420},[220,50696,50697,50699,50701,50703],{"class":222,"line":389},[220,50698,20482],{"class":226},[220,50700,29871],{"class":264},[220,50702,7754],{"class":420},[220,50704,749],{"class":264},[220,50706,50707],{"class":222,"line":399},[220,50708,31959],{"class":264},[220,50710,50711,50713,50715],{"class":222,"line":644},[220,50712,2550],{"class":264},[220,50714,2553],{"class":420},[220,50716,386],{"class":264},[220,50718,50719,50721,50723],{"class":222,"line":650},[220,50720,2567],{"class":264},[220,50722,50542],{"class":420},[220,50724,359],{"class":264},[220,50726,50727,50729,50731],{"class":222,"line":656},[220,50728,402],{"class":264},[220,50730,347],{"class":420},[220,50732,359],{"class":264},[212,50734,50735],{"className":468,"code":50620,"language":469,"meta":178,"style":178},[99,50736,50737,50745,50751,50763,50767,50775,50783],{"__ignoreMap":178},[220,50738,50739,50741,50743],{"class":222,"line":223},[220,50740,343],{"class":264},[220,50742,347],{"class":420},[220,50744,359],{"class":264},[220,50746,50747,50749],{"class":222,"line":179},[220,50748,364],{"class":264},[220,50750,50581],{"class":420},[220,50752,50753,50755,50757,50759,50761],{"class":222,"line":389},[220,50754,20482],{"class":226},[220,50756,353],{"class":260},[220,50758,743],{"class":264},[220,50760,7754],{"class":420},[220,50762,749],{"class":264},[220,50764,50765],{"class":222,"line":399},[220,50766,31959],{"class":264},[220,50768,50769,50771,50773],{"class":222,"line":644},[220,50770,2550],{"class":264},[220,50772,2553],{"class":420},[220,50774,386],{"class":264},[220,50776,50777,50779,50781],{"class":222,"line":650},[220,50778,2567],{"class":264},[220,50780,50542],{"class":420},[220,50782,359],{"class":264},[220,50784,50785,50787,50789],{"class":222,"line":656},[220,50786,402],{"class":264},[220,50788,347],{"class":420},[220,50790,359],{"class":264},[212,50792,50794],{"className":251,"code":50793,"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,50795,50796,50806,50810,50824,50828,50841,50849,50853,50857],{"__ignoreMap":178},[220,50797,50798,50800,50802,50804],{"class":222,"line":223},[220,50799,261],{"class":260},[220,50801,11512],{"class":264},[220,50803,268],{"class":260},[220,50805,4007],{"class":230},[220,50807,50808],{"class":222,"line":179},[220,50809,647],{"emptyLinePlaceholder":194},[220,50811,50812,50814,50816,50818,50820,50822],{"class":222,"line":389},[220,50813,1735],{"class":260},[220,50815,1738],{"class":420},[220,50817,1741],{"class":260},[220,50819,1744],{"class":260},[220,50821,1747],{"class":226},[220,50823,1750],{"class":264},[220,50825,50826],{"class":222,"line":399},[220,50827,1765],{"class":264},[220,50829,50830,50832,50835,50837,50839],{"class":222,"line":644},[220,50831,1770],{"class":264},[220,50833,50834],{"class":230},"'Glitch'",[220,50836,32203],{"class":264},[220,50838,7754],{"class":420},[220,50840,7546],{"class":264},[220,50842,50843,50845,50847],{"class":222,"line":650},[220,50844,7014],{"class":264},[220,50846,3206],{"class":230},[220,50848,2465],{"class":264},[220,50850,50851],{"class":222,"line":656},[220,50852,7031],{"class":264},[220,50854,50855],{"class":222,"line":673},[220,50856,1787],{"class":264},[220,50858,50859],{"class":222,"line":682},[220,50860,1792],{"class":264},[1504,50862,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50864},[50865,50866],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":50542,"description":50550},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":50873,"title":11792,"body":50874,"category":32806,"componentType":25883,"description":50881,"extension":191,"meta":51198,"navigation":194,"path":51199,"requiresChild":194,"seo":51200,"stem":51201,"__hash__":51202},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":50875,"toc":51194},[50876,50879,50882,50884,50886,50889,50891,51192],[11,50877,11792],{"id":50878},"glow",[15,50880,50881],{},"Soft glow effect with adjustable intensity",[31911,50883],{"component":11792},[23,50885,31915],{"id":26533},[31917,50887],{":props":50888},"[{\"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,50890,31923],{"id":31922},[246,50892,50893,50949,51008,51064,51122],{":tabs":1557},[212,50894,50896],{"className":334,"code":50895,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50897,50898,50906,50913,50921,50925,50933,50941],{"__ignoreMap":178},[220,50899,50900,50902,50904],{"class":222,"line":223},[220,50901,343],{"class":264},[220,50903,347],{"class":346},[220,50905,359],{"class":264},[220,50907,50908,50910],{"class":222,"line":179},[220,50909,364],{"class":264},[220,50911,50912],{"class":346},"Glow\n",[220,50914,50915,50917,50919],{"class":222,"line":389},[220,50916,20371],{"class":226},[220,50918,353],{"class":264},[220,50920,36625],{"class":230},[220,50922,50923],{"class":222,"line":399},[220,50924,31959],{"class":264},[220,50926,50927,50929,50931],{"class":222,"line":644},[220,50928,2550],{"class":264},[220,50930,2553],{"class":346},[220,50932,386],{"class":264},[220,50934,50935,50937,50939],{"class":222,"line":650},[220,50936,2567],{"class":264},[220,50938,11792],{"class":346},[220,50940,359],{"class":264},[220,50942,50943,50945,50947],{"class":222,"line":656},[220,50944,402],{"class":264},[220,50946,347],{"class":346},[220,50948,359],{"class":264},[212,50950,50952],{"className":409,"code":50951,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50953,50954,50962,50968,50980,50984,50992,51000],{"__ignoreMap":178},[220,50955,50956,50958,50960],{"class":222,"line":223},[220,50957,343],{"class":264},[220,50959,347],{"class":420},[220,50961,359],{"class":264},[220,50963,50964,50966],{"class":222,"line":179},[220,50965,364],{"class":264},[220,50967,50912],{"class":420},[220,50969,50970,50972,50974,50976,50978],{"class":222,"line":389},[220,50971,20482],{"class":226},[220,50973,353],{"class":260},[220,50975,743],{"class":264},[220,50977,8677],{"class":420},[220,50979,749],{"class":264},[220,50981,50982],{"class":222,"line":399},[220,50983,31959],{"class":264},[220,50985,50986,50988,50990],{"class":222,"line":644},[220,50987,2550],{"class":264},[220,50989,2553],{"class":420},[220,50991,386],{"class":264},[220,50993,50994,50996,50998],{"class":222,"line":650},[220,50995,2567],{"class":264},[220,50997,11792],{"class":420},[220,50999,359],{"class":264},[220,51001,51002,51004,51006],{"class":222,"line":656},[220,51003,402],{"class":264},[220,51005,347],{"class":420},[220,51007,359],{"class":264},[212,51009,51010],{"className":2844,"code":50951,"language":2846,"meta":178,"style":178},[99,51011,51012,51020,51026,51036,51040,51048,51056],{"__ignoreMap":178},[220,51013,51014,51016,51018],{"class":222,"line":223},[220,51015,343],{"class":264},[220,51017,347],{"class":420},[220,51019,359],{"class":264},[220,51021,51022,51024],{"class":222,"line":179},[220,51023,364],{"class":264},[220,51025,50912],{"class":420},[220,51027,51028,51030,51032,51034],{"class":222,"line":389},[220,51029,20482],{"class":226},[220,51031,29871],{"class":264},[220,51033,8677],{"class":420},[220,51035,749],{"class":264},[220,51037,51038],{"class":222,"line":399},[220,51039,31959],{"class":264},[220,51041,51042,51044,51046],{"class":222,"line":644},[220,51043,2550],{"class":264},[220,51045,2553],{"class":420},[220,51047,386],{"class":264},[220,51049,51050,51052,51054],{"class":222,"line":650},[220,51051,2567],{"class":264},[220,51053,11792],{"class":420},[220,51055,359],{"class":264},[220,51057,51058,51060,51062],{"class":222,"line":656},[220,51059,402],{"class":264},[220,51061,347],{"class":420},[220,51063,359],{"class":264},[212,51065,51066],{"className":468,"code":50951,"language":469,"meta":178,"style":178},[99,51067,51068,51076,51082,51094,51098,51106,51114],{"__ignoreMap":178},[220,51069,51070,51072,51074],{"class":222,"line":223},[220,51071,343],{"class":264},[220,51073,347],{"class":420},[220,51075,359],{"class":264},[220,51077,51078,51080],{"class":222,"line":179},[220,51079,364],{"class":264},[220,51081,50912],{"class":420},[220,51083,51084,51086,51088,51090,51092],{"class":222,"line":389},[220,51085,20482],{"class":226},[220,51087,353],{"class":260},[220,51089,743],{"class":264},[220,51091,8677],{"class":420},[220,51093,749],{"class":264},[220,51095,51096],{"class":222,"line":399},[220,51097,31959],{"class":264},[220,51099,51100,51102,51104],{"class":222,"line":644},[220,51101,2550],{"class":264},[220,51103,2553],{"class":420},[220,51105,386],{"class":264},[220,51107,51108,51110,51112],{"class":222,"line":650},[220,51109,2567],{"class":264},[220,51111,11792],{"class":420},[220,51113,359],{"class":264},[220,51115,51116,51118,51120],{"class":222,"line":656},[220,51117,402],{"class":264},[220,51119,347],{"class":420},[220,51121,359],{"class":264},[212,51123,51125],{"className":251,"code":51124,"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,51126,51127,51137,51141,51155,51159,51172,51180,51184,51188],{"__ignoreMap":178},[220,51128,51129,51131,51133,51135],{"class":222,"line":223},[220,51130,261],{"class":260},[220,51132,11512],{"class":264},[220,51134,268],{"class":260},[220,51136,4007],{"class":230},[220,51138,51139],{"class":222,"line":179},[220,51140,647],{"emptyLinePlaceholder":194},[220,51142,51143,51145,51147,51149,51151,51153],{"class":222,"line":389},[220,51144,1735],{"class":260},[220,51146,1738],{"class":420},[220,51148,1741],{"class":260},[220,51150,1744],{"class":260},[220,51152,1747],{"class":226},[220,51154,1750],{"class":264},[220,51156,51157],{"class":222,"line":399},[220,51158,1765],{"class":264},[220,51160,51161,51163,51166,51168,51170],{"class":222,"line":644},[220,51162,1770],{"class":264},[220,51164,51165],{"class":230},"'Glow'",[220,51167,32203],{"class":264},[220,51169,8677],{"class":420},[220,51171,7546],{"class":264},[220,51173,51174,51176,51178],{"class":222,"line":650},[220,51175,7014],{"class":264},[220,51177,3206],{"class":230},[220,51179,2465],{"class":264},[220,51181,51182],{"class":222,"line":656},[220,51183,7031],{"class":264},[220,51185,51186],{"class":222,"line":673},[220,51187,1787],{"class":264},[220,51189,51190],{"class":222,"line":682},[220,51191,1792],{"class":264},[1504,51193,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51195},[51196,51197],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":11792,"description":50881},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":51204,"title":51205,"body":51206,"category":33063,"componentType":25877,"description":51213,"extension":191,"meta":51454,"navigation":194,"path":51455,"requiresChild":32530,"seo":51456,"stem":51457,"__hash__":51458},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":51207,"toc":51450},[51208,51211,51214,51216,51218,51221,51223,51448],[11,51209,51205],{"id":51210},"godrays",[15,51212,51213],{},"Volumetric light rays emanating from a point",[31911,51215],{"component":51205},[23,51217,31915],{"id":26533},[31917,51219],{":props":51220},"[{\"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,51222,31923],{"id":31922},[246,51224,51225,51265,51308,51348,51390],{":tabs":1557},[212,51226,51228],{"className":334,"code":51227,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,51229,51230,51238,51245,51253,51257],{"__ignoreMap":178},[220,51231,51232,51234,51236],{"class":222,"line":223},[220,51233,343],{"class":264},[220,51235,347],{"class":346},[220,51237,359],{"class":264},[220,51239,51240,51242],{"class":222,"line":179},[220,51241,364],{"class":264},[220,51243,51244],{"class":346},"Godrays\n",[220,51246,51247,51249,51251],{"class":222,"line":389},[220,51248,20371],{"class":226},[220,51250,353],{"class":264},[220,51252,9650],{"class":230},[220,51254,51255],{"class":222,"line":399},[220,51256,1234],{"class":264},[220,51258,51259,51261,51263],{"class":222,"line":644},[220,51260,402],{"class":264},[220,51262,347],{"class":346},[220,51264,359],{"class":264},[212,51266,51268],{"className":409,"code":51267,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,51269,51270,51278,51284,51296,51300],{"__ignoreMap":178},[220,51271,51272,51274,51276],{"class":222,"line":223},[220,51273,343],{"class":264},[220,51275,347],{"class":420},[220,51277,359],{"class":264},[220,51279,51280,51282],{"class":222,"line":179},[220,51281,364],{"class":264},[220,51283,51244],{"class":420},[220,51285,51286,51288,51290,51292,51294],{"class":222,"line":389},[220,51287,20482],{"class":226},[220,51289,353],{"class":260},[220,51291,743],{"class":264},[220,51293,6299],{"class":420},[220,51295,749],{"class":264},[220,51297,51298],{"class":222,"line":399},[220,51299,1234],{"class":264},[220,51301,51302,51304,51306],{"class":222,"line":644},[220,51303,402],{"class":264},[220,51305,347],{"class":420},[220,51307,359],{"class":264},[212,51309,51310],{"className":2844,"code":51267,"language":2846,"meta":178,"style":178},[99,51311,51312,51320,51326,51336,51340],{"__ignoreMap":178},[220,51313,51314,51316,51318],{"class":222,"line":223},[220,51315,343],{"class":264},[220,51317,347],{"class":420},[220,51319,359],{"class":264},[220,51321,51322,51324],{"class":222,"line":179},[220,51323,364],{"class":264},[220,51325,51244],{"class":420},[220,51327,51328,51330,51332,51334],{"class":222,"line":389},[220,51329,20482],{"class":226},[220,51331,29871],{"class":264},[220,51333,6299],{"class":420},[220,51335,749],{"class":264},[220,51337,51338],{"class":222,"line":399},[220,51339,1234],{"class":264},[220,51341,51342,51344,51346],{"class":222,"line":644},[220,51343,402],{"class":264},[220,51345,347],{"class":420},[220,51347,359],{"class":264},[212,51349,51350],{"className":468,"code":51267,"language":469,"meta":178,"style":178},[99,51351,51352,51360,51366,51378,51382],{"__ignoreMap":178},[220,51353,51354,51356,51358],{"class":222,"line":223},[220,51355,343],{"class":264},[220,51357,347],{"class":420},[220,51359,359],{"class":264},[220,51361,51362,51364],{"class":222,"line":179},[220,51363,364],{"class":264},[220,51365,51244],{"class":420},[220,51367,51368,51370,51372,51374,51376],{"class":222,"line":389},[220,51369,20482],{"class":226},[220,51371,353],{"class":260},[220,51373,743],{"class":264},[220,51375,6299],{"class":420},[220,51377,749],{"class":264},[220,51379,51380],{"class":222,"line":399},[220,51381,1234],{"class":264},[220,51383,51384,51386,51388],{"class":222,"line":644},[220,51385,402],{"class":264},[220,51387,347],{"class":420},[220,51389,359],{"class":264},[212,51391,51393],{"className":251,"code":51392,"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,51394,51395,51405,51409,51423,51427,51440,51444],{"__ignoreMap":178},[220,51396,51397,51399,51401,51403],{"class":222,"line":223},[220,51398,261],{"class":260},[220,51400,11512],{"class":264},[220,51402,268],{"class":260},[220,51404,4007],{"class":230},[220,51406,51407],{"class":222,"line":179},[220,51408,647],{"emptyLinePlaceholder":194},[220,51410,51411,51413,51415,51417,51419,51421],{"class":222,"line":389},[220,51412,1735],{"class":260},[220,51414,1738],{"class":420},[220,51416,1741],{"class":260},[220,51418,1744],{"class":260},[220,51420,1747],{"class":226},[220,51422,1750],{"class":264},[220,51424,51425],{"class":222,"line":399},[220,51426,1765],{"class":264},[220,51428,51429,51431,51434,51436,51438],{"class":222,"line":644},[220,51430,1770],{"class":264},[220,51432,51433],{"class":230},"'Godrays'",[220,51435,32203],{"class":264},[220,51437,6299],{"class":420},[220,51439,1782],{"class":264},[220,51441,51442],{"class":222,"line":650},[220,51443,1787],{"class":264},[220,51445,51446],{"class":222,"line":656},[220,51447,1792],{"class":264},[1504,51449,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51451},[51452,51453],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":51205,"description":51213},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":51460,"title":51461,"body":51462,"category":36569,"componentType":25877,"description":51469,"extension":191,"meta":51654,"navigation":194,"path":51655,"requiresChild":32530,"seo":51656,"stem":51657,"__hash__":51658},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":51463,"toc":51650},[51464,51467,51470,51472,51474,51477,51479,51648],[11,51465,51461],{"id":51466},"goo",[15,51468,51469],{},"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,51471],{"component":51461},[23,51473,31915],{"id":26533},[31917,51475],{":props":51476},"[{\"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,51478,31923],{"id":31922},[246,51480,51481,51510,51538,51566,51594],{":tabs":1557},[212,51482,51484],{"className":334,"code":51483,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,51485,51486,51494,51502],{"__ignoreMap":178},[220,51487,51488,51490,51492],{"class":222,"line":223},[220,51489,343],{"class":264},[220,51491,347],{"class":346},[220,51493,359],{"class":264},[220,51495,51496,51498,51500],{"class":222,"line":179},[220,51497,364],{"class":264},[220,51499,51461],{"class":346},[220,51501,386],{"class":264},[220,51503,51504,51506,51508],{"class":222,"line":389},[220,51505,402],{"class":264},[220,51507,347],{"class":346},[220,51509,359],{"class":264},[212,51511,51512],{"className":409,"code":51483,"language":411,"meta":178,"style":178},[99,51513,51514,51522,51530],{"__ignoreMap":178},[220,51515,51516,51518,51520],{"class":222,"line":223},[220,51517,343],{"class":264},[220,51519,347],{"class":420},[220,51521,359],{"class":264},[220,51523,51524,51526,51528],{"class":222,"line":179},[220,51525,364],{"class":264},[220,51527,51461],{"class":420},[220,51529,386],{"class":264},[220,51531,51532,51534,51536],{"class":222,"line":389},[220,51533,402],{"class":264},[220,51535,347],{"class":420},[220,51537,359],{"class":264},[212,51539,51540],{"className":2844,"code":51483,"language":2846,"meta":178,"style":178},[99,51541,51542,51550,51558],{"__ignoreMap":178},[220,51543,51544,51546,51548],{"class":222,"line":223},[220,51545,343],{"class":264},[220,51547,347],{"class":420},[220,51549,359],{"class":264},[220,51551,51552,51554,51556],{"class":222,"line":179},[220,51553,364],{"class":264},[220,51555,51461],{"class":420},[220,51557,386],{"class":264},[220,51559,51560,51562,51564],{"class":222,"line":389},[220,51561,402],{"class":264},[220,51563,347],{"class":420},[220,51565,359],{"class":264},[212,51567,51568],{"className":468,"code":51483,"language":469,"meta":178,"style":178},[99,51569,51570,51578,51586],{"__ignoreMap":178},[220,51571,51572,51574,51576],{"class":222,"line":223},[220,51573,343],{"class":264},[220,51575,347],{"class":420},[220,51577,359],{"class":264},[220,51579,51580,51582,51584],{"class":222,"line":179},[220,51581,364],{"class":264},[220,51583,51461],{"class":420},[220,51585,386],{"class":264},[220,51587,51588,51590,51592],{"class":222,"line":389},[220,51589,402],{"class":264},[220,51591,347],{"class":420},[220,51593,359],{"class":264},[212,51595,51597],{"className":251,"code":51596,"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,51598,51599,51609,51613,51627,51631,51640,51644],{"__ignoreMap":178},[220,51600,51601,51603,51605,51607],{"class":222,"line":223},[220,51602,261],{"class":260},[220,51604,11512],{"class":264},[220,51606,268],{"class":260},[220,51608,4007],{"class":230},[220,51610,51611],{"class":222,"line":179},[220,51612,647],{"emptyLinePlaceholder":194},[220,51614,51615,51617,51619,51621,51623,51625],{"class":222,"line":389},[220,51616,1735],{"class":260},[220,51618,1738],{"class":420},[220,51620,1741],{"class":260},[220,51622,1744],{"class":260},[220,51624,1747],{"class":226},[220,51626,1750],{"class":264},[220,51628,51629],{"class":222,"line":399},[220,51630,1765],{"class":264},[220,51632,51633,51635,51638],{"class":222,"line":644},[220,51634,1770],{"class":264},[220,51636,51637],{"class":230},"'Goo'",[220,51639,2465],{"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,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":51651},[51652,51653],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":51461,"description":51469},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":51660,"title":51661,"body":51662,"category":32806,"componentType":25883,"description":51669,"extension":191,"meta":51930,"navigation":194,"path":51931,"requiresChild":194,"seo":51932,"stem":51933,"__hash__":51934},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":51663,"toc":51926},[51664,51667,51670,51672,51674,51677,51679,51924],[11,51665,51661],{"id":51666},"gradientmap",[15,51668,51669],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[31911,51671],{"component":51661},[23,51673,31915],{"id":26533},[31917,51675],{":props":51676},"[{\"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,51678,31923],{"id":31922},[246,51680,51681,51726,51770,51814,51858],{":tabs":1557},[212,51682,51684],{"className":334,"code":51683,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,51685,51686,51694,51702,51710,51718],{"__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,359],{"class":264},[220,51703,51704,51706,51708],{"class":222,"line":389},[220,51705,2550],{"class":264},[220,51707,2553],{"class":346},[220,51709,386],{"class":264},[220,51711,51712,51714,51716],{"class":222,"line":399},[220,51713,2567],{"class":264},[220,51715,51661],{"class":346},[220,51717,359],{"class":264},[220,51719,51720,51722,51724],{"class":222,"line":644},[220,51721,402],{"class":264},[220,51723,347],{"class":346},[220,51725,359],{"class":264},[212,51727,51728],{"className":409,"code":51683,"language":411,"meta":178,"style":178},[99,51729,51730,51738,51746,51754,51762],{"__ignoreMap":178},[220,51731,51732,51734,51736],{"class":222,"line":223},[220,51733,343],{"class":264},[220,51735,347],{"class":420},[220,51737,359],{"class":264},[220,51739,51740,51742,51744],{"class":222,"line":179},[220,51741,364],{"class":264},[220,51743,51661],{"class":420},[220,51745,359],{"class":264},[220,51747,51748,51750,51752],{"class":222,"line":389},[220,51749,2550],{"class":264},[220,51751,2553],{"class":420},[220,51753,386],{"class":264},[220,51755,51756,51758,51760],{"class":222,"line":399},[220,51757,2567],{"class":264},[220,51759,51661],{"class":420},[220,51761,359],{"class":264},[220,51763,51764,51766,51768],{"class":222,"line":644},[220,51765,402],{"class":264},[220,51767,347],{"class":420},[220,51769,359],{"class":264},[212,51771,51772],{"className":2844,"code":51683,"language":2846,"meta":178,"style":178},[99,51773,51774,51782,51790,51798,51806],{"__ignoreMap":178},[220,51775,51776,51778,51780],{"class":222,"line":223},[220,51777,343],{"class":264},[220,51779,347],{"class":420},[220,51781,359],{"class":264},[220,51783,51784,51786,51788],{"class":222,"line":179},[220,51785,364],{"class":264},[220,51787,51661],{"class":420},[220,51789,359],{"class":264},[220,51791,51792,51794,51796],{"class":222,"line":389},[220,51793,2550],{"class":264},[220,51795,2553],{"class":420},[220,51797,386],{"class":264},[220,51799,51800,51802,51804],{"class":222,"line":399},[220,51801,2567],{"class":264},[220,51803,51661],{"class":420},[220,51805,359],{"class":264},[220,51807,51808,51810,51812],{"class":222,"line":644},[220,51809,402],{"class":264},[220,51811,347],{"class":420},[220,51813,359],{"class":264},[212,51815,51816],{"className":468,"code":51683,"language":469,"meta":178,"style":178},[99,51817,51818,51826,51834,51842,51850],{"__ignoreMap":178},[220,51819,51820,51822,51824],{"class":222,"line":223},[220,51821,343],{"class":264},[220,51823,347],{"class":420},[220,51825,359],{"class":264},[220,51827,51828,51830,51832],{"class":222,"line":179},[220,51829,364],{"class":264},[220,51831,51661],{"class":420},[220,51833,359],{"class":264},[220,51835,51836,51838,51840],{"class":222,"line":389},[220,51837,2550],{"class":264},[220,51839,2553],{"class":420},[220,51841,386],{"class":264},[220,51843,51844,51846,51848],{"class":222,"line":399},[220,51845,2567],{"class":264},[220,51847,51661],{"class":420},[220,51849,359],{"class":264},[220,51851,51852,51854,51856],{"class":222,"line":644},[220,51853,402],{"class":264},[220,51855,347],{"class":420},[220,51857,359],{"class":264},[212,51859,51861],{"className":251,"code":51860,"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,51862,51863,51873,51877,51891,51895,51904,51912,51916,51920],{"__ignoreMap":178},[220,51864,51865,51867,51869,51871],{"class":222,"line":223},[220,51866,261],{"class":260},[220,51868,11512],{"class":264},[220,51870,268],{"class":260},[220,51872,4007],{"class":230},[220,51874,51875],{"class":222,"line":179},[220,51876,647],{"emptyLinePlaceholder":194},[220,51878,51879,51881,51883,51885,51887,51889],{"class":222,"line":389},[220,51880,1735],{"class":260},[220,51882,1738],{"class":420},[220,51884,1741],{"class":260},[220,51886,1744],{"class":260},[220,51888,1747],{"class":226},[220,51890,1750],{"class":264},[220,51892,51893],{"class":222,"line":399},[220,51894,1765],{"class":264},[220,51896,51897,51899,51902],{"class":222,"line":644},[220,51898,1770],{"class":264},[220,51900,51901],{"class":230},"'GradientMap'",[220,51903,7009],{"class":264},[220,51905,51906,51908,51910],{"class":222,"line":650},[220,51907,7014],{"class":264},[220,51909,3206],{"class":230},[220,51911,2465],{"class":264},[220,51913,51914],{"class":222,"line":656},[220,51915,7031],{"class":264},[220,51917,51918],{"class":222,"line":673},[220,51919,1787],{"class":264},[220,51921,51922],{"class":222,"line":682},[220,51923,1792],{"class":264},[1504,51925,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":51927},[51928,51929],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":51661,"description":51669},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":51936,"title":51937,"body":51938,"category":36368,"componentType":25883,"description":51945,"extension":191,"meta":52200,"navigation":194,"path":52201,"requiresChild":194,"seo":52202,"stem":52203,"__hash__":52204},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":51939,"toc":52197},[51940,51943,51946,51948,51950,52195],[11,51941,51937],{"id":51942},"grayscale",[15,51944,51945],{},"Convert colors to black and white",[31911,51947],{"component":51937},[23,51949,31923],{"id":31922},[246,51951,51952,51997,52041,52085,52129],{":tabs":1557},[212,51953,51955],{"className":334,"code":51954,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[99,51956,51957,51965,51973,51981,51989],{"__ignoreMap":178},[220,51958,51959,51961,51963],{"class":222,"line":223},[220,51960,343],{"class":264},[220,51962,347],{"class":346},[220,51964,359],{"class":264},[220,51966,51967,51969,51971],{"class":222,"line":179},[220,51968,364],{"class":264},[220,51970,51937],{"class":346},[220,51972,359],{"class":264},[220,51974,51975,51977,51979],{"class":222,"line":389},[220,51976,2550],{"class":264},[220,51978,2553],{"class":346},[220,51980,386],{"class":264},[220,51982,51983,51985,51987],{"class":222,"line":399},[220,51984,2567],{"class":264},[220,51986,51937],{"class":346},[220,51988,359],{"class":264},[220,51990,51991,51993,51995],{"class":222,"line":644},[220,51992,402],{"class":264},[220,51994,347],{"class":346},[220,51996,359],{"class":264},[212,51998,51999],{"className":409,"code":51954,"language":411,"meta":178,"style":178},[99,52000,52001,52009,52017,52025,52033],{"__ignoreMap":178},[220,52002,52003,52005,52007],{"class":222,"line":223},[220,52004,343],{"class":264},[220,52006,347],{"class":420},[220,52008,359],{"class":264},[220,52010,52011,52013,52015],{"class":222,"line":179},[220,52012,364],{"class":264},[220,52014,51937],{"class":420},[220,52016,359],{"class":264},[220,52018,52019,52021,52023],{"class":222,"line":389},[220,52020,2550],{"class":264},[220,52022,2553],{"class":420},[220,52024,386],{"class":264},[220,52026,52027,52029,52031],{"class":222,"line":399},[220,52028,2567],{"class":264},[220,52030,51937],{"class":420},[220,52032,359],{"class":264},[220,52034,52035,52037,52039],{"class":222,"line":644},[220,52036,402],{"class":264},[220,52038,347],{"class":420},[220,52040,359],{"class":264},[212,52042,52043],{"className":2844,"code":51954,"language":2846,"meta":178,"style":178},[99,52044,52045,52053,52061,52069,52077],{"__ignoreMap":178},[220,52046,52047,52049,52051],{"class":222,"line":223},[220,52048,343],{"class":264},[220,52050,347],{"class":420},[220,52052,359],{"class":264},[220,52054,52055,52057,52059],{"class":222,"line":179},[220,52056,364],{"class":264},[220,52058,51937],{"class":420},[220,52060,359],{"class":264},[220,52062,52063,52065,52067],{"class":222,"line":389},[220,52064,2550],{"class":264},[220,52066,2553],{"class":420},[220,52068,386],{"class":264},[220,52070,52071,52073,52075],{"class":222,"line":399},[220,52072,2567],{"class":264},[220,52074,51937],{"class":420},[220,52076,359],{"class":264},[220,52078,52079,52081,52083],{"class":222,"line":644},[220,52080,402],{"class":264},[220,52082,347],{"class":420},[220,52084,359],{"class":264},[212,52086,52087],{"className":468,"code":51954,"language":469,"meta":178,"style":178},[99,52088,52089,52097,52105,52113,52121],{"__ignoreMap":178},[220,52090,52091,52093,52095],{"class":222,"line":223},[220,52092,343],{"class":264},[220,52094,347],{"class":420},[220,52096,359],{"class":264},[220,52098,52099,52101,52103],{"class":222,"line":179},[220,52100,364],{"class":264},[220,52102,51937],{"class":420},[220,52104,359],{"class":264},[220,52106,52107,52109,52111],{"class":222,"line":389},[220,52108,2550],{"class":264},[220,52110,2553],{"class":420},[220,52112,386],{"class":264},[220,52114,52115,52117,52119],{"class":222,"line":399},[220,52116,2567],{"class":264},[220,52118,51937],{"class":420},[220,52120,359],{"class":264},[220,52122,52123,52125,52127],{"class":222,"line":644},[220,52124,402],{"class":264},[220,52126,347],{"class":420},[220,52128,359],{"class":264},[212,52130,52132],{"className":251,"code":52131,"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,52133,52134,52144,52148,52162,52166,52175,52183,52187,52191],{"__ignoreMap":178},[220,52135,52136,52138,52140,52142],{"class":222,"line":223},[220,52137,261],{"class":260},[220,52139,11512],{"class":264},[220,52141,268],{"class":260},[220,52143,4007],{"class":230},[220,52145,52146],{"class":222,"line":179},[220,52147,647],{"emptyLinePlaceholder":194},[220,52149,52150,52152,52154,52156,52158,52160],{"class":222,"line":389},[220,52151,1735],{"class":260},[220,52153,1738],{"class":420},[220,52155,1741],{"class":260},[220,52157,1744],{"class":260},[220,52159,1747],{"class":226},[220,52161,1750],{"class":264},[220,52163,52164],{"class":222,"line":399},[220,52165,1765],{"class":264},[220,52167,52168,52170,52173],{"class":222,"line":644},[220,52169,1770],{"class":264},[220,52171,52172],{"class":230},"'Grayscale'",[220,52174,7009],{"class":264},[220,52176,52177,52179,52181],{"class":222,"line":650},[220,52178,7014],{"class":264},[220,52180,3206],{"class":230},[220,52182,2465],{"class":264},[220,52184,52185],{"class":222,"line":656},[220,52186,7031],{"class":264},[220,52188,52189],{"class":222,"line":673},[220,52190,1787],{"class":264},[220,52192,52193],{"class":222,"line":682},[220,52194,1792],{"class":264},[1504,52196,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":52198},[52199],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":51937,"description":51945},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":52206,"title":52207,"body":52208,"category":33063,"componentType":25877,"description":52215,"extension":191,"meta":52445,"navigation":194,"path":52446,"requiresChild":32530,"seo":52447,"stem":52448,"__hash__":52449},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":52209,"toc":52441},[52210,52213,52216,52218,52220,52223,52225,52439],[11,52211,52207],{"id":52212},"grid",[15,52214,52215],{},"Simple grid lines pattern with adjustable thickness and rotation",[31911,52217],{"component":52207},[23,52219,31915],{"id":26533},[31917,52221],{":props":52222},"[{\"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,52224,31923],{"id":31922},[246,52226,52227,52267,52305,52343,52381],{":tabs":1557},[212,52228,52230],{"className":334,"code":52229,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,52231,52232,52240,52247,52255,52259],{"__ignoreMap":178},[220,52233,52234,52236,52238],{"class":222,"line":223},[220,52235,343],{"class":264},[220,52237,347],{"class":346},[220,52239,359],{"class":264},[220,52241,52242,52244],{"class":222,"line":179},[220,52243,364],{"class":264},[220,52245,52246],{"class":346},"Grid\n",[220,52248,52249,52251,52253],{"class":222,"line":389},[220,52250,9635],{"class":226},[220,52252,353],{"class":264},[220,52254,9591],{"class":230},[220,52256,52257],{"class":222,"line":399},[220,52258,1234],{"class":264},[220,52260,52261,52263,52265],{"class":222,"line":644},[220,52262,402],{"class":264},[220,52264,347],{"class":346},[220,52266,359],{"class":264},[212,52268,52269],{"className":409,"code":52229,"language":411,"meta":178,"style":178},[99,52270,52271,52279,52285,52293,52297],{"__ignoreMap":178},[220,52272,52273,52275,52277],{"class":222,"line":223},[220,52274,343],{"class":264},[220,52276,347],{"class":420},[220,52278,359],{"class":264},[220,52280,52281,52283],{"class":222,"line":179},[220,52282,364],{"class":264},[220,52284,52246],{"class":420},[220,52286,52287,52289,52291],{"class":222,"line":389},[220,52288,9635],{"class":226},[220,52290,353],{"class":260},[220,52292,9591],{"class":230},[220,52294,52295],{"class":222,"line":399},[220,52296,1234],{"class":264},[220,52298,52299,52301,52303],{"class":222,"line":644},[220,52300,402],{"class":264},[220,52302,347],{"class":420},[220,52304,359],{"class":264},[212,52306,52307],{"className":2844,"code":52229,"language":2846,"meta":178,"style":178},[99,52308,52309,52317,52323,52331,52335],{"__ignoreMap":178},[220,52310,52311,52313,52315],{"class":222,"line":223},[220,52312,343],{"class":264},[220,52314,347],{"class":420},[220,52316,359],{"class":264},[220,52318,52319,52321],{"class":222,"line":179},[220,52320,364],{"class":264},[220,52322,52246],{"class":420},[220,52324,52325,52327,52329],{"class":222,"line":389},[220,52326,9635],{"class":226},[220,52328,353],{"class":264},[220,52330,9591],{"class":230},[220,52332,52333],{"class":222,"line":399},[220,52334,1234],{"class":264},[220,52336,52337,52339,52341],{"class":222,"line":644},[220,52338,402],{"class":264},[220,52340,347],{"class":420},[220,52342,359],{"class":264},[212,52344,52345],{"className":468,"code":52229,"language":469,"meta":178,"style":178},[99,52346,52347,52355,52361,52369,52373],{"__ignoreMap":178},[220,52348,52349,52351,52353],{"class":222,"line":223},[220,52350,343],{"class":264},[220,52352,347],{"class":420},[220,52354,359],{"class":264},[220,52356,52357,52359],{"class":222,"line":179},[220,52358,364],{"class":264},[220,52360,52246],{"class":420},[220,52362,52363,52365,52367],{"class":222,"line":389},[220,52364,9635],{"class":226},[220,52366,353],{"class":260},[220,52368,9591],{"class":230},[220,52370,52371],{"class":222,"line":399},[220,52372,1234],{"class":264},[220,52374,52375,52377,52379],{"class":222,"line":644},[220,52376,402],{"class":264},[220,52378,347],{"class":420},[220,52380,359],{"class":264},[212,52382,52384],{"className":251,"code":52383,"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,52385,52386,52396,52400,52414,52418,52431,52435],{"__ignoreMap":178},[220,52387,52388,52390,52392,52394],{"class":222,"line":223},[220,52389,261],{"class":260},[220,52391,11512],{"class":264},[220,52393,268],{"class":260},[220,52395,4007],{"class":230},[220,52397,52398],{"class":222,"line":179},[220,52399,647],{"emptyLinePlaceholder":194},[220,52401,52402,52404,52406,52408,52410,52412],{"class":222,"line":389},[220,52403,1735],{"class":260},[220,52405,1738],{"class":420},[220,52407,1741],{"class":260},[220,52409,1744],{"class":260},[220,52411,1747],{"class":226},[220,52413,1750],{"class":264},[220,52415,52416],{"class":222,"line":399},[220,52417,1765],{"class":264},[220,52419,52420,52422,52425,52427,52429],{"class":222,"line":644},[220,52421,1770],{"class":264},[220,52423,52424],{"class":230},"'Grid'",[220,52426,1776],{"class":264},[220,52428,10169],{"class":230},[220,52430,1782],{"class":264},[220,52432,52433],{"class":222,"line":650},[220,52434,1787],{"class":264},[220,52436,52437],{"class":222,"line":656},[220,52438,1792],{"class":264},[1504,52440,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52442},[52443,52444],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":52207,"description":52215},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":52451,"title":7095,"body":52452,"category":35559,"componentType":25883,"description":52459,"extension":191,"meta":52821,"navigation":194,"path":52822,"requiresChild":194,"seo":52823,"stem":52824,"__hash__":52825},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":52453,"toc":52817},[52454,52457,52460,52462,52464,52467,52469,52815],[11,52455,7095],{"id":52456},"griddistortion",[15,52458,52459],{},"Interactive grid distortion controlled by mouse position",[31911,52461],{"component":7095},[23,52463,31915],{"id":26533},[31917,52465],{":props":52466},"[{\"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,52468,31923],{"id":31922},[246,52470,52471,52535,52606,52672,52742],{":tabs":1557},[212,52472,52474],{"className":334,"code":52473,"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,52475,52476,52484,52491,52499,52507,52511,52519,52527],{"__ignoreMap":178},[220,52477,52478,52480,52482],{"class":222,"line":223},[220,52479,343],{"class":264},[220,52481,347],{"class":346},[220,52483,359],{"class":264},[220,52485,52486,52488],{"class":222,"line":179},[220,52487,364],{"class":264},[220,52489,52490],{"class":346},"GridDistortion\n",[220,52492,52493,52495,52497],{"class":222,"line":389},[220,52494,20371],{"class":226},[220,52496,353],{"class":264},[220,52498,36625],{"class":230},[220,52500,52501,52503,52505],{"class":222,"line":399},[220,52502,17405],{"class":226},[220,52504,353],{"class":264},[220,52506,36625],{"class":230},[220,52508,52509],{"class":222,"line":644},[220,52510,31959],{"class":264},[220,52512,52513,52515,52517],{"class":222,"line":650},[220,52514,2550],{"class":264},[220,52516,2553],{"class":346},[220,52518,386],{"class":264},[220,52520,52521,52523,52525],{"class":222,"line":656},[220,52522,2567],{"class":264},[220,52524,7095],{"class":346},[220,52526,359],{"class":264},[220,52528,52529,52531,52533],{"class":222,"line":673},[220,52530,402],{"class":264},[220,52532,347],{"class":346},[220,52534,359],{"class":264},[212,52536,52538],{"className":409,"code":52537,"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,52539,52540,52548,52554,52566,52578,52582,52590,52598],{"__ignoreMap":178},[220,52541,52542,52544,52546],{"class":222,"line":223},[220,52543,343],{"class":264},[220,52545,347],{"class":420},[220,52547,359],{"class":264},[220,52549,52550,52552],{"class":222,"line":179},[220,52551,364],{"class":264},[220,52553,52490],{"class":420},[220,52555,52556,52558,52560,52562,52564],{"class":222,"line":389},[220,52557,20482],{"class":226},[220,52559,353],{"class":260},[220,52561,743],{"class":264},[220,52563,8677],{"class":420},[220,52565,749],{"class":264},[220,52567,52568,52570,52572,52574,52576],{"class":222,"line":399},[220,52569,9645],{"class":226},[220,52571,353],{"class":260},[220,52573,743],{"class":264},[220,52575,8677],{"class":420},[220,52577,749],{"class":264},[220,52579,52580],{"class":222,"line":644},[220,52581,31959],{"class":264},[220,52583,52584,52586,52588],{"class":222,"line":650},[220,52585,2550],{"class":264},[220,52587,2553],{"class":420},[220,52589,386],{"class":264},[220,52591,52592,52594,52596],{"class":222,"line":656},[220,52593,2567],{"class":264},[220,52595,7095],{"class":420},[220,52597,359],{"class":264},[220,52599,52600,52602,52604],{"class":222,"line":673},[220,52601,402],{"class":264},[220,52603,347],{"class":420},[220,52605,359],{"class":264},[212,52607,52608],{"className":2844,"code":52537,"language":2846,"meta":178,"style":178},[99,52609,52610,52618,52624,52634,52644,52648,52656,52664],{"__ignoreMap":178},[220,52611,52612,52614,52616],{"class":222,"line":223},[220,52613,343],{"class":264},[220,52615,347],{"class":420},[220,52617,359],{"class":264},[220,52619,52620,52622],{"class":222,"line":179},[220,52621,364],{"class":264},[220,52623,52490],{"class":420},[220,52625,52626,52628,52630,52632],{"class":222,"line":389},[220,52627,20482],{"class":226},[220,52629,29871],{"class":264},[220,52631,8677],{"class":420},[220,52633,749],{"class":264},[220,52635,52636,52638,52640,52642],{"class":222,"line":399},[220,52637,9645],{"class":226},[220,52639,29871],{"class":264},[220,52641,8677],{"class":420},[220,52643,749],{"class":264},[220,52645,52646],{"class":222,"line":644},[220,52647,31959],{"class":264},[220,52649,52650,52652,52654],{"class":222,"line":650},[220,52651,2550],{"class":264},[220,52653,2553],{"class":420},[220,52655,386],{"class":264},[220,52657,52658,52660,52662],{"class":222,"line":656},[220,52659,2567],{"class":264},[220,52661,7095],{"class":420},[220,52663,359],{"class":264},[220,52665,52666,52668,52670],{"class":222,"line":673},[220,52667,402],{"class":264},[220,52669,347],{"class":420},[220,52671,359],{"class":264},[212,52673,52674],{"className":468,"code":52537,"language":469,"meta":178,"style":178},[99,52675,52676,52684,52690,52702,52714,52718,52726,52734],{"__ignoreMap":178},[220,52677,52678,52680,52682],{"class":222,"line":223},[220,52679,343],{"class":264},[220,52681,347],{"class":420},[220,52683,359],{"class":264},[220,52685,52686,52688],{"class":222,"line":179},[220,52687,364],{"class":264},[220,52689,52490],{"class":420},[220,52691,52692,52694,52696,52698,52700],{"class":222,"line":389},[220,52693,20482],{"class":226},[220,52695,353],{"class":260},[220,52697,743],{"class":264},[220,52699,8677],{"class":420},[220,52701,749],{"class":264},[220,52703,52704,52706,52708,52710,52712],{"class":222,"line":399},[220,52705,9645],{"class":226},[220,52707,353],{"class":260},[220,52709,743],{"class":264},[220,52711,8677],{"class":420},[220,52713,749],{"class":264},[220,52715,52716],{"class":222,"line":644},[220,52717,31959],{"class":264},[220,52719,52720,52722,52724],{"class":222,"line":650},[220,52721,2550],{"class":264},[220,52723,2553],{"class":420},[220,52725,386],{"class":264},[220,52727,52728,52730,52732],{"class":222,"line":656},[220,52729,2567],{"class":264},[220,52731,7095],{"class":420},[220,52733,359],{"class":264},[220,52735,52736,52738,52740],{"class":222,"line":673},[220,52737,402],{"class":264},[220,52739,347],{"class":420},[220,52741,359],{"class":264},[212,52743,52745],{"className":251,"code":52744,"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,52746,52747,52757,52761,52775,52779,52795,52803,52807,52811],{"__ignoreMap":178},[220,52748,52749,52751,52753,52755],{"class":222,"line":223},[220,52750,261],{"class":260},[220,52752,11512],{"class":264},[220,52754,268],{"class":260},[220,52756,4007],{"class":230},[220,52758,52759],{"class":222,"line":179},[220,52760,647],{"emptyLinePlaceholder":194},[220,52762,52763,52765,52767,52769,52771,52773],{"class":222,"line":389},[220,52764,1735],{"class":260},[220,52766,1738],{"class":420},[220,52768,1741],{"class":260},[220,52770,1744],{"class":260},[220,52772,1747],{"class":226},[220,52774,1750],{"class":264},[220,52776,52777],{"class":222,"line":399},[220,52778,1765],{"class":264},[220,52780,52781,52783,52785,52787,52789,52791,52793],{"class":222,"line":644},[220,52782,1770],{"class":264},[220,52784,7538],{"class":230},[220,52786,32203],{"class":264},[220,52788,8677],{"class":420},[220,52790,6566],{"class":264},[220,52792,8677],{"class":420},[220,52794,7546],{"class":264},[220,52796,52797,52799,52801],{"class":222,"line":650},[220,52798,7014],{"class":264},[220,52800,3206],{"class":230},[220,52802,2465],{"class":264},[220,52804,52805],{"class":222,"line":656},[220,52806,7031],{"class":264},[220,52808,52809],{"class":222,"line":673},[220,52810,1787],{"class":264},[220,52812,52813],{"class":222,"line":682},[220,52814,1792],{"class":264},[1504,52816,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52818},[52819,52820],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":7095,"description":52459},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":52827,"title":52828,"body":52829,"category":53091,"componentType":25883,"description":52836,"extension":191,"meta":53092,"navigation":194,"path":53093,"requiresChild":194,"seo":53094,"stem":53095,"__hash__":53096},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":52830,"toc":53088},[52831,52834,52837,52839,52841,53086],[11,52832,52828],{"id":52833},"group",[15,52835,52836],{},"Container for organizing and composing child effects — supports flex-like flow layout (column\u002Frow stacking via the flow prop)",[31911,52838],{"component":52828},[23,52840,31923],{"id":31922},[246,52842,52843,52888,52932,52976,53020],{":tabs":1557},[212,52844,52846],{"className":334,"code":52845,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,52847,52848,52856,52864,52872,52880],{"__ignoreMap":178},[220,52849,52850,52852,52854],{"class":222,"line":223},[220,52851,343],{"class":264},[220,52853,347],{"class":346},[220,52855,359],{"class":264},[220,52857,52858,52860,52862],{"class":222,"line":179},[220,52859,364],{"class":264},[220,52861,52828],{"class":346},[220,52863,359],{"class":264},[220,52865,52866,52868,52870],{"class":222,"line":389},[220,52867,2550],{"class":264},[220,52869,2553],{"class":346},[220,52871,386],{"class":264},[220,52873,52874,52876,52878],{"class":222,"line":399},[220,52875,2567],{"class":264},[220,52877,52828],{"class":346},[220,52879,359],{"class":264},[220,52881,52882,52884,52886],{"class":222,"line":644},[220,52883,402],{"class":264},[220,52885,347],{"class":346},[220,52887,359],{"class":264},[212,52889,52890],{"className":409,"code":52845,"language":411,"meta":178,"style":178},[99,52891,52892,52900,52908,52916,52924],{"__ignoreMap":178},[220,52893,52894,52896,52898],{"class":222,"line":223},[220,52895,343],{"class":264},[220,52897,347],{"class":420},[220,52899,359],{"class":264},[220,52901,52902,52904,52906],{"class":222,"line":179},[220,52903,364],{"class":264},[220,52905,52828],{"class":420},[220,52907,359],{"class":264},[220,52909,52910,52912,52914],{"class":222,"line":389},[220,52911,2550],{"class":264},[220,52913,2553],{"class":420},[220,52915,386],{"class":264},[220,52917,52918,52920,52922],{"class":222,"line":399},[220,52919,2567],{"class":264},[220,52921,52828],{"class":420},[220,52923,359],{"class":264},[220,52925,52926,52928,52930],{"class":222,"line":644},[220,52927,402],{"class":264},[220,52929,347],{"class":420},[220,52931,359],{"class":264},[212,52933,52934],{"className":2844,"code":52845,"language":2846,"meta":178,"style":178},[99,52935,52936,52944,52952,52960,52968],{"__ignoreMap":178},[220,52937,52938,52940,52942],{"class":222,"line":223},[220,52939,343],{"class":264},[220,52941,347],{"class":420},[220,52943,359],{"class":264},[220,52945,52946,52948,52950],{"class":222,"line":179},[220,52947,364],{"class":264},[220,52949,52828],{"class":420},[220,52951,359],{"class":264},[220,52953,52954,52956,52958],{"class":222,"line":389},[220,52955,2550],{"class":264},[220,52957,2553],{"class":420},[220,52959,386],{"class":264},[220,52961,52962,52964,52966],{"class":222,"line":399},[220,52963,2567],{"class":264},[220,52965,52828],{"class":420},[220,52967,359],{"class":264},[220,52969,52970,52972,52974],{"class":222,"line":644},[220,52971,402],{"class":264},[220,52973,347],{"class":420},[220,52975,359],{"class":264},[212,52977,52978],{"className":468,"code":52845,"language":469,"meta":178,"style":178},[99,52979,52980,52988,52996,53004,53012],{"__ignoreMap":178},[220,52981,52982,52984,52986],{"class":222,"line":223},[220,52983,343],{"class":264},[220,52985,347],{"class":420},[220,52987,359],{"class":264},[220,52989,52990,52992,52994],{"class":222,"line":179},[220,52991,364],{"class":264},[220,52993,52828],{"class":420},[220,52995,359],{"class":264},[220,52997,52998,53000,53002],{"class":222,"line":389},[220,52999,2550],{"class":264},[220,53001,2553],{"class":420},[220,53003,386],{"class":264},[220,53005,53006,53008,53010],{"class":222,"line":399},[220,53007,2567],{"class":264},[220,53009,52828],{"class":420},[220,53011,359],{"class":264},[220,53013,53014,53016,53018],{"class":222,"line":644},[220,53015,402],{"class":264},[220,53017,347],{"class":420},[220,53019,359],{"class":264},[212,53021,53023],{"className":251,"code":53022,"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,53024,53025,53035,53039,53053,53057,53066,53074,53078,53082],{"__ignoreMap":178},[220,53026,53027,53029,53031,53033],{"class":222,"line":223},[220,53028,261],{"class":260},[220,53030,11512],{"class":264},[220,53032,268],{"class":260},[220,53034,4007],{"class":230},[220,53036,53037],{"class":222,"line":179},[220,53038,647],{"emptyLinePlaceholder":194},[220,53040,53041,53043,53045,53047,53049,53051],{"class":222,"line":389},[220,53042,1735],{"class":260},[220,53044,1738],{"class":420},[220,53046,1741],{"class":260},[220,53048,1744],{"class":260},[220,53050,1747],{"class":226},[220,53052,1750],{"class":264},[220,53054,53055],{"class":222,"line":399},[220,53056,1765],{"class":264},[220,53058,53059,53061,53064],{"class":222,"line":644},[220,53060,1770],{"class":264},[220,53062,53063],{"class":230},"'Group'",[220,53065,7009],{"class":264},[220,53067,53068,53070,53072],{"class":222,"line":650},[220,53069,7014],{"class":264},[220,53071,3206],{"class":230},[220,53073,2465],{"class":264},[220,53075,53076],{"class":222,"line":656},[220,53077,7031],{"class":264},[220,53079,53080],{"class":222,"line":673},[220,53081,1787],{"class":264},[220,53083,53084],{"class":222,"line":682},[220,53085,1792],{"class":264},[1504,53087,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53089},[53090],{"id":31922,"depth":179,"text":31923},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":52828,"description":52836},"docs\u002Fcomponents\u002FGroup","VRm3A9h-85RvRmiecZuaIcK_SKxGDs5Woe18hQVpFfg",{"id":53098,"title":53099,"body":53100,"category":33063,"componentType":25877,"description":53107,"extension":191,"meta":53292,"navigation":194,"path":53293,"requiresChild":32530,"seo":53294,"stem":53295,"__hash__":53296},"components\u002Fdocs\u002Fcomponents\u002FHTMLInCanvas.md","HTMLInCanvas",{"type":8,"value":53101,"toc":53289},[53102,53105,53108,53114,53116,53118,53287],[11,53103,53099],{"id":53104},"htmlincanvas",[15,53106,53107],{},"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.",[53109,53110],"experimental-warning",{"link-label":53111,"link-url":53112,"message":53113},"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,53115],{"component":53099},[23,53117,31923],{"id":31922},[246,53119,53120,53149,53177,53205,53233],{":tabs":1557},[212,53121,53123],{"className":334,"code":53122,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHTMLInCanvas \u002F>\n\u003C\u002FShader>\n",[99,53124,53125,53133,53141],{"__ignoreMap":178},[220,53126,53127,53129,53131],{"class":222,"line":223},[220,53128,343],{"class":264},[220,53130,347],{"class":346},[220,53132,359],{"class":264},[220,53134,53135,53137,53139],{"class":222,"line":179},[220,53136,364],{"class":264},[220,53138,53099],{"class":346},[220,53140,386],{"class":264},[220,53142,53143,53145,53147],{"class":222,"line":389},[220,53144,402],{"class":264},[220,53146,347],{"class":346},[220,53148,359],{"class":264},[212,53150,53151],{"className":409,"code":53122,"language":411,"meta":178,"style":178},[99,53152,53153,53161,53169],{"__ignoreMap":178},[220,53154,53155,53157,53159],{"class":222,"line":223},[220,53156,343],{"class":264},[220,53158,347],{"class":420},[220,53160,359],{"class":264},[220,53162,53163,53165,53167],{"class":222,"line":179},[220,53164,364],{"class":264},[220,53166,53099],{"class":420},[220,53168,386],{"class":264},[220,53170,53171,53173,53175],{"class":222,"line":389},[220,53172,402],{"class":264},[220,53174,347],{"class":420},[220,53176,359],{"class":264},[212,53178,53179],{"className":2844,"code":53122,"language":2846,"meta":178,"style":178},[99,53180,53181,53189,53197],{"__ignoreMap":178},[220,53182,53183,53185,53187],{"class":222,"line":223},[220,53184,343],{"class":264},[220,53186,347],{"class":420},[220,53188,359],{"class":264},[220,53190,53191,53193,53195],{"class":222,"line":179},[220,53192,364],{"class":264},[220,53194,53099],{"class":420},[220,53196,386],{"class":264},[220,53198,53199,53201,53203],{"class":222,"line":389},[220,53200,402],{"class":264},[220,53202,347],{"class":420},[220,53204,359],{"class":264},[212,53206,53207],{"className":468,"code":53122,"language":469,"meta":178,"style":178},[99,53208,53209,53217,53225],{"__ignoreMap":178},[220,53210,53211,53213,53215],{"class":222,"line":223},[220,53212,343],{"class":264},[220,53214,347],{"class":420},[220,53216,359],{"class":264},[220,53218,53219,53221,53223],{"class":222,"line":179},[220,53220,364],{"class":264},[220,53222,53099],{"class":420},[220,53224,386],{"class":264},[220,53226,53227,53229,53231],{"class":222,"line":389},[220,53228,402],{"class":264},[220,53230,347],{"class":420},[220,53232,359],{"class":264},[212,53234,53236],{"className":251,"code":53235,"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,53237,53238,53248,53252,53266,53270,53279,53283],{"__ignoreMap":178},[220,53239,53240,53242,53244,53246],{"class":222,"line":223},[220,53241,261],{"class":260},[220,53243,11512],{"class":264},[220,53245,268],{"class":260},[220,53247,4007],{"class":230},[220,53249,53250],{"class":222,"line":179},[220,53251,647],{"emptyLinePlaceholder":194},[220,53253,53254,53256,53258,53260,53262,53264],{"class":222,"line":389},[220,53255,1735],{"class":260},[220,53257,1738],{"class":420},[220,53259,1741],{"class":260},[220,53261,1744],{"class":260},[220,53263,1747],{"class":226},[220,53265,1750],{"class":264},[220,53267,53268],{"class":222,"line":399},[220,53269,1765],{"class":264},[220,53271,53272,53274,53277],{"class":222,"line":644},[220,53273,1770],{"class":264},[220,53275,53276],{"class":230},"'HTMLInCanvas'",[220,53278,2465],{"class":264},[220,53280,53281],{"class":222,"line":650},[220,53282,1787],{"class":264},[220,53284,53285],{"class":222,"line":656},[220,53286,1792],{"class":264},[1504,53288,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53290},[53291],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhtmlincanvas",{"title":53099,"description":53107},"docs\u002Fcomponents\u002FHTMLInCanvas","1gpE_BrWAlIJQU2c02pY_YKYJGKOk5b4LGNpVcA27co",{"id":53298,"title":53299,"body":53300,"category":32806,"componentType":25883,"description":53307,"extension":191,"meta":53568,"navigation":194,"path":53569,"requiresChild":194,"seo":53570,"stem":53571,"__hash__":53572},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":53301,"toc":53564},[53302,53305,53308,53310,53312,53315,53317,53562],[11,53303,53299],{"id":53304},"halftone",[15,53306,53307],{},"Halftone dot pattern effect for printing aesthetics",[31911,53309],{"component":53299},[23,53311,31915],{"id":26533},[31917,53313],{":props":53314},"[{\"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,53316,31923],{"id":31922},[246,53318,53319,53364,53408,53452,53496],{":tabs":1557},[212,53320,53322],{"className":334,"code":53321,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,53323,53324,53332,53340,53348,53356],{"__ignoreMap":178},[220,53325,53326,53328,53330],{"class":222,"line":223},[220,53327,343],{"class":264},[220,53329,347],{"class":346},[220,53331,359],{"class":264},[220,53333,53334,53336,53338],{"class":222,"line":179},[220,53335,364],{"class":264},[220,53337,53299],{"class":346},[220,53339,359],{"class":264},[220,53341,53342,53344,53346],{"class":222,"line":389},[220,53343,2550],{"class":264},[220,53345,2553],{"class":346},[220,53347,386],{"class":264},[220,53349,53350,53352,53354],{"class":222,"line":399},[220,53351,2567],{"class":264},[220,53353,53299],{"class":346},[220,53355,359],{"class":264},[220,53357,53358,53360,53362],{"class":222,"line":644},[220,53359,402],{"class":264},[220,53361,347],{"class":346},[220,53363,359],{"class":264},[212,53365,53366],{"className":409,"code":53321,"language":411,"meta":178,"style":178},[99,53367,53368,53376,53384,53392,53400],{"__ignoreMap":178},[220,53369,53370,53372,53374],{"class":222,"line":223},[220,53371,343],{"class":264},[220,53373,347],{"class":420},[220,53375,359],{"class":264},[220,53377,53378,53380,53382],{"class":222,"line":179},[220,53379,364],{"class":264},[220,53381,53299],{"class":420},[220,53383,359],{"class":264},[220,53385,53386,53388,53390],{"class":222,"line":389},[220,53387,2550],{"class":264},[220,53389,2553],{"class":420},[220,53391,386],{"class":264},[220,53393,53394,53396,53398],{"class":222,"line":399},[220,53395,2567],{"class":264},[220,53397,53299],{"class":420},[220,53399,359],{"class":264},[220,53401,53402,53404,53406],{"class":222,"line":644},[220,53403,402],{"class":264},[220,53405,347],{"class":420},[220,53407,359],{"class":264},[212,53409,53410],{"className":2844,"code":53321,"language":2846,"meta":178,"style":178},[99,53411,53412,53420,53428,53436,53444],{"__ignoreMap":178},[220,53413,53414,53416,53418],{"class":222,"line":223},[220,53415,343],{"class":264},[220,53417,347],{"class":420},[220,53419,359],{"class":264},[220,53421,53422,53424,53426],{"class":222,"line":179},[220,53423,364],{"class":264},[220,53425,53299],{"class":420},[220,53427,359],{"class":264},[220,53429,53430,53432,53434],{"class":222,"line":389},[220,53431,2550],{"class":264},[220,53433,2553],{"class":420},[220,53435,386],{"class":264},[220,53437,53438,53440,53442],{"class":222,"line":399},[220,53439,2567],{"class":264},[220,53441,53299],{"class":420},[220,53443,359],{"class":264},[220,53445,53446,53448,53450],{"class":222,"line":644},[220,53447,402],{"class":264},[220,53449,347],{"class":420},[220,53451,359],{"class":264},[212,53453,53454],{"className":468,"code":53321,"language":469,"meta":178,"style":178},[99,53455,53456,53464,53472,53480,53488],{"__ignoreMap":178},[220,53457,53458,53460,53462],{"class":222,"line":223},[220,53459,343],{"class":264},[220,53461,347],{"class":420},[220,53463,359],{"class":264},[220,53465,53466,53468,53470],{"class":222,"line":179},[220,53467,364],{"class":264},[220,53469,53299],{"class":420},[220,53471,359],{"class":264},[220,53473,53474,53476,53478],{"class":222,"line":389},[220,53475,2550],{"class":264},[220,53477,2553],{"class":420},[220,53479,386],{"class":264},[220,53481,53482,53484,53486],{"class":222,"line":399},[220,53483,2567],{"class":264},[220,53485,53299],{"class":420},[220,53487,359],{"class":264},[220,53489,53490,53492,53494],{"class":222,"line":644},[220,53491,402],{"class":264},[220,53493,347],{"class":420},[220,53495,359],{"class":264},[212,53497,53499],{"className":251,"code":53498,"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,53500,53501,53511,53515,53529,53533,53542,53550,53554,53558],{"__ignoreMap":178},[220,53502,53503,53505,53507,53509],{"class":222,"line":223},[220,53504,261],{"class":260},[220,53506,11512],{"class":264},[220,53508,268],{"class":260},[220,53510,4007],{"class":230},[220,53512,53513],{"class":222,"line":179},[220,53514,647],{"emptyLinePlaceholder":194},[220,53516,53517,53519,53521,53523,53525,53527],{"class":222,"line":389},[220,53518,1735],{"class":260},[220,53520,1738],{"class":420},[220,53522,1741],{"class":260},[220,53524,1744],{"class":260},[220,53526,1747],{"class":226},[220,53528,1750],{"class":264},[220,53530,53531],{"class":222,"line":399},[220,53532,1765],{"class":264},[220,53534,53535,53537,53540],{"class":222,"line":644},[220,53536,1770],{"class":264},[220,53538,53539],{"class":230},"'Halftone'",[220,53541,7009],{"class":264},[220,53543,53544,53546,53548],{"class":222,"line":650},[220,53545,7014],{"class":264},[220,53547,3206],{"class":230},[220,53549,2465],{"class":264},[220,53551,53552],{"class":222,"line":656},[220,53553,7031],{"class":264},[220,53555,53556],{"class":222,"line":673},[220,53557,1787],{"class":264},[220,53559,53560],{"class":222,"line":682},[220,53561,1792],{"class":264},[1504,53563,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53565},[53566,53567],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":53299,"description":53307},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":53574,"title":53575,"body":53576,"category":15908,"componentType":25877,"description":53583,"extension":191,"meta":53862,"navigation":194,"path":53863,"requiresChild":32530,"seo":53864,"stem":53865,"__hash__":53866},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":53577,"toc":53858},[53578,53581,53584,53586,53588,53591,53593,53856],[11,53579,53575],{"id":53580},"heart",[15,53582,53583],{},"Heart shape with adjustable size",[31911,53585],{"component":53575},[23,53587,31915],{"id":26533},[31917,53589],{":props":53590},"[{\"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,53592,31923],{"id":31922},[246,53594,53595,53644,53696,53744,53794],{":tabs":1557},[212,53596,53598],{"className":334,"code":53597,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,53599,53600,53608,53615,53623,53632,53636],{"__ignoreMap":178},[220,53601,53602,53604,53606],{"class":222,"line":223},[220,53603,343],{"class":264},[220,53605,347],{"class":346},[220,53607,359],{"class":264},[220,53609,53610,53612],{"class":222,"line":179},[220,53611,364],{"class":264},[220,53613,53614],{"class":346},"Heart\n",[220,53616,53617,53619,53621],{"class":222,"line":389},[220,53618,9635],{"class":226},[220,53620,353],{"class":264},[220,53622,9591],{"class":230},[220,53624,53625,53627,53629],{"class":222,"line":399},[220,53626,17405],{"class":226},[220,53628,353],{"class":264},[220,53630,53631],{"class":230},"\"0.32\"\n",[220,53633,53634],{"class":222,"line":644},[220,53635,1234],{"class":264},[220,53637,53638,53640,53642],{"class":222,"line":650},[220,53639,402],{"class":264},[220,53641,347],{"class":346},[220,53643,359],{"class":264},[212,53645,53647],{"className":409,"code":53646,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,53648,53649,53657,53663,53671,53684,53688],{"__ignoreMap":178},[220,53650,53651,53653,53655],{"class":222,"line":223},[220,53652,343],{"class":264},[220,53654,347],{"class":420},[220,53656,359],{"class":264},[220,53658,53659,53661],{"class":222,"line":179},[220,53660,364],{"class":264},[220,53662,53614],{"class":420},[220,53664,53665,53667,53669],{"class":222,"line":389},[220,53666,9635],{"class":226},[220,53668,353],{"class":260},[220,53670,9591],{"class":230},[220,53672,53673,53675,53677,53679,53682],{"class":222,"line":399},[220,53674,9645],{"class":226},[220,53676,353],{"class":260},[220,53678,743],{"class":264},[220,53680,53681],{"class":420},"0.32",[220,53683,749],{"class":264},[220,53685,53686],{"class":222,"line":644},[220,53687,1234],{"class":264},[220,53689,53690,53692,53694],{"class":222,"line":650},[220,53691,402],{"class":264},[220,53693,347],{"class":420},[220,53695,359],{"class":264},[212,53697,53698],{"className":2844,"code":53646,"language":2846,"meta":178,"style":178},[99,53699,53700,53708,53714,53722,53732,53736],{"__ignoreMap":178},[220,53701,53702,53704,53706],{"class":222,"line":223},[220,53703,343],{"class":264},[220,53705,347],{"class":420},[220,53707,359],{"class":264},[220,53709,53710,53712],{"class":222,"line":179},[220,53711,364],{"class":264},[220,53713,53614],{"class":420},[220,53715,53716,53718,53720],{"class":222,"line":389},[220,53717,9635],{"class":226},[220,53719,353],{"class":264},[220,53721,9591],{"class":230},[220,53723,53724,53726,53728,53730],{"class":222,"line":399},[220,53725,9645],{"class":226},[220,53727,29871],{"class":264},[220,53729,53681],{"class":420},[220,53731,749],{"class":264},[220,53733,53734],{"class":222,"line":644},[220,53735,1234],{"class":264},[220,53737,53738,53740,53742],{"class":222,"line":650},[220,53739,402],{"class":264},[220,53741,347],{"class":420},[220,53743,359],{"class":264},[212,53745,53746],{"className":468,"code":53646,"language":469,"meta":178,"style":178},[99,53747,53748,53756,53762,53770,53782,53786],{"__ignoreMap":178},[220,53749,53750,53752,53754],{"class":222,"line":223},[220,53751,343],{"class":264},[220,53753,347],{"class":420},[220,53755,359],{"class":264},[220,53757,53758,53760],{"class":222,"line":179},[220,53759,364],{"class":264},[220,53761,53614],{"class":420},[220,53763,53764,53766,53768],{"class":222,"line":389},[220,53765,9635],{"class":226},[220,53767,353],{"class":260},[220,53769,9591],{"class":230},[220,53771,53772,53774,53776,53778,53780],{"class":222,"line":399},[220,53773,9645],{"class":226},[220,53775,353],{"class":260},[220,53777,743],{"class":264},[220,53779,53681],{"class":420},[220,53781,749],{"class":264},[220,53783,53784],{"class":222,"line":644},[220,53785,1234],{"class":264},[220,53787,53788,53790,53792],{"class":222,"line":650},[220,53789,402],{"class":264},[220,53791,347],{"class":420},[220,53793,359],{"class":264},[212,53795,53797],{"className":251,"code":53796,"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,53798,53799,53809,53813,53827,53831,53848,53852],{"__ignoreMap":178},[220,53800,53801,53803,53805,53807],{"class":222,"line":223},[220,53802,261],{"class":260},[220,53804,11512],{"class":264},[220,53806,268],{"class":260},[220,53808,4007],{"class":230},[220,53810,53811],{"class":222,"line":179},[220,53812,647],{"emptyLinePlaceholder":194},[220,53814,53815,53817,53819,53821,53823,53825],{"class":222,"line":389},[220,53816,1735],{"class":260},[220,53818,1738],{"class":420},[220,53820,1741],{"class":260},[220,53822,1744],{"class":260},[220,53824,1747],{"class":226},[220,53826,1750],{"class":264},[220,53828,53829],{"class":222,"line":399},[220,53830,1765],{"class":264},[220,53832,53833,53835,53838,53840,53842,53844,53846],{"class":222,"line":644},[220,53834,1770],{"class":264},[220,53836,53837],{"class":230},"'Heart'",[220,53839,1776],{"class":264},[220,53841,10169],{"class":230},[220,53843,6566],{"class":264},[220,53845,53681],{"class":420},[220,53847,1782],{"class":264},[220,53849,53850],{"class":222,"line":650},[220,53851,1787],{"class":264},[220,53853,53854],{"class":222,"line":656},[220,53855,1792],{"class":264},[1504,53857,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53859},[53860,53861],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":53575,"description":53583},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":53868,"title":53869,"body":53870,"category":36569,"componentType":25877,"description":54067,"extension":191,"meta":54068,"navigation":194,"path":54069,"requiresChild":32530,"seo":54070,"stem":54071,"__hash__":54072},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":53871,"toc":54063},[53872,53875,53883,53885,53887,53890,53892,54061],[11,53873,53869],{"id":53874},"heatmap",[15,53876,53877,53878,4836],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,53879,53882],{"href":53880,"rel":53881},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[31911,53884],{"component":53869},[23,53886,31915],{"id":26533},[31917,53888],{":props":53889},"[{\"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,53891,31923],{"id":31922},[246,53893,53894,53923,53951,53979,54007],{":tabs":1557},[212,53895,53897],{"className":334,"code":53896,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,53898,53899,53907,53915],{"__ignoreMap":178},[220,53900,53901,53903,53905],{"class":222,"line":223},[220,53902,343],{"class":264},[220,53904,347],{"class":346},[220,53906,359],{"class":264},[220,53908,53909,53911,53913],{"class":222,"line":179},[220,53910,364],{"class":264},[220,53912,53869],{"class":346},[220,53914,386],{"class":264},[220,53916,53917,53919,53921],{"class":222,"line":389},[220,53918,402],{"class":264},[220,53920,347],{"class":346},[220,53922,359],{"class":264},[212,53924,53925],{"className":409,"code":53896,"language":411,"meta":178,"style":178},[99,53926,53927,53935,53943],{"__ignoreMap":178},[220,53928,53929,53931,53933],{"class":222,"line":223},[220,53930,343],{"class":264},[220,53932,347],{"class":420},[220,53934,359],{"class":264},[220,53936,53937,53939,53941],{"class":222,"line":179},[220,53938,364],{"class":264},[220,53940,53869],{"class":420},[220,53942,386],{"class":264},[220,53944,53945,53947,53949],{"class":222,"line":389},[220,53946,402],{"class":264},[220,53948,347],{"class":420},[220,53950,359],{"class":264},[212,53952,53953],{"className":2844,"code":53896,"language":2846,"meta":178,"style":178},[99,53954,53955,53963,53971],{"__ignoreMap":178},[220,53956,53957,53959,53961],{"class":222,"line":223},[220,53958,343],{"class":264},[220,53960,347],{"class":420},[220,53962,359],{"class":264},[220,53964,53965,53967,53969],{"class":222,"line":179},[220,53966,364],{"class":264},[220,53968,53869],{"class":420},[220,53970,386],{"class":264},[220,53972,53973,53975,53977],{"class":222,"line":389},[220,53974,402],{"class":264},[220,53976,347],{"class":420},[220,53978,359],{"class":264},[212,53980,53981],{"className":468,"code":53896,"language":469,"meta":178,"style":178},[99,53982,53983,53991,53999],{"__ignoreMap":178},[220,53984,53985,53987,53989],{"class":222,"line":223},[220,53986,343],{"class":264},[220,53988,347],{"class":420},[220,53990,359],{"class":264},[220,53992,53993,53995,53997],{"class":222,"line":179},[220,53994,364],{"class":264},[220,53996,53869],{"class":420},[220,53998,386],{"class":264},[220,54000,54001,54003,54005],{"class":222,"line":389},[220,54002,402],{"class":264},[220,54004,347],{"class":420},[220,54006,359],{"class":264},[212,54008,54010],{"className":251,"code":54009,"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,54011,54012,54022,54026,54040,54044,54053,54057],{"__ignoreMap":178},[220,54013,54014,54016,54018,54020],{"class":222,"line":223},[220,54015,261],{"class":260},[220,54017,11512],{"class":264},[220,54019,268],{"class":260},[220,54021,4007],{"class":230},[220,54023,54024],{"class":222,"line":179},[220,54025,647],{"emptyLinePlaceholder":194},[220,54027,54028,54030,54032,54034,54036,54038],{"class":222,"line":389},[220,54029,1735],{"class":260},[220,54031,1738],{"class":420},[220,54033,1741],{"class":260},[220,54035,1744],{"class":260},[220,54037,1747],{"class":226},[220,54039,1750],{"class":264},[220,54041,54042],{"class":222,"line":399},[220,54043,1765],{"class":264},[220,54045,54046,54048,54051],{"class":222,"line":644},[220,54047,1770],{"class":264},[220,54049,54050],{"class":230},"'Heatmap'",[220,54052,2465],{"class":264},[220,54054,54055],{"class":222,"line":650},[220,54056,1787],{"class":264},[220,54058,54059],{"class":222,"line":656},[220,54060,1792],{"class":264},[1504,54062,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54064},[54065,54066],{"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":53869,"description":54067},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":54074,"title":54075,"body":54076,"category":33063,"componentType":25877,"description":54083,"extension":191,"meta":54268,"navigation":194,"path":54269,"requiresChild":32530,"seo":54270,"stem":54271,"__hash__":54272},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":54077,"toc":54264},[54078,54081,54084,54086,54088,54091,54093,54262],[11,54079,54075],{"id":54080},"hexgrid",[15,54082,54083],{},"Honeycomb hexagonal grid pattern",[31911,54085],{"component":54075},[23,54087,31915],{"id":26533},[31917,54089],{":props":54090},"[{\"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,54092,31923],{"id":31922},[246,54094,54095,54124,54152,54180,54208],{":tabs":1557},[212,54096,54098],{"className":334,"code":54097,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,54099,54100,54108,54116],{"__ignoreMap":178},[220,54101,54102,54104,54106],{"class":222,"line":223},[220,54103,343],{"class":264},[220,54105,347],{"class":346},[220,54107,359],{"class":264},[220,54109,54110,54112,54114],{"class":222,"line":179},[220,54111,364],{"class":264},[220,54113,54075],{"class":346},[220,54115,386],{"class":264},[220,54117,54118,54120,54122],{"class":222,"line":389},[220,54119,402],{"class":264},[220,54121,347],{"class":346},[220,54123,359],{"class":264},[212,54125,54126],{"className":409,"code":54097,"language":411,"meta":178,"style":178},[99,54127,54128,54136,54144],{"__ignoreMap":178},[220,54129,54130,54132,54134],{"class":222,"line":223},[220,54131,343],{"class":264},[220,54133,347],{"class":420},[220,54135,359],{"class":264},[220,54137,54138,54140,54142],{"class":222,"line":179},[220,54139,364],{"class":264},[220,54141,54075],{"class":420},[220,54143,386],{"class":264},[220,54145,54146,54148,54150],{"class":222,"line":389},[220,54147,402],{"class":264},[220,54149,347],{"class":420},[220,54151,359],{"class":264},[212,54153,54154],{"className":2844,"code":54097,"language":2846,"meta":178,"style":178},[99,54155,54156,54164,54172],{"__ignoreMap":178},[220,54157,54158,54160,54162],{"class":222,"line":223},[220,54159,343],{"class":264},[220,54161,347],{"class":420},[220,54163,359],{"class":264},[220,54165,54166,54168,54170],{"class":222,"line":179},[220,54167,364],{"class":264},[220,54169,54075],{"class":420},[220,54171,386],{"class":264},[220,54173,54174,54176,54178],{"class":222,"line":389},[220,54175,402],{"class":264},[220,54177,347],{"class":420},[220,54179,359],{"class":264},[212,54181,54182],{"className":468,"code":54097,"language":469,"meta":178,"style":178},[99,54183,54184,54192,54200],{"__ignoreMap":178},[220,54185,54186,54188,54190],{"class":222,"line":223},[220,54187,343],{"class":264},[220,54189,347],{"class":420},[220,54191,359],{"class":264},[220,54193,54194,54196,54198],{"class":222,"line":179},[220,54195,364],{"class":264},[220,54197,54075],{"class":420},[220,54199,386],{"class":264},[220,54201,54202,54204,54206],{"class":222,"line":389},[220,54203,402],{"class":264},[220,54205,347],{"class":420},[220,54207,359],{"class":264},[212,54209,54211],{"className":251,"code":54210,"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,54212,54213,54223,54227,54241,54245,54254,54258],{"__ignoreMap":178},[220,54214,54215,54217,54219,54221],{"class":222,"line":223},[220,54216,261],{"class":260},[220,54218,11512],{"class":264},[220,54220,268],{"class":260},[220,54222,4007],{"class":230},[220,54224,54225],{"class":222,"line":179},[220,54226,647],{"emptyLinePlaceholder":194},[220,54228,54229,54231,54233,54235,54237,54239],{"class":222,"line":389},[220,54230,1735],{"class":260},[220,54232,1738],{"class":420},[220,54234,1741],{"class":260},[220,54236,1744],{"class":260},[220,54238,1747],{"class":226},[220,54240,1750],{"class":264},[220,54242,54243],{"class":222,"line":399},[220,54244,1765],{"class":264},[220,54246,54247,54249,54252],{"class":222,"line":644},[220,54248,1770],{"class":264},[220,54250,54251],{"class":230},"'HexGrid'",[220,54253,2465],{"class":264},[220,54255,54256],{"class":222,"line":650},[220,54257,1787],{"class":264},[220,54259,54260],{"class":222,"line":656},[220,54261,1792],{"class":264},[1504,54263,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54265},[54266,54267],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":54075,"description":54083},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":54274,"title":54275,"body":54276,"category":36569,"componentType":25877,"description":54283,"extension":191,"meta":54515,"navigation":194,"path":54516,"requiresChild":32530,"seo":54517,"stem":54518,"__hash__":54519},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":54277,"toc":54511},[54278,54281,54284,54286,54288,54291,54293,54509],[11,54279,54275],{"id":54280},"hologram",[15,54282,54283],{},"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,54285],{"component":54275},[23,54287,31915],{"id":26533},[31917,54289],{":props":54290},"[{\"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,54292,31923],{"id":31922},[246,54294,54295,54336,54374,54412,54450],{":tabs":1557},[212,54296,54298],{"className":334,"code":54297,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,54299,54300,54308,54315,54324,54328],{"__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],{"class":222,"line":179},[220,54311,364],{"class":264},[220,54313,54314],{"class":346},"Hologram\n",[220,54316,54317,54319,54321],{"class":222,"line":389},[220,54318,9635],{"class":226},[220,54320,353],{"class":264},[220,54322,54323],{"class":230},"\"#5ec8ff\"\n",[220,54325,54326],{"class":222,"line":399},[220,54327,1234],{"class":264},[220,54329,54330,54332,54334],{"class":222,"line":644},[220,54331,402],{"class":264},[220,54333,347],{"class":346},[220,54335,359],{"class":264},[212,54337,54338],{"className":409,"code":54297,"language":411,"meta":178,"style":178},[99,54339,54340,54348,54354,54362,54366],{"__ignoreMap":178},[220,54341,54342,54344,54346],{"class":222,"line":223},[220,54343,343],{"class":264},[220,54345,347],{"class":420},[220,54347,359],{"class":264},[220,54349,54350,54352],{"class":222,"line":179},[220,54351,364],{"class":264},[220,54353,54314],{"class":420},[220,54355,54356,54358,54360],{"class":222,"line":389},[220,54357,9635],{"class":226},[220,54359,353],{"class":260},[220,54361,54323],{"class":230},[220,54363,54364],{"class":222,"line":399},[220,54365,1234],{"class":264},[220,54367,54368,54370,54372],{"class":222,"line":644},[220,54369,402],{"class":264},[220,54371,347],{"class":420},[220,54373,359],{"class":264},[212,54375,54376],{"className":2844,"code":54297,"language":2846,"meta":178,"style":178},[99,54377,54378,54386,54392,54400,54404],{"__ignoreMap":178},[220,54379,54380,54382,54384],{"class":222,"line":223},[220,54381,343],{"class":264},[220,54383,347],{"class":420},[220,54385,359],{"class":264},[220,54387,54388,54390],{"class":222,"line":179},[220,54389,364],{"class":264},[220,54391,54314],{"class":420},[220,54393,54394,54396,54398],{"class":222,"line":389},[220,54395,9635],{"class":226},[220,54397,353],{"class":264},[220,54399,54323],{"class":230},[220,54401,54402],{"class":222,"line":399},[220,54403,1234],{"class":264},[220,54405,54406,54408,54410],{"class":222,"line":644},[220,54407,402],{"class":264},[220,54409,347],{"class":420},[220,54411,359],{"class":264},[212,54413,54414],{"className":468,"code":54297,"language":469,"meta":178,"style":178},[99,54415,54416,54424,54430,54438,54442],{"__ignoreMap":178},[220,54417,54418,54420,54422],{"class":222,"line":223},[220,54419,343],{"class":264},[220,54421,347],{"class":420},[220,54423,359],{"class":264},[220,54425,54426,54428],{"class":222,"line":179},[220,54427,364],{"class":264},[220,54429,54314],{"class":420},[220,54431,54432,54434,54436],{"class":222,"line":389},[220,54433,9635],{"class":226},[220,54435,353],{"class":260},[220,54437,54323],{"class":230},[220,54439,54440],{"class":222,"line":399},[220,54441,1234],{"class":264},[220,54443,54444,54446,54448],{"class":222,"line":644},[220,54445,402],{"class":264},[220,54447,347],{"class":420},[220,54449,359],{"class":264},[212,54451,54453],{"className":251,"code":54452,"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,54454,54455,54465,54469,54483,54487,54501,54505],{"__ignoreMap":178},[220,54456,54457,54459,54461,54463],{"class":222,"line":223},[220,54458,261],{"class":260},[220,54460,11512],{"class":264},[220,54462,268],{"class":260},[220,54464,4007],{"class":230},[220,54466,54467],{"class":222,"line":179},[220,54468,647],{"emptyLinePlaceholder":194},[220,54470,54471,54473,54475,54477,54479,54481],{"class":222,"line":389},[220,54472,1735],{"class":260},[220,54474,1738],{"class":420},[220,54476,1741],{"class":260},[220,54478,1744],{"class":260},[220,54480,1747],{"class":226},[220,54482,1750],{"class":264},[220,54484,54485],{"class":222,"line":399},[220,54486,1765],{"class":264},[220,54488,54489,54491,54494,54496,54499],{"class":222,"line":644},[220,54490,1770],{"class":264},[220,54492,54493],{"class":230},"'Hologram'",[220,54495,1776],{"class":264},[220,54497,54498],{"class":230},"'#5ec8ff'",[220,54500,1782],{"class":264},[220,54502,54503],{"class":222,"line":650},[220,54504,1787],{"class":264},[220,54506,54507],{"class":222,"line":656},[220,54508,1792],{"class":264},[1504,54510,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54512},[54513,54514],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":54275,"description":54283},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":54521,"title":54522,"body":54523,"category":36569,"componentType":25877,"description":54530,"extension":191,"meta":54715,"navigation":194,"path":54716,"requiresChild":32530,"seo":54717,"stem":54718,"__hash__":54719},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":54524,"toc":54711},[54525,54528,54531,54533,54535,54538,54540,54709],[11,54526,54522],{"id":54527},"holographic",[15,54529,54530],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[31911,54532],{"component":54522},[23,54534,31915],{"id":26533},[31917,54536],{":props":54537},"[{\"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,54539,31923],{"id":31922},[246,54541,54542,54571,54599,54627,54655],{":tabs":1557},[212,54543,54545],{"className":334,"code":54544,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,54546,54547,54555,54563],{"__ignoreMap":178},[220,54548,54549,54551,54553],{"class":222,"line":223},[220,54550,343],{"class":264},[220,54552,347],{"class":346},[220,54554,359],{"class":264},[220,54556,54557,54559,54561],{"class":222,"line":179},[220,54558,364],{"class":264},[220,54560,54522],{"class":346},[220,54562,386],{"class":264},[220,54564,54565,54567,54569],{"class":222,"line":389},[220,54566,402],{"class":264},[220,54568,347],{"class":346},[220,54570,359],{"class":264},[212,54572,54573],{"className":409,"code":54544,"language":411,"meta":178,"style":178},[99,54574,54575,54583,54591],{"__ignoreMap":178},[220,54576,54577,54579,54581],{"class":222,"line":223},[220,54578,343],{"class":264},[220,54580,347],{"class":420},[220,54582,359],{"class":264},[220,54584,54585,54587,54589],{"class":222,"line":179},[220,54586,364],{"class":264},[220,54588,54522],{"class":420},[220,54590,386],{"class":264},[220,54592,54593,54595,54597],{"class":222,"line":389},[220,54594,402],{"class":264},[220,54596,347],{"class":420},[220,54598,359],{"class":264},[212,54600,54601],{"className":2844,"code":54544,"language":2846,"meta":178,"style":178},[99,54602,54603,54611,54619],{"__ignoreMap":178},[220,54604,54605,54607,54609],{"class":222,"line":223},[220,54606,343],{"class":264},[220,54608,347],{"class":420},[220,54610,359],{"class":264},[220,54612,54613,54615,54617],{"class":222,"line":179},[220,54614,364],{"class":264},[220,54616,54522],{"class":420},[220,54618,386],{"class":264},[220,54620,54621,54623,54625],{"class":222,"line":389},[220,54622,402],{"class":264},[220,54624,347],{"class":420},[220,54626,359],{"class":264},[212,54628,54629],{"className":468,"code":54544,"language":469,"meta":178,"style":178},[99,54630,54631,54639,54647],{"__ignoreMap":178},[220,54632,54633,54635,54637],{"class":222,"line":223},[220,54634,343],{"class":264},[220,54636,347],{"class":420},[220,54638,359],{"class":264},[220,54640,54641,54643,54645],{"class":222,"line":179},[220,54642,364],{"class":264},[220,54644,54522],{"class":420},[220,54646,386],{"class":264},[220,54648,54649,54651,54653],{"class":222,"line":389},[220,54650,402],{"class":264},[220,54652,347],{"class":420},[220,54654,359],{"class":264},[212,54656,54658],{"className":251,"code":54657,"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,54659,54660,54670,54674,54688,54692,54701,54705],{"__ignoreMap":178},[220,54661,54662,54664,54666,54668],{"class":222,"line":223},[220,54663,261],{"class":260},[220,54665,11512],{"class":264},[220,54667,268],{"class":260},[220,54669,4007],{"class":230},[220,54671,54672],{"class":222,"line":179},[220,54673,647],{"emptyLinePlaceholder":194},[220,54675,54676,54678,54680,54682,54684,54686],{"class":222,"line":389},[220,54677,1735],{"class":260},[220,54679,1738],{"class":420},[220,54681,1741],{"class":260},[220,54683,1744],{"class":260},[220,54685,1747],{"class":226},[220,54687,1750],{"class":264},[220,54689,54690],{"class":222,"line":399},[220,54691,1765],{"class":264},[220,54693,54694,54696,54699],{"class":222,"line":644},[220,54695,1770],{"class":264},[220,54697,54698],{"class":230},"'Holographic'",[220,54700,2465],{"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,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54712},[54713,54714],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":54522,"description":54530},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":54721,"title":54722,"body":54723,"category":36368,"componentType":25883,"description":54730,"extension":191,"meta":54991,"navigation":194,"path":54992,"requiresChild":194,"seo":54993,"stem":54994,"__hash__":54995},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":54724,"toc":54987},[54725,54728,54731,54733,54735,54738,54740,54985],[11,54726,54722],{"id":54727},"hueshift",[15,54729,54730],{},"Rotate hue around the color wheel",[31911,54732],{"component":54722},[23,54734,31915],{"id":26533},[31917,54736],{":props":54737},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,54739,31923],{"id":31922},[246,54741,54742,54787,54831,54875,54919],{":tabs":1557},[212,54743,54745],{"className":334,"code":54744,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,54746,54747,54755,54763,54771,54779],{"__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,359],{"class":264},[220,54764,54765,54767,54769],{"class":222,"line":389},[220,54766,2550],{"class":264},[220,54768,2553],{"class":346},[220,54770,386],{"class":264},[220,54772,54773,54775,54777],{"class":222,"line":399},[220,54774,2567],{"class":264},[220,54776,54722],{"class":346},[220,54778,359],{"class":264},[220,54780,54781,54783,54785],{"class":222,"line":644},[220,54782,402],{"class":264},[220,54784,347],{"class":346},[220,54786,359],{"class":264},[212,54788,54789],{"className":409,"code":54744,"language":411,"meta":178,"style":178},[99,54790,54791,54799,54807,54815,54823],{"__ignoreMap":178},[220,54792,54793,54795,54797],{"class":222,"line":223},[220,54794,343],{"class":264},[220,54796,347],{"class":420},[220,54798,359],{"class":264},[220,54800,54801,54803,54805],{"class":222,"line":179},[220,54802,364],{"class":264},[220,54804,54722],{"class":420},[220,54806,359],{"class":264},[220,54808,54809,54811,54813],{"class":222,"line":389},[220,54810,2550],{"class":264},[220,54812,2553],{"class":420},[220,54814,386],{"class":264},[220,54816,54817,54819,54821],{"class":222,"line":399},[220,54818,2567],{"class":264},[220,54820,54722],{"class":420},[220,54822,359],{"class":264},[220,54824,54825,54827,54829],{"class":222,"line":644},[220,54826,402],{"class":264},[220,54828,347],{"class":420},[220,54830,359],{"class":264},[212,54832,54833],{"className":2844,"code":54744,"language":2846,"meta":178,"style":178},[99,54834,54835,54843,54851,54859,54867],{"__ignoreMap":178},[220,54836,54837,54839,54841],{"class":222,"line":223},[220,54838,343],{"class":264},[220,54840,347],{"class":420},[220,54842,359],{"class":264},[220,54844,54845,54847,54849],{"class":222,"line":179},[220,54846,364],{"class":264},[220,54848,54722],{"class":420},[220,54850,359],{"class":264},[220,54852,54853,54855,54857],{"class":222,"line":389},[220,54854,2550],{"class":264},[220,54856,2553],{"class":420},[220,54858,386],{"class":264},[220,54860,54861,54863,54865],{"class":222,"line":399},[220,54862,2567],{"class":264},[220,54864,54722],{"class":420},[220,54866,359],{"class":264},[220,54868,54869,54871,54873],{"class":222,"line":644},[220,54870,402],{"class":264},[220,54872,347],{"class":420},[220,54874,359],{"class":264},[212,54876,54877],{"className":468,"code":54744,"language":469,"meta":178,"style":178},[99,54878,54879,54887,54895,54903,54911],{"__ignoreMap":178},[220,54880,54881,54883,54885],{"class":222,"line":223},[220,54882,343],{"class":264},[220,54884,347],{"class":420},[220,54886,359],{"class":264},[220,54888,54889,54891,54893],{"class":222,"line":179},[220,54890,364],{"class":264},[220,54892,54722],{"class":420},[220,54894,359],{"class":264},[220,54896,54897,54899,54901],{"class":222,"line":389},[220,54898,2550],{"class":264},[220,54900,2553],{"class":420},[220,54902,386],{"class":264},[220,54904,54905,54907,54909],{"class":222,"line":399},[220,54906,2567],{"class":264},[220,54908,54722],{"class":420},[220,54910,359],{"class":264},[220,54912,54913,54915,54917],{"class":222,"line":644},[220,54914,402],{"class":264},[220,54916,347],{"class":420},[220,54918,359],{"class":264},[212,54920,54922],{"className":251,"code":54921,"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,54923,54924,54934,54938,54952,54956,54965,54973,54977,54981],{"__ignoreMap":178},[220,54925,54926,54928,54930,54932],{"class":222,"line":223},[220,54927,261],{"class":260},[220,54929,11512],{"class":264},[220,54931,268],{"class":260},[220,54933,4007],{"class":230},[220,54935,54936],{"class":222,"line":179},[220,54937,647],{"emptyLinePlaceholder":194},[220,54939,54940,54942,54944,54946,54948,54950],{"class":222,"line":389},[220,54941,1735],{"class":260},[220,54943,1738],{"class":420},[220,54945,1741],{"class":260},[220,54947,1744],{"class":260},[220,54949,1747],{"class":226},[220,54951,1750],{"class":264},[220,54953,54954],{"class":222,"line":399},[220,54955,1765],{"class":264},[220,54957,54958,54960,54963],{"class":222,"line":644},[220,54959,1770],{"class":264},[220,54961,54962],{"class":230},"'HueShift'",[220,54964,7009],{"class":264},[220,54966,54967,54969,54971],{"class":222,"line":650},[220,54968,7014],{"class":264},[220,54970,3206],{"class":230},[220,54972,2465],{"class":264},[220,54974,54975],{"class":222,"line":656},[220,54976,7031],{"class":264},[220,54978,54979],{"class":222,"line":673},[220,54980,1787],{"class":264},[220,54982,54983],{"class":222,"line":682},[220,54984,1792],{"class":264},[1504,54986,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54988},[54989,54990],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":54722,"description":54730},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":54997,"title":54998,"body":54999,"category":33063,"componentType":25877,"description":55006,"extension":191,"meta":55191,"navigation":194,"path":55192,"requiresChild":32530,"seo":55193,"stem":55194,"__hash__":55195},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":55000,"toc":55187},[55001,55004,55007,55009,55011,55014,55016,55185],[11,55002,54998],{"id":55003},"imagetexture",[15,55005,55006],{},"Display an image with customizable object-fit modes",[31911,55008],{"component":54998},[23,55010,31915],{"id":26533},[31917,55012],{":props":55013},"[{\"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,55015,31923],{"id":31922},[246,55017,55018,55047,55075,55103,55131],{":tabs":1557},[212,55019,55021],{"className":334,"code":55020,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,55022,55023,55031,55039],{"__ignoreMap":178},[220,55024,55025,55027,55029],{"class":222,"line":223},[220,55026,343],{"class":264},[220,55028,347],{"class":346},[220,55030,359],{"class":264},[220,55032,55033,55035,55037],{"class":222,"line":179},[220,55034,364],{"class":264},[220,55036,54998],{"class":346},[220,55038,386],{"class":264},[220,55040,55041,55043,55045],{"class":222,"line":389},[220,55042,402],{"class":264},[220,55044,347],{"class":346},[220,55046,359],{"class":264},[212,55048,55049],{"className":409,"code":55020,"language":411,"meta":178,"style":178},[99,55050,55051,55059,55067],{"__ignoreMap":178},[220,55052,55053,55055,55057],{"class":222,"line":223},[220,55054,343],{"class":264},[220,55056,347],{"class":420},[220,55058,359],{"class":264},[220,55060,55061,55063,55065],{"class":222,"line":179},[220,55062,364],{"class":264},[220,55064,54998],{"class":420},[220,55066,386],{"class":264},[220,55068,55069,55071,55073],{"class":222,"line":389},[220,55070,402],{"class":264},[220,55072,347],{"class":420},[220,55074,359],{"class":264},[212,55076,55077],{"className":2844,"code":55020,"language":2846,"meta":178,"style":178},[99,55078,55079,55087,55095],{"__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,54998],{"class":420},[220,55094,386],{"class":264},[220,55096,55097,55099,55101],{"class":222,"line":389},[220,55098,402],{"class":264},[220,55100,347],{"class":420},[220,55102,359],{"class":264},[212,55104,55105],{"className":468,"code":55020,"language":469,"meta":178,"style":178},[99,55106,55107,55115,55123],{"__ignoreMap":178},[220,55108,55109,55111,55113],{"class":222,"line":223},[220,55110,343],{"class":264},[220,55112,347],{"class":420},[220,55114,359],{"class":264},[220,55116,55117,55119,55121],{"class":222,"line":179},[220,55118,364],{"class":264},[220,55120,54998],{"class":420},[220,55122,386],{"class":264},[220,55124,55125,55127,55129],{"class":222,"line":389},[220,55126,402],{"class":264},[220,55128,347],{"class":420},[220,55130,359],{"class":264},[212,55132,55134],{"className":251,"code":55133,"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,55135,55136,55146,55150,55164,55168,55177,55181],{"__ignoreMap":178},[220,55137,55138,55140,55142,55144],{"class":222,"line":223},[220,55139,261],{"class":260},[220,55141,11512],{"class":264},[220,55143,268],{"class":260},[220,55145,4007],{"class":230},[220,55147,55148],{"class":222,"line":179},[220,55149,647],{"emptyLinePlaceholder":194},[220,55151,55152,55154,55156,55158,55160,55162],{"class":222,"line":389},[220,55153,1735],{"class":260},[220,55155,1738],{"class":420},[220,55157,1741],{"class":260},[220,55159,1744],{"class":260},[220,55161,1747],{"class":226},[220,55163,1750],{"class":264},[220,55165,55166],{"class":222,"line":399},[220,55167,1765],{"class":264},[220,55169,55170,55172,55175],{"class":222,"line":644},[220,55171,1770],{"class":264},[220,55173,55174],{"class":230},"'ImageTexture'",[220,55176,2465],{"class":264},[220,55178,55179],{"class":222,"line":650},[220,55180,1787],{"class":264},[220,55182,55183],{"class":222,"line":656},[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\u002Fimagetexture",{"title":54998,"description":55006},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":55197,"title":55198,"body":55199,"category":35559,"componentType":25877,"description":55206,"extension":191,"meta":55485,"navigation":194,"path":55486,"requiresChild":32530,"seo":55487,"stem":55488,"__hash__":55489},"components\u002Fdocs\u002Fcomponents\u002FInkFlow.md","InkFlow",{"type":8,"value":55200,"toc":55481},[55201,55204,55207,55209,55211,55214,55216,55479],[11,55202,55198],{"id":55203},"inkflow",[15,55205,55206],{},"Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go",[31911,55208],{"component":55198},[23,55210,31915],{"id":26533},[31917,55212],{":props":55213},"[{\"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,55215,31923],{"id":31922},[246,55217,55218,55267,55318,55366,55416],{":tabs":1557},[212,55219,55221],{"className":334,"code":55220,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,55222,55223,55231,55238,55247,55255,55259],{"__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],{"class":222,"line":179},[220,55234,364],{"class":264},[220,55236,55237],{"class":346},"InkFlow\n",[220,55239,55240,55242,55244],{"class":222,"line":389},[220,55241,9635],{"class":226},[220,55243,353],{"class":264},[220,55245,55246],{"class":230},"\"#ff2d7e\"\n",[220,55248,55249,55251,55253],{"class":222,"line":399},[220,55250,17405],{"class":226},[220,55252,353],{"class":264},[220,55254,41098],{"class":230},[220,55256,55257],{"class":222,"line":644},[220,55258,1234],{"class":264},[220,55260,55261,55263,55265],{"class":222,"line":650},[220,55262,402],{"class":264},[220,55264,347],{"class":346},[220,55266,359],{"class":264},[212,55268,55270],{"className":409,"code":55269,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,55271,55272,55280,55286,55294,55306,55310],{"__ignoreMap":178},[220,55273,55274,55276,55278],{"class":222,"line":223},[220,55275,343],{"class":264},[220,55277,347],{"class":420},[220,55279,359],{"class":264},[220,55281,55282,55284],{"class":222,"line":179},[220,55283,364],{"class":264},[220,55285,55237],{"class":420},[220,55287,55288,55290,55292],{"class":222,"line":389},[220,55289,9635],{"class":226},[220,55291,353],{"class":260},[220,55293,55246],{"class":230},[220,55295,55296,55298,55300,55302,55304],{"class":222,"line":399},[220,55297,9645],{"class":226},[220,55299,353],{"class":260},[220,55301,743],{"class":264},[220,55303,22004],{"class":420},[220,55305,749],{"class":264},[220,55307,55308],{"class":222,"line":644},[220,55309,1234],{"class":264},[220,55311,55312,55314,55316],{"class":222,"line":650},[220,55313,402],{"class":264},[220,55315,347],{"class":420},[220,55317,359],{"class":264},[212,55319,55320],{"className":2844,"code":55269,"language":2846,"meta":178,"style":178},[99,55321,55322,55330,55336,55344,55354,55358],{"__ignoreMap":178},[220,55323,55324,55326,55328],{"class":222,"line":223},[220,55325,343],{"class":264},[220,55327,347],{"class":420},[220,55329,359],{"class":264},[220,55331,55332,55334],{"class":222,"line":179},[220,55333,364],{"class":264},[220,55335,55237],{"class":420},[220,55337,55338,55340,55342],{"class":222,"line":389},[220,55339,9635],{"class":226},[220,55341,353],{"class":264},[220,55343,55246],{"class":230},[220,55345,55346,55348,55350,55352],{"class":222,"line":399},[220,55347,9645],{"class":226},[220,55349,29871],{"class":264},[220,55351,22004],{"class":420},[220,55353,749],{"class":264},[220,55355,55356],{"class":222,"line":644},[220,55357,1234],{"class":264},[220,55359,55360,55362,55364],{"class":222,"line":650},[220,55361,402],{"class":264},[220,55363,347],{"class":420},[220,55365,359],{"class":264},[212,55367,55368],{"className":468,"code":55269,"language":469,"meta":178,"style":178},[99,55369,55370,55378,55384,55392,55404,55408],{"__ignoreMap":178},[220,55371,55372,55374,55376],{"class":222,"line":223},[220,55373,343],{"class":264},[220,55375,347],{"class":420},[220,55377,359],{"class":264},[220,55379,55380,55382],{"class":222,"line":179},[220,55381,364],{"class":264},[220,55383,55237],{"class":420},[220,55385,55386,55388,55390],{"class":222,"line":389},[220,55387,9635],{"class":226},[220,55389,353],{"class":260},[220,55391,55246],{"class":230},[220,55393,55394,55396,55398,55400,55402],{"class":222,"line":399},[220,55395,9645],{"class":226},[220,55397,353],{"class":260},[220,55399,743],{"class":264},[220,55401,22004],{"class":420},[220,55403,749],{"class":264},[220,55405,55406],{"class":222,"line":644},[220,55407,1234],{"class":264},[220,55409,55410,55412,55414],{"class":222,"line":650},[220,55411,402],{"class":264},[220,55413,347],{"class":420},[220,55415,359],{"class":264},[212,55417,55419],{"className":251,"code":55418,"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,55420,55421,55431,55435,55449,55453,55471,55475],{"__ignoreMap":178},[220,55422,55423,55425,55427,55429],{"class":222,"line":223},[220,55424,261],{"class":260},[220,55426,11512],{"class":264},[220,55428,268],{"class":260},[220,55430,4007],{"class":230},[220,55432,55433],{"class":222,"line":179},[220,55434,647],{"emptyLinePlaceholder":194},[220,55436,55437,55439,55441,55443,55445,55447],{"class":222,"line":389},[220,55438,1735],{"class":260},[220,55440,1738],{"class":420},[220,55442,1741],{"class":260},[220,55444,1744],{"class":260},[220,55446,1747],{"class":226},[220,55448,1750],{"class":264},[220,55450,55451],{"class":222,"line":399},[220,55452,1765],{"class":264},[220,55454,55455,55457,55460,55462,55465,55467,55469],{"class":222,"line":644},[220,55456,1770],{"class":264},[220,55458,55459],{"class":230},"'InkFlow'",[220,55461,1776],{"class":264},[220,55463,55464],{"class":230},"'#ff2d7e'",[220,55466,6566],{"class":264},[220,55468,22004],{"class":420},[220,55470,1782],{"class":264},[220,55472,55473],{"class":222,"line":650},[220,55474,1787],{"class":264},[220,55476,55477],{"class":222,"line":656},[220,55478,1792],{"class":264},[1504,55480,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":55482},[55483,55484],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Finkflow",{"title":55198,"description":55206},"docs\u002Fcomponents\u002FInkFlow","uPnBHNk-ARjAflUEs5hW2qB4NhGh9P1nHfkYFbPq04k",{"id":55491,"title":55492,"body":55493,"category":36368,"componentType":25883,"description":55500,"extension":191,"meta":55755,"navigation":194,"path":55756,"requiresChild":194,"seo":55757,"stem":55758,"__hash__":55759},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":55494,"toc":55752},[55495,55498,55501,55503,55505,55750],[11,55496,55492],{"id":55497},"invert",[15,55499,55500],{},"Invert RGB colors while preserving alpha",[31911,55502],{"component":55492},[23,55504,31923],{"id":31922},[246,55506,55507,55552,55596,55640,55684],{":tabs":1557},[212,55508,55510],{"className":334,"code":55509,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,55511,55512,55520,55528,55536,55544],{"__ignoreMap":178},[220,55513,55514,55516,55518],{"class":222,"line":223},[220,55515,343],{"class":264},[220,55517,347],{"class":346},[220,55519,359],{"class":264},[220,55521,55522,55524,55526],{"class":222,"line":179},[220,55523,364],{"class":264},[220,55525,55492],{"class":346},[220,55527,359],{"class":264},[220,55529,55530,55532,55534],{"class":222,"line":389},[220,55531,2550],{"class":264},[220,55533,2553],{"class":346},[220,55535,386],{"class":264},[220,55537,55538,55540,55542],{"class":222,"line":399},[220,55539,2567],{"class":264},[220,55541,55492],{"class":346},[220,55543,359],{"class":264},[220,55545,55546,55548,55550],{"class":222,"line":644},[220,55547,402],{"class":264},[220,55549,347],{"class":346},[220,55551,359],{"class":264},[212,55553,55554],{"className":409,"code":55509,"language":411,"meta":178,"style":178},[99,55555,55556,55564,55572,55580,55588],{"__ignoreMap":178},[220,55557,55558,55560,55562],{"class":222,"line":223},[220,55559,343],{"class":264},[220,55561,347],{"class":420},[220,55563,359],{"class":264},[220,55565,55566,55568,55570],{"class":222,"line":179},[220,55567,364],{"class":264},[220,55569,55492],{"class":420},[220,55571,359],{"class":264},[220,55573,55574,55576,55578],{"class":222,"line":389},[220,55575,2550],{"class":264},[220,55577,2553],{"class":420},[220,55579,386],{"class":264},[220,55581,55582,55584,55586],{"class":222,"line":399},[220,55583,2567],{"class":264},[220,55585,55492],{"class":420},[220,55587,359],{"class":264},[220,55589,55590,55592,55594],{"class":222,"line":644},[220,55591,402],{"class":264},[220,55593,347],{"class":420},[220,55595,359],{"class":264},[212,55597,55598],{"className":2844,"code":55509,"language":2846,"meta":178,"style":178},[99,55599,55600,55608,55616,55624,55632],{"__ignoreMap":178},[220,55601,55602,55604,55606],{"class":222,"line":223},[220,55603,343],{"class":264},[220,55605,347],{"class":420},[220,55607,359],{"class":264},[220,55609,55610,55612,55614],{"class":222,"line":179},[220,55611,364],{"class":264},[220,55613,55492],{"class":420},[220,55615,359],{"class":264},[220,55617,55618,55620,55622],{"class":222,"line":389},[220,55619,2550],{"class":264},[220,55621,2553],{"class":420},[220,55623,386],{"class":264},[220,55625,55626,55628,55630],{"class":222,"line":399},[220,55627,2567],{"class":264},[220,55629,55492],{"class":420},[220,55631,359],{"class":264},[220,55633,55634,55636,55638],{"class":222,"line":644},[220,55635,402],{"class":264},[220,55637,347],{"class":420},[220,55639,359],{"class":264},[212,55641,55642],{"className":468,"code":55509,"language":469,"meta":178,"style":178},[99,55643,55644,55652,55660,55668,55676],{"__ignoreMap":178},[220,55645,55646,55648,55650],{"class":222,"line":223},[220,55647,343],{"class":264},[220,55649,347],{"class":420},[220,55651,359],{"class":264},[220,55653,55654,55656,55658],{"class":222,"line":179},[220,55655,364],{"class":264},[220,55657,55492],{"class":420},[220,55659,359],{"class":264},[220,55661,55662,55664,55666],{"class":222,"line":389},[220,55663,2550],{"class":264},[220,55665,2553],{"class":420},[220,55667,386],{"class":264},[220,55669,55670,55672,55674],{"class":222,"line":399},[220,55671,2567],{"class":264},[220,55673,55492],{"class":420},[220,55675,359],{"class":264},[220,55677,55678,55680,55682],{"class":222,"line":644},[220,55679,402],{"class":264},[220,55681,347],{"class":420},[220,55683,359],{"class":264},[212,55685,55687],{"className":251,"code":55686,"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,55688,55689,55699,55703,55717,55721,55730,55738,55742,55746],{"__ignoreMap":178},[220,55690,55691,55693,55695,55697],{"class":222,"line":223},[220,55692,261],{"class":260},[220,55694,11512],{"class":264},[220,55696,268],{"class":260},[220,55698,4007],{"class":230},[220,55700,55701],{"class":222,"line":179},[220,55702,647],{"emptyLinePlaceholder":194},[220,55704,55705,55707,55709,55711,55713,55715],{"class":222,"line":389},[220,55706,1735],{"class":260},[220,55708,1738],{"class":420},[220,55710,1741],{"class":260},[220,55712,1744],{"class":260},[220,55714,1747],{"class":226},[220,55716,1750],{"class":264},[220,55718,55719],{"class":222,"line":399},[220,55720,1765],{"class":264},[220,55722,55723,55725,55728],{"class":222,"line":644},[220,55724,1770],{"class":264},[220,55726,55727],{"class":230},"'Invert'",[220,55729,7009],{"class":264},[220,55731,55732,55734,55736],{"class":222,"line":650},[220,55733,7014],{"class":264},[220,55735,3206],{"class":230},[220,55737,2465],{"class":264},[220,55739,55740],{"class":222,"line":656},[220,55741,7031],{"class":264},[220,55743,55744],{"class":222,"line":673},[220,55745,1787],{"class":264},[220,55747,55748],{"class":222,"line":682},[220,55749,1792],{"class":264},[1504,55751,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":55753},[55754],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":55492,"description":55500},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":55761,"title":55762,"body":55763,"category":33673,"componentType":25883,"description":55770,"extension":191,"meta":56031,"navigation":194,"path":56032,"requiresChild":194,"seo":56033,"stem":56034,"__hash__":56035},"components\u002Fdocs\u002Fcomponents\u002FIrisWipe.md","IrisWipe",{"type":8,"value":55764,"toc":56027},[55765,55768,55771,55773,55775,55778,55780,56025],[11,55766,55762],{"id":55767},"iriswipe",[15,55769,55770],{},"Reveal through an expanding circle growing from a center point",[31911,55772],{"component":55762},[23,55774,31915],{"id":26533},[31917,55776],{":props":55777},"[{\"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,55779,31923],{"id":31922},[246,55781,55782,55827,55871,55915,55959],{":tabs":1557},[212,55783,55785],{"className":334,"code":55784,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIrisWipe>\n \u003CCircle \u002F>\n \u003C\u002FIrisWipe>\n\u003C\u002FShader>\n",[99,55786,55787,55795,55803,55811,55819],{"__ignoreMap":178},[220,55788,55789,55791,55793],{"class":222,"line":223},[220,55790,343],{"class":264},[220,55792,347],{"class":346},[220,55794,359],{"class":264},[220,55796,55797,55799,55801],{"class":222,"line":179},[220,55798,364],{"class":264},[220,55800,55762],{"class":346},[220,55802,359],{"class":264},[220,55804,55805,55807,55809],{"class":222,"line":389},[220,55806,2550],{"class":264},[220,55808,2553],{"class":346},[220,55810,386],{"class":264},[220,55812,55813,55815,55817],{"class":222,"line":399},[220,55814,2567],{"class":264},[220,55816,55762],{"class":346},[220,55818,359],{"class":264},[220,55820,55821,55823,55825],{"class":222,"line":644},[220,55822,402],{"class":264},[220,55824,347],{"class":346},[220,55826,359],{"class":264},[212,55828,55829],{"className":409,"code":55784,"language":411,"meta":178,"style":178},[99,55830,55831,55839,55847,55855,55863],{"__ignoreMap":178},[220,55832,55833,55835,55837],{"class":222,"line":223},[220,55834,343],{"class":264},[220,55836,347],{"class":420},[220,55838,359],{"class":264},[220,55840,55841,55843,55845],{"class":222,"line":179},[220,55842,364],{"class":264},[220,55844,55762],{"class":420},[220,55846,359],{"class":264},[220,55848,55849,55851,55853],{"class":222,"line":389},[220,55850,2550],{"class":264},[220,55852,2553],{"class":420},[220,55854,386],{"class":264},[220,55856,55857,55859,55861],{"class":222,"line":399},[220,55858,2567],{"class":264},[220,55860,55762],{"class":420},[220,55862,359],{"class":264},[220,55864,55865,55867,55869],{"class":222,"line":644},[220,55866,402],{"class":264},[220,55868,347],{"class":420},[220,55870,359],{"class":264},[212,55872,55873],{"className":2844,"code":55784,"language":2846,"meta":178,"style":178},[99,55874,55875,55883,55891,55899,55907],{"__ignoreMap":178},[220,55876,55877,55879,55881],{"class":222,"line":223},[220,55878,343],{"class":264},[220,55880,347],{"class":420},[220,55882,359],{"class":264},[220,55884,55885,55887,55889],{"class":222,"line":179},[220,55886,364],{"class":264},[220,55888,55762],{"class":420},[220,55890,359],{"class":264},[220,55892,55893,55895,55897],{"class":222,"line":389},[220,55894,2550],{"class":264},[220,55896,2553],{"class":420},[220,55898,386],{"class":264},[220,55900,55901,55903,55905],{"class":222,"line":399},[220,55902,2567],{"class":264},[220,55904,55762],{"class":420},[220,55906,359],{"class":264},[220,55908,55909,55911,55913],{"class":222,"line":644},[220,55910,402],{"class":264},[220,55912,347],{"class":420},[220,55914,359],{"class":264},[212,55916,55917],{"className":468,"code":55784,"language":469,"meta":178,"style":178},[99,55918,55919,55927,55935,55943,55951],{"__ignoreMap":178},[220,55920,55921,55923,55925],{"class":222,"line":223},[220,55922,343],{"class":264},[220,55924,347],{"class":420},[220,55926,359],{"class":264},[220,55928,55929,55931,55933],{"class":222,"line":179},[220,55930,364],{"class":264},[220,55932,55762],{"class":420},[220,55934,359],{"class":264},[220,55936,55937,55939,55941],{"class":222,"line":389},[220,55938,2550],{"class":264},[220,55940,2553],{"class":420},[220,55942,386],{"class":264},[220,55944,55945,55947,55949],{"class":222,"line":399},[220,55946,2567],{"class":264},[220,55948,55762],{"class":420},[220,55950,359],{"class":264},[220,55952,55953,55955,55957],{"class":222,"line":644},[220,55954,402],{"class":264},[220,55956,347],{"class":420},[220,55958,359],{"class":264},[212,55960,55962],{"className":251,"code":55961,"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,55963,55964,55974,55978,55992,55996,56005,56013,56017,56021],{"__ignoreMap":178},[220,55965,55966,55968,55970,55972],{"class":222,"line":223},[220,55967,261],{"class":260},[220,55969,11512],{"class":264},[220,55971,268],{"class":260},[220,55973,4007],{"class":230},[220,55975,55976],{"class":222,"line":179},[220,55977,647],{"emptyLinePlaceholder":194},[220,55979,55980,55982,55984,55986,55988,55990],{"class":222,"line":389},[220,55981,1735],{"class":260},[220,55983,1738],{"class":420},[220,55985,1741],{"class":260},[220,55987,1744],{"class":260},[220,55989,1747],{"class":226},[220,55991,1750],{"class":264},[220,55993,55994],{"class":222,"line":399},[220,55995,1765],{"class":264},[220,55997,55998,56000,56003],{"class":222,"line":644},[220,55999,1770],{"class":264},[220,56001,56002],{"class":230},"'IrisWipe'",[220,56004,7009],{"class":264},[220,56006,56007,56009,56011],{"class":222,"line":650},[220,56008,7014],{"class":264},[220,56010,3206],{"class":230},[220,56012,2465],{"class":264},[220,56014,56015],{"class":222,"line":656},[220,56016,7031],{"class":264},[220,56018,56019],{"class":222,"line":673},[220,56020,1787],{"class":264},[220,56022,56023],{"class":222,"line":682},[220,56024,1792],{"class":264},[1504,56026,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56028},[56029,56030],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Firiswipe",{"title":55762,"description":55770},"docs\u002Fcomponents\u002FIrisWipe","Q-Y0lKxKc9uQ4PXBs4DXeOvl14Gh9zZU_1lh2dK4pUU",{"id":56037,"title":56038,"body":56039,"category":33063,"componentType":25877,"description":56046,"extension":191,"meta":56231,"navigation":194,"path":56232,"requiresChild":32530,"seo":56233,"stem":56234,"__hash__":56235},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":56040,"toc":56227},[56041,56044,56047,56049,56051,56054,56056,56225],[11,56042,56038],{"id":56043},"isometriccubes",[15,56045,56046],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[31911,56048],{"component":56038},[23,56050,31915],{"id":26533},[31917,56052],{":props":56053},"[{\"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,56055,31923],{"id":31922},[246,56057,56058,56087,56115,56143,56171],{":tabs":1557},[212,56059,56061],{"className":334,"code":56060,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,56062,56063,56071,56079],{"__ignoreMap":178},[220,56064,56065,56067,56069],{"class":222,"line":223},[220,56066,343],{"class":264},[220,56068,347],{"class":346},[220,56070,359],{"class":264},[220,56072,56073,56075,56077],{"class":222,"line":179},[220,56074,364],{"class":264},[220,56076,56038],{"class":346},[220,56078,386],{"class":264},[220,56080,56081,56083,56085],{"class":222,"line":389},[220,56082,402],{"class":264},[220,56084,347],{"class":346},[220,56086,359],{"class":264},[212,56088,56089],{"className":409,"code":56060,"language":411,"meta":178,"style":178},[99,56090,56091,56099,56107],{"__ignoreMap":178},[220,56092,56093,56095,56097],{"class":222,"line":223},[220,56094,343],{"class":264},[220,56096,347],{"class":420},[220,56098,359],{"class":264},[220,56100,56101,56103,56105],{"class":222,"line":179},[220,56102,364],{"class":264},[220,56104,56038],{"class":420},[220,56106,386],{"class":264},[220,56108,56109,56111,56113],{"class":222,"line":389},[220,56110,402],{"class":264},[220,56112,347],{"class":420},[220,56114,359],{"class":264},[212,56116,56117],{"className":2844,"code":56060,"language":2846,"meta":178,"style":178},[99,56118,56119,56127,56135],{"__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,56038],{"class":420},[220,56134,386],{"class":264},[220,56136,56137,56139,56141],{"class":222,"line":389},[220,56138,402],{"class":264},[220,56140,347],{"class":420},[220,56142,359],{"class":264},[212,56144,56145],{"className":468,"code":56060,"language":469,"meta":178,"style":178},[99,56146,56147,56155,56163],{"__ignoreMap":178},[220,56148,56149,56151,56153],{"class":222,"line":223},[220,56150,343],{"class":264},[220,56152,347],{"class":420},[220,56154,359],{"class":264},[220,56156,56157,56159,56161],{"class":222,"line":179},[220,56158,364],{"class":264},[220,56160,56038],{"class":420},[220,56162,386],{"class":264},[220,56164,56165,56167,56169],{"class":222,"line":389},[220,56166,402],{"class":264},[220,56168,347],{"class":420},[220,56170,359],{"class":264},[212,56172,56174],{"className":251,"code":56173,"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,56175,56176,56186,56190,56204,56208,56217,56221],{"__ignoreMap":178},[220,56177,56178,56180,56182,56184],{"class":222,"line":223},[220,56179,261],{"class":260},[220,56181,11512],{"class":264},[220,56183,268],{"class":260},[220,56185,4007],{"class":230},[220,56187,56188],{"class":222,"line":179},[220,56189,647],{"emptyLinePlaceholder":194},[220,56191,56192,56194,56196,56198,56200,56202],{"class":222,"line":389},[220,56193,1735],{"class":260},[220,56195,1738],{"class":420},[220,56197,1741],{"class":260},[220,56199,1744],{"class":260},[220,56201,1747],{"class":226},[220,56203,1750],{"class":264},[220,56205,56206],{"class":222,"line":399},[220,56207,1765],{"class":264},[220,56209,56210,56212,56215],{"class":222,"line":644},[220,56211,1770],{"class":264},[220,56213,56214],{"class":230},"'IsometricCubes'",[220,56216,2465],{"class":264},[220,56218,56219],{"class":222,"line":650},[220,56220,1787],{"class":264},[220,56222,56223],{"class":222,"line":656},[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\u002Fisometriccubes",{"title":56038,"description":56046},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":56237,"title":56238,"body":56239,"category":33396,"componentType":25883,"description":56246,"extension":191,"meta":56507,"navigation":194,"path":56508,"requiresChild":194,"seo":56509,"stem":56510,"__hash__":56511},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":56240,"toc":56503},[56241,56244,56247,56249,56251,56254,56256,56501],[11,56242,56238],{"id":56243},"kaleidoscope",[15,56245,56246],{},"Create a kaleidoscope effect with radial mirrored segments",[31911,56248],{"component":56238},[23,56250,31915],{"id":26533},[31917,56252],{":props":56253},"[{\"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,56255,31923],{"id":31922},[246,56257,56258,56303,56347,56391,56435],{":tabs":1557},[212,56259,56261],{"className":334,"code":56260,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,56262,56263,56271,56279,56287,56295],{"__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,359],{"class":264},[220,56280,56281,56283,56285],{"class":222,"line":389},[220,56282,2550],{"class":264},[220,56284,2553],{"class":346},[220,56286,386],{"class":264},[220,56288,56289,56291,56293],{"class":222,"line":399},[220,56290,2567],{"class":264},[220,56292,56238],{"class":346},[220,56294,359],{"class":264},[220,56296,56297,56299,56301],{"class":222,"line":644},[220,56298,402],{"class":264},[220,56300,347],{"class":346},[220,56302,359],{"class":264},[212,56304,56305],{"className":409,"code":56260,"language":411,"meta":178,"style":178},[99,56306,56307,56315,56323,56331,56339],{"__ignoreMap":178},[220,56308,56309,56311,56313],{"class":222,"line":223},[220,56310,343],{"class":264},[220,56312,347],{"class":420},[220,56314,359],{"class":264},[220,56316,56317,56319,56321],{"class":222,"line":179},[220,56318,364],{"class":264},[220,56320,56238],{"class":420},[220,56322,359],{"class":264},[220,56324,56325,56327,56329],{"class":222,"line":389},[220,56326,2550],{"class":264},[220,56328,2553],{"class":420},[220,56330,386],{"class":264},[220,56332,56333,56335,56337],{"class":222,"line":399},[220,56334,2567],{"class":264},[220,56336,56238],{"class":420},[220,56338,359],{"class":264},[220,56340,56341,56343,56345],{"class":222,"line":644},[220,56342,402],{"class":264},[220,56344,347],{"class":420},[220,56346,359],{"class":264},[212,56348,56349],{"className":2844,"code":56260,"language":2846,"meta":178,"style":178},[99,56350,56351,56359,56367,56375,56383],{"__ignoreMap":178},[220,56352,56353,56355,56357],{"class":222,"line":223},[220,56354,343],{"class":264},[220,56356,347],{"class":420},[220,56358,359],{"class":264},[220,56360,56361,56363,56365],{"class":222,"line":179},[220,56362,364],{"class":264},[220,56364,56238],{"class":420},[220,56366,359],{"class":264},[220,56368,56369,56371,56373],{"class":222,"line":389},[220,56370,2550],{"class":264},[220,56372,2553],{"class":420},[220,56374,386],{"class":264},[220,56376,56377,56379,56381],{"class":222,"line":399},[220,56378,2567],{"class":264},[220,56380,56238],{"class":420},[220,56382,359],{"class":264},[220,56384,56385,56387,56389],{"class":222,"line":644},[220,56386,402],{"class":264},[220,56388,347],{"class":420},[220,56390,359],{"class":264},[212,56392,56393],{"className":468,"code":56260,"language":469,"meta":178,"style":178},[99,56394,56395,56403,56411,56419,56427],{"__ignoreMap":178},[220,56396,56397,56399,56401],{"class":222,"line":223},[220,56398,343],{"class":264},[220,56400,347],{"class":420},[220,56402,359],{"class":264},[220,56404,56405,56407,56409],{"class":222,"line":179},[220,56406,364],{"class":264},[220,56408,56238],{"class":420},[220,56410,359],{"class":264},[220,56412,56413,56415,56417],{"class":222,"line":389},[220,56414,2550],{"class":264},[220,56416,2553],{"class":420},[220,56418,386],{"class":264},[220,56420,56421,56423,56425],{"class":222,"line":399},[220,56422,2567],{"class":264},[220,56424,56238],{"class":420},[220,56426,359],{"class":264},[220,56428,56429,56431,56433],{"class":222,"line":644},[220,56430,402],{"class":264},[220,56432,347],{"class":420},[220,56434,359],{"class":264},[212,56436,56438],{"className":251,"code":56437,"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,56439,56440,56450,56454,56468,56472,56481,56489,56493,56497],{"__ignoreMap":178},[220,56441,56442,56444,56446,56448],{"class":222,"line":223},[220,56443,261],{"class":260},[220,56445,11512],{"class":264},[220,56447,268],{"class":260},[220,56449,4007],{"class":230},[220,56451,56452],{"class":222,"line":179},[220,56453,647],{"emptyLinePlaceholder":194},[220,56455,56456,56458,56460,56462,56464,56466],{"class":222,"line":389},[220,56457,1735],{"class":260},[220,56459,1738],{"class":420},[220,56461,1741],{"class":260},[220,56463,1744],{"class":260},[220,56465,1747],{"class":226},[220,56467,1750],{"class":264},[220,56469,56470],{"class":222,"line":399},[220,56471,1765],{"class":264},[220,56473,56474,56476,56479],{"class":222,"line":644},[220,56475,1770],{"class":264},[220,56477,56478],{"class":230},"'Kaleidoscope'",[220,56480,7009],{"class":264},[220,56482,56483,56485,56487],{"class":222,"line":650},[220,56484,7014],{"class":264},[220,56486,3206],{"class":230},[220,56488,2465],{"class":264},[220,56490,56491],{"class":222,"line":656},[220,56492,7031],{"class":264},[220,56494,56495],{"class":222,"line":673},[220,56496,1787],{"class":264},[220,56498,56499],{"class":222,"line":682},[220,56500,1792],{"class":264},[1504,56502,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56504},[56505,56506],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":56238,"description":56246},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":56513,"title":56514,"body":56515,"category":32806,"componentType":25883,"description":56522,"extension":191,"meta":56783,"navigation":194,"path":56784,"requiresChild":194,"seo":56785,"stem":56786,"__hash__":56787},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":56516,"toc":56779},[56517,56520,56523,56525,56527,56530,56532,56777],[11,56518,56514],{"id":56519},"keyframes",[15,56521,56522],{},"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,56524],{"component":56514},[23,56526,31915],{"id":26533},[31917,56528],{":props":56529},"[{\"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,56531,31923],{"id":31922},[246,56533,56534,56579,56623,56667,56711],{":tabs":1557},[212,56535,56537],{"className":334,"code":56536,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,56538,56539,56547,56555,56563,56571],{"__ignoreMap":178},[220,56540,56541,56543,56545],{"class":222,"line":223},[220,56542,343],{"class":264},[220,56544,347],{"class":346},[220,56546,359],{"class":264},[220,56548,56549,56551,56553],{"class":222,"line":179},[220,56550,364],{"class":264},[220,56552,56514],{"class":346},[220,56554,359],{"class":264},[220,56556,56557,56559,56561],{"class":222,"line":389},[220,56558,2550],{"class":264},[220,56560,2553],{"class":346},[220,56562,386],{"class":264},[220,56564,56565,56567,56569],{"class":222,"line":399},[220,56566,2567],{"class":264},[220,56568,56514],{"class":346},[220,56570,359],{"class":264},[220,56572,56573,56575,56577],{"class":222,"line":644},[220,56574,402],{"class":264},[220,56576,347],{"class":346},[220,56578,359],{"class":264},[212,56580,56581],{"className":409,"code":56536,"language":411,"meta":178,"style":178},[99,56582,56583,56591,56599,56607,56615],{"__ignoreMap":178},[220,56584,56585,56587,56589],{"class":222,"line":223},[220,56586,343],{"class":264},[220,56588,347],{"class":420},[220,56590,359],{"class":264},[220,56592,56593,56595,56597],{"class":222,"line":179},[220,56594,364],{"class":264},[220,56596,56514],{"class":420},[220,56598,359],{"class":264},[220,56600,56601,56603,56605],{"class":222,"line":389},[220,56602,2550],{"class":264},[220,56604,2553],{"class":420},[220,56606,386],{"class":264},[220,56608,56609,56611,56613],{"class":222,"line":399},[220,56610,2567],{"class":264},[220,56612,56514],{"class":420},[220,56614,359],{"class":264},[220,56616,56617,56619,56621],{"class":222,"line":644},[220,56618,402],{"class":264},[220,56620,347],{"class":420},[220,56622,359],{"class":264},[212,56624,56625],{"className":2844,"code":56536,"language":2846,"meta":178,"style":178},[99,56626,56627,56635,56643,56651,56659],{"__ignoreMap":178},[220,56628,56629,56631,56633],{"class":222,"line":223},[220,56630,343],{"class":264},[220,56632,347],{"class":420},[220,56634,359],{"class":264},[220,56636,56637,56639,56641],{"class":222,"line":179},[220,56638,364],{"class":264},[220,56640,56514],{"class":420},[220,56642,359],{"class":264},[220,56644,56645,56647,56649],{"class":222,"line":389},[220,56646,2550],{"class":264},[220,56648,2553],{"class":420},[220,56650,386],{"class":264},[220,56652,56653,56655,56657],{"class":222,"line":399},[220,56654,2567],{"class":264},[220,56656,56514],{"class":420},[220,56658,359],{"class":264},[220,56660,56661,56663,56665],{"class":222,"line":644},[220,56662,402],{"class":264},[220,56664,347],{"class":420},[220,56666,359],{"class":264},[212,56668,56669],{"className":468,"code":56536,"language":469,"meta":178,"style":178},[99,56670,56671,56679,56687,56695,56703],{"__ignoreMap":178},[220,56672,56673,56675,56677],{"class":222,"line":223},[220,56674,343],{"class":264},[220,56676,347],{"class":420},[220,56678,359],{"class":264},[220,56680,56681,56683,56685],{"class":222,"line":179},[220,56682,364],{"class":264},[220,56684,56514],{"class":420},[220,56686,359],{"class":264},[220,56688,56689,56691,56693],{"class":222,"line":389},[220,56690,2550],{"class":264},[220,56692,2553],{"class":420},[220,56694,386],{"class":264},[220,56696,56697,56699,56701],{"class":222,"line":399},[220,56698,2567],{"class":264},[220,56700,56514],{"class":420},[220,56702,359],{"class":264},[220,56704,56705,56707,56709],{"class":222,"line":644},[220,56706,402],{"class":264},[220,56708,347],{"class":420},[220,56710,359],{"class":264},[212,56712,56714],{"className":251,"code":56713,"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,56715,56716,56726,56730,56744,56748,56757,56765,56769,56773],{"__ignoreMap":178},[220,56717,56718,56720,56722,56724],{"class":222,"line":223},[220,56719,261],{"class":260},[220,56721,11512],{"class":264},[220,56723,268],{"class":260},[220,56725,4007],{"class":230},[220,56727,56728],{"class":222,"line":179},[220,56729,647],{"emptyLinePlaceholder":194},[220,56731,56732,56734,56736,56738,56740,56742],{"class":222,"line":389},[220,56733,1735],{"class":260},[220,56735,1738],{"class":420},[220,56737,1741],{"class":260},[220,56739,1744],{"class":260},[220,56741,1747],{"class":226},[220,56743,1750],{"class":264},[220,56745,56746],{"class":222,"line":399},[220,56747,1765],{"class":264},[220,56749,56750,56752,56755],{"class":222,"line":644},[220,56751,1770],{"class":264},[220,56753,56754],{"class":230},"'KeyFrames'",[220,56756,7009],{"class":264},[220,56758,56759,56761,56763],{"class":222,"line":650},[220,56760,7014],{"class":264},[220,56762,3206],{"class":230},[220,56764,2465],{"class":264},[220,56766,56767],{"class":222,"line":656},[220,56768,7031],{"class":264},[220,56770,56771],{"class":222,"line":673},[220,56772,1787],{"class":264},[220,56774,56775],{"class":222,"line":682},[220,56776,1792],{"class":264},[1504,56778,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56780},[56781,56782],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":56514,"description":56522},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":56789,"title":56790,"body":56791,"category":32806,"componentType":25883,"description":57062,"extension":191,"meta":57063,"navigation":194,"path":57064,"requiresChild":194,"seo":57065,"stem":57066,"__hash__":57067},"components\u002Fdocs\u002Fcomponents\u002FLensDistortion.md","LensDistortion",{"type":8,"value":56792,"toc":57058},[56793,56796,56802,56804,56806,56809,56811,57056],[11,56794,56790],{"id":56795},"lensdistortion",[15,56797,56798,56799,4836],{},"Split content into shifting chromatic layers with barrel or pincushion lens warp. Powered by ",[56,56800,53882],{"href":53880,"rel":56801},[167],[31911,56803],{"component":56790},[23,56805,31915],{"id":26533},[31917,56807],{":props":56808},"[{\"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,56810,31923],{"id":31922},[246,56812,56813,56858,56902,56946,56990],{":tabs":1557},[212,56814,56816],{"className":334,"code":56815,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensDistortion>\n \u003CCircle \u002F>\n \u003C\u002FLensDistortion>\n\u003C\u002FShader>\n",[99,56817,56818,56826,56834,56842,56850],{"__ignoreMap":178},[220,56819,56820,56822,56824],{"class":222,"line":223},[220,56821,343],{"class":264},[220,56823,347],{"class":346},[220,56825,359],{"class":264},[220,56827,56828,56830,56832],{"class":222,"line":179},[220,56829,364],{"class":264},[220,56831,56790],{"class":346},[220,56833,359],{"class":264},[220,56835,56836,56838,56840],{"class":222,"line":389},[220,56837,2550],{"class":264},[220,56839,2553],{"class":346},[220,56841,386],{"class":264},[220,56843,56844,56846,56848],{"class":222,"line":399},[220,56845,2567],{"class":264},[220,56847,56790],{"class":346},[220,56849,359],{"class":264},[220,56851,56852,56854,56856],{"class":222,"line":644},[220,56853,402],{"class":264},[220,56855,347],{"class":346},[220,56857,359],{"class":264},[212,56859,56860],{"className":409,"code":56815,"language":411,"meta":178,"style":178},[99,56861,56862,56870,56878,56886,56894],{"__ignoreMap":178},[220,56863,56864,56866,56868],{"class":222,"line":223},[220,56865,343],{"class":264},[220,56867,347],{"class":420},[220,56869,359],{"class":264},[220,56871,56872,56874,56876],{"class":222,"line":179},[220,56873,364],{"class":264},[220,56875,56790],{"class":420},[220,56877,359],{"class":264},[220,56879,56880,56882,56884],{"class":222,"line":389},[220,56881,2550],{"class":264},[220,56883,2553],{"class":420},[220,56885,386],{"class":264},[220,56887,56888,56890,56892],{"class":222,"line":399},[220,56889,2567],{"class":264},[220,56891,56790],{"class":420},[220,56893,359],{"class":264},[220,56895,56896,56898,56900],{"class":222,"line":644},[220,56897,402],{"class":264},[220,56899,347],{"class":420},[220,56901,359],{"class":264},[212,56903,56904],{"className":2844,"code":56815,"language":2846,"meta":178,"style":178},[99,56905,56906,56914,56922,56930,56938],{"__ignoreMap":178},[220,56907,56908,56910,56912],{"class":222,"line":223},[220,56909,343],{"class":264},[220,56911,347],{"class":420},[220,56913,359],{"class":264},[220,56915,56916,56918,56920],{"class":222,"line":179},[220,56917,364],{"class":264},[220,56919,56790],{"class":420},[220,56921,359],{"class":264},[220,56923,56924,56926,56928],{"class":222,"line":389},[220,56925,2550],{"class":264},[220,56927,2553],{"class":420},[220,56929,386],{"class":264},[220,56931,56932,56934,56936],{"class":222,"line":399},[220,56933,2567],{"class":264},[220,56935,56790],{"class":420},[220,56937,359],{"class":264},[220,56939,56940,56942,56944],{"class":222,"line":644},[220,56941,402],{"class":264},[220,56943,347],{"class":420},[220,56945,359],{"class":264},[212,56947,56948],{"className":468,"code":56815,"language":469,"meta":178,"style":178},[99,56949,56950,56958,56966,56974,56982],{"__ignoreMap":178},[220,56951,56952,56954,56956],{"class":222,"line":223},[220,56953,343],{"class":264},[220,56955,347],{"class":420},[220,56957,359],{"class":264},[220,56959,56960,56962,56964],{"class":222,"line":179},[220,56961,364],{"class":264},[220,56963,56790],{"class":420},[220,56965,359],{"class":264},[220,56967,56968,56970,56972],{"class":222,"line":389},[220,56969,2550],{"class":264},[220,56971,2553],{"class":420},[220,56973,386],{"class":264},[220,56975,56976,56978,56980],{"class":222,"line":399},[220,56977,2567],{"class":264},[220,56979,56790],{"class":420},[220,56981,359],{"class":264},[220,56983,56984,56986,56988],{"class":222,"line":644},[220,56985,402],{"class":264},[220,56987,347],{"class":420},[220,56989,359],{"class":264},[212,56991,56993],{"className":251,"code":56992,"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,56994,56995,57005,57009,57023,57027,57036,57044,57048,57052],{"__ignoreMap":178},[220,56996,56997,56999,57001,57003],{"class":222,"line":223},[220,56998,261],{"class":260},[220,57000,11512],{"class":264},[220,57002,268],{"class":260},[220,57004,4007],{"class":230},[220,57006,57007],{"class":222,"line":179},[220,57008,647],{"emptyLinePlaceholder":194},[220,57010,57011,57013,57015,57017,57019,57021],{"class":222,"line":389},[220,57012,1735],{"class":260},[220,57014,1738],{"class":420},[220,57016,1741],{"class":260},[220,57018,1744],{"class":260},[220,57020,1747],{"class":226},[220,57022,1750],{"class":264},[220,57024,57025],{"class":222,"line":399},[220,57026,1765],{"class":264},[220,57028,57029,57031,57034],{"class":222,"line":644},[220,57030,1770],{"class":264},[220,57032,57033],{"class":230},"'LensDistortion'",[220,57035,7009],{"class":264},[220,57037,57038,57040,57042],{"class":222,"line":650},[220,57039,7014],{"class":264},[220,57041,3206],{"class":230},[220,57043,2465],{"class":264},[220,57045,57046],{"class":222,"line":656},[220,57047,7031],{"class":264},[220,57049,57050],{"class":222,"line":673},[220,57051,1787],{"class":264},[220,57053,57054],{"class":222,"line":682},[220,57055,1792],{"class":264},[1504,57057,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":57059},[57060,57061],{"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":56790,"description":57062},"docs\u002Fcomponents\u002FLensDistortion","XGObhMezsAfFiRCCmEM_AeYd8iXDTD0yiv-uio3nOXc",{"id":57069,"title":57070,"body":57071,"category":32806,"componentType":25877,"description":57078,"extension":191,"meta":57318,"navigation":194,"path":57319,"requiresChild":32530,"seo":57320,"stem":57321,"__hash__":57322},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":57072,"toc":57314},[57073,57076,57079,57081,57083,57086,57088,57312],[11,57074,57070],{"id":57075},"lensflare",[15,57077,57078],{},"Realistic camera lens flare with artifacts.",[31911,57080],{"component":57070},[23,57082,31915],{"id":26533},[31917,57084],{":props":57085},"[{\"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,57087,31923],{"id":31922},[246,57089,57090,57129,57172,57212,57254],{":tabs":1557},[212,57091,57093],{"className":334,"code":57092,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,57094,57095,57103,57109,57117,57121],{"__ignoreMap":178},[220,57096,57097,57099,57101],{"class":222,"line":223},[220,57098,343],{"class":264},[220,57100,347],{"class":346},[220,57102,359],{"class":264},[220,57104,57105,57107],{"class":222,"line":179},[220,57106,364],{"class":264},[220,57108,20357],{"class":346},[220,57110,57111,57113,57115],{"class":222,"line":389},[220,57112,20371],{"class":226},[220,57114,353],{"class":264},[220,57116,42158],{"class":230},[220,57118,57119],{"class":222,"line":399},[220,57120,1234],{"class":264},[220,57122,57123,57125,57127],{"class":222,"line":644},[220,57124,402],{"class":264},[220,57126,347],{"class":346},[220,57128,359],{"class":264},[212,57130,57132],{"className":409,"code":57131,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,57133,57134,57142,57148,57160,57164],{"__ignoreMap":178},[220,57135,57136,57138,57140],{"class":222,"line":223},[220,57137,343],{"class":264},[220,57139,347],{"class":420},[220,57141,359],{"class":264},[220,57143,57144,57146],{"class":222,"line":179},[220,57145,364],{"class":264},[220,57147,20357],{"class":420},[220,57149,57150,57152,57154,57156,57158],{"class":222,"line":389},[220,57151,20482],{"class":226},[220,57153,353],{"class":260},[220,57155,743],{"class":264},[220,57157,7754],{"class":420},[220,57159,749],{"class":264},[220,57161,57162],{"class":222,"line":399},[220,57163,1234],{"class":264},[220,57165,57166,57168,57170],{"class":222,"line":644},[220,57167,402],{"class":264},[220,57169,347],{"class":420},[220,57171,359],{"class":264},[212,57173,57174],{"className":2844,"code":57131,"language":2846,"meta":178,"style":178},[99,57175,57176,57184,57190,57200,57204],{"__ignoreMap":178},[220,57177,57178,57180,57182],{"class":222,"line":223},[220,57179,343],{"class":264},[220,57181,347],{"class":420},[220,57183,359],{"class":264},[220,57185,57186,57188],{"class":222,"line":179},[220,57187,364],{"class":264},[220,57189,20357],{"class":420},[220,57191,57192,57194,57196,57198],{"class":222,"line":389},[220,57193,20482],{"class":226},[220,57195,29871],{"class":264},[220,57197,7754],{"class":420},[220,57199,749],{"class":264},[220,57201,57202],{"class":222,"line":399},[220,57203,1234],{"class":264},[220,57205,57206,57208,57210],{"class":222,"line":644},[220,57207,402],{"class":264},[220,57209,347],{"class":420},[220,57211,359],{"class":264},[212,57213,57214],{"className":468,"code":57131,"language":469,"meta":178,"style":178},[99,57215,57216,57224,57230,57242,57246],{"__ignoreMap":178},[220,57217,57218,57220,57222],{"class":222,"line":223},[220,57219,343],{"class":264},[220,57221,347],{"class":420},[220,57223,359],{"class":264},[220,57225,57226,57228],{"class":222,"line":179},[220,57227,364],{"class":264},[220,57229,20357],{"class":420},[220,57231,57232,57234,57236,57238,57240],{"class":222,"line":389},[220,57233,20482],{"class":226},[220,57235,353],{"class":260},[220,57237,743],{"class":264},[220,57239,7754],{"class":420},[220,57241,749],{"class":264},[220,57243,57244],{"class":222,"line":399},[220,57245,1234],{"class":264},[220,57247,57248,57250,57252],{"class":222,"line":644},[220,57249,402],{"class":264},[220,57251,347],{"class":420},[220,57253,359],{"class":264},[212,57255,57257],{"className":251,"code":57256,"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,57258,57259,57269,57273,57287,57291,57304,57308],{"__ignoreMap":178},[220,57260,57261,57263,57265,57267],{"class":222,"line":223},[220,57262,261],{"class":260},[220,57264,11512],{"class":264},[220,57266,268],{"class":260},[220,57268,4007],{"class":230},[220,57270,57271],{"class":222,"line":179},[220,57272,647],{"emptyLinePlaceholder":194},[220,57274,57275,57277,57279,57281,57283,57285],{"class":222,"line":389},[220,57276,1735],{"class":260},[220,57278,1738],{"class":420},[220,57280,1741],{"class":260},[220,57282,1744],{"class":260},[220,57284,1747],{"class":226},[220,57286,1750],{"class":264},[220,57288,57289],{"class":222,"line":399},[220,57290,1765],{"class":264},[220,57292,57293,57295,57298,57300,57302],{"class":222,"line":644},[220,57294,1770],{"class":264},[220,57296,57297],{"class":230},"'LensFlare'",[220,57299,32203],{"class":264},[220,57301,7754],{"class":420},[220,57303,1782],{"class":264},[220,57305,57306],{"class":222,"line":650},[220,57307,1787],{"class":264},[220,57309,57310],{"class":222,"line":656},[220,57311,1792],{"class":264},[1504,57313,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57315},[57316,57317],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":57070,"description":57078},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":57324,"title":57325,"body":57326,"category":36569,"componentType":25877,"description":57578,"extension":191,"meta":57579,"navigation":194,"path":57580,"requiresChild":32530,"seo":57581,"stem":57582,"__hash__":57583},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":57327,"toc":57574},[57328,57331,57337,57339,57341,57344,57346,57572],[11,57329,57325],{"id":57330},"lightedge",[15,57332,57333,57334,4836],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,57335,53882],{"href":53880,"rel":57336},[167],[31911,57338],{"component":57325},[23,57340,31915],{"id":26533},[31917,57342],{":props":57343},"[{\"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,57345,31923],{"id":31922},[246,57347,57348,57389,57432,57472,57514],{":tabs":1557},[212,57349,57351],{"className":334,"code":57350,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,57352,57353,57361,57368,57377,57381],{"__ignoreMap":178},[220,57354,57355,57357,57359],{"class":222,"line":223},[220,57356,343],{"class":264},[220,57358,347],{"class":346},[220,57360,359],{"class":264},[220,57362,57363,57365],{"class":222,"line":179},[220,57364,364],{"class":264},[220,57366,57367],{"class":346},"LightEdge\n",[220,57369,57370,57372,57374],{"class":222,"line":389},[220,57371,20371],{"class":226},[220,57373,353],{"class":264},[220,57375,57376],{"class":230},"\"0.6\"\n",[220,57378,57379],{"class":222,"line":399},[220,57380,1234],{"class":264},[220,57382,57383,57385,57387],{"class":222,"line":644},[220,57384,402],{"class":264},[220,57386,347],{"class":346},[220,57388,359],{"class":264},[212,57390,57392],{"className":409,"code":57391,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,57393,57394,57402,57408,57420,57424],{"__ignoreMap":178},[220,57395,57396,57398,57400],{"class":222,"line":223},[220,57397,343],{"class":264},[220,57399,347],{"class":420},[220,57401,359],{"class":264},[220,57403,57404,57406],{"class":222,"line":179},[220,57405,364],{"class":264},[220,57407,57367],{"class":420},[220,57409,57410,57412,57414,57416,57418],{"class":222,"line":389},[220,57411,20482],{"class":226},[220,57413,353],{"class":260},[220,57415,743],{"class":264},[220,57417,8236],{"class":420},[220,57419,749],{"class":264},[220,57421,57422],{"class":222,"line":399},[220,57423,1234],{"class":264},[220,57425,57426,57428,57430],{"class":222,"line":644},[220,57427,402],{"class":264},[220,57429,347],{"class":420},[220,57431,359],{"class":264},[212,57433,57434],{"className":2844,"code":57391,"language":2846,"meta":178,"style":178},[99,57435,57436,57444,57450,57460,57464],{"__ignoreMap":178},[220,57437,57438,57440,57442],{"class":222,"line":223},[220,57439,343],{"class":264},[220,57441,347],{"class":420},[220,57443,359],{"class":264},[220,57445,57446,57448],{"class":222,"line":179},[220,57447,364],{"class":264},[220,57449,57367],{"class":420},[220,57451,57452,57454,57456,57458],{"class":222,"line":389},[220,57453,20482],{"class":226},[220,57455,29871],{"class":264},[220,57457,8236],{"class":420},[220,57459,749],{"class":264},[220,57461,57462],{"class":222,"line":399},[220,57463,1234],{"class":264},[220,57465,57466,57468,57470],{"class":222,"line":644},[220,57467,402],{"class":264},[220,57469,347],{"class":420},[220,57471,359],{"class":264},[212,57473,57474],{"className":468,"code":57391,"language":469,"meta":178,"style":178},[99,57475,57476,57484,57490,57502,57506],{"__ignoreMap":178},[220,57477,57478,57480,57482],{"class":222,"line":223},[220,57479,343],{"class":264},[220,57481,347],{"class":420},[220,57483,359],{"class":264},[220,57485,57486,57488],{"class":222,"line":179},[220,57487,364],{"class":264},[220,57489,57367],{"class":420},[220,57491,57492,57494,57496,57498,57500],{"class":222,"line":389},[220,57493,20482],{"class":226},[220,57495,353],{"class":260},[220,57497,743],{"class":264},[220,57499,8236],{"class":420},[220,57501,749],{"class":264},[220,57503,57504],{"class":222,"line":399},[220,57505,1234],{"class":264},[220,57507,57508,57510,57512],{"class":222,"line":644},[220,57509,402],{"class":264},[220,57511,347],{"class":420},[220,57513,359],{"class":264},[212,57515,57517],{"className":251,"code":57516,"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,57518,57519,57529,57533,57547,57551,57564,57568],{"__ignoreMap":178},[220,57520,57521,57523,57525,57527],{"class":222,"line":223},[220,57522,261],{"class":260},[220,57524,11512],{"class":264},[220,57526,268],{"class":260},[220,57528,4007],{"class":230},[220,57530,57531],{"class":222,"line":179},[220,57532,647],{"emptyLinePlaceholder":194},[220,57534,57535,57537,57539,57541,57543,57545],{"class":222,"line":389},[220,57536,1735],{"class":260},[220,57538,1738],{"class":420},[220,57540,1741],{"class":260},[220,57542,1744],{"class":260},[220,57544,1747],{"class":226},[220,57546,1750],{"class":264},[220,57548,57549],{"class":222,"line":399},[220,57550,1765],{"class":264},[220,57552,57553,57555,57558,57560,57562],{"class":222,"line":644},[220,57554,1770],{"class":264},[220,57556,57557],{"class":230},"'LightEdge'",[220,57559,32203],{"class":264},[220,57561,8236],{"class":420},[220,57563,1782],{"class":264},[220,57565,57566],{"class":222,"line":650},[220,57567,1787],{"class":264},[220,57569,57570],{"class":222,"line":656},[220,57571,1792],{"class":264},[1504,57573,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57575},[57576,57577],{"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":57325,"description":57578},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":57585,"title":57586,"body":57587,"category":32806,"componentType":25883,"description":57594,"extension":191,"meta":57911,"navigation":194,"path":57912,"requiresChild":194,"seo":57913,"stem":57914,"__hash__":57915},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":57588,"toc":57907},[57589,57592,57595,57597,57599,57602,57604,57905],[11,57590,57586],{"id":57591},"lightleak",[15,57593,57594],{},"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,57596],{"component":57586},[23,57598,31915],{"id":26533},[31917,57600],{":props":57601},"[{\"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,57603,31923],{"id":31922},[246,57605,57606,57662,57721,57777,57835],{":tabs":1557},[212,57607,57609],{"className":334,"code":57608,"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,57610,57611,57619,57626,57634,57638,57646,57654],{"__ignoreMap":178},[220,57612,57613,57615,57617],{"class":222,"line":223},[220,57614,343],{"class":264},[220,57616,347],{"class":346},[220,57618,359],{"class":264},[220,57620,57621,57623],{"class":222,"line":179},[220,57622,364],{"class":264},[220,57624,57625],{"class":346},"LightLeak\n",[220,57627,57628,57630,57632],{"class":222,"line":389},[220,57629,20371],{"class":226},[220,57631,353],{"class":264},[220,57633,18108],{"class":230},[220,57635,57636],{"class":222,"line":399},[220,57637,31959],{"class":264},[220,57639,57640,57642,57644],{"class":222,"line":644},[220,57641,2550],{"class":264},[220,57643,2553],{"class":346},[220,57645,386],{"class":264},[220,57647,57648,57650,57652],{"class":222,"line":650},[220,57649,2567],{"class":264},[220,57651,57586],{"class":346},[220,57653,359],{"class":264},[220,57655,57656,57658,57660],{"class":222,"line":656},[220,57657,402],{"class":264},[220,57659,347],{"class":346},[220,57661,359],{"class":264},[212,57663,57665],{"className":409,"code":57664,"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,57666,57667,57675,57681,57693,57697,57705,57713],{"__ignoreMap":178},[220,57668,57669,57671,57673],{"class":222,"line":223},[220,57670,343],{"class":264},[220,57672,347],{"class":420},[220,57674,359],{"class":264},[220,57676,57677,57679],{"class":222,"line":179},[220,57678,364],{"class":264},[220,57680,57625],{"class":420},[220,57682,57683,57685,57687,57689,57691],{"class":222,"line":389},[220,57684,20482],{"class":226},[220,57686,353],{"class":260},[220,57688,743],{"class":264},[220,57690,18192],{"class":420},[220,57692,749],{"class":264},[220,57694,57695],{"class":222,"line":399},[220,57696,31959],{"class":264},[220,57698,57699,57701,57703],{"class":222,"line":644},[220,57700,2550],{"class":264},[220,57702,2553],{"class":420},[220,57704,386],{"class":264},[220,57706,57707,57709,57711],{"class":222,"line":650},[220,57708,2567],{"class":264},[220,57710,57586],{"class":420},[220,57712,359],{"class":264},[220,57714,57715,57717,57719],{"class":222,"line":656},[220,57716,402],{"class":264},[220,57718,347],{"class":420},[220,57720,359],{"class":264},[212,57722,57723],{"className":2844,"code":57664,"language":2846,"meta":178,"style":178},[99,57724,57725,57733,57739,57749,57753,57761,57769],{"__ignoreMap":178},[220,57726,57727,57729,57731],{"class":222,"line":223},[220,57728,343],{"class":264},[220,57730,347],{"class":420},[220,57732,359],{"class":264},[220,57734,57735,57737],{"class":222,"line":179},[220,57736,364],{"class":264},[220,57738,57625],{"class":420},[220,57740,57741,57743,57745,57747],{"class":222,"line":389},[220,57742,20482],{"class":226},[220,57744,29871],{"class":264},[220,57746,18192],{"class":420},[220,57748,749],{"class":264},[220,57750,57751],{"class":222,"line":399},[220,57752,31959],{"class":264},[220,57754,57755,57757,57759],{"class":222,"line":644},[220,57756,2550],{"class":264},[220,57758,2553],{"class":420},[220,57760,386],{"class":264},[220,57762,57763,57765,57767],{"class":222,"line":650},[220,57764,2567],{"class":264},[220,57766,57586],{"class":420},[220,57768,359],{"class":264},[220,57770,57771,57773,57775],{"class":222,"line":656},[220,57772,402],{"class":264},[220,57774,347],{"class":420},[220,57776,359],{"class":264},[212,57778,57779],{"className":468,"code":57664,"language":469,"meta":178,"style":178},[99,57780,57781,57789,57795,57807,57811,57819,57827],{"__ignoreMap":178},[220,57782,57783,57785,57787],{"class":222,"line":223},[220,57784,343],{"class":264},[220,57786,347],{"class":420},[220,57788,359],{"class":264},[220,57790,57791,57793],{"class":222,"line":179},[220,57792,364],{"class":264},[220,57794,57625],{"class":420},[220,57796,57797,57799,57801,57803,57805],{"class":222,"line":389},[220,57798,20482],{"class":226},[220,57800,353],{"class":260},[220,57802,743],{"class":264},[220,57804,18192],{"class":420},[220,57806,749],{"class":264},[220,57808,57809],{"class":222,"line":399},[220,57810,31959],{"class":264},[220,57812,57813,57815,57817],{"class":222,"line":644},[220,57814,2550],{"class":264},[220,57816,2553],{"class":420},[220,57818,386],{"class":264},[220,57820,57821,57823,57825],{"class":222,"line":650},[220,57822,2567],{"class":264},[220,57824,57586],{"class":420},[220,57826,359],{"class":264},[220,57828,57829,57831,57833],{"class":222,"line":656},[220,57830,402],{"class":264},[220,57832,347],{"class":420},[220,57834,359],{"class":264},[212,57836,57838],{"className":251,"code":57837,"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,57839,57840,57850,57854,57868,57872,57885,57893,57897,57901],{"__ignoreMap":178},[220,57841,57842,57844,57846,57848],{"class":222,"line":223},[220,57843,261],{"class":260},[220,57845,11512],{"class":264},[220,57847,268],{"class":260},[220,57849,4007],{"class":230},[220,57851,57852],{"class":222,"line":179},[220,57853,647],{"emptyLinePlaceholder":194},[220,57855,57856,57858,57860,57862,57864,57866],{"class":222,"line":389},[220,57857,1735],{"class":260},[220,57859,1738],{"class":420},[220,57861,1741],{"class":260},[220,57863,1744],{"class":260},[220,57865,1747],{"class":226},[220,57867,1750],{"class":264},[220,57869,57870],{"class":222,"line":399},[220,57871,1765],{"class":264},[220,57873,57874,57876,57879,57881,57883],{"class":222,"line":644},[220,57875,1770],{"class":264},[220,57877,57878],{"class":230},"'LightLeak'",[220,57880,32203],{"class":264},[220,57882,18192],{"class":420},[220,57884,7546],{"class":264},[220,57886,57887,57889,57891],{"class":222,"line":650},[220,57888,7014],{"class":264},[220,57890,3206],{"class":230},[220,57892,2465],{"class":264},[220,57894,57895],{"class":222,"line":656},[220,57896,7031],{"class":264},[220,57898,57899],{"class":222,"line":673},[220,57900,1787],{"class":264},[220,57902,57903],{"class":222,"line":682},[220,57904,1792],{"class":264},[1504,57906,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57908},[57909,57910],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":57586,"description":57594},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":57917,"title":57918,"body":57919,"category":32234,"componentType":25883,"description":57926,"extension":191,"meta":58243,"navigation":194,"path":58244,"requiresChild":194,"seo":58245,"stem":58246,"__hash__":58247},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":57920,"toc":58239},[57921,57924,57927,57929,57931,57934,57936,58237],[11,57922,57918],{"id":57923},"linearblur",[15,57925,57926],{},"Directional motion blur in a specific angle",[31911,57928],{"component":57918},[23,57930,31915],{"id":26533},[31917,57932],{":props":57933},"[{\"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,57935,31923],{"id":31922},[246,57937,57938,57994,58053,58109,58167],{":tabs":1557},[212,57939,57941],{"className":334,"code":57940,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57942,57943,57951,57958,57966,57970,57978,57986],{"__ignoreMap":178},[220,57944,57945,57947,57949],{"class":222,"line":223},[220,57946,343],{"class":264},[220,57948,347],{"class":346},[220,57950,359],{"class":264},[220,57952,57953,57955],{"class":222,"line":179},[220,57954,364],{"class":264},[220,57956,57957],{"class":346},"LinearBlur\n",[220,57959,57960,57962,57964],{"class":222,"line":389},[220,57961,20371],{"class":226},[220,57963,353],{"class":264},[220,57965,43592],{"class":230},[220,57967,57968],{"class":222,"line":399},[220,57969,31959],{"class":264},[220,57971,57972,57974,57976],{"class":222,"line":644},[220,57973,2550],{"class":264},[220,57975,2553],{"class":346},[220,57977,386],{"class":264},[220,57979,57980,57982,57984],{"class":222,"line":650},[220,57981,2567],{"class":264},[220,57983,57918],{"class":346},[220,57985,359],{"class":264},[220,57987,57988,57990,57992],{"class":222,"line":656},[220,57989,402],{"class":264},[220,57991,347],{"class":346},[220,57993,359],{"class":264},[212,57995,57997],{"className":409,"code":57996,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57998,57999,58007,58013,58025,58029,58037,58045],{"__ignoreMap":178},[220,58000,58001,58003,58005],{"class":222,"line":223},[220,58002,343],{"class":264},[220,58004,347],{"class":420},[220,58006,359],{"class":264},[220,58008,58009,58011],{"class":222,"line":179},[220,58010,364],{"class":264},[220,58012,57957],{"class":420},[220,58014,58015,58017,58019,58021,58023],{"class":222,"line":389},[220,58016,20482],{"class":226},[220,58018,353],{"class":260},[220,58020,743],{"class":264},[220,58022,24010],{"class":420},[220,58024,749],{"class":264},[220,58026,58027],{"class":222,"line":399},[220,58028,31959],{"class":264},[220,58030,58031,58033,58035],{"class":222,"line":644},[220,58032,2550],{"class":264},[220,58034,2553],{"class":420},[220,58036,386],{"class":264},[220,58038,58039,58041,58043],{"class":222,"line":650},[220,58040,2567],{"class":264},[220,58042,57918],{"class":420},[220,58044,359],{"class":264},[220,58046,58047,58049,58051],{"class":222,"line":656},[220,58048,402],{"class":264},[220,58050,347],{"class":420},[220,58052,359],{"class":264},[212,58054,58055],{"className":2844,"code":57996,"language":2846,"meta":178,"style":178},[99,58056,58057,58065,58071,58081,58085,58093,58101],{"__ignoreMap":178},[220,58058,58059,58061,58063],{"class":222,"line":223},[220,58060,343],{"class":264},[220,58062,347],{"class":420},[220,58064,359],{"class":264},[220,58066,58067,58069],{"class":222,"line":179},[220,58068,364],{"class":264},[220,58070,57957],{"class":420},[220,58072,58073,58075,58077,58079],{"class":222,"line":389},[220,58074,20482],{"class":226},[220,58076,29871],{"class":264},[220,58078,24010],{"class":420},[220,58080,749],{"class":264},[220,58082,58083],{"class":222,"line":399},[220,58084,31959],{"class":264},[220,58086,58087,58089,58091],{"class":222,"line":644},[220,58088,2550],{"class":264},[220,58090,2553],{"class":420},[220,58092,386],{"class":264},[220,58094,58095,58097,58099],{"class":222,"line":650},[220,58096,2567],{"class":264},[220,58098,57918],{"class":420},[220,58100,359],{"class":264},[220,58102,58103,58105,58107],{"class":222,"line":656},[220,58104,402],{"class":264},[220,58106,347],{"class":420},[220,58108,359],{"class":264},[212,58110,58111],{"className":468,"code":57996,"language":469,"meta":178,"style":178},[99,58112,58113,58121,58127,58139,58143,58151,58159],{"__ignoreMap":178},[220,58114,58115,58117,58119],{"class":222,"line":223},[220,58116,343],{"class":264},[220,58118,347],{"class":420},[220,58120,359],{"class":264},[220,58122,58123,58125],{"class":222,"line":179},[220,58124,364],{"class":264},[220,58126,57957],{"class":420},[220,58128,58129,58131,58133,58135,58137],{"class":222,"line":389},[220,58130,20482],{"class":226},[220,58132,353],{"class":260},[220,58134,743],{"class":264},[220,58136,24010],{"class":420},[220,58138,749],{"class":264},[220,58140,58141],{"class":222,"line":399},[220,58142,31959],{"class":264},[220,58144,58145,58147,58149],{"class":222,"line":644},[220,58146,2550],{"class":264},[220,58148,2553],{"class":420},[220,58150,386],{"class":264},[220,58152,58153,58155,58157],{"class":222,"line":650},[220,58154,2567],{"class":264},[220,58156,57918],{"class":420},[220,58158,359],{"class":264},[220,58160,58161,58163,58165],{"class":222,"line":656},[220,58162,402],{"class":264},[220,58164,347],{"class":420},[220,58166,359],{"class":264},[212,58168,58170],{"className":251,"code":58169,"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,58171,58172,58182,58186,58200,58204,58217,58225,58229,58233],{"__ignoreMap":178},[220,58173,58174,58176,58178,58180],{"class":222,"line":223},[220,58175,261],{"class":260},[220,58177,11512],{"class":264},[220,58179,268],{"class":260},[220,58181,4007],{"class":230},[220,58183,58184],{"class":222,"line":179},[220,58185,647],{"emptyLinePlaceholder":194},[220,58187,58188,58190,58192,58194,58196,58198],{"class":222,"line":389},[220,58189,1735],{"class":260},[220,58191,1738],{"class":420},[220,58193,1741],{"class":260},[220,58195,1744],{"class":260},[220,58197,1747],{"class":226},[220,58199,1750],{"class":264},[220,58201,58202],{"class":222,"line":399},[220,58203,1765],{"class":264},[220,58205,58206,58208,58211,58213,58215],{"class":222,"line":644},[220,58207,1770],{"class":264},[220,58209,58210],{"class":230},"'LinearBlur'",[220,58212,32203],{"class":264},[220,58214,24010],{"class":420},[220,58216,7546],{"class":264},[220,58218,58219,58221,58223],{"class":222,"line":650},[220,58220,7014],{"class":264},[220,58222,3206],{"class":230},[220,58224,2465],{"class":264},[220,58226,58227],{"class":222,"line":656},[220,58228,7031],{"class":264},[220,58230,58231],{"class":222,"line":673},[220,58232,1787],{"class":264},[220,58234,58235],{"class":222,"line":682},[220,58236,1792],{"class":264},[1504,58238,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58240},[58241,58242],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":57918,"description":57926},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":58249,"title":367,"body":58250,"category":33063,"componentType":25877,"description":58257,"extension":191,"meta":58441,"navigation":194,"path":58442,"requiresChild":32530,"seo":58443,"stem":58444,"__hash__":58445},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":58251,"toc":58437},[58252,58255,58258,58260,58262,58265,58267,58435],[11,58253,367],{"id":58254},"lineargradient",[15,58256,58257],{},"Create smooth linear color gradients",[31911,58259],{"component":367},[23,58261,31915],{"id":26533},[31917,58263],{":props":58264},"[{\"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,58266,31923],{"id":31922},[246,58268,58269,58298,58326,58354,58382],{":tabs":1557},[212,58270,58272],{"className":334,"code":58271,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,58273,58274,58282,58290],{"__ignoreMap":178},[220,58275,58276,58278,58280],{"class":222,"line":223},[220,58277,343],{"class":264},[220,58279,347],{"class":346},[220,58281,359],{"class":264},[220,58283,58284,58286,58288],{"class":222,"line":179},[220,58285,364],{"class":264},[220,58287,367],{"class":346},[220,58289,386],{"class":264},[220,58291,58292,58294,58296],{"class":222,"line":389},[220,58293,402],{"class":264},[220,58295,347],{"class":346},[220,58297,359],{"class":264},[212,58299,58300],{"className":409,"code":58271,"language":411,"meta":178,"style":178},[99,58301,58302,58310,58318],{"__ignoreMap":178},[220,58303,58304,58306,58308],{"class":222,"line":223},[220,58305,343],{"class":264},[220,58307,347],{"class":420},[220,58309,359],{"class":264},[220,58311,58312,58314,58316],{"class":222,"line":179},[220,58313,364],{"class":264},[220,58315,367],{"class":420},[220,58317,386],{"class":264},[220,58319,58320,58322,58324],{"class":222,"line":389},[220,58321,402],{"class":264},[220,58323,347],{"class":420},[220,58325,359],{"class":264},[212,58327,58328],{"className":2844,"code":58271,"language":2846,"meta":178,"style":178},[99,58329,58330,58338,58346],{"__ignoreMap":178},[220,58331,58332,58334,58336],{"class":222,"line":223},[220,58333,343],{"class":264},[220,58335,347],{"class":420},[220,58337,359],{"class":264},[220,58339,58340,58342,58344],{"class":222,"line":179},[220,58341,364],{"class":264},[220,58343,367],{"class":420},[220,58345,386],{"class":264},[220,58347,58348,58350,58352],{"class":222,"line":389},[220,58349,402],{"class":264},[220,58351,347],{"class":420},[220,58353,359],{"class":264},[212,58355,58356],{"className":468,"code":58271,"language":469,"meta":178,"style":178},[99,58357,58358,58366,58374],{"__ignoreMap":178},[220,58359,58360,58362,58364],{"class":222,"line":223},[220,58361,343],{"class":264},[220,58363,347],{"class":420},[220,58365,359],{"class":264},[220,58367,58368,58370,58372],{"class":222,"line":179},[220,58369,364],{"class":264},[220,58371,367],{"class":420},[220,58373,386],{"class":264},[220,58375,58376,58378,58380],{"class":222,"line":389},[220,58377,402],{"class":264},[220,58379,347],{"class":420},[220,58381,359],{"class":264},[212,58383,58385],{"className":251,"code":58384,"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,58386,58387,58397,58401,58415,58419,58427,58431],{"__ignoreMap":178},[220,58388,58389,58391,58393,58395],{"class":222,"line":223},[220,58390,261],{"class":260},[220,58392,11512],{"class":264},[220,58394,268],{"class":260},[220,58396,4007],{"class":230},[220,58398,58399],{"class":222,"line":179},[220,58400,647],{"emptyLinePlaceholder":194},[220,58402,58403,58405,58407,58409,58411,58413],{"class":222,"line":389},[220,58404,1735],{"class":260},[220,58406,1738],{"class":420},[220,58408,1741],{"class":260},[220,58410,1744],{"class":260},[220,58412,1747],{"class":226},[220,58414,1750],{"class":264},[220,58416,58417],{"class":222,"line":399},[220,58418,1765],{"class":264},[220,58420,58421,58423,58425],{"class":222,"line":644},[220,58422,1770],{"class":264},[220,58424,2462],{"class":230},[220,58426,2465],{"class":264},[220,58428,58429],{"class":222,"line":650},[220,58430,1787],{"class":264},[220,58432,58433],{"class":222,"line":656},[220,58434,1792],{"class":264},[1504,58436,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58438},[58439,58440],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":58257},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":58447,"title":58448,"body":58449,"category":33673,"componentType":25883,"description":58456,"extension":191,"meta":58717,"navigation":194,"path":58718,"requiresChild":194,"seo":58719,"stem":58720,"__hash__":58721},"components\u002Fdocs\u002Fcomponents\u002FLinearWipe.md","LinearWipe",{"type":8,"value":58450,"toc":58713},[58451,58454,58457,58459,58461,58464,58466,58711],[11,58452,58448],{"id":58453},"linearwipe",[15,58455,58456],{},"Wipe the content away along a straight edge with a soft feathered transition",[31911,58458],{"component":58448},[23,58460,31915],{"id":26533},[31917,58462],{":props":58463},"[{\"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,58465,31923],{"id":31922},[246,58467,58468,58513,58557,58601,58645],{":tabs":1557},[212,58469,58471],{"className":334,"code":58470,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearWipe>\n \u003CCircle \u002F>\n \u003C\u002FLinearWipe>\n\u003C\u002FShader>\n",[99,58472,58473,58481,58489,58497,58505],{"__ignoreMap":178},[220,58474,58475,58477,58479],{"class":222,"line":223},[220,58476,343],{"class":264},[220,58478,347],{"class":346},[220,58480,359],{"class":264},[220,58482,58483,58485,58487],{"class":222,"line":179},[220,58484,364],{"class":264},[220,58486,58448],{"class":346},[220,58488,359],{"class":264},[220,58490,58491,58493,58495],{"class":222,"line":389},[220,58492,2550],{"class":264},[220,58494,2553],{"class":346},[220,58496,386],{"class":264},[220,58498,58499,58501,58503],{"class":222,"line":399},[220,58500,2567],{"class":264},[220,58502,58448],{"class":346},[220,58504,359],{"class":264},[220,58506,58507,58509,58511],{"class":222,"line":644},[220,58508,402],{"class":264},[220,58510,347],{"class":346},[220,58512,359],{"class":264},[212,58514,58515],{"className":409,"code":58470,"language":411,"meta":178,"style":178},[99,58516,58517,58525,58533,58541,58549],{"__ignoreMap":178},[220,58518,58519,58521,58523],{"class":222,"line":223},[220,58520,343],{"class":264},[220,58522,347],{"class":420},[220,58524,359],{"class":264},[220,58526,58527,58529,58531],{"class":222,"line":179},[220,58528,364],{"class":264},[220,58530,58448],{"class":420},[220,58532,359],{"class":264},[220,58534,58535,58537,58539],{"class":222,"line":389},[220,58536,2550],{"class":264},[220,58538,2553],{"class":420},[220,58540,386],{"class":264},[220,58542,58543,58545,58547],{"class":222,"line":399},[220,58544,2567],{"class":264},[220,58546,58448],{"class":420},[220,58548,359],{"class":264},[220,58550,58551,58553,58555],{"class":222,"line":644},[220,58552,402],{"class":264},[220,58554,347],{"class":420},[220,58556,359],{"class":264},[212,58558,58559],{"className":2844,"code":58470,"language":2846,"meta":178,"style":178},[99,58560,58561,58569,58577,58585,58593],{"__ignoreMap":178},[220,58562,58563,58565,58567],{"class":222,"line":223},[220,58564,343],{"class":264},[220,58566,347],{"class":420},[220,58568,359],{"class":264},[220,58570,58571,58573,58575],{"class":222,"line":179},[220,58572,364],{"class":264},[220,58574,58448],{"class":420},[220,58576,359],{"class":264},[220,58578,58579,58581,58583],{"class":222,"line":389},[220,58580,2550],{"class":264},[220,58582,2553],{"class":420},[220,58584,386],{"class":264},[220,58586,58587,58589,58591],{"class":222,"line":399},[220,58588,2567],{"class":264},[220,58590,58448],{"class":420},[220,58592,359],{"class":264},[220,58594,58595,58597,58599],{"class":222,"line":644},[220,58596,402],{"class":264},[220,58598,347],{"class":420},[220,58600,359],{"class":264},[212,58602,58603],{"className":468,"code":58470,"language":469,"meta":178,"style":178},[99,58604,58605,58613,58621,58629,58637],{"__ignoreMap":178},[220,58606,58607,58609,58611],{"class":222,"line":223},[220,58608,343],{"class":264},[220,58610,347],{"class":420},[220,58612,359],{"class":264},[220,58614,58615,58617,58619],{"class":222,"line":179},[220,58616,364],{"class":264},[220,58618,58448],{"class":420},[220,58620,359],{"class":264},[220,58622,58623,58625,58627],{"class":222,"line":389},[220,58624,2550],{"class":264},[220,58626,2553],{"class":420},[220,58628,386],{"class":264},[220,58630,58631,58633,58635],{"class":222,"line":399},[220,58632,2567],{"class":264},[220,58634,58448],{"class":420},[220,58636,359],{"class":264},[220,58638,58639,58641,58643],{"class":222,"line":644},[220,58640,402],{"class":264},[220,58642,347],{"class":420},[220,58644,359],{"class":264},[212,58646,58648],{"className":251,"code":58647,"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,58649,58650,58660,58664,58678,58682,58691,58699,58703,58707],{"__ignoreMap":178},[220,58651,58652,58654,58656,58658],{"class":222,"line":223},[220,58653,261],{"class":260},[220,58655,11512],{"class":264},[220,58657,268],{"class":260},[220,58659,4007],{"class":230},[220,58661,58662],{"class":222,"line":179},[220,58663,647],{"emptyLinePlaceholder":194},[220,58665,58666,58668,58670,58672,58674,58676],{"class":222,"line":389},[220,58667,1735],{"class":260},[220,58669,1738],{"class":420},[220,58671,1741],{"class":260},[220,58673,1744],{"class":260},[220,58675,1747],{"class":226},[220,58677,1750],{"class":264},[220,58679,58680],{"class":222,"line":399},[220,58681,1765],{"class":264},[220,58683,58684,58686,58689],{"class":222,"line":644},[220,58685,1770],{"class":264},[220,58687,58688],{"class":230},"'LinearWipe'",[220,58690,7009],{"class":264},[220,58692,58693,58695,58697],{"class":222,"line":650},[220,58694,7014],{"class":264},[220,58696,3206],{"class":230},[220,58698,2465],{"class":264},[220,58700,58701],{"class":222,"line":656},[220,58702,7031],{"class":264},[220,58704,58705],{"class":222,"line":673},[220,58706,1787],{"class":264},[220,58708,58709],{"class":222,"line":682},[220,58710,1792],{"class":264},[1504,58712,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58714},[58715,58716],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flinearwipe",{"title":58448,"description":58456},"docs\u002Fcomponents\u002FLinearWipe","Do2VP6VCJG5V-V0O07nzgUTppBJgUsZZ-ZsoVAOlqwk",{"id":58723,"title":58724,"body":58725,"category":36569,"componentType":25877,"description":58732,"extension":191,"meta":58917,"navigation":194,"path":58918,"requiresChild":32530,"seo":58919,"stem":58920,"__hash__":58921},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":58726,"toc":58913},[58727,58730,58733,58735,58737,58740,58742,58911],[11,58728,58724],{"id":58729},"liquidmetal",[15,58731,58732],{},"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,58734],{"component":58724},[23,58736,31915],{"id":26533},[31917,58738],{":props":58739},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#eef0f6\",\"description\":\"The bright tone of the chrome highlights\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#141414\",\"description\":\"The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…)\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How molten the surface is — the depth of the flowing folds that bend the reflection\"},{\"name\":\"ripple\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Scale of the molten folds — higher = smaller, busier ripples\"},{\"name\":\"warp\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Swirl of the flow — domain-warps the folds into liquid curls\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the molten flow and the slowly drifting reflection. 0 pauses.\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Prismatic color fringing along the reflection edges\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"265\",\"description\":\"Direction of the key light for the specular glints, in degrees\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,58741,31923],{"id":31922},[246,58743,58744,58773,58801,58829,58857],{":tabs":1557},[212,58745,58747],{"className":334,"code":58746,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,58748,58749,58757,58765],{"__ignoreMap":178},[220,58750,58751,58753,58755],{"class":222,"line":223},[220,58752,343],{"class":264},[220,58754,347],{"class":346},[220,58756,359],{"class":264},[220,58758,58759,58761,58763],{"class":222,"line":179},[220,58760,364],{"class":264},[220,58762,58724],{"class":346},[220,58764,386],{"class":264},[220,58766,58767,58769,58771],{"class":222,"line":389},[220,58768,402],{"class":264},[220,58770,347],{"class":346},[220,58772,359],{"class":264},[212,58774,58775],{"className":409,"code":58746,"language":411,"meta":178,"style":178},[99,58776,58777,58785,58793],{"__ignoreMap":178},[220,58778,58779,58781,58783],{"class":222,"line":223},[220,58780,343],{"class":264},[220,58782,347],{"class":420},[220,58784,359],{"class":264},[220,58786,58787,58789,58791],{"class":222,"line":179},[220,58788,364],{"class":264},[220,58790,58724],{"class":420},[220,58792,386],{"class":264},[220,58794,58795,58797,58799],{"class":222,"line":389},[220,58796,402],{"class":264},[220,58798,347],{"class":420},[220,58800,359],{"class":264},[212,58802,58803],{"className":2844,"code":58746,"language":2846,"meta":178,"style":178},[99,58804,58805,58813,58821],{"__ignoreMap":178},[220,58806,58807,58809,58811],{"class":222,"line":223},[220,58808,343],{"class":264},[220,58810,347],{"class":420},[220,58812,359],{"class":264},[220,58814,58815,58817,58819],{"class":222,"line":179},[220,58816,364],{"class":264},[220,58818,58724],{"class":420},[220,58820,386],{"class":264},[220,58822,58823,58825,58827],{"class":222,"line":389},[220,58824,402],{"class":264},[220,58826,347],{"class":420},[220,58828,359],{"class":264},[212,58830,58831],{"className":468,"code":58746,"language":469,"meta":178,"style":178},[99,58832,58833,58841,58849],{"__ignoreMap":178},[220,58834,58835,58837,58839],{"class":222,"line":223},[220,58836,343],{"class":264},[220,58838,347],{"class":420},[220,58840,359],{"class":264},[220,58842,58843,58845,58847],{"class":222,"line":179},[220,58844,364],{"class":264},[220,58846,58724],{"class":420},[220,58848,386],{"class":264},[220,58850,58851,58853,58855],{"class":222,"line":389},[220,58852,402],{"class":264},[220,58854,347],{"class":420},[220,58856,359],{"class":264},[212,58858,58860],{"className":251,"code":58859,"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,58861,58862,58872,58876,58890,58894,58903,58907],{"__ignoreMap":178},[220,58863,58864,58866,58868,58870],{"class":222,"line":223},[220,58865,261],{"class":260},[220,58867,11512],{"class":264},[220,58869,268],{"class":260},[220,58871,4007],{"class":230},[220,58873,58874],{"class":222,"line":179},[220,58875,647],{"emptyLinePlaceholder":194},[220,58877,58878,58880,58882,58884,58886,58888],{"class":222,"line":389},[220,58879,1735],{"class":260},[220,58881,1738],{"class":420},[220,58883,1741],{"class":260},[220,58885,1744],{"class":260},[220,58887,1747],{"class":226},[220,58889,1750],{"class":264},[220,58891,58892],{"class":222,"line":399},[220,58893,1765],{"class":264},[220,58895,58896,58898,58901],{"class":222,"line":644},[220,58897,1770],{"class":264},[220,58899,58900],{"class":230},"'LiquidMetal'",[220,58902,2465],{"class":264},[220,58904,58905],{"class":222,"line":650},[220,58906,1787],{"class":264},[220,58908,58909],{"class":222,"line":656},[220,58910,1792],{"class":264},[1504,58912,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58914},[58915,58916],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":58724,"description":58732},"docs\u002Fcomponents\u002FLiquidMetal","LmQ5r2jwprcNrDO0hQT_86dYHtyOQFU-SFxP_e6xZTM",{"id":58923,"title":58924,"body":58925,"category":35559,"componentType":25883,"description":58932,"extension":191,"meta":59295,"navigation":194,"path":59296,"requiresChild":194,"seo":59297,"stem":59298,"__hash__":59299},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":58926,"toc":59291},[58927,58930,58933,58935,58937,58940,58942,59289],[11,58928,58924],{"id":58929},"liquify",[15,58931,58932],{},"Liquid-like interactive deformation effect",[31911,58934],{"component":58924},[23,58936,31915],{"id":26533},[31917,58938],{":props":58939},"[{\"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,58941,31923],{"id":31922},[246,58943,58944,59008,59079,59145,59215],{":tabs":1557},[212,58945,58947],{"className":334,"code":58946,"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,58948,58949,58957,58964,58972,58980,58984,58992,59000],{"__ignoreMap":178},[220,58950,58951,58953,58955],{"class":222,"line":223},[220,58952,343],{"class":264},[220,58954,347],{"class":346},[220,58956,359],{"class":264},[220,58958,58959,58961],{"class":222,"line":179},[220,58960,364],{"class":264},[220,58962,58963],{"class":346},"Liquify\n",[220,58965,58966,58968,58970],{"class":222,"line":389},[220,58967,20371],{"class":226},[220,58969,353],{"class":264},[220,58971,42149],{"class":230},[220,58973,58974,58976,58978],{"class":222,"line":399},[220,58975,17405],{"class":226},[220,58977,353],{"class":264},[220,58979,36625],{"class":230},[220,58981,58982],{"class":222,"line":644},[220,58983,31959],{"class":264},[220,58985,58986,58988,58990],{"class":222,"line":650},[220,58987,2550],{"class":264},[220,58989,2553],{"class":346},[220,58991,386],{"class":264},[220,58993,58994,58996,58998],{"class":222,"line":656},[220,58995,2567],{"class":264},[220,58997,58924],{"class":346},[220,58999,359],{"class":264},[220,59001,59002,59004,59006],{"class":222,"line":673},[220,59003,402],{"class":264},[220,59005,347],{"class":346},[220,59007,359],{"class":264},[212,59009,59011],{"className":409,"code":59010,"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,59012,59013,59021,59027,59039,59051,59055,59063,59071],{"__ignoreMap":178},[220,59014,59015,59017,59019],{"class":222,"line":223},[220,59016,343],{"class":264},[220,59018,347],{"class":420},[220,59020,359],{"class":264},[220,59022,59023,59025],{"class":222,"line":179},[220,59024,364],{"class":264},[220,59026,58963],{"class":420},[220,59028,59029,59031,59033,59035,59037],{"class":222,"line":389},[220,59030,20482],{"class":226},[220,59032,353],{"class":260},[220,59034,743],{"class":264},[220,59036,23850],{"class":420},[220,59038,749],{"class":264},[220,59040,59041,59043,59045,59047,59049],{"class":222,"line":399},[220,59042,9645],{"class":226},[220,59044,353],{"class":260},[220,59046,743],{"class":264},[220,59048,8677],{"class":420},[220,59050,749],{"class":264},[220,59052,59053],{"class":222,"line":644},[220,59054,31959],{"class":264},[220,59056,59057,59059,59061],{"class":222,"line":650},[220,59058,2550],{"class":264},[220,59060,2553],{"class":420},[220,59062,386],{"class":264},[220,59064,59065,59067,59069],{"class":222,"line":656},[220,59066,2567],{"class":264},[220,59068,58924],{"class":420},[220,59070,359],{"class":264},[220,59072,59073,59075,59077],{"class":222,"line":673},[220,59074,402],{"class":264},[220,59076,347],{"class":420},[220,59078,359],{"class":264},[212,59080,59081],{"className":2844,"code":59010,"language":2846,"meta":178,"style":178},[99,59082,59083,59091,59097,59107,59117,59121,59129,59137],{"__ignoreMap":178},[220,59084,59085,59087,59089],{"class":222,"line":223},[220,59086,343],{"class":264},[220,59088,347],{"class":420},[220,59090,359],{"class":264},[220,59092,59093,59095],{"class":222,"line":179},[220,59094,364],{"class":264},[220,59096,58963],{"class":420},[220,59098,59099,59101,59103,59105],{"class":222,"line":389},[220,59100,20482],{"class":226},[220,59102,29871],{"class":264},[220,59104,23850],{"class":420},[220,59106,749],{"class":264},[220,59108,59109,59111,59113,59115],{"class":222,"line":399},[220,59110,9645],{"class":226},[220,59112,29871],{"class":264},[220,59114,8677],{"class":420},[220,59116,749],{"class":264},[220,59118,59119],{"class":222,"line":644},[220,59120,31959],{"class":264},[220,59122,59123,59125,59127],{"class":222,"line":650},[220,59124,2550],{"class":264},[220,59126,2553],{"class":420},[220,59128,386],{"class":264},[220,59130,59131,59133,59135],{"class":222,"line":656},[220,59132,2567],{"class":264},[220,59134,58924],{"class":420},[220,59136,359],{"class":264},[220,59138,59139,59141,59143],{"class":222,"line":673},[220,59140,402],{"class":264},[220,59142,347],{"class":420},[220,59144,359],{"class":264},[212,59146,59147],{"className":468,"code":59010,"language":469,"meta":178,"style":178},[99,59148,59149,59157,59163,59175,59187,59191,59199,59207],{"__ignoreMap":178},[220,59150,59151,59153,59155],{"class":222,"line":223},[220,59152,343],{"class":264},[220,59154,347],{"class":420},[220,59156,359],{"class":264},[220,59158,59159,59161],{"class":222,"line":179},[220,59160,364],{"class":264},[220,59162,58963],{"class":420},[220,59164,59165,59167,59169,59171,59173],{"class":222,"line":389},[220,59166,20482],{"class":226},[220,59168,353],{"class":260},[220,59170,743],{"class":264},[220,59172,23850],{"class":420},[220,59174,749],{"class":264},[220,59176,59177,59179,59181,59183,59185],{"class":222,"line":399},[220,59178,9645],{"class":226},[220,59180,353],{"class":260},[220,59182,743],{"class":264},[220,59184,8677],{"class":420},[220,59186,749],{"class":264},[220,59188,59189],{"class":222,"line":644},[220,59190,31959],{"class":264},[220,59192,59193,59195,59197],{"class":222,"line":650},[220,59194,2550],{"class":264},[220,59196,2553],{"class":420},[220,59198,386],{"class":264},[220,59200,59201,59203,59205],{"class":222,"line":656},[220,59202,2567],{"class":264},[220,59204,58924],{"class":420},[220,59206,359],{"class":264},[220,59208,59209,59211,59213],{"class":222,"line":673},[220,59210,402],{"class":264},[220,59212,347],{"class":420},[220,59214,359],{"class":264},[212,59216,59218],{"className":251,"code":59217,"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,59219,59220,59230,59234,59248,59252,59269,59277,59281,59285],{"__ignoreMap":178},[220,59221,59222,59224,59226,59228],{"class":222,"line":223},[220,59223,261],{"class":260},[220,59225,11512],{"class":264},[220,59227,268],{"class":260},[220,59229,4007],{"class":230},[220,59231,59232],{"class":222,"line":179},[220,59233,647],{"emptyLinePlaceholder":194},[220,59235,59236,59238,59240,59242,59244,59246],{"class":222,"line":389},[220,59237,1735],{"class":260},[220,59239,1738],{"class":420},[220,59241,1741],{"class":260},[220,59243,1744],{"class":260},[220,59245,1747],{"class":226},[220,59247,1750],{"class":264},[220,59249,59250],{"class":222,"line":399},[220,59251,1765],{"class":264},[220,59253,59254,59256,59259,59261,59263,59265,59267],{"class":222,"line":644},[220,59255,1770],{"class":264},[220,59257,59258],{"class":230},"'Liquify'",[220,59260,32203],{"class":264},[220,59262,23850],{"class":420},[220,59264,6566],{"class":264},[220,59266,8677],{"class":420},[220,59268,7546],{"class":264},[220,59270,59271,59273,59275],{"class":222,"line":650},[220,59272,7014],{"class":264},[220,59274,3206],{"class":230},[220,59276,2465],{"class":264},[220,59278,59279],{"class":222,"line":656},[220,59280,7031],{"class":264},[220,59282,59283],{"class":222,"line":673},[220,59284,1787],{"class":264},[220,59286,59287],{"class":222,"line":682},[220,59288,1792],{"class":264},[1504,59290,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59292},[59293,59294],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":58924,"description":58932},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":59301,"title":59302,"body":59303,"category":35559,"componentType":25877,"description":59310,"extension":191,"meta":59495,"navigation":194,"path":59496,"requiresChild":32530,"seo":59497,"stem":59498,"__hash__":59499},"components\u002Fdocs\u002Fcomponents\u002FMagneticFilings.md","MagneticFilings",{"type":8,"value":59304,"toc":59491},[59305,59308,59311,59313,59315,59318,59320,59489],[11,59306,59302],{"id":59307},"magneticfilings",[15,59309,59310],{},"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,59312],{"component":59302},[23,59314,31915],{"id":26533},[31917,59316],{":props":59317},"[{\"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,59319,31923],{"id":31922},[246,59321,59322,59351,59379,59407,59435],{":tabs":1557},[212,59323,59325],{"className":334,"code":59324,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMagneticFilings \u002F>\n\u003C\u002FShader>\n",[99,59326,59327,59335,59343],{"__ignoreMap":178},[220,59328,59329,59331,59333],{"class":222,"line":223},[220,59330,343],{"class":264},[220,59332,347],{"class":346},[220,59334,359],{"class":264},[220,59336,59337,59339,59341],{"class":222,"line":179},[220,59338,364],{"class":264},[220,59340,59302],{"class":346},[220,59342,386],{"class":264},[220,59344,59345,59347,59349],{"class":222,"line":389},[220,59346,402],{"class":264},[220,59348,347],{"class":346},[220,59350,359],{"class":264},[212,59352,59353],{"className":409,"code":59324,"language":411,"meta":178,"style":178},[99,59354,59355,59363,59371],{"__ignoreMap":178},[220,59356,59357,59359,59361],{"class":222,"line":223},[220,59358,343],{"class":264},[220,59360,347],{"class":420},[220,59362,359],{"class":264},[220,59364,59365,59367,59369],{"class":222,"line":179},[220,59366,364],{"class":264},[220,59368,59302],{"class":420},[220,59370,386],{"class":264},[220,59372,59373,59375,59377],{"class":222,"line":389},[220,59374,402],{"class":264},[220,59376,347],{"class":420},[220,59378,359],{"class":264},[212,59380,59381],{"className":2844,"code":59324,"language":2846,"meta":178,"style":178},[99,59382,59383,59391,59399],{"__ignoreMap":178},[220,59384,59385,59387,59389],{"class":222,"line":223},[220,59386,343],{"class":264},[220,59388,347],{"class":420},[220,59390,359],{"class":264},[220,59392,59393,59395,59397],{"class":222,"line":179},[220,59394,364],{"class":264},[220,59396,59302],{"class":420},[220,59398,386],{"class":264},[220,59400,59401,59403,59405],{"class":222,"line":389},[220,59402,402],{"class":264},[220,59404,347],{"class":420},[220,59406,359],{"class":264},[212,59408,59409],{"className":468,"code":59324,"language":469,"meta":178,"style":178},[99,59410,59411,59419,59427],{"__ignoreMap":178},[220,59412,59413,59415,59417],{"class":222,"line":223},[220,59414,343],{"class":264},[220,59416,347],{"class":420},[220,59418,359],{"class":264},[220,59420,59421,59423,59425],{"class":222,"line":179},[220,59422,364],{"class":264},[220,59424,59302],{"class":420},[220,59426,386],{"class":264},[220,59428,59429,59431,59433],{"class":222,"line":389},[220,59430,402],{"class":264},[220,59432,347],{"class":420},[220,59434,359],{"class":264},[212,59436,59438],{"className":251,"code":59437,"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,59439,59440,59450,59454,59468,59472,59481,59485],{"__ignoreMap":178},[220,59441,59442,59444,59446,59448],{"class":222,"line":223},[220,59443,261],{"class":260},[220,59445,11512],{"class":264},[220,59447,268],{"class":260},[220,59449,4007],{"class":230},[220,59451,59452],{"class":222,"line":179},[220,59453,647],{"emptyLinePlaceholder":194},[220,59455,59456,59458,59460,59462,59464,59466],{"class":222,"line":389},[220,59457,1735],{"class":260},[220,59459,1738],{"class":420},[220,59461,1741],{"class":260},[220,59463,1744],{"class":260},[220,59465,1747],{"class":226},[220,59467,1750],{"class":264},[220,59469,59470],{"class":222,"line":399},[220,59471,1765],{"class":264},[220,59473,59474,59476,59479],{"class":222,"line":644},[220,59475,1770],{"class":264},[220,59477,59478],{"class":230},"'MagneticFilings'",[220,59480,2465],{"class":264},[220,59482,59483],{"class":222,"line":650},[220,59484,1787],{"class":264},[220,59486,59487],{"class":222,"line":656},[220,59488,1792],{"class":264},[1504,59490,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59492},[59493,59494],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings",{"title":59302,"description":59310},"docs\u002Fcomponents\u002FMagneticFilings","U8PeRAe8_FnYvmQqGfzTNEhVpWkgxxeoKJjn9HVNJaY",{"id":59501,"title":59502,"body":59503,"category":33063,"componentType":25877,"description":59510,"extension":191,"meta":59695,"navigation":194,"path":59696,"requiresChild":32530,"seo":59697,"stem":59698,"__hash__":59699},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":59504,"toc":59691},[59505,59508,59511,59513,59515,59518,59520,59689],[11,59506,59502],{"id":59507},"marble",[15,59509,59510],{},"Classic marble swirl and vein texture using noise-warped sine waves",[31911,59512],{"component":59502},[23,59514,31915],{"id":26533},[31917,59516],{":props":59517},"[{\"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,59519,31923],{"id":31922},[246,59521,59522,59551,59579,59607,59635],{":tabs":1557},[212,59523,59525],{"className":334,"code":59524,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,59526,59527,59535,59543],{"__ignoreMap":178},[220,59528,59529,59531,59533],{"class":222,"line":223},[220,59530,343],{"class":264},[220,59532,347],{"class":346},[220,59534,359],{"class":264},[220,59536,59537,59539,59541],{"class":222,"line":179},[220,59538,364],{"class":264},[220,59540,59502],{"class":346},[220,59542,386],{"class":264},[220,59544,59545,59547,59549],{"class":222,"line":389},[220,59546,402],{"class":264},[220,59548,347],{"class":346},[220,59550,359],{"class":264},[212,59552,59553],{"className":409,"code":59524,"language":411,"meta":178,"style":178},[99,59554,59555,59563,59571],{"__ignoreMap":178},[220,59556,59557,59559,59561],{"class":222,"line":223},[220,59558,343],{"class":264},[220,59560,347],{"class":420},[220,59562,359],{"class":264},[220,59564,59565,59567,59569],{"class":222,"line":179},[220,59566,364],{"class":264},[220,59568,59502],{"class":420},[220,59570,386],{"class":264},[220,59572,59573,59575,59577],{"class":222,"line":389},[220,59574,402],{"class":264},[220,59576,347],{"class":420},[220,59578,359],{"class":264},[212,59580,59581],{"className":2844,"code":59524,"language":2846,"meta":178,"style":178},[99,59582,59583,59591,59599],{"__ignoreMap":178},[220,59584,59585,59587,59589],{"class":222,"line":223},[220,59586,343],{"class":264},[220,59588,347],{"class":420},[220,59590,359],{"class":264},[220,59592,59593,59595,59597],{"class":222,"line":179},[220,59594,364],{"class":264},[220,59596,59502],{"class":420},[220,59598,386],{"class":264},[220,59600,59601,59603,59605],{"class":222,"line":389},[220,59602,402],{"class":264},[220,59604,347],{"class":420},[220,59606,359],{"class":264},[212,59608,59609],{"className":468,"code":59524,"language":469,"meta":178,"style":178},[99,59610,59611,59619,59627],{"__ignoreMap":178},[220,59612,59613,59615,59617],{"class":222,"line":223},[220,59614,343],{"class":264},[220,59616,347],{"class":420},[220,59618,359],{"class":264},[220,59620,59621,59623,59625],{"class":222,"line":179},[220,59622,364],{"class":264},[220,59624,59502],{"class":420},[220,59626,386],{"class":264},[220,59628,59629,59631,59633],{"class":222,"line":389},[220,59630,402],{"class":264},[220,59632,347],{"class":420},[220,59634,359],{"class":264},[212,59636,59638],{"className":251,"code":59637,"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,59639,59640,59650,59654,59668,59672,59681,59685],{"__ignoreMap":178},[220,59641,59642,59644,59646,59648],{"class":222,"line":223},[220,59643,261],{"class":260},[220,59645,11512],{"class":264},[220,59647,268],{"class":260},[220,59649,4007],{"class":230},[220,59651,59652],{"class":222,"line":179},[220,59653,647],{"emptyLinePlaceholder":194},[220,59655,59656,59658,59660,59662,59664,59666],{"class":222,"line":389},[220,59657,1735],{"class":260},[220,59659,1738],{"class":420},[220,59661,1741],{"class":260},[220,59663,1744],{"class":260},[220,59665,1747],{"class":226},[220,59667,1750],{"class":264},[220,59669,59670],{"class":222,"line":399},[220,59671,1765],{"class":264},[220,59673,59674,59676,59679],{"class":222,"line":644},[220,59675,1770],{"class":264},[220,59677,59678],{"class":230},"'Marble'",[220,59680,2465],{"class":264},[220,59682,59683],{"class":222,"line":650},[220,59684,1787],{"class":264},[220,59686,59687],{"class":222,"line":656},[220,59688,1792],{"class":264},[1504,59690,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59692},[59693,59694],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":59502,"description":59510},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":59701,"title":59702,"body":59703,"category":33396,"componentType":25883,"description":59710,"extension":191,"meta":59971,"navigation":194,"path":59972,"requiresChild":194,"seo":59973,"stem":59974,"__hash__":59975},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":59704,"toc":59967},[59705,59708,59711,59713,59715,59718,59720,59965],[11,59706,59702],{"id":59707},"mirror",[15,59709,59710],{},"Mirror content across a line defined by center point and angle",[31911,59712],{"component":59702},[23,59714,31915],{"id":26533},[31917,59716],{":props":59717},"[{\"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,59719,31923],{"id":31922},[246,59721,59722,59767,59811,59855,59899],{":tabs":1557},[212,59723,59725],{"className":334,"code":59724,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,59726,59727,59735,59743,59751,59759],{"__ignoreMap":178},[220,59728,59729,59731,59733],{"class":222,"line":223},[220,59730,343],{"class":264},[220,59732,347],{"class":346},[220,59734,359],{"class":264},[220,59736,59737,59739,59741],{"class":222,"line":179},[220,59738,364],{"class":264},[220,59740,59702],{"class":346},[220,59742,359],{"class":264},[220,59744,59745,59747,59749],{"class":222,"line":389},[220,59746,2550],{"class":264},[220,59748,2553],{"class":346},[220,59750,386],{"class":264},[220,59752,59753,59755,59757],{"class":222,"line":399},[220,59754,2567],{"class":264},[220,59756,59702],{"class":346},[220,59758,359],{"class":264},[220,59760,59761,59763,59765],{"class":222,"line":644},[220,59762,402],{"class":264},[220,59764,347],{"class":346},[220,59766,359],{"class":264},[212,59768,59769],{"className":409,"code":59724,"language":411,"meta":178,"style":178},[99,59770,59771,59779,59787,59795,59803],{"__ignoreMap":178},[220,59772,59773,59775,59777],{"class":222,"line":223},[220,59774,343],{"class":264},[220,59776,347],{"class":420},[220,59778,359],{"class":264},[220,59780,59781,59783,59785],{"class":222,"line":179},[220,59782,364],{"class":264},[220,59784,59702],{"class":420},[220,59786,359],{"class":264},[220,59788,59789,59791,59793],{"class":222,"line":389},[220,59790,2550],{"class":264},[220,59792,2553],{"class":420},[220,59794,386],{"class":264},[220,59796,59797,59799,59801],{"class":222,"line":399},[220,59798,2567],{"class":264},[220,59800,59702],{"class":420},[220,59802,359],{"class":264},[220,59804,59805,59807,59809],{"class":222,"line":644},[220,59806,402],{"class":264},[220,59808,347],{"class":420},[220,59810,359],{"class":264},[212,59812,59813],{"className":2844,"code":59724,"language":2846,"meta":178,"style":178},[99,59814,59815,59823,59831,59839,59847],{"__ignoreMap":178},[220,59816,59817,59819,59821],{"class":222,"line":223},[220,59818,343],{"class":264},[220,59820,347],{"class":420},[220,59822,359],{"class":264},[220,59824,59825,59827,59829],{"class":222,"line":179},[220,59826,364],{"class":264},[220,59828,59702],{"class":420},[220,59830,359],{"class":264},[220,59832,59833,59835,59837],{"class":222,"line":389},[220,59834,2550],{"class":264},[220,59836,2553],{"class":420},[220,59838,386],{"class":264},[220,59840,59841,59843,59845],{"class":222,"line":399},[220,59842,2567],{"class":264},[220,59844,59702],{"class":420},[220,59846,359],{"class":264},[220,59848,59849,59851,59853],{"class":222,"line":644},[220,59850,402],{"class":264},[220,59852,347],{"class":420},[220,59854,359],{"class":264},[212,59856,59857],{"className":468,"code":59724,"language":469,"meta":178,"style":178},[99,59858,59859,59867,59875,59883,59891],{"__ignoreMap":178},[220,59860,59861,59863,59865],{"class":222,"line":223},[220,59862,343],{"class":264},[220,59864,347],{"class":420},[220,59866,359],{"class":264},[220,59868,59869,59871,59873],{"class":222,"line":179},[220,59870,364],{"class":264},[220,59872,59702],{"class":420},[220,59874,359],{"class":264},[220,59876,59877,59879,59881],{"class":222,"line":389},[220,59878,2550],{"class":264},[220,59880,2553],{"class":420},[220,59882,386],{"class":264},[220,59884,59885,59887,59889],{"class":222,"line":399},[220,59886,2567],{"class":264},[220,59888,59702],{"class":420},[220,59890,359],{"class":264},[220,59892,59893,59895,59897],{"class":222,"line":644},[220,59894,402],{"class":264},[220,59896,347],{"class":420},[220,59898,359],{"class":264},[212,59900,59902],{"className":251,"code":59901,"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,59903,59904,59914,59918,59932,59936,59945,59953,59957,59961],{"__ignoreMap":178},[220,59905,59906,59908,59910,59912],{"class":222,"line":223},[220,59907,261],{"class":260},[220,59909,11512],{"class":264},[220,59911,268],{"class":260},[220,59913,4007],{"class":230},[220,59915,59916],{"class":222,"line":179},[220,59917,647],{"emptyLinePlaceholder":194},[220,59919,59920,59922,59924,59926,59928,59930],{"class":222,"line":389},[220,59921,1735],{"class":260},[220,59923,1738],{"class":420},[220,59925,1741],{"class":260},[220,59927,1744],{"class":260},[220,59929,1747],{"class":226},[220,59931,1750],{"class":264},[220,59933,59934],{"class":222,"line":399},[220,59935,1765],{"class":264},[220,59937,59938,59940,59943],{"class":222,"line":644},[220,59939,1770],{"class":264},[220,59941,59942],{"class":230},"'Mirror'",[220,59944,7009],{"class":264},[220,59946,59947,59949,59951],{"class":222,"line":650},[220,59948,7014],{"class":264},[220,59950,3206],{"class":230},[220,59952,2465],{"class":264},[220,59954,59955],{"class":222,"line":656},[220,59956,7031],{"class":264},[220,59958,59959],{"class":222,"line":673},[220,59960,1787],{"class":264},[220,59962,59963],{"class":222,"line":682},[220,59964,1792],{"class":264},[1504,59966,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59968},[59969,59970],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":59702,"description":59710},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":59977,"title":59978,"body":59979,"category":33063,"componentType":25877,"description":59986,"extension":191,"meta":60171,"navigation":194,"path":60172,"requiresChild":32530,"seo":60173,"stem":60174,"__hash__":60175},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":59980,"toc":60167},[59981,59984,59987,59989,59991,59994,59996,60165],[11,59982,59978],{"id":59983},"multipointgradient",[15,59985,59986],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[31911,59988],{"component":59978},[23,59990,31915],{"id":26533},[31917,59992],{":props":59993},"[{\"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,59995,31923],{"id":31922},[246,59997,59998,60027,60055,60083,60111],{":tabs":1557},[212,59999,60001],{"className":334,"code":60000,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,60002,60003,60011,60019],{"__ignoreMap":178},[220,60004,60005,60007,60009],{"class":222,"line":223},[220,60006,343],{"class":264},[220,60008,347],{"class":346},[220,60010,359],{"class":264},[220,60012,60013,60015,60017],{"class":222,"line":179},[220,60014,364],{"class":264},[220,60016,59978],{"class":346},[220,60018,386],{"class":264},[220,60020,60021,60023,60025],{"class":222,"line":389},[220,60022,402],{"class":264},[220,60024,347],{"class":346},[220,60026,359],{"class":264},[212,60028,60029],{"className":409,"code":60000,"language":411,"meta":178,"style":178},[99,60030,60031,60039,60047],{"__ignoreMap":178},[220,60032,60033,60035,60037],{"class":222,"line":223},[220,60034,343],{"class":264},[220,60036,347],{"class":420},[220,60038,359],{"class":264},[220,60040,60041,60043,60045],{"class":222,"line":179},[220,60042,364],{"class":264},[220,60044,59978],{"class":420},[220,60046,386],{"class":264},[220,60048,60049,60051,60053],{"class":222,"line":389},[220,60050,402],{"class":264},[220,60052,347],{"class":420},[220,60054,359],{"class":264},[212,60056,60057],{"className":2844,"code":60000,"language":2846,"meta":178,"style":178},[99,60058,60059,60067,60075],{"__ignoreMap":178},[220,60060,60061,60063,60065],{"class":222,"line":223},[220,60062,343],{"class":264},[220,60064,347],{"class":420},[220,60066,359],{"class":264},[220,60068,60069,60071,60073],{"class":222,"line":179},[220,60070,364],{"class":264},[220,60072,59978],{"class":420},[220,60074,386],{"class":264},[220,60076,60077,60079,60081],{"class":222,"line":389},[220,60078,402],{"class":264},[220,60080,347],{"class":420},[220,60082,359],{"class":264},[212,60084,60085],{"className":468,"code":60000,"language":469,"meta":178,"style":178},[99,60086,60087,60095,60103],{"__ignoreMap":178},[220,60088,60089,60091,60093],{"class":222,"line":223},[220,60090,343],{"class":264},[220,60092,347],{"class":420},[220,60094,359],{"class":264},[220,60096,60097,60099,60101],{"class":222,"line":179},[220,60098,364],{"class":264},[220,60100,59978],{"class":420},[220,60102,386],{"class":264},[220,60104,60105,60107,60109],{"class":222,"line":389},[220,60106,402],{"class":264},[220,60108,347],{"class":420},[220,60110,359],{"class":264},[212,60112,60114],{"className":251,"code":60113,"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,60115,60116,60126,60130,60144,60148,60157,60161],{"__ignoreMap":178},[220,60117,60118,60120,60122,60124],{"class":222,"line":223},[220,60119,261],{"class":260},[220,60121,11512],{"class":264},[220,60123,268],{"class":260},[220,60125,4007],{"class":230},[220,60127,60128],{"class":222,"line":179},[220,60129,647],{"emptyLinePlaceholder":194},[220,60131,60132,60134,60136,60138,60140,60142],{"class":222,"line":389},[220,60133,1735],{"class":260},[220,60135,1738],{"class":420},[220,60137,1741],{"class":260},[220,60139,1744],{"class":260},[220,60141,1747],{"class":226},[220,60143,1750],{"class":264},[220,60145,60146],{"class":222,"line":399},[220,60147,1765],{"class":264},[220,60149,60150,60152,60155],{"class":222,"line":644},[220,60151,1770],{"class":264},[220,60153,60154],{"class":230},"'MultiPointGradient'",[220,60156,2465],{"class":264},[220,60158,60159],{"class":222,"line":650},[220,60160,1787],{"class":264},[220,60162,60163],{"class":222,"line":656},[220,60164,1792],{"class":264},[1504,60166,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60168},[60169,60170],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":59978,"description":59986},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":60177,"title":20980,"body":60178,"category":36569,"componentType":25877,"description":60185,"extension":191,"meta":60465,"navigation":194,"path":60466,"requiresChild":32530,"seo":60467,"stem":60468,"__hash__":60469},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":60179,"toc":60461},[60180,60183,60186,60188,60190,60193,60195,60459],[11,60181,20980],{"id":60182},"neon",[15,60184,60185],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[31911,60187],{"component":20980},[23,60189,31915],{"id":26533},[31917,60191],{":props":60192},"[{\"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,60194,31923],{"id":31922},[246,60196,60197,60247,60299,60347,60397],{":tabs":1557},[212,60198,60200],{"className":334,"code":60199,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,60201,60202,60210,60217,60226,60235,60239],{"__ignoreMap":178},[220,60203,60204,60206,60208],{"class":222,"line":223},[220,60205,343],{"class":264},[220,60207,347],{"class":346},[220,60209,359],{"class":264},[220,60211,60212,60214],{"class":222,"line":179},[220,60213,364],{"class":264},[220,60215,60216],{"class":346},"Neon\n",[220,60218,60219,60221,60223],{"class":222,"line":389},[220,60220,9635],{"class":226},[220,60222,353],{"class":264},[220,60224,60225],{"class":230},"\"#00ddff\"\n",[220,60227,60228,60230,60232],{"class":222,"line":399},[220,60229,20371],{"class":226},[220,60231,353],{"class":264},[220,60233,60234],{"class":230},"\"1.5\"\n",[220,60236,60237],{"class":222,"line":644},[220,60238,1234],{"class":264},[220,60240,60241,60243,60245],{"class":222,"line":650},[220,60242,402],{"class":264},[220,60244,347],{"class":346},[220,60246,359],{"class":264},[212,60248,60250],{"className":409,"code":60249,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,60251,60252,60260,60266,60274,60287,60291],{"__ignoreMap":178},[220,60253,60254,60256,60258],{"class":222,"line":223},[220,60255,343],{"class":264},[220,60257,347],{"class":420},[220,60259,359],{"class":264},[220,60261,60262,60264],{"class":222,"line":179},[220,60263,364],{"class":264},[220,60265,60216],{"class":420},[220,60267,60268,60270,60272],{"class":222,"line":389},[220,60269,9635],{"class":226},[220,60271,353],{"class":260},[220,60273,60225],{"class":230},[220,60275,60276,60278,60280,60282,60285],{"class":222,"line":399},[220,60277,20482],{"class":226},[220,60279,353],{"class":260},[220,60281,743],{"class":264},[220,60283,60284],{"class":420},"1.5",[220,60286,749],{"class":264},[220,60288,60289],{"class":222,"line":644},[220,60290,1234],{"class":264},[220,60292,60293,60295,60297],{"class":222,"line":650},[220,60294,402],{"class":264},[220,60296,347],{"class":420},[220,60298,359],{"class":264},[212,60300,60301],{"className":2844,"code":60249,"language":2846,"meta":178,"style":178},[99,60302,60303,60311,60317,60325,60335,60339],{"__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],{"class":222,"line":179},[220,60314,364],{"class":264},[220,60316,60216],{"class":420},[220,60318,60319,60321,60323],{"class":222,"line":389},[220,60320,9635],{"class":226},[220,60322,353],{"class":264},[220,60324,60225],{"class":230},[220,60326,60327,60329,60331,60333],{"class":222,"line":399},[220,60328,20482],{"class":226},[220,60330,29871],{"class":264},[220,60332,60284],{"class":420},[220,60334,749],{"class":264},[220,60336,60337],{"class":222,"line":644},[220,60338,1234],{"class":264},[220,60340,60341,60343,60345],{"class":222,"line":650},[220,60342,402],{"class":264},[220,60344,347],{"class":420},[220,60346,359],{"class":264},[212,60348,60349],{"className":468,"code":60249,"language":469,"meta":178,"style":178},[99,60350,60351,60359,60365,60373,60385,60389],{"__ignoreMap":178},[220,60352,60353,60355,60357],{"class":222,"line":223},[220,60354,343],{"class":264},[220,60356,347],{"class":420},[220,60358,359],{"class":264},[220,60360,60361,60363],{"class":222,"line":179},[220,60362,364],{"class":264},[220,60364,60216],{"class":420},[220,60366,60367,60369,60371],{"class":222,"line":389},[220,60368,9635],{"class":226},[220,60370,353],{"class":260},[220,60372,60225],{"class":230},[220,60374,60375,60377,60379,60381,60383],{"class":222,"line":399},[220,60376,20482],{"class":226},[220,60378,353],{"class":260},[220,60380,743],{"class":264},[220,60382,60284],{"class":420},[220,60384,749],{"class":264},[220,60386,60387],{"class":222,"line":644},[220,60388,1234],{"class":264},[220,60390,60391,60393,60395],{"class":222,"line":650},[220,60392,402],{"class":264},[220,60394,347],{"class":420},[220,60396,359],{"class":264},[212,60398,60400],{"className":251,"code":60399,"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,60401,60402,60412,60416,60430,60434,60451,60455],{"__ignoreMap":178},[220,60403,60404,60406,60408,60410],{"class":222,"line":223},[220,60405,261],{"class":260},[220,60407,11512],{"class":264},[220,60409,268],{"class":260},[220,60411,4007],{"class":230},[220,60413,60414],{"class":222,"line":179},[220,60415,647],{"emptyLinePlaceholder":194},[220,60417,60418,60420,60422,60424,60426,60428],{"class":222,"line":389},[220,60419,1735],{"class":260},[220,60421,1738],{"class":420},[220,60423,1741],{"class":260},[220,60425,1744],{"class":260},[220,60427,1747],{"class":226},[220,60429,1750],{"class":264},[220,60431,60432],{"class":222,"line":399},[220,60433,1765],{"class":264},[220,60435,60436,60438,60440,60442,60445,60447,60449],{"class":222,"line":644},[220,60437,1770],{"class":264},[220,60439,21587],{"class":230},[220,60441,1776],{"class":264},[220,60443,60444],{"class":230},"'#00ddff'",[220,60446,45003],{"class":264},[220,60448,60284],{"class":420},[220,60450,1782],{"class":264},[220,60452,60453],{"class":222,"line":650},[220,60454,1787],{"class":264},[220,60456,60457],{"class":222,"line":656},[220,60458,1792],{"class":264},[1504,60460,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60462},[60463,60464],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":20980,"description":60185},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":60471,"title":60472,"body":60473,"category":33673,"componentType":25883,"description":60480,"extension":191,"meta":60741,"navigation":194,"path":60742,"requiresChild":194,"seo":60743,"stem":60744,"__hash__":60745},"components\u002Fdocs\u002Fcomponents\u002FNoiseDissolve.md","NoiseDissolve",{"type":8,"value":60474,"toc":60737},[60475,60478,60481,60483,60485,60488,60490,60735],[11,60476,60472],{"id":60477},"noisedissolve",[15,60479,60480],{},"Dissolve the content away through an organic noise pattern",[31911,60482],{"component":60472},[23,60484,31915],{"id":26533},[31917,60486],{":props":60487},"[{\"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,60489,31923],{"id":31922},[246,60491,60492,60537,60581,60625,60669],{":tabs":1557},[212,60493,60495],{"className":334,"code":60494,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNoiseDissolve>\n \u003CCircle \u002F>\n \u003C\u002FNoiseDissolve>\n\u003C\u002FShader>\n",[99,60496,60497,60505,60513,60521,60529],{"__ignoreMap":178},[220,60498,60499,60501,60503],{"class":222,"line":223},[220,60500,343],{"class":264},[220,60502,347],{"class":346},[220,60504,359],{"class":264},[220,60506,60507,60509,60511],{"class":222,"line":179},[220,60508,364],{"class":264},[220,60510,60472],{"class":346},[220,60512,359],{"class":264},[220,60514,60515,60517,60519],{"class":222,"line":389},[220,60516,2550],{"class":264},[220,60518,2553],{"class":346},[220,60520,386],{"class":264},[220,60522,60523,60525,60527],{"class":222,"line":399},[220,60524,2567],{"class":264},[220,60526,60472],{"class":346},[220,60528,359],{"class":264},[220,60530,60531,60533,60535],{"class":222,"line":644},[220,60532,402],{"class":264},[220,60534,347],{"class":346},[220,60536,359],{"class":264},[212,60538,60539],{"className":409,"code":60494,"language":411,"meta":178,"style":178},[99,60540,60541,60549,60557,60565,60573],{"__ignoreMap":178},[220,60542,60543,60545,60547],{"class":222,"line":223},[220,60544,343],{"class":264},[220,60546,347],{"class":420},[220,60548,359],{"class":264},[220,60550,60551,60553,60555],{"class":222,"line":179},[220,60552,364],{"class":264},[220,60554,60472],{"class":420},[220,60556,359],{"class":264},[220,60558,60559,60561,60563],{"class":222,"line":389},[220,60560,2550],{"class":264},[220,60562,2553],{"class":420},[220,60564,386],{"class":264},[220,60566,60567,60569,60571],{"class":222,"line":399},[220,60568,2567],{"class":264},[220,60570,60472],{"class":420},[220,60572,359],{"class":264},[220,60574,60575,60577,60579],{"class":222,"line":644},[220,60576,402],{"class":264},[220,60578,347],{"class":420},[220,60580,359],{"class":264},[212,60582,60583],{"className":2844,"code":60494,"language":2846,"meta":178,"style":178},[99,60584,60585,60593,60601,60609,60617],{"__ignoreMap":178},[220,60586,60587,60589,60591],{"class":222,"line":223},[220,60588,343],{"class":264},[220,60590,347],{"class":420},[220,60592,359],{"class":264},[220,60594,60595,60597,60599],{"class":222,"line":179},[220,60596,364],{"class":264},[220,60598,60472],{"class":420},[220,60600,359],{"class":264},[220,60602,60603,60605,60607],{"class":222,"line":389},[220,60604,2550],{"class":264},[220,60606,2553],{"class":420},[220,60608,386],{"class":264},[220,60610,60611,60613,60615],{"class":222,"line":399},[220,60612,2567],{"class":264},[220,60614,60472],{"class":420},[220,60616,359],{"class":264},[220,60618,60619,60621,60623],{"class":222,"line":644},[220,60620,402],{"class":264},[220,60622,347],{"class":420},[220,60624,359],{"class":264},[212,60626,60627],{"className":468,"code":60494,"language":469,"meta":178,"style":178},[99,60628,60629,60637,60645,60653,60661],{"__ignoreMap":178},[220,60630,60631,60633,60635],{"class":222,"line":223},[220,60632,343],{"class":264},[220,60634,347],{"class":420},[220,60636,359],{"class":264},[220,60638,60639,60641,60643],{"class":222,"line":179},[220,60640,364],{"class":264},[220,60642,60472],{"class":420},[220,60644,359],{"class":264},[220,60646,60647,60649,60651],{"class":222,"line":389},[220,60648,2550],{"class":264},[220,60650,2553],{"class":420},[220,60652,386],{"class":264},[220,60654,60655,60657,60659],{"class":222,"line":399},[220,60656,2567],{"class":264},[220,60658,60472],{"class":420},[220,60660,359],{"class":264},[220,60662,60663,60665,60667],{"class":222,"line":644},[220,60664,402],{"class":264},[220,60666,347],{"class":420},[220,60668,359],{"class":264},[212,60670,60672],{"className":251,"code":60671,"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,60673,60674,60684,60688,60702,60706,60715,60723,60727,60731],{"__ignoreMap":178},[220,60675,60676,60678,60680,60682],{"class":222,"line":223},[220,60677,261],{"class":260},[220,60679,11512],{"class":264},[220,60681,268],{"class":260},[220,60683,4007],{"class":230},[220,60685,60686],{"class":222,"line":179},[220,60687,647],{"emptyLinePlaceholder":194},[220,60689,60690,60692,60694,60696,60698,60700],{"class":222,"line":389},[220,60691,1735],{"class":260},[220,60693,1738],{"class":420},[220,60695,1741],{"class":260},[220,60697,1744],{"class":260},[220,60699,1747],{"class":226},[220,60701,1750],{"class":264},[220,60703,60704],{"class":222,"line":399},[220,60705,1765],{"class":264},[220,60707,60708,60710,60713],{"class":222,"line":644},[220,60709,1770],{"class":264},[220,60711,60712],{"class":230},"'NoiseDissolve'",[220,60714,7009],{"class":264},[220,60716,60717,60719,60721],{"class":222,"line":650},[220,60718,7014],{"class":264},[220,60720,3206],{"class":230},[220,60722,2465],{"class":264},[220,60724,60725],{"class":222,"line":656},[220,60726,7031],{"class":264},[220,60728,60729],{"class":222,"line":673},[220,60730,1787],{"class":264},[220,60732,60733],{"class":222,"line":682},[220,60734,1792],{"class":264},[1504,60736,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60738},[60739,60740],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fnoisedissolve",{"title":60472,"description":60480},"docs\u002Fcomponents\u002FNoiseDissolve","F_aVeqJAkNkkZ_aCCg745ZVvogpO7CXcGAt4J3G8JeQ",{"id":60747,"title":60748,"body":60749,"category":32806,"componentType":25883,"description":60756,"extension":191,"meta":61017,"navigation":194,"path":61018,"requiresChild":194,"seo":61019,"stem":61020,"__hash__":61021},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":60750,"toc":61013},[60751,60754,60757,60759,60761,60764,60766,61011],[11,60752,60748],{"id":60753},"objecttracker",[15,60755,60756],{},"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,60758],{"component":60748},[23,60760,31915],{"id":26533},[31917,60762],{":props":60763},"[{\"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,60765,31923],{"id":31922},[246,60767,60768,60813,60857,60901,60945],{":tabs":1557},[212,60769,60771],{"className":334,"code":60770,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,60772,60773,60781,60789,60797,60805],{"__ignoreMap":178},[220,60774,60775,60777,60779],{"class":222,"line":223},[220,60776,343],{"class":264},[220,60778,347],{"class":346},[220,60780,359],{"class":264},[220,60782,60783,60785,60787],{"class":222,"line":179},[220,60784,364],{"class":264},[220,60786,60748],{"class":346},[220,60788,359],{"class":264},[220,60790,60791,60793,60795],{"class":222,"line":389},[220,60792,2550],{"class":264},[220,60794,2553],{"class":346},[220,60796,386],{"class":264},[220,60798,60799,60801,60803],{"class":222,"line":399},[220,60800,2567],{"class":264},[220,60802,60748],{"class":346},[220,60804,359],{"class":264},[220,60806,60807,60809,60811],{"class":222,"line":644},[220,60808,402],{"class":264},[220,60810,347],{"class":346},[220,60812,359],{"class":264},[212,60814,60815],{"className":409,"code":60770,"language":411,"meta":178,"style":178},[99,60816,60817,60825,60833,60841,60849],{"__ignoreMap":178},[220,60818,60819,60821,60823],{"class":222,"line":223},[220,60820,343],{"class":264},[220,60822,347],{"class":420},[220,60824,359],{"class":264},[220,60826,60827,60829,60831],{"class":222,"line":179},[220,60828,364],{"class":264},[220,60830,60748],{"class":420},[220,60832,359],{"class":264},[220,60834,60835,60837,60839],{"class":222,"line":389},[220,60836,2550],{"class":264},[220,60838,2553],{"class":420},[220,60840,386],{"class":264},[220,60842,60843,60845,60847],{"class":222,"line":399},[220,60844,2567],{"class":264},[220,60846,60748],{"class":420},[220,60848,359],{"class":264},[220,60850,60851,60853,60855],{"class":222,"line":644},[220,60852,402],{"class":264},[220,60854,347],{"class":420},[220,60856,359],{"class":264},[212,60858,60859],{"className":2844,"code":60770,"language":2846,"meta":178,"style":178},[99,60860,60861,60869,60877,60885,60893],{"__ignoreMap":178},[220,60862,60863,60865,60867],{"class":222,"line":223},[220,60864,343],{"class":264},[220,60866,347],{"class":420},[220,60868,359],{"class":264},[220,60870,60871,60873,60875],{"class":222,"line":179},[220,60872,364],{"class":264},[220,60874,60748],{"class":420},[220,60876,359],{"class":264},[220,60878,60879,60881,60883],{"class":222,"line":389},[220,60880,2550],{"class":264},[220,60882,2553],{"class":420},[220,60884,386],{"class":264},[220,60886,60887,60889,60891],{"class":222,"line":399},[220,60888,2567],{"class":264},[220,60890,60748],{"class":420},[220,60892,359],{"class":264},[220,60894,60895,60897,60899],{"class":222,"line":644},[220,60896,402],{"class":264},[220,60898,347],{"class":420},[220,60900,359],{"class":264},[212,60902,60903],{"className":468,"code":60770,"language":469,"meta":178,"style":178},[99,60904,60905,60913,60921,60929,60937],{"__ignoreMap":178},[220,60906,60907,60909,60911],{"class":222,"line":223},[220,60908,343],{"class":264},[220,60910,347],{"class":420},[220,60912,359],{"class":264},[220,60914,60915,60917,60919],{"class":222,"line":179},[220,60916,364],{"class":264},[220,60918,60748],{"class":420},[220,60920,359],{"class":264},[220,60922,60923,60925,60927],{"class":222,"line":389},[220,60924,2550],{"class":264},[220,60926,2553],{"class":420},[220,60928,386],{"class":264},[220,60930,60931,60933,60935],{"class":222,"line":399},[220,60932,2567],{"class":264},[220,60934,60748],{"class":420},[220,60936,359],{"class":264},[220,60938,60939,60941,60943],{"class":222,"line":644},[220,60940,402],{"class":264},[220,60942,347],{"class":420},[220,60944,359],{"class":264},[212,60946,60948],{"className":251,"code":60947,"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,60949,60950,60960,60964,60978,60982,60991,60999,61003,61007],{"__ignoreMap":178},[220,60951,60952,60954,60956,60958],{"class":222,"line":223},[220,60953,261],{"class":260},[220,60955,11512],{"class":264},[220,60957,268],{"class":260},[220,60959,4007],{"class":230},[220,60961,60962],{"class":222,"line":179},[220,60963,647],{"emptyLinePlaceholder":194},[220,60965,60966,60968,60970,60972,60974,60976],{"class":222,"line":389},[220,60967,1735],{"class":260},[220,60969,1738],{"class":420},[220,60971,1741],{"class":260},[220,60973,1744],{"class":260},[220,60975,1747],{"class":226},[220,60977,1750],{"class":264},[220,60979,60980],{"class":222,"line":399},[220,60981,1765],{"class":264},[220,60983,60984,60986,60989],{"class":222,"line":644},[220,60985,1770],{"class":264},[220,60987,60988],{"class":230},"'ObjectTracker'",[220,60990,7009],{"class":264},[220,60992,60993,60995,60997],{"class":222,"line":650},[220,60994,7014],{"class":264},[220,60996,3206],{"class":230},[220,60998,2465],{"class":264},[220,61000,61001],{"class":222,"line":656},[220,61002,7031],{"class":264},[220,61004,61005],{"class":222,"line":673},[220,61006,1787],{"class":264},[220,61008,61009],{"class":222,"line":682},[220,61010,1792],{"class":264},[1504,61012,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":61014},[61015,61016],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":60748,"description":60756},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":61023,"title":61024,"body":61025,"category":33673,"componentType":25883,"description":61032,"extension":191,"meta":61350,"navigation":194,"path":61351,"requiresChild":194,"seo":61352,"stem":61353,"__hash__":61354},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":61026,"toc":61346},[61027,61030,61033,61035,61037,61040,61042,61344],[11,61028,61024],{"id":61029},"pagepeel",[15,61031,61032],{},"Curl the content up from a corner like a peeling page",[31911,61034],{"component":61024},[23,61036,31915],{"id":26533},[31917,61038],{":props":61039},"[{\"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,61041,31923],{"id":31922},[246,61043,61044,61101,61160,61216,61274],{":tabs":1557},[212,61045,61047],{"className":334,"code":61046,"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,61048,61049,61057,61064,61073,61077,61085,61093],{"__ignoreMap":178},[220,61050,61051,61053,61055],{"class":222,"line":223},[220,61052,343],{"class":264},[220,61054,347],{"class":346},[220,61056,359],{"class":264},[220,61058,61059,61061],{"class":222,"line":179},[220,61060,364],{"class":264},[220,61062,61063],{"class":346},"PagePeel\n",[220,61065,61066,61068,61070],{"class":222,"line":389},[220,61067,17405],{"class":226},[220,61069,353],{"class":264},[220,61071,61072],{"class":230},"\"0.2\"\n",[220,61074,61075],{"class":222,"line":399},[220,61076,31959],{"class":264},[220,61078,61079,61081,61083],{"class":222,"line":644},[220,61080,2550],{"class":264},[220,61082,2553],{"class":346},[220,61084,386],{"class":264},[220,61086,61087,61089,61091],{"class":222,"line":650},[220,61088,2567],{"class":264},[220,61090,61024],{"class":346},[220,61092,359],{"class":264},[220,61094,61095,61097,61099],{"class":222,"line":656},[220,61096,402],{"class":264},[220,61098,347],{"class":346},[220,61100,359],{"class":264},[212,61102,61104],{"className":409,"code":61103,"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,61105,61106,61114,61120,61132,61136,61144,61152],{"__ignoreMap":178},[220,61107,61108,61110,61112],{"class":222,"line":223},[220,61109,343],{"class":264},[220,61111,347],{"class":420},[220,61113,359],{"class":264},[220,61115,61116,61118],{"class":222,"line":179},[220,61117,364],{"class":264},[220,61119,61063],{"class":420},[220,61121,61122,61124,61126,61128,61130],{"class":222,"line":389},[220,61123,9645],{"class":226},[220,61125,353],{"class":260},[220,61127,743],{"class":264},[220,61129,16976],{"class":420},[220,61131,749],{"class":264},[220,61133,61134],{"class":222,"line":399},[220,61135,31959],{"class":264},[220,61137,61138,61140,61142],{"class":222,"line":644},[220,61139,2550],{"class":264},[220,61141,2553],{"class":420},[220,61143,386],{"class":264},[220,61145,61146,61148,61150],{"class":222,"line":650},[220,61147,2567],{"class":264},[220,61149,61024],{"class":420},[220,61151,359],{"class":264},[220,61153,61154,61156,61158],{"class":222,"line":656},[220,61155,402],{"class":264},[220,61157,347],{"class":420},[220,61159,359],{"class":264},[212,61161,61162],{"className":2844,"code":61103,"language":2846,"meta":178,"style":178},[99,61163,61164,61172,61178,61188,61192,61200,61208],{"__ignoreMap":178},[220,61165,61166,61168,61170],{"class":222,"line":223},[220,61167,343],{"class":264},[220,61169,347],{"class":420},[220,61171,359],{"class":264},[220,61173,61174,61176],{"class":222,"line":179},[220,61175,364],{"class":264},[220,61177,61063],{"class":420},[220,61179,61180,61182,61184,61186],{"class":222,"line":389},[220,61181,9645],{"class":226},[220,61183,29871],{"class":264},[220,61185,16976],{"class":420},[220,61187,749],{"class":264},[220,61189,61190],{"class":222,"line":399},[220,61191,31959],{"class":264},[220,61193,61194,61196,61198],{"class":222,"line":644},[220,61195,2550],{"class":264},[220,61197,2553],{"class":420},[220,61199,386],{"class":264},[220,61201,61202,61204,61206],{"class":222,"line":650},[220,61203,2567],{"class":264},[220,61205,61024],{"class":420},[220,61207,359],{"class":264},[220,61209,61210,61212,61214],{"class":222,"line":656},[220,61211,402],{"class":264},[220,61213,347],{"class":420},[220,61215,359],{"class":264},[212,61217,61218],{"className":468,"code":61103,"language":469,"meta":178,"style":178},[99,61219,61220,61228,61234,61246,61250,61258,61266],{"__ignoreMap":178},[220,61221,61222,61224,61226],{"class":222,"line":223},[220,61223,343],{"class":264},[220,61225,347],{"class":420},[220,61227,359],{"class":264},[220,61229,61230,61232],{"class":222,"line":179},[220,61231,364],{"class":264},[220,61233,61063],{"class":420},[220,61235,61236,61238,61240,61242,61244],{"class":222,"line":389},[220,61237,9645],{"class":226},[220,61239,353],{"class":260},[220,61241,743],{"class":264},[220,61243,16976],{"class":420},[220,61245,749],{"class":264},[220,61247,61248],{"class":222,"line":399},[220,61249,31959],{"class":264},[220,61251,61252,61254,61256],{"class":222,"line":644},[220,61253,2550],{"class":264},[220,61255,2553],{"class":420},[220,61257,386],{"class":264},[220,61259,61260,61262,61264],{"class":222,"line":650},[220,61261,2567],{"class":264},[220,61263,61024],{"class":420},[220,61265,359],{"class":264},[220,61267,61268,61270,61272],{"class":222,"line":656},[220,61269,402],{"class":264},[220,61271,347],{"class":420},[220,61273,359],{"class":264},[212,61275,61277],{"className":251,"code":61276,"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,61278,61279,61289,61293,61307,61311,61324,61332,61336,61340],{"__ignoreMap":178},[220,61280,61281,61283,61285,61287],{"class":222,"line":223},[220,61282,261],{"class":260},[220,61284,11512],{"class":264},[220,61286,268],{"class":260},[220,61288,4007],{"class":230},[220,61290,61291],{"class":222,"line":179},[220,61292,647],{"emptyLinePlaceholder":194},[220,61294,61295,61297,61299,61301,61303,61305],{"class":222,"line":389},[220,61296,1735],{"class":260},[220,61298,1738],{"class":420},[220,61300,1741],{"class":260},[220,61302,1744],{"class":260},[220,61304,1747],{"class":226},[220,61306,1750],{"class":264},[220,61308,61309],{"class":222,"line":399},[220,61310,1765],{"class":264},[220,61312,61313,61315,61318,61320,61322],{"class":222,"line":644},[220,61314,1770],{"class":264},[220,61316,61317],{"class":230},"'PagePeel'",[220,61319,7541],{"class":264},[220,61321,16976],{"class":420},[220,61323,7546],{"class":264},[220,61325,61326,61328,61330],{"class":222,"line":650},[220,61327,7014],{"class":264},[220,61329,3206],{"class":230},[220,61331,2465],{"class":264},[220,61333,61334],{"class":222,"line":656},[220,61335,7031],{"class":264},[220,61337,61338],{"class":222,"line":673},[220,61339,1787],{"class":264},[220,61341,61342],{"class":222,"line":682},[220,61343,1792],{"class":264},[1504,61345,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61347},[61348,61349],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":61024,"description":61032},"docs\u002Fcomponents\u002FPagePeel","_NeopYd_-B_NGUYuoaMmpptj7IZDDKnYCjDx53B4nGQ",{"id":61356,"title":61357,"body":61358,"category":32806,"componentType":25883,"description":61365,"extension":191,"meta":61626,"navigation":194,"path":61627,"requiresChild":194,"seo":61628,"stem":61629,"__hash__":61630},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":61359,"toc":61622},[61360,61363,61366,61368,61370,61373,61375,61620],[11,61361,61357],{"id":61362},"paper",[15,61364,61365],{},"Applies realistic paper grain and surface roughness to child content",[31911,61367],{"component":61357},[23,61369,31915],{"id":26533},[31917,61371],{":props":61372},"[{\"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,61374,31923],{"id":31922},[246,61376,61377,61422,61466,61510,61554],{":tabs":1557},[212,61378,61380],{"className":334,"code":61379,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,61381,61382,61390,61398,61406,61414],{"__ignoreMap":178},[220,61383,61384,61386,61388],{"class":222,"line":223},[220,61385,343],{"class":264},[220,61387,347],{"class":346},[220,61389,359],{"class":264},[220,61391,61392,61394,61396],{"class":222,"line":179},[220,61393,364],{"class":264},[220,61395,61357],{"class":346},[220,61397,359],{"class":264},[220,61399,61400,61402,61404],{"class":222,"line":389},[220,61401,2550],{"class":264},[220,61403,2553],{"class":346},[220,61405,386],{"class":264},[220,61407,61408,61410,61412],{"class":222,"line":399},[220,61409,2567],{"class":264},[220,61411,61357],{"class":346},[220,61413,359],{"class":264},[220,61415,61416,61418,61420],{"class":222,"line":644},[220,61417,402],{"class":264},[220,61419,347],{"class":346},[220,61421,359],{"class":264},[212,61423,61424],{"className":409,"code":61379,"language":411,"meta":178,"style":178},[99,61425,61426,61434,61442,61450,61458],{"__ignoreMap":178},[220,61427,61428,61430,61432],{"class":222,"line":223},[220,61429,343],{"class":264},[220,61431,347],{"class":420},[220,61433,359],{"class":264},[220,61435,61436,61438,61440],{"class":222,"line":179},[220,61437,364],{"class":264},[220,61439,61357],{"class":420},[220,61441,359],{"class":264},[220,61443,61444,61446,61448],{"class":222,"line":389},[220,61445,2550],{"class":264},[220,61447,2553],{"class":420},[220,61449,386],{"class":264},[220,61451,61452,61454,61456],{"class":222,"line":399},[220,61453,2567],{"class":264},[220,61455,61357],{"class":420},[220,61457,359],{"class":264},[220,61459,61460,61462,61464],{"class":222,"line":644},[220,61461,402],{"class":264},[220,61463,347],{"class":420},[220,61465,359],{"class":264},[212,61467,61468],{"className":2844,"code":61379,"language":2846,"meta":178,"style":178},[99,61469,61470,61478,61486,61494,61502],{"__ignoreMap":178},[220,61471,61472,61474,61476],{"class":222,"line":223},[220,61473,343],{"class":264},[220,61475,347],{"class":420},[220,61477,359],{"class":264},[220,61479,61480,61482,61484],{"class":222,"line":179},[220,61481,364],{"class":264},[220,61483,61357],{"class":420},[220,61485,359],{"class":264},[220,61487,61488,61490,61492],{"class":222,"line":389},[220,61489,2550],{"class":264},[220,61491,2553],{"class":420},[220,61493,386],{"class":264},[220,61495,61496,61498,61500],{"class":222,"line":399},[220,61497,2567],{"class":264},[220,61499,61357],{"class":420},[220,61501,359],{"class":264},[220,61503,61504,61506,61508],{"class":222,"line":644},[220,61505,402],{"class":264},[220,61507,347],{"class":420},[220,61509,359],{"class":264},[212,61511,61512],{"className":468,"code":61379,"language":469,"meta":178,"style":178},[99,61513,61514,61522,61530,61538,61546],{"__ignoreMap":178},[220,61515,61516,61518,61520],{"class":222,"line":223},[220,61517,343],{"class":264},[220,61519,347],{"class":420},[220,61521,359],{"class":264},[220,61523,61524,61526,61528],{"class":222,"line":179},[220,61525,364],{"class":264},[220,61527,61357],{"class":420},[220,61529,359],{"class":264},[220,61531,61532,61534,61536],{"class":222,"line":389},[220,61533,2550],{"class":264},[220,61535,2553],{"class":420},[220,61537,386],{"class":264},[220,61539,61540,61542,61544],{"class":222,"line":399},[220,61541,2567],{"class":264},[220,61543,61357],{"class":420},[220,61545,359],{"class":264},[220,61547,61548,61550,61552],{"class":222,"line":644},[220,61549,402],{"class":264},[220,61551,347],{"class":420},[220,61553,359],{"class":264},[212,61555,61557],{"className":251,"code":61556,"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,61558,61559,61569,61573,61587,61591,61600,61608,61612,61616],{"__ignoreMap":178},[220,61560,61561,61563,61565,61567],{"class":222,"line":223},[220,61562,261],{"class":260},[220,61564,11512],{"class":264},[220,61566,268],{"class":260},[220,61568,4007],{"class":230},[220,61570,61571],{"class":222,"line":179},[220,61572,647],{"emptyLinePlaceholder":194},[220,61574,61575,61577,61579,61581,61583,61585],{"class":222,"line":389},[220,61576,1735],{"class":260},[220,61578,1738],{"class":420},[220,61580,1741],{"class":260},[220,61582,1744],{"class":260},[220,61584,1747],{"class":226},[220,61586,1750],{"class":264},[220,61588,61589],{"class":222,"line":399},[220,61590,1765],{"class":264},[220,61592,61593,61595,61598],{"class":222,"line":644},[220,61594,1770],{"class":264},[220,61596,61597],{"class":230},"'Paper'",[220,61599,7009],{"class":264},[220,61601,61602,61604,61606],{"class":222,"line":650},[220,61603,7014],{"class":264},[220,61605,3206],{"class":230},[220,61607,2465],{"class":264},[220,61609,61610],{"class":222,"line":656},[220,61611,7031],{"class":264},[220,61613,61614],{"class":222,"line":673},[220,61615,1787],{"class":264},[220,61617,61618],{"class":222,"line":682},[220,61619,1792],{"class":264},[1504,61621,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":61623},[61624,61625],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":61357,"description":61365},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":61632,"title":61633,"body":61634,"category":15908,"componentType":25877,"description":61641,"extension":191,"meta":61871,"navigation":194,"path":61872,"requiresChild":32530,"seo":61873,"stem":61874,"__hash__":61875},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":61635,"toc":61867},[61636,61639,61642,61644,61646,61649,61651,61865],[11,61637,61633],{"id":61638},"parallelogram",[15,61640,61641],{},"Parallelogram with adjustable width, height and skew",[31911,61643],{"component":61633},[23,61645,31915],{"id":26533},[31917,61647],{":props":61648},"[{\"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,61650,31923],{"id":31922},[246,61652,61653,61693,61731,61769,61807],{":tabs":1557},[212,61654,61656],{"className":334,"code":61655,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,61657,61658,61666,61673,61681,61685],{"__ignoreMap":178},[220,61659,61660,61662,61664],{"class":222,"line":223},[220,61661,343],{"class":264},[220,61663,347],{"class":346},[220,61665,359],{"class":264},[220,61667,61668,61670],{"class":222,"line":179},[220,61669,364],{"class":264},[220,61671,61672],{"class":346},"Parallelogram\n",[220,61674,61675,61677,61679],{"class":222,"line":389},[220,61676,9635],{"class":226},[220,61678,353],{"class":264},[220,61680,9591],{"class":230},[220,61682,61683],{"class":222,"line":399},[220,61684,1234],{"class":264},[220,61686,61687,61689,61691],{"class":222,"line":644},[220,61688,402],{"class":264},[220,61690,347],{"class":346},[220,61692,359],{"class":264},[212,61694,61695],{"className":409,"code":61655,"language":411,"meta":178,"style":178},[99,61696,61697,61705,61711,61719,61723],{"__ignoreMap":178},[220,61698,61699,61701,61703],{"class":222,"line":223},[220,61700,343],{"class":264},[220,61702,347],{"class":420},[220,61704,359],{"class":264},[220,61706,61707,61709],{"class":222,"line":179},[220,61708,364],{"class":264},[220,61710,61672],{"class":420},[220,61712,61713,61715,61717],{"class":222,"line":389},[220,61714,9635],{"class":226},[220,61716,353],{"class":260},[220,61718,9591],{"class":230},[220,61720,61721],{"class":222,"line":399},[220,61722,1234],{"class":264},[220,61724,61725,61727,61729],{"class":222,"line":644},[220,61726,402],{"class":264},[220,61728,347],{"class":420},[220,61730,359],{"class":264},[212,61732,61733],{"className":2844,"code":61655,"language":2846,"meta":178,"style":178},[99,61734,61735,61743,61749,61757,61761],{"__ignoreMap":178},[220,61736,61737,61739,61741],{"class":222,"line":223},[220,61738,343],{"class":264},[220,61740,347],{"class":420},[220,61742,359],{"class":264},[220,61744,61745,61747],{"class":222,"line":179},[220,61746,364],{"class":264},[220,61748,61672],{"class":420},[220,61750,61751,61753,61755],{"class":222,"line":389},[220,61752,9635],{"class":226},[220,61754,353],{"class":264},[220,61756,9591],{"class":230},[220,61758,61759],{"class":222,"line":399},[220,61760,1234],{"class":264},[220,61762,61763,61765,61767],{"class":222,"line":644},[220,61764,402],{"class":264},[220,61766,347],{"class":420},[220,61768,359],{"class":264},[212,61770,61771],{"className":468,"code":61655,"language":469,"meta":178,"style":178},[99,61772,61773,61781,61787,61795,61799],{"__ignoreMap":178},[220,61774,61775,61777,61779],{"class":222,"line":223},[220,61776,343],{"class":264},[220,61778,347],{"class":420},[220,61780,359],{"class":264},[220,61782,61783,61785],{"class":222,"line":179},[220,61784,364],{"class":264},[220,61786,61672],{"class":420},[220,61788,61789,61791,61793],{"class":222,"line":389},[220,61790,9635],{"class":226},[220,61792,353],{"class":260},[220,61794,9591],{"class":230},[220,61796,61797],{"class":222,"line":399},[220,61798,1234],{"class":264},[220,61800,61801,61803,61805],{"class":222,"line":644},[220,61802,402],{"class":264},[220,61804,347],{"class":420},[220,61806,359],{"class":264},[212,61808,61810],{"className":251,"code":61809,"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,61811,61812,61822,61826,61840,61844,61857,61861],{"__ignoreMap":178},[220,61813,61814,61816,61818,61820],{"class":222,"line":223},[220,61815,261],{"class":260},[220,61817,11512],{"class":264},[220,61819,268],{"class":260},[220,61821,4007],{"class":230},[220,61823,61824],{"class":222,"line":179},[220,61825,647],{"emptyLinePlaceholder":194},[220,61827,61828,61830,61832,61834,61836,61838],{"class":222,"line":389},[220,61829,1735],{"class":260},[220,61831,1738],{"class":420},[220,61833,1741],{"class":260},[220,61835,1744],{"class":260},[220,61837,1747],{"class":226},[220,61839,1750],{"class":264},[220,61841,61842],{"class":222,"line":399},[220,61843,1765],{"class":264},[220,61845,61846,61848,61851,61853,61855],{"class":222,"line":644},[220,61847,1770],{"class":264},[220,61849,61850],{"class":230},"'Parallelogram'",[220,61852,1776],{"class":264},[220,61854,10169],{"class":230},[220,61856,1782],{"class":264},[220,61858,61859],{"class":222,"line":650},[220,61860,1787],{"class":264},[220,61862,61863],{"class":222,"line":656},[220,61864,1792],{"class":264},[1504,61866,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61868},[61869,61870],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":61633,"description":61641},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":61877,"title":61878,"body":61879,"category":32806,"componentType":25883,"description":61886,"extension":191,"meta":62147,"navigation":194,"path":62148,"requiresChild":194,"seo":62149,"stem":62150,"__hash__":62151},"components\u002Fdocs\u002Fcomponents\u002FParticleField.md","ParticleField",{"type":8,"value":61880,"toc":62143},[61881,61884,61887,61889,61891,61894,61896,62141],[11,61882,61878],{"id":61883},"particlefield",[15,61885,61886],{},"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,61888],{"component":61878},[23,61890,31915],{"id":26533},[31917,61892],{":props":61893},"[{\"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,61895,31923],{"id":31922},[246,61897,61898,61943,61987,62031,62075],{":tabs":1557},[212,61899,61901],{"className":334,"code":61900,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleField>\n \u003CCircle \u002F>\n \u003C\u002FParticleField>\n\u003C\u002FShader>\n",[99,61902,61903,61911,61919,61927,61935],{"__ignoreMap":178},[220,61904,61905,61907,61909],{"class":222,"line":223},[220,61906,343],{"class":264},[220,61908,347],{"class":346},[220,61910,359],{"class":264},[220,61912,61913,61915,61917],{"class":222,"line":179},[220,61914,364],{"class":264},[220,61916,61878],{"class":346},[220,61918,359],{"class":264},[220,61920,61921,61923,61925],{"class":222,"line":389},[220,61922,2550],{"class":264},[220,61924,2553],{"class":346},[220,61926,386],{"class":264},[220,61928,61929,61931,61933],{"class":222,"line":399},[220,61930,2567],{"class":264},[220,61932,61878],{"class":346},[220,61934,359],{"class":264},[220,61936,61937,61939,61941],{"class":222,"line":644},[220,61938,402],{"class":264},[220,61940,347],{"class":346},[220,61942,359],{"class":264},[212,61944,61945],{"className":409,"code":61900,"language":411,"meta":178,"style":178},[99,61946,61947,61955,61963,61971,61979],{"__ignoreMap":178},[220,61948,61949,61951,61953],{"class":222,"line":223},[220,61950,343],{"class":264},[220,61952,347],{"class":420},[220,61954,359],{"class":264},[220,61956,61957,61959,61961],{"class":222,"line":179},[220,61958,364],{"class":264},[220,61960,61878],{"class":420},[220,61962,359],{"class":264},[220,61964,61965,61967,61969],{"class":222,"line":389},[220,61966,2550],{"class":264},[220,61968,2553],{"class":420},[220,61970,386],{"class":264},[220,61972,61973,61975,61977],{"class":222,"line":399},[220,61974,2567],{"class":264},[220,61976,61878],{"class":420},[220,61978,359],{"class":264},[220,61980,61981,61983,61985],{"class":222,"line":644},[220,61982,402],{"class":264},[220,61984,347],{"class":420},[220,61986,359],{"class":264},[212,61988,61989],{"className":2844,"code":61900,"language":2846,"meta":178,"style":178},[99,61990,61991,61999,62007,62015,62023],{"__ignoreMap":178},[220,61992,61993,61995,61997],{"class":222,"line":223},[220,61994,343],{"class":264},[220,61996,347],{"class":420},[220,61998,359],{"class":264},[220,62000,62001,62003,62005],{"class":222,"line":179},[220,62002,364],{"class":264},[220,62004,61878],{"class":420},[220,62006,359],{"class":264},[220,62008,62009,62011,62013],{"class":222,"line":389},[220,62010,2550],{"class":264},[220,62012,2553],{"class":420},[220,62014,386],{"class":264},[220,62016,62017,62019,62021],{"class":222,"line":399},[220,62018,2567],{"class":264},[220,62020,61878],{"class":420},[220,62022,359],{"class":264},[220,62024,62025,62027,62029],{"class":222,"line":644},[220,62026,402],{"class":264},[220,62028,347],{"class":420},[220,62030,359],{"class":264},[212,62032,62033],{"className":468,"code":61900,"language":469,"meta":178,"style":178},[99,62034,62035,62043,62051,62059,62067],{"__ignoreMap":178},[220,62036,62037,62039,62041],{"class":222,"line":223},[220,62038,343],{"class":264},[220,62040,347],{"class":420},[220,62042,359],{"class":264},[220,62044,62045,62047,62049],{"class":222,"line":179},[220,62046,364],{"class":264},[220,62048,61878],{"class":420},[220,62050,359],{"class":264},[220,62052,62053,62055,62057],{"class":222,"line":389},[220,62054,2550],{"class":264},[220,62056,2553],{"class":420},[220,62058,386],{"class":264},[220,62060,62061,62063,62065],{"class":222,"line":399},[220,62062,2567],{"class":264},[220,62064,61878],{"class":420},[220,62066,359],{"class":264},[220,62068,62069,62071,62073],{"class":222,"line":644},[220,62070,402],{"class":264},[220,62072,347],{"class":420},[220,62074,359],{"class":264},[212,62076,62078],{"className":251,"code":62077,"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,62079,62080,62090,62094,62108,62112,62121,62129,62133,62137],{"__ignoreMap":178},[220,62081,62082,62084,62086,62088],{"class":222,"line":223},[220,62083,261],{"class":260},[220,62085,11512],{"class":264},[220,62087,268],{"class":260},[220,62089,4007],{"class":230},[220,62091,62092],{"class":222,"line":179},[220,62093,647],{"emptyLinePlaceholder":194},[220,62095,62096,62098,62100,62102,62104,62106],{"class":222,"line":389},[220,62097,1735],{"class":260},[220,62099,1738],{"class":420},[220,62101,1741],{"class":260},[220,62103,1744],{"class":260},[220,62105,1747],{"class":226},[220,62107,1750],{"class":264},[220,62109,62110],{"class":222,"line":399},[220,62111,1765],{"class":264},[220,62113,62114,62116,62119],{"class":222,"line":644},[220,62115,1770],{"class":264},[220,62117,62118],{"class":230},"'ParticleField'",[220,62120,7009],{"class":264},[220,62122,62123,62125,62127],{"class":222,"line":650},[220,62124,7014],{"class":264},[220,62126,3206],{"class":230},[220,62128,2465],{"class":264},[220,62130,62131],{"class":222,"line":656},[220,62132,7031],{"class":264},[220,62134,62135],{"class":222,"line":673},[220,62136,1787],{"class":264},[220,62138,62139],{"class":222,"line":682},[220,62140,1792],{"class":264},[1504,62142,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62144},[62145,62146],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticlefield",{"title":61878,"description":61886},"docs\u002Fcomponents\u002FParticleField","72Kbo_zyMBePEBCQsUM1xkoCFISBvZiOP8pBV57COSc",{"id":62153,"title":62154,"body":62155,"category":35559,"componentType":25877,"description":62162,"extension":191,"meta":62347,"navigation":194,"path":62348,"requiresChild":32530,"seo":62349,"stem":62350,"__hash__":62351},"components\u002Fdocs\u002Fcomponents\u002FParticleFlow.md","ParticleFlow",{"type":8,"value":62156,"toc":62343},[62157,62160,62163,62165,62167,62170,62172,62341],[11,62158,62154],{"id":62159},"particleflow",[15,62161,62162],{},"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,62164],{"component":62154},[23,62166,31915],{"id":26533},[31917,62168],{":props":62169},"[{\"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,62171,31923],{"id":31922},[246,62173,62174,62203,62231,62259,62287],{":tabs":1557},[212,62175,62177],{"className":334,"code":62176,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleFlow \u002F>\n\u003C\u002FShader>\n",[99,62178,62179,62187,62195],{"__ignoreMap":178},[220,62180,62181,62183,62185],{"class":222,"line":223},[220,62182,343],{"class":264},[220,62184,347],{"class":346},[220,62186,359],{"class":264},[220,62188,62189,62191,62193],{"class":222,"line":179},[220,62190,364],{"class":264},[220,62192,62154],{"class":346},[220,62194,386],{"class":264},[220,62196,62197,62199,62201],{"class":222,"line":389},[220,62198,402],{"class":264},[220,62200,347],{"class":346},[220,62202,359],{"class":264},[212,62204,62205],{"className":409,"code":62176,"language":411,"meta":178,"style":178},[99,62206,62207,62215,62223],{"__ignoreMap":178},[220,62208,62209,62211,62213],{"class":222,"line":223},[220,62210,343],{"class":264},[220,62212,347],{"class":420},[220,62214,359],{"class":264},[220,62216,62217,62219,62221],{"class":222,"line":179},[220,62218,364],{"class":264},[220,62220,62154],{"class":420},[220,62222,386],{"class":264},[220,62224,62225,62227,62229],{"class":222,"line":389},[220,62226,402],{"class":264},[220,62228,347],{"class":420},[220,62230,359],{"class":264},[212,62232,62233],{"className":2844,"code":62176,"language":2846,"meta":178,"style":178},[99,62234,62235,62243,62251],{"__ignoreMap":178},[220,62236,62237,62239,62241],{"class":222,"line":223},[220,62238,343],{"class":264},[220,62240,347],{"class":420},[220,62242,359],{"class":264},[220,62244,62245,62247,62249],{"class":222,"line":179},[220,62246,364],{"class":264},[220,62248,62154],{"class":420},[220,62250,386],{"class":264},[220,62252,62253,62255,62257],{"class":222,"line":389},[220,62254,402],{"class":264},[220,62256,347],{"class":420},[220,62258,359],{"class":264},[212,62260,62261],{"className":468,"code":62176,"language":469,"meta":178,"style":178},[99,62262,62263,62271,62279],{"__ignoreMap":178},[220,62264,62265,62267,62269],{"class":222,"line":223},[220,62266,343],{"class":264},[220,62268,347],{"class":420},[220,62270,359],{"class":264},[220,62272,62273,62275,62277],{"class":222,"line":179},[220,62274,364],{"class":264},[220,62276,62154],{"class":420},[220,62278,386],{"class":264},[220,62280,62281,62283,62285],{"class":222,"line":389},[220,62282,402],{"class":264},[220,62284,347],{"class":420},[220,62286,359],{"class":264},[212,62288,62290],{"className":251,"code":62289,"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,62291,62292,62302,62306,62320,62324,62333,62337],{"__ignoreMap":178},[220,62293,62294,62296,62298,62300],{"class":222,"line":223},[220,62295,261],{"class":260},[220,62297,11512],{"class":264},[220,62299,268],{"class":260},[220,62301,4007],{"class":230},[220,62303,62304],{"class":222,"line":179},[220,62305,647],{"emptyLinePlaceholder":194},[220,62307,62308,62310,62312,62314,62316,62318],{"class":222,"line":389},[220,62309,1735],{"class":260},[220,62311,1738],{"class":420},[220,62313,1741],{"class":260},[220,62315,1744],{"class":260},[220,62317,1747],{"class":226},[220,62319,1750],{"class":264},[220,62321,62322],{"class":222,"line":399},[220,62323,1765],{"class":264},[220,62325,62326,62328,62331],{"class":222,"line":644},[220,62327,1770],{"class":264},[220,62329,62330],{"class":230},"'ParticleFlow'",[220,62332,2465],{"class":264},[220,62334,62335],{"class":222,"line":650},[220,62336,1787],{"class":264},[220,62338,62339],{"class":222,"line":656},[220,62340,1792],{"class":264},[1504,62342,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62344},[62345,62346],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticleflow",{"title":62154,"description":62162},"docs\u002Fcomponents\u002FParticleFlow","zsHVvGrsiT7C6qLRUh6rNKLVC2E5ylsIAjONaCcQUGc",{"id":62353,"title":62354,"body":62355,"category":36569,"componentType":25877,"description":62362,"extension":191,"meta":62547,"navigation":194,"path":62548,"requiresChild":32530,"seo":62549,"stem":62550,"__hash__":62551},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":62356,"toc":62543},[62357,62360,62363,62365,62367,62370,62372,62541],[11,62358,62354],{"id":62359},"particles",[15,62361,62362],{},"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,62364],{"component":62354},[23,62366,31915],{"id":26533},[31917,62368],{":props":62369},"[{\"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,62371,31923],{"id":31922},[246,62373,62374,62403,62431,62459,62487],{":tabs":1557},[212,62375,62377],{"className":334,"code":62376,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,62378,62379,62387,62395],{"__ignoreMap":178},[220,62380,62381,62383,62385],{"class":222,"line":223},[220,62382,343],{"class":264},[220,62384,347],{"class":346},[220,62386,359],{"class":264},[220,62388,62389,62391,62393],{"class":222,"line":179},[220,62390,364],{"class":264},[220,62392,62354],{"class":346},[220,62394,386],{"class":264},[220,62396,62397,62399,62401],{"class":222,"line":389},[220,62398,402],{"class":264},[220,62400,347],{"class":346},[220,62402,359],{"class":264},[212,62404,62405],{"className":409,"code":62376,"language":411,"meta":178,"style":178},[99,62406,62407,62415,62423],{"__ignoreMap":178},[220,62408,62409,62411,62413],{"class":222,"line":223},[220,62410,343],{"class":264},[220,62412,347],{"class":420},[220,62414,359],{"class":264},[220,62416,62417,62419,62421],{"class":222,"line":179},[220,62418,364],{"class":264},[220,62420,62354],{"class":420},[220,62422,386],{"class":264},[220,62424,62425,62427,62429],{"class":222,"line":389},[220,62426,402],{"class":264},[220,62428,347],{"class":420},[220,62430,359],{"class":264},[212,62432,62433],{"className":2844,"code":62376,"language":2846,"meta":178,"style":178},[99,62434,62435,62443,62451],{"__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,62354],{"class":420},[220,62450,386],{"class":264},[220,62452,62453,62455,62457],{"class":222,"line":389},[220,62454,402],{"class":264},[220,62456,347],{"class":420},[220,62458,359],{"class":264},[212,62460,62461],{"className":468,"code":62376,"language":469,"meta":178,"style":178},[99,62462,62463,62471,62479],{"__ignoreMap":178},[220,62464,62465,62467,62469],{"class":222,"line":223},[220,62466,343],{"class":264},[220,62468,347],{"class":420},[220,62470,359],{"class":264},[220,62472,62473,62475,62477],{"class":222,"line":179},[220,62474,364],{"class":264},[220,62476,62354],{"class":420},[220,62478,386],{"class":264},[220,62480,62481,62483,62485],{"class":222,"line":389},[220,62482,402],{"class":264},[220,62484,347],{"class":420},[220,62486,359],{"class":264},[212,62488,62490],{"className":251,"code":62489,"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,62491,62492,62502,62506,62520,62524,62533,62537],{"__ignoreMap":178},[220,62493,62494,62496,62498,62500],{"class":222,"line":223},[220,62495,261],{"class":260},[220,62497,11512],{"class":264},[220,62499,268],{"class":260},[220,62501,4007],{"class":230},[220,62503,62504],{"class":222,"line":179},[220,62505,647],{"emptyLinePlaceholder":194},[220,62507,62508,62510,62512,62514,62516,62518],{"class":222,"line":389},[220,62509,1735],{"class":260},[220,62511,1738],{"class":420},[220,62513,1741],{"class":260},[220,62515,1744],{"class":260},[220,62517,1747],{"class":226},[220,62519,1750],{"class":264},[220,62521,62522],{"class":222,"line":399},[220,62523,1765],{"class":264},[220,62525,62526,62528,62531],{"class":222,"line":644},[220,62527,1770],{"class":264},[220,62529,62530],{"class":230},"'Particles'",[220,62532,2465],{"class":264},[220,62534,62535],{"class":222,"line":650},[220,62536,1787],{"class":264},[220,62538,62539],{"class":222,"line":656},[220,62540,1792],{"class":264},[1504,62542,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62544},[62545,62546],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":62354,"description":62362},"docs\u002Fcomponents\u002FParticles","jxyMx-Ww4ghBZRf8Gy9kIwtIBqtncQlodaIg_7kARuU",{"id":62553,"title":62554,"body":62555,"category":33063,"componentType":25877,"description":62562,"extension":191,"meta":62746,"navigation":194,"path":62747,"requiresChild":32530,"seo":62748,"stem":62749,"__hash__":62750},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":62556,"toc":62742},[62557,62560,62563,62565,62567,62569,62571,62740],[11,62558,62554],{"id":62559},"perlinnoise",[15,62561,62562],{},"Smooth gradient noise that morphs over time",[31911,62564],{"component":62554},[23,62566,31915],{"id":26533},[31917,62568],{":props":34648},[23,62570,31923],{"id":31922},[246,62572,62573,62602,62630,62658,62686],{":tabs":1557},[212,62574,62576],{"className":334,"code":62575,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,62577,62578,62586,62594],{"__ignoreMap":178},[220,62579,62580,62582,62584],{"class":222,"line":223},[220,62581,343],{"class":264},[220,62583,347],{"class":346},[220,62585,359],{"class":264},[220,62587,62588,62590,62592],{"class":222,"line":179},[220,62589,364],{"class":264},[220,62591,62554],{"class":346},[220,62593,386],{"class":264},[220,62595,62596,62598,62600],{"class":222,"line":389},[220,62597,402],{"class":264},[220,62599,347],{"class":346},[220,62601,359],{"class":264},[212,62603,62604],{"className":409,"code":62575,"language":411,"meta":178,"style":178},[99,62605,62606,62614,62622],{"__ignoreMap":178},[220,62607,62608,62610,62612],{"class":222,"line":223},[220,62609,343],{"class":264},[220,62611,347],{"class":420},[220,62613,359],{"class":264},[220,62615,62616,62618,62620],{"class":222,"line":179},[220,62617,364],{"class":264},[220,62619,62554],{"class":420},[220,62621,386],{"class":264},[220,62623,62624,62626,62628],{"class":222,"line":389},[220,62625,402],{"class":264},[220,62627,347],{"class":420},[220,62629,359],{"class":264},[212,62631,62632],{"className":2844,"code":62575,"language":2846,"meta":178,"style":178},[99,62633,62634,62642,62650],{"__ignoreMap":178},[220,62635,62636,62638,62640],{"class":222,"line":223},[220,62637,343],{"class":264},[220,62639,347],{"class":420},[220,62641,359],{"class":264},[220,62643,62644,62646,62648],{"class":222,"line":179},[220,62645,364],{"class":264},[220,62647,62554],{"class":420},[220,62649,386],{"class":264},[220,62651,62652,62654,62656],{"class":222,"line":389},[220,62653,402],{"class":264},[220,62655,347],{"class":420},[220,62657,359],{"class":264},[212,62659,62660],{"className":468,"code":62575,"language":469,"meta":178,"style":178},[99,62661,62662,62670,62678],{"__ignoreMap":178},[220,62663,62664,62666,62668],{"class":222,"line":223},[220,62665,343],{"class":264},[220,62667,347],{"class":420},[220,62669,359],{"class":264},[220,62671,62672,62674,62676],{"class":222,"line":179},[220,62673,364],{"class":264},[220,62675,62554],{"class":420},[220,62677,386],{"class":264},[220,62679,62680,62682,62684],{"class":222,"line":389},[220,62681,402],{"class":264},[220,62683,347],{"class":420},[220,62685,359],{"class":264},[212,62687,62689],{"className":251,"code":62688,"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,62690,62691,62701,62705,62719,62723,62732,62736],{"__ignoreMap":178},[220,62692,62693,62695,62697,62699],{"class":222,"line":223},[220,62694,261],{"class":260},[220,62696,11512],{"class":264},[220,62698,268],{"class":260},[220,62700,4007],{"class":230},[220,62702,62703],{"class":222,"line":179},[220,62704,647],{"emptyLinePlaceholder":194},[220,62706,62707,62709,62711,62713,62715,62717],{"class":222,"line":389},[220,62708,1735],{"class":260},[220,62710,1738],{"class":420},[220,62712,1741],{"class":260},[220,62714,1744],{"class":260},[220,62716,1747],{"class":226},[220,62718,1750],{"class":264},[220,62720,62721],{"class":222,"line":399},[220,62722,1765],{"class":264},[220,62724,62725,62727,62730],{"class":222,"line":644},[220,62726,1770],{"class":264},[220,62728,62729],{"class":230},"'PerlinNoise'",[220,62731,2465],{"class":264},[220,62733,62734],{"class":222,"line":650},[220,62735,1787],{"class":264},[220,62737,62738],{"class":222,"line":656},[220,62739,1792],{"class":264},[1504,62741,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62743},[62744,62745],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":62554,"description":62562},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":62752,"title":62753,"body":62754,"category":33396,"componentType":25883,"description":62761,"extension":191,"meta":63022,"navigation":194,"path":63023,"requiresChild":194,"seo":63024,"stem":63025,"__hash__":63026},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":62755,"toc":63018},[62756,62759,62762,62764,62766,62769,62771,63016],[11,62757,62753],{"id":62758},"perspective",[15,62760,62761],{},"Rotate the plane in 3D space with pan and tilt",[31911,62763],{"component":62753},[23,62765,31915],{"id":26533},[31917,62767],{":props":62768},"[{\"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,62770,31923],{"id":31922},[246,62772,62773,62818,62862,62906,62950],{":tabs":1557},[212,62774,62776],{"className":334,"code":62775,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,62777,62778,62786,62794,62802,62810],{"__ignoreMap":178},[220,62779,62780,62782,62784],{"class":222,"line":223},[220,62781,343],{"class":264},[220,62783,347],{"class":346},[220,62785,359],{"class":264},[220,62787,62788,62790,62792],{"class":222,"line":179},[220,62789,364],{"class":264},[220,62791,62753],{"class":346},[220,62793,359],{"class":264},[220,62795,62796,62798,62800],{"class":222,"line":389},[220,62797,2550],{"class":264},[220,62799,2553],{"class":346},[220,62801,386],{"class":264},[220,62803,62804,62806,62808],{"class":222,"line":399},[220,62805,2567],{"class":264},[220,62807,62753],{"class":346},[220,62809,359],{"class":264},[220,62811,62812,62814,62816],{"class":222,"line":644},[220,62813,402],{"class":264},[220,62815,347],{"class":346},[220,62817,359],{"class":264},[212,62819,62820],{"className":409,"code":62775,"language":411,"meta":178,"style":178},[99,62821,62822,62830,62838,62846,62854],{"__ignoreMap":178},[220,62823,62824,62826,62828],{"class":222,"line":223},[220,62825,343],{"class":264},[220,62827,347],{"class":420},[220,62829,359],{"class":264},[220,62831,62832,62834,62836],{"class":222,"line":179},[220,62833,364],{"class":264},[220,62835,62753],{"class":420},[220,62837,359],{"class":264},[220,62839,62840,62842,62844],{"class":222,"line":389},[220,62841,2550],{"class":264},[220,62843,2553],{"class":420},[220,62845,386],{"class":264},[220,62847,62848,62850,62852],{"class":222,"line":399},[220,62849,2567],{"class":264},[220,62851,62753],{"class":420},[220,62853,359],{"class":264},[220,62855,62856,62858,62860],{"class":222,"line":644},[220,62857,402],{"class":264},[220,62859,347],{"class":420},[220,62861,359],{"class":264},[212,62863,62864],{"className":2844,"code":62775,"language":2846,"meta":178,"style":178},[99,62865,62866,62874,62882,62890,62898],{"__ignoreMap":178},[220,62867,62868,62870,62872],{"class":222,"line":223},[220,62869,343],{"class":264},[220,62871,347],{"class":420},[220,62873,359],{"class":264},[220,62875,62876,62878,62880],{"class":222,"line":179},[220,62877,364],{"class":264},[220,62879,62753],{"class":420},[220,62881,359],{"class":264},[220,62883,62884,62886,62888],{"class":222,"line":389},[220,62885,2550],{"class":264},[220,62887,2553],{"class":420},[220,62889,386],{"class":264},[220,62891,62892,62894,62896],{"class":222,"line":399},[220,62893,2567],{"class":264},[220,62895,62753],{"class":420},[220,62897,359],{"class":264},[220,62899,62900,62902,62904],{"class":222,"line":644},[220,62901,402],{"class":264},[220,62903,347],{"class":420},[220,62905,359],{"class":264},[212,62907,62908],{"className":468,"code":62775,"language":469,"meta":178,"style":178},[99,62909,62910,62918,62926,62934,62942],{"__ignoreMap":178},[220,62911,62912,62914,62916],{"class":222,"line":223},[220,62913,343],{"class":264},[220,62915,347],{"class":420},[220,62917,359],{"class":264},[220,62919,62920,62922,62924],{"class":222,"line":179},[220,62921,364],{"class":264},[220,62923,62753],{"class":420},[220,62925,359],{"class":264},[220,62927,62928,62930,62932],{"class":222,"line":389},[220,62929,2550],{"class":264},[220,62931,2553],{"class":420},[220,62933,386],{"class":264},[220,62935,62936,62938,62940],{"class":222,"line":399},[220,62937,2567],{"class":264},[220,62939,62753],{"class":420},[220,62941,359],{"class":264},[220,62943,62944,62946,62948],{"class":222,"line":644},[220,62945,402],{"class":264},[220,62947,347],{"class":420},[220,62949,359],{"class":264},[212,62951,62953],{"className":251,"code":62952,"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,62954,62955,62965,62969,62983,62987,62996,63004,63008,63012],{"__ignoreMap":178},[220,62956,62957,62959,62961,62963],{"class":222,"line":223},[220,62958,261],{"class":260},[220,62960,11512],{"class":264},[220,62962,268],{"class":260},[220,62964,4007],{"class":230},[220,62966,62967],{"class":222,"line":179},[220,62968,647],{"emptyLinePlaceholder":194},[220,62970,62971,62973,62975,62977,62979,62981],{"class":222,"line":389},[220,62972,1735],{"class":260},[220,62974,1738],{"class":420},[220,62976,1741],{"class":260},[220,62978,1744],{"class":260},[220,62980,1747],{"class":226},[220,62982,1750],{"class":264},[220,62984,62985],{"class":222,"line":399},[220,62986,1765],{"class":264},[220,62988,62989,62991,62994],{"class":222,"line":644},[220,62990,1770],{"class":264},[220,62992,62993],{"class":230},"'Perspective'",[220,62995,7009],{"class":264},[220,62997,62998,63000,63002],{"class":222,"line":650},[220,62999,7014],{"class":264},[220,63001,3206],{"class":230},[220,63003,2465],{"class":264},[220,63005,63006],{"class":222,"line":656},[220,63007,7031],{"class":264},[220,63009,63010],{"class":222,"line":673},[220,63011,1787],{"class":264},[220,63013,63014],{"class":222,"line":682},[220,63015,1792],{"class":264},[1504,63017,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":63019},[63020,63021],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":62753,"description":62761},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":63028,"title":63029,"body":63030,"category":35559,"componentType":25883,"description":63037,"extension":191,"meta":63354,"navigation":194,"path":63355,"requiresChild":194,"seo":63356,"stem":63357,"__hash__":63358},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":63031,"toc":63350},[63032,63035,63038,63040,63042,63045,63047,63348],[11,63033,63029],{"id":63034},"pixelsort",[15,63036,63037],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[31911,63039],{"component":63029},[23,63041,31915],{"id":26533},[31917,63043],{":props":63044},"[{\"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,63046,31923],{"id":31922},[246,63048,63049,63105,63164,63220,63278],{":tabs":1557},[212,63050,63052],{"className":334,"code":63051,"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,63053,63054,63062,63069,63077,63081,63089,63097],{"__ignoreMap":178},[220,63055,63056,63058,63060],{"class":222,"line":223},[220,63057,343],{"class":264},[220,63059,347],{"class":346},[220,63061,359],{"class":264},[220,63063,63064,63066],{"class":222,"line":179},[220,63065,364],{"class":264},[220,63067,63068],{"class":346},"PixelSort\n",[220,63070,63071,63073,63075],{"class":222,"line":389},[220,63072,17405],{"class":226},[220,63074,353],{"class":264},[220,63076,48148],{"class":230},[220,63078,63079],{"class":222,"line":399},[220,63080,31959],{"class":264},[220,63082,63083,63085,63087],{"class":222,"line":644},[220,63084,2550],{"class":264},[220,63086,2553],{"class":346},[220,63088,386],{"class":264},[220,63090,63091,63093,63095],{"class":222,"line":650},[220,63092,2567],{"class":264},[220,63094,63029],{"class":346},[220,63096,359],{"class":264},[220,63098,63099,63101,63103],{"class":222,"line":656},[220,63100,402],{"class":264},[220,63102,347],{"class":346},[220,63104,359],{"class":264},[212,63106,63108],{"className":409,"code":63107,"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,63109,63110,63118,63124,63136,63140,63148,63156],{"__ignoreMap":178},[220,63111,63112,63114,63116],{"class":222,"line":223},[220,63113,343],{"class":264},[220,63115,347],{"class":420},[220,63117,359],{"class":264},[220,63119,63120,63122],{"class":222,"line":179},[220,63121,364],{"class":264},[220,63123,63068],{"class":420},[220,63125,63126,63128,63130,63132,63134],{"class":222,"line":389},[220,63127,9645],{"class":226},[220,63129,353],{"class":260},[220,63131,743],{"class":264},[220,63133,8249],{"class":420},[220,63135,749],{"class":264},[220,63137,63138],{"class":222,"line":399},[220,63139,31959],{"class":264},[220,63141,63142,63144,63146],{"class":222,"line":644},[220,63143,2550],{"class":264},[220,63145,2553],{"class":420},[220,63147,386],{"class":264},[220,63149,63150,63152,63154],{"class":222,"line":650},[220,63151,2567],{"class":264},[220,63153,63029],{"class":420},[220,63155,359],{"class":264},[220,63157,63158,63160,63162],{"class":222,"line":656},[220,63159,402],{"class":264},[220,63161,347],{"class":420},[220,63163,359],{"class":264},[212,63165,63166],{"className":2844,"code":63107,"language":2846,"meta":178,"style":178},[99,63167,63168,63176,63182,63192,63196,63204,63212],{"__ignoreMap":178},[220,63169,63170,63172,63174],{"class":222,"line":223},[220,63171,343],{"class":264},[220,63173,347],{"class":420},[220,63175,359],{"class":264},[220,63177,63178,63180],{"class":222,"line":179},[220,63179,364],{"class":264},[220,63181,63068],{"class":420},[220,63183,63184,63186,63188,63190],{"class":222,"line":389},[220,63185,9645],{"class":226},[220,63187,29871],{"class":264},[220,63189,8249],{"class":420},[220,63191,749],{"class":264},[220,63193,63194],{"class":222,"line":399},[220,63195,31959],{"class":264},[220,63197,63198,63200,63202],{"class":222,"line":644},[220,63199,2550],{"class":264},[220,63201,2553],{"class":420},[220,63203,386],{"class":264},[220,63205,63206,63208,63210],{"class":222,"line":650},[220,63207,2567],{"class":264},[220,63209,63029],{"class":420},[220,63211,359],{"class":264},[220,63213,63214,63216,63218],{"class":222,"line":656},[220,63215,402],{"class":264},[220,63217,347],{"class":420},[220,63219,359],{"class":264},[212,63221,63222],{"className":468,"code":63107,"language":469,"meta":178,"style":178},[99,63223,63224,63232,63238,63250,63254,63262,63270],{"__ignoreMap":178},[220,63225,63226,63228,63230],{"class":222,"line":223},[220,63227,343],{"class":264},[220,63229,347],{"class":420},[220,63231,359],{"class":264},[220,63233,63234,63236],{"class":222,"line":179},[220,63235,364],{"class":264},[220,63237,63068],{"class":420},[220,63239,63240,63242,63244,63246,63248],{"class":222,"line":389},[220,63241,9645],{"class":226},[220,63243,353],{"class":260},[220,63245,743],{"class":264},[220,63247,8249],{"class":420},[220,63249,749],{"class":264},[220,63251,63252],{"class":222,"line":399},[220,63253,31959],{"class":264},[220,63255,63256,63258,63260],{"class":222,"line":644},[220,63257,2550],{"class":264},[220,63259,2553],{"class":420},[220,63261,386],{"class":264},[220,63263,63264,63266,63268],{"class":222,"line":650},[220,63265,2567],{"class":264},[220,63267,63029],{"class":420},[220,63269,359],{"class":264},[220,63271,63272,63274,63276],{"class":222,"line":656},[220,63273,402],{"class":264},[220,63275,347],{"class":420},[220,63277,359],{"class":264},[212,63279,63281],{"className":251,"code":63280,"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,63282,63283,63293,63297,63311,63315,63328,63336,63340,63344],{"__ignoreMap":178},[220,63284,63285,63287,63289,63291],{"class":222,"line":223},[220,63286,261],{"class":260},[220,63288,11512],{"class":264},[220,63290,268],{"class":260},[220,63292,4007],{"class":230},[220,63294,63295],{"class":222,"line":179},[220,63296,647],{"emptyLinePlaceholder":194},[220,63298,63299,63301,63303,63305,63307,63309],{"class":222,"line":389},[220,63300,1735],{"class":260},[220,63302,1738],{"class":420},[220,63304,1741],{"class":260},[220,63306,1744],{"class":260},[220,63308,1747],{"class":226},[220,63310,1750],{"class":264},[220,63312,63313],{"class":222,"line":399},[220,63314,1765],{"class":264},[220,63316,63317,63319,63322,63324,63326],{"class":222,"line":644},[220,63318,1770],{"class":264},[220,63320,63321],{"class":230},"'PixelSort'",[220,63323,7541],{"class":264},[220,63325,8249],{"class":420},[220,63327,7546],{"class":264},[220,63329,63330,63332,63334],{"class":222,"line":650},[220,63331,7014],{"class":264},[220,63333,3206],{"class":230},[220,63335,2465],{"class":264},[220,63337,63338],{"class":222,"line":656},[220,63339,7031],{"class":264},[220,63341,63342],{"class":222,"line":673},[220,63343,1787],{"class":264},[220,63345,63346],{"class":222,"line":682},[220,63347,1792],{"class":264},[1504,63349,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63351},[63352,63353],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":63029,"description":63037},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":63360,"title":63361,"body":63362,"category":35559,"componentType":25883,"description":63369,"extension":191,"meta":63686,"navigation":194,"path":63687,"requiresChild":194,"seo":63688,"stem":63689,"__hash__":63690},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":63363,"toc":63682},[63364,63367,63370,63372,63374,63377,63379,63680],[11,63365,63361],{"id":63366},"pixelthrow",[15,63368,63369],{},"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,63371],{"component":63361},[23,63373,31915],{"id":26533},[31917,63375],{":props":63376},"[{\"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,63378,31923],{"id":31922},[246,63380,63381,63437,63496,63552,63610],{":tabs":1557},[212,63382,63384],{"className":334,"code":63383,"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,63385,63386,63394,63401,63409,63413,63421,63429],{"__ignoreMap":178},[220,63387,63388,63390,63392],{"class":222,"line":223},[220,63389,343],{"class":264},[220,63391,347],{"class":346},[220,63393,359],{"class":264},[220,63395,63396,63398],{"class":222,"line":179},[220,63397,364],{"class":264},[220,63399,63400],{"class":346},"PixelThrow\n",[220,63402,63403,63405,63407],{"class":222,"line":389},[220,63404,17405],{"class":226},[220,63406,353],{"class":264},[220,63408,61072],{"class":230},[220,63410,63411],{"class":222,"line":399},[220,63412,31959],{"class":264},[220,63414,63415,63417,63419],{"class":222,"line":644},[220,63416,2550],{"class":264},[220,63418,2553],{"class":346},[220,63420,386],{"class":264},[220,63422,63423,63425,63427],{"class":222,"line":650},[220,63424,2567],{"class":264},[220,63426,63361],{"class":346},[220,63428,359],{"class":264},[220,63430,63431,63433,63435],{"class":222,"line":656},[220,63432,402],{"class":264},[220,63434,347],{"class":346},[220,63436,359],{"class":264},[212,63438,63440],{"className":409,"code":63439,"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,63441,63442,63450,63456,63468,63472,63480,63488],{"__ignoreMap":178},[220,63443,63444,63446,63448],{"class":222,"line":223},[220,63445,343],{"class":264},[220,63447,347],{"class":420},[220,63449,359],{"class":264},[220,63451,63452,63454],{"class":222,"line":179},[220,63453,364],{"class":264},[220,63455,63400],{"class":420},[220,63457,63458,63460,63462,63464,63466],{"class":222,"line":389},[220,63459,9645],{"class":226},[220,63461,353],{"class":260},[220,63463,743],{"class":264},[220,63465,16976],{"class":420},[220,63467,749],{"class":264},[220,63469,63470],{"class":222,"line":399},[220,63471,31959],{"class":264},[220,63473,63474,63476,63478],{"class":222,"line":644},[220,63475,2550],{"class":264},[220,63477,2553],{"class":420},[220,63479,386],{"class":264},[220,63481,63482,63484,63486],{"class":222,"line":650},[220,63483,2567],{"class":264},[220,63485,63361],{"class":420},[220,63487,359],{"class":264},[220,63489,63490,63492,63494],{"class":222,"line":656},[220,63491,402],{"class":264},[220,63493,347],{"class":420},[220,63495,359],{"class":264},[212,63497,63498],{"className":2844,"code":63439,"language":2846,"meta":178,"style":178},[99,63499,63500,63508,63514,63524,63528,63536,63544],{"__ignoreMap":178},[220,63501,63502,63504,63506],{"class":222,"line":223},[220,63503,343],{"class":264},[220,63505,347],{"class":420},[220,63507,359],{"class":264},[220,63509,63510,63512],{"class":222,"line":179},[220,63511,364],{"class":264},[220,63513,63400],{"class":420},[220,63515,63516,63518,63520,63522],{"class":222,"line":389},[220,63517,9645],{"class":226},[220,63519,29871],{"class":264},[220,63521,16976],{"class":420},[220,63523,749],{"class":264},[220,63525,63526],{"class":222,"line":399},[220,63527,31959],{"class":264},[220,63529,63530,63532,63534],{"class":222,"line":644},[220,63531,2550],{"class":264},[220,63533,2553],{"class":420},[220,63535,386],{"class":264},[220,63537,63538,63540,63542],{"class":222,"line":650},[220,63539,2567],{"class":264},[220,63541,63361],{"class":420},[220,63543,359],{"class":264},[220,63545,63546,63548,63550],{"class":222,"line":656},[220,63547,402],{"class":264},[220,63549,347],{"class":420},[220,63551,359],{"class":264},[212,63553,63554],{"className":468,"code":63439,"language":469,"meta":178,"style":178},[99,63555,63556,63564,63570,63582,63586,63594,63602],{"__ignoreMap":178},[220,63557,63558,63560,63562],{"class":222,"line":223},[220,63559,343],{"class":264},[220,63561,347],{"class":420},[220,63563,359],{"class":264},[220,63565,63566,63568],{"class":222,"line":179},[220,63567,364],{"class":264},[220,63569,63400],{"class":420},[220,63571,63572,63574,63576,63578,63580],{"class":222,"line":389},[220,63573,9645],{"class":226},[220,63575,353],{"class":260},[220,63577,743],{"class":264},[220,63579,16976],{"class":420},[220,63581,749],{"class":264},[220,63583,63584],{"class":222,"line":399},[220,63585,31959],{"class":264},[220,63587,63588,63590,63592],{"class":222,"line":644},[220,63589,2550],{"class":264},[220,63591,2553],{"class":420},[220,63593,386],{"class":264},[220,63595,63596,63598,63600],{"class":222,"line":650},[220,63597,2567],{"class":264},[220,63599,63361],{"class":420},[220,63601,359],{"class":264},[220,63603,63604,63606,63608],{"class":222,"line":656},[220,63605,402],{"class":264},[220,63607,347],{"class":420},[220,63609,359],{"class":264},[212,63611,63613],{"className":251,"code":63612,"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,63614,63615,63625,63629,63643,63647,63660,63668,63672,63676],{"__ignoreMap":178},[220,63616,63617,63619,63621,63623],{"class":222,"line":223},[220,63618,261],{"class":260},[220,63620,11512],{"class":264},[220,63622,268],{"class":260},[220,63624,4007],{"class":230},[220,63626,63627],{"class":222,"line":179},[220,63628,647],{"emptyLinePlaceholder":194},[220,63630,63631,63633,63635,63637,63639,63641],{"class":222,"line":389},[220,63632,1735],{"class":260},[220,63634,1738],{"class":420},[220,63636,1741],{"class":260},[220,63638,1744],{"class":260},[220,63640,1747],{"class":226},[220,63642,1750],{"class":264},[220,63644,63645],{"class":222,"line":399},[220,63646,1765],{"class":264},[220,63648,63649,63651,63654,63656,63658],{"class":222,"line":644},[220,63650,1770],{"class":264},[220,63652,63653],{"class":230},"'PixelThrow'",[220,63655,7541],{"class":264},[220,63657,16976],{"class":420},[220,63659,7546],{"class":264},[220,63661,63662,63664,63666],{"class":222,"line":650},[220,63663,7014],{"class":264},[220,63665,3206],{"class":230},[220,63667,2465],{"class":264},[220,63669,63670],{"class":222,"line":656},[220,63671,7031],{"class":264},[220,63673,63674],{"class":222,"line":673},[220,63675,1787],{"class":264},[220,63677,63678],{"class":222,"line":682},[220,63679,1792],{"class":264},[1504,63681,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63683},[63684,63685],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":63361,"description":63369},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":63692,"title":63693,"body":63694,"category":32806,"componentType":25883,"description":63701,"extension":191,"meta":63962,"navigation":194,"path":63963,"requiresChild":194,"seo":63964,"stem":63965,"__hash__":63966},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":63695,"toc":63958},[63696,63699,63702,63704,63706,63709,63711,63956],[11,63697,63693],{"id":63698},"pixelate",[15,63700,63701],{},"Pixelation effect with adjustable cell size",[31911,63703],{"component":63693},[23,63705,31915],{"id":26533},[31917,63707],{":props":63708},"[{\"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,63710,31923],{"id":31922},[246,63712,63713,63758,63802,63846,63890],{":tabs":1557},[212,63714,63716],{"className":334,"code":63715,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,63717,63718,63726,63734,63742,63750],{"__ignoreMap":178},[220,63719,63720,63722,63724],{"class":222,"line":223},[220,63721,343],{"class":264},[220,63723,347],{"class":346},[220,63725,359],{"class":264},[220,63727,63728,63730,63732],{"class":222,"line":179},[220,63729,364],{"class":264},[220,63731,63693],{"class":346},[220,63733,359],{"class":264},[220,63735,63736,63738,63740],{"class":222,"line":389},[220,63737,2550],{"class":264},[220,63739,2553],{"class":346},[220,63741,386],{"class":264},[220,63743,63744,63746,63748],{"class":222,"line":399},[220,63745,2567],{"class":264},[220,63747,63693],{"class":346},[220,63749,359],{"class":264},[220,63751,63752,63754,63756],{"class":222,"line":644},[220,63753,402],{"class":264},[220,63755,347],{"class":346},[220,63757,359],{"class":264},[212,63759,63760],{"className":409,"code":63715,"language":411,"meta":178,"style":178},[99,63761,63762,63770,63778,63786,63794],{"__ignoreMap":178},[220,63763,63764,63766,63768],{"class":222,"line":223},[220,63765,343],{"class":264},[220,63767,347],{"class":420},[220,63769,359],{"class":264},[220,63771,63772,63774,63776],{"class":222,"line":179},[220,63773,364],{"class":264},[220,63775,63693],{"class":420},[220,63777,359],{"class":264},[220,63779,63780,63782,63784],{"class":222,"line":389},[220,63781,2550],{"class":264},[220,63783,2553],{"class":420},[220,63785,386],{"class":264},[220,63787,63788,63790,63792],{"class":222,"line":399},[220,63789,2567],{"class":264},[220,63791,63693],{"class":420},[220,63793,359],{"class":264},[220,63795,63796,63798,63800],{"class":222,"line":644},[220,63797,402],{"class":264},[220,63799,347],{"class":420},[220,63801,359],{"class":264},[212,63803,63804],{"className":2844,"code":63715,"language":2846,"meta":178,"style":178},[99,63805,63806,63814,63822,63830,63838],{"__ignoreMap":178},[220,63807,63808,63810,63812],{"class":222,"line":223},[220,63809,343],{"class":264},[220,63811,347],{"class":420},[220,63813,359],{"class":264},[220,63815,63816,63818,63820],{"class":222,"line":179},[220,63817,364],{"class":264},[220,63819,63693],{"class":420},[220,63821,359],{"class":264},[220,63823,63824,63826,63828],{"class":222,"line":389},[220,63825,2550],{"class":264},[220,63827,2553],{"class":420},[220,63829,386],{"class":264},[220,63831,63832,63834,63836],{"class":222,"line":399},[220,63833,2567],{"class":264},[220,63835,63693],{"class":420},[220,63837,359],{"class":264},[220,63839,63840,63842,63844],{"class":222,"line":644},[220,63841,402],{"class":264},[220,63843,347],{"class":420},[220,63845,359],{"class":264},[212,63847,63848],{"className":468,"code":63715,"language":469,"meta":178,"style":178},[99,63849,63850,63858,63866,63874,63882],{"__ignoreMap":178},[220,63851,63852,63854,63856],{"class":222,"line":223},[220,63853,343],{"class":264},[220,63855,347],{"class":420},[220,63857,359],{"class":264},[220,63859,63860,63862,63864],{"class":222,"line":179},[220,63861,364],{"class":264},[220,63863,63693],{"class":420},[220,63865,359],{"class":264},[220,63867,63868,63870,63872],{"class":222,"line":389},[220,63869,2550],{"class":264},[220,63871,2553],{"class":420},[220,63873,386],{"class":264},[220,63875,63876,63878,63880],{"class":222,"line":399},[220,63877,2567],{"class":264},[220,63879,63693],{"class":420},[220,63881,359],{"class":264},[220,63883,63884,63886,63888],{"class":222,"line":644},[220,63885,402],{"class":264},[220,63887,347],{"class":420},[220,63889,359],{"class":264},[212,63891,63893],{"className":251,"code":63892,"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,63894,63895,63905,63909,63923,63927,63936,63944,63948,63952],{"__ignoreMap":178},[220,63896,63897,63899,63901,63903],{"class":222,"line":223},[220,63898,261],{"class":260},[220,63900,11512],{"class":264},[220,63902,268],{"class":260},[220,63904,4007],{"class":230},[220,63906,63907],{"class":222,"line":179},[220,63908,647],{"emptyLinePlaceholder":194},[220,63910,63911,63913,63915,63917,63919,63921],{"class":222,"line":389},[220,63912,1735],{"class":260},[220,63914,1738],{"class":420},[220,63916,1741],{"class":260},[220,63918,1744],{"class":260},[220,63920,1747],{"class":226},[220,63922,1750],{"class":264},[220,63924,63925],{"class":222,"line":399},[220,63926,1765],{"class":264},[220,63928,63929,63931,63934],{"class":222,"line":644},[220,63930,1770],{"class":264},[220,63932,63933],{"class":230},"'Pixelate'",[220,63935,7009],{"class":264},[220,63937,63938,63940,63942],{"class":222,"line":650},[220,63939,7014],{"class":264},[220,63941,3206],{"class":230},[220,63943,2465],{"class":264},[220,63945,63946],{"class":222,"line":656},[220,63947,7031],{"class":264},[220,63949,63950],{"class":222,"line":673},[220,63951,1787],{"class":264},[220,63953,63954],{"class":222,"line":682},[220,63955,1792],{"class":264},[1504,63957,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":63959},[63960,63961],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":63693,"description":63701},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":63968,"title":13069,"body":63969,"category":33063,"componentType":25877,"description":63976,"extension":191,"meta":64217,"navigation":194,"path":64218,"requiresChild":32530,"seo":64219,"stem":64220,"__hash__":64221},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":63970,"toc":64213},[63971,63974,63977,63979,63981,63984,63986,64211],[11,63972,13069],{"id":63973},"plasma",[15,63975,63976],{},"Animated effect of glowing plasma",[31911,63978],{"component":13069},[23,63980,31915],{"id":26533},[31917,63982],{":props":63983},"[{\"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,63985,31923],{"id":31922},[246,63987,63988,64028,64071,64111,64153],{":tabs":1557},[212,63989,63991],{"className":334,"code":63990,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,63992,63993,64001,64008,64016,64020],{"__ignoreMap":178},[220,63994,63995,63997,63999],{"class":222,"line":223},[220,63996,343],{"class":264},[220,63998,347],{"class":346},[220,64000,359],{"class":264},[220,64002,64003,64005],{"class":222,"line":179},[220,64004,364],{"class":264},[220,64006,64007],{"class":346},"Plasma\n",[220,64009,64010,64012,64014],{"class":222,"line":389},[220,64011,20371],{"class":226},[220,64013,353],{"class":264},[220,64015,60234],{"class":230},[220,64017,64018],{"class":222,"line":399},[220,64019,1234],{"class":264},[220,64021,64022,64024,64026],{"class":222,"line":644},[220,64023,402],{"class":264},[220,64025,347],{"class":346},[220,64027,359],{"class":264},[212,64029,64031],{"className":409,"code":64030,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,64032,64033,64041,64047,64059,64063],{"__ignoreMap":178},[220,64034,64035,64037,64039],{"class":222,"line":223},[220,64036,343],{"class":264},[220,64038,347],{"class":420},[220,64040,359],{"class":264},[220,64042,64043,64045],{"class":222,"line":179},[220,64044,364],{"class":264},[220,64046,64007],{"class":420},[220,64048,64049,64051,64053,64055,64057],{"class":222,"line":389},[220,64050,20482],{"class":226},[220,64052,353],{"class":260},[220,64054,743],{"class":264},[220,64056,60284],{"class":420},[220,64058,749],{"class":264},[220,64060,64061],{"class":222,"line":399},[220,64062,1234],{"class":264},[220,64064,64065,64067,64069],{"class":222,"line":644},[220,64066,402],{"class":264},[220,64068,347],{"class":420},[220,64070,359],{"class":264},[212,64072,64073],{"className":2844,"code":64030,"language":2846,"meta":178,"style":178},[99,64074,64075,64083,64089,64099,64103],{"__ignoreMap":178},[220,64076,64077,64079,64081],{"class":222,"line":223},[220,64078,343],{"class":264},[220,64080,347],{"class":420},[220,64082,359],{"class":264},[220,64084,64085,64087],{"class":222,"line":179},[220,64086,364],{"class":264},[220,64088,64007],{"class":420},[220,64090,64091,64093,64095,64097],{"class":222,"line":389},[220,64092,20482],{"class":226},[220,64094,29871],{"class":264},[220,64096,60284],{"class":420},[220,64098,749],{"class":264},[220,64100,64101],{"class":222,"line":399},[220,64102,1234],{"class":264},[220,64104,64105,64107,64109],{"class":222,"line":644},[220,64106,402],{"class":264},[220,64108,347],{"class":420},[220,64110,359],{"class":264},[212,64112,64113],{"className":468,"code":64030,"language":469,"meta":178,"style":178},[99,64114,64115,64123,64129,64141,64145],{"__ignoreMap":178},[220,64116,64117,64119,64121],{"class":222,"line":223},[220,64118,343],{"class":264},[220,64120,347],{"class":420},[220,64122,359],{"class":264},[220,64124,64125,64127],{"class":222,"line":179},[220,64126,364],{"class":264},[220,64128,64007],{"class":420},[220,64130,64131,64133,64135,64137,64139],{"class":222,"line":389},[220,64132,20482],{"class":226},[220,64134,353],{"class":260},[220,64136,743],{"class":264},[220,64138,60284],{"class":420},[220,64140,749],{"class":264},[220,64142,64143],{"class":222,"line":399},[220,64144,1234],{"class":264},[220,64146,64147,64149,64151],{"class":222,"line":644},[220,64148,402],{"class":264},[220,64150,347],{"class":420},[220,64152,359],{"class":264},[212,64154,64156],{"className":251,"code":64155,"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,64157,64158,64168,64172,64186,64190,64203,64207],{"__ignoreMap":178},[220,64159,64160,64162,64164,64166],{"class":222,"line":223},[220,64161,261],{"class":260},[220,64163,11512],{"class":264},[220,64165,268],{"class":260},[220,64167,4007],{"class":230},[220,64169,64170],{"class":222,"line":179},[220,64171,647],{"emptyLinePlaceholder":194},[220,64173,64174,64176,64178,64180,64182,64184],{"class":222,"line":389},[220,64175,1735],{"class":260},[220,64177,1738],{"class":420},[220,64179,1741],{"class":260},[220,64181,1744],{"class":260},[220,64183,1747],{"class":226},[220,64185,1750],{"class":264},[220,64187,64188],{"class":222,"line":399},[220,64189,1765],{"class":264},[220,64191,64192,64194,64197,64199,64201],{"class":222,"line":644},[220,64193,1770],{"class":264},[220,64195,64196],{"class":230},"'Plasma'",[220,64198,32203],{"class":264},[220,64200,60284],{"class":420},[220,64202,1782],{"class":264},[220,64204,64205],{"class":222,"line":650},[220,64206,1787],{"class":264},[220,64208,64209],{"class":222,"line":656},[220,64210,1792],{"class":264},[1504,64212,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64214},[64215,64216],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":13069,"description":63976},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":64223,"title":64224,"body":64225,"category":36569,"componentType":25877,"description":64232,"extension":191,"meta":64417,"navigation":194,"path":64418,"requiresChild":32530,"seo":64419,"stem":64420,"__hash__":64421},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":64226,"toc":64413},[64227,64230,64233,64235,64237,64240,64242,64411],[11,64228,64224],{"id":64229},"plastic",[15,64231,64232],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[31911,64234],{"component":64224},[23,64236,31915],{"id":26533},[31917,64238],{":props":64239},"[{\"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,64241,31923],{"id":31922},[246,64243,64244,64273,64301,64329,64357],{":tabs":1557},[212,64245,64247],{"className":334,"code":64246,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,64248,64249,64257,64265],{"__ignoreMap":178},[220,64250,64251,64253,64255],{"class":222,"line":223},[220,64252,343],{"class":264},[220,64254,347],{"class":346},[220,64256,359],{"class":264},[220,64258,64259,64261,64263],{"class":222,"line":179},[220,64260,364],{"class":264},[220,64262,64224],{"class":346},[220,64264,386],{"class":264},[220,64266,64267,64269,64271],{"class":222,"line":389},[220,64268,402],{"class":264},[220,64270,347],{"class":346},[220,64272,359],{"class":264},[212,64274,64275],{"className":409,"code":64246,"language":411,"meta":178,"style":178},[99,64276,64277,64285,64293],{"__ignoreMap":178},[220,64278,64279,64281,64283],{"class":222,"line":223},[220,64280,343],{"class":264},[220,64282,347],{"class":420},[220,64284,359],{"class":264},[220,64286,64287,64289,64291],{"class":222,"line":179},[220,64288,364],{"class":264},[220,64290,64224],{"class":420},[220,64292,386],{"class":264},[220,64294,64295,64297,64299],{"class":222,"line":389},[220,64296,402],{"class":264},[220,64298,347],{"class":420},[220,64300,359],{"class":264},[212,64302,64303],{"className":2844,"code":64246,"language":2846,"meta":178,"style":178},[99,64304,64305,64313,64321],{"__ignoreMap":178},[220,64306,64307,64309,64311],{"class":222,"line":223},[220,64308,343],{"class":264},[220,64310,347],{"class":420},[220,64312,359],{"class":264},[220,64314,64315,64317,64319],{"class":222,"line":179},[220,64316,364],{"class":264},[220,64318,64224],{"class":420},[220,64320,386],{"class":264},[220,64322,64323,64325,64327],{"class":222,"line":389},[220,64324,402],{"class":264},[220,64326,347],{"class":420},[220,64328,359],{"class":264},[212,64330,64331],{"className":468,"code":64246,"language":469,"meta":178,"style":178},[99,64332,64333,64341,64349],{"__ignoreMap":178},[220,64334,64335,64337,64339],{"class":222,"line":223},[220,64336,343],{"class":264},[220,64338,347],{"class":420},[220,64340,359],{"class":264},[220,64342,64343,64345,64347],{"class":222,"line":179},[220,64344,364],{"class":264},[220,64346,64224],{"class":420},[220,64348,386],{"class":264},[220,64350,64351,64353,64355],{"class":222,"line":389},[220,64352,402],{"class":264},[220,64354,347],{"class":420},[220,64356,359],{"class":264},[212,64358,64360],{"className":251,"code":64359,"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,64361,64362,64372,64376,64390,64394,64403,64407],{"__ignoreMap":178},[220,64363,64364,64366,64368,64370],{"class":222,"line":223},[220,64365,261],{"class":260},[220,64367,11512],{"class":264},[220,64369,268],{"class":260},[220,64371,4007],{"class":230},[220,64373,64374],{"class":222,"line":179},[220,64375,647],{"emptyLinePlaceholder":194},[220,64377,64378,64380,64382,64384,64386,64388],{"class":222,"line":389},[220,64379,1735],{"class":260},[220,64381,1738],{"class":420},[220,64383,1741],{"class":260},[220,64385,1744],{"class":260},[220,64387,1747],{"class":226},[220,64389,1750],{"class":264},[220,64391,64392],{"class":222,"line":399},[220,64393,1765],{"class":264},[220,64395,64396,64398,64401],{"class":222,"line":644},[220,64397,1770],{"class":264},[220,64399,64400],{"class":230},"'Plastic'",[220,64402,2465],{"class":264},[220,64404,64405],{"class":222,"line":650},[220,64406,1787],{"class":264},[220,64408,64409],{"class":222,"line":656},[220,64410,1792],{"class":264},[1504,64412,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":64414},[64415,64416],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":64224,"description":64232},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":64423,"title":64424,"body":64425,"category":33396,"componentType":25883,"description":64432,"extension":191,"meta":64795,"navigation":194,"path":64796,"requiresChild":194,"seo":64797,"stem":64798,"__hash__":64799},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":64426,"toc":64791},[64427,64430,64433,64435,64437,64440,64442,64789],[11,64428,64424],{"id":64429},"polarcoordinates",[15,64431,64432],{},"Convert rectangular coordinates to polar space",[31911,64434],{"component":64424},[23,64436,31915],{"id":26533},[31917,64438],{":props":64439},"[{\"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,64441,31923],{"id":31922},[246,64443,64444,64508,64579,64645,64715],{":tabs":1557},[212,64445,64447],{"className":334,"code":64446,"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,64448,64449,64457,64464,64472,64480,64484,64492,64500],{"__ignoreMap":178},[220,64450,64451,64453,64455],{"class":222,"line":223},[220,64452,343],{"class":264},[220,64454,347],{"class":346},[220,64456,359],{"class":264},[220,64458,64459,64461],{"class":222,"line":179},[220,64460,364],{"class":264},[220,64462,64463],{"class":346},"PolarCoordinates\n",[220,64465,64466,64468,64470],{"class":222,"line":389},[220,64467,17405],{"class":226},[220,64469,353],{"class":264},[220,64471,36625],{"class":230},[220,64473,64474,64476,64478],{"class":222,"line":399},[220,64475,20371],{"class":226},[220,64477,353],{"class":264},[220,64479,36625],{"class":230},[220,64481,64482],{"class":222,"line":644},[220,64483,31959],{"class":264},[220,64485,64486,64488,64490],{"class":222,"line":650},[220,64487,2550],{"class":264},[220,64489,2553],{"class":346},[220,64491,386],{"class":264},[220,64493,64494,64496,64498],{"class":222,"line":656},[220,64495,2567],{"class":264},[220,64497,64424],{"class":346},[220,64499,359],{"class":264},[220,64501,64502,64504,64506],{"class":222,"line":673},[220,64503,402],{"class":264},[220,64505,347],{"class":346},[220,64507,359],{"class":264},[212,64509,64511],{"className":409,"code":64510,"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,64512,64513,64521,64527,64539,64551,64555,64563,64571],{"__ignoreMap":178},[220,64514,64515,64517,64519],{"class":222,"line":223},[220,64516,343],{"class":264},[220,64518,347],{"class":420},[220,64520,359],{"class":264},[220,64522,64523,64525],{"class":222,"line":179},[220,64524,364],{"class":264},[220,64526,64463],{"class":420},[220,64528,64529,64531,64533,64535,64537],{"class":222,"line":389},[220,64530,9645],{"class":226},[220,64532,353],{"class":260},[220,64534,743],{"class":264},[220,64536,8677],{"class":420},[220,64538,749],{"class":264},[220,64540,64541,64543,64545,64547,64549],{"class":222,"line":399},[220,64542,20482],{"class":226},[220,64544,353],{"class":260},[220,64546,743],{"class":264},[220,64548,8677],{"class":420},[220,64550,749],{"class":264},[220,64552,64553],{"class":222,"line":644},[220,64554,31959],{"class":264},[220,64556,64557,64559,64561],{"class":222,"line":650},[220,64558,2550],{"class":264},[220,64560,2553],{"class":420},[220,64562,386],{"class":264},[220,64564,64565,64567,64569],{"class":222,"line":656},[220,64566,2567],{"class":264},[220,64568,64424],{"class":420},[220,64570,359],{"class":264},[220,64572,64573,64575,64577],{"class":222,"line":673},[220,64574,402],{"class":264},[220,64576,347],{"class":420},[220,64578,359],{"class":264},[212,64580,64581],{"className":2844,"code":64510,"language":2846,"meta":178,"style":178},[99,64582,64583,64591,64597,64607,64617,64621,64629,64637],{"__ignoreMap":178},[220,64584,64585,64587,64589],{"class":222,"line":223},[220,64586,343],{"class":264},[220,64588,347],{"class":420},[220,64590,359],{"class":264},[220,64592,64593,64595],{"class":222,"line":179},[220,64594,364],{"class":264},[220,64596,64463],{"class":420},[220,64598,64599,64601,64603,64605],{"class":222,"line":389},[220,64600,9645],{"class":226},[220,64602,29871],{"class":264},[220,64604,8677],{"class":420},[220,64606,749],{"class":264},[220,64608,64609,64611,64613,64615],{"class":222,"line":399},[220,64610,20482],{"class":226},[220,64612,29871],{"class":264},[220,64614,8677],{"class":420},[220,64616,749],{"class":264},[220,64618,64619],{"class":222,"line":644},[220,64620,31959],{"class":264},[220,64622,64623,64625,64627],{"class":222,"line":650},[220,64624,2550],{"class":264},[220,64626,2553],{"class":420},[220,64628,386],{"class":264},[220,64630,64631,64633,64635],{"class":222,"line":656},[220,64632,2567],{"class":264},[220,64634,64424],{"class":420},[220,64636,359],{"class":264},[220,64638,64639,64641,64643],{"class":222,"line":673},[220,64640,402],{"class":264},[220,64642,347],{"class":420},[220,64644,359],{"class":264},[212,64646,64647],{"className":468,"code":64510,"language":469,"meta":178,"style":178},[99,64648,64649,64657,64663,64675,64687,64691,64699,64707],{"__ignoreMap":178},[220,64650,64651,64653,64655],{"class":222,"line":223},[220,64652,343],{"class":264},[220,64654,347],{"class":420},[220,64656,359],{"class":264},[220,64658,64659,64661],{"class":222,"line":179},[220,64660,364],{"class":264},[220,64662,64463],{"class":420},[220,64664,64665,64667,64669,64671,64673],{"class":222,"line":389},[220,64666,9645],{"class":226},[220,64668,353],{"class":260},[220,64670,743],{"class":264},[220,64672,8677],{"class":420},[220,64674,749],{"class":264},[220,64676,64677,64679,64681,64683,64685],{"class":222,"line":399},[220,64678,20482],{"class":226},[220,64680,353],{"class":260},[220,64682,743],{"class":264},[220,64684,8677],{"class":420},[220,64686,749],{"class":264},[220,64688,64689],{"class":222,"line":644},[220,64690,31959],{"class":264},[220,64692,64693,64695,64697],{"class":222,"line":650},[220,64694,2550],{"class":264},[220,64696,2553],{"class":420},[220,64698,386],{"class":264},[220,64700,64701,64703,64705],{"class":222,"line":656},[220,64702,2567],{"class":264},[220,64704,64424],{"class":420},[220,64706,359],{"class":264},[220,64708,64709,64711,64713],{"class":222,"line":673},[220,64710,402],{"class":264},[220,64712,347],{"class":420},[220,64714,359],{"class":264},[212,64716,64718],{"className":251,"code":64717,"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,64719,64720,64730,64734,64748,64752,64769,64777,64781,64785],{"__ignoreMap":178},[220,64721,64722,64724,64726,64728],{"class":222,"line":223},[220,64723,261],{"class":260},[220,64725,11512],{"class":264},[220,64727,268],{"class":260},[220,64729,4007],{"class":230},[220,64731,64732],{"class":222,"line":179},[220,64733,647],{"emptyLinePlaceholder":194},[220,64735,64736,64738,64740,64742,64744,64746],{"class":222,"line":389},[220,64737,1735],{"class":260},[220,64739,1738],{"class":420},[220,64741,1741],{"class":260},[220,64743,1744],{"class":260},[220,64745,1747],{"class":226},[220,64747,1750],{"class":264},[220,64749,64750],{"class":222,"line":399},[220,64751,1765],{"class":264},[220,64753,64754,64756,64759,64761,64763,64765,64767],{"class":222,"line":644},[220,64755,1770],{"class":264},[220,64757,64758],{"class":230},"'PolarCoordinates'",[220,64760,7541],{"class":264},[220,64762,8677],{"class":420},[220,64764,45003],{"class":264},[220,64766,8677],{"class":420},[220,64768,7546],{"class":264},[220,64770,64771,64773,64775],{"class":222,"line":650},[220,64772,7014],{"class":264},[220,64774,3206],{"class":230},[220,64776,2465],{"class":264},[220,64778,64779],{"class":222,"line":656},[220,64780,7031],{"class":264},[220,64782,64783],{"class":222,"line":673},[220,64784,1787],{"class":264},[220,64786,64787],{"class":222,"line":682},[220,64788,1792],{"class":264},[1504,64790,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64792},[64793,64794],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":64424,"description":64432},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":64801,"title":64802,"body":64803,"category":15908,"componentType":25877,"description":64810,"extension":191,"meta":65087,"navigation":194,"path":65088,"requiresChild":32530,"seo":65089,"stem":65090,"__hash__":65091},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":64804,"toc":65083},[64805,64808,64811,64813,64815,64818,64820,65081],[11,64806,64802],{"id":64807},"polygon",[15,64809,64810],{},"Regular polygon with adjustable sides and corner rounding",[31911,64812],{"component":64802},[23,64814,31915],{"id":26533},[31917,64816],{":props":64817},"[{\"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,64819,31923],{"id":31922},[246,64821,64822,64870,64921,64969,65019],{":tabs":1557},[212,64823,64825],{"className":334,"code":64824,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,64826,64827,64835,64842,64850,64858,64862],{"__ignoreMap":178},[220,64828,64829,64831,64833],{"class":222,"line":223},[220,64830,343],{"class":264},[220,64832,347],{"class":346},[220,64834,359],{"class":264},[220,64836,64837,64839],{"class":222,"line":179},[220,64838,364],{"class":264},[220,64840,64841],{"class":346},"Polygon\n",[220,64843,64844,64846,64848],{"class":222,"line":389},[220,64845,9635],{"class":226},[220,64847,353],{"class":264},[220,64849,9591],{"class":230},[220,64851,64852,64854,64856],{"class":222,"line":399},[220,64853,17405],{"class":226},[220,64855,353],{"class":264},[220,64857,48148],{"class":230},[220,64859,64860],{"class":222,"line":644},[220,64861,1234],{"class":264},[220,64863,64864,64866,64868],{"class":222,"line":650},[220,64865,402],{"class":264},[220,64867,347],{"class":346},[220,64869,359],{"class":264},[212,64871,64873],{"className":409,"code":64872,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,64874,64875,64883,64889,64897,64909,64913],{"__ignoreMap":178},[220,64876,64877,64879,64881],{"class":222,"line":223},[220,64878,343],{"class":264},[220,64880,347],{"class":420},[220,64882,359],{"class":264},[220,64884,64885,64887],{"class":222,"line":179},[220,64886,364],{"class":264},[220,64888,64841],{"class":420},[220,64890,64891,64893,64895],{"class":222,"line":389},[220,64892,9635],{"class":226},[220,64894,353],{"class":260},[220,64896,9591],{"class":230},[220,64898,64899,64901,64903,64905,64907],{"class":222,"line":399},[220,64900,9645],{"class":226},[220,64902,353],{"class":260},[220,64904,743],{"class":264},[220,64906,8249],{"class":420},[220,64908,749],{"class":264},[220,64910,64911],{"class":222,"line":644},[220,64912,1234],{"class":264},[220,64914,64915,64917,64919],{"class":222,"line":650},[220,64916,402],{"class":264},[220,64918,347],{"class":420},[220,64920,359],{"class":264},[212,64922,64923],{"className":2844,"code":64872,"language":2846,"meta":178,"style":178},[99,64924,64925,64933,64939,64947,64957,64961],{"__ignoreMap":178},[220,64926,64927,64929,64931],{"class":222,"line":223},[220,64928,343],{"class":264},[220,64930,347],{"class":420},[220,64932,359],{"class":264},[220,64934,64935,64937],{"class":222,"line":179},[220,64936,364],{"class":264},[220,64938,64841],{"class":420},[220,64940,64941,64943,64945],{"class":222,"line":389},[220,64942,9635],{"class":226},[220,64944,353],{"class":264},[220,64946,9591],{"class":230},[220,64948,64949,64951,64953,64955],{"class":222,"line":399},[220,64950,9645],{"class":226},[220,64952,29871],{"class":264},[220,64954,8249],{"class":420},[220,64956,749],{"class":264},[220,64958,64959],{"class":222,"line":644},[220,64960,1234],{"class":264},[220,64962,64963,64965,64967],{"class":222,"line":650},[220,64964,402],{"class":264},[220,64966,347],{"class":420},[220,64968,359],{"class":264},[212,64970,64971],{"className":468,"code":64872,"language":469,"meta":178,"style":178},[99,64972,64973,64981,64987,64995,65007,65011],{"__ignoreMap":178},[220,64974,64975,64977,64979],{"class":222,"line":223},[220,64976,343],{"class":264},[220,64978,347],{"class":420},[220,64980,359],{"class":264},[220,64982,64983,64985],{"class":222,"line":179},[220,64984,364],{"class":264},[220,64986,64841],{"class":420},[220,64988,64989,64991,64993],{"class":222,"line":389},[220,64990,9635],{"class":226},[220,64992,353],{"class":260},[220,64994,9591],{"class":230},[220,64996,64997,64999,65001,65003,65005],{"class":222,"line":399},[220,64998,9645],{"class":226},[220,65000,353],{"class":260},[220,65002,743],{"class":264},[220,65004,8249],{"class":420},[220,65006,749],{"class":264},[220,65008,65009],{"class":222,"line":644},[220,65010,1234],{"class":264},[220,65012,65013,65015,65017],{"class":222,"line":650},[220,65014,402],{"class":264},[220,65016,347],{"class":420},[220,65018,359],{"class":264},[212,65020,65022],{"className":251,"code":65021,"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,65023,65024,65034,65038,65052,65056,65073,65077],{"__ignoreMap":178},[220,65025,65026,65028,65030,65032],{"class":222,"line":223},[220,65027,261],{"class":260},[220,65029,11512],{"class":264},[220,65031,268],{"class":260},[220,65033,4007],{"class":230},[220,65035,65036],{"class":222,"line":179},[220,65037,647],{"emptyLinePlaceholder":194},[220,65039,65040,65042,65044,65046,65048,65050],{"class":222,"line":389},[220,65041,1735],{"class":260},[220,65043,1738],{"class":420},[220,65045,1741],{"class":260},[220,65047,1744],{"class":260},[220,65049,1747],{"class":226},[220,65051,1750],{"class":264},[220,65053,65054],{"class":222,"line":399},[220,65055,1765],{"class":264},[220,65057,65058,65060,65063,65065,65067,65069,65071],{"class":222,"line":644},[220,65059,1770],{"class":264},[220,65061,65062],{"class":230},"'Polygon'",[220,65064,1776],{"class":264},[220,65066,10169],{"class":230},[220,65068,6566],{"class":264},[220,65070,8249],{"class":420},[220,65072,1782],{"class":264},[220,65074,65075],{"class":222,"line":650},[220,65076,1787],{"class":264},[220,65078,65079],{"class":222,"line":656},[220,65080,1792],{"class":264},[1504,65082,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65084},[65085,65086],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":64802,"description":64810},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":65093,"title":65094,"body":65095,"category":36368,"componentType":25883,"description":65102,"extension":191,"meta":65420,"navigation":194,"path":65421,"requiresChild":194,"seo":65422,"stem":65423,"__hash__":65424},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":65096,"toc":65416},[65097,65100,65103,65105,65107,65110,65112,65414],[11,65098,65094],{"id":65099},"posterize",[15,65101,65102],{},"Reduce color depth to create a poster effect",[31911,65104],{"component":65094},[23,65106,31915],{"id":26533},[31917,65108],{":props":65109},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,65111,31923],{"id":31922},[246,65113,65114,65171,65230,65286,65344],{":tabs":1557},[212,65115,65117],{"className":334,"code":65116,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,65118,65119,65127,65134,65143,65147,65155,65163],{"__ignoreMap":178},[220,65120,65121,65123,65125],{"class":222,"line":223},[220,65122,343],{"class":264},[220,65124,347],{"class":346},[220,65126,359],{"class":264},[220,65128,65129,65131],{"class":222,"line":179},[220,65130,364],{"class":264},[220,65132,65133],{"class":346},"Posterize\n",[220,65135,65136,65138,65140],{"class":222,"line":389},[220,65137,20371],{"class":226},[220,65139,353],{"class":264},[220,65141,65142],{"class":230},"\"5\"\n",[220,65144,65145],{"class":222,"line":399},[220,65146,31959],{"class":264},[220,65148,65149,65151,65153],{"class":222,"line":644},[220,65150,2550],{"class":264},[220,65152,2553],{"class":346},[220,65154,386],{"class":264},[220,65156,65157,65159,65161],{"class":222,"line":650},[220,65158,2567],{"class":264},[220,65160,65094],{"class":346},[220,65162,359],{"class":264},[220,65164,65165,65167,65169],{"class":222,"line":656},[220,65166,402],{"class":264},[220,65168,347],{"class":346},[220,65170,359],{"class":264},[212,65172,65174],{"className":409,"code":65173,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,65175,65176,65184,65190,65202,65206,65214,65222],{"__ignoreMap":178},[220,65177,65178,65180,65182],{"class":222,"line":223},[220,65179,343],{"class":264},[220,65181,347],{"class":420},[220,65183,359],{"class":264},[220,65185,65186,65188],{"class":222,"line":179},[220,65187,364],{"class":264},[220,65189,65133],{"class":420},[220,65191,65192,65194,65196,65198,65200],{"class":222,"line":389},[220,65193,20482],{"class":226},[220,65195,353],{"class":260},[220,65197,743],{"class":264},[220,65199,22093],{"class":420},[220,65201,749],{"class":264},[220,65203,65204],{"class":222,"line":399},[220,65205,31959],{"class":264},[220,65207,65208,65210,65212],{"class":222,"line":644},[220,65209,2550],{"class":264},[220,65211,2553],{"class":420},[220,65213,386],{"class":264},[220,65215,65216,65218,65220],{"class":222,"line":650},[220,65217,2567],{"class":264},[220,65219,65094],{"class":420},[220,65221,359],{"class":264},[220,65223,65224,65226,65228],{"class":222,"line":656},[220,65225,402],{"class":264},[220,65227,347],{"class":420},[220,65229,359],{"class":264},[212,65231,65232],{"className":2844,"code":65173,"language":2846,"meta":178,"style":178},[99,65233,65234,65242,65248,65258,65262,65270,65278],{"__ignoreMap":178},[220,65235,65236,65238,65240],{"class":222,"line":223},[220,65237,343],{"class":264},[220,65239,347],{"class":420},[220,65241,359],{"class":264},[220,65243,65244,65246],{"class":222,"line":179},[220,65245,364],{"class":264},[220,65247,65133],{"class":420},[220,65249,65250,65252,65254,65256],{"class":222,"line":389},[220,65251,20482],{"class":226},[220,65253,29871],{"class":264},[220,65255,22093],{"class":420},[220,65257,749],{"class":264},[220,65259,65260],{"class":222,"line":399},[220,65261,31959],{"class":264},[220,65263,65264,65266,65268],{"class":222,"line":644},[220,65265,2550],{"class":264},[220,65267,2553],{"class":420},[220,65269,386],{"class":264},[220,65271,65272,65274,65276],{"class":222,"line":650},[220,65273,2567],{"class":264},[220,65275,65094],{"class":420},[220,65277,359],{"class":264},[220,65279,65280,65282,65284],{"class":222,"line":656},[220,65281,402],{"class":264},[220,65283,347],{"class":420},[220,65285,359],{"class":264},[212,65287,65288],{"className":468,"code":65173,"language":469,"meta":178,"style":178},[99,65289,65290,65298,65304,65316,65320,65328,65336],{"__ignoreMap":178},[220,65291,65292,65294,65296],{"class":222,"line":223},[220,65293,343],{"class":264},[220,65295,347],{"class":420},[220,65297,359],{"class":264},[220,65299,65300,65302],{"class":222,"line":179},[220,65301,364],{"class":264},[220,65303,65133],{"class":420},[220,65305,65306,65308,65310,65312,65314],{"class":222,"line":389},[220,65307,20482],{"class":226},[220,65309,353],{"class":260},[220,65311,743],{"class":264},[220,65313,22093],{"class":420},[220,65315,749],{"class":264},[220,65317,65318],{"class":222,"line":399},[220,65319,31959],{"class":264},[220,65321,65322,65324,65326],{"class":222,"line":644},[220,65323,2550],{"class":264},[220,65325,2553],{"class":420},[220,65327,386],{"class":264},[220,65329,65330,65332,65334],{"class":222,"line":650},[220,65331,2567],{"class":264},[220,65333,65094],{"class":420},[220,65335,359],{"class":264},[220,65337,65338,65340,65342],{"class":222,"line":656},[220,65339,402],{"class":264},[220,65341,347],{"class":420},[220,65343,359],{"class":264},[212,65345,65347],{"className":251,"code":65346,"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,65348,65349,65359,65363,65377,65381,65394,65402,65406,65410],{"__ignoreMap":178},[220,65350,65351,65353,65355,65357],{"class":222,"line":223},[220,65352,261],{"class":260},[220,65354,11512],{"class":264},[220,65356,268],{"class":260},[220,65358,4007],{"class":230},[220,65360,65361],{"class":222,"line":179},[220,65362,647],{"emptyLinePlaceholder":194},[220,65364,65365,65367,65369,65371,65373,65375],{"class":222,"line":389},[220,65366,1735],{"class":260},[220,65368,1738],{"class":420},[220,65370,1741],{"class":260},[220,65372,1744],{"class":260},[220,65374,1747],{"class":226},[220,65376,1750],{"class":264},[220,65378,65379],{"class":222,"line":399},[220,65380,1765],{"class":264},[220,65382,65383,65385,65388,65390,65392],{"class":222,"line":644},[220,65384,1770],{"class":264},[220,65386,65387],{"class":230},"'Posterize'",[220,65389,32203],{"class":264},[220,65391,22093],{"class":420},[220,65393,7546],{"class":264},[220,65395,65396,65398,65400],{"class":222,"line":650},[220,65397,7014],{"class":264},[220,65399,3206],{"class":230},[220,65401,2465],{"class":264},[220,65403,65404],{"class":222,"line":656},[220,65405,7031],{"class":264},[220,65407,65408],{"class":222,"line":673},[220,65409,1787],{"class":264},[220,65411,65412],{"class":222,"line":682},[220,65413,1792],{"class":264},[1504,65415,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65417},[65418,65419],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":65094,"description":65102},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":65426,"title":65427,"body":65428,"category":33063,"componentType":25877,"description":65435,"extension":191,"meta":65678,"navigation":194,"path":65679,"requiresChild":32530,"seo":65680,"stem":65681,"__hash__":65682},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":65429,"toc":65674},[65430,65433,65436,65438,65440,65443,65445,65672],[11,65431,65427],{"id":65432},"prism",[15,65434,65435],{},"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,65437],{"component":65427},[23,65439,31915],{"id":26533},[31917,65441],{":props":65442},"[{\"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,65444,31923],{"id":31922},[246,65446,65447,65488,65532,65572,65614],{":tabs":1557},[212,65448,65450],{"className":334,"code":65449,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,65451,65452,65460,65467,65476,65480],{"__ignoreMap":178},[220,65453,65454,65456,65458],{"class":222,"line":223},[220,65455,343],{"class":264},[220,65457,347],{"class":346},[220,65459,359],{"class":264},[220,65461,65462,65464],{"class":222,"line":179},[220,65463,364],{"class":264},[220,65465,65466],{"class":346},"Prism\n",[220,65468,65469,65471,65473],{"class":222,"line":389},[220,65470,20371],{"class":226},[220,65472,353],{"class":264},[220,65474,65475],{"class":230},"\"1.6\"\n",[220,65477,65478],{"class":222,"line":399},[220,65479,1234],{"class":264},[220,65481,65482,65484,65486],{"class":222,"line":644},[220,65483,402],{"class":264},[220,65485,347],{"class":346},[220,65487,359],{"class":264},[212,65489,65491],{"className":409,"code":65490,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,65492,65493,65501,65507,65520,65524],{"__ignoreMap":178},[220,65494,65495,65497,65499],{"class":222,"line":223},[220,65496,343],{"class":264},[220,65498,347],{"class":420},[220,65500,359],{"class":264},[220,65502,65503,65505],{"class":222,"line":179},[220,65504,364],{"class":264},[220,65506,65466],{"class":420},[220,65508,65509,65511,65513,65515,65518],{"class":222,"line":389},[220,65510,20482],{"class":226},[220,65512,353],{"class":260},[220,65514,743],{"class":264},[220,65516,65517],{"class":420},"1.6",[220,65519,749],{"class":264},[220,65521,65522],{"class":222,"line":399},[220,65523,1234],{"class":264},[220,65525,65526,65528,65530],{"class":222,"line":644},[220,65527,402],{"class":264},[220,65529,347],{"class":420},[220,65531,359],{"class":264},[212,65533,65534],{"className":2844,"code":65490,"language":2846,"meta":178,"style":178},[99,65535,65536,65544,65550,65560,65564],{"__ignoreMap":178},[220,65537,65538,65540,65542],{"class":222,"line":223},[220,65539,343],{"class":264},[220,65541,347],{"class":420},[220,65543,359],{"class":264},[220,65545,65546,65548],{"class":222,"line":179},[220,65547,364],{"class":264},[220,65549,65466],{"class":420},[220,65551,65552,65554,65556,65558],{"class":222,"line":389},[220,65553,20482],{"class":226},[220,65555,29871],{"class":264},[220,65557,65517],{"class":420},[220,65559,749],{"class":264},[220,65561,65562],{"class":222,"line":399},[220,65563,1234],{"class":264},[220,65565,65566,65568,65570],{"class":222,"line":644},[220,65567,402],{"class":264},[220,65569,347],{"class":420},[220,65571,359],{"class":264},[212,65573,65574],{"className":468,"code":65490,"language":469,"meta":178,"style":178},[99,65575,65576,65584,65590,65602,65606],{"__ignoreMap":178},[220,65577,65578,65580,65582],{"class":222,"line":223},[220,65579,343],{"class":264},[220,65581,347],{"class":420},[220,65583,359],{"class":264},[220,65585,65586,65588],{"class":222,"line":179},[220,65587,364],{"class":264},[220,65589,65466],{"class":420},[220,65591,65592,65594,65596,65598,65600],{"class":222,"line":389},[220,65593,20482],{"class":226},[220,65595,353],{"class":260},[220,65597,743],{"class":264},[220,65599,65517],{"class":420},[220,65601,749],{"class":264},[220,65603,65604],{"class":222,"line":399},[220,65605,1234],{"class":264},[220,65607,65608,65610,65612],{"class":222,"line":644},[220,65609,402],{"class":264},[220,65611,347],{"class":420},[220,65613,359],{"class":264},[212,65615,65617],{"className":251,"code":65616,"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,65618,65619,65629,65633,65647,65651,65664,65668],{"__ignoreMap":178},[220,65620,65621,65623,65625,65627],{"class":222,"line":223},[220,65622,261],{"class":260},[220,65624,11512],{"class":264},[220,65626,268],{"class":260},[220,65628,4007],{"class":230},[220,65630,65631],{"class":222,"line":179},[220,65632,647],{"emptyLinePlaceholder":194},[220,65634,65635,65637,65639,65641,65643,65645],{"class":222,"line":389},[220,65636,1735],{"class":260},[220,65638,1738],{"class":420},[220,65640,1741],{"class":260},[220,65642,1744],{"class":260},[220,65644,1747],{"class":226},[220,65646,1750],{"class":264},[220,65648,65649],{"class":222,"line":399},[220,65650,1765],{"class":264},[220,65652,65653,65655,65658,65660,65662],{"class":222,"line":644},[220,65654,1770],{"class":264},[220,65656,65657],{"class":230},"'Prism'",[220,65659,32203],{"class":264},[220,65661,65517],{"class":420},[220,65663,1782],{"class":264},[220,65665,65666],{"class":222,"line":650},[220,65667,1787],{"class":264},[220,65669,65670],{"class":222,"line":656},[220,65671,1792],{"class":264},[1504,65673,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65675},[65676,65677],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":65427,"description":65435},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":65684,"title":65685,"body":65686,"category":32234,"componentType":25883,"description":65693,"extension":191,"meta":66010,"navigation":194,"path":66011,"requiresChild":194,"seo":66012,"stem":66013,"__hash__":66014},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":65687,"toc":66006},[65688,65691,65694,65696,65698,65701,65703,66004],[11,65689,65685],{"id":65690},"progressiveblur",[15,65692,65693],{},"Blur that increases progressively in one direction",[31911,65695],{"component":65685},[23,65697,31915],{"id":26533},[31917,65699],{":props":65700},"[{\"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,65702,31923],{"id":31922},[246,65704,65705,65761,65820,65876,65934],{":tabs":1557},[212,65706,65708],{"className":334,"code":65707,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,65709,65710,65718,65725,65733,65737,65745,65753],{"__ignoreMap":178},[220,65711,65712,65714,65716],{"class":222,"line":223},[220,65713,343],{"class":264},[220,65715,347],{"class":346},[220,65717,359],{"class":264},[220,65719,65720,65722],{"class":222,"line":179},[220,65721,364],{"class":264},[220,65723,65724],{"class":346},"ProgressiveBlur\n",[220,65726,65727,65729,65731],{"class":222,"line":389},[220,65728,20371],{"class":226},[220,65730,353],{"class":264},[220,65732,35080],{"class":230},[220,65734,65735],{"class":222,"line":399},[220,65736,31959],{"class":264},[220,65738,65739,65741,65743],{"class":222,"line":644},[220,65740,2550],{"class":264},[220,65742,2553],{"class":346},[220,65744,386],{"class":264},[220,65746,65747,65749,65751],{"class":222,"line":650},[220,65748,2567],{"class":264},[220,65750,65685],{"class":346},[220,65752,359],{"class":264},[220,65754,65755,65757,65759],{"class":222,"line":656},[220,65756,402],{"class":264},[220,65758,347],{"class":346},[220,65760,359],{"class":264},[212,65762,65764],{"className":409,"code":65763,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,65765,65766,65774,65780,65792,65796,65804,65812],{"__ignoreMap":178},[220,65767,65768,65770,65772],{"class":222,"line":223},[220,65769,343],{"class":264},[220,65771,347],{"class":420},[220,65773,359],{"class":264},[220,65775,65776,65778],{"class":222,"line":179},[220,65777,364],{"class":264},[220,65779,65724],{"class":420},[220,65781,65782,65784,65786,65788,65790],{"class":222,"line":389},[220,65783,20482],{"class":226},[220,65785,353],{"class":260},[220,65787,743],{"class":264},[220,65789,35138],{"class":420},[220,65791,749],{"class":264},[220,65793,65794],{"class":222,"line":399},[220,65795,31959],{"class":264},[220,65797,65798,65800,65802],{"class":222,"line":644},[220,65799,2550],{"class":264},[220,65801,2553],{"class":420},[220,65803,386],{"class":264},[220,65805,65806,65808,65810],{"class":222,"line":650},[220,65807,2567],{"class":264},[220,65809,65685],{"class":420},[220,65811,359],{"class":264},[220,65813,65814,65816,65818],{"class":222,"line":656},[220,65815,402],{"class":264},[220,65817,347],{"class":420},[220,65819,359],{"class":264},[212,65821,65822],{"className":2844,"code":65763,"language":2846,"meta":178,"style":178},[99,65823,65824,65832,65838,65848,65852,65860,65868],{"__ignoreMap":178},[220,65825,65826,65828,65830],{"class":222,"line":223},[220,65827,343],{"class":264},[220,65829,347],{"class":420},[220,65831,359],{"class":264},[220,65833,65834,65836],{"class":222,"line":179},[220,65835,364],{"class":264},[220,65837,65724],{"class":420},[220,65839,65840,65842,65844,65846],{"class":222,"line":389},[220,65841,20482],{"class":226},[220,65843,29871],{"class":264},[220,65845,35138],{"class":420},[220,65847,749],{"class":264},[220,65849,65850],{"class":222,"line":399},[220,65851,31959],{"class":264},[220,65853,65854,65856,65858],{"class":222,"line":644},[220,65855,2550],{"class":264},[220,65857,2553],{"class":420},[220,65859,386],{"class":264},[220,65861,65862,65864,65866],{"class":222,"line":650},[220,65863,2567],{"class":264},[220,65865,65685],{"class":420},[220,65867,359],{"class":264},[220,65869,65870,65872,65874],{"class":222,"line":656},[220,65871,402],{"class":264},[220,65873,347],{"class":420},[220,65875,359],{"class":264},[212,65877,65878],{"className":468,"code":65763,"language":469,"meta":178,"style":178},[99,65879,65880,65888,65894,65906,65910,65918,65926],{"__ignoreMap":178},[220,65881,65882,65884,65886],{"class":222,"line":223},[220,65883,343],{"class":264},[220,65885,347],{"class":420},[220,65887,359],{"class":264},[220,65889,65890,65892],{"class":222,"line":179},[220,65891,364],{"class":264},[220,65893,65724],{"class":420},[220,65895,65896,65898,65900,65902,65904],{"class":222,"line":389},[220,65897,20482],{"class":226},[220,65899,353],{"class":260},[220,65901,743],{"class":264},[220,65903,35138],{"class":420},[220,65905,749],{"class":264},[220,65907,65908],{"class":222,"line":399},[220,65909,31959],{"class":264},[220,65911,65912,65914,65916],{"class":222,"line":644},[220,65913,2550],{"class":264},[220,65915,2553],{"class":420},[220,65917,386],{"class":264},[220,65919,65920,65922,65924],{"class":222,"line":650},[220,65921,2567],{"class":264},[220,65923,65685],{"class":420},[220,65925,359],{"class":264},[220,65927,65928,65930,65932],{"class":222,"line":656},[220,65929,402],{"class":264},[220,65931,347],{"class":420},[220,65933,359],{"class":264},[212,65935,65937],{"className":251,"code":65936,"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,65938,65939,65949,65953,65967,65971,65984,65992,65996,66000],{"__ignoreMap":178},[220,65940,65941,65943,65945,65947],{"class":222,"line":223},[220,65942,261],{"class":260},[220,65944,11512],{"class":264},[220,65946,268],{"class":260},[220,65948,4007],{"class":230},[220,65950,65951],{"class":222,"line":179},[220,65952,647],{"emptyLinePlaceholder":194},[220,65954,65955,65957,65959,65961,65963,65965],{"class":222,"line":389},[220,65956,1735],{"class":260},[220,65958,1738],{"class":420},[220,65960,1741],{"class":260},[220,65962,1744],{"class":260},[220,65964,1747],{"class":226},[220,65966,1750],{"class":264},[220,65968,65969],{"class":222,"line":399},[220,65970,1765],{"class":264},[220,65972,65973,65975,65978,65980,65982],{"class":222,"line":644},[220,65974,1770],{"class":264},[220,65976,65977],{"class":230},"'ProgressiveBlur'",[220,65979,32203],{"class":264},[220,65981,35138],{"class":420},[220,65983,7546],{"class":264},[220,65985,65986,65988,65990],{"class":222,"line":650},[220,65987,7014],{"class":264},[220,65989,3206],{"class":230},[220,65991,2465],{"class":264},[220,65993,65994],{"class":222,"line":656},[220,65995,7031],{"class":264},[220,65997,65998],{"class":222,"line":673},[220,65999,1787],{"class":264},[220,66001,66002],{"class":222,"line":682},[220,66003,1792],{"class":264},[1504,66005,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66007},[66008,66009],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":65685,"description":65693},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":66016,"title":66017,"body":66018,"category":33063,"componentType":25877,"description":66025,"extension":191,"meta":66266,"navigation":194,"path":66267,"requiresChild":32530,"seo":66268,"stem":66269,"__hash__":66270},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":66019,"toc":66262},[66020,66023,66026,66028,66030,66033,66035,66260],[11,66021,66017],{"id":66022},"radialgradient",[15,66024,66025],{},"Radial gradient radiating from a center point",[31911,66027],{"component":66017},[23,66029,31915],{"id":26533},[31917,66031],{":props":66032},"[{\"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,66034,31923],{"id":31922},[246,66036,66037,66077,66120,66160,66202],{":tabs":1557},[212,66038,66040],{"className":334,"code":66039,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,66041,66042,66050,66057,66065,66069],{"__ignoreMap":178},[220,66043,66044,66046,66048],{"class":222,"line":223},[220,66045,343],{"class":264},[220,66047,347],{"class":346},[220,66049,359],{"class":264},[220,66051,66052,66054],{"class":222,"line":179},[220,66053,364],{"class":264},[220,66055,66056],{"class":346},"RadialGradient\n",[220,66058,66059,66061,66063],{"class":222,"line":389},[220,66060,17405],{"class":226},[220,66062,353],{"class":264},[220,66064,36625],{"class":230},[220,66066,66067],{"class":222,"line":399},[220,66068,1234],{"class":264},[220,66070,66071,66073,66075],{"class":222,"line":644},[220,66072,402],{"class":264},[220,66074,347],{"class":346},[220,66076,359],{"class":264},[212,66078,66080],{"className":409,"code":66079,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,66081,66082,66090,66096,66108,66112],{"__ignoreMap":178},[220,66083,66084,66086,66088],{"class":222,"line":223},[220,66085,343],{"class":264},[220,66087,347],{"class":420},[220,66089,359],{"class":264},[220,66091,66092,66094],{"class":222,"line":179},[220,66093,364],{"class":264},[220,66095,66056],{"class":420},[220,66097,66098,66100,66102,66104,66106],{"class":222,"line":389},[220,66099,9645],{"class":226},[220,66101,353],{"class":260},[220,66103,743],{"class":264},[220,66105,8677],{"class":420},[220,66107,749],{"class":264},[220,66109,66110],{"class":222,"line":399},[220,66111,1234],{"class":264},[220,66113,66114,66116,66118],{"class":222,"line":644},[220,66115,402],{"class":264},[220,66117,347],{"class":420},[220,66119,359],{"class":264},[212,66121,66122],{"className":2844,"code":66079,"language":2846,"meta":178,"style":178},[99,66123,66124,66132,66138,66148,66152],{"__ignoreMap":178},[220,66125,66126,66128,66130],{"class":222,"line":223},[220,66127,343],{"class":264},[220,66129,347],{"class":420},[220,66131,359],{"class":264},[220,66133,66134,66136],{"class":222,"line":179},[220,66135,364],{"class":264},[220,66137,66056],{"class":420},[220,66139,66140,66142,66144,66146],{"class":222,"line":389},[220,66141,9645],{"class":226},[220,66143,29871],{"class":264},[220,66145,8677],{"class":420},[220,66147,749],{"class":264},[220,66149,66150],{"class":222,"line":399},[220,66151,1234],{"class":264},[220,66153,66154,66156,66158],{"class":222,"line":644},[220,66155,402],{"class":264},[220,66157,347],{"class":420},[220,66159,359],{"class":264},[212,66161,66162],{"className":468,"code":66079,"language":469,"meta":178,"style":178},[99,66163,66164,66172,66178,66190,66194],{"__ignoreMap":178},[220,66165,66166,66168,66170],{"class":222,"line":223},[220,66167,343],{"class":264},[220,66169,347],{"class":420},[220,66171,359],{"class":264},[220,66173,66174,66176],{"class":222,"line":179},[220,66175,364],{"class":264},[220,66177,66056],{"class":420},[220,66179,66180,66182,66184,66186,66188],{"class":222,"line":389},[220,66181,9645],{"class":226},[220,66183,353],{"class":260},[220,66185,743],{"class":264},[220,66187,8677],{"class":420},[220,66189,749],{"class":264},[220,66191,66192],{"class":222,"line":399},[220,66193,1234],{"class":264},[220,66195,66196,66198,66200],{"class":222,"line":644},[220,66197,402],{"class":264},[220,66199,347],{"class":420},[220,66201,359],{"class":264},[212,66203,66205],{"className":251,"code":66204,"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,66206,66207,66217,66221,66235,66239,66252,66256],{"__ignoreMap":178},[220,66208,66209,66211,66213,66215],{"class":222,"line":223},[220,66210,261],{"class":260},[220,66212,11512],{"class":264},[220,66214,268],{"class":260},[220,66216,4007],{"class":230},[220,66218,66219],{"class":222,"line":179},[220,66220,647],{"emptyLinePlaceholder":194},[220,66222,66223,66225,66227,66229,66231,66233],{"class":222,"line":389},[220,66224,1735],{"class":260},[220,66226,1738],{"class":420},[220,66228,1741],{"class":260},[220,66230,1744],{"class":260},[220,66232,1747],{"class":226},[220,66234,1750],{"class":264},[220,66236,66237],{"class":222,"line":399},[220,66238,1765],{"class":264},[220,66240,66241,66243,66246,66248,66250],{"class":222,"line":644},[220,66242,1770],{"class":264},[220,66244,66245],{"class":230},"'RadialGradient'",[220,66247,7541],{"class":264},[220,66249,8677],{"class":420},[220,66251,1782],{"class":264},[220,66253,66254],{"class":222,"line":650},[220,66255,1787],{"class":264},[220,66257,66258],{"class":222,"line":656},[220,66259,1792],{"class":264},[1504,66261,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66263},[66264,66265],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":66017,"description":66025},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":66272,"title":66273,"body":66274,"category":33673,"componentType":25883,"description":66281,"extension":191,"meta":66542,"navigation":194,"path":66543,"requiresChild":194,"seo":66544,"stem":66545,"__hash__":66546},"components\u002Fdocs\u002Fcomponents\u002FRadialWipe.md","RadialWipe",{"type":8,"value":66275,"toc":66538},[66276,66279,66282,66284,66286,66289,66291,66536],[11,66277,66273],{"id":66278},"radialwipe",[15,66280,66281],{},"Sweep the content away in a clock-hand arc around a center point",[31911,66283],{"component":66273},[23,66285,31915],{"id":26533},[31917,66287],{":props":66288},"[{\"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,66290,31923],{"id":31922},[246,66292,66293,66338,66382,66426,66470],{":tabs":1557},[212,66294,66296],{"className":334,"code":66295,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialWipe>\n \u003CCircle \u002F>\n \u003C\u002FRadialWipe>\n\u003C\u002FShader>\n",[99,66297,66298,66306,66314,66322,66330],{"__ignoreMap":178},[220,66299,66300,66302,66304],{"class":222,"line":223},[220,66301,343],{"class":264},[220,66303,347],{"class":346},[220,66305,359],{"class":264},[220,66307,66308,66310,66312],{"class":222,"line":179},[220,66309,364],{"class":264},[220,66311,66273],{"class":346},[220,66313,359],{"class":264},[220,66315,66316,66318,66320],{"class":222,"line":389},[220,66317,2550],{"class":264},[220,66319,2553],{"class":346},[220,66321,386],{"class":264},[220,66323,66324,66326,66328],{"class":222,"line":399},[220,66325,2567],{"class":264},[220,66327,66273],{"class":346},[220,66329,359],{"class":264},[220,66331,66332,66334,66336],{"class":222,"line":644},[220,66333,402],{"class":264},[220,66335,347],{"class":346},[220,66337,359],{"class":264},[212,66339,66340],{"className":409,"code":66295,"language":411,"meta":178,"style":178},[99,66341,66342,66350,66358,66366,66374],{"__ignoreMap":178},[220,66343,66344,66346,66348],{"class":222,"line":223},[220,66345,343],{"class":264},[220,66347,347],{"class":420},[220,66349,359],{"class":264},[220,66351,66352,66354,66356],{"class":222,"line":179},[220,66353,364],{"class":264},[220,66355,66273],{"class":420},[220,66357,359],{"class":264},[220,66359,66360,66362,66364],{"class":222,"line":389},[220,66361,2550],{"class":264},[220,66363,2553],{"class":420},[220,66365,386],{"class":264},[220,66367,66368,66370,66372],{"class":222,"line":399},[220,66369,2567],{"class":264},[220,66371,66273],{"class":420},[220,66373,359],{"class":264},[220,66375,66376,66378,66380],{"class":222,"line":644},[220,66377,402],{"class":264},[220,66379,347],{"class":420},[220,66381,359],{"class":264},[212,66383,66384],{"className":2844,"code":66295,"language":2846,"meta":178,"style":178},[99,66385,66386,66394,66402,66410,66418],{"__ignoreMap":178},[220,66387,66388,66390,66392],{"class":222,"line":223},[220,66389,343],{"class":264},[220,66391,347],{"class":420},[220,66393,359],{"class":264},[220,66395,66396,66398,66400],{"class":222,"line":179},[220,66397,364],{"class":264},[220,66399,66273],{"class":420},[220,66401,359],{"class":264},[220,66403,66404,66406,66408],{"class":222,"line":389},[220,66405,2550],{"class":264},[220,66407,2553],{"class":420},[220,66409,386],{"class":264},[220,66411,66412,66414,66416],{"class":222,"line":399},[220,66413,2567],{"class":264},[220,66415,66273],{"class":420},[220,66417,359],{"class":264},[220,66419,66420,66422,66424],{"class":222,"line":644},[220,66421,402],{"class":264},[220,66423,347],{"class":420},[220,66425,359],{"class":264},[212,66427,66428],{"className":468,"code":66295,"language":469,"meta":178,"style":178},[99,66429,66430,66438,66446,66454,66462],{"__ignoreMap":178},[220,66431,66432,66434,66436],{"class":222,"line":223},[220,66433,343],{"class":264},[220,66435,347],{"class":420},[220,66437,359],{"class":264},[220,66439,66440,66442,66444],{"class":222,"line":179},[220,66441,364],{"class":264},[220,66443,66273],{"class":420},[220,66445,359],{"class":264},[220,66447,66448,66450,66452],{"class":222,"line":389},[220,66449,2550],{"class":264},[220,66451,2553],{"class":420},[220,66453,386],{"class":264},[220,66455,66456,66458,66460],{"class":222,"line":399},[220,66457,2567],{"class":264},[220,66459,66273],{"class":420},[220,66461,359],{"class":264},[220,66463,66464,66466,66468],{"class":222,"line":644},[220,66465,402],{"class":264},[220,66467,347],{"class":420},[220,66469,359],{"class":264},[212,66471,66473],{"className":251,"code":66472,"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,66474,66475,66485,66489,66503,66507,66516,66524,66528,66532],{"__ignoreMap":178},[220,66476,66477,66479,66481,66483],{"class":222,"line":223},[220,66478,261],{"class":260},[220,66480,11512],{"class":264},[220,66482,268],{"class":260},[220,66484,4007],{"class":230},[220,66486,66487],{"class":222,"line":179},[220,66488,647],{"emptyLinePlaceholder":194},[220,66490,66491,66493,66495,66497,66499,66501],{"class":222,"line":389},[220,66492,1735],{"class":260},[220,66494,1738],{"class":420},[220,66496,1741],{"class":260},[220,66498,1744],{"class":260},[220,66500,1747],{"class":226},[220,66502,1750],{"class":264},[220,66504,66505],{"class":222,"line":399},[220,66506,1765],{"class":264},[220,66508,66509,66511,66514],{"class":222,"line":644},[220,66510,1770],{"class":264},[220,66512,66513],{"class":230},"'RadialWipe'",[220,66515,7009],{"class":264},[220,66517,66518,66520,66522],{"class":222,"line":650},[220,66519,7014],{"class":264},[220,66521,3206],{"class":230},[220,66523,2465],{"class":264},[220,66525,66526],{"class":222,"line":656},[220,66527,7031],{"class":264},[220,66529,66530],{"class":222,"line":673},[220,66531,1787],{"class":264},[220,66533,66534],{"class":222,"line":682},[220,66535,1792],{"class":264},[1504,66537,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":66539},[66540,66541],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fradialwipe",{"title":66273,"description":66281},"docs\u002Fcomponents\u002FRadialWipe","nUrviUP1ftpLIxdItR9innSIhwR4K8qi4Drktjb9bho",{"id":66548,"title":66549,"body":66550,"category":33673,"componentType":25883,"description":66557,"extension":191,"meta":66818,"navigation":194,"path":66819,"requiresChild":194,"seo":66820,"stem":66821,"__hash__":66822},"components\u002Fdocs\u002Fcomponents\u002FRandomBars.md","RandomBars",{"type":8,"value":66551,"toc":66814},[66552,66555,66558,66560,66562,66565,66567,66812],[11,66553,66549],{"id":66554},"randombars",[15,66556,66557],{},"Wipe the content away as parallel bars vanishing in random order",[31911,66559],{"component":66549},[23,66561,31915],{"id":26533},[31917,66563],{":props":66564},"[{\"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,66566,31923],{"id":31922},[246,66568,66569,66614,66658,66702,66746],{":tabs":1557},[212,66570,66572],{"className":334,"code":66571,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRandomBars>\n \u003CCircle \u002F>\n \u003C\u002FRandomBars>\n\u003C\u002FShader>\n",[99,66573,66574,66582,66590,66598,66606],{"__ignoreMap":178},[220,66575,66576,66578,66580],{"class":222,"line":223},[220,66577,343],{"class":264},[220,66579,347],{"class":346},[220,66581,359],{"class":264},[220,66583,66584,66586,66588],{"class":222,"line":179},[220,66585,364],{"class":264},[220,66587,66549],{"class":346},[220,66589,359],{"class":264},[220,66591,66592,66594,66596],{"class":222,"line":389},[220,66593,2550],{"class":264},[220,66595,2553],{"class":346},[220,66597,386],{"class":264},[220,66599,66600,66602,66604],{"class":222,"line":399},[220,66601,2567],{"class":264},[220,66603,66549],{"class":346},[220,66605,359],{"class":264},[220,66607,66608,66610,66612],{"class":222,"line":644},[220,66609,402],{"class":264},[220,66611,347],{"class":346},[220,66613,359],{"class":264},[212,66615,66616],{"className":409,"code":66571,"language":411,"meta":178,"style":178},[99,66617,66618,66626,66634,66642,66650],{"__ignoreMap":178},[220,66619,66620,66622,66624],{"class":222,"line":223},[220,66621,343],{"class":264},[220,66623,347],{"class":420},[220,66625,359],{"class":264},[220,66627,66628,66630,66632],{"class":222,"line":179},[220,66629,364],{"class":264},[220,66631,66549],{"class":420},[220,66633,359],{"class":264},[220,66635,66636,66638,66640],{"class":222,"line":389},[220,66637,2550],{"class":264},[220,66639,2553],{"class":420},[220,66641,386],{"class":264},[220,66643,66644,66646,66648],{"class":222,"line":399},[220,66645,2567],{"class":264},[220,66647,66549],{"class":420},[220,66649,359],{"class":264},[220,66651,66652,66654,66656],{"class":222,"line":644},[220,66653,402],{"class":264},[220,66655,347],{"class":420},[220,66657,359],{"class":264},[212,66659,66660],{"className":2844,"code":66571,"language":2846,"meta":178,"style":178},[99,66661,66662,66670,66678,66686,66694],{"__ignoreMap":178},[220,66663,66664,66666,66668],{"class":222,"line":223},[220,66665,343],{"class":264},[220,66667,347],{"class":420},[220,66669,359],{"class":264},[220,66671,66672,66674,66676],{"class":222,"line":179},[220,66673,364],{"class":264},[220,66675,66549],{"class":420},[220,66677,359],{"class":264},[220,66679,66680,66682,66684],{"class":222,"line":389},[220,66681,2550],{"class":264},[220,66683,2553],{"class":420},[220,66685,386],{"class":264},[220,66687,66688,66690,66692],{"class":222,"line":399},[220,66689,2567],{"class":264},[220,66691,66549],{"class":420},[220,66693,359],{"class":264},[220,66695,66696,66698,66700],{"class":222,"line":644},[220,66697,402],{"class":264},[220,66699,347],{"class":420},[220,66701,359],{"class":264},[212,66703,66704],{"className":468,"code":66571,"language":469,"meta":178,"style":178},[99,66705,66706,66714,66722,66730,66738],{"__ignoreMap":178},[220,66707,66708,66710,66712],{"class":222,"line":223},[220,66709,343],{"class":264},[220,66711,347],{"class":420},[220,66713,359],{"class":264},[220,66715,66716,66718,66720],{"class":222,"line":179},[220,66717,364],{"class":264},[220,66719,66549],{"class":420},[220,66721,359],{"class":264},[220,66723,66724,66726,66728],{"class":222,"line":389},[220,66725,2550],{"class":264},[220,66727,2553],{"class":420},[220,66729,386],{"class":264},[220,66731,66732,66734,66736],{"class":222,"line":399},[220,66733,2567],{"class":264},[220,66735,66549],{"class":420},[220,66737,359],{"class":264},[220,66739,66740,66742,66744],{"class":222,"line":644},[220,66741,402],{"class":264},[220,66743,347],{"class":420},[220,66745,359],{"class":264},[212,66747,66749],{"className":251,"code":66748,"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,66750,66751,66761,66765,66779,66783,66792,66800,66804,66808],{"__ignoreMap":178},[220,66752,66753,66755,66757,66759],{"class":222,"line":223},[220,66754,261],{"class":260},[220,66756,11512],{"class":264},[220,66758,268],{"class":260},[220,66760,4007],{"class":230},[220,66762,66763],{"class":222,"line":179},[220,66764,647],{"emptyLinePlaceholder":194},[220,66766,66767,66769,66771,66773,66775,66777],{"class":222,"line":389},[220,66768,1735],{"class":260},[220,66770,1738],{"class":420},[220,66772,1741],{"class":260},[220,66774,1744],{"class":260},[220,66776,1747],{"class":226},[220,66778,1750],{"class":264},[220,66780,66781],{"class":222,"line":399},[220,66782,1765],{"class":264},[220,66784,66785,66787,66790],{"class":222,"line":644},[220,66786,1770],{"class":264},[220,66788,66789],{"class":230},"'RandomBars'",[220,66791,7009],{"class":264},[220,66793,66794,66796,66798],{"class":222,"line":650},[220,66795,7014],{"class":264},[220,66797,3206],{"class":230},[220,66799,2465],{"class":264},[220,66801,66802],{"class":222,"line":656},[220,66803,7031],{"class":264},[220,66805,66806],{"class":222,"line":673},[220,66807,1787],{"class":264},[220,66809,66810],{"class":222,"line":682},[220,66811,1792],{"class":264},[1504,66813,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":66815},[66816,66817],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frandombars",{"title":66549,"description":66557},"docs\u002Fcomponents\u002FRandomBars","XgBCPA4gxuugWJlg4oDrwVA3_03S4Lb2qtTwq8ToMe0",{"id":66824,"title":66825,"body":66826,"category":35559,"componentType":25877,"description":66833,"extension":191,"meta":67018,"navigation":194,"path":67019,"requiresChild":32530,"seo":67020,"stem":67021,"__hash__":67022},"components\u002Fdocs\u002Fcomponents\u002FReactionDiffusion.md","ReactionDiffusion",{"type":8,"value":66827,"toc":67014},[66828,66831,66834,66836,66838,66841,66843,67012],[11,66829,66825],{"id":66830},"reactiondiffusion",[15,66832,66833],{},"A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor",[31911,66835],{"component":66825},[23,66837,31915],{"id":26533},[31917,66839],{":props":66840},"[{\"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,66842,31923],{"id":31922},[246,66844,66845,66874,66902,66930,66958],{":tabs":1557},[212,66846,66848],{"className":334,"code":66847,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReactionDiffusion \u002F>\n\u003C\u002FShader>\n",[99,66849,66850,66858,66866],{"__ignoreMap":178},[220,66851,66852,66854,66856],{"class":222,"line":223},[220,66853,343],{"class":264},[220,66855,347],{"class":346},[220,66857,359],{"class":264},[220,66859,66860,66862,66864],{"class":222,"line":179},[220,66861,364],{"class":264},[220,66863,66825],{"class":346},[220,66865,386],{"class":264},[220,66867,66868,66870,66872],{"class":222,"line":389},[220,66869,402],{"class":264},[220,66871,347],{"class":346},[220,66873,359],{"class":264},[212,66875,66876],{"className":409,"code":66847,"language":411,"meta":178,"style":178},[99,66877,66878,66886,66894],{"__ignoreMap":178},[220,66879,66880,66882,66884],{"class":222,"line":223},[220,66881,343],{"class":264},[220,66883,347],{"class":420},[220,66885,359],{"class":264},[220,66887,66888,66890,66892],{"class":222,"line":179},[220,66889,364],{"class":264},[220,66891,66825],{"class":420},[220,66893,386],{"class":264},[220,66895,66896,66898,66900],{"class":222,"line":389},[220,66897,402],{"class":264},[220,66899,347],{"class":420},[220,66901,359],{"class":264},[212,66903,66904],{"className":2844,"code":66847,"language":2846,"meta":178,"style":178},[99,66905,66906,66914,66922],{"__ignoreMap":178},[220,66907,66908,66910,66912],{"class":222,"line":223},[220,66909,343],{"class":264},[220,66911,347],{"class":420},[220,66913,359],{"class":264},[220,66915,66916,66918,66920],{"class":222,"line":179},[220,66917,364],{"class":264},[220,66919,66825],{"class":420},[220,66921,386],{"class":264},[220,66923,66924,66926,66928],{"class":222,"line":389},[220,66925,402],{"class":264},[220,66927,347],{"class":420},[220,66929,359],{"class":264},[212,66931,66932],{"className":468,"code":66847,"language":469,"meta":178,"style":178},[99,66933,66934,66942,66950],{"__ignoreMap":178},[220,66935,66936,66938,66940],{"class":222,"line":223},[220,66937,343],{"class":264},[220,66939,347],{"class":420},[220,66941,359],{"class":264},[220,66943,66944,66946,66948],{"class":222,"line":179},[220,66945,364],{"class":264},[220,66947,66825],{"class":420},[220,66949,386],{"class":264},[220,66951,66952,66954,66956],{"class":222,"line":389},[220,66953,402],{"class":264},[220,66955,347],{"class":420},[220,66957,359],{"class":264},[212,66959,66961],{"className":251,"code":66960,"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,66962,66963,66973,66977,66991,66995,67004,67008],{"__ignoreMap":178},[220,66964,66965,66967,66969,66971],{"class":222,"line":223},[220,66966,261],{"class":260},[220,66968,11512],{"class":264},[220,66970,268],{"class":260},[220,66972,4007],{"class":230},[220,66974,66975],{"class":222,"line":179},[220,66976,647],{"emptyLinePlaceholder":194},[220,66978,66979,66981,66983,66985,66987,66989],{"class":222,"line":389},[220,66980,1735],{"class":260},[220,66982,1738],{"class":420},[220,66984,1741],{"class":260},[220,66986,1744],{"class":260},[220,66988,1747],{"class":226},[220,66990,1750],{"class":264},[220,66992,66993],{"class":222,"line":399},[220,66994,1765],{"class":264},[220,66996,66997,66999,67002],{"class":222,"line":644},[220,66998,1770],{"class":264},[220,67000,67001],{"class":230},"'ReactionDiffusion'",[220,67003,2465],{"class":264},[220,67005,67006],{"class":222,"line":650},[220,67007,1787],{"class":264},[220,67009,67010],{"class":222,"line":656},[220,67011,1792],{"class":264},[1504,67013,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":67015},[67016,67017],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Freactiondiffusion",{"title":66825,"description":66833},"docs\u002Fcomponents\u002FReactionDiffusion","NYG8rTGKT-we5Yb6vVhrjHcbQfR7IFWMNLpjfgq1_DE",{"id":67024,"title":67025,"body":67026,"category":33396,"componentType":25883,"description":67033,"extension":191,"meta":67350,"navigation":194,"path":67351,"requiresChild":194,"seo":67352,"stem":67353,"__hash__":67354},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":67027,"toc":67346},[67028,67031,67034,67036,67038,67041,67043,67344],[11,67029,67025],{"id":67030},"rectangularcoordinates",[15,67032,67033],{},"Convert polar coordinates back to rectangular space",[31911,67035],{"component":67025},[23,67037,31915],{"id":26533},[31917,67039],{":props":67040},"[{\"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,67042,31923],{"id":31922},[246,67044,67045,67101,67160,67216,67274],{":tabs":1557},[212,67046,67048],{"className":334,"code":67047,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,67049,67050,67058,67065,67073,67077,67085,67093],{"__ignoreMap":178},[220,67051,67052,67054,67056],{"class":222,"line":223},[220,67053,343],{"class":264},[220,67055,347],{"class":346},[220,67057,359],{"class":264},[220,67059,67060,67062],{"class":222,"line":179},[220,67061,364],{"class":264},[220,67063,67064],{"class":346},"RectangularCoordinates\n",[220,67066,67067,67069,67071],{"class":222,"line":389},[220,67068,20371],{"class":226},[220,67070,353],{"class":264},[220,67072,36625],{"class":230},[220,67074,67075],{"class":222,"line":399},[220,67076,31959],{"class":264},[220,67078,67079,67081,67083],{"class":222,"line":644},[220,67080,2550],{"class":264},[220,67082,2553],{"class":346},[220,67084,386],{"class":264},[220,67086,67087,67089,67091],{"class":222,"line":650},[220,67088,2567],{"class":264},[220,67090,67025],{"class":346},[220,67092,359],{"class":264},[220,67094,67095,67097,67099],{"class":222,"line":656},[220,67096,402],{"class":264},[220,67098,347],{"class":346},[220,67100,359],{"class":264},[212,67102,67104],{"className":409,"code":67103,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,67105,67106,67114,67120,67132,67136,67144,67152],{"__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],{"class":222,"line":179},[220,67117,364],{"class":264},[220,67119,67064],{"class":420},[220,67121,67122,67124,67126,67128,67130],{"class":222,"line":389},[220,67123,20482],{"class":226},[220,67125,353],{"class":260},[220,67127,743],{"class":264},[220,67129,8677],{"class":420},[220,67131,749],{"class":264},[220,67133,67134],{"class":222,"line":399},[220,67135,31959],{"class":264},[220,67137,67138,67140,67142],{"class":222,"line":644},[220,67139,2550],{"class":264},[220,67141,2553],{"class":420},[220,67143,386],{"class":264},[220,67145,67146,67148,67150],{"class":222,"line":650},[220,67147,2567],{"class":264},[220,67149,67025],{"class":420},[220,67151,359],{"class":264},[220,67153,67154,67156,67158],{"class":222,"line":656},[220,67155,402],{"class":264},[220,67157,347],{"class":420},[220,67159,359],{"class":264},[212,67161,67162],{"className":2844,"code":67103,"language":2846,"meta":178,"style":178},[99,67163,67164,67172,67178,67188,67192,67200,67208],{"__ignoreMap":178},[220,67165,67166,67168,67170],{"class":222,"line":223},[220,67167,343],{"class":264},[220,67169,347],{"class":420},[220,67171,359],{"class":264},[220,67173,67174,67176],{"class":222,"line":179},[220,67175,364],{"class":264},[220,67177,67064],{"class":420},[220,67179,67180,67182,67184,67186],{"class":222,"line":389},[220,67181,20482],{"class":226},[220,67183,29871],{"class":264},[220,67185,8677],{"class":420},[220,67187,749],{"class":264},[220,67189,67190],{"class":222,"line":399},[220,67191,31959],{"class":264},[220,67193,67194,67196,67198],{"class":222,"line":644},[220,67195,2550],{"class":264},[220,67197,2553],{"class":420},[220,67199,386],{"class":264},[220,67201,67202,67204,67206],{"class":222,"line":650},[220,67203,2567],{"class":264},[220,67205,67025],{"class":420},[220,67207,359],{"class":264},[220,67209,67210,67212,67214],{"class":222,"line":656},[220,67211,402],{"class":264},[220,67213,347],{"class":420},[220,67215,359],{"class":264},[212,67217,67218],{"className":468,"code":67103,"language":469,"meta":178,"style":178},[99,67219,67220,67228,67234,67246,67250,67258,67266],{"__ignoreMap":178},[220,67221,67222,67224,67226],{"class":222,"line":223},[220,67223,343],{"class":264},[220,67225,347],{"class":420},[220,67227,359],{"class":264},[220,67229,67230,67232],{"class":222,"line":179},[220,67231,364],{"class":264},[220,67233,67064],{"class":420},[220,67235,67236,67238,67240,67242,67244],{"class":222,"line":389},[220,67237,20482],{"class":226},[220,67239,353],{"class":260},[220,67241,743],{"class":264},[220,67243,8677],{"class":420},[220,67245,749],{"class":264},[220,67247,67248],{"class":222,"line":399},[220,67249,31959],{"class":264},[220,67251,67252,67254,67256],{"class":222,"line":644},[220,67253,2550],{"class":264},[220,67255,2553],{"class":420},[220,67257,386],{"class":264},[220,67259,67260,67262,67264],{"class":222,"line":650},[220,67261,2567],{"class":264},[220,67263,67025],{"class":420},[220,67265,359],{"class":264},[220,67267,67268,67270,67272],{"class":222,"line":656},[220,67269,402],{"class":264},[220,67271,347],{"class":420},[220,67273,359],{"class":264},[212,67275,67277],{"className":251,"code":67276,"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,67278,67279,67289,67293,67307,67311,67324,67332,67336,67340],{"__ignoreMap":178},[220,67280,67281,67283,67285,67287],{"class":222,"line":223},[220,67282,261],{"class":260},[220,67284,11512],{"class":264},[220,67286,268],{"class":260},[220,67288,4007],{"class":230},[220,67290,67291],{"class":222,"line":179},[220,67292,647],{"emptyLinePlaceholder":194},[220,67294,67295,67297,67299,67301,67303,67305],{"class":222,"line":389},[220,67296,1735],{"class":260},[220,67298,1738],{"class":420},[220,67300,1741],{"class":260},[220,67302,1744],{"class":260},[220,67304,1747],{"class":226},[220,67306,1750],{"class":264},[220,67308,67309],{"class":222,"line":399},[220,67310,1765],{"class":264},[220,67312,67313,67315,67318,67320,67322],{"class":222,"line":644},[220,67314,1770],{"class":264},[220,67316,67317],{"class":230},"'RectangularCoordinates'",[220,67319,32203],{"class":264},[220,67321,8677],{"class":420},[220,67323,7546],{"class":264},[220,67325,67326,67328,67330],{"class":222,"line":650},[220,67327,7014],{"class":264},[220,67329,3206],{"class":230},[220,67331,2465],{"class":264},[220,67333,67334],{"class":222,"line":656},[220,67335,7031],{"class":264},[220,67337,67338],{"class":222,"line":673},[220,67339,1787],{"class":264},[220,67341,67342],{"class":222,"line":682},[220,67343,1792],{"class":264},[1504,67345,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67347},[67348,67349],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":67025,"description":67033},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":67356,"title":67357,"body":67358,"category":32806,"componentType":25883,"description":67365,"extension":191,"meta":67626,"navigation":194,"path":67627,"requiresChild":194,"seo":67628,"stem":67629,"__hash__":67630},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":67359,"toc":67622},[67360,67363,67366,67368,67370,67373,67375,67620],[11,67361,67357],{"id":67362},"reflectiveplane",[15,67364,67365],{},"Reflective floor that mirrors the content above it",[31911,67367],{"component":67357},[23,67369,31915],{"id":26533},[31917,67371],{":props":67372},"[{\"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,67374,31923],{"id":31922},[246,67376,67377,67422,67466,67510,67554],{":tabs":1557},[212,67378,67380],{"className":334,"code":67379,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,67381,67382,67390,67398,67406,67414],{"__ignoreMap":178},[220,67383,67384,67386,67388],{"class":222,"line":223},[220,67385,343],{"class":264},[220,67387,347],{"class":346},[220,67389,359],{"class":264},[220,67391,67392,67394,67396],{"class":222,"line":179},[220,67393,364],{"class":264},[220,67395,67357],{"class":346},[220,67397,359],{"class":264},[220,67399,67400,67402,67404],{"class":222,"line":389},[220,67401,2550],{"class":264},[220,67403,2553],{"class":346},[220,67405,386],{"class":264},[220,67407,67408,67410,67412],{"class":222,"line":399},[220,67409,2567],{"class":264},[220,67411,67357],{"class":346},[220,67413,359],{"class":264},[220,67415,67416,67418,67420],{"class":222,"line":644},[220,67417,402],{"class":264},[220,67419,347],{"class":346},[220,67421,359],{"class":264},[212,67423,67424],{"className":409,"code":67379,"language":411,"meta":178,"style":178},[99,67425,67426,67434,67442,67450,67458],{"__ignoreMap":178},[220,67427,67428,67430,67432],{"class":222,"line":223},[220,67429,343],{"class":264},[220,67431,347],{"class":420},[220,67433,359],{"class":264},[220,67435,67436,67438,67440],{"class":222,"line":179},[220,67437,364],{"class":264},[220,67439,67357],{"class":420},[220,67441,359],{"class":264},[220,67443,67444,67446,67448],{"class":222,"line":389},[220,67445,2550],{"class":264},[220,67447,2553],{"class":420},[220,67449,386],{"class":264},[220,67451,67452,67454,67456],{"class":222,"line":399},[220,67453,2567],{"class":264},[220,67455,67357],{"class":420},[220,67457,359],{"class":264},[220,67459,67460,67462,67464],{"class":222,"line":644},[220,67461,402],{"class":264},[220,67463,347],{"class":420},[220,67465,359],{"class":264},[212,67467,67468],{"className":2844,"code":67379,"language":2846,"meta":178,"style":178},[99,67469,67470,67478,67486,67494,67502],{"__ignoreMap":178},[220,67471,67472,67474,67476],{"class":222,"line":223},[220,67473,343],{"class":264},[220,67475,347],{"class":420},[220,67477,359],{"class":264},[220,67479,67480,67482,67484],{"class":222,"line":179},[220,67481,364],{"class":264},[220,67483,67357],{"class":420},[220,67485,359],{"class":264},[220,67487,67488,67490,67492],{"class":222,"line":389},[220,67489,2550],{"class":264},[220,67491,2553],{"class":420},[220,67493,386],{"class":264},[220,67495,67496,67498,67500],{"class":222,"line":399},[220,67497,2567],{"class":264},[220,67499,67357],{"class":420},[220,67501,359],{"class":264},[220,67503,67504,67506,67508],{"class":222,"line":644},[220,67505,402],{"class":264},[220,67507,347],{"class":420},[220,67509,359],{"class":264},[212,67511,67512],{"className":468,"code":67379,"language":469,"meta":178,"style":178},[99,67513,67514,67522,67530,67538,67546],{"__ignoreMap":178},[220,67515,67516,67518,67520],{"class":222,"line":223},[220,67517,343],{"class":264},[220,67519,347],{"class":420},[220,67521,359],{"class":264},[220,67523,67524,67526,67528],{"class":222,"line":179},[220,67525,364],{"class":264},[220,67527,67357],{"class":420},[220,67529,359],{"class":264},[220,67531,67532,67534,67536],{"class":222,"line":389},[220,67533,2550],{"class":264},[220,67535,2553],{"class":420},[220,67537,386],{"class":264},[220,67539,67540,67542,67544],{"class":222,"line":399},[220,67541,2567],{"class":264},[220,67543,67357],{"class":420},[220,67545,359],{"class":264},[220,67547,67548,67550,67552],{"class":222,"line":644},[220,67549,402],{"class":264},[220,67551,347],{"class":420},[220,67553,359],{"class":264},[212,67555,67557],{"className":251,"code":67556,"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,67558,67559,67569,67573,67587,67591,67600,67608,67612,67616],{"__ignoreMap":178},[220,67560,67561,67563,67565,67567],{"class":222,"line":223},[220,67562,261],{"class":260},[220,67564,11512],{"class":264},[220,67566,268],{"class":260},[220,67568,4007],{"class":230},[220,67570,67571],{"class":222,"line":179},[220,67572,647],{"emptyLinePlaceholder":194},[220,67574,67575,67577,67579,67581,67583,67585],{"class":222,"line":389},[220,67576,1735],{"class":260},[220,67578,1738],{"class":420},[220,67580,1741],{"class":260},[220,67582,1744],{"class":260},[220,67584,1747],{"class":226},[220,67586,1750],{"class":264},[220,67588,67589],{"class":222,"line":399},[220,67590,1765],{"class":264},[220,67592,67593,67595,67598],{"class":222,"line":644},[220,67594,1770],{"class":264},[220,67596,67597],{"class":230},"'ReflectivePlane'",[220,67599,7009],{"class":264},[220,67601,67602,67604,67606],{"class":222,"line":650},[220,67603,7014],{"class":264},[220,67605,3206],{"class":230},[220,67607,2465],{"class":264},[220,67609,67610],{"class":222,"line":656},[220,67611,7031],{"class":264},[220,67613,67614],{"class":222,"line":673},[220,67615,1787],{"class":264},[220,67617,67618],{"class":222,"line":682},[220,67619,1792],{"class":264},[1504,67621,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":67623},[67624,67625],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":67357,"description":67365},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":67632,"title":67633,"body":67634,"category":33396,"componentType":25883,"description":67641,"extension":191,"meta":67958,"navigation":194,"path":67959,"requiresChild":194,"seo":67960,"stem":67961,"__hash__":67962},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":67635,"toc":67954},[67636,67639,67642,67644,67646,67649,67651,67952],[11,67637,67633],{"id":67638},"repeater",[15,67640,67641],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[31911,67643],{"component":67633},[23,67645,31915],{"id":26533},[31917,67647],{":props":67648},"[{\"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,67650,31923],{"id":31922},[246,67652,67653,67709,67768,67824,67882],{":tabs":1557},[212,67654,67656],{"className":334,"code":67655,"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,67657,67658,67666,67673,67681,67685,67693,67701],{"__ignoreMap":178},[220,67659,67660,67662,67664],{"class":222,"line":223},[220,67661,343],{"class":264},[220,67663,347],{"class":346},[220,67665,359],{"class":264},[220,67667,67668,67670],{"class":222,"line":179},[220,67669,364],{"class":264},[220,67671,67672],{"class":346},"Repeater\n",[220,67674,67675,67677,67679],{"class":222,"line":389},[220,67676,17405],{"class":226},[220,67678,353],{"class":264},[220,67680,41098],{"class":230},[220,67682,67683],{"class":222,"line":399},[220,67684,31959],{"class":264},[220,67686,67687,67689,67691],{"class":222,"line":644},[220,67688,2550],{"class":264},[220,67690,2553],{"class":346},[220,67692,386],{"class":264},[220,67694,67695,67697,67699],{"class":222,"line":650},[220,67696,2567],{"class":264},[220,67698,67633],{"class":346},[220,67700,359],{"class":264},[220,67702,67703,67705,67707],{"class":222,"line":656},[220,67704,402],{"class":264},[220,67706,347],{"class":346},[220,67708,359],{"class":264},[212,67710,67712],{"className":409,"code":67711,"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,67713,67714,67722,67728,67740,67744,67752,67760],{"__ignoreMap":178},[220,67715,67716,67718,67720],{"class":222,"line":223},[220,67717,343],{"class":264},[220,67719,347],{"class":420},[220,67721,359],{"class":264},[220,67723,67724,67726],{"class":222,"line":179},[220,67725,364],{"class":264},[220,67727,67672],{"class":420},[220,67729,67730,67732,67734,67736,67738],{"class":222,"line":389},[220,67731,9645],{"class":226},[220,67733,353],{"class":260},[220,67735,743],{"class":264},[220,67737,22004],{"class":420},[220,67739,749],{"class":264},[220,67741,67742],{"class":222,"line":399},[220,67743,31959],{"class":264},[220,67745,67746,67748,67750],{"class":222,"line":644},[220,67747,2550],{"class":264},[220,67749,2553],{"class":420},[220,67751,386],{"class":264},[220,67753,67754,67756,67758],{"class":222,"line":650},[220,67755,2567],{"class":264},[220,67757,67633],{"class":420},[220,67759,359],{"class":264},[220,67761,67762,67764,67766],{"class":222,"line":656},[220,67763,402],{"class":264},[220,67765,347],{"class":420},[220,67767,359],{"class":264},[212,67769,67770],{"className":2844,"code":67711,"language":2846,"meta":178,"style":178},[99,67771,67772,67780,67786,67796,67800,67808,67816],{"__ignoreMap":178},[220,67773,67774,67776,67778],{"class":222,"line":223},[220,67775,343],{"class":264},[220,67777,347],{"class":420},[220,67779,359],{"class":264},[220,67781,67782,67784],{"class":222,"line":179},[220,67783,364],{"class":264},[220,67785,67672],{"class":420},[220,67787,67788,67790,67792,67794],{"class":222,"line":389},[220,67789,9645],{"class":226},[220,67791,29871],{"class":264},[220,67793,22004],{"class":420},[220,67795,749],{"class":264},[220,67797,67798],{"class":222,"line":399},[220,67799,31959],{"class":264},[220,67801,67802,67804,67806],{"class":222,"line":644},[220,67803,2550],{"class":264},[220,67805,2553],{"class":420},[220,67807,386],{"class":264},[220,67809,67810,67812,67814],{"class":222,"line":650},[220,67811,2567],{"class":264},[220,67813,67633],{"class":420},[220,67815,359],{"class":264},[220,67817,67818,67820,67822],{"class":222,"line":656},[220,67819,402],{"class":264},[220,67821,347],{"class":420},[220,67823,359],{"class":264},[212,67825,67826],{"className":468,"code":67711,"language":469,"meta":178,"style":178},[99,67827,67828,67836,67842,67854,67858,67866,67874],{"__ignoreMap":178},[220,67829,67830,67832,67834],{"class":222,"line":223},[220,67831,343],{"class":264},[220,67833,347],{"class":420},[220,67835,359],{"class":264},[220,67837,67838,67840],{"class":222,"line":179},[220,67839,364],{"class":264},[220,67841,67672],{"class":420},[220,67843,67844,67846,67848,67850,67852],{"class":222,"line":389},[220,67845,9645],{"class":226},[220,67847,353],{"class":260},[220,67849,743],{"class":264},[220,67851,22004],{"class":420},[220,67853,749],{"class":264},[220,67855,67856],{"class":222,"line":399},[220,67857,31959],{"class":264},[220,67859,67860,67862,67864],{"class":222,"line":644},[220,67861,2550],{"class":264},[220,67863,2553],{"class":420},[220,67865,386],{"class":264},[220,67867,67868,67870,67872],{"class":222,"line":650},[220,67869,2567],{"class":264},[220,67871,67633],{"class":420},[220,67873,359],{"class":264},[220,67875,67876,67878,67880],{"class":222,"line":656},[220,67877,402],{"class":264},[220,67879,347],{"class":420},[220,67881,359],{"class":264},[212,67883,67885],{"className":251,"code":67884,"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,67886,67887,67897,67901,67915,67919,67932,67940,67944,67948],{"__ignoreMap":178},[220,67888,67889,67891,67893,67895],{"class":222,"line":223},[220,67890,261],{"class":260},[220,67892,11512],{"class":264},[220,67894,268],{"class":260},[220,67896,4007],{"class":230},[220,67898,67899],{"class":222,"line":179},[220,67900,647],{"emptyLinePlaceholder":194},[220,67902,67903,67905,67907,67909,67911,67913],{"class":222,"line":389},[220,67904,1735],{"class":260},[220,67906,1738],{"class":420},[220,67908,1741],{"class":260},[220,67910,1744],{"class":260},[220,67912,1747],{"class":226},[220,67914,1750],{"class":264},[220,67916,67917],{"class":222,"line":399},[220,67918,1765],{"class":264},[220,67920,67921,67923,67926,67928,67930],{"class":222,"line":644},[220,67922,1770],{"class":264},[220,67924,67925],{"class":230},"'Repeater'",[220,67927,7541],{"class":264},[220,67929,22004],{"class":420},[220,67931,7546],{"class":264},[220,67933,67934,67936,67938],{"class":222,"line":650},[220,67935,7014],{"class":264},[220,67937,3206],{"class":230},[220,67939,2465],{"class":264},[220,67941,67942],{"class":222,"line":656},[220,67943,7031],{"class":264},[220,67945,67946],{"class":222,"line":673},[220,67947,1787],{"class":264},[220,67949,67950],{"class":222,"line":682},[220,67951,1792],{"class":264},[1504,67953,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67955},[67956,67957],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":67633,"description":67641},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":67964,"title":67965,"body":67966,"category":15908,"componentType":25877,"description":67973,"extension":191,"meta":68250,"navigation":194,"path":68251,"requiresChild":32530,"seo":68252,"stem":68253,"__hash__":68254},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":67967,"toc":68246},[67968,67971,67974,67976,67978,67981,67983,68244],[11,67969,67965],{"id":67970},"ring",[15,67972,67973],{},"Annular ring (donut) with adjustable radius and band thickness",[31911,67975],{"component":67965},[23,67977,31915],{"id":26533},[31917,67979],{":props":67980},"[{\"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,67982,31923],{"id":31922},[246,67984,67985,68033,68084,68132,68182],{":tabs":1557},[212,67986,67988],{"className":334,"code":67987,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,67989,67990,67998,68005,68013,68021,68025],{"__ignoreMap":178},[220,67991,67992,67994,67996],{"class":222,"line":223},[220,67993,343],{"class":264},[220,67995,347],{"class":346},[220,67997,359],{"class":264},[220,67999,68000,68002],{"class":222,"line":179},[220,68001,364],{"class":264},[220,68003,68004],{"class":346},"Ring\n",[220,68006,68007,68009,68011],{"class":222,"line":389},[220,68008,9635],{"class":226},[220,68010,353],{"class":264},[220,68012,9591],{"class":230},[220,68014,68015,68017,68019],{"class":222,"line":399},[220,68016,17405],{"class":226},[220,68018,353],{"class":264},[220,68020,41098],{"class":230},[220,68022,68023],{"class":222,"line":644},[220,68024,1234],{"class":264},[220,68026,68027,68029,68031],{"class":222,"line":650},[220,68028,402],{"class":264},[220,68030,347],{"class":346},[220,68032,359],{"class":264},[212,68034,68036],{"className":409,"code":68035,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,68037,68038,68046,68052,68060,68072,68076],{"__ignoreMap":178},[220,68039,68040,68042,68044],{"class":222,"line":223},[220,68041,343],{"class":264},[220,68043,347],{"class":420},[220,68045,359],{"class":264},[220,68047,68048,68050],{"class":222,"line":179},[220,68049,364],{"class":264},[220,68051,68004],{"class":420},[220,68053,68054,68056,68058],{"class":222,"line":389},[220,68055,9635],{"class":226},[220,68057,353],{"class":260},[220,68059,9591],{"class":230},[220,68061,68062,68064,68066,68068,68070],{"class":222,"line":399},[220,68063,9645],{"class":226},[220,68065,353],{"class":260},[220,68067,743],{"class":264},[220,68069,22004],{"class":420},[220,68071,749],{"class":264},[220,68073,68074],{"class":222,"line":644},[220,68075,1234],{"class":264},[220,68077,68078,68080,68082],{"class":222,"line":650},[220,68079,402],{"class":264},[220,68081,347],{"class":420},[220,68083,359],{"class":264},[212,68085,68086],{"className":2844,"code":68035,"language":2846,"meta":178,"style":178},[99,68087,68088,68096,68102,68110,68120,68124],{"__ignoreMap":178},[220,68089,68090,68092,68094],{"class":222,"line":223},[220,68091,343],{"class":264},[220,68093,347],{"class":420},[220,68095,359],{"class":264},[220,68097,68098,68100],{"class":222,"line":179},[220,68099,364],{"class":264},[220,68101,68004],{"class":420},[220,68103,68104,68106,68108],{"class":222,"line":389},[220,68105,9635],{"class":226},[220,68107,353],{"class":264},[220,68109,9591],{"class":230},[220,68111,68112,68114,68116,68118],{"class":222,"line":399},[220,68113,9645],{"class":226},[220,68115,29871],{"class":264},[220,68117,22004],{"class":420},[220,68119,749],{"class":264},[220,68121,68122],{"class":222,"line":644},[220,68123,1234],{"class":264},[220,68125,68126,68128,68130],{"class":222,"line":650},[220,68127,402],{"class":264},[220,68129,347],{"class":420},[220,68131,359],{"class":264},[212,68133,68134],{"className":468,"code":68035,"language":469,"meta":178,"style":178},[99,68135,68136,68144,68150,68158,68170,68174],{"__ignoreMap":178},[220,68137,68138,68140,68142],{"class":222,"line":223},[220,68139,343],{"class":264},[220,68141,347],{"class":420},[220,68143,359],{"class":264},[220,68145,68146,68148],{"class":222,"line":179},[220,68147,364],{"class":264},[220,68149,68004],{"class":420},[220,68151,68152,68154,68156],{"class":222,"line":389},[220,68153,9635],{"class":226},[220,68155,353],{"class":260},[220,68157,9591],{"class":230},[220,68159,68160,68162,68164,68166,68168],{"class":222,"line":399},[220,68161,9645],{"class":226},[220,68163,353],{"class":260},[220,68165,743],{"class":264},[220,68167,22004],{"class":420},[220,68169,749],{"class":264},[220,68171,68172],{"class":222,"line":644},[220,68173,1234],{"class":264},[220,68175,68176,68178,68180],{"class":222,"line":650},[220,68177,402],{"class":264},[220,68179,347],{"class":420},[220,68181,359],{"class":264},[212,68183,68185],{"className":251,"code":68184,"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,68186,68187,68197,68201,68215,68219,68236,68240],{"__ignoreMap":178},[220,68188,68189,68191,68193,68195],{"class":222,"line":223},[220,68190,261],{"class":260},[220,68192,11512],{"class":264},[220,68194,268],{"class":260},[220,68196,4007],{"class":230},[220,68198,68199],{"class":222,"line":179},[220,68200,647],{"emptyLinePlaceholder":194},[220,68202,68203,68205,68207,68209,68211,68213],{"class":222,"line":389},[220,68204,1735],{"class":260},[220,68206,1738],{"class":420},[220,68208,1741],{"class":260},[220,68210,1744],{"class":260},[220,68212,1747],{"class":226},[220,68214,1750],{"class":264},[220,68216,68217],{"class":222,"line":399},[220,68218,1765],{"class":264},[220,68220,68221,68223,68226,68228,68230,68232,68234],{"class":222,"line":644},[220,68222,1770],{"class":264},[220,68224,68225],{"class":230},"'Ring'",[220,68227,1776],{"class":264},[220,68229,10169],{"class":230},[220,68231,6566],{"class":264},[220,68233,22004],{"class":420},[220,68235,1782],{"class":264},[220,68237,68238],{"class":222,"line":650},[220,68239,1787],{"class":264},[220,68241,68242],{"class":222,"line":656},[220,68243,1792],{"class":264},[1504,68245,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68247},[68248,68249],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":67965,"description":67973},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":68256,"title":68257,"body":68258,"category":33673,"componentType":25883,"description":68265,"extension":191,"meta":68526,"navigation":194,"path":68527,"requiresChild":194,"seo":68528,"stem":68529,"__hash__":68530},"components\u002Fdocs\u002Fcomponents\u002FRippleWipe.md","RippleWipe",{"type":8,"value":68259,"toc":68522},[68260,68263,68266,68268,68270,68273,68275,68520],[11,68261,68257],{"id":68262},"ripplewipe",[15,68264,68265],{},"Wipe the content away in concentric rings pulsing out from a center point",[31911,68267],{"component":68257},[23,68269,31915],{"id":26533},[31917,68271],{":props":68272},"[{\"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,68274,31923],{"id":31922},[246,68276,68277,68322,68366,68410,68454],{":tabs":1557},[212,68278,68280],{"className":334,"code":68279,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRippleWipe>\n \u003CCircle \u002F>\n \u003C\u002FRippleWipe>\n\u003C\u002FShader>\n",[99,68281,68282,68290,68298,68306,68314],{"__ignoreMap":178},[220,68283,68284,68286,68288],{"class":222,"line":223},[220,68285,343],{"class":264},[220,68287,347],{"class":346},[220,68289,359],{"class":264},[220,68291,68292,68294,68296],{"class":222,"line":179},[220,68293,364],{"class":264},[220,68295,68257],{"class":346},[220,68297,359],{"class":264},[220,68299,68300,68302,68304],{"class":222,"line":389},[220,68301,2550],{"class":264},[220,68303,2553],{"class":346},[220,68305,386],{"class":264},[220,68307,68308,68310,68312],{"class":222,"line":399},[220,68309,2567],{"class":264},[220,68311,68257],{"class":346},[220,68313,359],{"class":264},[220,68315,68316,68318,68320],{"class":222,"line":644},[220,68317,402],{"class":264},[220,68319,347],{"class":346},[220,68321,359],{"class":264},[212,68323,68324],{"className":409,"code":68279,"language":411,"meta":178,"style":178},[99,68325,68326,68334,68342,68350,68358],{"__ignoreMap":178},[220,68327,68328,68330,68332],{"class":222,"line":223},[220,68329,343],{"class":264},[220,68331,347],{"class":420},[220,68333,359],{"class":264},[220,68335,68336,68338,68340],{"class":222,"line":179},[220,68337,364],{"class":264},[220,68339,68257],{"class":420},[220,68341,359],{"class":264},[220,68343,68344,68346,68348],{"class":222,"line":389},[220,68345,2550],{"class":264},[220,68347,2553],{"class":420},[220,68349,386],{"class":264},[220,68351,68352,68354,68356],{"class":222,"line":399},[220,68353,2567],{"class":264},[220,68355,68257],{"class":420},[220,68357,359],{"class":264},[220,68359,68360,68362,68364],{"class":222,"line":644},[220,68361,402],{"class":264},[220,68363,347],{"class":420},[220,68365,359],{"class":264},[212,68367,68368],{"className":2844,"code":68279,"language":2846,"meta":178,"style":178},[99,68369,68370,68378,68386,68394,68402],{"__ignoreMap":178},[220,68371,68372,68374,68376],{"class":222,"line":223},[220,68373,343],{"class":264},[220,68375,347],{"class":420},[220,68377,359],{"class":264},[220,68379,68380,68382,68384],{"class":222,"line":179},[220,68381,364],{"class":264},[220,68383,68257],{"class":420},[220,68385,359],{"class":264},[220,68387,68388,68390,68392],{"class":222,"line":389},[220,68389,2550],{"class":264},[220,68391,2553],{"class":420},[220,68393,386],{"class":264},[220,68395,68396,68398,68400],{"class":222,"line":399},[220,68397,2567],{"class":264},[220,68399,68257],{"class":420},[220,68401,359],{"class":264},[220,68403,68404,68406,68408],{"class":222,"line":644},[220,68405,402],{"class":264},[220,68407,347],{"class":420},[220,68409,359],{"class":264},[212,68411,68412],{"className":468,"code":68279,"language":469,"meta":178,"style":178},[99,68413,68414,68422,68430,68438,68446],{"__ignoreMap":178},[220,68415,68416,68418,68420],{"class":222,"line":223},[220,68417,343],{"class":264},[220,68419,347],{"class":420},[220,68421,359],{"class":264},[220,68423,68424,68426,68428],{"class":222,"line":179},[220,68425,364],{"class":264},[220,68427,68257],{"class":420},[220,68429,359],{"class":264},[220,68431,68432,68434,68436],{"class":222,"line":389},[220,68433,2550],{"class":264},[220,68435,2553],{"class":420},[220,68437,386],{"class":264},[220,68439,68440,68442,68444],{"class":222,"line":399},[220,68441,2567],{"class":264},[220,68443,68257],{"class":420},[220,68445,359],{"class":264},[220,68447,68448,68450,68452],{"class":222,"line":644},[220,68449,402],{"class":264},[220,68451,347],{"class":420},[220,68453,359],{"class":264},[212,68455,68457],{"className":251,"code":68456,"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,68458,68459,68469,68473,68487,68491,68500,68508,68512,68516],{"__ignoreMap":178},[220,68460,68461,68463,68465,68467],{"class":222,"line":223},[220,68462,261],{"class":260},[220,68464,11512],{"class":264},[220,68466,268],{"class":260},[220,68468,4007],{"class":230},[220,68470,68471],{"class":222,"line":179},[220,68472,647],{"emptyLinePlaceholder":194},[220,68474,68475,68477,68479,68481,68483,68485],{"class":222,"line":389},[220,68476,1735],{"class":260},[220,68478,1738],{"class":420},[220,68480,1741],{"class":260},[220,68482,1744],{"class":260},[220,68484,1747],{"class":226},[220,68486,1750],{"class":264},[220,68488,68489],{"class":222,"line":399},[220,68490,1765],{"class":264},[220,68492,68493,68495,68498],{"class":222,"line":644},[220,68494,1770],{"class":264},[220,68496,68497],{"class":230},"'RippleWipe'",[220,68499,7009],{"class":264},[220,68501,68502,68504,68506],{"class":222,"line":650},[220,68503,7014],{"class":264},[220,68505,3206],{"class":230},[220,68507,2465],{"class":264},[220,68509,68510],{"class":222,"line":656},[220,68511,7031],{"class":264},[220,68513,68514],{"class":222,"line":673},[220,68515,1787],{"class":264},[220,68517,68518],{"class":222,"line":682},[220,68519,1792],{"class":264},[1504,68521,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":68523},[68524,68525],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fripplewipe",{"title":68257,"description":68265},"docs\u002Fcomponents\u002FRippleWipe","LOswGRn0XjmgHLubxtf4SiP5RFuduVhbbFC6v9OmRrU",{"id":68532,"title":68533,"body":68534,"category":33063,"componentType":25877,"description":68541,"extension":191,"meta":68726,"navigation":194,"path":68727,"requiresChild":32530,"seo":68728,"stem":68729,"__hash__":68730},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":68535,"toc":68722},[68536,68539,68542,68544,68546,68549,68551,68720],[11,68537,68533],{"id":68538},"ripples",[15,68540,68541],{},"Concentric animated ripples emanating from a point",[31911,68543],{"component":68533},[23,68545,31915],{"id":26533},[31917,68547],{":props":68548},"[{\"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,68550,31923],{"id":31922},[246,68552,68553,68582,68610,68638,68666],{":tabs":1557},[212,68554,68556],{"className":334,"code":68555,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,68557,68558,68566,68574],{"__ignoreMap":178},[220,68559,68560,68562,68564],{"class":222,"line":223},[220,68561,343],{"class":264},[220,68563,347],{"class":346},[220,68565,359],{"class":264},[220,68567,68568,68570,68572],{"class":222,"line":179},[220,68569,364],{"class":264},[220,68571,68533],{"class":346},[220,68573,386],{"class":264},[220,68575,68576,68578,68580],{"class":222,"line":389},[220,68577,402],{"class":264},[220,68579,347],{"class":346},[220,68581,359],{"class":264},[212,68583,68584],{"className":409,"code":68555,"language":411,"meta":178,"style":178},[99,68585,68586,68594,68602],{"__ignoreMap":178},[220,68587,68588,68590,68592],{"class":222,"line":223},[220,68589,343],{"class":264},[220,68591,347],{"class":420},[220,68593,359],{"class":264},[220,68595,68596,68598,68600],{"class":222,"line":179},[220,68597,364],{"class":264},[220,68599,68533],{"class":420},[220,68601,386],{"class":264},[220,68603,68604,68606,68608],{"class":222,"line":389},[220,68605,402],{"class":264},[220,68607,347],{"class":420},[220,68609,359],{"class":264},[212,68611,68612],{"className":2844,"code":68555,"language":2846,"meta":178,"style":178},[99,68613,68614,68622,68630],{"__ignoreMap":178},[220,68615,68616,68618,68620],{"class":222,"line":223},[220,68617,343],{"class":264},[220,68619,347],{"class":420},[220,68621,359],{"class":264},[220,68623,68624,68626,68628],{"class":222,"line":179},[220,68625,364],{"class":264},[220,68627,68533],{"class":420},[220,68629,386],{"class":264},[220,68631,68632,68634,68636],{"class":222,"line":389},[220,68633,402],{"class":264},[220,68635,347],{"class":420},[220,68637,359],{"class":264},[212,68639,68640],{"className":468,"code":68555,"language":469,"meta":178,"style":178},[99,68641,68642,68650,68658],{"__ignoreMap":178},[220,68643,68644,68646,68648],{"class":222,"line":223},[220,68645,343],{"class":264},[220,68647,347],{"class":420},[220,68649,359],{"class":264},[220,68651,68652,68654,68656],{"class":222,"line":179},[220,68653,364],{"class":264},[220,68655,68533],{"class":420},[220,68657,386],{"class":264},[220,68659,68660,68662,68664],{"class":222,"line":389},[220,68661,402],{"class":264},[220,68663,347],{"class":420},[220,68665,359],{"class":264},[212,68667,68669],{"className":251,"code":68668,"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,68670,68671,68681,68685,68699,68703,68712,68716],{"__ignoreMap":178},[220,68672,68673,68675,68677,68679],{"class":222,"line":223},[220,68674,261],{"class":260},[220,68676,11512],{"class":264},[220,68678,268],{"class":260},[220,68680,4007],{"class":230},[220,68682,68683],{"class":222,"line":179},[220,68684,647],{"emptyLinePlaceholder":194},[220,68686,68687,68689,68691,68693,68695,68697],{"class":222,"line":389},[220,68688,1735],{"class":260},[220,68690,1738],{"class":420},[220,68692,1741],{"class":260},[220,68694,1744],{"class":260},[220,68696,1747],{"class":226},[220,68698,1750],{"class":264},[220,68700,68701],{"class":222,"line":399},[220,68702,1765],{"class":264},[220,68704,68705,68707,68710],{"class":222,"line":644},[220,68706,1770],{"class":264},[220,68708,68709],{"class":230},"'Ripples'",[220,68711,2465],{"class":264},[220,68713,68714],{"class":222,"line":650},[220,68715,1787],{"class":264},[220,68717,68718],{"class":222,"line":656},[220,68719,1792],{"class":264},[1504,68721,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":68723},[68724,68725],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":68533,"description":68541},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":68732,"title":68733,"body":68734,"category":15908,"componentType":25877,"description":68741,"extension":191,"meta":68971,"navigation":194,"path":68972,"requiresChild":32530,"seo":68973,"stem":68974,"__hash__":68975},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":68735,"toc":68967},[68736,68739,68742,68744,68746,68749,68751,68965],[11,68737,68733],{"id":68738},"roundedrect",[15,68740,68741],{},"Rounded rectangle with adjustable width, height, and corner rounding",[31911,68743],{"component":68733},[23,68745,31915],{"id":26533},[31917,68747],{":props":68748},"[{\"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,68750,31923],{"id":31922},[246,68752,68753,68793,68831,68869,68907],{":tabs":1557},[212,68754,68756],{"className":334,"code":68755,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,68757,68758,68766,68773,68781,68785],{"__ignoreMap":178},[220,68759,68760,68762,68764],{"class":222,"line":223},[220,68761,343],{"class":264},[220,68763,347],{"class":346},[220,68765,359],{"class":264},[220,68767,68768,68770],{"class":222,"line":179},[220,68769,364],{"class":264},[220,68771,68772],{"class":346},"RoundedRect\n",[220,68774,68775,68777,68779],{"class":222,"line":389},[220,68776,9635],{"class":226},[220,68778,353],{"class":264},[220,68780,9591],{"class":230},[220,68782,68783],{"class":222,"line":399},[220,68784,1234],{"class":264},[220,68786,68787,68789,68791],{"class":222,"line":644},[220,68788,402],{"class":264},[220,68790,347],{"class":346},[220,68792,359],{"class":264},[212,68794,68795],{"className":409,"code":68755,"language":411,"meta":178,"style":178},[99,68796,68797,68805,68811,68819,68823],{"__ignoreMap":178},[220,68798,68799,68801,68803],{"class":222,"line":223},[220,68800,343],{"class":264},[220,68802,347],{"class":420},[220,68804,359],{"class":264},[220,68806,68807,68809],{"class":222,"line":179},[220,68808,364],{"class":264},[220,68810,68772],{"class":420},[220,68812,68813,68815,68817],{"class":222,"line":389},[220,68814,9635],{"class":226},[220,68816,353],{"class":260},[220,68818,9591],{"class":230},[220,68820,68821],{"class":222,"line":399},[220,68822,1234],{"class":264},[220,68824,68825,68827,68829],{"class":222,"line":644},[220,68826,402],{"class":264},[220,68828,347],{"class":420},[220,68830,359],{"class":264},[212,68832,68833],{"className":2844,"code":68755,"language":2846,"meta":178,"style":178},[99,68834,68835,68843,68849,68857,68861],{"__ignoreMap":178},[220,68836,68837,68839,68841],{"class":222,"line":223},[220,68838,343],{"class":264},[220,68840,347],{"class":420},[220,68842,359],{"class":264},[220,68844,68845,68847],{"class":222,"line":179},[220,68846,364],{"class":264},[220,68848,68772],{"class":420},[220,68850,68851,68853,68855],{"class":222,"line":389},[220,68852,9635],{"class":226},[220,68854,353],{"class":264},[220,68856,9591],{"class":230},[220,68858,68859],{"class":222,"line":399},[220,68860,1234],{"class":264},[220,68862,68863,68865,68867],{"class":222,"line":644},[220,68864,402],{"class":264},[220,68866,347],{"class":420},[220,68868,359],{"class":264},[212,68870,68871],{"className":468,"code":68755,"language":469,"meta":178,"style":178},[99,68872,68873,68881,68887,68895,68899],{"__ignoreMap":178},[220,68874,68875,68877,68879],{"class":222,"line":223},[220,68876,343],{"class":264},[220,68878,347],{"class":420},[220,68880,359],{"class":264},[220,68882,68883,68885],{"class":222,"line":179},[220,68884,364],{"class":264},[220,68886,68772],{"class":420},[220,68888,68889,68891,68893],{"class":222,"line":389},[220,68890,9635],{"class":226},[220,68892,353],{"class":260},[220,68894,9591],{"class":230},[220,68896,68897],{"class":222,"line":399},[220,68898,1234],{"class":264},[220,68900,68901,68903,68905],{"class":222,"line":644},[220,68902,402],{"class":264},[220,68904,347],{"class":420},[220,68906,359],{"class":264},[212,68908,68910],{"className":251,"code":68909,"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,68911,68912,68922,68926,68940,68944,68957,68961],{"__ignoreMap":178},[220,68913,68914,68916,68918,68920],{"class":222,"line":223},[220,68915,261],{"class":260},[220,68917,11512],{"class":264},[220,68919,268],{"class":260},[220,68921,4007],{"class":230},[220,68923,68924],{"class":222,"line":179},[220,68925,647],{"emptyLinePlaceholder":194},[220,68927,68928,68930,68932,68934,68936,68938],{"class":222,"line":389},[220,68929,1735],{"class":260},[220,68931,1738],{"class":420},[220,68933,1741],{"class":260},[220,68935,1744],{"class":260},[220,68937,1747],{"class":226},[220,68939,1750],{"class":264},[220,68941,68942],{"class":222,"line":399},[220,68943,1765],{"class":264},[220,68945,68946,68948,68951,68953,68955],{"class":222,"line":644},[220,68947,1770],{"class":264},[220,68949,68950],{"class":230},"'RoundedRect'",[220,68952,1776],{"class":264},[220,68954,10169],{"class":230},[220,68956,1782],{"class":264},[220,68958,68959],{"class":222,"line":650},[220,68960,1787],{"class":264},[220,68962,68963],{"class":222,"line":656},[220,68964,1792],{"class":264},[1504,68966,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68968},[68969,68970],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":68733,"description":68741},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":68977,"title":68978,"body":68979,"category":36368,"componentType":25883,"description":68985,"extension":191,"meta":69302,"navigation":194,"path":69303,"requiresChild":194,"seo":69304,"stem":69305,"__hash__":69306},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":68980,"toc":69298},[68981,68983,68986,68988,68990,68993,68995,69296],[11,68982,68978],{"id":8059},[15,68984,68985],{},"Adjust color saturation intensity",[31911,68987],{"component":68978},[23,68989,31915],{"id":26533},[31917,68991],{":props":68992},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,68994,31923],{"id":31922},[246,68996,68997,69053,69112,69168,69226],{":tabs":1557},[212,68998,69000],{"className":334,"code":68999,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,69001,69002,69010,69017,69025,69029,69037,69045],{"__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],{"class":222,"line":179},[220,69013,364],{"class":264},[220,69015,69016],{"class":346},"Saturation\n",[220,69018,69019,69021,69023],{"class":222,"line":389},[220,69020,20371],{"class":226},[220,69022,353],{"class":264},[220,69024,36625],{"class":230},[220,69026,69027],{"class":222,"line":399},[220,69028,31959],{"class":264},[220,69030,69031,69033,69035],{"class":222,"line":644},[220,69032,2550],{"class":264},[220,69034,2553],{"class":346},[220,69036,386],{"class":264},[220,69038,69039,69041,69043],{"class":222,"line":650},[220,69040,2567],{"class":264},[220,69042,68978],{"class":346},[220,69044,359],{"class":264},[220,69046,69047,69049,69051],{"class":222,"line":656},[220,69048,402],{"class":264},[220,69050,347],{"class":346},[220,69052,359],{"class":264},[212,69054,69056],{"className":409,"code":69055,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,69057,69058,69066,69072,69084,69088,69096,69104],{"__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],{"class":222,"line":179},[220,69069,364],{"class":264},[220,69071,69016],{"class":420},[220,69073,69074,69076,69078,69080,69082],{"class":222,"line":389},[220,69075,20482],{"class":226},[220,69077,353],{"class":260},[220,69079,743],{"class":264},[220,69081,8677],{"class":420},[220,69083,749],{"class":264},[220,69085,69086],{"class":222,"line":399},[220,69087,31959],{"class":264},[220,69089,69090,69092,69094],{"class":222,"line":644},[220,69091,2550],{"class":264},[220,69093,2553],{"class":420},[220,69095,386],{"class":264},[220,69097,69098,69100,69102],{"class":222,"line":650},[220,69099,2567],{"class":264},[220,69101,68978],{"class":420},[220,69103,359],{"class":264},[220,69105,69106,69108,69110],{"class":222,"line":656},[220,69107,402],{"class":264},[220,69109,347],{"class":420},[220,69111,359],{"class":264},[212,69113,69114],{"className":2844,"code":69055,"language":2846,"meta":178,"style":178},[99,69115,69116,69124,69130,69140,69144,69152,69160],{"__ignoreMap":178},[220,69117,69118,69120,69122],{"class":222,"line":223},[220,69119,343],{"class":264},[220,69121,347],{"class":420},[220,69123,359],{"class":264},[220,69125,69126,69128],{"class":222,"line":179},[220,69127,364],{"class":264},[220,69129,69016],{"class":420},[220,69131,69132,69134,69136,69138],{"class":222,"line":389},[220,69133,20482],{"class":226},[220,69135,29871],{"class":264},[220,69137,8677],{"class":420},[220,69139,749],{"class":264},[220,69141,69142],{"class":222,"line":399},[220,69143,31959],{"class":264},[220,69145,69146,69148,69150],{"class":222,"line":644},[220,69147,2550],{"class":264},[220,69149,2553],{"class":420},[220,69151,386],{"class":264},[220,69153,69154,69156,69158],{"class":222,"line":650},[220,69155,2567],{"class":264},[220,69157,68978],{"class":420},[220,69159,359],{"class":264},[220,69161,69162,69164,69166],{"class":222,"line":656},[220,69163,402],{"class":264},[220,69165,347],{"class":420},[220,69167,359],{"class":264},[212,69169,69170],{"className":468,"code":69055,"language":469,"meta":178,"style":178},[99,69171,69172,69180,69186,69198,69202,69210,69218],{"__ignoreMap":178},[220,69173,69174,69176,69178],{"class":222,"line":223},[220,69175,343],{"class":264},[220,69177,347],{"class":420},[220,69179,359],{"class":264},[220,69181,69182,69184],{"class":222,"line":179},[220,69183,364],{"class":264},[220,69185,69016],{"class":420},[220,69187,69188,69190,69192,69194,69196],{"class":222,"line":389},[220,69189,20482],{"class":226},[220,69191,353],{"class":260},[220,69193,743],{"class":264},[220,69195,8677],{"class":420},[220,69197,749],{"class":264},[220,69199,69200],{"class":222,"line":399},[220,69201,31959],{"class":264},[220,69203,69204,69206,69208],{"class":222,"line":644},[220,69205,2550],{"class":264},[220,69207,2553],{"class":420},[220,69209,386],{"class":264},[220,69211,69212,69214,69216],{"class":222,"line":650},[220,69213,2567],{"class":264},[220,69215,68978],{"class":420},[220,69217,359],{"class":264},[220,69219,69220,69222,69224],{"class":222,"line":656},[220,69221,402],{"class":264},[220,69223,347],{"class":420},[220,69225,359],{"class":264},[212,69227,69229],{"className":251,"code":69228,"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,69230,69231,69241,69245,69259,69263,69276,69284,69288,69292],{"__ignoreMap":178},[220,69232,69233,69235,69237,69239],{"class":222,"line":223},[220,69234,261],{"class":260},[220,69236,11512],{"class":264},[220,69238,268],{"class":260},[220,69240,4007],{"class":230},[220,69242,69243],{"class":222,"line":179},[220,69244,647],{"emptyLinePlaceholder":194},[220,69246,69247,69249,69251,69253,69255,69257],{"class":222,"line":389},[220,69248,1735],{"class":260},[220,69250,1738],{"class":420},[220,69252,1741],{"class":260},[220,69254,1744],{"class":260},[220,69256,1747],{"class":226},[220,69258,1750],{"class":264},[220,69260,69261],{"class":222,"line":399},[220,69262,1765],{"class":264},[220,69264,69265,69267,69270,69272,69274],{"class":222,"line":644},[220,69266,1770],{"class":264},[220,69268,69269],{"class":230},"'Saturation'",[220,69271,32203],{"class":264},[220,69273,8677],{"class":420},[220,69275,7546],{"class":264},[220,69277,69278,69280,69282],{"class":222,"line":650},[220,69279,7014],{"class":264},[220,69281,3206],{"class":230},[220,69283,2465],{"class":264},[220,69285,69286],{"class":222,"line":656},[220,69287,7031],{"class":264},[220,69289,69290],{"class":222,"line":673},[220,69291,1787],{"class":264},[220,69293,69294],{"class":222,"line":682},[220,69295,1792],{"class":264},[1504,69297,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69299},[69300,69301],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":68978,"description":68985},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":69308,"title":69309,"body":69310,"category":33063,"componentType":25877,"description":69317,"extension":191,"meta":69502,"navigation":194,"path":69503,"requiresChild":32530,"seo":69504,"stem":69505,"__hash__":69506},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":69311,"toc":69498},[69312,69315,69318,69320,69322,69325,69327,69496],[11,69313,69309],{"id":69314},"scratches",[15,69316,69317],{},"Fine hairline scratches, like a worn film or scratched surface",[31911,69319],{"component":69309},[23,69321,31915],{"id":26533},[31917,69323],{":props":69324},"[{\"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,69326,31923],{"id":31922},[246,69328,69329,69358,69386,69414,69442],{":tabs":1557},[212,69330,69332],{"className":334,"code":69331,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,69333,69334,69342,69350],{"__ignoreMap":178},[220,69335,69336,69338,69340],{"class":222,"line":223},[220,69337,343],{"class":264},[220,69339,347],{"class":346},[220,69341,359],{"class":264},[220,69343,69344,69346,69348],{"class":222,"line":179},[220,69345,364],{"class":264},[220,69347,69309],{"class":346},[220,69349,386],{"class":264},[220,69351,69352,69354,69356],{"class":222,"line":389},[220,69353,402],{"class":264},[220,69355,347],{"class":346},[220,69357,359],{"class":264},[212,69359,69360],{"className":409,"code":69331,"language":411,"meta":178,"style":178},[99,69361,69362,69370,69378],{"__ignoreMap":178},[220,69363,69364,69366,69368],{"class":222,"line":223},[220,69365,343],{"class":264},[220,69367,347],{"class":420},[220,69369,359],{"class":264},[220,69371,69372,69374,69376],{"class":222,"line":179},[220,69373,364],{"class":264},[220,69375,69309],{"class":420},[220,69377,386],{"class":264},[220,69379,69380,69382,69384],{"class":222,"line":389},[220,69381,402],{"class":264},[220,69383,347],{"class":420},[220,69385,359],{"class":264},[212,69387,69388],{"className":2844,"code":69331,"language":2846,"meta":178,"style":178},[99,69389,69390,69398,69406],{"__ignoreMap":178},[220,69391,69392,69394,69396],{"class":222,"line":223},[220,69393,343],{"class":264},[220,69395,347],{"class":420},[220,69397,359],{"class":264},[220,69399,69400,69402,69404],{"class":222,"line":179},[220,69401,364],{"class":264},[220,69403,69309],{"class":420},[220,69405,386],{"class":264},[220,69407,69408,69410,69412],{"class":222,"line":389},[220,69409,402],{"class":264},[220,69411,347],{"class":420},[220,69413,359],{"class":264},[212,69415,69416],{"className":468,"code":69331,"language":469,"meta":178,"style":178},[99,69417,69418,69426,69434],{"__ignoreMap":178},[220,69419,69420,69422,69424],{"class":222,"line":223},[220,69421,343],{"class":264},[220,69423,347],{"class":420},[220,69425,359],{"class":264},[220,69427,69428,69430,69432],{"class":222,"line":179},[220,69429,364],{"class":264},[220,69431,69309],{"class":420},[220,69433,386],{"class":264},[220,69435,69436,69438,69440],{"class":222,"line":389},[220,69437,402],{"class":264},[220,69439,347],{"class":420},[220,69441,359],{"class":264},[212,69443,69445],{"className":251,"code":69444,"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,69446,69447,69457,69461,69475,69479,69488,69492],{"__ignoreMap":178},[220,69448,69449,69451,69453,69455],{"class":222,"line":223},[220,69450,261],{"class":260},[220,69452,11512],{"class":264},[220,69454,268],{"class":260},[220,69456,4007],{"class":230},[220,69458,69459],{"class":222,"line":179},[220,69460,647],{"emptyLinePlaceholder":194},[220,69462,69463,69465,69467,69469,69471,69473],{"class":222,"line":389},[220,69464,1735],{"class":260},[220,69466,1738],{"class":420},[220,69468,1741],{"class":260},[220,69470,1744],{"class":260},[220,69472,1747],{"class":226},[220,69474,1750],{"class":264},[220,69476,69477],{"class":222,"line":399},[220,69478,1765],{"class":264},[220,69480,69481,69483,69486],{"class":222,"line":644},[220,69482,1770],{"class":264},[220,69484,69485],{"class":230},"'Scratches'",[220,69487,2465],{"class":264},[220,69489,69490],{"class":222,"line":650},[220,69491,1787],{"class":264},[220,69493,69494],{"class":222,"line":656},[220,69495,1792],{"class":264},[1504,69497,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":69499},[69500,69501],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":69309,"description":69317},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":69508,"title":69509,"body":69510,"category":36368,"componentType":25883,"description":69517,"extension":191,"meta":69778,"navigation":194,"path":69779,"requiresChild":194,"seo":69780,"stem":69781,"__hash__":69782},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":69511,"toc":69774},[69512,69515,69518,69520,69522,69525,69527,69772],[11,69513,69509],{"id":69514},"sharpness",[15,69516,69517],{},"Adjust image sharpness using a convolution kernel",[31911,69519],{"component":69509},[23,69521,31915],{"id":26533},[31917,69523],{":props":69524},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,69526,31923],{"id":31922},[246,69528,69529,69574,69618,69662,69706],{":tabs":1557},[212,69530,69532],{"className":334,"code":69531,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,69533,69534,69542,69550,69558,69566],{"__ignoreMap":178},[220,69535,69536,69538,69540],{"class":222,"line":223},[220,69537,343],{"class":264},[220,69539,347],{"class":346},[220,69541,359],{"class":264},[220,69543,69544,69546,69548],{"class":222,"line":179},[220,69545,364],{"class":264},[220,69547,69509],{"class":346},[220,69549,359],{"class":264},[220,69551,69552,69554,69556],{"class":222,"line":389},[220,69553,2550],{"class":264},[220,69555,2553],{"class":346},[220,69557,386],{"class":264},[220,69559,69560,69562,69564],{"class":222,"line":399},[220,69561,2567],{"class":264},[220,69563,69509],{"class":346},[220,69565,359],{"class":264},[220,69567,69568,69570,69572],{"class":222,"line":644},[220,69569,402],{"class":264},[220,69571,347],{"class":346},[220,69573,359],{"class":264},[212,69575,69576],{"className":409,"code":69531,"language":411,"meta":178,"style":178},[99,69577,69578,69586,69594,69602,69610],{"__ignoreMap":178},[220,69579,69580,69582,69584],{"class":222,"line":223},[220,69581,343],{"class":264},[220,69583,347],{"class":420},[220,69585,359],{"class":264},[220,69587,69588,69590,69592],{"class":222,"line":179},[220,69589,364],{"class":264},[220,69591,69509],{"class":420},[220,69593,359],{"class":264},[220,69595,69596,69598,69600],{"class":222,"line":389},[220,69597,2550],{"class":264},[220,69599,2553],{"class":420},[220,69601,386],{"class":264},[220,69603,69604,69606,69608],{"class":222,"line":399},[220,69605,2567],{"class":264},[220,69607,69509],{"class":420},[220,69609,359],{"class":264},[220,69611,69612,69614,69616],{"class":222,"line":644},[220,69613,402],{"class":264},[220,69615,347],{"class":420},[220,69617,359],{"class":264},[212,69619,69620],{"className":2844,"code":69531,"language":2846,"meta":178,"style":178},[99,69621,69622,69630,69638,69646,69654],{"__ignoreMap":178},[220,69623,69624,69626,69628],{"class":222,"line":223},[220,69625,343],{"class":264},[220,69627,347],{"class":420},[220,69629,359],{"class":264},[220,69631,69632,69634,69636],{"class":222,"line":179},[220,69633,364],{"class":264},[220,69635,69509],{"class":420},[220,69637,359],{"class":264},[220,69639,69640,69642,69644],{"class":222,"line":389},[220,69641,2550],{"class":264},[220,69643,2553],{"class":420},[220,69645,386],{"class":264},[220,69647,69648,69650,69652],{"class":222,"line":399},[220,69649,2567],{"class":264},[220,69651,69509],{"class":420},[220,69653,359],{"class":264},[220,69655,69656,69658,69660],{"class":222,"line":644},[220,69657,402],{"class":264},[220,69659,347],{"class":420},[220,69661,359],{"class":264},[212,69663,69664],{"className":468,"code":69531,"language":469,"meta":178,"style":178},[99,69665,69666,69674,69682,69690,69698],{"__ignoreMap":178},[220,69667,69668,69670,69672],{"class":222,"line":223},[220,69669,343],{"class":264},[220,69671,347],{"class":420},[220,69673,359],{"class":264},[220,69675,69676,69678,69680],{"class":222,"line":179},[220,69677,364],{"class":264},[220,69679,69509],{"class":420},[220,69681,359],{"class":264},[220,69683,69684,69686,69688],{"class":222,"line":389},[220,69685,2550],{"class":264},[220,69687,2553],{"class":420},[220,69689,386],{"class":264},[220,69691,69692,69694,69696],{"class":222,"line":399},[220,69693,2567],{"class":264},[220,69695,69509],{"class":420},[220,69697,359],{"class":264},[220,69699,69700,69702,69704],{"class":222,"line":644},[220,69701,402],{"class":264},[220,69703,347],{"class":420},[220,69705,359],{"class":264},[212,69707,69709],{"className":251,"code":69708,"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,69710,69711,69721,69725,69739,69743,69752,69760,69764,69768],{"__ignoreMap":178},[220,69712,69713,69715,69717,69719],{"class":222,"line":223},[220,69714,261],{"class":260},[220,69716,11512],{"class":264},[220,69718,268],{"class":260},[220,69720,4007],{"class":230},[220,69722,69723],{"class":222,"line":179},[220,69724,647],{"emptyLinePlaceholder":194},[220,69726,69727,69729,69731,69733,69735,69737],{"class":222,"line":389},[220,69728,1735],{"class":260},[220,69730,1738],{"class":420},[220,69732,1741],{"class":260},[220,69734,1744],{"class":260},[220,69736,1747],{"class":226},[220,69738,1750],{"class":264},[220,69740,69741],{"class":222,"line":399},[220,69742,1765],{"class":264},[220,69744,69745,69747,69750],{"class":222,"line":644},[220,69746,1770],{"class":264},[220,69748,69749],{"class":230},"'Sharpness'",[220,69751,7009],{"class":264},[220,69753,69754,69756,69758],{"class":222,"line":650},[220,69755,7014],{"class":264},[220,69757,3206],{"class":230},[220,69759,2465],{"class":264},[220,69761,69762],{"class":222,"line":656},[220,69763,7031],{"class":264},[220,69765,69766],{"class":222,"line":673},[220,69767,1787],{"class":264},[220,69769,69770],{"class":222,"line":682},[220,69771,1792],{"class":264},[1504,69773,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":69775},[69776,69777],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":69509,"description":69517},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":69784,"title":69785,"body":69786,"category":35559,"componentType":25883,"description":69793,"extension":191,"meta":70158,"navigation":194,"path":70159,"requiresChild":194,"seo":70160,"stem":70161,"__hash__":70162},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":69787,"toc":70154},[69788,69791,69794,69796,69798,69801,69803,70152],[11,69789,69785],{"id":69790},"shatter",[15,69792,69793],{},"Broken glass effect with tectonic plate displacement",[31911,69795],{"component":69785},[23,69797,31915],{"id":26533},[31917,69799],{":props":69800},"[{\"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,69802,31923],{"id":31922},[246,69804,69805,69870,69942,70008,70078],{":tabs":1557},[212,69806,69808],{"className":334,"code":69807,"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,69809,69810,69818,69825,69834,69842,69846,69854,69862],{"__ignoreMap":178},[220,69811,69812,69814,69816],{"class":222,"line":223},[220,69813,343],{"class":264},[220,69815,347],{"class":346},[220,69817,359],{"class":264},[220,69819,69820,69822],{"class":222,"line":179},[220,69821,364],{"class":264},[220,69823,69824],{"class":346},"Shatter\n",[220,69826,69827,69829,69831],{"class":222,"line":389},[220,69828,20371],{"class":226},[220,69830,353],{"class":264},[220,69832,69833],{"class":230},"\"4\"\n",[220,69835,69836,69838,69840],{"class":222,"line":399},[220,69837,17405],{"class":226},[220,69839,353],{"class":264},[220,69841,48148],{"class":230},[220,69843,69844],{"class":222,"line":644},[220,69845,31959],{"class":264},[220,69847,69848,69850,69852],{"class":222,"line":650},[220,69849,2550],{"class":264},[220,69851,2553],{"class":346},[220,69853,386],{"class":264},[220,69855,69856,69858,69860],{"class":222,"line":656},[220,69857,2567],{"class":264},[220,69859,69785],{"class":346},[220,69861,359],{"class":264},[220,69863,69864,69866,69868],{"class":222,"line":673},[220,69865,402],{"class":264},[220,69867,347],{"class":346},[220,69869,359],{"class":264},[212,69871,69873],{"className":409,"code":69872,"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,69874,69875,69883,69889,69902,69914,69918,69926,69934],{"__ignoreMap":178},[220,69876,69877,69879,69881],{"class":222,"line":223},[220,69878,343],{"class":264},[220,69880,347],{"class":420},[220,69882,359],{"class":264},[220,69884,69885,69887],{"class":222,"line":179},[220,69886,364],{"class":264},[220,69888,69824],{"class":420},[220,69890,69891,69893,69895,69897,69900],{"class":222,"line":389},[220,69892,20482],{"class":226},[220,69894,353],{"class":260},[220,69896,743],{"class":264},[220,69898,69899],{"class":420},"4",[220,69901,749],{"class":264},[220,69903,69904,69906,69908,69910,69912],{"class":222,"line":399},[220,69905,9645],{"class":226},[220,69907,353],{"class":260},[220,69909,743],{"class":264},[220,69911,8249],{"class":420},[220,69913,749],{"class":264},[220,69915,69916],{"class":222,"line":644},[220,69917,31959],{"class":264},[220,69919,69920,69922,69924],{"class":222,"line":650},[220,69921,2550],{"class":264},[220,69923,2553],{"class":420},[220,69925,386],{"class":264},[220,69927,69928,69930,69932],{"class":222,"line":656},[220,69929,2567],{"class":264},[220,69931,69785],{"class":420},[220,69933,359],{"class":264},[220,69935,69936,69938,69940],{"class":222,"line":673},[220,69937,402],{"class":264},[220,69939,347],{"class":420},[220,69941,359],{"class":264},[212,69943,69944],{"className":2844,"code":69872,"language":2846,"meta":178,"style":178},[99,69945,69946,69954,69960,69970,69980,69984,69992,70000],{"__ignoreMap":178},[220,69947,69948,69950,69952],{"class":222,"line":223},[220,69949,343],{"class":264},[220,69951,347],{"class":420},[220,69953,359],{"class":264},[220,69955,69956,69958],{"class":222,"line":179},[220,69957,364],{"class":264},[220,69959,69824],{"class":420},[220,69961,69962,69964,69966,69968],{"class":222,"line":389},[220,69963,20482],{"class":226},[220,69965,29871],{"class":264},[220,69967,69899],{"class":420},[220,69969,749],{"class":264},[220,69971,69972,69974,69976,69978],{"class":222,"line":399},[220,69973,9645],{"class":226},[220,69975,29871],{"class":264},[220,69977,8249],{"class":420},[220,69979,749],{"class":264},[220,69981,69982],{"class":222,"line":644},[220,69983,31959],{"class":264},[220,69985,69986,69988,69990],{"class":222,"line":650},[220,69987,2550],{"class":264},[220,69989,2553],{"class":420},[220,69991,386],{"class":264},[220,69993,69994,69996,69998],{"class":222,"line":656},[220,69995,2567],{"class":264},[220,69997,69785],{"class":420},[220,69999,359],{"class":264},[220,70001,70002,70004,70006],{"class":222,"line":673},[220,70003,402],{"class":264},[220,70005,347],{"class":420},[220,70007,359],{"class":264},[212,70009,70010],{"className":468,"code":69872,"language":469,"meta":178,"style":178},[99,70011,70012,70020,70026,70038,70050,70054,70062,70070],{"__ignoreMap":178},[220,70013,70014,70016,70018],{"class":222,"line":223},[220,70015,343],{"class":264},[220,70017,347],{"class":420},[220,70019,359],{"class":264},[220,70021,70022,70024],{"class":222,"line":179},[220,70023,364],{"class":264},[220,70025,69824],{"class":420},[220,70027,70028,70030,70032,70034,70036],{"class":222,"line":389},[220,70029,20482],{"class":226},[220,70031,353],{"class":260},[220,70033,743],{"class":264},[220,70035,69899],{"class":420},[220,70037,749],{"class":264},[220,70039,70040,70042,70044,70046,70048],{"class":222,"line":399},[220,70041,9645],{"class":226},[220,70043,353],{"class":260},[220,70045,743],{"class":264},[220,70047,8249],{"class":420},[220,70049,749],{"class":264},[220,70051,70052],{"class":222,"line":644},[220,70053,31959],{"class":264},[220,70055,70056,70058,70060],{"class":222,"line":650},[220,70057,2550],{"class":264},[220,70059,2553],{"class":420},[220,70061,386],{"class":264},[220,70063,70064,70066,70068],{"class":222,"line":656},[220,70065,2567],{"class":264},[220,70067,69785],{"class":420},[220,70069,359],{"class":264},[220,70071,70072,70074,70076],{"class":222,"line":673},[220,70073,402],{"class":264},[220,70075,347],{"class":420},[220,70077,359],{"class":264},[212,70079,70081],{"className":251,"code":70080,"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,70082,70083,70093,70097,70111,70115,70132,70140,70144,70148],{"__ignoreMap":178},[220,70084,70085,70087,70089,70091],{"class":222,"line":223},[220,70086,261],{"class":260},[220,70088,11512],{"class":264},[220,70090,268],{"class":260},[220,70092,4007],{"class":230},[220,70094,70095],{"class":222,"line":179},[220,70096,647],{"emptyLinePlaceholder":194},[220,70098,70099,70101,70103,70105,70107,70109],{"class":222,"line":389},[220,70100,1735],{"class":260},[220,70102,1738],{"class":420},[220,70104,1741],{"class":260},[220,70106,1744],{"class":260},[220,70108,1747],{"class":226},[220,70110,1750],{"class":264},[220,70112,70113],{"class":222,"line":399},[220,70114,1765],{"class":264},[220,70116,70117,70119,70122,70124,70126,70128,70130],{"class":222,"line":644},[220,70118,1770],{"class":264},[220,70120,70121],{"class":230},"'Shatter'",[220,70123,32203],{"class":264},[220,70125,69899],{"class":420},[220,70127,6566],{"class":264},[220,70129,8249],{"class":420},[220,70131,7546],{"class":264},[220,70133,70134,70136,70138],{"class":222,"line":650},[220,70135,7014],{"class":264},[220,70137,3206],{"class":230},[220,70139,2465],{"class":264},[220,70141,70142],{"class":222,"line":656},[220,70143,7031],{"class":264},[220,70145,70146],{"class":222,"line":673},[220,70147,1787],{"class":264},[220,70149,70150],{"class":222,"line":682},[220,70151,1792],{"class":264},[1504,70153,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70155},[70156,70157],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":69785,"description":69793},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":70164,"title":70165,"body":70166,"category":33063,"componentType":25877,"description":70173,"extension":191,"meta":70358,"navigation":194,"path":70359,"requiresChild":32530,"seo":70360,"stem":70361,"__hash__":70362},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":70167,"toc":70354},[70168,70171,70174,70176,70178,70181,70183,70352],[11,70169,70165],{"id":70170},"simplexnoise",[15,70172,70173],{},"Organic noise with animated movement",[31911,70175],{"component":70165},[23,70177,31915],{"id":26533},[31917,70179],{":props":70180},"[{\"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,70182,31923],{"id":31922},[246,70184,70185,70214,70242,70270,70298],{":tabs":1557},[212,70186,70188],{"className":334,"code":70187,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,70189,70190,70198,70206],{"__ignoreMap":178},[220,70191,70192,70194,70196],{"class":222,"line":223},[220,70193,343],{"class":264},[220,70195,347],{"class":346},[220,70197,359],{"class":264},[220,70199,70200,70202,70204],{"class":222,"line":179},[220,70201,364],{"class":264},[220,70203,70165],{"class":346},[220,70205,386],{"class":264},[220,70207,70208,70210,70212],{"class":222,"line":389},[220,70209,402],{"class":264},[220,70211,347],{"class":346},[220,70213,359],{"class":264},[212,70215,70216],{"className":409,"code":70187,"language":411,"meta":178,"style":178},[99,70217,70218,70226,70234],{"__ignoreMap":178},[220,70219,70220,70222,70224],{"class":222,"line":223},[220,70221,343],{"class":264},[220,70223,347],{"class":420},[220,70225,359],{"class":264},[220,70227,70228,70230,70232],{"class":222,"line":179},[220,70229,364],{"class":264},[220,70231,70165],{"class":420},[220,70233,386],{"class":264},[220,70235,70236,70238,70240],{"class":222,"line":389},[220,70237,402],{"class":264},[220,70239,347],{"class":420},[220,70241,359],{"class":264},[212,70243,70244],{"className":2844,"code":70187,"language":2846,"meta":178,"style":178},[99,70245,70246,70254,70262],{"__ignoreMap":178},[220,70247,70248,70250,70252],{"class":222,"line":223},[220,70249,343],{"class":264},[220,70251,347],{"class":420},[220,70253,359],{"class":264},[220,70255,70256,70258,70260],{"class":222,"line":179},[220,70257,364],{"class":264},[220,70259,70165],{"class":420},[220,70261,386],{"class":264},[220,70263,70264,70266,70268],{"class":222,"line":389},[220,70265,402],{"class":264},[220,70267,347],{"class":420},[220,70269,359],{"class":264},[212,70271,70272],{"className":468,"code":70187,"language":469,"meta":178,"style":178},[99,70273,70274,70282,70290],{"__ignoreMap":178},[220,70275,70276,70278,70280],{"class":222,"line":223},[220,70277,343],{"class":264},[220,70279,347],{"class":420},[220,70281,359],{"class":264},[220,70283,70284,70286,70288],{"class":222,"line":179},[220,70285,364],{"class":264},[220,70287,70165],{"class":420},[220,70289,386],{"class":264},[220,70291,70292,70294,70296],{"class":222,"line":389},[220,70293,402],{"class":264},[220,70295,347],{"class":420},[220,70297,359],{"class":264},[212,70299,70301],{"className":251,"code":70300,"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,70302,70303,70313,70317,70331,70335,70344,70348],{"__ignoreMap":178},[220,70304,70305,70307,70309,70311],{"class":222,"line":223},[220,70306,261],{"class":260},[220,70308,11512],{"class":264},[220,70310,268],{"class":260},[220,70312,4007],{"class":230},[220,70314,70315],{"class":222,"line":179},[220,70316,647],{"emptyLinePlaceholder":194},[220,70318,70319,70321,70323,70325,70327,70329],{"class":222,"line":389},[220,70320,1735],{"class":260},[220,70322,1738],{"class":420},[220,70324,1741],{"class":260},[220,70326,1744],{"class":260},[220,70328,1747],{"class":226},[220,70330,1750],{"class":264},[220,70332,70333],{"class":222,"line":399},[220,70334,1765],{"class":264},[220,70336,70337,70339,70342],{"class":222,"line":644},[220,70338,1770],{"class":264},[220,70340,70341],{"class":230},"'SimplexNoise'",[220,70343,2465],{"class":264},[220,70345,70346],{"class":222,"line":650},[220,70347,1787],{"class":264},[220,70349,70350],{"class":222,"line":656},[220,70351,1792],{"class":264},[1504,70353,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":70355},[70356,70357],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":70165,"description":70173},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":70364,"title":70365,"body":70366,"category":33063,"componentType":25877,"description":70373,"extension":191,"meta":70603,"navigation":194,"path":70604,"requiresChild":32530,"seo":70605,"stem":70606,"__hash__":70607},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":70367,"toc":70599},[70368,70371,70374,70376,70378,70381,70383,70597],[11,70369,70365],{"id":70370},"sinewave",[15,70372,70373],{},"Animated wave with thickness and softness",[31911,70375],{"component":70365},[23,70377,31915],{"id":26533},[31917,70379],{":props":70380},"[{\"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,70382,31923],{"id":31922},[246,70384,70385,70425,70463,70501,70539],{":tabs":1557},[212,70386,70388],{"className":334,"code":70387,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,70389,70390,70398,70405,70413,70417],{"__ignoreMap":178},[220,70391,70392,70394,70396],{"class":222,"line":223},[220,70393,343],{"class":264},[220,70395,347],{"class":346},[220,70397,359],{"class":264},[220,70399,70400,70402],{"class":222,"line":179},[220,70401,364],{"class":264},[220,70403,70404],{"class":346},"SineWave\n",[220,70406,70407,70409,70411],{"class":222,"line":389},[220,70408,9635],{"class":226},[220,70410,353],{"class":264},[220,70412,9591],{"class":230},[220,70414,70415],{"class":222,"line":399},[220,70416,1234],{"class":264},[220,70418,70419,70421,70423],{"class":222,"line":644},[220,70420,402],{"class":264},[220,70422,347],{"class":346},[220,70424,359],{"class":264},[212,70426,70427],{"className":409,"code":70387,"language":411,"meta":178,"style":178},[99,70428,70429,70437,70443,70451,70455],{"__ignoreMap":178},[220,70430,70431,70433,70435],{"class":222,"line":223},[220,70432,343],{"class":264},[220,70434,347],{"class":420},[220,70436,359],{"class":264},[220,70438,70439,70441],{"class":222,"line":179},[220,70440,364],{"class":264},[220,70442,70404],{"class":420},[220,70444,70445,70447,70449],{"class":222,"line":389},[220,70446,9635],{"class":226},[220,70448,353],{"class":260},[220,70450,9591],{"class":230},[220,70452,70453],{"class":222,"line":399},[220,70454,1234],{"class":264},[220,70456,70457,70459,70461],{"class":222,"line":644},[220,70458,402],{"class":264},[220,70460,347],{"class":420},[220,70462,359],{"class":264},[212,70464,70465],{"className":2844,"code":70387,"language":2846,"meta":178,"style":178},[99,70466,70467,70475,70481,70489,70493],{"__ignoreMap":178},[220,70468,70469,70471,70473],{"class":222,"line":223},[220,70470,343],{"class":264},[220,70472,347],{"class":420},[220,70474,359],{"class":264},[220,70476,70477,70479],{"class":222,"line":179},[220,70478,364],{"class":264},[220,70480,70404],{"class":420},[220,70482,70483,70485,70487],{"class":222,"line":389},[220,70484,9635],{"class":226},[220,70486,353],{"class":264},[220,70488,9591],{"class":230},[220,70490,70491],{"class":222,"line":399},[220,70492,1234],{"class":264},[220,70494,70495,70497,70499],{"class":222,"line":644},[220,70496,402],{"class":264},[220,70498,347],{"class":420},[220,70500,359],{"class":264},[212,70502,70503],{"className":468,"code":70387,"language":469,"meta":178,"style":178},[99,70504,70505,70513,70519,70527,70531],{"__ignoreMap":178},[220,70506,70507,70509,70511],{"class":222,"line":223},[220,70508,343],{"class":264},[220,70510,347],{"class":420},[220,70512,359],{"class":264},[220,70514,70515,70517],{"class":222,"line":179},[220,70516,364],{"class":264},[220,70518,70404],{"class":420},[220,70520,70521,70523,70525],{"class":222,"line":389},[220,70522,9635],{"class":226},[220,70524,353],{"class":260},[220,70526,9591],{"class":230},[220,70528,70529],{"class":222,"line":399},[220,70530,1234],{"class":264},[220,70532,70533,70535,70537],{"class":222,"line":644},[220,70534,402],{"class":264},[220,70536,347],{"class":420},[220,70538,359],{"class":264},[212,70540,70542],{"className":251,"code":70541,"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,70543,70544,70554,70558,70572,70576,70589,70593],{"__ignoreMap":178},[220,70545,70546,70548,70550,70552],{"class":222,"line":223},[220,70547,261],{"class":260},[220,70549,11512],{"class":264},[220,70551,268],{"class":260},[220,70553,4007],{"class":230},[220,70555,70556],{"class":222,"line":179},[220,70557,647],{"emptyLinePlaceholder":194},[220,70559,70560,70562,70564,70566,70568,70570],{"class":222,"line":389},[220,70561,1735],{"class":260},[220,70563,1738],{"class":420},[220,70565,1741],{"class":260},[220,70567,1744],{"class":260},[220,70569,1747],{"class":226},[220,70571,1750],{"class":264},[220,70573,70574],{"class":222,"line":399},[220,70575,1765],{"class":264},[220,70577,70578,70580,70583,70585,70587],{"class":222,"line":644},[220,70579,1770],{"class":264},[220,70581,70582],{"class":230},"'SineWave'",[220,70584,1776],{"class":264},[220,70586,10169],{"class":230},[220,70588,1782],{"class":264},[220,70590,70591],{"class":222,"line":650},[220,70592,1787],{"class":264},[220,70594,70595],{"class":222,"line":656},[220,70596,1792],{"class":264},[1504,70598,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70600},[70601,70602],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":70365,"description":70373},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":70609,"title":70610,"body":70611,"category":33673,"componentType":25883,"description":70618,"extension":191,"meta":70879,"navigation":194,"path":70880,"requiresChild":194,"seo":70881,"stem":70882,"__hash__":70883},"components\u002Fdocs\u002Fcomponents\u002FSliceWipe.md","SliceWipe",{"type":8,"value":70612,"toc":70875},[70613,70616,70619,70621,70623,70626,70628,70873],[11,70614,70610],{"id":70615},"slicewipe",[15,70617,70618],{},"Slice the content into strips that slide away in alternating directions",[31911,70620],{"component":70610},[23,70622,31915],{"id":26533},[31917,70624],{":props":70625},"[{\"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,70627,31923],{"id":31922},[246,70629,70630,70675,70719,70763,70807],{":tabs":1557},[212,70631,70633],{"className":334,"code":70632,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSliceWipe>\n \u003CCircle \u002F>\n \u003C\u002FSliceWipe>\n\u003C\u002FShader>\n",[99,70634,70635,70643,70651,70659,70667],{"__ignoreMap":178},[220,70636,70637,70639,70641],{"class":222,"line":223},[220,70638,343],{"class":264},[220,70640,347],{"class":346},[220,70642,359],{"class":264},[220,70644,70645,70647,70649],{"class":222,"line":179},[220,70646,364],{"class":264},[220,70648,70610],{"class":346},[220,70650,359],{"class":264},[220,70652,70653,70655,70657],{"class":222,"line":389},[220,70654,2550],{"class":264},[220,70656,2553],{"class":346},[220,70658,386],{"class":264},[220,70660,70661,70663,70665],{"class":222,"line":399},[220,70662,2567],{"class":264},[220,70664,70610],{"class":346},[220,70666,359],{"class":264},[220,70668,70669,70671,70673],{"class":222,"line":644},[220,70670,402],{"class":264},[220,70672,347],{"class":346},[220,70674,359],{"class":264},[212,70676,70677],{"className":409,"code":70632,"language":411,"meta":178,"style":178},[99,70678,70679,70687,70695,70703,70711],{"__ignoreMap":178},[220,70680,70681,70683,70685],{"class":222,"line":223},[220,70682,343],{"class":264},[220,70684,347],{"class":420},[220,70686,359],{"class":264},[220,70688,70689,70691,70693],{"class":222,"line":179},[220,70690,364],{"class":264},[220,70692,70610],{"class":420},[220,70694,359],{"class":264},[220,70696,70697,70699,70701],{"class":222,"line":389},[220,70698,2550],{"class":264},[220,70700,2553],{"class":420},[220,70702,386],{"class":264},[220,70704,70705,70707,70709],{"class":222,"line":399},[220,70706,2567],{"class":264},[220,70708,70610],{"class":420},[220,70710,359],{"class":264},[220,70712,70713,70715,70717],{"class":222,"line":644},[220,70714,402],{"class":264},[220,70716,347],{"class":420},[220,70718,359],{"class":264},[212,70720,70721],{"className":2844,"code":70632,"language":2846,"meta":178,"style":178},[99,70722,70723,70731,70739,70747,70755],{"__ignoreMap":178},[220,70724,70725,70727,70729],{"class":222,"line":223},[220,70726,343],{"class":264},[220,70728,347],{"class":420},[220,70730,359],{"class":264},[220,70732,70733,70735,70737],{"class":222,"line":179},[220,70734,364],{"class":264},[220,70736,70610],{"class":420},[220,70738,359],{"class":264},[220,70740,70741,70743,70745],{"class":222,"line":389},[220,70742,2550],{"class":264},[220,70744,2553],{"class":420},[220,70746,386],{"class":264},[220,70748,70749,70751,70753],{"class":222,"line":399},[220,70750,2567],{"class":264},[220,70752,70610],{"class":420},[220,70754,359],{"class":264},[220,70756,70757,70759,70761],{"class":222,"line":644},[220,70758,402],{"class":264},[220,70760,347],{"class":420},[220,70762,359],{"class":264},[212,70764,70765],{"className":468,"code":70632,"language":469,"meta":178,"style":178},[99,70766,70767,70775,70783,70791,70799],{"__ignoreMap":178},[220,70768,70769,70771,70773],{"class":222,"line":223},[220,70770,343],{"class":264},[220,70772,347],{"class":420},[220,70774,359],{"class":264},[220,70776,70777,70779,70781],{"class":222,"line":179},[220,70778,364],{"class":264},[220,70780,70610],{"class":420},[220,70782,359],{"class":264},[220,70784,70785,70787,70789],{"class":222,"line":389},[220,70786,2550],{"class":264},[220,70788,2553],{"class":420},[220,70790,386],{"class":264},[220,70792,70793,70795,70797],{"class":222,"line":399},[220,70794,2567],{"class":264},[220,70796,70610],{"class":420},[220,70798,359],{"class":264},[220,70800,70801,70803,70805],{"class":222,"line":644},[220,70802,402],{"class":264},[220,70804,347],{"class":420},[220,70806,359],{"class":264},[212,70808,70810],{"className":251,"code":70809,"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,70811,70812,70822,70826,70840,70844,70853,70861,70865,70869],{"__ignoreMap":178},[220,70813,70814,70816,70818,70820],{"class":222,"line":223},[220,70815,261],{"class":260},[220,70817,11512],{"class":264},[220,70819,268],{"class":260},[220,70821,4007],{"class":230},[220,70823,70824],{"class":222,"line":179},[220,70825,647],{"emptyLinePlaceholder":194},[220,70827,70828,70830,70832,70834,70836,70838],{"class":222,"line":389},[220,70829,1735],{"class":260},[220,70831,1738],{"class":420},[220,70833,1741],{"class":260},[220,70835,1744],{"class":260},[220,70837,1747],{"class":226},[220,70839,1750],{"class":264},[220,70841,70842],{"class":222,"line":399},[220,70843,1765],{"class":264},[220,70845,70846,70848,70851],{"class":222,"line":644},[220,70847,1770],{"class":264},[220,70849,70850],{"class":230},"'SliceWipe'",[220,70852,7009],{"class":264},[220,70854,70855,70857,70859],{"class":222,"line":650},[220,70856,7014],{"class":264},[220,70858,3206],{"class":230},[220,70860,2465],{"class":264},[220,70862,70863],{"class":222,"line":656},[220,70864,7031],{"class":264},[220,70866,70867],{"class":222,"line":673},[220,70868,1787],{"class":264},[220,70870,70871],{"class":222,"line":682},[220,70872,1792],{"class":264},[1504,70874,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":70876},[70877,70878],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fslicewipe",{"title":70610,"description":70618},"docs\u002Fcomponents\u002FSliceWipe","USVVGPmSms2A_JjUbAZu4pSl0AhaAY6Dkor41vykVBA",{"id":70885,"title":70886,"body":70887,"category":35559,"componentType":25877,"description":70894,"extension":191,"meta":71135,"navigation":194,"path":71136,"requiresChild":32530,"seo":71137,"stem":71138,"__hash__":71139},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":70888,"toc":71131},[70889,70892,70895,70897,70899,70902,70904,71129],[11,70890,70886],{"id":70891},"smoke",[15,70893,70894],{},"Realistic fluid smoke simulation with vorticity dynamics",[31911,70896],{"component":70886},[23,70898,31915],{"id":26533},[31917,70900],{":props":70901},"[{\"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,70903,31923],{"id":31922},[246,70905,70906,70946,70989,71029,71071],{":tabs":1557},[212,70907,70909],{"className":334,"code":70908,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70910,70911,70919,70926,70934,70938],{"__ignoreMap":178},[220,70912,70913,70915,70917],{"class":222,"line":223},[220,70914,343],{"class":264},[220,70916,347],{"class":346},[220,70918,359],{"class":264},[220,70920,70921,70923],{"class":222,"line":179},[220,70922,364],{"class":264},[220,70924,70925],{"class":346},"Smoke\n",[220,70927,70928,70930,70932],{"class":222,"line":389},[220,70929,20371],{"class":226},[220,70931,353],{"class":264},[220,70933,36625],{"class":230},[220,70935,70936],{"class":222,"line":399},[220,70937,1234],{"class":264},[220,70939,70940,70942,70944],{"class":222,"line":644},[220,70941,402],{"class":264},[220,70943,347],{"class":346},[220,70945,359],{"class":264},[212,70947,70949],{"className":409,"code":70948,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70950,70951,70959,70965,70977,70981],{"__ignoreMap":178},[220,70952,70953,70955,70957],{"class":222,"line":223},[220,70954,343],{"class":264},[220,70956,347],{"class":420},[220,70958,359],{"class":264},[220,70960,70961,70963],{"class":222,"line":179},[220,70962,364],{"class":264},[220,70964,70925],{"class":420},[220,70966,70967,70969,70971,70973,70975],{"class":222,"line":389},[220,70968,20482],{"class":226},[220,70970,353],{"class":260},[220,70972,743],{"class":264},[220,70974,8677],{"class":420},[220,70976,749],{"class":264},[220,70978,70979],{"class":222,"line":399},[220,70980,1234],{"class":264},[220,70982,70983,70985,70987],{"class":222,"line":644},[220,70984,402],{"class":264},[220,70986,347],{"class":420},[220,70988,359],{"class":264},[212,70990,70991],{"className":2844,"code":70948,"language":2846,"meta":178,"style":178},[99,70992,70993,71001,71007,71017,71021],{"__ignoreMap":178},[220,70994,70995,70997,70999],{"class":222,"line":223},[220,70996,343],{"class":264},[220,70998,347],{"class":420},[220,71000,359],{"class":264},[220,71002,71003,71005],{"class":222,"line":179},[220,71004,364],{"class":264},[220,71006,70925],{"class":420},[220,71008,71009,71011,71013,71015],{"class":222,"line":389},[220,71010,20482],{"class":226},[220,71012,29871],{"class":264},[220,71014,8677],{"class":420},[220,71016,749],{"class":264},[220,71018,71019],{"class":222,"line":399},[220,71020,1234],{"class":264},[220,71022,71023,71025,71027],{"class":222,"line":644},[220,71024,402],{"class":264},[220,71026,347],{"class":420},[220,71028,359],{"class":264},[212,71030,71031],{"className":468,"code":70948,"language":469,"meta":178,"style":178},[99,71032,71033,71041,71047,71059,71063],{"__ignoreMap":178},[220,71034,71035,71037,71039],{"class":222,"line":223},[220,71036,343],{"class":264},[220,71038,347],{"class":420},[220,71040,359],{"class":264},[220,71042,71043,71045],{"class":222,"line":179},[220,71044,364],{"class":264},[220,71046,70925],{"class":420},[220,71048,71049,71051,71053,71055,71057],{"class":222,"line":389},[220,71050,20482],{"class":226},[220,71052,353],{"class":260},[220,71054,743],{"class":264},[220,71056,8677],{"class":420},[220,71058,749],{"class":264},[220,71060,71061],{"class":222,"line":399},[220,71062,1234],{"class":264},[220,71064,71065,71067,71069],{"class":222,"line":644},[220,71066,402],{"class":264},[220,71068,347],{"class":420},[220,71070,359],{"class":264},[212,71072,71074],{"className":251,"code":71073,"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,71075,71076,71086,71090,71104,71108,71121,71125],{"__ignoreMap":178},[220,71077,71078,71080,71082,71084],{"class":222,"line":223},[220,71079,261],{"class":260},[220,71081,11512],{"class":264},[220,71083,268],{"class":260},[220,71085,4007],{"class":230},[220,71087,71088],{"class":222,"line":179},[220,71089,647],{"emptyLinePlaceholder":194},[220,71091,71092,71094,71096,71098,71100,71102],{"class":222,"line":389},[220,71093,1735],{"class":260},[220,71095,1738],{"class":420},[220,71097,1741],{"class":260},[220,71099,1744],{"class":260},[220,71101,1747],{"class":226},[220,71103,1750],{"class":264},[220,71105,71106],{"class":222,"line":399},[220,71107,1765],{"class":264},[220,71109,71110,71112,71115,71117,71119],{"class":222,"line":644},[220,71111,1770],{"class":264},[220,71113,71114],{"class":230},"'Smoke'",[220,71116,32203],{"class":264},[220,71118,8677],{"class":420},[220,71120,1782],{"class":264},[220,71122,71123],{"class":222,"line":650},[220,71124,1787],{"class":264},[220,71126,71127],{"class":222,"line":656},[220,71128,1792],{"class":264},[1504,71130,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71132},[71133,71134],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":70886,"description":70894},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":71141,"title":23176,"body":71142,"category":36569,"componentType":25877,"description":71149,"extension":191,"meta":71390,"navigation":194,"path":71391,"requiresChild":32530,"seo":71392,"stem":71393,"__hash__":71394},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":71143,"toc":71386},[71144,71147,71150,71152,71154,71157,71159,71384],[11,71145,23176],{"id":71146},"smokefill",[15,71148,71149],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[31911,71151],{"component":23176},[23,71153,31915],{"id":26533},[31917,71155],{":props":71156},"[{\"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,71158,31923],{"id":31922},[246,71160,71161,71201,71244,71284,71326],{":tabs":1557},[212,71162,71164],{"className":334,"code":71163,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71165,71166,71174,71181,71189,71193],{"__ignoreMap":178},[220,71167,71168,71170,71172],{"class":222,"line":223},[220,71169,343],{"class":264},[220,71171,347],{"class":346},[220,71173,359],{"class":264},[220,71175,71176,71178],{"class":222,"line":179},[220,71177,364],{"class":264},[220,71179,71180],{"class":346},"SmokeFill\n",[220,71182,71183,71185,71187],{"class":222,"line":389},[220,71184,20371],{"class":226},[220,71186,353],{"class":264},[220,71188,36625],{"class":230},[220,71190,71191],{"class":222,"line":399},[220,71192,1234],{"class":264},[220,71194,71195,71197,71199],{"class":222,"line":644},[220,71196,402],{"class":264},[220,71198,347],{"class":346},[220,71200,359],{"class":264},[212,71202,71204],{"className":409,"code":71203,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71205,71206,71214,71220,71232,71236],{"__ignoreMap":178},[220,71207,71208,71210,71212],{"class":222,"line":223},[220,71209,343],{"class":264},[220,71211,347],{"class":420},[220,71213,359],{"class":264},[220,71215,71216,71218],{"class":222,"line":179},[220,71217,364],{"class":264},[220,71219,71180],{"class":420},[220,71221,71222,71224,71226,71228,71230],{"class":222,"line":389},[220,71223,20482],{"class":226},[220,71225,353],{"class":260},[220,71227,743],{"class":264},[220,71229,8677],{"class":420},[220,71231,749],{"class":264},[220,71233,71234],{"class":222,"line":399},[220,71235,1234],{"class":264},[220,71237,71238,71240,71242],{"class":222,"line":644},[220,71239,402],{"class":264},[220,71241,347],{"class":420},[220,71243,359],{"class":264},[212,71245,71246],{"className":2844,"code":71203,"language":2846,"meta":178,"style":178},[99,71247,71248,71256,71262,71272,71276],{"__ignoreMap":178},[220,71249,71250,71252,71254],{"class":222,"line":223},[220,71251,343],{"class":264},[220,71253,347],{"class":420},[220,71255,359],{"class":264},[220,71257,71258,71260],{"class":222,"line":179},[220,71259,364],{"class":264},[220,71261,71180],{"class":420},[220,71263,71264,71266,71268,71270],{"class":222,"line":389},[220,71265,20482],{"class":226},[220,71267,29871],{"class":264},[220,71269,8677],{"class":420},[220,71271,749],{"class":264},[220,71273,71274],{"class":222,"line":399},[220,71275,1234],{"class":264},[220,71277,71278,71280,71282],{"class":222,"line":644},[220,71279,402],{"class":264},[220,71281,347],{"class":420},[220,71283,359],{"class":264},[212,71285,71286],{"className":468,"code":71203,"language":469,"meta":178,"style":178},[99,71287,71288,71296,71302,71314,71318],{"__ignoreMap":178},[220,71289,71290,71292,71294],{"class":222,"line":223},[220,71291,343],{"class":264},[220,71293,347],{"class":420},[220,71295,359],{"class":264},[220,71297,71298,71300],{"class":222,"line":179},[220,71299,364],{"class":264},[220,71301,71180],{"class":420},[220,71303,71304,71306,71308,71310,71312],{"class":222,"line":389},[220,71305,20482],{"class":226},[220,71307,353],{"class":260},[220,71309,743],{"class":264},[220,71311,8677],{"class":420},[220,71313,749],{"class":264},[220,71315,71316],{"class":222,"line":399},[220,71317,1234],{"class":264},[220,71319,71320,71322,71324],{"class":222,"line":644},[220,71321,402],{"class":264},[220,71323,347],{"class":420},[220,71325,359],{"class":264},[212,71327,71329],{"className":251,"code":71328,"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,71330,71331,71341,71345,71359,71363,71376,71380],{"__ignoreMap":178},[220,71332,71333,71335,71337,71339],{"class":222,"line":223},[220,71334,261],{"class":260},[220,71336,11512],{"class":264},[220,71338,268],{"class":260},[220,71340,4007],{"class":230},[220,71342,71343],{"class":222,"line":179},[220,71344,647],{"emptyLinePlaceholder":194},[220,71346,71347,71349,71351,71353,71355,71357],{"class":222,"line":389},[220,71348,1735],{"class":260},[220,71350,1738],{"class":420},[220,71352,1741],{"class":260},[220,71354,1744],{"class":260},[220,71356,1747],{"class":226},[220,71358,1750],{"class":264},[220,71360,71361],{"class":222,"line":399},[220,71362,1765],{"class":264},[220,71364,71365,71367,71370,71372,71374],{"class":222,"line":644},[220,71366,1770],{"class":264},[220,71368,71369],{"class":230},"'SmokeFill'",[220,71371,32203],{"class":264},[220,71373,8677],{"class":420},[220,71375,1782],{"class":264},[220,71377,71378],{"class":222,"line":650},[220,71379,1787],{"class":264},[220,71381,71382],{"class":222,"line":656},[220,71383,1792],{"class":264},[1504,71385,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71387},[71388,71389],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":23176,"description":71149},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":71396,"title":71397,"body":71398,"category":35559,"componentType":25877,"description":71405,"extension":191,"meta":71646,"navigation":194,"path":71647,"requiresChild":32530,"seo":71648,"stem":71649,"__hash__":71650},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":71399,"toc":71642},[71400,71403,71406,71408,71410,71413,71415,71640],[11,71401,71397],{"id":71402},"smokeflow",[15,71404,71405],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[31911,71407],{"component":71397},[23,71409,31915],{"id":26533},[31917,71411],{":props":71412},"[{\"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,71414,31923],{"id":31922},[246,71416,71417,71457,71500,71540,71582],{":tabs":1557},[212,71418,71420],{"className":334,"code":71419,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71421,71422,71430,71437,71445,71449],{"__ignoreMap":178},[220,71423,71424,71426,71428],{"class":222,"line":223},[220,71425,343],{"class":264},[220,71427,347],{"class":346},[220,71429,359],{"class":264},[220,71431,71432,71434],{"class":222,"line":179},[220,71433,364],{"class":264},[220,71435,71436],{"class":346},"SmokeFlow\n",[220,71438,71439,71441,71443],{"class":222,"line":389},[220,71440,20371],{"class":226},[220,71442,353],{"class":264},[220,71444,36625],{"class":230},[220,71446,71447],{"class":222,"line":399},[220,71448,1234],{"class":264},[220,71450,71451,71453,71455],{"class":222,"line":644},[220,71452,402],{"class":264},[220,71454,347],{"class":346},[220,71456,359],{"class":264},[212,71458,71460],{"className":409,"code":71459,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71461,71462,71470,71476,71488,71492],{"__ignoreMap":178},[220,71463,71464,71466,71468],{"class":222,"line":223},[220,71465,343],{"class":264},[220,71467,347],{"class":420},[220,71469,359],{"class":264},[220,71471,71472,71474],{"class":222,"line":179},[220,71473,364],{"class":264},[220,71475,71436],{"class":420},[220,71477,71478,71480,71482,71484,71486],{"class":222,"line":389},[220,71479,20482],{"class":226},[220,71481,353],{"class":260},[220,71483,743],{"class":264},[220,71485,8677],{"class":420},[220,71487,749],{"class":264},[220,71489,71490],{"class":222,"line":399},[220,71491,1234],{"class":264},[220,71493,71494,71496,71498],{"class":222,"line":644},[220,71495,402],{"class":264},[220,71497,347],{"class":420},[220,71499,359],{"class":264},[212,71501,71502],{"className":2844,"code":71459,"language":2846,"meta":178,"style":178},[99,71503,71504,71512,71518,71528,71532],{"__ignoreMap":178},[220,71505,71506,71508,71510],{"class":222,"line":223},[220,71507,343],{"class":264},[220,71509,347],{"class":420},[220,71511,359],{"class":264},[220,71513,71514,71516],{"class":222,"line":179},[220,71515,364],{"class":264},[220,71517,71436],{"class":420},[220,71519,71520,71522,71524,71526],{"class":222,"line":389},[220,71521,20482],{"class":226},[220,71523,29871],{"class":264},[220,71525,8677],{"class":420},[220,71527,749],{"class":264},[220,71529,71530],{"class":222,"line":399},[220,71531,1234],{"class":264},[220,71533,71534,71536,71538],{"class":222,"line":644},[220,71535,402],{"class":264},[220,71537,347],{"class":420},[220,71539,359],{"class":264},[212,71541,71542],{"className":468,"code":71459,"language":469,"meta":178,"style":178},[99,71543,71544,71552,71558,71570,71574],{"__ignoreMap":178},[220,71545,71546,71548,71550],{"class":222,"line":223},[220,71547,343],{"class":264},[220,71549,347],{"class":420},[220,71551,359],{"class":264},[220,71553,71554,71556],{"class":222,"line":179},[220,71555,364],{"class":264},[220,71557,71436],{"class":420},[220,71559,71560,71562,71564,71566,71568],{"class":222,"line":389},[220,71561,20482],{"class":226},[220,71563,353],{"class":260},[220,71565,743],{"class":264},[220,71567,8677],{"class":420},[220,71569,749],{"class":264},[220,71571,71572],{"class":222,"line":399},[220,71573,1234],{"class":264},[220,71575,71576,71578,71580],{"class":222,"line":644},[220,71577,402],{"class":264},[220,71579,347],{"class":420},[220,71581,359],{"class":264},[212,71583,71585],{"className":251,"code":71584,"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,71586,71587,71597,71601,71615,71619,71632,71636],{"__ignoreMap":178},[220,71588,71589,71591,71593,71595],{"class":222,"line":223},[220,71590,261],{"class":260},[220,71592,11512],{"class":264},[220,71594,268],{"class":260},[220,71596,4007],{"class":230},[220,71598,71599],{"class":222,"line":179},[220,71600,647],{"emptyLinePlaceholder":194},[220,71602,71603,71605,71607,71609,71611,71613],{"class":222,"line":389},[220,71604,1735],{"class":260},[220,71606,1738],{"class":420},[220,71608,1741],{"class":260},[220,71610,1744],{"class":260},[220,71612,1747],{"class":226},[220,71614,1750],{"class":264},[220,71616,71617],{"class":222,"line":399},[220,71618,1765],{"class":264},[220,71620,71621,71623,71626,71628,71630],{"class":222,"line":644},[220,71622,1770],{"class":264},[220,71624,71625],{"class":230},"'SmokeFlow'",[220,71627,32203],{"class":264},[220,71629,8677],{"class":420},[220,71631,1782],{"class":264},[220,71633,71634],{"class":222,"line":650},[220,71635,1787],{"class":264},[220,71637,71638],{"class":222,"line":656},[220,71639,1792],{"class":264},[1504,71641,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71643},[71644,71645],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":71397,"description":71405},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":71652,"title":71653,"body":71654,"category":36368,"componentType":25883,"description":71661,"extension":191,"meta":71922,"navigation":194,"path":71923,"requiresChild":194,"seo":71924,"stem":71925,"__hash__":71926},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":71655,"toc":71918},[71656,71659,71662,71664,71666,71669,71671,71916],[11,71657,71653],{"id":71658},"solarize",[15,71660,71661],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[31911,71663],{"component":71653},[23,71665,31915],{"id":26533},[31917,71667],{":props":71668},"[{\"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,71670,31923],{"id":31922},[246,71672,71673,71718,71762,71806,71850],{":tabs":1557},[212,71674,71676],{"className":334,"code":71675,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,71677,71678,71686,71694,71702,71710],{"__ignoreMap":178},[220,71679,71680,71682,71684],{"class":222,"line":223},[220,71681,343],{"class":264},[220,71683,347],{"class":346},[220,71685,359],{"class":264},[220,71687,71688,71690,71692],{"class":222,"line":179},[220,71689,364],{"class":264},[220,71691,71653],{"class":346},[220,71693,359],{"class":264},[220,71695,71696,71698,71700],{"class":222,"line":389},[220,71697,2550],{"class":264},[220,71699,2553],{"class":346},[220,71701,386],{"class":264},[220,71703,71704,71706,71708],{"class":222,"line":399},[220,71705,2567],{"class":264},[220,71707,71653],{"class":346},[220,71709,359],{"class":264},[220,71711,71712,71714,71716],{"class":222,"line":644},[220,71713,402],{"class":264},[220,71715,347],{"class":346},[220,71717,359],{"class":264},[212,71719,71720],{"className":409,"code":71675,"language":411,"meta":178,"style":178},[99,71721,71722,71730,71738,71746,71754],{"__ignoreMap":178},[220,71723,71724,71726,71728],{"class":222,"line":223},[220,71725,343],{"class":264},[220,71727,347],{"class":420},[220,71729,359],{"class":264},[220,71731,71732,71734,71736],{"class":222,"line":179},[220,71733,364],{"class":264},[220,71735,71653],{"class":420},[220,71737,359],{"class":264},[220,71739,71740,71742,71744],{"class":222,"line":389},[220,71741,2550],{"class":264},[220,71743,2553],{"class":420},[220,71745,386],{"class":264},[220,71747,71748,71750,71752],{"class":222,"line":399},[220,71749,2567],{"class":264},[220,71751,71653],{"class":420},[220,71753,359],{"class":264},[220,71755,71756,71758,71760],{"class":222,"line":644},[220,71757,402],{"class":264},[220,71759,347],{"class":420},[220,71761,359],{"class":264},[212,71763,71764],{"className":2844,"code":71675,"language":2846,"meta":178,"style":178},[99,71765,71766,71774,71782,71790,71798],{"__ignoreMap":178},[220,71767,71768,71770,71772],{"class":222,"line":223},[220,71769,343],{"class":264},[220,71771,347],{"class":420},[220,71773,359],{"class":264},[220,71775,71776,71778,71780],{"class":222,"line":179},[220,71777,364],{"class":264},[220,71779,71653],{"class":420},[220,71781,359],{"class":264},[220,71783,71784,71786,71788],{"class":222,"line":389},[220,71785,2550],{"class":264},[220,71787,2553],{"class":420},[220,71789,386],{"class":264},[220,71791,71792,71794,71796],{"class":222,"line":399},[220,71793,2567],{"class":264},[220,71795,71653],{"class":420},[220,71797,359],{"class":264},[220,71799,71800,71802,71804],{"class":222,"line":644},[220,71801,402],{"class":264},[220,71803,347],{"class":420},[220,71805,359],{"class":264},[212,71807,71808],{"className":468,"code":71675,"language":469,"meta":178,"style":178},[99,71809,71810,71818,71826,71834,71842],{"__ignoreMap":178},[220,71811,71812,71814,71816],{"class":222,"line":223},[220,71813,343],{"class":264},[220,71815,347],{"class":420},[220,71817,359],{"class":264},[220,71819,71820,71822,71824],{"class":222,"line":179},[220,71821,364],{"class":264},[220,71823,71653],{"class":420},[220,71825,359],{"class":264},[220,71827,71828,71830,71832],{"class":222,"line":389},[220,71829,2550],{"class":264},[220,71831,2553],{"class":420},[220,71833,386],{"class":264},[220,71835,71836,71838,71840],{"class":222,"line":399},[220,71837,2567],{"class":264},[220,71839,71653],{"class":420},[220,71841,359],{"class":264},[220,71843,71844,71846,71848],{"class":222,"line":644},[220,71845,402],{"class":264},[220,71847,347],{"class":420},[220,71849,359],{"class":264},[212,71851,71853],{"className":251,"code":71852,"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,71854,71855,71865,71869,71883,71887,71896,71904,71908,71912],{"__ignoreMap":178},[220,71856,71857,71859,71861,71863],{"class":222,"line":223},[220,71858,261],{"class":260},[220,71860,11512],{"class":264},[220,71862,268],{"class":260},[220,71864,4007],{"class":230},[220,71866,71867],{"class":222,"line":179},[220,71868,647],{"emptyLinePlaceholder":194},[220,71870,71871,71873,71875,71877,71879,71881],{"class":222,"line":389},[220,71872,1735],{"class":260},[220,71874,1738],{"class":420},[220,71876,1741],{"class":260},[220,71878,1744],{"class":260},[220,71880,1747],{"class":226},[220,71882,1750],{"class":264},[220,71884,71885],{"class":222,"line":399},[220,71886,1765],{"class":264},[220,71888,71889,71891,71894],{"class":222,"line":644},[220,71890,1770],{"class":264},[220,71892,71893],{"class":230},"'Solarize'",[220,71895,7009],{"class":264},[220,71897,71898,71900,71902],{"class":222,"line":650},[220,71899,7014],{"class":264},[220,71901,3206],{"class":230},[220,71903,2465],{"class":264},[220,71905,71906],{"class":222,"line":656},[220,71907,7031],{"class":264},[220,71909,71910],{"class":222,"line":673},[220,71911,1787],{"class":264},[220,71913,71914],{"class":222,"line":682},[220,71915,1792],{"class":264},[1504,71917,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":71919},[71920,71921],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":71653,"description":71661},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":71928,"title":1585,"body":71929,"category":33063,"componentType":25877,"description":71936,"extension":191,"meta":72166,"navigation":194,"path":72167,"requiresChild":32530,"seo":72168,"stem":72169,"__hash__":72170},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":71930,"toc":72162},[71931,71934,71937,71939,71941,71944,71946,72160],[11,71932,1585],{"id":71933},"solidcolor",[15,71935,71936],{},"Fill the canvas with a single solid color",[31911,71938],{"component":1585},[23,71940,31915],{"id":26533},[31917,71942],{":props":71943},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,71945,31923],{"id":31922},[246,71947,71948,71989,72027,72065,72103],{":tabs":1557},[212,71949,71951],{"className":334,"code":71950,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,71952,71953,71961,71968,71977,71981],{"__ignoreMap":178},[220,71954,71955,71957,71959],{"class":222,"line":223},[220,71956,343],{"class":264},[220,71958,347],{"class":346},[220,71960,359],{"class":264},[220,71962,71963,71965],{"class":222,"line":179},[220,71964,364],{"class":264},[220,71966,71967],{"class":346},"SolidColor\n",[220,71969,71970,71972,71974],{"class":222,"line":389},[220,71971,9635],{"class":226},[220,71973,353],{"class":264},[220,71975,71976],{"class":230},"\"#5b18ca\"\n",[220,71978,71979],{"class":222,"line":399},[220,71980,1234],{"class":264},[220,71982,71983,71985,71987],{"class":222,"line":644},[220,71984,402],{"class":264},[220,71986,347],{"class":346},[220,71988,359],{"class":264},[212,71990,71991],{"className":409,"code":71950,"language":411,"meta":178,"style":178},[99,71992,71993,72001,72007,72015,72019],{"__ignoreMap":178},[220,71994,71995,71997,71999],{"class":222,"line":223},[220,71996,343],{"class":264},[220,71998,347],{"class":420},[220,72000,359],{"class":264},[220,72002,72003,72005],{"class":222,"line":179},[220,72004,364],{"class":264},[220,72006,71967],{"class":420},[220,72008,72009,72011,72013],{"class":222,"line":389},[220,72010,9635],{"class":226},[220,72012,353],{"class":260},[220,72014,71976],{"class":230},[220,72016,72017],{"class":222,"line":399},[220,72018,1234],{"class":264},[220,72020,72021,72023,72025],{"class":222,"line":644},[220,72022,402],{"class":264},[220,72024,347],{"class":420},[220,72026,359],{"class":264},[212,72028,72029],{"className":2844,"code":71950,"language":2846,"meta":178,"style":178},[99,72030,72031,72039,72045,72053,72057],{"__ignoreMap":178},[220,72032,72033,72035,72037],{"class":222,"line":223},[220,72034,343],{"class":264},[220,72036,347],{"class":420},[220,72038,359],{"class":264},[220,72040,72041,72043],{"class":222,"line":179},[220,72042,364],{"class":264},[220,72044,71967],{"class":420},[220,72046,72047,72049,72051],{"class":222,"line":389},[220,72048,9635],{"class":226},[220,72050,353],{"class":264},[220,72052,71976],{"class":230},[220,72054,72055],{"class":222,"line":399},[220,72056,1234],{"class":264},[220,72058,72059,72061,72063],{"class":222,"line":644},[220,72060,402],{"class":264},[220,72062,347],{"class":420},[220,72064,359],{"class":264},[212,72066,72067],{"className":468,"code":71950,"language":469,"meta":178,"style":178},[99,72068,72069,72077,72083,72091,72095],{"__ignoreMap":178},[220,72070,72071,72073,72075],{"class":222,"line":223},[220,72072,343],{"class":264},[220,72074,347],{"class":420},[220,72076,359],{"class":264},[220,72078,72079,72081],{"class":222,"line":179},[220,72080,364],{"class":264},[220,72082,71967],{"class":420},[220,72084,72085,72087,72089],{"class":222,"line":389},[220,72086,9635],{"class":226},[220,72088,353],{"class":260},[220,72090,71976],{"class":230},[220,72092,72093],{"class":222,"line":399},[220,72094,1234],{"class":264},[220,72096,72097,72099,72101],{"class":222,"line":644},[220,72098,402],{"class":264},[220,72100,347],{"class":420},[220,72102,359],{"class":264},[212,72104,72106],{"className":251,"code":72105,"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,72107,72108,72118,72122,72136,72140,72152,72156],{"__ignoreMap":178},[220,72109,72110,72112,72114,72116],{"class":222,"line":223},[220,72111,261],{"class":260},[220,72113,11512],{"class":264},[220,72115,268],{"class":260},[220,72117,4007],{"class":230},[220,72119,72120],{"class":222,"line":179},[220,72121,647],{"emptyLinePlaceholder":194},[220,72123,72124,72126,72128,72130,72132,72134],{"class":222,"line":389},[220,72125,1735],{"class":260},[220,72127,1738],{"class":420},[220,72129,1741],{"class":260},[220,72131,1744],{"class":260},[220,72133,1747],{"class":226},[220,72135,1750],{"class":264},[220,72137,72138],{"class":222,"line":399},[220,72139,1765],{"class":264},[220,72141,72142,72144,72146,72148,72150],{"class":222,"line":644},[220,72143,1770],{"class":264},[220,72145,1773],{"class":230},[220,72147,1776],{"class":264},[220,72149,1779],{"class":230},[220,72151,1782],{"class":264},[220,72153,72154],{"class":222,"line":650},[220,72155,1787],{"class":264},[220,72157,72158],{"class":222,"line":656},[220,72159,1792],{"class":264},[1504,72161,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72163},[72164,72165],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":71936},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":72172,"title":72173,"body":72174,"category":33396,"componentType":25883,"description":72181,"extension":191,"meta":72498,"navigation":194,"path":72499,"requiresChild":194,"seo":72500,"stem":72501,"__hash__":72502},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":72175,"toc":72494},[72176,72179,72182,72184,72186,72189,72191,72492],[11,72177,72173],{"id":72178},"spherize",[15,72180,72181],{},"Map content onto a 3D sphere surface with depth distortion",[31911,72183],{"component":72173},[23,72185,31915],{"id":26533},[31917,72187],{":props":72188},"[{\"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,72190,31923],{"id":31922},[246,72192,72193,72249,72308,72364,72422],{":tabs":1557},[212,72194,72196],{"className":334,"code":72195,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,72197,72198,72206,72213,72221,72225,72233,72241],{"__ignoreMap":178},[220,72199,72200,72202,72204],{"class":222,"line":223},[220,72201,343],{"class":264},[220,72203,347],{"class":346},[220,72205,359],{"class":264},[220,72207,72208,72210],{"class":222,"line":179},[220,72209,364],{"class":264},[220,72211,72212],{"class":346},"Spherize\n",[220,72214,72215,72217,72219],{"class":222,"line":389},[220,72216,17405],{"class":226},[220,72218,353],{"class":264},[220,72220,36625],{"class":230},[220,72222,72223],{"class":222,"line":399},[220,72224,31959],{"class":264},[220,72226,72227,72229,72231],{"class":222,"line":644},[220,72228,2550],{"class":264},[220,72230,2553],{"class":346},[220,72232,386],{"class":264},[220,72234,72235,72237,72239],{"class":222,"line":650},[220,72236,2567],{"class":264},[220,72238,72173],{"class":346},[220,72240,359],{"class":264},[220,72242,72243,72245,72247],{"class":222,"line":656},[220,72244,402],{"class":264},[220,72246,347],{"class":346},[220,72248,359],{"class":264},[212,72250,72252],{"className":409,"code":72251,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,72253,72254,72262,72268,72280,72284,72292,72300],{"__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],{"class":222,"line":179},[220,72265,364],{"class":264},[220,72267,72212],{"class":420},[220,72269,72270,72272,72274,72276,72278],{"class":222,"line":389},[220,72271,9645],{"class":226},[220,72273,353],{"class":260},[220,72275,743],{"class":264},[220,72277,8677],{"class":420},[220,72279,749],{"class":264},[220,72281,72282],{"class":222,"line":399},[220,72283,31959],{"class":264},[220,72285,72286,72288,72290],{"class":222,"line":644},[220,72287,2550],{"class":264},[220,72289,2553],{"class":420},[220,72291,386],{"class":264},[220,72293,72294,72296,72298],{"class":222,"line":650},[220,72295,2567],{"class":264},[220,72297,72173],{"class":420},[220,72299,359],{"class":264},[220,72301,72302,72304,72306],{"class":222,"line":656},[220,72303,402],{"class":264},[220,72305,347],{"class":420},[220,72307,359],{"class":264},[212,72309,72310],{"className":2844,"code":72251,"language":2846,"meta":178,"style":178},[99,72311,72312,72320,72326,72336,72340,72348,72356],{"__ignoreMap":178},[220,72313,72314,72316,72318],{"class":222,"line":223},[220,72315,343],{"class":264},[220,72317,347],{"class":420},[220,72319,359],{"class":264},[220,72321,72322,72324],{"class":222,"line":179},[220,72323,364],{"class":264},[220,72325,72212],{"class":420},[220,72327,72328,72330,72332,72334],{"class":222,"line":389},[220,72329,9645],{"class":226},[220,72331,29871],{"class":264},[220,72333,8677],{"class":420},[220,72335,749],{"class":264},[220,72337,72338],{"class":222,"line":399},[220,72339,31959],{"class":264},[220,72341,72342,72344,72346],{"class":222,"line":644},[220,72343,2550],{"class":264},[220,72345,2553],{"class":420},[220,72347,386],{"class":264},[220,72349,72350,72352,72354],{"class":222,"line":650},[220,72351,2567],{"class":264},[220,72353,72173],{"class":420},[220,72355,359],{"class":264},[220,72357,72358,72360,72362],{"class":222,"line":656},[220,72359,402],{"class":264},[220,72361,347],{"class":420},[220,72363,359],{"class":264},[212,72365,72366],{"className":468,"code":72251,"language":469,"meta":178,"style":178},[99,72367,72368,72376,72382,72394,72398,72406,72414],{"__ignoreMap":178},[220,72369,72370,72372,72374],{"class":222,"line":223},[220,72371,343],{"class":264},[220,72373,347],{"class":420},[220,72375,359],{"class":264},[220,72377,72378,72380],{"class":222,"line":179},[220,72379,364],{"class":264},[220,72381,72212],{"class":420},[220,72383,72384,72386,72388,72390,72392],{"class":222,"line":389},[220,72385,9645],{"class":226},[220,72387,353],{"class":260},[220,72389,743],{"class":264},[220,72391,8677],{"class":420},[220,72393,749],{"class":264},[220,72395,72396],{"class":222,"line":399},[220,72397,31959],{"class":264},[220,72399,72400,72402,72404],{"class":222,"line":644},[220,72401,2550],{"class":264},[220,72403,2553],{"class":420},[220,72405,386],{"class":264},[220,72407,72408,72410,72412],{"class":222,"line":650},[220,72409,2567],{"class":264},[220,72411,72173],{"class":420},[220,72413,359],{"class":264},[220,72415,72416,72418,72420],{"class":222,"line":656},[220,72417,402],{"class":264},[220,72419,347],{"class":420},[220,72421,359],{"class":264},[212,72423,72425],{"className":251,"code":72424,"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,72426,72427,72437,72441,72455,72459,72472,72480,72484,72488],{"__ignoreMap":178},[220,72428,72429,72431,72433,72435],{"class":222,"line":223},[220,72430,261],{"class":260},[220,72432,11512],{"class":264},[220,72434,268],{"class":260},[220,72436,4007],{"class":230},[220,72438,72439],{"class":222,"line":179},[220,72440,647],{"emptyLinePlaceholder":194},[220,72442,72443,72445,72447,72449,72451,72453],{"class":222,"line":389},[220,72444,1735],{"class":260},[220,72446,1738],{"class":420},[220,72448,1741],{"class":260},[220,72450,1744],{"class":260},[220,72452,1747],{"class":226},[220,72454,1750],{"class":264},[220,72456,72457],{"class":222,"line":399},[220,72458,1765],{"class":264},[220,72460,72461,72463,72466,72468,72470],{"class":222,"line":644},[220,72462,1770],{"class":264},[220,72464,72465],{"class":230},"'Spherize'",[220,72467,7541],{"class":264},[220,72469,8677],{"class":420},[220,72471,7546],{"class":264},[220,72473,72474,72476,72478],{"class":222,"line":650},[220,72475,7014],{"class":264},[220,72477,3206],{"class":230},[220,72479,2465],{"class":264},[220,72481,72482],{"class":222,"line":656},[220,72483,7031],{"class":264},[220,72485,72486],{"class":222,"line":673},[220,72487,1787],{"class":264},[220,72489,72490],{"class":222,"line":682},[220,72491,1792],{"class":264},[1504,72493,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72495},[72496,72497],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":72173,"description":72181},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":72504,"title":72505,"body":72506,"category":33063,"componentType":25877,"description":72513,"extension":191,"meta":72698,"navigation":194,"path":72699,"requiresChild":32530,"seo":72700,"stem":72701,"__hash__":72702},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":72507,"toc":72694},[72508,72511,72514,72516,72518,72521,72523,72692],[11,72509,72505],{"id":72510},"spiral",[15,72512,72513],{},"Rotating spiral pattern with animated movement",[31911,72515],{"component":72505},[23,72517,31915],{"id":26533},[31917,72519],{":props":72520},"[{\"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,72522,31923],{"id":31922},[246,72524,72525,72554,72582,72610,72638],{":tabs":1557},[212,72526,72528],{"className":334,"code":72527,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,72529,72530,72538,72546],{"__ignoreMap":178},[220,72531,72532,72534,72536],{"class":222,"line":223},[220,72533,343],{"class":264},[220,72535,347],{"class":346},[220,72537,359],{"class":264},[220,72539,72540,72542,72544],{"class":222,"line":179},[220,72541,364],{"class":264},[220,72543,72505],{"class":346},[220,72545,386],{"class":264},[220,72547,72548,72550,72552],{"class":222,"line":389},[220,72549,402],{"class":264},[220,72551,347],{"class":346},[220,72553,359],{"class":264},[212,72555,72556],{"className":409,"code":72527,"language":411,"meta":178,"style":178},[99,72557,72558,72566,72574],{"__ignoreMap":178},[220,72559,72560,72562,72564],{"class":222,"line":223},[220,72561,343],{"class":264},[220,72563,347],{"class":420},[220,72565,359],{"class":264},[220,72567,72568,72570,72572],{"class":222,"line":179},[220,72569,364],{"class":264},[220,72571,72505],{"class":420},[220,72573,386],{"class":264},[220,72575,72576,72578,72580],{"class":222,"line":389},[220,72577,402],{"class":264},[220,72579,347],{"class":420},[220,72581,359],{"class":264},[212,72583,72584],{"className":2844,"code":72527,"language":2846,"meta":178,"style":178},[99,72585,72586,72594,72602],{"__ignoreMap":178},[220,72587,72588,72590,72592],{"class":222,"line":223},[220,72589,343],{"class":264},[220,72591,347],{"class":420},[220,72593,359],{"class":264},[220,72595,72596,72598,72600],{"class":222,"line":179},[220,72597,364],{"class":264},[220,72599,72505],{"class":420},[220,72601,386],{"class":264},[220,72603,72604,72606,72608],{"class":222,"line":389},[220,72605,402],{"class":264},[220,72607,347],{"class":420},[220,72609,359],{"class":264},[212,72611,72612],{"className":468,"code":72527,"language":469,"meta":178,"style":178},[99,72613,72614,72622,72630],{"__ignoreMap":178},[220,72615,72616,72618,72620],{"class":222,"line":223},[220,72617,343],{"class":264},[220,72619,347],{"class":420},[220,72621,359],{"class":264},[220,72623,72624,72626,72628],{"class":222,"line":179},[220,72625,364],{"class":264},[220,72627,72505],{"class":420},[220,72629,386],{"class":264},[220,72631,72632,72634,72636],{"class":222,"line":389},[220,72633,402],{"class":264},[220,72635,347],{"class":420},[220,72637,359],{"class":264},[212,72639,72641],{"className":251,"code":72640,"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,72642,72643,72653,72657,72671,72675,72684,72688],{"__ignoreMap":178},[220,72644,72645,72647,72649,72651],{"class":222,"line":223},[220,72646,261],{"class":260},[220,72648,11512],{"class":264},[220,72650,268],{"class":260},[220,72652,4007],{"class":230},[220,72654,72655],{"class":222,"line":179},[220,72656,647],{"emptyLinePlaceholder":194},[220,72658,72659,72661,72663,72665,72667,72669],{"class":222,"line":389},[220,72660,1735],{"class":260},[220,72662,1738],{"class":420},[220,72664,1741],{"class":260},[220,72666,1744],{"class":260},[220,72668,1747],{"class":226},[220,72670,1750],{"class":264},[220,72672,72673],{"class":222,"line":399},[220,72674,1765],{"class":264},[220,72676,72677,72679,72682],{"class":222,"line":644},[220,72678,1770],{"class":264},[220,72680,72681],{"class":230},"'Spiral'",[220,72683,2465],{"class":264},[220,72685,72686],{"class":222,"line":650},[220,72687,1787],{"class":264},[220,72689,72690],{"class":222,"line":656},[220,72691,1792],{"class":264},[1504,72693,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":72695},[72696,72697],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":72505,"description":72513},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":72704,"title":72705,"body":72706,"category":15908,"componentType":25877,"description":72713,"extension":191,"meta":72990,"navigation":194,"path":72991,"requiresChild":32530,"seo":72992,"stem":72993,"__hash__":72994},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":72707,"toc":72986},[72708,72711,72714,72716,72718,72721,72723,72984],[11,72709,72705],{"id":72710},"star",[15,72712,72713],{},"Classic star polygon with straight sides and sharp pointed tips",[31911,72715],{"component":72705},[23,72717,31915],{"id":26533},[31917,72719],{":props":72720},"[{\"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,72722,31923],{"id":31922},[246,72724,72725,72773,72824,72872,72922],{":tabs":1557},[212,72726,72728],{"className":334,"code":72727,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,72729,72730,72738,72745,72753,72761,72765],{"__ignoreMap":178},[220,72731,72732,72734,72736],{"class":222,"line":223},[220,72733,343],{"class":264},[220,72735,347],{"class":346},[220,72737,359],{"class":264},[220,72739,72740,72742],{"class":222,"line":179},[220,72741,364],{"class":264},[220,72743,72744],{"class":346},"Star\n",[220,72746,72747,72749,72751],{"class":222,"line":389},[220,72748,9635],{"class":226},[220,72750,353],{"class":264},[220,72752,9591],{"class":230},[220,72754,72755,72757,72759],{"class":222,"line":399},[220,72756,17405],{"class":226},[220,72758,353],{"class":264},[220,72760,48148],{"class":230},[220,72762,72763],{"class":222,"line":644},[220,72764,1234],{"class":264},[220,72766,72767,72769,72771],{"class":222,"line":650},[220,72768,402],{"class":264},[220,72770,347],{"class":346},[220,72772,359],{"class":264},[212,72774,72776],{"className":409,"code":72775,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,72777,72778,72786,72792,72800,72812,72816],{"__ignoreMap":178},[220,72779,72780,72782,72784],{"class":222,"line":223},[220,72781,343],{"class":264},[220,72783,347],{"class":420},[220,72785,359],{"class":264},[220,72787,72788,72790],{"class":222,"line":179},[220,72789,364],{"class":264},[220,72791,72744],{"class":420},[220,72793,72794,72796,72798],{"class":222,"line":389},[220,72795,9635],{"class":226},[220,72797,353],{"class":260},[220,72799,9591],{"class":230},[220,72801,72802,72804,72806,72808,72810],{"class":222,"line":399},[220,72803,9645],{"class":226},[220,72805,353],{"class":260},[220,72807,743],{"class":264},[220,72809,8249],{"class":420},[220,72811,749],{"class":264},[220,72813,72814],{"class":222,"line":644},[220,72815,1234],{"class":264},[220,72817,72818,72820,72822],{"class":222,"line":650},[220,72819,402],{"class":264},[220,72821,347],{"class":420},[220,72823,359],{"class":264},[212,72825,72826],{"className":2844,"code":72775,"language":2846,"meta":178,"style":178},[99,72827,72828,72836,72842,72850,72860,72864],{"__ignoreMap":178},[220,72829,72830,72832,72834],{"class":222,"line":223},[220,72831,343],{"class":264},[220,72833,347],{"class":420},[220,72835,359],{"class":264},[220,72837,72838,72840],{"class":222,"line":179},[220,72839,364],{"class":264},[220,72841,72744],{"class":420},[220,72843,72844,72846,72848],{"class":222,"line":389},[220,72845,9635],{"class":226},[220,72847,353],{"class":264},[220,72849,9591],{"class":230},[220,72851,72852,72854,72856,72858],{"class":222,"line":399},[220,72853,9645],{"class":226},[220,72855,29871],{"class":264},[220,72857,8249],{"class":420},[220,72859,749],{"class":264},[220,72861,72862],{"class":222,"line":644},[220,72863,1234],{"class":264},[220,72865,72866,72868,72870],{"class":222,"line":650},[220,72867,402],{"class":264},[220,72869,347],{"class":420},[220,72871,359],{"class":264},[212,72873,72874],{"className":468,"code":72775,"language":469,"meta":178,"style":178},[99,72875,72876,72884,72890,72898,72910,72914],{"__ignoreMap":178},[220,72877,72878,72880,72882],{"class":222,"line":223},[220,72879,343],{"class":264},[220,72881,347],{"class":420},[220,72883,359],{"class":264},[220,72885,72886,72888],{"class":222,"line":179},[220,72887,364],{"class":264},[220,72889,72744],{"class":420},[220,72891,72892,72894,72896],{"class":222,"line":389},[220,72893,9635],{"class":226},[220,72895,353],{"class":260},[220,72897,9591],{"class":230},[220,72899,72900,72902,72904,72906,72908],{"class":222,"line":399},[220,72901,9645],{"class":226},[220,72903,353],{"class":260},[220,72905,743],{"class":264},[220,72907,8249],{"class":420},[220,72909,749],{"class":264},[220,72911,72912],{"class":222,"line":644},[220,72913,1234],{"class":264},[220,72915,72916,72918,72920],{"class":222,"line":650},[220,72917,402],{"class":264},[220,72919,347],{"class":420},[220,72921,359],{"class":264},[212,72923,72925],{"className":251,"code":72924,"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,72926,72927,72937,72941,72955,72959,72976,72980],{"__ignoreMap":178},[220,72928,72929,72931,72933,72935],{"class":222,"line":223},[220,72930,261],{"class":260},[220,72932,11512],{"class":264},[220,72934,268],{"class":260},[220,72936,4007],{"class":230},[220,72938,72939],{"class":222,"line":179},[220,72940,647],{"emptyLinePlaceholder":194},[220,72942,72943,72945,72947,72949,72951,72953],{"class":222,"line":389},[220,72944,1735],{"class":260},[220,72946,1738],{"class":420},[220,72948,1741],{"class":260},[220,72950,1744],{"class":260},[220,72952,1747],{"class":226},[220,72954,1750],{"class":264},[220,72956,72957],{"class":222,"line":399},[220,72958,1765],{"class":264},[220,72960,72961,72963,72966,72968,72970,72972,72974],{"class":222,"line":644},[220,72962,1770],{"class":264},[220,72964,72965],{"class":230},"'Star'",[220,72967,1776],{"class":264},[220,72969,10169],{"class":230},[220,72971,6566],{"class":264},[220,72973,8249],{"class":420},[220,72975,1782],{"class":264},[220,72977,72978],{"class":222,"line":650},[220,72979,1787],{"class":264},[220,72981,72982],{"class":222,"line":656},[220,72983,1792],{"class":264},[1504,72985,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72987},[72988,72989],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":72705,"description":72713},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":72996,"title":72997,"body":72998,"category":32806,"componentType":25883,"description":73005,"extension":191,"meta":73322,"navigation":194,"path":73323,"requiresChild":194,"seo":73324,"stem":73325,"__hash__":73326},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":72999,"toc":73318},[73000,73003,73006,73008,73010,73013,73015,73316],[11,73001,72997],{"id":73002},"stone",[15,73004,73005],{},"Applies a marbled stone relief and surface distortion to child content",[31911,73007],{"component":72997},[23,73009,31915],{"id":26533},[31917,73011],{":props":73012},"[{\"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,73014,31923],{"id":31922},[246,73016,73017,73073,73132,73188,73246],{":tabs":1557},[212,73018,73020],{"className":334,"code":73019,"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,73021,73022,73030,73037,73045,73049,73057,73065],{"__ignoreMap":178},[220,73023,73024,73026,73028],{"class":222,"line":223},[220,73025,343],{"class":264},[220,73027,347],{"class":346},[220,73029,359],{"class":264},[220,73031,73032,73034],{"class":222,"line":179},[220,73033,364],{"class":264},[220,73035,73036],{"class":346},"Stone\n",[220,73038,73039,73041,73043],{"class":222,"line":389},[220,73040,20371],{"class":226},[220,73042,353],{"class":264},[220,73044,42158],{"class":230},[220,73046,73047],{"class":222,"line":399},[220,73048,31959],{"class":264},[220,73050,73051,73053,73055],{"class":222,"line":644},[220,73052,2550],{"class":264},[220,73054,2553],{"class":346},[220,73056,386],{"class":264},[220,73058,73059,73061,73063],{"class":222,"line":650},[220,73060,2567],{"class":264},[220,73062,72997],{"class":346},[220,73064,359],{"class":264},[220,73066,73067,73069,73071],{"class":222,"line":656},[220,73068,402],{"class":264},[220,73070,347],{"class":346},[220,73072,359],{"class":264},[212,73074,73076],{"className":409,"code":73075,"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,73077,73078,73086,73092,73104,73108,73116,73124],{"__ignoreMap":178},[220,73079,73080,73082,73084],{"class":222,"line":223},[220,73081,343],{"class":264},[220,73083,347],{"class":420},[220,73085,359],{"class":264},[220,73087,73088,73090],{"class":222,"line":179},[220,73089,364],{"class":264},[220,73091,73036],{"class":420},[220,73093,73094,73096,73098,73100,73102],{"class":222,"line":389},[220,73095,20482],{"class":226},[220,73097,353],{"class":260},[220,73099,743],{"class":264},[220,73101,7754],{"class":420},[220,73103,749],{"class":264},[220,73105,73106],{"class":222,"line":399},[220,73107,31959],{"class":264},[220,73109,73110,73112,73114],{"class":222,"line":644},[220,73111,2550],{"class":264},[220,73113,2553],{"class":420},[220,73115,386],{"class":264},[220,73117,73118,73120,73122],{"class":222,"line":650},[220,73119,2567],{"class":264},[220,73121,72997],{"class":420},[220,73123,359],{"class":264},[220,73125,73126,73128,73130],{"class":222,"line":656},[220,73127,402],{"class":264},[220,73129,347],{"class":420},[220,73131,359],{"class":264},[212,73133,73134],{"className":2844,"code":73075,"language":2846,"meta":178,"style":178},[99,73135,73136,73144,73150,73160,73164,73172,73180],{"__ignoreMap":178},[220,73137,73138,73140,73142],{"class":222,"line":223},[220,73139,343],{"class":264},[220,73141,347],{"class":420},[220,73143,359],{"class":264},[220,73145,73146,73148],{"class":222,"line":179},[220,73147,364],{"class":264},[220,73149,73036],{"class":420},[220,73151,73152,73154,73156,73158],{"class":222,"line":389},[220,73153,20482],{"class":226},[220,73155,29871],{"class":264},[220,73157,7754],{"class":420},[220,73159,749],{"class":264},[220,73161,73162],{"class":222,"line":399},[220,73163,31959],{"class":264},[220,73165,73166,73168,73170],{"class":222,"line":644},[220,73167,2550],{"class":264},[220,73169,2553],{"class":420},[220,73171,386],{"class":264},[220,73173,73174,73176,73178],{"class":222,"line":650},[220,73175,2567],{"class":264},[220,73177,72997],{"class":420},[220,73179,359],{"class":264},[220,73181,73182,73184,73186],{"class":222,"line":656},[220,73183,402],{"class":264},[220,73185,347],{"class":420},[220,73187,359],{"class":264},[212,73189,73190],{"className":468,"code":73075,"language":469,"meta":178,"style":178},[99,73191,73192,73200,73206,73218,73222,73230,73238],{"__ignoreMap":178},[220,73193,73194,73196,73198],{"class":222,"line":223},[220,73195,343],{"class":264},[220,73197,347],{"class":420},[220,73199,359],{"class":264},[220,73201,73202,73204],{"class":222,"line":179},[220,73203,364],{"class":264},[220,73205,73036],{"class":420},[220,73207,73208,73210,73212,73214,73216],{"class":222,"line":389},[220,73209,20482],{"class":226},[220,73211,353],{"class":260},[220,73213,743],{"class":264},[220,73215,7754],{"class":420},[220,73217,749],{"class":264},[220,73219,73220],{"class":222,"line":399},[220,73221,31959],{"class":264},[220,73223,73224,73226,73228],{"class":222,"line":644},[220,73225,2550],{"class":264},[220,73227,2553],{"class":420},[220,73229,386],{"class":264},[220,73231,73232,73234,73236],{"class":222,"line":650},[220,73233,2567],{"class":264},[220,73235,72997],{"class":420},[220,73237,359],{"class":264},[220,73239,73240,73242,73244],{"class":222,"line":656},[220,73241,402],{"class":264},[220,73243,347],{"class":420},[220,73245,359],{"class":264},[212,73247,73249],{"className":251,"code":73248,"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,73250,73251,73261,73265,73279,73283,73296,73304,73308,73312],{"__ignoreMap":178},[220,73252,73253,73255,73257,73259],{"class":222,"line":223},[220,73254,261],{"class":260},[220,73256,11512],{"class":264},[220,73258,268],{"class":260},[220,73260,4007],{"class":230},[220,73262,73263],{"class":222,"line":179},[220,73264,647],{"emptyLinePlaceholder":194},[220,73266,73267,73269,73271,73273,73275,73277],{"class":222,"line":389},[220,73268,1735],{"class":260},[220,73270,1738],{"class":420},[220,73272,1741],{"class":260},[220,73274,1744],{"class":260},[220,73276,1747],{"class":226},[220,73278,1750],{"class":264},[220,73280,73281],{"class":222,"line":399},[220,73282,1765],{"class":264},[220,73284,73285,73287,73290,73292,73294],{"class":222,"line":644},[220,73286,1770],{"class":264},[220,73288,73289],{"class":230},"'Stone'",[220,73291,32203],{"class":264},[220,73293,7754],{"class":420},[220,73295,7546],{"class":264},[220,73297,73298,73300,73302],{"class":222,"line":650},[220,73299,7014],{"class":264},[220,73301,3206],{"class":230},[220,73303,2465],{"class":264},[220,73305,73306],{"class":222,"line":656},[220,73307,7031],{"class":264},[220,73309,73310],{"class":222,"line":673},[220,73311,1787],{"class":264},[220,73313,73314],{"class":222,"line":682},[220,73315,1792],{"class":264},[1504,73317,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73319},[73320,73321],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":72997,"description":73005},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":73328,"title":73329,"body":73330,"category":33063,"componentType":25877,"description":73337,"extension":191,"meta":73522,"navigation":194,"path":73523,"requiresChild":32530,"seo":73524,"stem":73525,"__hash__":73526},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":73331,"toc":73518},[73332,73335,73338,73340,73342,73345,73347,73516],[11,73333,73329],{"id":73334},"strands",[15,73336,73337],{},"Flowing ribbons of light with a multi-color gradient",[31911,73339],{"component":73329},[23,73341,31915],{"id":26533},[31917,73343],{":props":73344},"[{\"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,73346,31923],{"id":31922},[246,73348,73349,73378,73406,73434,73462],{":tabs":1557},[212,73350,73352],{"className":334,"code":73351,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,73353,73354,73362,73370],{"__ignoreMap":178},[220,73355,73356,73358,73360],{"class":222,"line":223},[220,73357,343],{"class":264},[220,73359,347],{"class":346},[220,73361,359],{"class":264},[220,73363,73364,73366,73368],{"class":222,"line":179},[220,73365,364],{"class":264},[220,73367,73329],{"class":346},[220,73369,386],{"class":264},[220,73371,73372,73374,73376],{"class":222,"line":389},[220,73373,402],{"class":264},[220,73375,347],{"class":346},[220,73377,359],{"class":264},[212,73379,73380],{"className":409,"code":73351,"language":411,"meta":178,"style":178},[99,73381,73382,73390,73398],{"__ignoreMap":178},[220,73383,73384,73386,73388],{"class":222,"line":223},[220,73385,343],{"class":264},[220,73387,347],{"class":420},[220,73389,359],{"class":264},[220,73391,73392,73394,73396],{"class":222,"line":179},[220,73393,364],{"class":264},[220,73395,73329],{"class":420},[220,73397,386],{"class":264},[220,73399,73400,73402,73404],{"class":222,"line":389},[220,73401,402],{"class":264},[220,73403,347],{"class":420},[220,73405,359],{"class":264},[212,73407,73408],{"className":2844,"code":73351,"language":2846,"meta":178,"style":178},[99,73409,73410,73418,73426],{"__ignoreMap":178},[220,73411,73412,73414,73416],{"class":222,"line":223},[220,73413,343],{"class":264},[220,73415,347],{"class":420},[220,73417,359],{"class":264},[220,73419,73420,73422,73424],{"class":222,"line":179},[220,73421,364],{"class":264},[220,73423,73329],{"class":420},[220,73425,386],{"class":264},[220,73427,73428,73430,73432],{"class":222,"line":389},[220,73429,402],{"class":264},[220,73431,347],{"class":420},[220,73433,359],{"class":264},[212,73435,73436],{"className":468,"code":73351,"language":469,"meta":178,"style":178},[99,73437,73438,73446,73454],{"__ignoreMap":178},[220,73439,73440,73442,73444],{"class":222,"line":223},[220,73441,343],{"class":264},[220,73443,347],{"class":420},[220,73445,359],{"class":264},[220,73447,73448,73450,73452],{"class":222,"line":179},[220,73449,364],{"class":264},[220,73451,73329],{"class":420},[220,73453,386],{"class":264},[220,73455,73456,73458,73460],{"class":222,"line":389},[220,73457,402],{"class":264},[220,73459,347],{"class":420},[220,73461,359],{"class":264},[212,73463,73465],{"className":251,"code":73464,"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,73466,73467,73477,73481,73495,73499,73508,73512],{"__ignoreMap":178},[220,73468,73469,73471,73473,73475],{"class":222,"line":223},[220,73470,261],{"class":260},[220,73472,11512],{"class":264},[220,73474,268],{"class":260},[220,73476,4007],{"class":230},[220,73478,73479],{"class":222,"line":179},[220,73480,647],{"emptyLinePlaceholder":194},[220,73482,73483,73485,73487,73489,73491,73493],{"class":222,"line":389},[220,73484,1735],{"class":260},[220,73486,1738],{"class":420},[220,73488,1741],{"class":260},[220,73490,1744],{"class":260},[220,73492,1747],{"class":226},[220,73494,1750],{"class":264},[220,73496,73497],{"class":222,"line":399},[220,73498,1765],{"class":264},[220,73500,73501,73503,73506],{"class":222,"line":644},[220,73502,1770],{"class":264},[220,73504,73505],{"class":230},"'Strands'",[220,73507,2465],{"class":264},[220,73509,73510],{"class":222,"line":650},[220,73511,1787],{"class":264},[220,73513,73514],{"class":222,"line":656},[220,73515,1792],{"class":264},[1504,73517,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73519},[73520,73521],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":73329,"description":73337},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":73528,"title":73529,"body":73530,"category":33396,"componentType":25883,"description":73537,"extension":191,"meta":73798,"navigation":194,"path":73799,"requiresChild":194,"seo":73800,"stem":73801,"__hash__":73802},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":73531,"toc":73794},[73532,73535,73538,73540,73542,73545,73547,73792],[11,73533,73529],{"id":73534},"stretch",[15,73536,73537],{},"Stretch content towards a direction from a center point",[31911,73539],{"component":73529},[23,73541,31915],{"id":26533},[31917,73543],{":props":73544},"[{\"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,73546,31923],{"id":31922},[246,73548,73549,73594,73638,73682,73726],{":tabs":1557},[212,73550,73552],{"className":334,"code":73551,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,73553,73554,73562,73570,73578,73586],{"__ignoreMap":178},[220,73555,73556,73558,73560],{"class":222,"line":223},[220,73557,343],{"class":264},[220,73559,347],{"class":346},[220,73561,359],{"class":264},[220,73563,73564,73566,73568],{"class":222,"line":179},[220,73565,364],{"class":264},[220,73567,73529],{"class":346},[220,73569,359],{"class":264},[220,73571,73572,73574,73576],{"class":222,"line":389},[220,73573,2550],{"class":264},[220,73575,2553],{"class":346},[220,73577,386],{"class":264},[220,73579,73580,73582,73584],{"class":222,"line":399},[220,73581,2567],{"class":264},[220,73583,73529],{"class":346},[220,73585,359],{"class":264},[220,73587,73588,73590,73592],{"class":222,"line":644},[220,73589,402],{"class":264},[220,73591,347],{"class":346},[220,73593,359],{"class":264},[212,73595,73596],{"className":409,"code":73551,"language":411,"meta":178,"style":178},[99,73597,73598,73606,73614,73622,73630],{"__ignoreMap":178},[220,73599,73600,73602,73604],{"class":222,"line":223},[220,73601,343],{"class":264},[220,73603,347],{"class":420},[220,73605,359],{"class":264},[220,73607,73608,73610,73612],{"class":222,"line":179},[220,73609,364],{"class":264},[220,73611,73529],{"class":420},[220,73613,359],{"class":264},[220,73615,73616,73618,73620],{"class":222,"line":389},[220,73617,2550],{"class":264},[220,73619,2553],{"class":420},[220,73621,386],{"class":264},[220,73623,73624,73626,73628],{"class":222,"line":399},[220,73625,2567],{"class":264},[220,73627,73529],{"class":420},[220,73629,359],{"class":264},[220,73631,73632,73634,73636],{"class":222,"line":644},[220,73633,402],{"class":264},[220,73635,347],{"class":420},[220,73637,359],{"class":264},[212,73639,73640],{"className":2844,"code":73551,"language":2846,"meta":178,"style":178},[99,73641,73642,73650,73658,73666,73674],{"__ignoreMap":178},[220,73643,73644,73646,73648],{"class":222,"line":223},[220,73645,343],{"class":264},[220,73647,347],{"class":420},[220,73649,359],{"class":264},[220,73651,73652,73654,73656],{"class":222,"line":179},[220,73653,364],{"class":264},[220,73655,73529],{"class":420},[220,73657,359],{"class":264},[220,73659,73660,73662,73664],{"class":222,"line":389},[220,73661,2550],{"class":264},[220,73663,2553],{"class":420},[220,73665,386],{"class":264},[220,73667,73668,73670,73672],{"class":222,"line":399},[220,73669,2567],{"class":264},[220,73671,73529],{"class":420},[220,73673,359],{"class":264},[220,73675,73676,73678,73680],{"class":222,"line":644},[220,73677,402],{"class":264},[220,73679,347],{"class":420},[220,73681,359],{"class":264},[212,73683,73684],{"className":468,"code":73551,"language":469,"meta":178,"style":178},[99,73685,73686,73694,73702,73710,73718],{"__ignoreMap":178},[220,73687,73688,73690,73692],{"class":222,"line":223},[220,73689,343],{"class":264},[220,73691,347],{"class":420},[220,73693,359],{"class":264},[220,73695,73696,73698,73700],{"class":222,"line":179},[220,73697,364],{"class":264},[220,73699,73529],{"class":420},[220,73701,359],{"class":264},[220,73703,73704,73706,73708],{"class":222,"line":389},[220,73705,2550],{"class":264},[220,73707,2553],{"class":420},[220,73709,386],{"class":264},[220,73711,73712,73714,73716],{"class":222,"line":399},[220,73713,2567],{"class":264},[220,73715,73529],{"class":420},[220,73717,359],{"class":264},[220,73719,73720,73722,73724],{"class":222,"line":644},[220,73721,402],{"class":264},[220,73723,347],{"class":420},[220,73725,359],{"class":264},[212,73727,73729],{"className":251,"code":73728,"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,73730,73731,73741,73745,73759,73763,73772,73780,73784,73788],{"__ignoreMap":178},[220,73732,73733,73735,73737,73739],{"class":222,"line":223},[220,73734,261],{"class":260},[220,73736,11512],{"class":264},[220,73738,268],{"class":260},[220,73740,4007],{"class":230},[220,73742,73743],{"class":222,"line":179},[220,73744,647],{"emptyLinePlaceholder":194},[220,73746,73747,73749,73751,73753,73755,73757],{"class":222,"line":389},[220,73748,1735],{"class":260},[220,73750,1738],{"class":420},[220,73752,1741],{"class":260},[220,73754,1744],{"class":260},[220,73756,1747],{"class":226},[220,73758,1750],{"class":264},[220,73760,73761],{"class":222,"line":399},[220,73762,1765],{"class":264},[220,73764,73765,73767,73770],{"class":222,"line":644},[220,73766,1770],{"class":264},[220,73768,73769],{"class":230},"'Stretch'",[220,73771,7009],{"class":264},[220,73773,73774,73776,73778],{"class":222,"line":650},[220,73775,7014],{"class":264},[220,73777,3206],{"class":230},[220,73779,2465],{"class":264},[220,73781,73782],{"class":222,"line":656},[220,73783,7031],{"class":264},[220,73785,73786],{"class":222,"line":673},[220,73787,1787],{"class":264},[220,73789,73790],{"class":222,"line":682},[220,73791,1792],{"class":264},[1504,73793,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73795},[73796,73797],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":73529,"description":73537},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":73804,"title":15839,"body":73805,"category":33063,"componentType":25877,"description":73812,"extension":191,"meta":73996,"navigation":194,"path":73997,"requiresChild":32530,"seo":73998,"stem":73999,"__hash__":74000},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":73806,"toc":73992},[73807,73810,73813,73815,73817,73820,73822,73990],[11,73808,15839],{"id":73809},"stripes",[15,73811,73812],{},"Alternating colored stripes with animation",[31911,73814],{"component":15839},[23,73816,31915],{"id":26533},[31917,73818],{":props":73819},"[{\"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,73821,31923],{"id":31922},[246,73823,73824,73853,73881,73909,73937],{":tabs":1557},[212,73825,73827],{"className":334,"code":73826,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,73828,73829,73837,73845],{"__ignoreMap":178},[220,73830,73831,73833,73835],{"class":222,"line":223},[220,73832,343],{"class":264},[220,73834,347],{"class":346},[220,73836,359],{"class":264},[220,73838,73839,73841,73843],{"class":222,"line":179},[220,73840,364],{"class":264},[220,73842,15839],{"class":346},[220,73844,386],{"class":264},[220,73846,73847,73849,73851],{"class":222,"line":389},[220,73848,402],{"class":264},[220,73850,347],{"class":346},[220,73852,359],{"class":264},[212,73854,73855],{"className":409,"code":73826,"language":411,"meta":178,"style":178},[99,73856,73857,73865,73873],{"__ignoreMap":178},[220,73858,73859,73861,73863],{"class":222,"line":223},[220,73860,343],{"class":264},[220,73862,347],{"class":420},[220,73864,359],{"class":264},[220,73866,73867,73869,73871],{"class":222,"line":179},[220,73868,364],{"class":264},[220,73870,15839],{"class":420},[220,73872,386],{"class":264},[220,73874,73875,73877,73879],{"class":222,"line":389},[220,73876,402],{"class":264},[220,73878,347],{"class":420},[220,73880,359],{"class":264},[212,73882,73883],{"className":2844,"code":73826,"language":2846,"meta":178,"style":178},[99,73884,73885,73893,73901],{"__ignoreMap":178},[220,73886,73887,73889,73891],{"class":222,"line":223},[220,73888,343],{"class":264},[220,73890,347],{"class":420},[220,73892,359],{"class":264},[220,73894,73895,73897,73899],{"class":222,"line":179},[220,73896,364],{"class":264},[220,73898,15839],{"class":420},[220,73900,386],{"class":264},[220,73902,73903,73905,73907],{"class":222,"line":389},[220,73904,402],{"class":264},[220,73906,347],{"class":420},[220,73908,359],{"class":264},[212,73910,73911],{"className":468,"code":73826,"language":469,"meta":178,"style":178},[99,73912,73913,73921,73929],{"__ignoreMap":178},[220,73914,73915,73917,73919],{"class":222,"line":223},[220,73916,343],{"class":264},[220,73918,347],{"class":420},[220,73920,359],{"class":264},[220,73922,73923,73925,73927],{"class":222,"line":179},[220,73924,364],{"class":264},[220,73926,15839],{"class":420},[220,73928,386],{"class":264},[220,73930,73931,73933,73935],{"class":222,"line":389},[220,73932,402],{"class":264},[220,73934,347],{"class":420},[220,73936,359],{"class":264},[212,73938,73940],{"className":251,"code":73939,"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,73941,73942,73952,73956,73970,73974,73982,73986],{"__ignoreMap":178},[220,73943,73944,73946,73948,73950],{"class":222,"line":223},[220,73945,261],{"class":260},[220,73947,11512],{"class":264},[220,73949,268],{"class":260},[220,73951,4007],{"class":230},[220,73953,73954],{"class":222,"line":179},[220,73955,647],{"emptyLinePlaceholder":194},[220,73957,73958,73960,73962,73964,73966,73968],{"class":222,"line":389},[220,73959,1735],{"class":260},[220,73961,1738],{"class":420},[220,73963,1741],{"class":260},[220,73965,1744],{"class":260},[220,73967,1747],{"class":226},[220,73969,1750],{"class":264},[220,73971,73972],{"class":222,"line":399},[220,73973,1765],{"class":264},[220,73975,73976,73978,73980],{"class":222,"line":644},[220,73977,1770],{"class":264},[220,73979,17097],{"class":230},[220,73981,2465],{"class":264},[220,73983,73984],{"class":222,"line":650},[220,73985,1787],{"class":264},[220,73987,73988],{"class":222,"line":656},[220,73989,1792],{"class":264},[1504,73991,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73993},[73994,73995],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":15839,"description":73812},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":74002,"title":74003,"body":74004,"category":33063,"componentType":25877,"description":74011,"extension":191,"meta":74243,"navigation":194,"path":74244,"requiresChild":32530,"seo":74245,"stem":74246,"__hash__":74247},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":74005,"toc":74239},[74006,74009,74012,74014,74016,74019,74021,74237],[11,74007,74003],{"id":74008},"studiobackground",[15,74010,74011],{},"Multi-light studio background with ambient motion.",[31911,74013],{"component":74003},[23,74015,31915],{"id":26533},[31917,74017],{":props":74018},"[{\"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,74020,31923],{"id":31922},[246,74022,74023,74064,74102,74140,74178],{":tabs":1557},[212,74024,74026],{"className":334,"code":74025,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,74027,74028,74036,74043,74052,74056],{"__ignoreMap":178},[220,74029,74030,74032,74034],{"class":222,"line":223},[220,74031,343],{"class":264},[220,74033,347],{"class":346},[220,74035,359],{"class":264},[220,74037,74038,74040],{"class":222,"line":179},[220,74039,364],{"class":264},[220,74041,74042],{"class":346},"StudioBackground\n",[220,74044,74045,74047,74049],{"class":222,"line":389},[220,74046,9635],{"class":226},[220,74048,353],{"class":264},[220,74050,74051],{"class":230},"\"#d8dbec\"\n",[220,74053,74054],{"class":222,"line":399},[220,74055,1234],{"class":264},[220,74057,74058,74060,74062],{"class":222,"line":644},[220,74059,402],{"class":264},[220,74061,347],{"class":346},[220,74063,359],{"class":264},[212,74065,74066],{"className":409,"code":74025,"language":411,"meta":178,"style":178},[99,74067,74068,74076,74082,74090,74094],{"__ignoreMap":178},[220,74069,74070,74072,74074],{"class":222,"line":223},[220,74071,343],{"class":264},[220,74073,347],{"class":420},[220,74075,359],{"class":264},[220,74077,74078,74080],{"class":222,"line":179},[220,74079,364],{"class":264},[220,74081,74042],{"class":420},[220,74083,74084,74086,74088],{"class":222,"line":389},[220,74085,9635],{"class":226},[220,74087,353],{"class":260},[220,74089,74051],{"class":230},[220,74091,74092],{"class":222,"line":399},[220,74093,1234],{"class":264},[220,74095,74096,74098,74100],{"class":222,"line":644},[220,74097,402],{"class":264},[220,74099,347],{"class":420},[220,74101,359],{"class":264},[212,74103,74104],{"className":2844,"code":74025,"language":2846,"meta":178,"style":178},[99,74105,74106,74114,74120,74128,74132],{"__ignoreMap":178},[220,74107,74108,74110,74112],{"class":222,"line":223},[220,74109,343],{"class":264},[220,74111,347],{"class":420},[220,74113,359],{"class":264},[220,74115,74116,74118],{"class":222,"line":179},[220,74117,364],{"class":264},[220,74119,74042],{"class":420},[220,74121,74122,74124,74126],{"class":222,"line":389},[220,74123,9635],{"class":226},[220,74125,353],{"class":264},[220,74127,74051],{"class":230},[220,74129,74130],{"class":222,"line":399},[220,74131,1234],{"class":264},[220,74133,74134,74136,74138],{"class":222,"line":644},[220,74135,402],{"class":264},[220,74137,347],{"class":420},[220,74139,359],{"class":264},[212,74141,74142],{"className":468,"code":74025,"language":469,"meta":178,"style":178},[99,74143,74144,74152,74158,74166,74170],{"__ignoreMap":178},[220,74145,74146,74148,74150],{"class":222,"line":223},[220,74147,343],{"class":264},[220,74149,347],{"class":420},[220,74151,359],{"class":264},[220,74153,74154,74156],{"class":222,"line":179},[220,74155,364],{"class":264},[220,74157,74042],{"class":420},[220,74159,74160,74162,74164],{"class":222,"line":389},[220,74161,9635],{"class":226},[220,74163,353],{"class":260},[220,74165,74051],{"class":230},[220,74167,74168],{"class":222,"line":399},[220,74169,1234],{"class":264},[220,74171,74172,74174,74176],{"class":222,"line":644},[220,74173,402],{"class":264},[220,74175,347],{"class":420},[220,74177,359],{"class":264},[212,74179,74181],{"className":251,"code":74180,"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,74182,74183,74193,74197,74211,74215,74229,74233],{"__ignoreMap":178},[220,74184,74185,74187,74189,74191],{"class":222,"line":223},[220,74186,261],{"class":260},[220,74188,11512],{"class":264},[220,74190,268],{"class":260},[220,74192,4007],{"class":230},[220,74194,74195],{"class":222,"line":179},[220,74196,647],{"emptyLinePlaceholder":194},[220,74198,74199,74201,74203,74205,74207,74209],{"class":222,"line":389},[220,74200,1735],{"class":260},[220,74202,1738],{"class":420},[220,74204,1741],{"class":260},[220,74206,1744],{"class":260},[220,74208,1747],{"class":226},[220,74210,1750],{"class":264},[220,74212,74213],{"class":222,"line":399},[220,74214,1765],{"class":264},[220,74216,74217,74219,74222,74224,74227],{"class":222,"line":644},[220,74218,1770],{"class":264},[220,74220,74221],{"class":230},"'StudioBackground'",[220,74223,1776],{"class":264},[220,74225,74226],{"class":230},"'#d8dbec'",[220,74228,1782],{"class":264},[220,74230,74231],{"class":222,"line":650},[220,74232,1787],{"class":264},[220,74234,74235],{"class":222,"line":656},[220,74236,1792],{"class":264},[1504,74238,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74240},[74241,74242],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":74003,"description":74011},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":74249,"title":74250,"body":74251,"category":33063,"componentType":25877,"description":74258,"extension":191,"meta":74537,"navigation":194,"path":74538,"requiresChild":32530,"seo":74539,"stem":74540,"__hash__":74541},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":74252,"toc":74533},[74253,74256,74259,74261,74263,74266,74268,74531],[11,74254,74250],{"id":74255},"sunburst",[15,74257,74258],{},"Radial sunburst rays emanating from a center point",[31911,74260],{"component":74250},[23,74262,31915],{"id":26533},[31917,74264],{":props":74265},"[{\"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,74267,31923],{"id":31922},[246,74269,74270,74319,74370,74418,74468],{":tabs":1557},[212,74271,74273],{"className":334,"code":74272,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,74274,74275,74283,74290,74299,74307,74311],{"__ignoreMap":178},[220,74276,74277,74279,74281],{"class":222,"line":223},[220,74278,343],{"class":264},[220,74280,347],{"class":346},[220,74282,359],{"class":264},[220,74284,74285,74287],{"class":222,"line":179},[220,74286,364],{"class":264},[220,74288,74289],{"class":346},"SunBurst\n",[220,74291,74292,74294,74296],{"class":222,"line":389},[220,74293,9635],{"class":226},[220,74295,353],{"class":264},[220,74297,74298],{"class":230},"\"#ffdd88\"\n",[220,74300,74301,74303,74305],{"class":222,"line":399},[220,74302,17405],{"class":226},[220,74304,353],{"class":264},[220,74306,9650],{"class":230},[220,74308,74309],{"class":222,"line":644},[220,74310,1234],{"class":264},[220,74312,74313,74315,74317],{"class":222,"line":650},[220,74314,402],{"class":264},[220,74316,347],{"class":346},[220,74318,359],{"class":264},[212,74320,74322],{"className":409,"code":74321,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,74323,74324,74332,74338,74346,74358,74362],{"__ignoreMap":178},[220,74325,74326,74328,74330],{"class":222,"line":223},[220,74327,343],{"class":264},[220,74329,347],{"class":420},[220,74331,359],{"class":264},[220,74333,74334,74336],{"class":222,"line":179},[220,74335,364],{"class":264},[220,74337,74289],{"class":420},[220,74339,74340,74342,74344],{"class":222,"line":389},[220,74341,9635],{"class":226},[220,74343,353],{"class":260},[220,74345,74298],{"class":230},[220,74347,74348,74350,74352,74354,74356],{"class":222,"line":399},[220,74349,9645],{"class":226},[220,74351,353],{"class":260},[220,74353,743],{"class":264},[220,74355,6299],{"class":420},[220,74357,749],{"class":264},[220,74359,74360],{"class":222,"line":644},[220,74361,1234],{"class":264},[220,74363,74364,74366,74368],{"class":222,"line":650},[220,74365,402],{"class":264},[220,74367,347],{"class":420},[220,74369,359],{"class":264},[212,74371,74372],{"className":2844,"code":74321,"language":2846,"meta":178,"style":178},[99,74373,74374,74382,74388,74396,74406,74410],{"__ignoreMap":178},[220,74375,74376,74378,74380],{"class":222,"line":223},[220,74377,343],{"class":264},[220,74379,347],{"class":420},[220,74381,359],{"class":264},[220,74383,74384,74386],{"class":222,"line":179},[220,74385,364],{"class":264},[220,74387,74289],{"class":420},[220,74389,74390,74392,74394],{"class":222,"line":389},[220,74391,9635],{"class":226},[220,74393,353],{"class":264},[220,74395,74298],{"class":230},[220,74397,74398,74400,74402,74404],{"class":222,"line":399},[220,74399,9645],{"class":226},[220,74401,29871],{"class":264},[220,74403,6299],{"class":420},[220,74405,749],{"class":264},[220,74407,74408],{"class":222,"line":644},[220,74409,1234],{"class":264},[220,74411,74412,74414,74416],{"class":222,"line":650},[220,74413,402],{"class":264},[220,74415,347],{"class":420},[220,74417,359],{"class":264},[212,74419,74420],{"className":468,"code":74321,"language":469,"meta":178,"style":178},[99,74421,74422,74430,74436,74444,74456,74460],{"__ignoreMap":178},[220,74423,74424,74426,74428],{"class":222,"line":223},[220,74425,343],{"class":264},[220,74427,347],{"class":420},[220,74429,359],{"class":264},[220,74431,74432,74434],{"class":222,"line":179},[220,74433,364],{"class":264},[220,74435,74289],{"class":420},[220,74437,74438,74440,74442],{"class":222,"line":389},[220,74439,9635],{"class":226},[220,74441,353],{"class":260},[220,74443,74298],{"class":230},[220,74445,74446,74448,74450,74452,74454],{"class":222,"line":399},[220,74447,9645],{"class":226},[220,74449,353],{"class":260},[220,74451,743],{"class":264},[220,74453,6299],{"class":420},[220,74455,749],{"class":264},[220,74457,74458],{"class":222,"line":644},[220,74459,1234],{"class":264},[220,74461,74462,74464,74466],{"class":222,"line":650},[220,74463,402],{"class":264},[220,74465,347],{"class":420},[220,74467,359],{"class":264},[212,74469,74471],{"className":251,"code":74470,"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,74472,74473,74483,74487,74501,74505,74523,74527],{"__ignoreMap":178},[220,74474,74475,74477,74479,74481],{"class":222,"line":223},[220,74476,261],{"class":260},[220,74478,11512],{"class":264},[220,74480,268],{"class":260},[220,74482,4007],{"class":230},[220,74484,74485],{"class":222,"line":179},[220,74486,647],{"emptyLinePlaceholder":194},[220,74488,74489,74491,74493,74495,74497,74499],{"class":222,"line":389},[220,74490,1735],{"class":260},[220,74492,1738],{"class":420},[220,74494,1741],{"class":260},[220,74496,1744],{"class":260},[220,74498,1747],{"class":226},[220,74500,1750],{"class":264},[220,74502,74503],{"class":222,"line":399},[220,74504,1765],{"class":264},[220,74506,74507,74509,74512,74514,74517,74519,74521],{"class":222,"line":644},[220,74508,1770],{"class":264},[220,74510,74511],{"class":230},"'SunBurst'",[220,74513,1776],{"class":264},[220,74515,74516],{"class":230},"'#ffdd88'",[220,74518,6566],{"class":264},[220,74520,6299],{"class":420},[220,74522,1782],{"class":264},[220,74524,74525],{"class":222,"line":650},[220,74526,1787],{"class":264},[220,74528,74529],{"class":222,"line":656},[220,74530,1792],{"class":264},[1504,74532,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74534},[74535,74536],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":74250,"description":74258},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":74543,"title":74544,"body":74545,"category":33396,"componentType":25883,"description":74552,"extension":191,"meta":74813,"navigation":194,"path":74814,"requiresChild":194,"seo":74815,"stem":74816,"__hash__":74817},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":74546,"toc":74809},[74547,74550,74553,74555,74557,74560,74562,74807],[11,74548,74544],{"id":74549},"surface3d",[15,74551,74552],{},"Drapes child content over a 3D wave surface with perspective and lighting",[31911,74554],{"component":74544},[23,74556,31915],{"id":26533},[31917,74558],{":props":74559},"[{\"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,74561,31923],{"id":31922},[246,74563,74564,74609,74653,74697,74741],{":tabs":1557},[212,74565,74567],{"className":334,"code":74566,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,74568,74569,74577,74585,74593,74601],{"__ignoreMap":178},[220,74570,74571,74573,74575],{"class":222,"line":223},[220,74572,343],{"class":264},[220,74574,347],{"class":346},[220,74576,359],{"class":264},[220,74578,74579,74581,74583],{"class":222,"line":179},[220,74580,364],{"class":264},[220,74582,74544],{"class":346},[220,74584,359],{"class":264},[220,74586,74587,74589,74591],{"class":222,"line":389},[220,74588,2550],{"class":264},[220,74590,2553],{"class":346},[220,74592,386],{"class":264},[220,74594,74595,74597,74599],{"class":222,"line":399},[220,74596,2567],{"class":264},[220,74598,74544],{"class":346},[220,74600,359],{"class":264},[220,74602,74603,74605,74607],{"class":222,"line":644},[220,74604,402],{"class":264},[220,74606,347],{"class":346},[220,74608,359],{"class":264},[212,74610,74611],{"className":409,"code":74566,"language":411,"meta":178,"style":178},[99,74612,74613,74621,74629,74637,74645],{"__ignoreMap":178},[220,74614,74615,74617,74619],{"class":222,"line":223},[220,74616,343],{"class":264},[220,74618,347],{"class":420},[220,74620,359],{"class":264},[220,74622,74623,74625,74627],{"class":222,"line":179},[220,74624,364],{"class":264},[220,74626,74544],{"class":420},[220,74628,359],{"class":264},[220,74630,74631,74633,74635],{"class":222,"line":389},[220,74632,2550],{"class":264},[220,74634,2553],{"class":420},[220,74636,386],{"class":264},[220,74638,74639,74641,74643],{"class":222,"line":399},[220,74640,2567],{"class":264},[220,74642,74544],{"class":420},[220,74644,359],{"class":264},[220,74646,74647,74649,74651],{"class":222,"line":644},[220,74648,402],{"class":264},[220,74650,347],{"class":420},[220,74652,359],{"class":264},[212,74654,74655],{"className":2844,"code":74566,"language":2846,"meta":178,"style":178},[99,74656,74657,74665,74673,74681,74689],{"__ignoreMap":178},[220,74658,74659,74661,74663],{"class":222,"line":223},[220,74660,343],{"class":264},[220,74662,347],{"class":420},[220,74664,359],{"class":264},[220,74666,74667,74669,74671],{"class":222,"line":179},[220,74668,364],{"class":264},[220,74670,74544],{"class":420},[220,74672,359],{"class":264},[220,74674,74675,74677,74679],{"class":222,"line":389},[220,74676,2550],{"class":264},[220,74678,2553],{"class":420},[220,74680,386],{"class":264},[220,74682,74683,74685,74687],{"class":222,"line":399},[220,74684,2567],{"class":264},[220,74686,74544],{"class":420},[220,74688,359],{"class":264},[220,74690,74691,74693,74695],{"class":222,"line":644},[220,74692,402],{"class":264},[220,74694,347],{"class":420},[220,74696,359],{"class":264},[212,74698,74699],{"className":468,"code":74566,"language":469,"meta":178,"style":178},[99,74700,74701,74709,74717,74725,74733],{"__ignoreMap":178},[220,74702,74703,74705,74707],{"class":222,"line":223},[220,74704,343],{"class":264},[220,74706,347],{"class":420},[220,74708,359],{"class":264},[220,74710,74711,74713,74715],{"class":222,"line":179},[220,74712,364],{"class":264},[220,74714,74544],{"class":420},[220,74716,359],{"class":264},[220,74718,74719,74721,74723],{"class":222,"line":389},[220,74720,2550],{"class":264},[220,74722,2553],{"class":420},[220,74724,386],{"class":264},[220,74726,74727,74729,74731],{"class":222,"line":399},[220,74728,2567],{"class":264},[220,74730,74544],{"class":420},[220,74732,359],{"class":264},[220,74734,74735,74737,74739],{"class":222,"line":644},[220,74736,402],{"class":264},[220,74738,347],{"class":420},[220,74740,359],{"class":264},[212,74742,74744],{"className":251,"code":74743,"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,74745,74746,74756,74760,74774,74778,74787,74795,74799,74803],{"__ignoreMap":178},[220,74747,74748,74750,74752,74754],{"class":222,"line":223},[220,74749,261],{"class":260},[220,74751,11512],{"class":264},[220,74753,268],{"class":260},[220,74755,4007],{"class":230},[220,74757,74758],{"class":222,"line":179},[220,74759,647],{"emptyLinePlaceholder":194},[220,74761,74762,74764,74766,74768,74770,74772],{"class":222,"line":389},[220,74763,1735],{"class":260},[220,74765,1738],{"class":420},[220,74767,1741],{"class":260},[220,74769,1744],{"class":260},[220,74771,1747],{"class":226},[220,74773,1750],{"class":264},[220,74775,74776],{"class":222,"line":399},[220,74777,1765],{"class":264},[220,74779,74780,74782,74785],{"class":222,"line":644},[220,74781,1770],{"class":264},[220,74783,74784],{"class":230},"'Surface3D'",[220,74786,7009],{"class":264},[220,74788,74789,74791,74793],{"class":222,"line":650},[220,74790,7014],{"class":264},[220,74792,3206],{"class":230},[220,74794,2465],{"class":264},[220,74796,74797],{"class":222,"line":656},[220,74798,7031],{"class":264},[220,74800,74801],{"class":222,"line":673},[220,74802,1787],{"class":264},[220,74804,74805],{"class":222,"line":682},[220,74806,1792],{"class":264},[1504,74808,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":74810},[74811,74812],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":74544,"description":74552},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":74819,"title":14003,"body":74820,"category":33063,"componentType":25877,"description":74827,"extension":191,"meta":75012,"navigation":194,"path":75013,"requiresChild":32530,"seo":75014,"stem":75015,"__hash__":75016},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":74821,"toc":75008},[74822,74825,74828,74830,74832,74835,74837,75006],[11,74823,14003],{"id":74824},"swirl",[15,74826,74827],{},"Flowing swirl pattern with multi-layered noise",[31911,74829],{"component":14003},[23,74831,31915],{"id":26533},[31917,74833],{":props":74834},"[{\"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,74836,31923],{"id":31922},[246,74838,74839,74868,74896,74924,74952],{":tabs":1557},[212,74840,74842],{"className":334,"code":74841,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,74843,74844,74852,74860],{"__ignoreMap":178},[220,74845,74846,74848,74850],{"class":222,"line":223},[220,74847,343],{"class":264},[220,74849,347],{"class":346},[220,74851,359],{"class":264},[220,74853,74854,74856,74858],{"class":222,"line":179},[220,74855,364],{"class":264},[220,74857,14003],{"class":346},[220,74859,386],{"class":264},[220,74861,74862,74864,74866],{"class":222,"line":389},[220,74863,402],{"class":264},[220,74865,347],{"class":346},[220,74867,359],{"class":264},[212,74869,74870],{"className":409,"code":74841,"language":411,"meta":178,"style":178},[99,74871,74872,74880,74888],{"__ignoreMap":178},[220,74873,74874,74876,74878],{"class":222,"line":223},[220,74875,343],{"class":264},[220,74877,347],{"class":420},[220,74879,359],{"class":264},[220,74881,74882,74884,74886],{"class":222,"line":179},[220,74883,364],{"class":264},[220,74885,14003],{"class":420},[220,74887,386],{"class":264},[220,74889,74890,74892,74894],{"class":222,"line":389},[220,74891,402],{"class":264},[220,74893,347],{"class":420},[220,74895,359],{"class":264},[212,74897,74898],{"className":2844,"code":74841,"language":2846,"meta":178,"style":178},[99,74899,74900,74908,74916],{"__ignoreMap":178},[220,74901,74902,74904,74906],{"class":222,"line":223},[220,74903,343],{"class":264},[220,74905,347],{"class":420},[220,74907,359],{"class":264},[220,74909,74910,74912,74914],{"class":222,"line":179},[220,74911,364],{"class":264},[220,74913,14003],{"class":420},[220,74915,386],{"class":264},[220,74917,74918,74920,74922],{"class":222,"line":389},[220,74919,402],{"class":264},[220,74921,347],{"class":420},[220,74923,359],{"class":264},[212,74925,74926],{"className":468,"code":74841,"language":469,"meta":178,"style":178},[99,74927,74928,74936,74944],{"__ignoreMap":178},[220,74929,74930,74932,74934],{"class":222,"line":223},[220,74931,343],{"class":264},[220,74933,347],{"class":420},[220,74935,359],{"class":264},[220,74937,74938,74940,74942],{"class":222,"line":179},[220,74939,364],{"class":264},[220,74941,14003],{"class":420},[220,74943,386],{"class":264},[220,74945,74946,74948,74950],{"class":222,"line":389},[220,74947,402],{"class":264},[220,74949,347],{"class":420},[220,74951,359],{"class":264},[212,74953,74955],{"className":251,"code":74954,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Swirl', props: {} }\n ]\n})\n",[99,74956,74957,74967,74971,74985,74989,74998,75002],{"__ignoreMap":178},[220,74958,74959,74961,74963,74965],{"class":222,"line":223},[220,74960,261],{"class":260},[220,74962,11512],{"class":264},[220,74964,268],{"class":260},[220,74966,4007],{"class":230},[220,74968,74969],{"class":222,"line":179},[220,74970,647],{"emptyLinePlaceholder":194},[220,74972,74973,74975,74977,74979,74981,74983],{"class":222,"line":389},[220,74974,1735],{"class":260},[220,74976,1738],{"class":420},[220,74978,1741],{"class":260},[220,74980,1744],{"class":260},[220,74982,1747],{"class":226},[220,74984,1750],{"class":264},[220,74986,74987],{"class":222,"line":399},[220,74988,1765],{"class":264},[220,74990,74991,74993,74996],{"class":222,"line":644},[220,74992,1770],{"class":264},[220,74994,74995],{"class":230},"'Swirl'",[220,74997,2465],{"class":264},[220,74999,75000],{"class":222,"line":650},[220,75001,1787],{"class":264},[220,75003,75004],{"class":222,"line":656},[220,75005,1792],{"class":264},[1504,75007,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":75009},[75010,75011],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":14003,"description":74827},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":75018,"title":75019,"body":75020,"category":15908,"componentType":25877,"description":75027,"extension":191,"meta":75305,"navigation":194,"path":75306,"requiresChild":32530,"seo":75307,"stem":75308,"__hash__":75309},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":75021,"toc":75301},[75022,75025,75028,75030,75032,75035,75037,75299],[11,75023,75019],{"id":75024},"teardrop",[15,75026,75027],{},"Teardrop — a rounded bulb tapering to a sharp point",[31911,75029],{"component":75019},[23,75031,31915],{"id":26533},[31917,75033],{":props":75034},"[{\"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,75036,31923],{"id":31922},[246,75038,75039,75088,75139,75187,75237],{":tabs":1557},[212,75040,75042],{"className":334,"code":75041,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,75043,75044,75052,75059,75067,75076,75080],{"__ignoreMap":178},[220,75045,75046,75048,75050],{"class":222,"line":223},[220,75047,343],{"class":264},[220,75049,347],{"class":346},[220,75051,359],{"class":264},[220,75053,75054,75056],{"class":222,"line":179},[220,75055,364],{"class":264},[220,75057,75058],{"class":346},"Teardrop\n",[220,75060,75061,75063,75065],{"class":222,"line":389},[220,75062,9635],{"class":226},[220,75064,353],{"class":264},[220,75066,9591],{"class":230},[220,75068,75069,75071,75073],{"class":222,"line":399},[220,75070,17405],{"class":226},[220,75072,353],{"class":264},[220,75074,75075],{"class":230},"\"0.22\"\n",[220,75077,75078],{"class":222,"line":644},[220,75079,1234],{"class":264},[220,75081,75082,75084,75086],{"class":222,"line":650},[220,75083,402],{"class":264},[220,75085,347],{"class":346},[220,75087,359],{"class":264},[212,75089,75091],{"className":409,"code":75090,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,75092,75093,75101,75107,75115,75127,75131],{"__ignoreMap":178},[220,75094,75095,75097,75099],{"class":222,"line":223},[220,75096,343],{"class":264},[220,75098,347],{"class":420},[220,75100,359],{"class":264},[220,75102,75103,75105],{"class":222,"line":179},[220,75104,364],{"class":264},[220,75106,75058],{"class":420},[220,75108,75109,75111,75113],{"class":222,"line":389},[220,75110,9635],{"class":226},[220,75112,353],{"class":260},[220,75114,9591],{"class":230},[220,75116,75117,75119,75121,75123,75125],{"class":222,"line":399},[220,75118,9645],{"class":226},[220,75120,353],{"class":260},[220,75122,743],{"class":264},[220,75124,23949],{"class":420},[220,75126,749],{"class":264},[220,75128,75129],{"class":222,"line":644},[220,75130,1234],{"class":264},[220,75132,75133,75135,75137],{"class":222,"line":650},[220,75134,402],{"class":264},[220,75136,347],{"class":420},[220,75138,359],{"class":264},[212,75140,75141],{"className":2844,"code":75090,"language":2846,"meta":178,"style":178},[99,75142,75143,75151,75157,75165,75175,75179],{"__ignoreMap":178},[220,75144,75145,75147,75149],{"class":222,"line":223},[220,75146,343],{"class":264},[220,75148,347],{"class":420},[220,75150,359],{"class":264},[220,75152,75153,75155],{"class":222,"line":179},[220,75154,364],{"class":264},[220,75156,75058],{"class":420},[220,75158,75159,75161,75163],{"class":222,"line":389},[220,75160,9635],{"class":226},[220,75162,353],{"class":264},[220,75164,9591],{"class":230},[220,75166,75167,75169,75171,75173],{"class":222,"line":399},[220,75168,9645],{"class":226},[220,75170,29871],{"class":264},[220,75172,23949],{"class":420},[220,75174,749],{"class":264},[220,75176,75177],{"class":222,"line":644},[220,75178,1234],{"class":264},[220,75180,75181,75183,75185],{"class":222,"line":650},[220,75182,402],{"class":264},[220,75184,347],{"class":420},[220,75186,359],{"class":264},[212,75188,75189],{"className":468,"code":75090,"language":469,"meta":178,"style":178},[99,75190,75191,75199,75205,75213,75225,75229],{"__ignoreMap":178},[220,75192,75193,75195,75197],{"class":222,"line":223},[220,75194,343],{"class":264},[220,75196,347],{"class":420},[220,75198,359],{"class":264},[220,75200,75201,75203],{"class":222,"line":179},[220,75202,364],{"class":264},[220,75204,75058],{"class":420},[220,75206,75207,75209,75211],{"class":222,"line":389},[220,75208,9635],{"class":226},[220,75210,353],{"class":260},[220,75212,9591],{"class":230},[220,75214,75215,75217,75219,75221,75223],{"class":222,"line":399},[220,75216,9645],{"class":226},[220,75218,353],{"class":260},[220,75220,743],{"class":264},[220,75222,23949],{"class":420},[220,75224,749],{"class":264},[220,75226,75227],{"class":222,"line":644},[220,75228,1234],{"class":264},[220,75230,75231,75233,75235],{"class":222,"line":650},[220,75232,402],{"class":264},[220,75234,347],{"class":420},[220,75236,359],{"class":264},[212,75238,75240],{"className":251,"code":75239,"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,75241,75242,75252,75256,75270,75274,75291,75295],{"__ignoreMap":178},[220,75243,75244,75246,75248,75250],{"class":222,"line":223},[220,75245,261],{"class":260},[220,75247,11512],{"class":264},[220,75249,268],{"class":260},[220,75251,4007],{"class":230},[220,75253,75254],{"class":222,"line":179},[220,75255,647],{"emptyLinePlaceholder":194},[220,75257,75258,75260,75262,75264,75266,75268],{"class":222,"line":389},[220,75259,1735],{"class":260},[220,75261,1738],{"class":420},[220,75263,1741],{"class":260},[220,75265,1744],{"class":260},[220,75267,1747],{"class":226},[220,75269,1750],{"class":264},[220,75271,75272],{"class":222,"line":399},[220,75273,1765],{"class":264},[220,75275,75276,75278,75281,75283,75285,75287,75289],{"class":222,"line":644},[220,75277,1770],{"class":264},[220,75279,75280],{"class":230},"'Teardrop'",[220,75282,1776],{"class":264},[220,75284,10169],{"class":230},[220,75286,6566],{"class":264},[220,75288,23949],{"class":420},[220,75290,1782],{"class":264},[220,75292,75293],{"class":222,"line":650},[220,75294,1787],{"class":264},[220,75296,75297],{"class":222,"line":656},[220,75298,1792],{"class":264},[1504,75300,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75302},[75303,75304],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":75019,"description":75027},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":75311,"title":75312,"body":75313,"category":33063,"componentType":25877,"description":75319,"extension":191,"meta":75549,"navigation":194,"path":75550,"requiresChild":32530,"seo":75551,"stem":75552,"__hash__":75553},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":75314,"toc":75545},[75315,75317,75320,75322,75324,75327,75329,75543],[11,75316,75312],{"id":15644},[15,75318,75319],{},"Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture",[31911,75321],{"component":75312},[23,75323,31915],{"id":26533},[31917,75325],{":props":75326},"[{\"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,75328,31923],{"id":31922},[246,75330,75331,75371,75409,75447,75485],{":tabs":1557},[212,75332,75334],{"className":334,"code":75333,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,75335,75336,75344,75351,75359,75363],{"__ignoreMap":178},[220,75337,75338,75340,75342],{"class":222,"line":223},[220,75339,343],{"class":264},[220,75341,347],{"class":346},[220,75343,359],{"class":264},[220,75345,75346,75348],{"class":222,"line":179},[220,75347,364],{"class":264},[220,75349,75350],{"class":346},"Text\n",[220,75352,75353,75355,75357],{"class":222,"line":389},[220,75354,9635],{"class":226},[220,75356,353],{"class":264},[220,75358,9591],{"class":230},[220,75360,75361],{"class":222,"line":399},[220,75362,1234],{"class":264},[220,75364,75365,75367,75369],{"class":222,"line":644},[220,75366,402],{"class":264},[220,75368,347],{"class":346},[220,75370,359],{"class":264},[212,75372,75373],{"className":409,"code":75333,"language":411,"meta":178,"style":178},[99,75374,75375,75383,75389,75397,75401],{"__ignoreMap":178},[220,75376,75377,75379,75381],{"class":222,"line":223},[220,75378,343],{"class":264},[220,75380,347],{"class":420},[220,75382,359],{"class":264},[220,75384,75385,75387],{"class":222,"line":179},[220,75386,364],{"class":264},[220,75388,75350],{"class":420},[220,75390,75391,75393,75395],{"class":222,"line":389},[220,75392,9635],{"class":226},[220,75394,353],{"class":260},[220,75396,9591],{"class":230},[220,75398,75399],{"class":222,"line":399},[220,75400,1234],{"class":264},[220,75402,75403,75405,75407],{"class":222,"line":644},[220,75404,402],{"class":264},[220,75406,347],{"class":420},[220,75408,359],{"class":264},[212,75410,75411],{"className":2844,"code":75333,"language":2846,"meta":178,"style":178},[99,75412,75413,75421,75427,75435,75439],{"__ignoreMap":178},[220,75414,75415,75417,75419],{"class":222,"line":223},[220,75416,343],{"class":264},[220,75418,347],{"class":420},[220,75420,359],{"class":264},[220,75422,75423,75425],{"class":222,"line":179},[220,75424,364],{"class":264},[220,75426,75350],{"class":420},[220,75428,75429,75431,75433],{"class":222,"line":389},[220,75430,9635],{"class":226},[220,75432,353],{"class":264},[220,75434,9591],{"class":230},[220,75436,75437],{"class":222,"line":399},[220,75438,1234],{"class":264},[220,75440,75441,75443,75445],{"class":222,"line":644},[220,75442,402],{"class":264},[220,75444,347],{"class":420},[220,75446,359],{"class":264},[212,75448,75449],{"className":468,"code":75333,"language":469,"meta":178,"style":178},[99,75450,75451,75459,75465,75473,75477],{"__ignoreMap":178},[220,75452,75453,75455,75457],{"class":222,"line":223},[220,75454,343],{"class":264},[220,75456,347],{"class":420},[220,75458,359],{"class":264},[220,75460,75461,75463],{"class":222,"line":179},[220,75462,364],{"class":264},[220,75464,75350],{"class":420},[220,75466,75467,75469,75471],{"class":222,"line":389},[220,75468,9635],{"class":226},[220,75470,353],{"class":260},[220,75472,9591],{"class":230},[220,75474,75475],{"class":222,"line":399},[220,75476,1234],{"class":264},[220,75478,75479,75481,75483],{"class":222,"line":644},[220,75480,402],{"class":264},[220,75482,347],{"class":420},[220,75484,359],{"class":264},[212,75486,75488],{"className":251,"code":75487,"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,75489,75490,75500,75504,75518,75522,75535,75539],{"__ignoreMap":178},[220,75491,75492,75494,75496,75498],{"class":222,"line":223},[220,75493,261],{"class":260},[220,75495,11512],{"class":264},[220,75497,268],{"class":260},[220,75499,4007],{"class":230},[220,75501,75502],{"class":222,"line":179},[220,75503,647],{"emptyLinePlaceholder":194},[220,75505,75506,75508,75510,75512,75514,75516],{"class":222,"line":389},[220,75507,1735],{"class":260},[220,75509,1738],{"class":420},[220,75511,1741],{"class":260},[220,75513,1744],{"class":260},[220,75515,1747],{"class":226},[220,75517,1750],{"class":264},[220,75519,75520],{"class":222,"line":399},[220,75521,1765],{"class":264},[220,75523,75524,75526,75529,75531,75533],{"class":222,"line":644},[220,75525,1770],{"class":264},[220,75527,75528],{"class":230},"'Text'",[220,75530,1776],{"class":264},[220,75532,10169],{"class":230},[220,75534,1782],{"class":264},[220,75536,75537],{"class":222,"line":650},[220,75538,1787],{"class":264},[220,75540,75541],{"class":222,"line":656},[220,75542,1792],{"class":264},[1504,75544,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75546},[75547,75548],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":75312,"description":75319},"docs\u002Fcomponents\u002FText","V5GqEdlu-00Hi0ZR7eKOTsShbIRkhUQooFlrXUwGSSs",{"id":75555,"title":23169,"body":75556,"category":36569,"componentType":25877,"description":75563,"extension":191,"meta":75804,"navigation":194,"path":75805,"requiresChild":32530,"seo":75806,"stem":75807,"__hash__":75808},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":75557,"toc":75800},[75558,75561,75564,75566,75568,75571,75573,75798],[11,75559,23169],{"id":75560},"thinfilm",[15,75562,75563],{},"Iridescent thin-film edge",[31911,75565],{"component":23169},[23,75567,31915],{"id":26533},[31917,75569],{":props":75570},"[{\"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,75572,31923],{"id":31922},[246,75574,75575,75615,75658,75698,75740],{":tabs":1557},[212,75576,75578],{"className":334,"code":75577,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,75579,75580,75588,75595,75603,75607],{"__ignoreMap":178},[220,75581,75582,75584,75586],{"class":222,"line":223},[220,75583,343],{"class":264},[220,75585,347],{"class":346},[220,75587,359],{"class":264},[220,75589,75590,75592],{"class":222,"line":179},[220,75591,364],{"class":264},[220,75593,75594],{"class":346},"ThinFilm\n",[220,75596,75597,75599,75601],{"class":222,"line":389},[220,75598,20371],{"class":226},[220,75600,353],{"class":264},[220,75602,36625],{"class":230},[220,75604,75605],{"class":222,"line":399},[220,75606,1234],{"class":264},[220,75608,75609,75611,75613],{"class":222,"line":644},[220,75610,402],{"class":264},[220,75612,347],{"class":346},[220,75614,359],{"class":264},[212,75616,75618],{"className":409,"code":75617,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,75619,75620,75628,75634,75646,75650],{"__ignoreMap":178},[220,75621,75622,75624,75626],{"class":222,"line":223},[220,75623,343],{"class":264},[220,75625,347],{"class":420},[220,75627,359],{"class":264},[220,75629,75630,75632],{"class":222,"line":179},[220,75631,364],{"class":264},[220,75633,75594],{"class":420},[220,75635,75636,75638,75640,75642,75644],{"class":222,"line":389},[220,75637,20482],{"class":226},[220,75639,353],{"class":260},[220,75641,743],{"class":264},[220,75643,8677],{"class":420},[220,75645,749],{"class":264},[220,75647,75648],{"class":222,"line":399},[220,75649,1234],{"class":264},[220,75651,75652,75654,75656],{"class":222,"line":644},[220,75653,402],{"class":264},[220,75655,347],{"class":420},[220,75657,359],{"class":264},[212,75659,75660],{"className":2844,"code":75617,"language":2846,"meta":178,"style":178},[99,75661,75662,75670,75676,75686,75690],{"__ignoreMap":178},[220,75663,75664,75666,75668],{"class":222,"line":223},[220,75665,343],{"class":264},[220,75667,347],{"class":420},[220,75669,359],{"class":264},[220,75671,75672,75674],{"class":222,"line":179},[220,75673,364],{"class":264},[220,75675,75594],{"class":420},[220,75677,75678,75680,75682,75684],{"class":222,"line":389},[220,75679,20482],{"class":226},[220,75681,29871],{"class":264},[220,75683,8677],{"class":420},[220,75685,749],{"class":264},[220,75687,75688],{"class":222,"line":399},[220,75689,1234],{"class":264},[220,75691,75692,75694,75696],{"class":222,"line":644},[220,75693,402],{"class":264},[220,75695,347],{"class":420},[220,75697,359],{"class":264},[212,75699,75700],{"className":468,"code":75617,"language":469,"meta":178,"style":178},[99,75701,75702,75710,75716,75728,75732],{"__ignoreMap":178},[220,75703,75704,75706,75708],{"class":222,"line":223},[220,75705,343],{"class":264},[220,75707,347],{"class":420},[220,75709,359],{"class":264},[220,75711,75712,75714],{"class":222,"line":179},[220,75713,364],{"class":264},[220,75715,75594],{"class":420},[220,75717,75718,75720,75722,75724,75726],{"class":222,"line":389},[220,75719,20482],{"class":226},[220,75721,353],{"class":260},[220,75723,743],{"class":264},[220,75725,8677],{"class":420},[220,75727,749],{"class":264},[220,75729,75730],{"class":222,"line":399},[220,75731,1234],{"class":264},[220,75733,75734,75736,75738],{"class":222,"line":644},[220,75735,402],{"class":264},[220,75737,347],{"class":420},[220,75739,359],{"class":264},[212,75741,75743],{"className":251,"code":75742,"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,75744,75745,75755,75759,75773,75777,75790,75794],{"__ignoreMap":178},[220,75746,75747,75749,75751,75753],{"class":222,"line":223},[220,75748,261],{"class":260},[220,75750,11512],{"class":264},[220,75752,268],{"class":260},[220,75754,4007],{"class":230},[220,75756,75757],{"class":222,"line":179},[220,75758,647],{"emptyLinePlaceholder":194},[220,75760,75761,75763,75765,75767,75769,75771],{"class":222,"line":389},[220,75762,1735],{"class":260},[220,75764,1738],{"class":420},[220,75766,1741],{"class":260},[220,75768,1744],{"class":260},[220,75770,1747],{"class":226},[220,75772,1750],{"class":264},[220,75774,75775],{"class":222,"line":399},[220,75776,1765],{"class":264},[220,75778,75779,75781,75784,75786,75788],{"class":222,"line":644},[220,75780,1770],{"class":264},[220,75782,75783],{"class":230},"'ThinFilm'",[220,75785,32203],{"class":264},[220,75787,8677],{"class":420},[220,75789,1782],{"class":264},[220,75791,75792],{"class":222,"line":650},[220,75793,1787],{"class":264},[220,75795,75796],{"class":222,"line":656},[220,75797,1792],{"class":264},[1504,75799,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75801},[75802,75803],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":23169,"description":75563},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":75810,"title":75811,"body":75812,"category":32234,"componentType":25883,"description":75819,"extension":191,"meta":76136,"navigation":194,"path":76137,"requiresChild":194,"seo":76138,"stem":76139,"__hash__":76140},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":75813,"toc":76132},[75814,75817,75820,75822,75824,75827,75829,76130],[11,75815,75811],{"id":75816},"tiltshift",[15,75818,75819],{},"Selective focus blur mimicking tilt-shift photography",[31911,75821],{"component":75811},[23,75823,31915],{"id":26533},[31917,75825],{":props":75826},"[{\"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,75828,31923],{"id":31922},[246,75830,75831,75887,75946,76002,76060],{":tabs":1557},[212,75832,75834],{"className":334,"code":75833,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,75835,75836,75844,75851,75859,75863,75871,75879],{"__ignoreMap":178},[220,75837,75838,75840,75842],{"class":222,"line":223},[220,75839,343],{"class":264},[220,75841,347],{"class":346},[220,75843,359],{"class":264},[220,75845,75846,75848],{"class":222,"line":179},[220,75847,364],{"class":264},[220,75849,75850],{"class":346},"TiltShift\n",[220,75852,75853,75855,75857],{"class":222,"line":389},[220,75854,20371],{"class":226},[220,75856,353],{"class":264},[220,75858,35080],{"class":230},[220,75860,75861],{"class":222,"line":399},[220,75862,31959],{"class":264},[220,75864,75865,75867,75869],{"class":222,"line":644},[220,75866,2550],{"class":264},[220,75868,2553],{"class":346},[220,75870,386],{"class":264},[220,75872,75873,75875,75877],{"class":222,"line":650},[220,75874,2567],{"class":264},[220,75876,75811],{"class":346},[220,75878,359],{"class":264},[220,75880,75881,75883,75885],{"class":222,"line":656},[220,75882,402],{"class":264},[220,75884,347],{"class":346},[220,75886,359],{"class":264},[212,75888,75890],{"className":409,"code":75889,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,75891,75892,75900,75906,75918,75922,75930,75938],{"__ignoreMap":178},[220,75893,75894,75896,75898],{"class":222,"line":223},[220,75895,343],{"class":264},[220,75897,347],{"class":420},[220,75899,359],{"class":264},[220,75901,75902,75904],{"class":222,"line":179},[220,75903,364],{"class":264},[220,75905,75850],{"class":420},[220,75907,75908,75910,75912,75914,75916],{"class":222,"line":389},[220,75909,20482],{"class":226},[220,75911,353],{"class":260},[220,75913,743],{"class":264},[220,75915,35138],{"class":420},[220,75917,749],{"class":264},[220,75919,75920],{"class":222,"line":399},[220,75921,31959],{"class":264},[220,75923,75924,75926,75928],{"class":222,"line":644},[220,75925,2550],{"class":264},[220,75927,2553],{"class":420},[220,75929,386],{"class":264},[220,75931,75932,75934,75936],{"class":222,"line":650},[220,75933,2567],{"class":264},[220,75935,75811],{"class":420},[220,75937,359],{"class":264},[220,75939,75940,75942,75944],{"class":222,"line":656},[220,75941,402],{"class":264},[220,75943,347],{"class":420},[220,75945,359],{"class":264},[212,75947,75948],{"className":2844,"code":75889,"language":2846,"meta":178,"style":178},[99,75949,75950,75958,75964,75974,75978,75986,75994],{"__ignoreMap":178},[220,75951,75952,75954,75956],{"class":222,"line":223},[220,75953,343],{"class":264},[220,75955,347],{"class":420},[220,75957,359],{"class":264},[220,75959,75960,75962],{"class":222,"line":179},[220,75961,364],{"class":264},[220,75963,75850],{"class":420},[220,75965,75966,75968,75970,75972],{"class":222,"line":389},[220,75967,20482],{"class":226},[220,75969,29871],{"class":264},[220,75971,35138],{"class":420},[220,75973,749],{"class":264},[220,75975,75976],{"class":222,"line":399},[220,75977,31959],{"class":264},[220,75979,75980,75982,75984],{"class":222,"line":644},[220,75981,2550],{"class":264},[220,75983,2553],{"class":420},[220,75985,386],{"class":264},[220,75987,75988,75990,75992],{"class":222,"line":650},[220,75989,2567],{"class":264},[220,75991,75811],{"class":420},[220,75993,359],{"class":264},[220,75995,75996,75998,76000],{"class":222,"line":656},[220,75997,402],{"class":264},[220,75999,347],{"class":420},[220,76001,359],{"class":264},[212,76003,76004],{"className":468,"code":75889,"language":469,"meta":178,"style":178},[99,76005,76006,76014,76020,76032,76036,76044,76052],{"__ignoreMap":178},[220,76007,76008,76010,76012],{"class":222,"line":223},[220,76009,343],{"class":264},[220,76011,347],{"class":420},[220,76013,359],{"class":264},[220,76015,76016,76018],{"class":222,"line":179},[220,76017,364],{"class":264},[220,76019,75850],{"class":420},[220,76021,76022,76024,76026,76028,76030],{"class":222,"line":389},[220,76023,20482],{"class":226},[220,76025,353],{"class":260},[220,76027,743],{"class":264},[220,76029,35138],{"class":420},[220,76031,749],{"class":264},[220,76033,76034],{"class":222,"line":399},[220,76035,31959],{"class":264},[220,76037,76038,76040,76042],{"class":222,"line":644},[220,76039,2550],{"class":264},[220,76041,2553],{"class":420},[220,76043,386],{"class":264},[220,76045,76046,76048,76050],{"class":222,"line":650},[220,76047,2567],{"class":264},[220,76049,75811],{"class":420},[220,76051,359],{"class":264},[220,76053,76054,76056,76058],{"class":222,"line":656},[220,76055,402],{"class":264},[220,76057,347],{"class":420},[220,76059,359],{"class":264},[212,76061,76063],{"className":251,"code":76062,"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,76064,76065,76075,76079,76093,76097,76110,76118,76122,76126],{"__ignoreMap":178},[220,76066,76067,76069,76071,76073],{"class":222,"line":223},[220,76068,261],{"class":260},[220,76070,11512],{"class":264},[220,76072,268],{"class":260},[220,76074,4007],{"class":230},[220,76076,76077],{"class":222,"line":179},[220,76078,647],{"emptyLinePlaceholder":194},[220,76080,76081,76083,76085,76087,76089,76091],{"class":222,"line":389},[220,76082,1735],{"class":260},[220,76084,1738],{"class":420},[220,76086,1741],{"class":260},[220,76088,1744],{"class":260},[220,76090,1747],{"class":226},[220,76092,1750],{"class":264},[220,76094,76095],{"class":222,"line":399},[220,76096,1765],{"class":264},[220,76098,76099,76101,76104,76106,76108],{"class":222,"line":644},[220,76100,1770],{"class":264},[220,76102,76103],{"class":230},"'TiltShift'",[220,76105,32203],{"class":264},[220,76107,35138],{"class":420},[220,76109,7546],{"class":264},[220,76111,76112,76114,76116],{"class":222,"line":650},[220,76113,7014],{"class":264},[220,76115,3206],{"class":230},[220,76117,2465],{"class":264},[220,76119,76120],{"class":222,"line":656},[220,76121,7031],{"class":264},[220,76123,76124],{"class":222,"line":673},[220,76125,1787],{"class":264},[220,76127,76128],{"class":222,"line":682},[220,76129,1792],{"class":264},[1504,76131,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76133},[76134,76135],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":75811,"description":75819},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":76142,"title":76143,"body":76144,"category":32806,"componentType":25883,"description":76151,"extension":191,"meta":76412,"navigation":194,"path":76413,"requiresChild":194,"seo":76414,"stem":76415,"__hash__":76416},"components\u002Fdocs\u002Fcomponents\u002FTimeTrail.md","TimeTrail",{"type":8,"value":76145,"toc":76408},[76146,76149,76152,76154,76156,76159,76161,76406],[11,76147,76143],{"id":76148},"timetrail",[15,76150,76151],{},"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,76153],{"component":76143},[23,76155,31915],{"id":26533},[31917,76157],{":props":76158},"[{\"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,76160,31923],{"id":31922},[246,76162,76163,76208,76252,76296,76340],{":tabs":1557},[212,76164,76166],{"className":334,"code":76165,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTimeTrail>\n \u003CCircle \u002F>\n \u003C\u002FTimeTrail>\n\u003C\u002FShader>\n",[99,76167,76168,76176,76184,76192,76200],{"__ignoreMap":178},[220,76169,76170,76172,76174],{"class":222,"line":223},[220,76171,343],{"class":264},[220,76173,347],{"class":346},[220,76175,359],{"class":264},[220,76177,76178,76180,76182],{"class":222,"line":179},[220,76179,364],{"class":264},[220,76181,76143],{"class":346},[220,76183,359],{"class":264},[220,76185,76186,76188,76190],{"class":222,"line":389},[220,76187,2550],{"class":264},[220,76189,2553],{"class":346},[220,76191,386],{"class":264},[220,76193,76194,76196,76198],{"class":222,"line":399},[220,76195,2567],{"class":264},[220,76197,76143],{"class":346},[220,76199,359],{"class":264},[220,76201,76202,76204,76206],{"class":222,"line":644},[220,76203,402],{"class":264},[220,76205,347],{"class":346},[220,76207,359],{"class":264},[212,76209,76210],{"className":409,"code":76165,"language":411,"meta":178,"style":178},[99,76211,76212,76220,76228,76236,76244],{"__ignoreMap":178},[220,76213,76214,76216,76218],{"class":222,"line":223},[220,76215,343],{"class":264},[220,76217,347],{"class":420},[220,76219,359],{"class":264},[220,76221,76222,76224,76226],{"class":222,"line":179},[220,76223,364],{"class":264},[220,76225,76143],{"class":420},[220,76227,359],{"class":264},[220,76229,76230,76232,76234],{"class":222,"line":389},[220,76231,2550],{"class":264},[220,76233,2553],{"class":420},[220,76235,386],{"class":264},[220,76237,76238,76240,76242],{"class":222,"line":399},[220,76239,2567],{"class":264},[220,76241,76143],{"class":420},[220,76243,359],{"class":264},[220,76245,76246,76248,76250],{"class":222,"line":644},[220,76247,402],{"class":264},[220,76249,347],{"class":420},[220,76251,359],{"class":264},[212,76253,76254],{"className":2844,"code":76165,"language":2846,"meta":178,"style":178},[99,76255,76256,76264,76272,76280,76288],{"__ignoreMap":178},[220,76257,76258,76260,76262],{"class":222,"line":223},[220,76259,343],{"class":264},[220,76261,347],{"class":420},[220,76263,359],{"class":264},[220,76265,76266,76268,76270],{"class":222,"line":179},[220,76267,364],{"class":264},[220,76269,76143],{"class":420},[220,76271,359],{"class":264},[220,76273,76274,76276,76278],{"class":222,"line":389},[220,76275,2550],{"class":264},[220,76277,2553],{"class":420},[220,76279,386],{"class":264},[220,76281,76282,76284,76286],{"class":222,"line":399},[220,76283,2567],{"class":264},[220,76285,76143],{"class":420},[220,76287,359],{"class":264},[220,76289,76290,76292,76294],{"class":222,"line":644},[220,76291,402],{"class":264},[220,76293,347],{"class":420},[220,76295,359],{"class":264},[212,76297,76298],{"className":468,"code":76165,"language":469,"meta":178,"style":178},[99,76299,76300,76308,76316,76324,76332],{"__ignoreMap":178},[220,76301,76302,76304,76306],{"class":222,"line":223},[220,76303,343],{"class":264},[220,76305,347],{"class":420},[220,76307,359],{"class":264},[220,76309,76310,76312,76314],{"class":222,"line":179},[220,76311,364],{"class":264},[220,76313,76143],{"class":420},[220,76315,359],{"class":264},[220,76317,76318,76320,76322],{"class":222,"line":389},[220,76319,2550],{"class":264},[220,76321,2553],{"class":420},[220,76323,386],{"class":264},[220,76325,76326,76328,76330],{"class":222,"line":399},[220,76327,2567],{"class":264},[220,76329,76143],{"class":420},[220,76331,359],{"class":264},[220,76333,76334,76336,76338],{"class":222,"line":644},[220,76335,402],{"class":264},[220,76337,347],{"class":420},[220,76339,359],{"class":264},[212,76341,76343],{"className":251,"code":76342,"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,76344,76345,76355,76359,76373,76377,76386,76394,76398,76402],{"__ignoreMap":178},[220,76346,76347,76349,76351,76353],{"class":222,"line":223},[220,76348,261],{"class":260},[220,76350,11512],{"class":264},[220,76352,268],{"class":260},[220,76354,4007],{"class":230},[220,76356,76357],{"class":222,"line":179},[220,76358,647],{"emptyLinePlaceholder":194},[220,76360,76361,76363,76365,76367,76369,76371],{"class":222,"line":389},[220,76362,1735],{"class":260},[220,76364,1738],{"class":420},[220,76366,1741],{"class":260},[220,76368,1744],{"class":260},[220,76370,1747],{"class":226},[220,76372,1750],{"class":264},[220,76374,76375],{"class":222,"line":399},[220,76376,1765],{"class":264},[220,76378,76379,76381,76384],{"class":222,"line":644},[220,76380,1770],{"class":264},[220,76382,76383],{"class":230},"'TimeTrail'",[220,76385,7009],{"class":264},[220,76387,76388,76390,76392],{"class":222,"line":650},[220,76389,7014],{"class":264},[220,76391,3206],{"class":230},[220,76393,2465],{"class":264},[220,76395,76396],{"class":222,"line":656},[220,76397,7031],{"class":264},[220,76399,76400],{"class":222,"line":673},[220,76401,1787],{"class":264},[220,76403,76404],{"class":222,"line":682},[220,76405,1792],{"class":264},[1504,76407,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":76409},[76410,76411],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftimetrail",{"title":76143,"description":76151},"docs\u002Fcomponents\u002FTimeTrail","UE92ll69s2IbTEP3QBBWCS9JFrQ-A1hkv-YEwMYNTXk",{"id":76418,"title":76419,"body":76420,"category":36368,"componentType":25883,"description":76427,"extension":191,"meta":76735,"navigation":194,"path":76736,"requiresChild":194,"seo":76737,"stem":76738,"__hash__":76739},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":76421,"toc":76731},[76422,76425,76428,76430,76432,76435,76437,76729],[11,76423,76419],{"id":76424},"tint",[15,76426,76427],{},"Apply a color tint to the image",[31911,76429],{"component":76419},[23,76431,31915],{"id":26533},[31917,76433],{":props":76434},"[{\"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,76436,31923],{"id":31922},[246,76438,76439,76496,76550,76604,76658],{":tabs":1557},[212,76440,76442],{"className":334,"code":76441,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,76443,76444,76452,76459,76468,76472,76480,76488],{"__ignoreMap":178},[220,76445,76446,76448,76450],{"class":222,"line":223},[220,76447,343],{"class":264},[220,76449,347],{"class":346},[220,76451,359],{"class":264},[220,76453,76454,76456],{"class":222,"line":179},[220,76455,364],{"class":264},[220,76457,76458],{"class":346},"Tint\n",[220,76460,76461,76463,76465],{"class":222,"line":389},[220,76462,9635],{"class":226},[220,76464,353],{"class":264},[220,76466,76467],{"class":230},"\"#ff8800\"\n",[220,76469,76470],{"class":222,"line":399},[220,76471,31959],{"class":264},[220,76473,76474,76476,76478],{"class":222,"line":644},[220,76475,2550],{"class":264},[220,76477,2553],{"class":346},[220,76479,386],{"class":264},[220,76481,76482,76484,76486],{"class":222,"line":650},[220,76483,2567],{"class":264},[220,76485,76419],{"class":346},[220,76487,359],{"class":264},[220,76489,76490,76492,76494],{"class":222,"line":656},[220,76491,402],{"class":264},[220,76493,347],{"class":346},[220,76495,359],{"class":264},[212,76497,76498],{"className":409,"code":76441,"language":411,"meta":178,"style":178},[99,76499,76500,76508,76514,76522,76526,76534,76542],{"__ignoreMap":178},[220,76501,76502,76504,76506],{"class":222,"line":223},[220,76503,343],{"class":264},[220,76505,347],{"class":420},[220,76507,359],{"class":264},[220,76509,76510,76512],{"class":222,"line":179},[220,76511,364],{"class":264},[220,76513,76458],{"class":420},[220,76515,76516,76518,76520],{"class":222,"line":389},[220,76517,9635],{"class":226},[220,76519,353],{"class":260},[220,76521,76467],{"class":230},[220,76523,76524],{"class":222,"line":399},[220,76525,31959],{"class":264},[220,76527,76528,76530,76532],{"class":222,"line":644},[220,76529,2550],{"class":264},[220,76531,2553],{"class":420},[220,76533,386],{"class":264},[220,76535,76536,76538,76540],{"class":222,"line":650},[220,76537,2567],{"class":264},[220,76539,76419],{"class":420},[220,76541,359],{"class":264},[220,76543,76544,76546,76548],{"class":222,"line":656},[220,76545,402],{"class":264},[220,76547,347],{"class":420},[220,76549,359],{"class":264},[212,76551,76552],{"className":2844,"code":76441,"language":2846,"meta":178,"style":178},[99,76553,76554,76562,76568,76576,76580,76588,76596],{"__ignoreMap":178},[220,76555,76556,76558,76560],{"class":222,"line":223},[220,76557,343],{"class":264},[220,76559,347],{"class":420},[220,76561,359],{"class":264},[220,76563,76564,76566],{"class":222,"line":179},[220,76565,364],{"class":264},[220,76567,76458],{"class":420},[220,76569,76570,76572,76574],{"class":222,"line":389},[220,76571,9635],{"class":226},[220,76573,353],{"class":264},[220,76575,76467],{"class":230},[220,76577,76578],{"class":222,"line":399},[220,76579,31959],{"class":264},[220,76581,76582,76584,76586],{"class":222,"line":644},[220,76583,2550],{"class":264},[220,76585,2553],{"class":420},[220,76587,386],{"class":264},[220,76589,76590,76592,76594],{"class":222,"line":650},[220,76591,2567],{"class":264},[220,76593,76419],{"class":420},[220,76595,359],{"class":264},[220,76597,76598,76600,76602],{"class":222,"line":656},[220,76599,402],{"class":264},[220,76601,347],{"class":420},[220,76603,359],{"class":264},[212,76605,76606],{"className":468,"code":76441,"language":469,"meta":178,"style":178},[99,76607,76608,76616,76622,76630,76634,76642,76650],{"__ignoreMap":178},[220,76609,76610,76612,76614],{"class":222,"line":223},[220,76611,343],{"class":264},[220,76613,347],{"class":420},[220,76615,359],{"class":264},[220,76617,76618,76620],{"class":222,"line":179},[220,76619,364],{"class":264},[220,76621,76458],{"class":420},[220,76623,76624,76626,76628],{"class":222,"line":389},[220,76625,9635],{"class":226},[220,76627,353],{"class":260},[220,76629,76467],{"class":230},[220,76631,76632],{"class":222,"line":399},[220,76633,31959],{"class":264},[220,76635,76636,76638,76640],{"class":222,"line":644},[220,76637,2550],{"class":264},[220,76639,2553],{"class":420},[220,76641,386],{"class":264},[220,76643,76644,76646,76648],{"class":222,"line":650},[220,76645,2567],{"class":264},[220,76647,76419],{"class":420},[220,76649,359],{"class":264},[220,76651,76652,76654,76656],{"class":222,"line":656},[220,76653,402],{"class":264},[220,76655,347],{"class":420},[220,76657,359],{"class":264},[212,76659,76661],{"className":251,"code":76660,"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,76662,76663,76673,76677,76691,76695,76709,76717,76721,76725],{"__ignoreMap":178},[220,76664,76665,76667,76669,76671],{"class":222,"line":223},[220,76666,261],{"class":260},[220,76668,11512],{"class":264},[220,76670,268],{"class":260},[220,76672,4007],{"class":230},[220,76674,76675],{"class":222,"line":179},[220,76676,647],{"emptyLinePlaceholder":194},[220,76678,76679,76681,76683,76685,76687,76689],{"class":222,"line":389},[220,76680,1735],{"class":260},[220,76682,1738],{"class":420},[220,76684,1741],{"class":260},[220,76686,1744],{"class":260},[220,76688,1747],{"class":226},[220,76690,1750],{"class":264},[220,76692,76693],{"class":222,"line":399},[220,76694,1765],{"class":264},[220,76696,76697,76699,76702,76704,76707],{"class":222,"line":644},[220,76698,1770],{"class":264},[220,76700,76701],{"class":230},"'Tint'",[220,76703,1776],{"class":264},[220,76705,76706],{"class":230},"'#ff8800'",[220,76708,7546],{"class":264},[220,76710,76711,76713,76715],{"class":222,"line":650},[220,76712,7014],{"class":264},[220,76714,3206],{"class":230},[220,76716,2465],{"class":264},[220,76718,76719],{"class":222,"line":656},[220,76720,7031],{"class":264},[220,76722,76723],{"class":222,"line":673},[220,76724,1787],{"class":264},[220,76726,76727],{"class":222,"line":682},[220,76728,1792],{"class":264},[1504,76730,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76732},[76733,76734],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":76419,"description":76427},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":76741,"title":76742,"body":76743,"category":15908,"componentType":25877,"description":76750,"extension":191,"meta":76980,"navigation":194,"path":76981,"requiresChild":32530,"seo":76982,"stem":76983,"__hash__":76984},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":76744,"toc":76976},[76745,76748,76751,76753,76755,76758,76760,76974],[11,76746,76742],{"id":76747},"trapezoid",[15,76749,76750],{},"Trapezoid with adjustable top and bottom widths and height",[31911,76752],{"component":76742},[23,76754,31915],{"id":26533},[31917,76756],{":props":76757},"[{\"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,76759,31923],{"id":31922},[246,76761,76762,76802,76840,76878,76916],{":tabs":1557},[212,76763,76765],{"className":334,"code":76764,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,76766,76767,76775,76782,76790,76794],{"__ignoreMap":178},[220,76768,76769,76771,76773],{"class":222,"line":223},[220,76770,343],{"class":264},[220,76772,347],{"class":346},[220,76774,359],{"class":264},[220,76776,76777,76779],{"class":222,"line":179},[220,76778,364],{"class":264},[220,76780,76781],{"class":346},"Trapezoid\n",[220,76783,76784,76786,76788],{"class":222,"line":389},[220,76785,9635],{"class":226},[220,76787,353],{"class":264},[220,76789,9591],{"class":230},[220,76791,76792],{"class":222,"line":399},[220,76793,1234],{"class":264},[220,76795,76796,76798,76800],{"class":222,"line":644},[220,76797,402],{"class":264},[220,76799,347],{"class":346},[220,76801,359],{"class":264},[212,76803,76804],{"className":409,"code":76764,"language":411,"meta":178,"style":178},[99,76805,76806,76814,76820,76828,76832],{"__ignoreMap":178},[220,76807,76808,76810,76812],{"class":222,"line":223},[220,76809,343],{"class":264},[220,76811,347],{"class":420},[220,76813,359],{"class":264},[220,76815,76816,76818],{"class":222,"line":179},[220,76817,364],{"class":264},[220,76819,76781],{"class":420},[220,76821,76822,76824,76826],{"class":222,"line":389},[220,76823,9635],{"class":226},[220,76825,353],{"class":260},[220,76827,9591],{"class":230},[220,76829,76830],{"class":222,"line":399},[220,76831,1234],{"class":264},[220,76833,76834,76836,76838],{"class":222,"line":644},[220,76835,402],{"class":264},[220,76837,347],{"class":420},[220,76839,359],{"class":264},[212,76841,76842],{"className":2844,"code":76764,"language":2846,"meta":178,"style":178},[99,76843,76844,76852,76858,76866,76870],{"__ignoreMap":178},[220,76845,76846,76848,76850],{"class":222,"line":223},[220,76847,343],{"class":264},[220,76849,347],{"class":420},[220,76851,359],{"class":264},[220,76853,76854,76856],{"class":222,"line":179},[220,76855,364],{"class":264},[220,76857,76781],{"class":420},[220,76859,76860,76862,76864],{"class":222,"line":389},[220,76861,9635],{"class":226},[220,76863,353],{"class":264},[220,76865,9591],{"class":230},[220,76867,76868],{"class":222,"line":399},[220,76869,1234],{"class":264},[220,76871,76872,76874,76876],{"class":222,"line":644},[220,76873,402],{"class":264},[220,76875,347],{"class":420},[220,76877,359],{"class":264},[212,76879,76880],{"className":468,"code":76764,"language":469,"meta":178,"style":178},[99,76881,76882,76890,76896,76904,76908],{"__ignoreMap":178},[220,76883,76884,76886,76888],{"class":222,"line":223},[220,76885,343],{"class":264},[220,76887,347],{"class":420},[220,76889,359],{"class":264},[220,76891,76892,76894],{"class":222,"line":179},[220,76893,364],{"class":264},[220,76895,76781],{"class":420},[220,76897,76898,76900,76902],{"class":222,"line":389},[220,76899,9635],{"class":226},[220,76901,353],{"class":260},[220,76903,9591],{"class":230},[220,76905,76906],{"class":222,"line":399},[220,76907,1234],{"class":264},[220,76909,76910,76912,76914],{"class":222,"line":644},[220,76911,402],{"class":264},[220,76913,347],{"class":420},[220,76915,359],{"class":264},[212,76917,76919],{"className":251,"code":76918,"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,76920,76921,76931,76935,76949,76953,76966,76970],{"__ignoreMap":178},[220,76922,76923,76925,76927,76929],{"class":222,"line":223},[220,76924,261],{"class":260},[220,76926,11512],{"class":264},[220,76928,268],{"class":260},[220,76930,4007],{"class":230},[220,76932,76933],{"class":222,"line":179},[220,76934,647],{"emptyLinePlaceholder":194},[220,76936,76937,76939,76941,76943,76945,76947],{"class":222,"line":389},[220,76938,1735],{"class":260},[220,76940,1738],{"class":420},[220,76942,1741],{"class":260},[220,76944,1744],{"class":260},[220,76946,1747],{"class":226},[220,76948,1750],{"class":264},[220,76950,76951],{"class":222,"line":399},[220,76952,1765],{"class":264},[220,76954,76955,76957,76960,76962,76964],{"class":222,"line":644},[220,76956,1770],{"class":264},[220,76958,76959],{"class":230},"'Trapezoid'",[220,76961,1776],{"class":264},[220,76963,10169],{"class":230},[220,76965,1782],{"class":264},[220,76967,76968],{"class":222,"line":650},[220,76969,1787],{"class":264},[220,76971,76972],{"class":222,"line":656},[220,76973,1792],{"class":264},[1504,76975,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76977},[76978,76979],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":76742,"description":76750},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":76986,"title":76987,"body":76988,"category":33063,"componentType":25877,"description":76995,"extension":191,"meta":77180,"navigation":194,"path":77181,"requiresChild":32530,"seo":77182,"stem":77183,"__hash__":77184},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":76989,"toc":77176},[76990,76993,76996,76998,77000,77003,77005,77174],[11,76991,76987],{"id":76992},"triangulargrid",[15,76994,76995],{},"Tiling grid of equilateral triangles with optional animated row offsets",[31911,76997],{"component":76987},[23,76999,31915],{"id":26533},[31917,77001],{":props":77002},"[{\"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,77004,31923],{"id":31922},[246,77006,77007,77036,77064,77092,77120],{":tabs":1557},[212,77008,77010],{"className":334,"code":77009,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,77011,77012,77020,77028],{"__ignoreMap":178},[220,77013,77014,77016,77018],{"class":222,"line":223},[220,77015,343],{"class":264},[220,77017,347],{"class":346},[220,77019,359],{"class":264},[220,77021,77022,77024,77026],{"class":222,"line":179},[220,77023,364],{"class":264},[220,77025,76987],{"class":346},[220,77027,386],{"class":264},[220,77029,77030,77032,77034],{"class":222,"line":389},[220,77031,402],{"class":264},[220,77033,347],{"class":346},[220,77035,359],{"class":264},[212,77037,77038],{"className":409,"code":77009,"language":411,"meta":178,"style":178},[99,77039,77040,77048,77056],{"__ignoreMap":178},[220,77041,77042,77044,77046],{"class":222,"line":223},[220,77043,343],{"class":264},[220,77045,347],{"class":420},[220,77047,359],{"class":264},[220,77049,77050,77052,77054],{"class":222,"line":179},[220,77051,364],{"class":264},[220,77053,76987],{"class":420},[220,77055,386],{"class":264},[220,77057,77058,77060,77062],{"class":222,"line":389},[220,77059,402],{"class":264},[220,77061,347],{"class":420},[220,77063,359],{"class":264},[212,77065,77066],{"className":2844,"code":77009,"language":2846,"meta":178,"style":178},[99,77067,77068,77076,77084],{"__ignoreMap":178},[220,77069,77070,77072,77074],{"class":222,"line":223},[220,77071,343],{"class":264},[220,77073,347],{"class":420},[220,77075,359],{"class":264},[220,77077,77078,77080,77082],{"class":222,"line":179},[220,77079,364],{"class":264},[220,77081,76987],{"class":420},[220,77083,386],{"class":264},[220,77085,77086,77088,77090],{"class":222,"line":389},[220,77087,402],{"class":264},[220,77089,347],{"class":420},[220,77091,359],{"class":264},[212,77093,77094],{"className":468,"code":77009,"language":469,"meta":178,"style":178},[99,77095,77096,77104,77112],{"__ignoreMap":178},[220,77097,77098,77100,77102],{"class":222,"line":223},[220,77099,343],{"class":264},[220,77101,347],{"class":420},[220,77103,359],{"class":264},[220,77105,77106,77108,77110],{"class":222,"line":179},[220,77107,364],{"class":264},[220,77109,76987],{"class":420},[220,77111,386],{"class":264},[220,77113,77114,77116,77118],{"class":222,"line":389},[220,77115,402],{"class":264},[220,77117,347],{"class":420},[220,77119,359],{"class":264},[212,77121,77123],{"className":251,"code":77122,"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,77124,77125,77135,77139,77153,77157,77166,77170],{"__ignoreMap":178},[220,77126,77127,77129,77131,77133],{"class":222,"line":223},[220,77128,261],{"class":260},[220,77130,11512],{"class":264},[220,77132,268],{"class":260},[220,77134,4007],{"class":230},[220,77136,77137],{"class":222,"line":179},[220,77138,647],{"emptyLinePlaceholder":194},[220,77140,77141,77143,77145,77147,77149,77151],{"class":222,"line":389},[220,77142,1735],{"class":260},[220,77144,1738],{"class":420},[220,77146,1741],{"class":260},[220,77148,1744],{"class":260},[220,77150,1747],{"class":226},[220,77152,1750],{"class":264},[220,77154,77155],{"class":222,"line":399},[220,77156,1765],{"class":264},[220,77158,77159,77161,77164],{"class":222,"line":644},[220,77160,1770],{"class":264},[220,77162,77163],{"class":230},"'TriangularGrid'",[220,77165,2465],{"class":264},[220,77167,77168],{"class":222,"line":650},[220,77169,1787],{"class":264},[220,77171,77172],{"class":222,"line":656},[220,77173,1792],{"class":264},[1504,77175,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77177},[77178,77179],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":76987,"description":76995},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":77186,"title":77187,"body":77188,"category":36368,"componentType":25883,"description":77195,"extension":191,"meta":77456,"navigation":194,"path":77457,"requiresChild":194,"seo":77458,"stem":77459,"__hash__":77460},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":77189,"toc":77452},[77190,77193,77196,77198,77200,77203,77205,77450],[11,77191,77187],{"id":77192},"tritone",[15,77194,77195],{},"Map colors to three tones: shadows, midtones, highlights",[31911,77197],{"component":77187},[23,77199,31915],{"id":26533},[31917,77201],{":props":77202},"[{\"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,77204,31923],{"id":31922},[246,77206,77207,77252,77296,77340,77384],{":tabs":1557},[212,77208,77210],{"className":334,"code":77209,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,77211,77212,77220,77228,77236,77244],{"__ignoreMap":178},[220,77213,77214,77216,77218],{"class":222,"line":223},[220,77215,343],{"class":264},[220,77217,347],{"class":346},[220,77219,359],{"class":264},[220,77221,77222,77224,77226],{"class":222,"line":179},[220,77223,364],{"class":264},[220,77225,77187],{"class":346},[220,77227,359],{"class":264},[220,77229,77230,77232,77234],{"class":222,"line":389},[220,77231,2550],{"class":264},[220,77233,2553],{"class":346},[220,77235,386],{"class":264},[220,77237,77238,77240,77242],{"class":222,"line":399},[220,77239,2567],{"class":264},[220,77241,77187],{"class":346},[220,77243,359],{"class":264},[220,77245,77246,77248,77250],{"class":222,"line":644},[220,77247,402],{"class":264},[220,77249,347],{"class":346},[220,77251,359],{"class":264},[212,77253,77254],{"className":409,"code":77209,"language":411,"meta":178,"style":178},[99,77255,77256,77264,77272,77280,77288],{"__ignoreMap":178},[220,77257,77258,77260,77262],{"class":222,"line":223},[220,77259,343],{"class":264},[220,77261,347],{"class":420},[220,77263,359],{"class":264},[220,77265,77266,77268,77270],{"class":222,"line":179},[220,77267,364],{"class":264},[220,77269,77187],{"class":420},[220,77271,359],{"class":264},[220,77273,77274,77276,77278],{"class":222,"line":389},[220,77275,2550],{"class":264},[220,77277,2553],{"class":420},[220,77279,386],{"class":264},[220,77281,77282,77284,77286],{"class":222,"line":399},[220,77283,2567],{"class":264},[220,77285,77187],{"class":420},[220,77287,359],{"class":264},[220,77289,77290,77292,77294],{"class":222,"line":644},[220,77291,402],{"class":264},[220,77293,347],{"class":420},[220,77295,359],{"class":264},[212,77297,77298],{"className":2844,"code":77209,"language":2846,"meta":178,"style":178},[99,77299,77300,77308,77316,77324,77332],{"__ignoreMap":178},[220,77301,77302,77304,77306],{"class":222,"line":223},[220,77303,343],{"class":264},[220,77305,347],{"class":420},[220,77307,359],{"class":264},[220,77309,77310,77312,77314],{"class":222,"line":179},[220,77311,364],{"class":264},[220,77313,77187],{"class":420},[220,77315,359],{"class":264},[220,77317,77318,77320,77322],{"class":222,"line":389},[220,77319,2550],{"class":264},[220,77321,2553],{"class":420},[220,77323,386],{"class":264},[220,77325,77326,77328,77330],{"class":222,"line":399},[220,77327,2567],{"class":264},[220,77329,77187],{"class":420},[220,77331,359],{"class":264},[220,77333,77334,77336,77338],{"class":222,"line":644},[220,77335,402],{"class":264},[220,77337,347],{"class":420},[220,77339,359],{"class":264},[212,77341,77342],{"className":468,"code":77209,"language":469,"meta":178,"style":178},[99,77343,77344,77352,77360,77368,77376],{"__ignoreMap":178},[220,77345,77346,77348,77350],{"class":222,"line":223},[220,77347,343],{"class":264},[220,77349,347],{"class":420},[220,77351,359],{"class":264},[220,77353,77354,77356,77358],{"class":222,"line":179},[220,77355,364],{"class":264},[220,77357,77187],{"class":420},[220,77359,359],{"class":264},[220,77361,77362,77364,77366],{"class":222,"line":389},[220,77363,2550],{"class":264},[220,77365,2553],{"class":420},[220,77367,386],{"class":264},[220,77369,77370,77372,77374],{"class":222,"line":399},[220,77371,2567],{"class":264},[220,77373,77187],{"class":420},[220,77375,359],{"class":264},[220,77377,77378,77380,77382],{"class":222,"line":644},[220,77379,402],{"class":264},[220,77381,347],{"class":420},[220,77383,359],{"class":264},[212,77385,77387],{"className":251,"code":77386,"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,77388,77389,77399,77403,77417,77421,77430,77438,77442,77446],{"__ignoreMap":178},[220,77390,77391,77393,77395,77397],{"class":222,"line":223},[220,77392,261],{"class":260},[220,77394,11512],{"class":264},[220,77396,268],{"class":260},[220,77398,4007],{"class":230},[220,77400,77401],{"class":222,"line":179},[220,77402,647],{"emptyLinePlaceholder":194},[220,77404,77405,77407,77409,77411,77413,77415],{"class":222,"line":389},[220,77406,1735],{"class":260},[220,77408,1738],{"class":420},[220,77410,1741],{"class":260},[220,77412,1744],{"class":260},[220,77414,1747],{"class":226},[220,77416,1750],{"class":264},[220,77418,77419],{"class":222,"line":399},[220,77420,1765],{"class":264},[220,77422,77423,77425,77428],{"class":222,"line":644},[220,77424,1770],{"class":264},[220,77426,77427],{"class":230},"'Tritone'",[220,77429,7009],{"class":264},[220,77431,77432,77434,77436],{"class":222,"line":650},[220,77433,7014],{"class":264},[220,77435,3206],{"class":230},[220,77437,2465],{"class":264},[220,77439,77440],{"class":222,"line":656},[220,77441,7031],{"class":264},[220,77443,77444],{"class":222,"line":673},[220,77445,1787],{"class":264},[220,77447,77448],{"class":222,"line":682},[220,77449,1792],{"class":264},[1504,77451,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77453},[77454,77455],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":77187,"description":77195},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":77462,"title":77463,"body":77464,"category":33063,"componentType":25877,"description":77471,"extension":191,"meta":77656,"navigation":194,"path":77657,"requiresChild":32530,"seo":77658,"stem":77659,"__hash__":77660},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":77465,"toc":77652},[77466,77469,77472,77474,77476,77479,77481,77650],[11,77467,77463],{"id":77468},"truchet",[15,77470,77471],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[31911,77473],{"component":77463},[23,77475,31915],{"id":26533},[31917,77477],{":props":77478},"[{\"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,77480,31923],{"id":31922},[246,77482,77483,77512,77540,77568,77596],{":tabs":1557},[212,77484,77486],{"className":334,"code":77485,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,77487,77488,77496,77504],{"__ignoreMap":178},[220,77489,77490,77492,77494],{"class":222,"line":223},[220,77491,343],{"class":264},[220,77493,347],{"class":346},[220,77495,359],{"class":264},[220,77497,77498,77500,77502],{"class":222,"line":179},[220,77499,364],{"class":264},[220,77501,77463],{"class":346},[220,77503,386],{"class":264},[220,77505,77506,77508,77510],{"class":222,"line":389},[220,77507,402],{"class":264},[220,77509,347],{"class":346},[220,77511,359],{"class":264},[212,77513,77514],{"className":409,"code":77485,"language":411,"meta":178,"style":178},[99,77515,77516,77524,77532],{"__ignoreMap":178},[220,77517,77518,77520,77522],{"class":222,"line":223},[220,77519,343],{"class":264},[220,77521,347],{"class":420},[220,77523,359],{"class":264},[220,77525,77526,77528,77530],{"class":222,"line":179},[220,77527,364],{"class":264},[220,77529,77463],{"class":420},[220,77531,386],{"class":264},[220,77533,77534,77536,77538],{"class":222,"line":389},[220,77535,402],{"class":264},[220,77537,347],{"class":420},[220,77539,359],{"class":264},[212,77541,77542],{"className":2844,"code":77485,"language":2846,"meta":178,"style":178},[99,77543,77544,77552,77560],{"__ignoreMap":178},[220,77545,77546,77548,77550],{"class":222,"line":223},[220,77547,343],{"class":264},[220,77549,347],{"class":420},[220,77551,359],{"class":264},[220,77553,77554,77556,77558],{"class":222,"line":179},[220,77555,364],{"class":264},[220,77557,77463],{"class":420},[220,77559,386],{"class":264},[220,77561,77562,77564,77566],{"class":222,"line":389},[220,77563,402],{"class":264},[220,77565,347],{"class":420},[220,77567,359],{"class":264},[212,77569,77570],{"className":468,"code":77485,"language":469,"meta":178,"style":178},[99,77571,77572,77580,77588],{"__ignoreMap":178},[220,77573,77574,77576,77578],{"class":222,"line":223},[220,77575,343],{"class":264},[220,77577,347],{"class":420},[220,77579,359],{"class":264},[220,77581,77582,77584,77586],{"class":222,"line":179},[220,77583,364],{"class":264},[220,77585,77463],{"class":420},[220,77587,386],{"class":264},[220,77589,77590,77592,77594],{"class":222,"line":389},[220,77591,402],{"class":264},[220,77593,347],{"class":420},[220,77595,359],{"class":264},[212,77597,77599],{"className":251,"code":77598,"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,77600,77601,77611,77615,77629,77633,77642,77646],{"__ignoreMap":178},[220,77602,77603,77605,77607,77609],{"class":222,"line":223},[220,77604,261],{"class":260},[220,77606,11512],{"class":264},[220,77608,268],{"class":260},[220,77610,4007],{"class":230},[220,77612,77613],{"class":222,"line":179},[220,77614,647],{"emptyLinePlaceholder":194},[220,77616,77617,77619,77621,77623,77625,77627],{"class":222,"line":389},[220,77618,1735],{"class":260},[220,77620,1738],{"class":420},[220,77622,1741],{"class":260},[220,77624,1744],{"class":260},[220,77626,1747],{"class":226},[220,77628,1750],{"class":264},[220,77630,77631],{"class":222,"line":399},[220,77632,1765],{"class":264},[220,77634,77635,77637,77640],{"class":222,"line":644},[220,77636,1770],{"class":264},[220,77638,77639],{"class":230},"'Truchet'",[220,77641,2465],{"class":264},[220,77643,77644],{"class":222,"line":650},[220,77645,1787],{"class":264},[220,77647,77648],{"class":222,"line":656},[220,77649,1792],{"class":264},[1504,77651,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77653},[77654,77655],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":77463,"description":77471},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":77662,"title":77663,"body":77664,"category":33396,"componentType":25883,"description":77671,"extension":191,"meta":77988,"navigation":194,"path":77989,"requiresChild":194,"seo":77990,"stem":77991,"__hash__":77992},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":77665,"toc":77984},[77666,77669,77672,77674,77676,77679,77681,77982],[11,77667,77663],{"id":77668},"twirl",[15,77670,77671],{},"Rotate and twist content around a center point",[31911,77673],{"component":77663},[23,77675,31915],{"id":26533},[31917,77677],{":props":77678},"[{\"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,77680,31923],{"id":31922},[246,77682,77683,77739,77798,77854,77912],{":tabs":1557},[212,77684,77686],{"className":334,"code":77685,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,77687,77688,77696,77703,77711,77715,77723,77731],{"__ignoreMap":178},[220,77689,77690,77692,77694],{"class":222,"line":223},[220,77691,343],{"class":264},[220,77693,347],{"class":346},[220,77695,359],{"class":264},[220,77697,77698,77700],{"class":222,"line":179},[220,77699,364],{"class":264},[220,77701,77702],{"class":346},"Twirl\n",[220,77704,77705,77707,77709],{"class":222,"line":389},[220,77706,20371],{"class":226},[220,77708,353],{"class":264},[220,77710,36625],{"class":230},[220,77712,77713],{"class":222,"line":399},[220,77714,31959],{"class":264},[220,77716,77717,77719,77721],{"class":222,"line":644},[220,77718,2550],{"class":264},[220,77720,2553],{"class":346},[220,77722,386],{"class":264},[220,77724,77725,77727,77729],{"class":222,"line":650},[220,77726,2567],{"class":264},[220,77728,77663],{"class":346},[220,77730,359],{"class":264},[220,77732,77733,77735,77737],{"class":222,"line":656},[220,77734,402],{"class":264},[220,77736,347],{"class":346},[220,77738,359],{"class":264},[212,77740,77742],{"className":409,"code":77741,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,77743,77744,77752,77758,77770,77774,77782,77790],{"__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],{"class":222,"line":179},[220,77755,364],{"class":264},[220,77757,77702],{"class":420},[220,77759,77760,77762,77764,77766,77768],{"class":222,"line":389},[220,77761,20482],{"class":226},[220,77763,353],{"class":260},[220,77765,743],{"class":264},[220,77767,8677],{"class":420},[220,77769,749],{"class":264},[220,77771,77772],{"class":222,"line":399},[220,77773,31959],{"class":264},[220,77775,77776,77778,77780],{"class":222,"line":644},[220,77777,2550],{"class":264},[220,77779,2553],{"class":420},[220,77781,386],{"class":264},[220,77783,77784,77786,77788],{"class":222,"line":650},[220,77785,2567],{"class":264},[220,77787,77663],{"class":420},[220,77789,359],{"class":264},[220,77791,77792,77794,77796],{"class":222,"line":656},[220,77793,402],{"class":264},[220,77795,347],{"class":420},[220,77797,359],{"class":264},[212,77799,77800],{"className":2844,"code":77741,"language":2846,"meta":178,"style":178},[99,77801,77802,77810,77816,77826,77830,77838,77846],{"__ignoreMap":178},[220,77803,77804,77806,77808],{"class":222,"line":223},[220,77805,343],{"class":264},[220,77807,347],{"class":420},[220,77809,359],{"class":264},[220,77811,77812,77814],{"class":222,"line":179},[220,77813,364],{"class":264},[220,77815,77702],{"class":420},[220,77817,77818,77820,77822,77824],{"class":222,"line":389},[220,77819,20482],{"class":226},[220,77821,29871],{"class":264},[220,77823,8677],{"class":420},[220,77825,749],{"class":264},[220,77827,77828],{"class":222,"line":399},[220,77829,31959],{"class":264},[220,77831,77832,77834,77836],{"class":222,"line":644},[220,77833,2550],{"class":264},[220,77835,2553],{"class":420},[220,77837,386],{"class":264},[220,77839,77840,77842,77844],{"class":222,"line":650},[220,77841,2567],{"class":264},[220,77843,77663],{"class":420},[220,77845,359],{"class":264},[220,77847,77848,77850,77852],{"class":222,"line":656},[220,77849,402],{"class":264},[220,77851,347],{"class":420},[220,77853,359],{"class":264},[212,77855,77856],{"className":468,"code":77741,"language":469,"meta":178,"style":178},[99,77857,77858,77866,77872,77884,77888,77896,77904],{"__ignoreMap":178},[220,77859,77860,77862,77864],{"class":222,"line":223},[220,77861,343],{"class":264},[220,77863,347],{"class":420},[220,77865,359],{"class":264},[220,77867,77868,77870],{"class":222,"line":179},[220,77869,364],{"class":264},[220,77871,77702],{"class":420},[220,77873,77874,77876,77878,77880,77882],{"class":222,"line":389},[220,77875,20482],{"class":226},[220,77877,353],{"class":260},[220,77879,743],{"class":264},[220,77881,8677],{"class":420},[220,77883,749],{"class":264},[220,77885,77886],{"class":222,"line":399},[220,77887,31959],{"class":264},[220,77889,77890,77892,77894],{"class":222,"line":644},[220,77891,2550],{"class":264},[220,77893,2553],{"class":420},[220,77895,386],{"class":264},[220,77897,77898,77900,77902],{"class":222,"line":650},[220,77899,2567],{"class":264},[220,77901,77663],{"class":420},[220,77903,359],{"class":264},[220,77905,77906,77908,77910],{"class":222,"line":656},[220,77907,402],{"class":264},[220,77909,347],{"class":420},[220,77911,359],{"class":264},[212,77913,77915],{"className":251,"code":77914,"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,77916,77917,77927,77931,77945,77949,77962,77970,77974,77978],{"__ignoreMap":178},[220,77918,77919,77921,77923,77925],{"class":222,"line":223},[220,77920,261],{"class":260},[220,77922,11512],{"class":264},[220,77924,268],{"class":260},[220,77926,4007],{"class":230},[220,77928,77929],{"class":222,"line":179},[220,77930,647],{"emptyLinePlaceholder":194},[220,77932,77933,77935,77937,77939,77941,77943],{"class":222,"line":389},[220,77934,1735],{"class":260},[220,77936,1738],{"class":420},[220,77938,1741],{"class":260},[220,77940,1744],{"class":260},[220,77942,1747],{"class":226},[220,77944,1750],{"class":264},[220,77946,77947],{"class":222,"line":399},[220,77948,1765],{"class":264},[220,77950,77951,77953,77956,77958,77960],{"class":222,"line":644},[220,77952,1770],{"class":264},[220,77954,77955],{"class":230},"'Twirl'",[220,77957,32203],{"class":264},[220,77959,8677],{"class":420},[220,77961,7546],{"class":264},[220,77963,77964,77966,77968],{"class":222,"line":650},[220,77965,7014],{"class":264},[220,77967,3206],{"class":230},[220,77969,2465],{"class":264},[220,77971,77972],{"class":222,"line":656},[220,77973,7031],{"class":264},[220,77975,77976],{"class":222,"line":673},[220,77977,1787],{"class":264},[220,77979,77980],{"class":222,"line":682},[220,77981,1792],{"class":264},[1504,77983,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77985},[77986,77987],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":77663,"description":77671},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":77994,"title":77995,"body":77996,"category":32806,"componentType":25883,"description":78003,"extension":191,"meta":78264,"navigation":194,"path":78265,"requiresChild":194,"seo":78266,"stem":78267,"__hash__":78268},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":77997,"toc":78260},[77998,78001,78004,78006,78008,78011,78013,78258],[11,77999,77995],{"id":78000},"vhs",[15,78002,78003],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[31911,78005],{"component":77995},[23,78007,31915],{"id":26533},[31917,78009],{":props":78010},"[{\"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,78012,31923],{"id":31922},[246,78014,78015,78060,78104,78148,78192],{":tabs":1557},[212,78016,78018],{"className":334,"code":78017,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,78019,78020,78028,78036,78044,78052],{"__ignoreMap":178},[220,78021,78022,78024,78026],{"class":222,"line":223},[220,78023,343],{"class":264},[220,78025,347],{"class":346},[220,78027,359],{"class":264},[220,78029,78030,78032,78034],{"class":222,"line":179},[220,78031,364],{"class":264},[220,78033,77995],{"class":346},[220,78035,359],{"class":264},[220,78037,78038,78040,78042],{"class":222,"line":389},[220,78039,2550],{"class":264},[220,78041,2553],{"class":346},[220,78043,386],{"class":264},[220,78045,78046,78048,78050],{"class":222,"line":399},[220,78047,2567],{"class":264},[220,78049,77995],{"class":346},[220,78051,359],{"class":264},[220,78053,78054,78056,78058],{"class":222,"line":644},[220,78055,402],{"class":264},[220,78057,347],{"class":346},[220,78059,359],{"class":264},[212,78061,78062],{"className":409,"code":78017,"language":411,"meta":178,"style":178},[99,78063,78064,78072,78080,78088,78096],{"__ignoreMap":178},[220,78065,78066,78068,78070],{"class":222,"line":223},[220,78067,343],{"class":264},[220,78069,347],{"class":420},[220,78071,359],{"class":264},[220,78073,78074,78076,78078],{"class":222,"line":179},[220,78075,364],{"class":264},[220,78077,77995],{"class":420},[220,78079,359],{"class":264},[220,78081,78082,78084,78086],{"class":222,"line":389},[220,78083,2550],{"class":264},[220,78085,2553],{"class":420},[220,78087,386],{"class":264},[220,78089,78090,78092,78094],{"class":222,"line":399},[220,78091,2567],{"class":264},[220,78093,77995],{"class":420},[220,78095,359],{"class":264},[220,78097,78098,78100,78102],{"class":222,"line":644},[220,78099,402],{"class":264},[220,78101,347],{"class":420},[220,78103,359],{"class":264},[212,78105,78106],{"className":2844,"code":78017,"language":2846,"meta":178,"style":178},[99,78107,78108,78116,78124,78132,78140],{"__ignoreMap":178},[220,78109,78110,78112,78114],{"class":222,"line":223},[220,78111,343],{"class":264},[220,78113,347],{"class":420},[220,78115,359],{"class":264},[220,78117,78118,78120,78122],{"class":222,"line":179},[220,78119,364],{"class":264},[220,78121,77995],{"class":420},[220,78123,359],{"class":264},[220,78125,78126,78128,78130],{"class":222,"line":389},[220,78127,2550],{"class":264},[220,78129,2553],{"class":420},[220,78131,386],{"class":264},[220,78133,78134,78136,78138],{"class":222,"line":399},[220,78135,2567],{"class":264},[220,78137,77995],{"class":420},[220,78139,359],{"class":264},[220,78141,78142,78144,78146],{"class":222,"line":644},[220,78143,402],{"class":264},[220,78145,347],{"class":420},[220,78147,359],{"class":264},[212,78149,78150],{"className":468,"code":78017,"language":469,"meta":178,"style":178},[99,78151,78152,78160,78168,78176,78184],{"__ignoreMap":178},[220,78153,78154,78156,78158],{"class":222,"line":223},[220,78155,343],{"class":264},[220,78157,347],{"class":420},[220,78159,359],{"class":264},[220,78161,78162,78164,78166],{"class":222,"line":179},[220,78163,364],{"class":264},[220,78165,77995],{"class":420},[220,78167,359],{"class":264},[220,78169,78170,78172,78174],{"class":222,"line":389},[220,78171,2550],{"class":264},[220,78173,2553],{"class":420},[220,78175,386],{"class":264},[220,78177,78178,78180,78182],{"class":222,"line":399},[220,78179,2567],{"class":264},[220,78181,77995],{"class":420},[220,78183,359],{"class":264},[220,78185,78186,78188,78190],{"class":222,"line":644},[220,78187,402],{"class":264},[220,78189,347],{"class":420},[220,78191,359],{"class":264},[212,78193,78195],{"className":251,"code":78194,"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,78196,78197,78207,78211,78225,78229,78238,78246,78250,78254],{"__ignoreMap":178},[220,78198,78199,78201,78203,78205],{"class":222,"line":223},[220,78200,261],{"class":260},[220,78202,11512],{"class":264},[220,78204,268],{"class":260},[220,78206,4007],{"class":230},[220,78208,78209],{"class":222,"line":179},[220,78210,647],{"emptyLinePlaceholder":194},[220,78212,78213,78215,78217,78219,78221,78223],{"class":222,"line":389},[220,78214,1735],{"class":260},[220,78216,1738],{"class":420},[220,78218,1741],{"class":260},[220,78220,1744],{"class":260},[220,78222,1747],{"class":226},[220,78224,1750],{"class":264},[220,78226,78227],{"class":222,"line":399},[220,78228,1765],{"class":264},[220,78230,78231,78233,78236],{"class":222,"line":644},[220,78232,1770],{"class":264},[220,78234,78235],{"class":230},"'VHS'",[220,78237,7009],{"class":264},[220,78239,78240,78242,78244],{"class":222,"line":650},[220,78241,7014],{"class":264},[220,78243,3206],{"class":230},[220,78245,2465],{"class":264},[220,78247,78248],{"class":222,"line":656},[220,78249,7031],{"class":264},[220,78251,78252],{"class":222,"line":673},[220,78253,1787],{"class":264},[220,78255,78256],{"class":222,"line":682},[220,78257,1792],{"class":264},[1504,78259,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":78261},[78262,78263],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":77995,"description":78003},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":78270,"title":78271,"body":78272,"category":33673,"componentType":25883,"description":78279,"extension":191,"meta":78540,"navigation":194,"path":78541,"requiresChild":194,"seo":78542,"stem":78543,"__hash__":78544},"components\u002Fdocs\u002Fcomponents\u002FVenetianBlinds.md","VenetianBlinds",{"type":8,"value":78273,"toc":78536},[78274,78277,78280,78282,78284,78287,78289,78534],[11,78275,78271],{"id":78276},"venetianblinds",[15,78278,78279],{},"Wipe the content away behind a set of parallel closing strips",[31911,78281],{"component":78271},[23,78283,31915],{"id":26533},[31917,78285],{":props":78286},"[{\"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,78288,31923],{"id":31922},[246,78290,78291,78336,78380,78424,78468],{":tabs":1557},[212,78292,78294],{"className":334,"code":78293,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVenetianBlinds>\n \u003CCircle \u002F>\n \u003C\u002FVenetianBlinds>\n\u003C\u002FShader>\n",[99,78295,78296,78304,78312,78320,78328],{"__ignoreMap":178},[220,78297,78298,78300,78302],{"class":222,"line":223},[220,78299,343],{"class":264},[220,78301,347],{"class":346},[220,78303,359],{"class":264},[220,78305,78306,78308,78310],{"class":222,"line":179},[220,78307,364],{"class":264},[220,78309,78271],{"class":346},[220,78311,359],{"class":264},[220,78313,78314,78316,78318],{"class":222,"line":389},[220,78315,2550],{"class":264},[220,78317,2553],{"class":346},[220,78319,386],{"class":264},[220,78321,78322,78324,78326],{"class":222,"line":399},[220,78323,2567],{"class":264},[220,78325,78271],{"class":346},[220,78327,359],{"class":264},[220,78329,78330,78332,78334],{"class":222,"line":644},[220,78331,402],{"class":264},[220,78333,347],{"class":346},[220,78335,359],{"class":264},[212,78337,78338],{"className":409,"code":78293,"language":411,"meta":178,"style":178},[99,78339,78340,78348,78356,78364,78372],{"__ignoreMap":178},[220,78341,78342,78344,78346],{"class":222,"line":223},[220,78343,343],{"class":264},[220,78345,347],{"class":420},[220,78347,359],{"class":264},[220,78349,78350,78352,78354],{"class":222,"line":179},[220,78351,364],{"class":264},[220,78353,78271],{"class":420},[220,78355,359],{"class":264},[220,78357,78358,78360,78362],{"class":222,"line":389},[220,78359,2550],{"class":264},[220,78361,2553],{"class":420},[220,78363,386],{"class":264},[220,78365,78366,78368,78370],{"class":222,"line":399},[220,78367,2567],{"class":264},[220,78369,78271],{"class":420},[220,78371,359],{"class":264},[220,78373,78374,78376,78378],{"class":222,"line":644},[220,78375,402],{"class":264},[220,78377,347],{"class":420},[220,78379,359],{"class":264},[212,78381,78382],{"className":2844,"code":78293,"language":2846,"meta":178,"style":178},[99,78383,78384,78392,78400,78408,78416],{"__ignoreMap":178},[220,78385,78386,78388,78390],{"class":222,"line":223},[220,78387,343],{"class":264},[220,78389,347],{"class":420},[220,78391,359],{"class":264},[220,78393,78394,78396,78398],{"class":222,"line":179},[220,78395,364],{"class":264},[220,78397,78271],{"class":420},[220,78399,359],{"class":264},[220,78401,78402,78404,78406],{"class":222,"line":389},[220,78403,2550],{"class":264},[220,78405,2553],{"class":420},[220,78407,386],{"class":264},[220,78409,78410,78412,78414],{"class":222,"line":399},[220,78411,2567],{"class":264},[220,78413,78271],{"class":420},[220,78415,359],{"class":264},[220,78417,78418,78420,78422],{"class":222,"line":644},[220,78419,402],{"class":264},[220,78421,347],{"class":420},[220,78423,359],{"class":264},[212,78425,78426],{"className":468,"code":78293,"language":469,"meta":178,"style":178},[99,78427,78428,78436,78444,78452,78460],{"__ignoreMap":178},[220,78429,78430,78432,78434],{"class":222,"line":223},[220,78431,343],{"class":264},[220,78433,347],{"class":420},[220,78435,359],{"class":264},[220,78437,78438,78440,78442],{"class":222,"line":179},[220,78439,364],{"class":264},[220,78441,78271],{"class":420},[220,78443,359],{"class":264},[220,78445,78446,78448,78450],{"class":222,"line":389},[220,78447,2550],{"class":264},[220,78449,2553],{"class":420},[220,78451,386],{"class":264},[220,78453,78454,78456,78458],{"class":222,"line":399},[220,78455,2567],{"class":264},[220,78457,78271],{"class":420},[220,78459,359],{"class":264},[220,78461,78462,78464,78466],{"class":222,"line":644},[220,78463,402],{"class":264},[220,78465,347],{"class":420},[220,78467,359],{"class":264},[212,78469,78471],{"className":251,"code":78470,"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,78472,78473,78483,78487,78501,78505,78514,78522,78526,78530],{"__ignoreMap":178},[220,78474,78475,78477,78479,78481],{"class":222,"line":223},[220,78476,261],{"class":260},[220,78478,11512],{"class":264},[220,78480,268],{"class":260},[220,78482,4007],{"class":230},[220,78484,78485],{"class":222,"line":179},[220,78486,647],{"emptyLinePlaceholder":194},[220,78488,78489,78491,78493,78495,78497,78499],{"class":222,"line":389},[220,78490,1735],{"class":260},[220,78492,1738],{"class":420},[220,78494,1741],{"class":260},[220,78496,1744],{"class":260},[220,78498,1747],{"class":226},[220,78500,1750],{"class":264},[220,78502,78503],{"class":222,"line":399},[220,78504,1765],{"class":264},[220,78506,78507,78509,78512],{"class":222,"line":644},[220,78508,1770],{"class":264},[220,78510,78511],{"class":230},"'VenetianBlinds'",[220,78513,7009],{"class":264},[220,78515,78516,78518,78520],{"class":222,"line":650},[220,78517,7014],{"class":264},[220,78519,3206],{"class":230},[220,78521,2465],{"class":264},[220,78523,78524],{"class":222,"line":656},[220,78525,7031],{"class":264},[220,78527,78528],{"class":222,"line":673},[220,78529,1787],{"class":264},[220,78531,78532],{"class":222,"line":682},[220,78533,1792],{"class":264},[1504,78535,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":78537},[78538,78539],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvenetianblinds",{"title":78271,"description":78279},"docs\u002Fcomponents\u002FVenetianBlinds","8-qPMX2YWIT5WLSW0uX6dk_pMBAHnuGY__KnerJvx9c",{"id":78546,"title":78547,"body":78548,"category":15908,"componentType":25877,"description":78555,"extension":191,"meta":78832,"navigation":194,"path":78833,"requiresChild":32530,"seo":78834,"stem":78835,"__hash__":78836},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":78549,"toc":78828},[78550,78553,78556,78558,78560,78563,78565,78826],[11,78551,78547],{"id":78552},"vesica",[15,78554,78555],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[31911,78557],{"component":78547},[23,78559,31915],{"id":26533},[31917,78561],{":props":78562},"[{\"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,78564,31923],{"id":31922},[246,78566,78567,78615,78666,78714,78764],{":tabs":1557},[212,78568,78570],{"className":334,"code":78569,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,78571,78572,78580,78587,78595,78603,78607],{"__ignoreMap":178},[220,78573,78574,78576,78578],{"class":222,"line":223},[220,78575,343],{"class":264},[220,78577,347],{"class":346},[220,78579,359],{"class":264},[220,78581,78582,78584],{"class":222,"line":179},[220,78583,364],{"class":264},[220,78585,78586],{"class":346},"Vesica\n",[220,78588,78589,78591,78593],{"class":222,"line":389},[220,78590,9635],{"class":226},[220,78592,353],{"class":264},[220,78594,9591],{"class":230},[220,78596,78597,78599,78601],{"class":222,"line":399},[220,78598,17405],{"class":226},[220,78600,353],{"class":264},[220,78602,41391],{"class":230},[220,78604,78605],{"class":222,"line":644},[220,78606,1234],{"class":264},[220,78608,78609,78611,78613],{"class":222,"line":650},[220,78610,402],{"class":264},[220,78612,347],{"class":346},[220,78614,359],{"class":264},[212,78616,78618],{"className":409,"code":78617,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,78619,78620,78628,78634,78642,78654,78658],{"__ignoreMap":178},[220,78621,78622,78624,78626],{"class":222,"line":223},[220,78623,343],{"class":264},[220,78625,347],{"class":420},[220,78627,359],{"class":264},[220,78629,78630,78632],{"class":222,"line":179},[220,78631,364],{"class":264},[220,78633,78586],{"class":420},[220,78635,78636,78638,78640],{"class":222,"line":389},[220,78637,9635],{"class":226},[220,78639,353],{"class":260},[220,78641,9591],{"class":230},[220,78643,78644,78646,78648,78650,78652],{"class":222,"line":399},[220,78645,9645],{"class":226},[220,78647,353],{"class":260},[220,78649,743],{"class":264},[220,78651,21148],{"class":420},[220,78653,749],{"class":264},[220,78655,78656],{"class":222,"line":644},[220,78657,1234],{"class":264},[220,78659,78660,78662,78664],{"class":222,"line":650},[220,78661,402],{"class":264},[220,78663,347],{"class":420},[220,78665,359],{"class":264},[212,78667,78668],{"className":2844,"code":78617,"language":2846,"meta":178,"style":178},[99,78669,78670,78678,78684,78692,78702,78706],{"__ignoreMap":178},[220,78671,78672,78674,78676],{"class":222,"line":223},[220,78673,343],{"class":264},[220,78675,347],{"class":420},[220,78677,359],{"class":264},[220,78679,78680,78682],{"class":222,"line":179},[220,78681,364],{"class":264},[220,78683,78586],{"class":420},[220,78685,78686,78688,78690],{"class":222,"line":389},[220,78687,9635],{"class":226},[220,78689,353],{"class":264},[220,78691,9591],{"class":230},[220,78693,78694,78696,78698,78700],{"class":222,"line":399},[220,78695,9645],{"class":226},[220,78697,29871],{"class":264},[220,78699,21148],{"class":420},[220,78701,749],{"class":264},[220,78703,78704],{"class":222,"line":644},[220,78705,1234],{"class":264},[220,78707,78708,78710,78712],{"class":222,"line":650},[220,78709,402],{"class":264},[220,78711,347],{"class":420},[220,78713,359],{"class":264},[212,78715,78716],{"className":468,"code":78617,"language":469,"meta":178,"style":178},[99,78717,78718,78726,78732,78740,78752,78756],{"__ignoreMap":178},[220,78719,78720,78722,78724],{"class":222,"line":223},[220,78721,343],{"class":264},[220,78723,347],{"class":420},[220,78725,359],{"class":264},[220,78727,78728,78730],{"class":222,"line":179},[220,78729,364],{"class":264},[220,78731,78586],{"class":420},[220,78733,78734,78736,78738],{"class":222,"line":389},[220,78735,9635],{"class":226},[220,78737,353],{"class":260},[220,78739,9591],{"class":230},[220,78741,78742,78744,78746,78748,78750],{"class":222,"line":399},[220,78743,9645],{"class":226},[220,78745,353],{"class":260},[220,78747,743],{"class":264},[220,78749,21148],{"class":420},[220,78751,749],{"class":264},[220,78753,78754],{"class":222,"line":644},[220,78755,1234],{"class":264},[220,78757,78758,78760,78762],{"class":222,"line":650},[220,78759,402],{"class":264},[220,78761,347],{"class":420},[220,78763,359],{"class":264},[212,78765,78767],{"className":251,"code":78766,"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,78768,78769,78779,78783,78797,78801,78818,78822],{"__ignoreMap":178},[220,78770,78771,78773,78775,78777],{"class":222,"line":223},[220,78772,261],{"class":260},[220,78774,11512],{"class":264},[220,78776,268],{"class":260},[220,78778,4007],{"class":230},[220,78780,78781],{"class":222,"line":179},[220,78782,647],{"emptyLinePlaceholder":194},[220,78784,78785,78787,78789,78791,78793,78795],{"class":222,"line":389},[220,78786,1735],{"class":260},[220,78788,1738],{"class":420},[220,78790,1741],{"class":260},[220,78792,1744],{"class":260},[220,78794,1747],{"class":226},[220,78796,1750],{"class":264},[220,78798,78799],{"class":222,"line":399},[220,78800,1765],{"class":264},[220,78802,78803,78805,78808,78810,78812,78814,78816],{"class":222,"line":644},[220,78804,1770],{"class":264},[220,78806,78807],{"class":230},"'Vesica'",[220,78809,1776],{"class":264},[220,78811,10169],{"class":230},[220,78813,6566],{"class":264},[220,78815,21148],{"class":420},[220,78817,1782],{"class":264},[220,78819,78820],{"class":222,"line":650},[220,78821,1787],{"class":264},[220,78823,78824],{"class":222,"line":656},[220,78825,1792],{"class":264},[1504,78827,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78829},[78830,78831],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":78547,"description":78555},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":78838,"title":78839,"body":78840,"category":36368,"componentType":25883,"description":78847,"extension":191,"meta":79165,"navigation":194,"path":79166,"requiresChild":194,"seo":79167,"stem":79168,"__hash__":79169},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":78841,"toc":79161},[78842,78845,78848,78850,78852,78855,78857,79159],[11,78843,78839],{"id":78844},"vibrance",[15,78846,78847],{},"Selective saturation adjustment protecting skin tones",[31911,78849],{"component":78839},[23,78851,31915],{"id":26533},[31917,78853],{":props":78854},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,78856,31923],{"id":31922},[246,78858,78859,78916,78975,79031,79089],{":tabs":1557},[212,78860,78862],{"className":334,"code":78861,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78863,78864,78872,78879,78888,78892,78900,78908],{"__ignoreMap":178},[220,78865,78866,78868,78870],{"class":222,"line":223},[220,78867,343],{"class":264},[220,78869,347],{"class":346},[220,78871,359],{"class":264},[220,78873,78874,78876],{"class":222,"line":179},[220,78875,364],{"class":264},[220,78877,78878],{"class":346},"Vibrance\n",[220,78880,78881,78883,78885],{"class":222,"line":389},[220,78882,20371],{"class":226},[220,78884,353],{"class":264},[220,78886,78887],{"class":230},"\"0\"\n",[220,78889,78890],{"class":222,"line":399},[220,78891,31959],{"class":264},[220,78893,78894,78896,78898],{"class":222,"line":644},[220,78895,2550],{"class":264},[220,78897,2553],{"class":346},[220,78899,386],{"class":264},[220,78901,78902,78904,78906],{"class":222,"line":650},[220,78903,2567],{"class":264},[220,78905,78839],{"class":346},[220,78907,359],{"class":264},[220,78909,78910,78912,78914],{"class":222,"line":656},[220,78911,402],{"class":264},[220,78913,347],{"class":346},[220,78915,359],{"class":264},[212,78917,78919],{"className":409,"code":78918,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78920,78921,78929,78935,78947,78951,78959,78967],{"__ignoreMap":178},[220,78922,78923,78925,78927],{"class":222,"line":223},[220,78924,343],{"class":264},[220,78926,347],{"class":420},[220,78928,359],{"class":264},[220,78930,78931,78933],{"class":222,"line":179},[220,78932,364],{"class":264},[220,78934,78878],{"class":420},[220,78936,78937,78939,78941,78943,78945],{"class":222,"line":389},[220,78938,20482],{"class":226},[220,78940,353],{"class":260},[220,78942,743],{"class":264},[220,78944,8673],{"class":420},[220,78946,749],{"class":264},[220,78948,78949],{"class":222,"line":399},[220,78950,31959],{"class":264},[220,78952,78953,78955,78957],{"class":222,"line":644},[220,78954,2550],{"class":264},[220,78956,2553],{"class":420},[220,78958,386],{"class":264},[220,78960,78961,78963,78965],{"class":222,"line":650},[220,78962,2567],{"class":264},[220,78964,78839],{"class":420},[220,78966,359],{"class":264},[220,78968,78969,78971,78973],{"class":222,"line":656},[220,78970,402],{"class":264},[220,78972,347],{"class":420},[220,78974,359],{"class":264},[212,78976,78977],{"className":2844,"code":78918,"language":2846,"meta":178,"style":178},[99,78978,78979,78987,78993,79003,79007,79015,79023],{"__ignoreMap":178},[220,78980,78981,78983,78985],{"class":222,"line":223},[220,78982,343],{"class":264},[220,78984,347],{"class":420},[220,78986,359],{"class":264},[220,78988,78989,78991],{"class":222,"line":179},[220,78990,364],{"class":264},[220,78992,78878],{"class":420},[220,78994,78995,78997,78999,79001],{"class":222,"line":389},[220,78996,20482],{"class":226},[220,78998,29871],{"class":264},[220,79000,8673],{"class":420},[220,79002,749],{"class":264},[220,79004,79005],{"class":222,"line":399},[220,79006,31959],{"class":264},[220,79008,79009,79011,79013],{"class":222,"line":644},[220,79010,2550],{"class":264},[220,79012,2553],{"class":420},[220,79014,386],{"class":264},[220,79016,79017,79019,79021],{"class":222,"line":650},[220,79018,2567],{"class":264},[220,79020,78839],{"class":420},[220,79022,359],{"class":264},[220,79024,79025,79027,79029],{"class":222,"line":656},[220,79026,402],{"class":264},[220,79028,347],{"class":420},[220,79030,359],{"class":264},[212,79032,79033],{"className":468,"code":78918,"language":469,"meta":178,"style":178},[99,79034,79035,79043,79049,79061,79065,79073,79081],{"__ignoreMap":178},[220,79036,79037,79039,79041],{"class":222,"line":223},[220,79038,343],{"class":264},[220,79040,347],{"class":420},[220,79042,359],{"class":264},[220,79044,79045,79047],{"class":222,"line":179},[220,79046,364],{"class":264},[220,79048,78878],{"class":420},[220,79050,79051,79053,79055,79057,79059],{"class":222,"line":389},[220,79052,20482],{"class":226},[220,79054,353],{"class":260},[220,79056,743],{"class":264},[220,79058,8673],{"class":420},[220,79060,749],{"class":264},[220,79062,79063],{"class":222,"line":399},[220,79064,31959],{"class":264},[220,79066,79067,79069,79071],{"class":222,"line":644},[220,79068,2550],{"class":264},[220,79070,2553],{"class":420},[220,79072,386],{"class":264},[220,79074,79075,79077,79079],{"class":222,"line":650},[220,79076,2567],{"class":264},[220,79078,78839],{"class":420},[220,79080,359],{"class":264},[220,79082,79083,79085,79087],{"class":222,"line":656},[220,79084,402],{"class":264},[220,79086,347],{"class":420},[220,79088,359],{"class":264},[212,79090,79092],{"className":251,"code":79091,"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,79093,79094,79104,79108,79122,79126,79139,79147,79151,79155],{"__ignoreMap":178},[220,79095,79096,79098,79100,79102],{"class":222,"line":223},[220,79097,261],{"class":260},[220,79099,11512],{"class":264},[220,79101,268],{"class":260},[220,79103,4007],{"class":230},[220,79105,79106],{"class":222,"line":179},[220,79107,647],{"emptyLinePlaceholder":194},[220,79109,79110,79112,79114,79116,79118,79120],{"class":222,"line":389},[220,79111,1735],{"class":260},[220,79113,1738],{"class":420},[220,79115,1741],{"class":260},[220,79117,1744],{"class":260},[220,79119,1747],{"class":226},[220,79121,1750],{"class":264},[220,79123,79124],{"class":222,"line":399},[220,79125,1765],{"class":264},[220,79127,79128,79130,79133,79135,79137],{"class":222,"line":644},[220,79129,1770],{"class":264},[220,79131,79132],{"class":230},"'Vibrance'",[220,79134,32203],{"class":264},[220,79136,8673],{"class":420},[220,79138,7546],{"class":264},[220,79140,79141,79143,79145],{"class":222,"line":650},[220,79142,7014],{"class":264},[220,79144,3206],{"class":230},[220,79146,2465],{"class":264},[220,79148,79149],{"class":222,"line":656},[220,79150,7031],{"class":264},[220,79152,79153],{"class":222,"line":673},[220,79154,1787],{"class":264},[220,79156,79157],{"class":222,"line":682},[220,79158,1792],{"class":264},[1504,79160,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79162},[79163,79164],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":78839,"description":78847},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":79171,"title":79172,"body":79173,"category":33063,"componentType":25877,"description":79180,"extension":191,"meta":79365,"navigation":194,"path":79366,"requiresChild":32530,"seo":79367,"stem":79368,"__hash__":79369},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":79174,"toc":79361},[79175,79178,79181,79183,79185,79188,79190,79359],[11,79176,79172],{"id":79177},"videotexture",[15,79179,79180],{},"Display a video with customizable playback and object-fit modes",[31911,79182],{"component":79172},[23,79184,31915],{"id":26533},[31917,79186],{":props":79187},"[{\"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,79189,31923],{"id":31922},[246,79191,79192,79221,79249,79277,79305],{":tabs":1557},[212,79193,79195],{"className":334,"code":79194,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,79196,79197,79205,79213],{"__ignoreMap":178},[220,79198,79199,79201,79203],{"class":222,"line":223},[220,79200,343],{"class":264},[220,79202,347],{"class":346},[220,79204,359],{"class":264},[220,79206,79207,79209,79211],{"class":222,"line":179},[220,79208,364],{"class":264},[220,79210,79172],{"class":346},[220,79212,386],{"class":264},[220,79214,79215,79217,79219],{"class":222,"line":389},[220,79216,402],{"class":264},[220,79218,347],{"class":346},[220,79220,359],{"class":264},[212,79222,79223],{"className":409,"code":79194,"language":411,"meta":178,"style":178},[99,79224,79225,79233,79241],{"__ignoreMap":178},[220,79226,79227,79229,79231],{"class":222,"line":223},[220,79228,343],{"class":264},[220,79230,347],{"class":420},[220,79232,359],{"class":264},[220,79234,79235,79237,79239],{"class":222,"line":179},[220,79236,364],{"class":264},[220,79238,79172],{"class":420},[220,79240,386],{"class":264},[220,79242,79243,79245,79247],{"class":222,"line":389},[220,79244,402],{"class":264},[220,79246,347],{"class":420},[220,79248,359],{"class":264},[212,79250,79251],{"className":2844,"code":79194,"language":2846,"meta":178,"style":178},[99,79252,79253,79261,79269],{"__ignoreMap":178},[220,79254,79255,79257,79259],{"class":222,"line":223},[220,79256,343],{"class":264},[220,79258,347],{"class":420},[220,79260,359],{"class":264},[220,79262,79263,79265,79267],{"class":222,"line":179},[220,79264,364],{"class":264},[220,79266,79172],{"class":420},[220,79268,386],{"class":264},[220,79270,79271,79273,79275],{"class":222,"line":389},[220,79272,402],{"class":264},[220,79274,347],{"class":420},[220,79276,359],{"class":264},[212,79278,79279],{"className":468,"code":79194,"language":469,"meta":178,"style":178},[99,79280,79281,79289,79297],{"__ignoreMap":178},[220,79282,79283,79285,79287],{"class":222,"line":223},[220,79284,343],{"class":264},[220,79286,347],{"class":420},[220,79288,359],{"class":264},[220,79290,79291,79293,79295],{"class":222,"line":179},[220,79292,364],{"class":264},[220,79294,79172],{"class":420},[220,79296,386],{"class":264},[220,79298,79299,79301,79303],{"class":222,"line":389},[220,79300,402],{"class":264},[220,79302,347],{"class":420},[220,79304,359],{"class":264},[212,79306,79308],{"className":251,"code":79307,"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,79309,79310,79320,79324,79338,79342,79351,79355],{"__ignoreMap":178},[220,79311,79312,79314,79316,79318],{"class":222,"line":223},[220,79313,261],{"class":260},[220,79315,11512],{"class":264},[220,79317,268],{"class":260},[220,79319,4007],{"class":230},[220,79321,79322],{"class":222,"line":179},[220,79323,647],{"emptyLinePlaceholder":194},[220,79325,79326,79328,79330,79332,79334,79336],{"class":222,"line":389},[220,79327,1735],{"class":260},[220,79329,1738],{"class":420},[220,79331,1741],{"class":260},[220,79333,1744],{"class":260},[220,79335,1747],{"class":226},[220,79337,1750],{"class":264},[220,79339,79340],{"class":222,"line":399},[220,79341,1765],{"class":264},[220,79343,79344,79346,79349],{"class":222,"line":644},[220,79345,1770],{"class":264},[220,79347,79348],{"class":230},"'VideoTexture'",[220,79350,2465],{"class":264},[220,79352,79353],{"class":222,"line":650},[220,79354,1787],{"class":264},[220,79356,79357],{"class":222,"line":656},[220,79358,1792],{"class":264},[1504,79360,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":79362},[79363,79364],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":79172,"description":79180},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":79371,"title":79372,"body":79373,"category":32806,"componentType":25883,"description":79380,"extension":191,"meta":79779,"navigation":194,"path":79780,"requiresChild":194,"seo":79781,"stem":79782,"__hash__":79783},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":79374,"toc":79775},[79375,79378,79381,79383,79385,79388,79390,79773],[11,79376,79372],{"id":79377},"vignette",[15,79379,79380],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[31911,79382],{"component":79372},[23,79384,31915],{"id":26533},[31917,79386],{":props":79387},"[{\"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,79389,31923],{"id":31922},[246,79391,79392,79464,79543,79617,79695],{":tabs":1557},[212,79393,79395],{"className":334,"code":79394,"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,79396,79397,79405,79412,79420,79428,79436,79440,79448,79456],{"__ignoreMap":178},[220,79398,79399,79401,79403],{"class":222,"line":223},[220,79400,343],{"class":264},[220,79402,347],{"class":346},[220,79404,359],{"class":264},[220,79406,79407,79409],{"class":222,"line":179},[220,79408,364],{"class":264},[220,79410,79411],{"class":346},"Vignette\n",[220,79413,79414,79416,79418],{"class":222,"line":389},[220,79415,9635],{"class":226},[220,79417,353],{"class":264},[220,79419,19474],{"class":230},[220,79421,79422,79424,79426],{"class":222,"line":399},[220,79423,17405],{"class":226},[220,79425,353],{"class":264},[220,79427,42158],{"class":230},[220,79429,79430,79432,79434],{"class":222,"line":644},[220,79431,20371],{"class":226},[220,79433,353],{"class":264},[220,79435,36625],{"class":230},[220,79437,79438],{"class":222,"line":650},[220,79439,31959],{"class":264},[220,79441,79442,79444,79446],{"class":222,"line":656},[220,79443,2550],{"class":264},[220,79445,2553],{"class":346},[220,79447,386],{"class":264},[220,79449,79450,79452,79454],{"class":222,"line":673},[220,79451,2567],{"class":264},[220,79453,79372],{"class":346},[220,79455,359],{"class":264},[220,79457,79458,79460,79462],{"class":222,"line":682},[220,79459,402],{"class":264},[220,79461,347],{"class":346},[220,79463,359],{"class":264},[212,79465,79467],{"className":409,"code":79466,"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,79468,79469,79477,79483,79491,79503,79515,79519,79527,79535],{"__ignoreMap":178},[220,79470,79471,79473,79475],{"class":222,"line":223},[220,79472,343],{"class":264},[220,79474,347],{"class":420},[220,79476,359],{"class":264},[220,79478,79479,79481],{"class":222,"line":179},[220,79480,364],{"class":264},[220,79482,79411],{"class":420},[220,79484,79485,79487,79489],{"class":222,"line":389},[220,79486,9635],{"class":226},[220,79488,353],{"class":260},[220,79490,19474],{"class":230},[220,79492,79493,79495,79497,79499,79501],{"class":222,"line":399},[220,79494,9645],{"class":226},[220,79496,353],{"class":260},[220,79498,743],{"class":264},[220,79500,7754],{"class":420},[220,79502,749],{"class":264},[220,79504,79505,79507,79509,79511,79513],{"class":222,"line":644},[220,79506,20482],{"class":226},[220,79508,353],{"class":260},[220,79510,743],{"class":264},[220,79512,8677],{"class":420},[220,79514,749],{"class":264},[220,79516,79517],{"class":222,"line":650},[220,79518,31959],{"class":264},[220,79520,79521,79523,79525],{"class":222,"line":656},[220,79522,2550],{"class":264},[220,79524,2553],{"class":420},[220,79526,386],{"class":264},[220,79528,79529,79531,79533],{"class":222,"line":673},[220,79530,2567],{"class":264},[220,79532,79372],{"class":420},[220,79534,359],{"class":264},[220,79536,79537,79539,79541],{"class":222,"line":682},[220,79538,402],{"class":264},[220,79540,347],{"class":420},[220,79542,359],{"class":264},[212,79544,79545],{"className":2844,"code":79466,"language":2846,"meta":178,"style":178},[99,79546,79547,79555,79561,79569,79579,79589,79593,79601,79609],{"__ignoreMap":178},[220,79548,79549,79551,79553],{"class":222,"line":223},[220,79550,343],{"class":264},[220,79552,347],{"class":420},[220,79554,359],{"class":264},[220,79556,79557,79559],{"class":222,"line":179},[220,79558,364],{"class":264},[220,79560,79411],{"class":420},[220,79562,79563,79565,79567],{"class":222,"line":389},[220,79564,9635],{"class":226},[220,79566,353],{"class":264},[220,79568,19474],{"class":230},[220,79570,79571,79573,79575,79577],{"class":222,"line":399},[220,79572,9645],{"class":226},[220,79574,29871],{"class":264},[220,79576,7754],{"class":420},[220,79578,749],{"class":264},[220,79580,79581,79583,79585,79587],{"class":222,"line":644},[220,79582,20482],{"class":226},[220,79584,29871],{"class":264},[220,79586,8677],{"class":420},[220,79588,749],{"class":264},[220,79590,79591],{"class":222,"line":650},[220,79592,31959],{"class":264},[220,79594,79595,79597,79599],{"class":222,"line":656},[220,79596,2550],{"class":264},[220,79598,2553],{"class":420},[220,79600,386],{"class":264},[220,79602,79603,79605,79607],{"class":222,"line":673},[220,79604,2567],{"class":264},[220,79606,79372],{"class":420},[220,79608,359],{"class":264},[220,79610,79611,79613,79615],{"class":222,"line":682},[220,79612,402],{"class":264},[220,79614,347],{"class":420},[220,79616,359],{"class":264},[212,79618,79619],{"className":468,"code":79466,"language":469,"meta":178,"style":178},[99,79620,79621,79629,79635,79643,79655,79667,79671,79679,79687],{"__ignoreMap":178},[220,79622,79623,79625,79627],{"class":222,"line":223},[220,79624,343],{"class":264},[220,79626,347],{"class":420},[220,79628,359],{"class":264},[220,79630,79631,79633],{"class":222,"line":179},[220,79632,364],{"class":264},[220,79634,79411],{"class":420},[220,79636,79637,79639,79641],{"class":222,"line":389},[220,79638,9635],{"class":226},[220,79640,353],{"class":260},[220,79642,19474],{"class":230},[220,79644,79645,79647,79649,79651,79653],{"class":222,"line":399},[220,79646,9645],{"class":226},[220,79648,353],{"class":260},[220,79650,743],{"class":264},[220,79652,7754],{"class":420},[220,79654,749],{"class":264},[220,79656,79657,79659,79661,79663,79665],{"class":222,"line":644},[220,79658,20482],{"class":226},[220,79660,353],{"class":260},[220,79662,743],{"class":264},[220,79664,8677],{"class":420},[220,79666,749],{"class":264},[220,79668,79669],{"class":222,"line":650},[220,79670,31959],{"class":264},[220,79672,79673,79675,79677],{"class":222,"line":656},[220,79674,2550],{"class":264},[220,79676,2553],{"class":420},[220,79678,386],{"class":264},[220,79680,79681,79683,79685],{"class":222,"line":673},[220,79682,2567],{"class":264},[220,79684,79372],{"class":420},[220,79686,359],{"class":264},[220,79688,79689,79691,79693],{"class":222,"line":682},[220,79690,402],{"class":264},[220,79692,347],{"class":420},[220,79694,359],{"class":264},[212,79696,79698],{"className":251,"code":79697,"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,79699,79700,79710,79714,79728,79732,79753,79761,79765,79769],{"__ignoreMap":178},[220,79701,79702,79704,79706,79708],{"class":222,"line":223},[220,79703,261],{"class":260},[220,79705,11512],{"class":264},[220,79707,268],{"class":260},[220,79709,4007],{"class":230},[220,79711,79712],{"class":222,"line":179},[220,79713,647],{"emptyLinePlaceholder":194},[220,79715,79716,79718,79720,79722,79724,79726],{"class":222,"line":389},[220,79717,1735],{"class":260},[220,79719,1738],{"class":420},[220,79721,1741],{"class":260},[220,79723,1744],{"class":260},[220,79725,1747],{"class":226},[220,79727,1750],{"class":264},[220,79729,79730],{"class":222,"line":399},[220,79731,1765],{"class":264},[220,79733,79734,79736,79739,79741,79743,79745,79747,79749,79751],{"class":222,"line":644},[220,79735,1770],{"class":264},[220,79737,79738],{"class":230},"'Vignette'",[220,79740,1776],{"class":264},[220,79742,20034],{"class":230},[220,79744,6566],{"class":264},[220,79746,7754],{"class":420},[220,79748,45003],{"class":264},[220,79750,8677],{"class":420},[220,79752,7546],{"class":264},[220,79754,79755,79757,79759],{"class":222,"line":650},[220,79756,7014],{"class":264},[220,79758,3206],{"class":230},[220,79760,2465],{"class":264},[220,79762,79763],{"class":222,"line":656},[220,79764,7031],{"class":264},[220,79766,79767],{"class":222,"line":673},[220,79768,1787],{"class":264},[220,79770,79771],{"class":222,"line":682},[220,79772,1792],{"class":264},[1504,79774,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79776},[79777,79778],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":79372,"description":79380},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":79785,"title":79786,"body":79787,"category":33063,"componentType":25877,"description":79794,"extension":191,"meta":79979,"navigation":194,"path":79980,"requiresChild":32530,"seo":79981,"stem":79982,"__hash__":79983},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":79788,"toc":79975},[79789,79792,79795,79797,79799,79802,79804,79973],[11,79790,79786],{"id":79791},"voronoi",[15,79793,79794],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[31911,79796],{"component":79786},[23,79798,31915],{"id":26533},[31917,79800],{":props":79801},"[{\"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,79803,31923],{"id":31922},[246,79805,79806,79835,79863,79891,79919],{":tabs":1557},[212,79807,79809],{"className":334,"code":79808,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,79810,79811,79819,79827],{"__ignoreMap":178},[220,79812,79813,79815,79817],{"class":222,"line":223},[220,79814,343],{"class":264},[220,79816,347],{"class":346},[220,79818,359],{"class":264},[220,79820,79821,79823,79825],{"class":222,"line":179},[220,79822,364],{"class":264},[220,79824,79786],{"class":346},[220,79826,386],{"class":264},[220,79828,79829,79831,79833],{"class":222,"line":389},[220,79830,402],{"class":264},[220,79832,347],{"class":346},[220,79834,359],{"class":264},[212,79836,79837],{"className":409,"code":79808,"language":411,"meta":178,"style":178},[99,79838,79839,79847,79855],{"__ignoreMap":178},[220,79840,79841,79843,79845],{"class":222,"line":223},[220,79842,343],{"class":264},[220,79844,347],{"class":420},[220,79846,359],{"class":264},[220,79848,79849,79851,79853],{"class":222,"line":179},[220,79850,364],{"class":264},[220,79852,79786],{"class":420},[220,79854,386],{"class":264},[220,79856,79857,79859,79861],{"class":222,"line":389},[220,79858,402],{"class":264},[220,79860,347],{"class":420},[220,79862,359],{"class":264},[212,79864,79865],{"className":2844,"code":79808,"language":2846,"meta":178,"style":178},[99,79866,79867,79875,79883],{"__ignoreMap":178},[220,79868,79869,79871,79873],{"class":222,"line":223},[220,79870,343],{"class":264},[220,79872,347],{"class":420},[220,79874,359],{"class":264},[220,79876,79877,79879,79881],{"class":222,"line":179},[220,79878,364],{"class":264},[220,79880,79786],{"class":420},[220,79882,386],{"class":264},[220,79884,79885,79887,79889],{"class":222,"line":389},[220,79886,402],{"class":264},[220,79888,347],{"class":420},[220,79890,359],{"class":264},[212,79892,79893],{"className":468,"code":79808,"language":469,"meta":178,"style":178},[99,79894,79895,79903,79911],{"__ignoreMap":178},[220,79896,79897,79899,79901],{"class":222,"line":223},[220,79898,343],{"class":264},[220,79900,347],{"class":420},[220,79902,359],{"class":264},[220,79904,79905,79907,79909],{"class":222,"line":179},[220,79906,364],{"class":264},[220,79908,79786],{"class":420},[220,79910,386],{"class":264},[220,79912,79913,79915,79917],{"class":222,"line":389},[220,79914,402],{"class":264},[220,79916,347],{"class":420},[220,79918,359],{"class":264},[212,79920,79922],{"className":251,"code":79921,"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,79923,79924,79934,79938,79952,79956,79965,79969],{"__ignoreMap":178},[220,79925,79926,79928,79930,79932],{"class":222,"line":223},[220,79927,261],{"class":260},[220,79929,11512],{"class":264},[220,79931,268],{"class":260},[220,79933,4007],{"class":230},[220,79935,79936],{"class":222,"line":179},[220,79937,647],{"emptyLinePlaceholder":194},[220,79939,79940,79942,79944,79946,79948,79950],{"class":222,"line":389},[220,79941,1735],{"class":260},[220,79943,1738],{"class":420},[220,79945,1741],{"class":260},[220,79947,1744],{"class":260},[220,79949,1747],{"class":226},[220,79951,1750],{"class":264},[220,79953,79954],{"class":222,"line":399},[220,79955,1765],{"class":264},[220,79957,79958,79960,79963],{"class":222,"line":644},[220,79959,1770],{"class":264},[220,79961,79962],{"class":230},"'Voronoi'",[220,79964,2465],{"class":264},[220,79966,79967],{"class":222,"line":650},[220,79968,1787],{"class":264},[220,79970,79971],{"class":222,"line":656},[220,79972,1792],{"class":264},[1504,79974,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":79976},[79977,79978],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":79786,"description":79794},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":79985,"title":79986,"body":79987,"category":36569,"componentType":25877,"description":79994,"extension":191,"meta":80179,"navigation":194,"path":80180,"requiresChild":32530,"seo":80181,"stem":80182,"__hash__":80183},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":79988,"toc":80175},[79989,79992,79995,79997,79999,80002,80004,80173],[11,79990,79986],{"id":79991},"water",[15,79993,79994],{},"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,79996],{"component":79986},[23,79998,31915],{"id":26533},[31917,80000],{":props":80001},"[{\"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,80003,31923],{"id":31922},[246,80005,80006,80035,80063,80091,80119],{":tabs":1557},[212,80007,80009],{"className":334,"code":80008,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,80010,80011,80019,80027],{"__ignoreMap":178},[220,80012,80013,80015,80017],{"class":222,"line":223},[220,80014,343],{"class":264},[220,80016,347],{"class":346},[220,80018,359],{"class":264},[220,80020,80021,80023,80025],{"class":222,"line":179},[220,80022,364],{"class":264},[220,80024,79986],{"class":346},[220,80026,386],{"class":264},[220,80028,80029,80031,80033],{"class":222,"line":389},[220,80030,402],{"class":264},[220,80032,347],{"class":346},[220,80034,359],{"class":264},[212,80036,80037],{"className":409,"code":80008,"language":411,"meta":178,"style":178},[99,80038,80039,80047,80055],{"__ignoreMap":178},[220,80040,80041,80043,80045],{"class":222,"line":223},[220,80042,343],{"class":264},[220,80044,347],{"class":420},[220,80046,359],{"class":264},[220,80048,80049,80051,80053],{"class":222,"line":179},[220,80050,364],{"class":264},[220,80052,79986],{"class":420},[220,80054,386],{"class":264},[220,80056,80057,80059,80061],{"class":222,"line":389},[220,80058,402],{"class":264},[220,80060,347],{"class":420},[220,80062,359],{"class":264},[212,80064,80065],{"className":2844,"code":80008,"language":2846,"meta":178,"style":178},[99,80066,80067,80075,80083],{"__ignoreMap":178},[220,80068,80069,80071,80073],{"class":222,"line":223},[220,80070,343],{"class":264},[220,80072,347],{"class":420},[220,80074,359],{"class":264},[220,80076,80077,80079,80081],{"class":222,"line":179},[220,80078,364],{"class":264},[220,80080,79986],{"class":420},[220,80082,386],{"class":264},[220,80084,80085,80087,80089],{"class":222,"line":389},[220,80086,402],{"class":264},[220,80088,347],{"class":420},[220,80090,359],{"class":264},[212,80092,80093],{"className":468,"code":80008,"language":469,"meta":178,"style":178},[99,80094,80095,80103,80111],{"__ignoreMap":178},[220,80096,80097,80099,80101],{"class":222,"line":223},[220,80098,343],{"class":264},[220,80100,347],{"class":420},[220,80102,359],{"class":264},[220,80104,80105,80107,80109],{"class":222,"line":179},[220,80106,364],{"class":264},[220,80108,79986],{"class":420},[220,80110,386],{"class":264},[220,80112,80113,80115,80117],{"class":222,"line":389},[220,80114,402],{"class":264},[220,80116,347],{"class":420},[220,80118,359],{"class":264},[212,80120,80122],{"className":251,"code":80121,"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,80123,80124,80134,80138,80152,80156,80165,80169],{"__ignoreMap":178},[220,80125,80126,80128,80130,80132],{"class":222,"line":223},[220,80127,261],{"class":260},[220,80129,11512],{"class":264},[220,80131,268],{"class":260},[220,80133,4007],{"class":230},[220,80135,80136],{"class":222,"line":179},[220,80137,647],{"emptyLinePlaceholder":194},[220,80139,80140,80142,80144,80146,80148,80150],{"class":222,"line":389},[220,80141,1735],{"class":260},[220,80143,1738],{"class":420},[220,80145,1741],{"class":260},[220,80147,1744],{"class":260},[220,80149,1747],{"class":226},[220,80151,1750],{"class":264},[220,80153,80154],{"class":222,"line":399},[220,80155,1765],{"class":264},[220,80157,80158,80160,80163],{"class":222,"line":644},[220,80159,1770],{"class":264},[220,80161,80162],{"class":230},"'Water'",[220,80164,2465],{"class":264},[220,80166,80167],{"class":222,"line":650},[220,80168,1787],{"class":264},[220,80170,80171],{"class":222,"line":656},[220,80172,1792],{"class":264},[1504,80174,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80176},[80177,80178],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":79986,"description":79994},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":80185,"title":80186,"body":80187,"category":32806,"componentType":25883,"description":80194,"extension":191,"meta":80511,"navigation":194,"path":80512,"requiresChild":194,"seo":80513,"stem":80514,"__hash__":80515},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":80188,"toc":80507},[80189,80192,80195,80197,80199,80202,80204,80505],[11,80190,80186],{"id":80191},"watercolor",[15,80193,80194],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[31911,80196],{"component":80186},[23,80198,31915],{"id":26533},[31917,80200],{":props":80201},"[{\"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,80203,31923],{"id":31922},[246,80205,80206,80262,80321,80377,80435],{":tabs":1557},[212,80207,80209],{"className":334,"code":80208,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,80210,80211,80219,80226,80234,80238,80246,80254],{"__ignoreMap":178},[220,80212,80213,80215,80217],{"class":222,"line":223},[220,80214,343],{"class":264},[220,80216,347],{"class":346},[220,80218,359],{"class":264},[220,80220,80221,80223],{"class":222,"line":179},[220,80222,364],{"class":264},[220,80224,80225],{"class":346},"Watercolor\n",[220,80227,80228,80230,80232],{"class":222,"line":389},[220,80229,17405],{"class":226},[220,80231,353],{"class":264},[220,80233,38669],{"class":230},[220,80235,80236],{"class":222,"line":399},[220,80237,31959],{"class":264},[220,80239,80240,80242,80244],{"class":222,"line":644},[220,80241,2550],{"class":264},[220,80243,2553],{"class":346},[220,80245,386],{"class":264},[220,80247,80248,80250,80252],{"class":222,"line":650},[220,80249,2567],{"class":264},[220,80251,80186],{"class":346},[220,80253,359],{"class":264},[220,80255,80256,80258,80260],{"class":222,"line":656},[220,80257,402],{"class":264},[220,80259,347],{"class":346},[220,80261,359],{"class":264},[212,80263,80265],{"className":409,"code":80264,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,80266,80267,80275,80281,80293,80297,80305,80313],{"__ignoreMap":178},[220,80268,80269,80271,80273],{"class":222,"line":223},[220,80270,343],{"class":264},[220,80272,347],{"class":420},[220,80274,359],{"class":264},[220,80276,80277,80279],{"class":222,"line":179},[220,80278,364],{"class":264},[220,80280,80225],{"class":420},[220,80282,80283,80285,80287,80289,80291],{"class":222,"line":389},[220,80284,9645],{"class":226},[220,80286,353],{"class":260},[220,80288,743],{"class":264},[220,80290,38723],{"class":420},[220,80292,749],{"class":264},[220,80294,80295],{"class":222,"line":399},[220,80296,31959],{"class":264},[220,80298,80299,80301,80303],{"class":222,"line":644},[220,80300,2550],{"class":264},[220,80302,2553],{"class":420},[220,80304,386],{"class":264},[220,80306,80307,80309,80311],{"class":222,"line":650},[220,80308,2567],{"class":264},[220,80310,80186],{"class":420},[220,80312,359],{"class":264},[220,80314,80315,80317,80319],{"class":222,"line":656},[220,80316,402],{"class":264},[220,80318,347],{"class":420},[220,80320,359],{"class":264},[212,80322,80323],{"className":2844,"code":80264,"language":2846,"meta":178,"style":178},[99,80324,80325,80333,80339,80349,80353,80361,80369],{"__ignoreMap":178},[220,80326,80327,80329,80331],{"class":222,"line":223},[220,80328,343],{"class":264},[220,80330,347],{"class":420},[220,80332,359],{"class":264},[220,80334,80335,80337],{"class":222,"line":179},[220,80336,364],{"class":264},[220,80338,80225],{"class":420},[220,80340,80341,80343,80345,80347],{"class":222,"line":389},[220,80342,9645],{"class":226},[220,80344,29871],{"class":264},[220,80346,38723],{"class":420},[220,80348,749],{"class":264},[220,80350,80351],{"class":222,"line":399},[220,80352,31959],{"class":264},[220,80354,80355,80357,80359],{"class":222,"line":644},[220,80356,2550],{"class":264},[220,80358,2553],{"class":420},[220,80360,386],{"class":264},[220,80362,80363,80365,80367],{"class":222,"line":650},[220,80364,2567],{"class":264},[220,80366,80186],{"class":420},[220,80368,359],{"class":264},[220,80370,80371,80373,80375],{"class":222,"line":656},[220,80372,402],{"class":264},[220,80374,347],{"class":420},[220,80376,359],{"class":264},[212,80378,80379],{"className":468,"code":80264,"language":469,"meta":178,"style":178},[99,80380,80381,80389,80395,80407,80411,80419,80427],{"__ignoreMap":178},[220,80382,80383,80385,80387],{"class":222,"line":223},[220,80384,343],{"class":264},[220,80386,347],{"class":420},[220,80388,359],{"class":264},[220,80390,80391,80393],{"class":222,"line":179},[220,80392,364],{"class":264},[220,80394,80225],{"class":420},[220,80396,80397,80399,80401,80403,80405],{"class":222,"line":389},[220,80398,9645],{"class":226},[220,80400,353],{"class":260},[220,80402,743],{"class":264},[220,80404,38723],{"class":420},[220,80406,749],{"class":264},[220,80408,80409],{"class":222,"line":399},[220,80410,31959],{"class":264},[220,80412,80413,80415,80417],{"class":222,"line":644},[220,80414,2550],{"class":264},[220,80416,2553],{"class":420},[220,80418,386],{"class":264},[220,80420,80421,80423,80425],{"class":222,"line":650},[220,80422,2567],{"class":264},[220,80424,80186],{"class":420},[220,80426,359],{"class":264},[220,80428,80429,80431,80433],{"class":222,"line":656},[220,80430,402],{"class":264},[220,80432,347],{"class":420},[220,80434,359],{"class":264},[212,80436,80438],{"className":251,"code":80437,"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,80439,80440,80450,80454,80468,80472,80485,80493,80497,80501],{"__ignoreMap":178},[220,80441,80442,80444,80446,80448],{"class":222,"line":223},[220,80443,261],{"class":260},[220,80445,11512],{"class":264},[220,80447,268],{"class":260},[220,80449,4007],{"class":230},[220,80451,80452],{"class":222,"line":179},[220,80453,647],{"emptyLinePlaceholder":194},[220,80455,80456,80458,80460,80462,80464,80466],{"class":222,"line":389},[220,80457,1735],{"class":260},[220,80459,1738],{"class":420},[220,80461,1741],{"class":260},[220,80463,1744],{"class":260},[220,80465,1747],{"class":226},[220,80467,1750],{"class":264},[220,80469,80470],{"class":222,"line":399},[220,80471,1765],{"class":264},[220,80473,80474,80476,80479,80481,80483],{"class":222,"line":644},[220,80475,1770],{"class":264},[220,80477,80478],{"class":230},"'Watercolor'",[220,80480,7541],{"class":264},[220,80482,38723],{"class":420},[220,80484,7546],{"class":264},[220,80486,80487,80489,80491],{"class":222,"line":650},[220,80488,7014],{"class":264},[220,80490,3206],{"class":230},[220,80492,2465],{"class":264},[220,80494,80495],{"class":222,"line":656},[220,80496,7031],{"class":264},[220,80498,80499],{"class":222,"line":673},[220,80500,1787],{"class":264},[220,80502,80503],{"class":222,"line":682},[220,80504,1792],{"class":264},[1504,80506,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80508},[80509,80510],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":80186,"description":80194},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":80517,"title":80518,"body":80519,"category":33396,"componentType":25883,"description":80526,"extension":191,"meta":80787,"navigation":194,"path":80788,"requiresChild":194,"seo":80789,"stem":80790,"__hash__":80791},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":80520,"toc":80783},[80521,80524,80527,80529,80531,80534,80536,80781],[11,80522,80518],{"id":80523},"wavedistortion",[15,80525,80526],{},"Wave-based distortion with multiple waveform types",[31911,80528],{"component":80518},[23,80530,31915],{"id":26533},[31917,80532],{":props":80533},"[{\"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,80535,31923],{"id":31922},[246,80537,80538,80583,80627,80671,80715],{":tabs":1557},[212,80539,80541],{"className":334,"code":80540,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,80542,80543,80551,80559,80567,80575],{"__ignoreMap":178},[220,80544,80545,80547,80549],{"class":222,"line":223},[220,80546,343],{"class":264},[220,80548,347],{"class":346},[220,80550,359],{"class":264},[220,80552,80553,80555,80557],{"class":222,"line":179},[220,80554,364],{"class":264},[220,80556,80518],{"class":346},[220,80558,359],{"class":264},[220,80560,80561,80563,80565],{"class":222,"line":389},[220,80562,2550],{"class":264},[220,80564,2553],{"class":346},[220,80566,386],{"class":264},[220,80568,80569,80571,80573],{"class":222,"line":399},[220,80570,2567],{"class":264},[220,80572,80518],{"class":346},[220,80574,359],{"class":264},[220,80576,80577,80579,80581],{"class":222,"line":644},[220,80578,402],{"class":264},[220,80580,347],{"class":346},[220,80582,359],{"class":264},[212,80584,80585],{"className":409,"code":80540,"language":411,"meta":178,"style":178},[99,80586,80587,80595,80603,80611,80619],{"__ignoreMap":178},[220,80588,80589,80591,80593],{"class":222,"line":223},[220,80590,343],{"class":264},[220,80592,347],{"class":420},[220,80594,359],{"class":264},[220,80596,80597,80599,80601],{"class":222,"line":179},[220,80598,364],{"class":264},[220,80600,80518],{"class":420},[220,80602,359],{"class":264},[220,80604,80605,80607,80609],{"class":222,"line":389},[220,80606,2550],{"class":264},[220,80608,2553],{"class":420},[220,80610,386],{"class":264},[220,80612,80613,80615,80617],{"class":222,"line":399},[220,80614,2567],{"class":264},[220,80616,80518],{"class":420},[220,80618,359],{"class":264},[220,80620,80621,80623,80625],{"class":222,"line":644},[220,80622,402],{"class":264},[220,80624,347],{"class":420},[220,80626,359],{"class":264},[212,80628,80629],{"className":2844,"code":80540,"language":2846,"meta":178,"style":178},[99,80630,80631,80639,80647,80655,80663],{"__ignoreMap":178},[220,80632,80633,80635,80637],{"class":222,"line":223},[220,80634,343],{"class":264},[220,80636,347],{"class":420},[220,80638,359],{"class":264},[220,80640,80641,80643,80645],{"class":222,"line":179},[220,80642,364],{"class":264},[220,80644,80518],{"class":420},[220,80646,359],{"class":264},[220,80648,80649,80651,80653],{"class":222,"line":389},[220,80650,2550],{"class":264},[220,80652,2553],{"class":420},[220,80654,386],{"class":264},[220,80656,80657,80659,80661],{"class":222,"line":399},[220,80658,2567],{"class":264},[220,80660,80518],{"class":420},[220,80662,359],{"class":264},[220,80664,80665,80667,80669],{"class":222,"line":644},[220,80666,402],{"class":264},[220,80668,347],{"class":420},[220,80670,359],{"class":264},[212,80672,80673],{"className":468,"code":80540,"language":469,"meta":178,"style":178},[99,80674,80675,80683,80691,80699,80707],{"__ignoreMap":178},[220,80676,80677,80679,80681],{"class":222,"line":223},[220,80678,343],{"class":264},[220,80680,347],{"class":420},[220,80682,359],{"class":264},[220,80684,80685,80687,80689],{"class":222,"line":179},[220,80686,364],{"class":264},[220,80688,80518],{"class":420},[220,80690,359],{"class":264},[220,80692,80693,80695,80697],{"class":222,"line":389},[220,80694,2550],{"class":264},[220,80696,2553],{"class":420},[220,80698,386],{"class":264},[220,80700,80701,80703,80705],{"class":222,"line":399},[220,80702,2567],{"class":264},[220,80704,80518],{"class":420},[220,80706,359],{"class":264},[220,80708,80709,80711,80713],{"class":222,"line":644},[220,80710,402],{"class":264},[220,80712,347],{"class":420},[220,80714,359],{"class":264},[212,80716,80718],{"className":251,"code":80717,"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,80719,80720,80730,80734,80748,80752,80761,80769,80773,80777],{"__ignoreMap":178},[220,80721,80722,80724,80726,80728],{"class":222,"line":223},[220,80723,261],{"class":260},[220,80725,11512],{"class":264},[220,80727,268],{"class":260},[220,80729,4007],{"class":230},[220,80731,80732],{"class":222,"line":179},[220,80733,647],{"emptyLinePlaceholder":194},[220,80735,80736,80738,80740,80742,80744,80746],{"class":222,"line":389},[220,80737,1735],{"class":260},[220,80739,1738],{"class":420},[220,80741,1741],{"class":260},[220,80743,1744],{"class":260},[220,80745,1747],{"class":226},[220,80747,1750],{"class":264},[220,80749,80750],{"class":222,"line":399},[220,80751,1765],{"class":264},[220,80753,80754,80756,80759],{"class":222,"line":644},[220,80755,1770],{"class":264},[220,80757,80758],{"class":230},"'WaveDistortion'",[220,80760,7009],{"class":264},[220,80762,80763,80765,80767],{"class":222,"line":650},[220,80764,7014],{"class":264},[220,80766,3206],{"class":230},[220,80768,2465],{"class":264},[220,80770,80771],{"class":222,"line":656},[220,80772,7031],{"class":264},[220,80774,80775],{"class":222,"line":673},[220,80776,1787],{"class":264},[220,80778,80779],{"class":222,"line":682},[220,80780,1792],{"class":264},[1504,80782,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80784},[80785,80786],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":80518,"description":80526},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":80793,"title":80794,"body":80795,"category":33063,"componentType":25877,"description":80802,"extension":191,"meta":80987,"navigation":194,"path":80988,"requiresChild":32530,"seo":80989,"stem":80990,"__hash__":80991},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":80796,"toc":80983},[80797,80800,80803,80805,80807,80810,80812,80981],[11,80798,80794],{"id":80799},"waveletnoise",[15,80801,80802],{},"Rotating banded wavelets that ripple as they animate",[31911,80804],{"component":80794},[23,80806,31915],{"id":26533},[31917,80808],{":props":80809},"[{\"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,80811,31923],{"id":31922},[246,80813,80814,80843,80871,80899,80927],{":tabs":1557},[212,80815,80817],{"className":334,"code":80816,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,80818,80819,80827,80835],{"__ignoreMap":178},[220,80820,80821,80823,80825],{"class":222,"line":223},[220,80822,343],{"class":264},[220,80824,347],{"class":346},[220,80826,359],{"class":264},[220,80828,80829,80831,80833],{"class":222,"line":179},[220,80830,364],{"class":264},[220,80832,80794],{"class":346},[220,80834,386],{"class":264},[220,80836,80837,80839,80841],{"class":222,"line":389},[220,80838,402],{"class":264},[220,80840,347],{"class":346},[220,80842,359],{"class":264},[212,80844,80845],{"className":409,"code":80816,"language":411,"meta":178,"style":178},[99,80846,80847,80855,80863],{"__ignoreMap":178},[220,80848,80849,80851,80853],{"class":222,"line":223},[220,80850,343],{"class":264},[220,80852,347],{"class":420},[220,80854,359],{"class":264},[220,80856,80857,80859,80861],{"class":222,"line":179},[220,80858,364],{"class":264},[220,80860,80794],{"class":420},[220,80862,386],{"class":264},[220,80864,80865,80867,80869],{"class":222,"line":389},[220,80866,402],{"class":264},[220,80868,347],{"class":420},[220,80870,359],{"class":264},[212,80872,80873],{"className":2844,"code":80816,"language":2846,"meta":178,"style":178},[99,80874,80875,80883,80891],{"__ignoreMap":178},[220,80876,80877,80879,80881],{"class":222,"line":223},[220,80878,343],{"class":264},[220,80880,347],{"class":420},[220,80882,359],{"class":264},[220,80884,80885,80887,80889],{"class":222,"line":179},[220,80886,364],{"class":264},[220,80888,80794],{"class":420},[220,80890,386],{"class":264},[220,80892,80893,80895,80897],{"class":222,"line":389},[220,80894,402],{"class":264},[220,80896,347],{"class":420},[220,80898,359],{"class":264},[212,80900,80901],{"className":468,"code":80816,"language":469,"meta":178,"style":178},[99,80902,80903,80911,80919],{"__ignoreMap":178},[220,80904,80905,80907,80909],{"class":222,"line":223},[220,80906,343],{"class":264},[220,80908,347],{"class":420},[220,80910,359],{"class":264},[220,80912,80913,80915,80917],{"class":222,"line":179},[220,80914,364],{"class":264},[220,80916,80794],{"class":420},[220,80918,386],{"class":264},[220,80920,80921,80923,80925],{"class":222,"line":389},[220,80922,402],{"class":264},[220,80924,347],{"class":420},[220,80926,359],{"class":264},[212,80928,80930],{"className":251,"code":80929,"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,80931,80932,80942,80946,80960,80964,80973,80977],{"__ignoreMap":178},[220,80933,80934,80936,80938,80940],{"class":222,"line":223},[220,80935,261],{"class":260},[220,80937,11512],{"class":264},[220,80939,268],{"class":260},[220,80941,4007],{"class":230},[220,80943,80944],{"class":222,"line":179},[220,80945,647],{"emptyLinePlaceholder":194},[220,80947,80948,80950,80952,80954,80956,80958],{"class":222,"line":389},[220,80949,1735],{"class":260},[220,80951,1738],{"class":420},[220,80953,1741],{"class":260},[220,80955,1744],{"class":260},[220,80957,1747],{"class":226},[220,80959,1750],{"class":264},[220,80961,80962],{"class":222,"line":399},[220,80963,1765],{"class":264},[220,80965,80966,80968,80971],{"class":222,"line":644},[220,80967,1770],{"class":264},[220,80969,80970],{"class":230},"'WaveletNoise'",[220,80972,2465],{"class":264},[220,80974,80975],{"class":222,"line":650},[220,80976,1787],{"class":264},[220,80978,80979],{"class":222,"line":656},[220,80980,1792],{"class":264},[1504,80982,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80984},[80985,80986],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":80794,"description":80802},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":80993,"title":80994,"body":80995,"category":33063,"componentType":25877,"description":81002,"extension":191,"meta":81187,"navigation":194,"path":81188,"requiresChild":32530,"seo":81189,"stem":81190,"__hash__":81191},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":80996,"toc":81183},[80997,81000,81003,81005,81007,81010,81012,81181],[11,80998,80994],{"id":80999},"weave",[15,81001,81002],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[31911,81004],{"component":80994},[23,81006,31915],{"id":26533},[31917,81008],{":props":81009},"[{\"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,81011,31923],{"id":31922},[246,81013,81014,81043,81071,81099,81127],{":tabs":1557},[212,81015,81017],{"className":334,"code":81016,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,81018,81019,81027,81035],{"__ignoreMap":178},[220,81020,81021,81023,81025],{"class":222,"line":223},[220,81022,343],{"class":264},[220,81024,347],{"class":346},[220,81026,359],{"class":264},[220,81028,81029,81031,81033],{"class":222,"line":179},[220,81030,364],{"class":264},[220,81032,80994],{"class":346},[220,81034,386],{"class":264},[220,81036,81037,81039,81041],{"class":222,"line":389},[220,81038,402],{"class":264},[220,81040,347],{"class":346},[220,81042,359],{"class":264},[212,81044,81045],{"className":409,"code":81016,"language":411,"meta":178,"style":178},[99,81046,81047,81055,81063],{"__ignoreMap":178},[220,81048,81049,81051,81053],{"class":222,"line":223},[220,81050,343],{"class":264},[220,81052,347],{"class":420},[220,81054,359],{"class":264},[220,81056,81057,81059,81061],{"class":222,"line":179},[220,81058,364],{"class":264},[220,81060,80994],{"class":420},[220,81062,386],{"class":264},[220,81064,81065,81067,81069],{"class":222,"line":389},[220,81066,402],{"class":264},[220,81068,347],{"class":420},[220,81070,359],{"class":264},[212,81072,81073],{"className":2844,"code":81016,"language":2846,"meta":178,"style":178},[99,81074,81075,81083,81091],{"__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,80994],{"class":420},[220,81090,386],{"class":264},[220,81092,81093,81095,81097],{"class":222,"line":389},[220,81094,402],{"class":264},[220,81096,347],{"class":420},[220,81098,359],{"class":264},[212,81100,81101],{"className":468,"code":81016,"language":469,"meta":178,"style":178},[99,81102,81103,81111,81119],{"__ignoreMap":178},[220,81104,81105,81107,81109],{"class":222,"line":223},[220,81106,343],{"class":264},[220,81108,347],{"class":420},[220,81110,359],{"class":264},[220,81112,81113,81115,81117],{"class":222,"line":179},[220,81114,364],{"class":264},[220,81116,80994],{"class":420},[220,81118,386],{"class":264},[220,81120,81121,81123,81125],{"class":222,"line":389},[220,81122,402],{"class":264},[220,81124,347],{"class":420},[220,81126,359],{"class":264},[212,81128,81130],{"className":251,"code":81129,"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,81131,81132,81142,81146,81160,81164,81173,81177],{"__ignoreMap":178},[220,81133,81134,81136,81138,81140],{"class":222,"line":223},[220,81135,261],{"class":260},[220,81137,11512],{"class":264},[220,81139,268],{"class":260},[220,81141,4007],{"class":230},[220,81143,81144],{"class":222,"line":179},[220,81145,647],{"emptyLinePlaceholder":194},[220,81147,81148,81150,81152,81154,81156,81158],{"class":222,"line":389},[220,81149,1735],{"class":260},[220,81151,1738],{"class":420},[220,81153,1741],{"class":260},[220,81155,1744],{"class":260},[220,81157,1747],{"class":226},[220,81159,1750],{"class":264},[220,81161,81162],{"class":222,"line":399},[220,81163,1765],{"class":264},[220,81165,81166,81168,81171],{"class":222,"line":644},[220,81167,1770],{"class":264},[220,81169,81170],{"class":230},"'Weave'",[220,81172,2465],{"class":264},[220,81174,81175],{"class":222,"line":650},[220,81176,1787],{"class":264},[220,81178,81179],{"class":222,"line":656},[220,81180,1792],{"class":264},[1504,81182,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81184},[81185,81186],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":80994,"description":81002},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":81193,"title":81194,"body":81195,"category":33063,"componentType":25877,"description":81202,"extension":191,"meta":81387,"navigation":194,"path":81388,"requiresChild":32530,"seo":81389,"stem":81390,"__hash__":81391},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":81196,"toc":81383},[81197,81200,81203,81205,81207,81210,81212,81381],[11,81198,81194],{"id":81199},"webcamtexture",[15,81201,81202],{},"Display a live webcam feed with customizable object-fit modes",[31911,81204],{"component":81194},[23,81206,31915],{"id":26533},[31917,81208],{":props":81209},"[{\"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,81211,31923],{"id":31922},[246,81213,81214,81243,81271,81299,81327],{":tabs":1557},[212,81215,81217],{"className":334,"code":81216,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,81218,81219,81227,81235],{"__ignoreMap":178},[220,81220,81221,81223,81225],{"class":222,"line":223},[220,81222,343],{"class":264},[220,81224,347],{"class":346},[220,81226,359],{"class":264},[220,81228,81229,81231,81233],{"class":222,"line":179},[220,81230,364],{"class":264},[220,81232,81194],{"class":346},[220,81234,386],{"class":264},[220,81236,81237,81239,81241],{"class":222,"line":389},[220,81238,402],{"class":264},[220,81240,347],{"class":346},[220,81242,359],{"class":264},[212,81244,81245],{"className":409,"code":81216,"language":411,"meta":178,"style":178},[99,81246,81247,81255,81263],{"__ignoreMap":178},[220,81248,81249,81251,81253],{"class":222,"line":223},[220,81250,343],{"class":264},[220,81252,347],{"class":420},[220,81254,359],{"class":264},[220,81256,81257,81259,81261],{"class":222,"line":179},[220,81258,364],{"class":264},[220,81260,81194],{"class":420},[220,81262,386],{"class":264},[220,81264,81265,81267,81269],{"class":222,"line":389},[220,81266,402],{"class":264},[220,81268,347],{"class":420},[220,81270,359],{"class":264},[212,81272,81273],{"className":2844,"code":81216,"language":2846,"meta":178,"style":178},[99,81274,81275,81283,81291],{"__ignoreMap":178},[220,81276,81277,81279,81281],{"class":222,"line":223},[220,81278,343],{"class":264},[220,81280,347],{"class":420},[220,81282,359],{"class":264},[220,81284,81285,81287,81289],{"class":222,"line":179},[220,81286,364],{"class":264},[220,81288,81194],{"class":420},[220,81290,386],{"class":264},[220,81292,81293,81295,81297],{"class":222,"line":389},[220,81294,402],{"class":264},[220,81296,347],{"class":420},[220,81298,359],{"class":264},[212,81300,81301],{"className":468,"code":81216,"language":469,"meta":178,"style":178},[99,81302,81303,81311,81319],{"__ignoreMap":178},[220,81304,81305,81307,81309],{"class":222,"line":223},[220,81306,343],{"class":264},[220,81308,347],{"class":420},[220,81310,359],{"class":264},[220,81312,81313,81315,81317],{"class":222,"line":179},[220,81314,364],{"class":264},[220,81316,81194],{"class":420},[220,81318,386],{"class":264},[220,81320,81321,81323,81325],{"class":222,"line":389},[220,81322,402],{"class":264},[220,81324,347],{"class":420},[220,81326,359],{"class":264},[212,81328,81330],{"className":251,"code":81329,"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,81331,81332,81342,81346,81360,81364,81373,81377],{"__ignoreMap":178},[220,81333,81334,81336,81338,81340],{"class":222,"line":223},[220,81335,261],{"class":260},[220,81337,11512],{"class":264},[220,81339,268],{"class":260},[220,81341,4007],{"class":230},[220,81343,81344],{"class":222,"line":179},[220,81345,647],{"emptyLinePlaceholder":194},[220,81347,81348,81350,81352,81354,81356,81358],{"class":222,"line":389},[220,81349,1735],{"class":260},[220,81351,1738],{"class":420},[220,81353,1741],{"class":260},[220,81355,1744],{"class":260},[220,81357,1747],{"class":226},[220,81359,1750],{"class":264},[220,81361,81362],{"class":222,"line":399},[220,81363,1765],{"class":264},[220,81365,81366,81368,81371],{"class":222,"line":644},[220,81367,1770],{"class":264},[220,81369,81370],{"class":230},"'WebcamTexture'",[220,81372,2465],{"class":264},[220,81374,81375],{"class":222,"line":650},[220,81376,1787],{"class":264},[220,81378,81379],{"class":222,"line":656},[220,81380,1792],{"class":264},[1504,81382,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81384},[81385,81386],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":81194,"description":81202},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":81393,"title":81394,"body":81395,"category":32806,"componentType":25883,"description":81402,"extension":191,"meta":81719,"navigation":194,"path":81720,"requiresChild":194,"seo":81721,"stem":81722,"__hash__":81723},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":81396,"toc":81715},[81397,81400,81403,81405,81407,81410,81412,81713],[11,81398,81394],{"id":81399},"wool",[15,81401,81402],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[31911,81404],{"component":81394},[23,81406,31915],{"id":26533},[31917,81408],{":props":81409},"[{\"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,81411,31923],{"id":31922},[246,81413,81414,81470,81529,81585,81643],{":tabs":1557},[212,81415,81417],{"className":334,"code":81416,"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,81418,81419,81427,81434,81442,81446,81454,81462],{"__ignoreMap":178},[220,81420,81421,81423,81425],{"class":222,"line":223},[220,81422,343],{"class":264},[220,81424,347],{"class":346},[220,81426,359],{"class":264},[220,81428,81429,81431],{"class":222,"line":179},[220,81430,364],{"class":264},[220,81432,81433],{"class":346},"Wool\n",[220,81435,81436,81438,81440],{"class":222,"line":389},[220,81437,20371],{"class":226},[220,81439,353],{"class":264},[220,81441,42158],{"class":230},[220,81443,81444],{"class":222,"line":399},[220,81445,31959],{"class":264},[220,81447,81448,81450,81452],{"class":222,"line":644},[220,81449,2550],{"class":264},[220,81451,2553],{"class":346},[220,81453,386],{"class":264},[220,81455,81456,81458,81460],{"class":222,"line":650},[220,81457,2567],{"class":264},[220,81459,81394],{"class":346},[220,81461,359],{"class":264},[220,81463,81464,81466,81468],{"class":222,"line":656},[220,81465,402],{"class":264},[220,81467,347],{"class":346},[220,81469,359],{"class":264},[212,81471,81473],{"className":409,"code":81472,"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,81474,81475,81483,81489,81501,81505,81513,81521],{"__ignoreMap":178},[220,81476,81477,81479,81481],{"class":222,"line":223},[220,81478,343],{"class":264},[220,81480,347],{"class":420},[220,81482,359],{"class":264},[220,81484,81485,81487],{"class":222,"line":179},[220,81486,364],{"class":264},[220,81488,81433],{"class":420},[220,81490,81491,81493,81495,81497,81499],{"class":222,"line":389},[220,81492,20482],{"class":226},[220,81494,353],{"class":260},[220,81496,743],{"class":264},[220,81498,7754],{"class":420},[220,81500,749],{"class":264},[220,81502,81503],{"class":222,"line":399},[220,81504,31959],{"class":264},[220,81506,81507,81509,81511],{"class":222,"line":644},[220,81508,2550],{"class":264},[220,81510,2553],{"class":420},[220,81512,386],{"class":264},[220,81514,81515,81517,81519],{"class":222,"line":650},[220,81516,2567],{"class":264},[220,81518,81394],{"class":420},[220,81520,359],{"class":264},[220,81522,81523,81525,81527],{"class":222,"line":656},[220,81524,402],{"class":264},[220,81526,347],{"class":420},[220,81528,359],{"class":264},[212,81530,81531],{"className":2844,"code":81472,"language":2846,"meta":178,"style":178},[99,81532,81533,81541,81547,81557,81561,81569,81577],{"__ignoreMap":178},[220,81534,81535,81537,81539],{"class":222,"line":223},[220,81536,343],{"class":264},[220,81538,347],{"class":420},[220,81540,359],{"class":264},[220,81542,81543,81545],{"class":222,"line":179},[220,81544,364],{"class":264},[220,81546,81433],{"class":420},[220,81548,81549,81551,81553,81555],{"class":222,"line":389},[220,81550,20482],{"class":226},[220,81552,29871],{"class":264},[220,81554,7754],{"class":420},[220,81556,749],{"class":264},[220,81558,81559],{"class":222,"line":399},[220,81560,31959],{"class":264},[220,81562,81563,81565,81567],{"class":222,"line":644},[220,81564,2550],{"class":264},[220,81566,2553],{"class":420},[220,81568,386],{"class":264},[220,81570,81571,81573,81575],{"class":222,"line":650},[220,81572,2567],{"class":264},[220,81574,81394],{"class":420},[220,81576,359],{"class":264},[220,81578,81579,81581,81583],{"class":222,"line":656},[220,81580,402],{"class":264},[220,81582,347],{"class":420},[220,81584,359],{"class":264},[212,81586,81587],{"className":468,"code":81472,"language":469,"meta":178,"style":178},[99,81588,81589,81597,81603,81615,81619,81627,81635],{"__ignoreMap":178},[220,81590,81591,81593,81595],{"class":222,"line":223},[220,81592,343],{"class":264},[220,81594,347],{"class":420},[220,81596,359],{"class":264},[220,81598,81599,81601],{"class":222,"line":179},[220,81600,364],{"class":264},[220,81602,81433],{"class":420},[220,81604,81605,81607,81609,81611,81613],{"class":222,"line":389},[220,81606,20482],{"class":226},[220,81608,353],{"class":260},[220,81610,743],{"class":264},[220,81612,7754],{"class":420},[220,81614,749],{"class":264},[220,81616,81617],{"class":222,"line":399},[220,81618,31959],{"class":264},[220,81620,81621,81623,81625],{"class":222,"line":644},[220,81622,2550],{"class":264},[220,81624,2553],{"class":420},[220,81626,386],{"class":264},[220,81628,81629,81631,81633],{"class":222,"line":650},[220,81630,2567],{"class":264},[220,81632,81394],{"class":420},[220,81634,359],{"class":264},[220,81636,81637,81639,81641],{"class":222,"line":656},[220,81638,402],{"class":264},[220,81640,347],{"class":420},[220,81642,359],{"class":264},[212,81644,81646],{"className":251,"code":81645,"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,81647,81648,81658,81662,81676,81680,81693,81701,81705,81709],{"__ignoreMap":178},[220,81649,81650,81652,81654,81656],{"class":222,"line":223},[220,81651,261],{"class":260},[220,81653,11512],{"class":264},[220,81655,268],{"class":260},[220,81657,4007],{"class":230},[220,81659,81660],{"class":222,"line":179},[220,81661,647],{"emptyLinePlaceholder":194},[220,81663,81664,81666,81668,81670,81672,81674],{"class":222,"line":389},[220,81665,1735],{"class":260},[220,81667,1738],{"class":420},[220,81669,1741],{"class":260},[220,81671,1744],{"class":260},[220,81673,1747],{"class":226},[220,81675,1750],{"class":264},[220,81677,81678],{"class":222,"line":399},[220,81679,1765],{"class":264},[220,81681,81682,81684,81687,81689,81691],{"class":222,"line":644},[220,81683,1770],{"class":264},[220,81685,81686],{"class":230},"'Wool'",[220,81688,32203],{"class":264},[220,81690,7754],{"class":420},[220,81692,7546],{"class":264},[220,81694,81695,81697,81699],{"class":222,"line":650},[220,81696,7014],{"class":264},[220,81698,3206],{"class":230},[220,81700,2465],{"class":264},[220,81702,81703],{"class":222,"line":656},[220,81704,7031],{"class":264},[220,81706,81707],{"class":222,"line":673},[220,81708,1787],{"class":264},[220,81710,81711],{"class":222,"line":682},[220,81712,1792],{"class":264},[1504,81714,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81716},[81717,81718],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":81394,"description":81402},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":81725,"title":81726,"body":81727,"category":33063,"componentType":25877,"description":81734,"extension":191,"meta":81919,"navigation":194,"path":81920,"requiresChild":32530,"seo":81921,"stem":81922,"__hash__":81923},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":81728,"toc":81915},[81729,81732,81735,81737,81739,81742,81744,81913],[11,81730,81726],{"id":81731},"worleynoise",[15,81733,81734],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[31911,81736],{"component":81726},[23,81738,31915],{"id":26533},[31917,81740],{":props":81741},"[{\"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,81743,31923],{"id":31922},[246,81745,81746,81775,81803,81831,81859],{":tabs":1557},[212,81747,81749],{"className":334,"code":81748,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[99,81750,81751,81759,81767],{"__ignoreMap":178},[220,81752,81753,81755,81757],{"class":222,"line":223},[220,81754,343],{"class":264},[220,81756,347],{"class":346},[220,81758,359],{"class":264},[220,81760,81761,81763,81765],{"class":222,"line":179},[220,81762,364],{"class":264},[220,81764,81726],{"class":346},[220,81766,386],{"class":264},[220,81768,81769,81771,81773],{"class":222,"line":389},[220,81770,402],{"class":264},[220,81772,347],{"class":346},[220,81774,359],{"class":264},[212,81776,81777],{"className":409,"code":81748,"language":411,"meta":178,"style":178},[99,81778,81779,81787,81795],{"__ignoreMap":178},[220,81780,81781,81783,81785],{"class":222,"line":223},[220,81782,343],{"class":264},[220,81784,347],{"class":420},[220,81786,359],{"class":264},[220,81788,81789,81791,81793],{"class":222,"line":179},[220,81790,364],{"class":264},[220,81792,81726],{"class":420},[220,81794,386],{"class":264},[220,81796,81797,81799,81801],{"class":222,"line":389},[220,81798,402],{"class":264},[220,81800,347],{"class":420},[220,81802,359],{"class":264},[212,81804,81805],{"className":2844,"code":81748,"language":2846,"meta":178,"style":178},[99,81806,81807,81815,81823],{"__ignoreMap":178},[220,81808,81809,81811,81813],{"class":222,"line":223},[220,81810,343],{"class":264},[220,81812,347],{"class":420},[220,81814,359],{"class":264},[220,81816,81817,81819,81821],{"class":222,"line":179},[220,81818,364],{"class":264},[220,81820,81726],{"class":420},[220,81822,386],{"class":264},[220,81824,81825,81827,81829],{"class":222,"line":389},[220,81826,402],{"class":264},[220,81828,347],{"class":420},[220,81830,359],{"class":264},[212,81832,81833],{"className":468,"code":81748,"language":469,"meta":178,"style":178},[99,81834,81835,81843,81851],{"__ignoreMap":178},[220,81836,81837,81839,81841],{"class":222,"line":223},[220,81838,343],{"class":264},[220,81840,347],{"class":420},[220,81842,359],{"class":264},[220,81844,81845,81847,81849],{"class":222,"line":179},[220,81846,364],{"class":264},[220,81848,81726],{"class":420},[220,81850,386],{"class":264},[220,81852,81853,81855,81857],{"class":222,"line":389},[220,81854,402],{"class":264},[220,81856,347],{"class":420},[220,81858,359],{"class":264},[212,81860,81862],{"className":251,"code":81861,"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,81863,81864,81874,81878,81892,81896,81905,81909],{"__ignoreMap":178},[220,81865,81866,81868,81870,81872],{"class":222,"line":223},[220,81867,261],{"class":260},[220,81869,11512],{"class":264},[220,81871,268],{"class":260},[220,81873,4007],{"class":230},[220,81875,81876],{"class":222,"line":179},[220,81877,647],{"emptyLinePlaceholder":194},[220,81879,81880,81882,81884,81886,81888,81890],{"class":222,"line":389},[220,81881,1735],{"class":260},[220,81883,1738],{"class":420},[220,81885,1741],{"class":260},[220,81887,1744],{"class":260},[220,81889,1747],{"class":226},[220,81891,1750],{"class":264},[220,81893,81894],{"class":222,"line":399},[220,81895,1765],{"class":264},[220,81897,81898,81900,81903],{"class":222,"line":644},[220,81899,1770],{"class":264},[220,81901,81902],{"class":230},"'WorleyNoise'",[220,81904,2465],{"class":264},[220,81906,81907],{"class":222,"line":650},[220,81908,1787],{"class":264},[220,81910,81911],{"class":222,"line":656},[220,81912,1792],{"class":264},[1504,81914,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81916},[81917,81918],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":81726,"description":81734},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":81925,"title":81926,"body":81927,"category":32234,"componentType":25883,"description":81934,"extension":191,"meta":82251,"navigation":194,"path":82252,"requiresChild":194,"seo":82253,"stem":82254,"__hash__":82255},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":81928,"toc":82247},[81929,81932,81935,81937,81939,81942,81944,82245],[11,81930,81926],{"id":81931},"zoomblur",[15,81933,81934],{},"Radial zoom blur expanding from a center point",[31911,81936],{"component":81926},[23,81938,31915],{"id":26533},[31917,81940],{":props":81941},"[{\"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,81943,31923],{"id":31922},[246,81945,81946,82002,82061,82117,82175],{":tabs":1557},[212,81947,81949],{"className":334,"code":81948,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81950,81951,81959,81966,81974,81978,81986,81994],{"__ignoreMap":178},[220,81952,81953,81955,81957],{"class":222,"line":223},[220,81954,343],{"class":264},[220,81956,347],{"class":346},[220,81958,359],{"class":264},[220,81960,81961,81963],{"class":222,"line":179},[220,81962,364],{"class":264},[220,81964,81965],{"class":346},"ZoomBlur\n",[220,81967,81968,81970,81972],{"class":222,"line":389},[220,81969,20371],{"class":226},[220,81971,353],{"class":264},[220,81973,43592],{"class":230},[220,81975,81976],{"class":222,"line":399},[220,81977,31959],{"class":264},[220,81979,81980,81982,81984],{"class":222,"line":644},[220,81981,2550],{"class":264},[220,81983,2553],{"class":346},[220,81985,386],{"class":264},[220,81987,81988,81990,81992],{"class":222,"line":650},[220,81989,2567],{"class":264},[220,81991,81926],{"class":346},[220,81993,359],{"class":264},[220,81995,81996,81998,82000],{"class":222,"line":656},[220,81997,402],{"class":264},[220,81999,347],{"class":346},[220,82001,359],{"class":264},[212,82003,82005],{"className":409,"code":82004,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,82006,82007,82015,82021,82033,82037,82045,82053],{"__ignoreMap":178},[220,82008,82009,82011,82013],{"class":222,"line":223},[220,82010,343],{"class":264},[220,82012,347],{"class":420},[220,82014,359],{"class":264},[220,82016,82017,82019],{"class":222,"line":179},[220,82018,364],{"class":264},[220,82020,81965],{"class":420},[220,82022,82023,82025,82027,82029,82031],{"class":222,"line":389},[220,82024,20482],{"class":226},[220,82026,353],{"class":260},[220,82028,743],{"class":264},[220,82030,24010],{"class":420},[220,82032,749],{"class":264},[220,82034,82035],{"class":222,"line":399},[220,82036,31959],{"class":264},[220,82038,82039,82041,82043],{"class":222,"line":644},[220,82040,2550],{"class":264},[220,82042,2553],{"class":420},[220,82044,386],{"class":264},[220,82046,82047,82049,82051],{"class":222,"line":650},[220,82048,2567],{"class":264},[220,82050,81926],{"class":420},[220,82052,359],{"class":264},[220,82054,82055,82057,82059],{"class":222,"line":656},[220,82056,402],{"class":264},[220,82058,347],{"class":420},[220,82060,359],{"class":264},[212,82062,82063],{"className":2844,"code":82004,"language":2846,"meta":178,"style":178},[99,82064,82065,82073,82079,82089,82093,82101,82109],{"__ignoreMap":178},[220,82066,82067,82069,82071],{"class":222,"line":223},[220,82068,343],{"class":264},[220,82070,347],{"class":420},[220,82072,359],{"class":264},[220,82074,82075,82077],{"class":222,"line":179},[220,82076,364],{"class":264},[220,82078,81965],{"class":420},[220,82080,82081,82083,82085,82087],{"class":222,"line":389},[220,82082,20482],{"class":226},[220,82084,29871],{"class":264},[220,82086,24010],{"class":420},[220,82088,749],{"class":264},[220,82090,82091],{"class":222,"line":399},[220,82092,31959],{"class":264},[220,82094,82095,82097,82099],{"class":222,"line":644},[220,82096,2550],{"class":264},[220,82098,2553],{"class":420},[220,82100,386],{"class":264},[220,82102,82103,82105,82107],{"class":222,"line":650},[220,82104,2567],{"class":264},[220,82106,81926],{"class":420},[220,82108,359],{"class":264},[220,82110,82111,82113,82115],{"class":222,"line":656},[220,82112,402],{"class":264},[220,82114,347],{"class":420},[220,82116,359],{"class":264},[212,82118,82119],{"className":468,"code":82004,"language":469,"meta":178,"style":178},[99,82120,82121,82129,82135,82147,82151,82159,82167],{"__ignoreMap":178},[220,82122,82123,82125,82127],{"class":222,"line":223},[220,82124,343],{"class":264},[220,82126,347],{"class":420},[220,82128,359],{"class":264},[220,82130,82131,82133],{"class":222,"line":179},[220,82132,364],{"class":264},[220,82134,81965],{"class":420},[220,82136,82137,82139,82141,82143,82145],{"class":222,"line":389},[220,82138,20482],{"class":226},[220,82140,353],{"class":260},[220,82142,743],{"class":264},[220,82144,24010],{"class":420},[220,82146,749],{"class":264},[220,82148,82149],{"class":222,"line":399},[220,82150,31959],{"class":264},[220,82152,82153,82155,82157],{"class":222,"line":644},[220,82154,2550],{"class":264},[220,82156,2553],{"class":420},[220,82158,386],{"class":264},[220,82160,82161,82163,82165],{"class":222,"line":650},[220,82162,2567],{"class":264},[220,82164,81926],{"class":420},[220,82166,359],{"class":264},[220,82168,82169,82171,82173],{"class":222,"line":656},[220,82170,402],{"class":264},[220,82172,347],{"class":420},[220,82174,359],{"class":264},[212,82176,82178],{"className":251,"code":82177,"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,82179,82180,82190,82194,82208,82212,82225,82233,82237,82241],{"__ignoreMap":178},[220,82181,82182,82184,82186,82188],{"class":222,"line":223},[220,82183,261],{"class":260},[220,82185,11512],{"class":264},[220,82187,268],{"class":260},[220,82189,4007],{"class":230},[220,82191,82192],{"class":222,"line":179},[220,82193,647],{"emptyLinePlaceholder":194},[220,82195,82196,82198,82200,82202,82204,82206],{"class":222,"line":389},[220,82197,1735],{"class":260},[220,82199,1738],{"class":420},[220,82201,1741],{"class":260},[220,82203,1744],{"class":260},[220,82205,1747],{"class":226},[220,82207,1750],{"class":264},[220,82209,82210],{"class":222,"line":399},[220,82211,1765],{"class":264},[220,82213,82214,82216,82219,82221,82223],{"class":222,"line":644},[220,82215,1770],{"class":264},[220,82217,82218],{"class":230},"'ZoomBlur'",[220,82220,32203],{"class":264},[220,82222,24010],{"class":420},[220,82224,7546],{"class":264},[220,82226,82227,82229,82231],{"class":222,"line":650},[220,82228,7014],{"class":264},[220,82230,3206],{"class":230},[220,82232,2465],{"class":264},[220,82234,82235],{"class":222,"line":656},[220,82236,7031],{"class":264},[220,82238,82239],{"class":222,"line":673},[220,82240,1787],{"class":264},[220,82242,82243],{"class":222,"line":682},[220,82244,1792],{"class":264},[1504,82246,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":82248},[82249,82250],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":81926,"description":81934},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":56789,"title":56790,"body":82257,"category":32806,"componentType":25883,"description":57062,"extension":191,"meta":82522,"navigation":194,"path":57064,"requiresChild":194,"seo":82523,"stem":57066,"__hash__":57067},{"type":8,"value":82258,"toc":82518},[82259,82261,82266,82268,82270,82272,82274,82516],[11,82260,56790],{"id":56795},[15,82262,56798,82263,4836],{},[56,82264,53882],{"href":53880,"rel":82265},[167],[31911,82267],{"component":56790},[23,82269,31915],{"id":26533},[31917,82271],{":props":56808},[23,82273,31923],{"id":31922},[246,82275,82276,82320,82364,82408,82452],{":tabs":1557},[212,82277,82278],{"className":334,"code":56815,"language":336,"meta":178,"style":178},[99,82279,82280,82288,82296,82304,82312],{"__ignoreMap":178},[220,82281,82282,82284,82286],{"class":222,"line":223},[220,82283,343],{"class":264},[220,82285,347],{"class":346},[220,82287,359],{"class":264},[220,82289,82290,82292,82294],{"class":222,"line":179},[220,82291,364],{"class":264},[220,82293,56790],{"class":346},[220,82295,359],{"class":264},[220,82297,82298,82300,82302],{"class":222,"line":389},[220,82299,2550],{"class":264},[220,82301,2553],{"class":346},[220,82303,386],{"class":264},[220,82305,82306,82308,82310],{"class":222,"line":399},[220,82307,2567],{"class":264},[220,82309,56790],{"class":346},[220,82311,359],{"class":264},[220,82313,82314,82316,82318],{"class":222,"line":644},[220,82315,402],{"class":264},[220,82317,347],{"class":346},[220,82319,359],{"class":264},[212,82321,82322],{"className":409,"code":56815,"language":411,"meta":178,"style":178},[99,82323,82324,82332,82340,82348,82356],{"__ignoreMap":178},[220,82325,82326,82328,82330],{"class":222,"line":223},[220,82327,343],{"class":264},[220,82329,347],{"class":420},[220,82331,359],{"class":264},[220,82333,82334,82336,82338],{"class":222,"line":179},[220,82335,364],{"class":264},[220,82337,56790],{"class":420},[220,82339,359],{"class":264},[220,82341,82342,82344,82346],{"class":222,"line":389},[220,82343,2550],{"class":264},[220,82345,2553],{"class":420},[220,82347,386],{"class":264},[220,82349,82350,82352,82354],{"class":222,"line":399},[220,82351,2567],{"class":264},[220,82353,56790],{"class":420},[220,82355,359],{"class":264},[220,82357,82358,82360,82362],{"class":222,"line":644},[220,82359,402],{"class":264},[220,82361,347],{"class":420},[220,82363,359],{"class":264},[212,82365,82366],{"className":2844,"code":56815,"language":2846,"meta":178,"style":178},[99,82367,82368,82376,82384,82392,82400],{"__ignoreMap":178},[220,82369,82370,82372,82374],{"class":222,"line":223},[220,82371,343],{"class":264},[220,82373,347],{"class":420},[220,82375,359],{"class":264},[220,82377,82378,82380,82382],{"class":222,"line":179},[220,82379,364],{"class":264},[220,82381,56790],{"class":420},[220,82383,359],{"class":264},[220,82385,82386,82388,82390],{"class":222,"line":389},[220,82387,2550],{"class":264},[220,82389,2553],{"class":420},[220,82391,386],{"class":264},[220,82393,82394,82396,82398],{"class":222,"line":399},[220,82395,2567],{"class":264},[220,82397,56790],{"class":420},[220,82399,359],{"class":264},[220,82401,82402,82404,82406],{"class":222,"line":644},[220,82403,402],{"class":264},[220,82405,347],{"class":420},[220,82407,359],{"class":264},[212,82409,82410],{"className":468,"code":56815,"language":469,"meta":178,"style":178},[99,82411,82412,82420,82428,82436,82444],{"__ignoreMap":178},[220,82413,82414,82416,82418],{"class":222,"line":223},[220,82415,343],{"class":264},[220,82417,347],{"class":420},[220,82419,359],{"class":264},[220,82421,82422,82424,82426],{"class":222,"line":179},[220,82423,364],{"class":264},[220,82425,56790],{"class":420},[220,82427,359],{"class":264},[220,82429,82430,82432,82434],{"class":222,"line":389},[220,82431,2550],{"class":264},[220,82433,2553],{"class":420},[220,82435,386],{"class":264},[220,82437,82438,82440,82442],{"class":222,"line":399},[220,82439,2567],{"class":264},[220,82441,56790],{"class":420},[220,82443,359],{"class":264},[220,82445,82446,82448,82450],{"class":222,"line":644},[220,82447,402],{"class":264},[220,82449,347],{"class":420},[220,82451,359],{"class":264},[212,82453,82454],{"className":251,"code":56992,"language":253,"meta":178,"style":178},[99,82455,82456,82466,82470,82484,82488,82496,82504,82508,82512],{"__ignoreMap":178},[220,82457,82458,82460,82462,82464],{"class":222,"line":223},[220,82459,261],{"class":260},[220,82461,11512],{"class":264},[220,82463,268],{"class":260},[220,82465,4007],{"class":230},[220,82467,82468],{"class":222,"line":179},[220,82469,647],{"emptyLinePlaceholder":194},[220,82471,82472,82474,82476,82478,82480,82482],{"class":222,"line":389},[220,82473,1735],{"class":260},[220,82475,1738],{"class":420},[220,82477,1741],{"class":260},[220,82479,1744],{"class":260},[220,82481,1747],{"class":226},[220,82483,1750],{"class":264},[220,82485,82486],{"class":222,"line":399},[220,82487,1765],{"class":264},[220,82489,82490,82492,82494],{"class":222,"line":644},[220,82491,1770],{"class":264},[220,82493,57033],{"class":230},[220,82495,7009],{"class":264},[220,82497,82498,82500,82502],{"class":222,"line":650},[220,82499,7014],{"class":264},[220,82501,3206],{"class":230},[220,82503,2465],{"class":264},[220,82505,82506],{"class":222,"line":656},[220,82507,7031],{"class":264},[220,82509,82510],{"class":222,"line":673},[220,82511,1787],{"class":264},[220,82513,82514],{"class":222,"line":682},[220,82515,1792],{"class":264},[1504,82517,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":82519},[82520,82521],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},{"title":56790,"description":57062},[82525,82526],{"title":56514,"path":56784,"stem":56786,"children":-1},{"title":57070,"path":57319,"stem":57321,"children":-1}]