[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fcompose":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":840,"categorySlug":840,"categoryTitle":9,"curated":338,"description":841,"editUrl":842,"extension":843,"group":844,"groupTitle":845,"kind":9,"meta":846,"navigation":338,"path":847,"seo":848,"sourceUrl":849,"stem":850,"wordCount":375,"__hash__":851},"primitives\u002Fdocs\u002Fprimitives\u002F10.compose\u002Findex.md","Layering & output",{"type":149,"value":150,"toc":834},"minimark",[151,155,178,215,244,249,313,317,759,763,790,794,830],[152,153,147],"h1",{"id":154},"layering-output",[156,157,158,159,162,163,170,171,177],"p",{},"The words that finish a ",[8,160,161],{},"paint:"," function. ",[164,165,167],"a",{"href":166},"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Flayers",[8,168,169],{},"layers"," stacks several colors into one, back to\nfront, each with an optional opacity and an optional factor it is seen through. ",[164,172,174],{"href":173},"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Flayered",[8,175,176],{},"layered","\nbuilds N variations of one recipe from a data list and sums them, which is how curtains,\ncloud banks and echo trails get their depth cheaply.",[156,179,180,181,185,186,192,193,199,200,204,205,209,210,214],{},"Light is emitted, so it should composite ",[182,183,184],"em",{},"over"," what is behind the layer rather than replace\nit. ",[164,187,189],{"href":188},"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Femissivealpha",[8,190,191],{},"emissiveAlpha"," turns an rgb light value into a color with alpha that does exactly that.\n",[164,194,196],{"href":195},"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Fdithered",[8,197,198],{},"dithered"," adds a trace of noise to the final color so long soft ramps show no banding. Use\nthem last: stack with ",[164,201,202],{"href":166},[8,203,169],{},", close with ",[164,206,207],{"href":188},[8,208,191],{},", then ",[164,211,212],{"href":195},[8,213,198],{},".",[216,217,222],"pre",{"className":218,"code":219,"language":220,"meta":221,"style":221},"language-ts shiki shiki-themes github-dark","import {compose} from 'shaders\u002Fstd'\n","ts","",[8,223,224],{"__ignoreMap":221},[225,226,229,233,237,240],"span",{"class":227,"line":228},"line",1,[225,230,232],{"class":231},"snl16","import",[225,234,236],{"class":235},"s95oV"," {compose} ",[225,238,239],{"class":231},"from",[225,241,243],{"class":242},"sU2Wk"," 'shaders\u002Fstd'\n",[245,246,248],"h2",{"id":247},"reach-for-it-when","Reach for it when",[250,251,252,265],"table",{},[253,254,255],"thead",{},[256,257,258,262],"tr",{},[259,260,261],"th",{},"When you need",[259,263,264],{},"Use",[266,267,268,280,291,302],"tbody",{},[256,269,270,274],{},[271,272,273],"td",{},"several glows or paints stacked into one image",[271,275,276],{},[164,277,278],{"href":166},[8,279,169],{},[256,281,282,285],{},[271,283,284],{},"the same recipe repeated with different offsets and weights",[271,286,287],{},[164,288,289],{"href":173},[8,290,176],{},[256,292,293,296],{},[271,294,295],{},"a glow that should composite over transparency",[271,297,298],{},[164,299,300],{"href":188},[8,301,191],{},[256,303,304,307],{},[271,305,306],{},"visible steps in a long soft gradient",[271,308,309],{},[164,310,311],{"href":195},[8,312,198],{},[245,314,316],{"id":315},"example","Example",[216,318,320],{"className":218,"code":319,"language":220,"meta":221,"style":221},"import {defineShader, p, light, compose, math, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {radialFrame, withFrame, glowPoint} = light\nconst {layers, emissiveAlpha, dithered} = compose\n\n\u002F\u002F Two soft glows, the second screened over the first, drawn as emitted light and dithered.\nexport const TwinGlow = defineShader({\n  name: 'TwinGlow',\n  animatedTime: {speed: 'speed'},\n  props: {\n    centerA: {default: {x: 0.35, y: 0.5}, transform: transformPosition},\n    centerB: {default: {x: 0.65, y: 0.5}, transform: transformPosition},\n    colorA: {default: '#ff7a18', transform: transformColor},\n    colorB: {default: '#3b82f6', transform: transformColor},\n    sharpness: {default: 6},\n    speed: {default: 0},\n  },\n  paint: (params) => {\n    const glowA = withFrame(radialFrame(p('centerA')), glowPoint({sharpness: p('sharpness')}), 'glowA')(params)\n    const glowB = withFrame(radialFrame(p('centerB')), glowPoint({sharpness: p('sharpness')}), 'glowB')(params)\n    const rgb = layers([\n      {paint: math.mul(params.uniforms.colorA.member('rgb'), glowA)},\n      {paint: math.mul(params.uniforms.colorB.member('rgb'), glowB), blend: 'screen'},\n    ])\n    return dithered(emissiveAlpha(rgb), params)\n  },\n})\n",[8,321,322,333,340,373,397,402,409,431,443,455,461,479,494,506,517,528,539,545,567,619,663,679,702,726,732,748,753],{"__ignoreMap":221},[225,323,324,326,329,331],{"class":227,"line":228},[225,325,232],{"class":231},[225,327,328],{"class":235}," {defineShader, p, light, compose, math, transformColor, transformPosition} ",[225,330,239],{"class":231},[225,332,243],{"class":242},[225,334,336],{"class":227,"line":335},2,[225,337,339],{"emptyLinePlaceholder":338},true,"\n",[225,341,343,346,349,353,356,359,361,364,367,370],{"class":227,"line":342},3,[225,344,345],{"class":231},"const",[225,347,348],{"class":235}," {",[225,350,352],{"class":351},"sDLfK","radialFrame",[225,354,355],{"class":235},", ",[225,357,358],{"class":351},"withFrame",[225,360,355],{"class":235},[225,362,363],{"class":351},"glowPoint",[225,365,366],{"class":235},"} ",[225,368,369],{"class":231},"=",[225,371,372],{"class":235}," light\n",[225,374,376,378,380,382,384,386,388,390,392,394],{"class":227,"line":375},4,[225,377,345],{"class":231},[225,379,348],{"class":235},[225,381,169],{"class":351},[225,383,355],{"class":235},[225,385,191],{"class":351},[225,387,355],{"class":235},[225,389,198],{"class":351},[225,391,366],{"class":235},[225,393,369],{"class":231},[225,395,396],{"class":235}," compose\n",[225,398,400],{"class":227,"line":399},5,[225,401,339],{"emptyLinePlaceholder":338},[225,403,405],{"class":227,"line":404},6,[225,406,408],{"class":407},"sAwPA","\u002F\u002F Two soft glows, the second screened over the first, drawn as emitted light and dithered.\n",[225,410,412,415,418,421,424,428],{"class":227,"line":411},7,[225,413,414],{"class":231},"export",[225,416,417],{"class":231}," const",[225,419,420],{"class":351}," TwinGlow",[225,422,423],{"class":231}," =",[225,425,427],{"class":426},"svObZ"," defineShader",[225,429,430],{"class":235},"({\n",[225,432,434,437,440],{"class":227,"line":433},8,[225,435,436],{"class":235},"  name: ",[225,438,439],{"class":242},"'TwinGlow'",[225,441,442],{"class":235},",\n",[225,444,446,449,452],{"class":227,"line":445},9,[225,447,448],{"class":235},"  animatedTime: {speed: ",[225,450,451],{"class":242},"'speed'",[225,453,454],{"class":235},"},\n",[225,456,458],{"class":227,"line":457},10,[225,459,460],{"class":235},"  props: {\n",[225,462,464,467,470,473,476],{"class":227,"line":463},11,[225,465,466],{"class":235},"    centerA: {default: {x: ",[225,468,469],{"class":351},"0.35",[225,471,472],{"class":235},", y: ",[225,474,475],{"class":351},"0.5",[225,477,478],{"class":235},"}, transform: transformPosition},\n",[225,480,482,485,488,490,492],{"class":227,"line":481},12,[225,483,484],{"class":235},"    centerB: {default: {x: ",[225,486,487],{"class":351},"0.65",[225,489,472],{"class":235},[225,491,475],{"class":351},[225,493,478],{"class":235},[225,495,497,500,503],{"class":227,"line":496},13,[225,498,499],{"class":235},"    colorA: {default: ",[225,501,502],{"class":242},"'#ff7a18'",[225,504,505],{"class":235},", transform: transformColor},\n",[225,507,509,512,515],{"class":227,"line":508},14,[225,510,511],{"class":235},"    colorB: {default: ",[225,513,514],{"class":242},"'#3b82f6'",[225,516,505],{"class":235},[225,518,520,523,526],{"class":227,"line":519},15,[225,521,522],{"class":235},"    sharpness: {default: ",[225,524,525],{"class":351},"6",[225,527,454],{"class":235},[225,529,531,534,537],{"class":227,"line":530},16,[225,532,533],{"class":235},"    speed: {default: ",[225,535,536],{"class":351},"0",[225,538,454],{"class":235},[225,540,542],{"class":227,"line":541},17,[225,543,544],{"class":235},"  },\n",[225,546,548,551,554,558,561,564],{"class":227,"line":547},18,[225,549,550],{"class":426},"  paint",[225,552,553],{"class":235},": (",[225,555,557],{"class":556},"s9osk","params",[225,559,560],{"class":235},") ",[225,562,563],{"class":231},"=>",[225,565,566],{"class":235}," {\n",[225,568,570,573,576,578,581,584,586,588,590,592,595,598,600,603,605,607,610,613,616],{"class":227,"line":569},19,[225,571,572],{"class":231},"    const",[225,574,575],{"class":351}," glowA",[225,577,423],{"class":231},[225,579,580],{"class":426}," withFrame",[225,582,583],{"class":235},"(",[225,585,352],{"class":426},[225,587,583],{"class":235},[225,589,156],{"class":426},[225,591,583],{"class":235},[225,593,594],{"class":242},"'centerA'",[225,596,597],{"class":235},")), ",[225,599,363],{"class":426},[225,601,602],{"class":235},"({sharpness: ",[225,604,156],{"class":426},[225,606,583],{"class":235},[225,608,609],{"class":242},"'sharpness'",[225,611,612],{"class":235},")}), ",[225,614,615],{"class":242},"'glowA'",[225,617,618],{"class":235},")(params)\n",[225,620,622,624,627,629,631,633,635,637,639,641,644,646,648,650,652,654,656,658,661],{"class":227,"line":621},20,[225,623,572],{"class":231},[225,625,626],{"class":351}," glowB",[225,628,423],{"class":231},[225,630,580],{"class":426},[225,632,583],{"class":235},[225,634,352],{"class":426},[225,636,583],{"class":235},[225,638,156],{"class":426},[225,640,583],{"class":235},[225,642,643],{"class":242},"'centerB'",[225,645,597],{"class":235},[225,647,363],{"class":426},[225,649,602],{"class":235},[225,651,156],{"class":426},[225,653,583],{"class":235},[225,655,609],{"class":242},[225,657,612],{"class":235},[225,659,660],{"class":242},"'glowB'",[225,662,618],{"class":235},[225,664,666,668,671,673,676],{"class":227,"line":665},21,[225,667,572],{"class":231},[225,669,670],{"class":351}," rgb",[225,672,423],{"class":231},[225,674,675],{"class":426}," layers",[225,677,678],{"class":235},"([\n",[225,680,682,685,688,691,694,696,699],{"class":227,"line":681},22,[225,683,684],{"class":235},"      {paint: math.",[225,686,687],{"class":426},"mul",[225,689,690],{"class":235},"(params.uniforms.colorA.",[225,692,693],{"class":426},"member",[225,695,583],{"class":235},[225,697,698],{"class":242},"'rgb'",[225,700,701],{"class":235},"), glowA)},\n",[225,703,705,707,709,712,714,716,718,721,724],{"class":227,"line":704},23,[225,706,684],{"class":235},[225,708,687],{"class":426},[225,710,711],{"class":235},"(params.uniforms.colorB.",[225,713,693],{"class":426},[225,715,583],{"class":235},[225,717,698],{"class":242},[225,719,720],{"class":235},"), glowB), blend: ",[225,722,723],{"class":242},"'screen'",[225,725,454],{"class":235},[225,727,729],{"class":227,"line":728},24,[225,730,731],{"class":235},"    ])\n",[225,733,735,738,741,743,745],{"class":227,"line":734},25,[225,736,737],{"class":231},"    return",[225,739,740],{"class":426}," dithered",[225,742,583],{"class":235},[225,744,191],{"class":426},[225,746,747],{"class":235},"(rgb), params)\n",[225,749,751],{"class":227,"line":750},26,[225,752,544],{"class":235},[225,754,756],{"class":227,"line":755},27,[225,757,758],{"class":235},"})\n",[245,760,762],{"id":761},"types","Types",[250,764,765,775],{},[253,766,767],{},[256,768,769,772],{},[259,770,771],{},"Type",[259,773,774],{},"What it is",[266,776,777],{},[256,778,779,784],{},[271,780,781],{},[8,782,783],{},"Layer",[271,785,786,787,789],{},"One entry in ",[8,788,169],{},": a color, or a color with options.",[245,791,793],{"id":792},"words","Words",[795,796,798],"primitive-words",{":words":797},"[{\"name\":\"layers\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Flayers\",\"summary\":\"Stacks colors into one, first entry at the back.\"},{\"name\":\"emissiveAlpha\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Femissivealpha\",\"summary\":\"Turns an rgb light value into a color with alpha, so glows composite over transparency.\"},{\"name\":\"dithered\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Fdithered\",\"summary\":\"Adds a tiny amount of noise to a final color so long soft gradients show no banding.\"},{\"name\":\"layered\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fcompose\u002Flayered\",\"summary\":\"Builds N variations of one thing from a data list and sums them with weights.\"}]",[799,800,801,809,816,823],"ul",{},[802,803,804,808],"li",{},[164,805,806],{"href":166},[8,807,169],{}," — Stacks colors into one, first entry at the back.",[802,810,811,815],{},[164,812,813],{"href":188},[8,814,191],{}," — Turns an rgb light value into a color with alpha, so glows composite over transparency.",[802,817,818,822],{},[164,819,820],{"href":195},[8,821,198],{}," — Adds a tiny amount of noise to a final color so long soft gradients show no banding.",[802,824,825,829],{},[164,826,827],{"href":173},[8,828,176],{}," — Builds N variations of one thing from a data list and sums them with weights.",[831,832,833],"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":221,"searchDepth":335,"depth":335,"links":835},[836,837,838,839],{"id":247,"depth":335,"text":248},{"id":315,"depth":335,"text":316},{"id":761,"depth":335,"text":762},{"id":792,"depth":335,"text":793},"compose","The words that finish a paint: function. layers stacks several colors into one, back to front, each with an optional opacity and an optional factor it is seen through. layered builds N variations of one recipe from a data list and sums them, which is how curtains, cloud banks and echo trails get their depth cheaply.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fcompose.md","md","paint","Painting",{},"\u002Fdocs\u002Fprimitives\u002Fcompose",{"title":147,"description":841},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fcompose.ts","docs\u002Fprimitives\u002F10.compose\u002Findex","bibwR532OkuwZb-HFeG_KMPoy263OgDZKtUJQSJ1IWY"]