[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fmask":145},[4,10,16,20,24,28,32,36,40,44,48,52,56,60,64,69,73,78,82,86,90,94,98,102,106,110,114,117,120,124,127,131,134,138,141],{"path":5,"title":6,"description":7,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",null,{"path":11,"title":12,"description":13,"category":8,"exclude":14,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",[15],"js",{"path":17,"title":18,"description":19,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":21,"title":22,"description":23,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":25,"title":26,"description":27,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":29,"title":30,"description":31,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":33,"title":34,"description":35,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":37,"title":38,"description":39,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in % or px units.",{"path":41,"title":42,"description":43,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":45,"title":46,"description":47,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":49,"title":50,"description":51,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":53,"title":54,"description":55,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":57,"title":58,"description":59,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":61,"title":62,"description":63,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":65,"title":66,"description":67,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":70,"title":71,"description":72,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install shaders and presets into your codebase as component files, and keep them in sync with the design editor.",{"path":74,"title":75,"description":76,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":79,"title":80,"description":81,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":83,"title":84,"description":85,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":87,"title":88,"description":89,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":91,"title":92,"description":93,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":95,"title":96,"description":97,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":99,"title":100,"description":101,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":103,"title":104,"description":105,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":107,"title":108,"description":109,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":111,"title":112,"description":113,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"path":115,"title":12,"description":116,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders without a framework, render your first effect on a canvas, and update props at runtime.",{"path":118,"title":12,"description":119,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders in a React app, render your first effect, and drive a prop from state.",{"path":121,"title":122,"description":123,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js and SSR","Render Shaders in Next.js and other React SSR apps by keeping each shader on the client.",{"path":125,"title":12,"description":126,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders in a Solid app, render your first effect, and drive a prop from a signal.",{"path":128,"title":129,"description":130,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart and SSR","Render Shaders in SolidStart and other Solid SSR apps by keeping each shader on the client.",{"path":132,"title":12,"description":133,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders in a Svelte app, render your first effect, and drive a prop from state.",{"path":135,"title":136,"description":137,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit and SSR","Render Shaders in SvelteKit and other Svelte SSR apps, where each shader already waits for the browser.",{"path":139,"title":12,"description":140,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders in a Vue app, render your first effect, and drive a prop from a ref.",{"path":142,"title":143,"description":144,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt and SSR","Render Shaders in Nuxt and other Vue SSR apps by keeping each shader on the client.",{"id":146,"title":147,"body":148,"categoryId":979,"categorySlug":979,"categoryTitle":9,"curated":333,"description":980,"editUrl":981,"extension":982,"group":983,"groupTitle":984,"kind":9,"meta":985,"navigation":333,"path":986,"seo":987,"sourceUrl":988,"stem":989,"wordCount":395,"__hash__":990},"primitives\u002Fdocs\u002Fprimitives\u002F21.mask\u002Findex.md","Masks",{"type":149,"value":150,"toc":974},"minimark",[151,155,198,227,232,308,312,923,927,970],[152,153,147],"h1",{"id":154},"masks",[156,157,158,159,166,167,173,174,166,180,186,187,190,191,197],"p",{},"A mask is coverage: a number from 0 to 1 at every pixel that says how much of something\nshows there. Multiply it into a color's alpha to cut a shape out of a paint, or hand it to\nan effect as its amount so the effect fades in across the canvas. Most masks start from a\ndistance, how far this pixel is from a center, a line or a shape's edge, and the mask word\nturns that distance into an edge. ",[160,161,163],"a",{"href":162},"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fsoftdisc",[8,164,165],{},"softDisc"," and ",[160,168,170],{"href":169},"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fsoftband",[8,171,172],{},"softBand"," give soft, styled edges for orbs\nand curtains. ",[160,175,177],{"href":176},"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fcrispfill",[8,178,179],{},"crispFill",[160,181,183],{"href":182},"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fcrispstroke",[8,184,185],{},"crispStroke"," give clean anti-aliased fills and outlines from a\nsigned distance, such as one of the ",[8,188,189],{},"shape"," words. ",[160,192,194],{"href":193},"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fradialmask",[8,195,196],{},"radialMask"," is the ready-made one for\neffects: 0 at a center, 1 past a radius, plugged straight into an effect's amount.",[199,200,205],"pre",{"className":201,"code":202,"language":203,"meta":204,"style":204},"language-ts shiki shiki-themes github-dark","import {mask} from 'shaders\u002Fstd'\n","ts","",[8,206,207],{"__ignoreMap":204},[208,209,212,216,220,223],"span",{"class":210,"line":211},"line",1,[208,213,215],{"class":214},"snl16","import",[208,217,219],{"class":218},"s95oV"," {mask} ",[208,221,222],{"class":214},"from",[208,224,226],{"class":225},"sU2Wk"," 'shaders\u002Fstd'\n",[228,229,231],"h2",{"id":230},"reach-for-it-when","Reach for it when",[233,234,235,248],"table",{},[236,237,238],"thead",{},[239,240,241,245],"tr",{},[242,243,244],"th",{},"When you need",[242,246,247],{},"Use",[249,250,251,264,275,286,297],"tbody",{},[239,252,253,257],{},[254,255,256],"td",{},"an effect that is strongest at the edges and clear in the middle",[254,258,259,263],{},[160,260,261],{"href":193},[8,262,196],{}," as the effect's amount",[239,265,266,269],{},[254,267,268],{},"a soft glowing disc, orb or dot",[254,270,271],{},[160,272,273],{"href":162},[8,274,165],{},[239,276,277,280],{},[254,278,279],{},"a clean filled shape from a signed distance",[254,281,282],{},[160,283,284],{"href":176},[8,285,179],{},[239,287,288,291],{},[254,289,290],{},"an outline of a shape, or a drawn curve of a given width",[254,292,293],{},[160,294,295],{"href":182},[8,296,185],{},[239,298,299,302],{},[254,300,301],{},"a band along a line, sharp on one side and trailing off on the other",[254,303,304],{},[160,305,306],{"href":169},[8,307,172],{},[228,309,311],{"id":310},"example","Example",[199,313,315],{"className":201,"code":314,"language":203,"meta":204,"style":204},"import {defineShader, p, uniformOf, math, mask, frames, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {add, sub, mul, div, clamp, local, vec4} = math\n\n\u002F\u002F Orb: a soft glowing disc with a crisp ring just outside it, over a transparent background.\nexport const Orb = defineShader({\n  name: 'Orb',\n  props: {\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    color: {default: '#7dd3fc', transform: transformColor},\n    ringColor: {default: '#ffffff', transform: transformColor},\n    radius: {default: 0.2},\n    softness: {default: 0.5},\n  },\n  paint: (params) => {\n    const u = (name: string) => uniformOf(p(name), params)\n    const surface = frames.surfaceOf(params)\n    const {dist} = frames.centredFrame({center: p('center')})(params, surface)\n    const px = div(1, surface.viewport.member('y')) \u002F\u002F one device pixel, in uv\n    const body = local(mask.softDisc({\n      dist,\n      radius: u('radius'),\n      softness: {width: mul(u('softness'), 0.3), curve: add(mul(u('softness'), 2), 0.5)},\n    }), 'body')\n    \u002F\u002F A signed distance to a circle a little larger than the orb: negative inside, zero on the ring.\n    const ring = local(mask.crispStroke({distance: sub(dist, mul(u('radius'), 1.3)), width: 0.006, footprint: px}), 'ring')\n    const rgb = add(mul(u('color').member('rgb'), body), mul(u('ringColor').member('rgb'), ring))\n    return vec4(rgb, clamp(add(body, ring), 0, 1))\n  },\n})\n",[8,316,317,328,335,388,393,400,422,434,440,457,469,480,492,502,508,530,568,587,619,654,674,680,697,749,761,767,820,881,912,917],{"__ignoreMap":204},[208,318,319,321,324,326],{"class":210,"line":211},[208,320,215],{"class":214},[208,322,323],{"class":218}," {defineShader, p, uniformOf, math, mask, frames, transformColor, transformPosition} ",[208,325,222],{"class":214},[208,327,226],{"class":225},[208,329,331],{"class":210,"line":330},2,[208,332,334],{"emptyLinePlaceholder":333},true,"\n",[208,336,338,341,344,348,351,354,356,359,361,364,366,369,371,374,376,379,382,385],{"class":210,"line":337},3,[208,339,340],{"class":214},"const",[208,342,343],{"class":218}," {",[208,345,347],{"class":346},"sDLfK","add",[208,349,350],{"class":218},", ",[208,352,353],{"class":346},"sub",[208,355,350],{"class":218},[208,357,358],{"class":346},"mul",[208,360,350],{"class":218},[208,362,363],{"class":346},"div",[208,365,350],{"class":218},[208,367,368],{"class":346},"clamp",[208,370,350],{"class":218},[208,372,373],{"class":346},"local",[208,375,350],{"class":218},[208,377,378],{"class":346},"vec4",[208,380,381],{"class":218},"} ",[208,383,384],{"class":214},"=",[208,386,387],{"class":218}," math\n",[208,389,391],{"class":210,"line":390},4,[208,392,334],{"emptyLinePlaceholder":333},[208,394,396],{"class":210,"line":395},5,[208,397,399],{"class":398},"sAwPA","\u002F\u002F Orb: a soft glowing disc with a crisp ring just outside it, over a transparent background.\n",[208,401,403,406,409,412,415,419],{"class":210,"line":402},6,[208,404,405],{"class":214},"export",[208,407,408],{"class":214}," const",[208,410,411],{"class":346}," Orb",[208,413,414],{"class":214}," =",[208,416,418],{"class":417},"svObZ"," defineShader",[208,420,421],{"class":218},"({\n",[208,423,425,428,431],{"class":210,"line":424},7,[208,426,427],{"class":218},"  name: ",[208,429,430],{"class":225},"'Orb'",[208,432,433],{"class":218},",\n",[208,435,437],{"class":210,"line":436},8,[208,438,439],{"class":218},"  props: {\n",[208,441,443,446,449,452,454],{"class":210,"line":442},9,[208,444,445],{"class":218},"    center: {default: {x: ",[208,447,448],{"class":346},"0.5",[208,450,451],{"class":218},", y: ",[208,453,448],{"class":346},[208,455,456],{"class":218},"}, transform: transformPosition},\n",[208,458,460,463,466],{"class":210,"line":459},10,[208,461,462],{"class":218},"    color: {default: ",[208,464,465],{"class":225},"'#7dd3fc'",[208,467,468],{"class":218},", transform: transformColor},\n",[208,470,472,475,478],{"class":210,"line":471},11,[208,473,474],{"class":218},"    ringColor: {default: ",[208,476,477],{"class":225},"'#ffffff'",[208,479,468],{"class":218},[208,481,483,486,489],{"class":210,"line":482},12,[208,484,485],{"class":218},"    radius: {default: ",[208,487,488],{"class":346},"0.2",[208,490,491],{"class":218},"},\n",[208,493,495,498,500],{"class":210,"line":494},13,[208,496,497],{"class":218},"    softness: {default: ",[208,499,448],{"class":346},[208,501,491],{"class":218},[208,503,505],{"class":210,"line":504},14,[208,506,507],{"class":218},"  },\n",[208,509,511,514,517,521,524,527],{"class":210,"line":510},15,[208,512,513],{"class":417},"  paint",[208,515,516],{"class":218},": (",[208,518,520],{"class":519},"s9osk","params",[208,522,523],{"class":218},") ",[208,525,526],{"class":214},"=>",[208,528,529],{"class":218}," {\n",[208,531,533,536,539,541,544,547,550,553,555,557,560,563,565],{"class":210,"line":532},16,[208,534,535],{"class":214},"    const",[208,537,538],{"class":417}," u",[208,540,414],{"class":214},[208,542,543],{"class":218}," (",[208,545,546],{"class":519},"name",[208,548,549],{"class":214},":",[208,551,552],{"class":346}," string",[208,554,523],{"class":218},[208,556,526],{"class":214},[208,558,559],{"class":417}," uniformOf",[208,561,562],{"class":218},"(",[208,564,156],{"class":417},[208,566,567],{"class":218},"(name), params)\n",[208,569,571,573,576,578,581,584],{"class":210,"line":570},17,[208,572,535],{"class":214},[208,574,575],{"class":346}," surface",[208,577,414],{"class":214},[208,579,580],{"class":218}," frames.",[208,582,583],{"class":417},"surfaceOf",[208,585,586],{"class":218},"(params)\n",[208,588,590,592,594,597,599,601,603,606,609,611,613,616],{"class":210,"line":589},18,[208,591,535],{"class":214},[208,593,343],{"class":218},[208,595,596],{"class":346},"dist",[208,598,381],{"class":218},[208,600,384],{"class":214},[208,602,580],{"class":218},[208,604,605],{"class":417},"centredFrame",[208,607,608],{"class":218},"({center: ",[208,610,156],{"class":417},[208,612,562],{"class":218},[208,614,615],{"class":225},"'center'",[208,617,618],{"class":218},")})(params, surface)\n",[208,620,622,624,627,629,632,634,637,640,643,645,648,651],{"class":210,"line":621},19,[208,623,535],{"class":214},[208,625,626],{"class":346}," px",[208,628,414],{"class":214},[208,630,631],{"class":417}," div",[208,633,562],{"class":218},[208,635,636],{"class":346},"1",[208,638,639],{"class":218},", surface.viewport.",[208,641,642],{"class":417},"member",[208,644,562],{"class":218},[208,646,647],{"class":225},"'y'",[208,649,650],{"class":218},")) ",[208,652,653],{"class":398},"\u002F\u002F one device pixel, in uv\n",[208,655,657,659,662,664,667,670,672],{"class":210,"line":656},20,[208,658,535],{"class":214},[208,660,661],{"class":346}," body",[208,663,414],{"class":214},[208,665,666],{"class":417}," local",[208,668,669],{"class":218},"(mask.",[208,671,165],{"class":417},[208,673,421],{"class":218},[208,675,677],{"class":210,"line":676},21,[208,678,679],{"class":218},"      dist,\n",[208,681,683,686,689,691,694],{"class":210,"line":682},22,[208,684,685],{"class":218},"      radius: ",[208,687,688],{"class":417},"u",[208,690,562],{"class":218},[208,692,693],{"class":225},"'radius'",[208,695,696],{"class":218},"),\n",[208,698,700,703,705,707,709,711,714,717,720,723,725,727,729,731,733,735,737,739,742,744,746],{"class":210,"line":699},23,[208,701,702],{"class":218},"      softness: {width: ",[208,704,358],{"class":417},[208,706,562],{"class":218},[208,708,688],{"class":417},[208,710,562],{"class":218},[208,712,713],{"class":225},"'softness'",[208,715,716],{"class":218},"), ",[208,718,719],{"class":346},"0.3",[208,721,722],{"class":218},"), curve: ",[208,724,347],{"class":417},[208,726,562],{"class":218},[208,728,358],{"class":417},[208,730,562],{"class":218},[208,732,688],{"class":417},[208,734,562],{"class":218},[208,736,713],{"class":225},[208,738,716],{"class":218},[208,740,741],{"class":346},"2",[208,743,716],{"class":218},[208,745,448],{"class":346},[208,747,748],{"class":218},")},\n",[208,750,752,755,758],{"class":210,"line":751},24,[208,753,754],{"class":218},"    }), ",[208,756,757],{"class":225},"'body'",[208,759,760],{"class":218},")\n",[208,762,764],{"class":210,"line":763},25,[208,765,766],{"class":398},"    \u002F\u002F A signed distance to a circle a little larger than the orb: negative inside, zero on the ring.\n",[208,768,770,772,775,777,779,781,783,786,788,791,793,795,797,799,801,803,806,809,812,815,818],{"class":210,"line":769},26,[208,771,535],{"class":214},[208,773,774],{"class":346}," ring",[208,776,414],{"class":214},[208,778,666],{"class":417},[208,780,669],{"class":218},[208,782,185],{"class":417},[208,784,785],{"class":218},"({distance: ",[208,787,353],{"class":417},[208,789,790],{"class":218},"(dist, ",[208,792,358],{"class":417},[208,794,562],{"class":218},[208,796,688],{"class":417},[208,798,562],{"class":218},[208,800,693],{"class":225},[208,802,716],{"class":218},[208,804,805],{"class":346},"1.3",[208,807,808],{"class":218},")), width: ",[208,810,811],{"class":346},"0.006",[208,813,814],{"class":218},", footprint: px}), ",[208,816,817],{"class":225},"'ring'",[208,819,760],{"class":218},[208,821,823,825,828,830,833,835,837,839,841,843,846,849,851,853,856,859,861,863,865,867,870,872,874,876,878],{"class":210,"line":822},27,[208,824,535],{"class":214},[208,826,827],{"class":346}," rgb",[208,829,414],{"class":214},[208,831,832],{"class":417}," add",[208,834,562],{"class":218},[208,836,358],{"class":417},[208,838,562],{"class":218},[208,840,688],{"class":417},[208,842,562],{"class":218},[208,844,845],{"class":225},"'color'",[208,847,848],{"class":218},").",[208,850,642],{"class":417},[208,852,562],{"class":218},[208,854,855],{"class":225},"'rgb'",[208,857,858],{"class":218},"), body), ",[208,860,358],{"class":417},[208,862,562],{"class":218},[208,864,688],{"class":417},[208,866,562],{"class":218},[208,868,869],{"class":225},"'ringColor'",[208,871,848],{"class":218},[208,873,642],{"class":417},[208,875,562],{"class":218},[208,877,855],{"class":225},[208,879,880],{"class":218},"), ring))\n",[208,882,884,887,890,893,895,897,899,902,905,907,909],{"class":210,"line":883},28,[208,885,886],{"class":214},"    return",[208,888,889],{"class":417}," vec4",[208,891,892],{"class":218},"(rgb, ",[208,894,368],{"class":417},[208,896,562],{"class":218},[208,898,347],{"class":417},[208,900,901],{"class":218},"(body, ring), ",[208,903,904],{"class":346},"0",[208,906,350],{"class":218},[208,908,636],{"class":346},[208,910,911],{"class":218},"))\n",[208,913,915],{"class":210,"line":914},29,[208,916,507],{"class":218},[208,918,920],{"class":210,"line":919},30,[208,921,922],{"class":218},"})\n",[228,924,926],{"id":925},"words","Words",[928,929,931],"primitive-words",{":words":930},"[{\"name\":\"radialMask\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fradialmask\",\"summary\":\"An amount that is 0 near a center and grows to 1 with distance, for an effect's strength.\"},{\"name\":\"softDisc\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fsoftdisc\",\"summary\":\"A filled disc with a soft, shaped edge.\"},{\"name\":\"crispFill\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fcrispfill\",\"summary\":\"A clean fill of a shape: 1 inside, 0 outside.\"},{\"name\":\"crispStroke\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fcrispstroke\",\"summary\":\"A clean outline of a shape, or a drawn curve, of a given width.\"},{\"name\":\"softBand\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmask\u002Fsoftband\",\"summary\":\"A soft band around a line, sharp on one side and long on the other.\"}]",[932,933,934,942,949,956,963],"ul",{},[935,936,937,941],"li",{},[160,938,939],{"href":193},[8,940,196],{}," — An amount that is 0 near a center and grows to 1 with distance, for an effect's strength.",[935,943,944,948],{},[160,945,946],{"href":162},[8,947,165],{}," — A filled disc with a soft, shaped edge.",[935,950,951,955],{},[160,952,953],{"href":176},[8,954,179],{}," — A clean fill of a shape: 1 inside, 0 outside.",[935,957,958,962],{},[160,959,960],{"href":182},[8,961,185],{}," — A clean outline of a shape, or a drawn curve, of a given width.",[935,964,965,969],{},[160,966,967],{"href":169},[8,968,172],{}," — A soft band around a line, sharp on one side and long on the other.",[971,972,973],"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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":204,"searchDepth":330,"depth":330,"links":975},[976,977,978],{"id":230,"depth":330,"text":231},{"id":310,"depth":330,"text":311},{"id":925,"depth":330,"text":926},"mask","A mask is coverage: a number from 0 to 1 at every pixel that says how much of something shows there.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fmask.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fmask",{"title":147,"description":980},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fmask.ts","docs\u002Fprimitives\u002F21.mask\u002Findex","g5SwwizS_JzFvbKxjUcN9Bo4d12sXkiGx8_zKA_3Mf4"]