[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fgradients":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":154,"categorySlug":154,"categoryTitle":9,"curated":321,"description":747,"editUrl":748,"extension":749,"group":750,"groupTitle":751,"kind":9,"meta":752,"navigation":321,"path":753,"seo":754,"sourceUrl":755,"stem":756,"wordCount":355,"__hash__":757},"primitives\u002Fdocs\u002Fprimitives\u002F7.gradients\u002Findex.md","Gradients",{"type":149,"value":150,"toc":741},"minimark",[151,155,167,182,211,216,296,300,652,656,683,687,737],[152,153,147],"h1",{"id":154},"gradients",[156,157,158,159,162,163,166],"p",{},"Finished gradient paints: a flat fill, a color wheel that cycles over time, a cloud of five\ncolored points, and a beam of light between two points. Each word binds your props and\nreturns a paint, so a definition is the props plus one line. They are complete looks rather\nthan building blocks. For a gradient of your own shape, compose a ",[8,160,161],{},"dist"," field with ",[8,164,165],{},"rampOver","\nfrom the fields words instead.",[156,168,169,170,173,174,177,178,181],{},"Colors mix in the color space you declare on a ",[8,171,172],{},"compileTime"," prop, and positions are props\nmade with ",[8,175,176],{},"transformPosition",". The result goes in the definition's ",[8,179,180],{},"paint:"," field.",[183,184,189],"pre",{"className":185,"code":186,"language":187,"meta":188,"style":188},"language-ts shiki shiki-themes github-dark","import {gradients} from 'shaders\u002Fstd'\n","ts","",[8,190,191],{"__ignoreMap":188},[192,193,196,200,204,207],"span",{"class":194,"line":195},"line",1,[192,197,199],{"class":198},"snl16","import",[192,201,203],{"class":202},"s95oV"," {gradients} ",[192,205,206],{"class":198},"from",[192,208,210],{"class":209},"sU2Wk"," 'shaders\u002Fstd'\n",[212,213,215],"h2",{"id":214},"reach-for-it-when","Reach for it when",[217,218,219,232],"table",{},[220,221,222],"thead",{},[223,224,225,229],"tr",{},[226,227,228],"th",{},"When you need",[226,230,231],{},"Use",[233,234,235,250,263,276],"tbody",{},[223,236,237,241],{},[238,239,240],"td",{},"a single color, possibly translucent",[238,242,243],{},[244,245,247],"a",{"href":246},"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fsolidcolor",[8,248,249],{},"solidColor",[223,251,252,255],{},[238,253,254],{},"a rainbow or three-color cycle that drifts across the canvas",[238,256,257],{},[244,258,260],{"href":259},"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fcolorwheel",[8,261,262],{},"colorWheel",[223,264,265,268],{},[238,266,267],{},"five draggable color points blended by nearness",[238,269,270],{},[244,271,273],{"href":272},"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fpointcloudgradient",[8,274,275],{},"pointCloudGradient",[223,277,278,281],{},[238,279,280],{},"a soft beam of light from one point to another",[238,282,283,289,290],{},[244,284,286],{"href":285},"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fbeam",[8,287,288],{},"beam"," with ",[244,291,293],{"href":292},"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fbeampreconvertedfields",[8,294,295],{},"beamPreconvertedFields",[212,297,299],{"id":298},"example","Example",[183,301,303],{"className":185,"code":302,"language":187,"meta":188,"style":188},"import {defineShader, p, gradients, transformColor, transformPosition, transformColorSpace, colorSpaceOptions} from 'shaders\u002Fstd'\n\n\u002F\u002F A tapered beam: wide and soft at the start, tight at the end, red core fading to blue.\nexport const Beam = defineShader({\n  name: 'Beam',\n  extraFields: gradients.beamPreconvertedFields,\n  props: {\n    startPosition: {default: {x: 0.2, y: 0.5}, transform: transformPosition},\n    endPosition: {default: {x: 0.8, y: 0.5}, transform: transformPosition},\n    startThickness: {default: 0.4},\n    endThickness: {default: 0.1},\n    startSoftness: {default: 1},\n    endSoftness: {default: 0.3},\n    insideColor: {default: '#ff3b30', transform: transformColor},\n    outsideColor: {default: '#1e40ff', transform: transformColor},\n    colorSpace: {default: 'oklab', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},\n  },\n  paint: gradients.beam({\n    from: p('startPosition'),\n    to: p('endPosition'),\n    thickness: {start: p('startThickness'), end: p('endThickness')},\n    softness: {start: p('startSoftness'), end: p('endSoftness')},\n    colors: {inside: p('insideColor'), outside: p('outsideColor')},\n    space: p('colorSpace'),\n  }),\n})\n",[8,304,305,316,323,330,353,365,371,377,395,410,422,433,444,455,467,478,502,508,518,535,550,576,600,625,640,646],{"__ignoreMap":188},[192,306,307,309,312,314],{"class":194,"line":195},[192,308,199],{"class":198},[192,310,311],{"class":202}," {defineShader, p, gradients, transformColor, transformPosition, transformColorSpace, colorSpaceOptions} ",[192,313,206],{"class":198},[192,315,210],{"class":209},[192,317,319],{"class":194,"line":318},2,[192,320,322],{"emptyLinePlaceholder":321},true,"\n",[192,324,326],{"class":194,"line":325},3,[192,327,329],{"class":328},"sAwPA","\u002F\u002F A tapered beam: wide and soft at the start, tight at the end, red core fading to blue.\n",[192,331,333,336,339,343,346,350],{"class":194,"line":332},4,[192,334,335],{"class":198},"export",[192,337,338],{"class":198}," const",[192,340,342],{"class":341},"sDLfK"," Beam",[192,344,345],{"class":198}," =",[192,347,349],{"class":348},"svObZ"," defineShader",[192,351,352],{"class":202},"({\n",[192,354,356,359,362],{"class":194,"line":355},5,[192,357,358],{"class":202},"  name: ",[192,360,361],{"class":209},"'Beam'",[192,363,364],{"class":202},",\n",[192,366,368],{"class":194,"line":367},6,[192,369,370],{"class":202},"  extraFields: gradients.beamPreconvertedFields,\n",[192,372,374],{"class":194,"line":373},7,[192,375,376],{"class":202},"  props: {\n",[192,378,380,383,386,389,392],{"class":194,"line":379},8,[192,381,382],{"class":202},"    startPosition: {default: {x: ",[192,384,385],{"class":341},"0.2",[192,387,388],{"class":202},", y: ",[192,390,391],{"class":341},"0.5",[192,393,394],{"class":202},"}, transform: transformPosition},\n",[192,396,398,401,404,406,408],{"class":194,"line":397},9,[192,399,400],{"class":202},"    endPosition: {default: {x: ",[192,402,403],{"class":341},"0.8",[192,405,388],{"class":202},[192,407,391],{"class":341},[192,409,394],{"class":202},[192,411,413,416,419],{"class":194,"line":412},10,[192,414,415],{"class":202},"    startThickness: {default: ",[192,417,418],{"class":341},"0.4",[192,420,421],{"class":202},"},\n",[192,423,425,428,431],{"class":194,"line":424},11,[192,426,427],{"class":202},"    endThickness: {default: ",[192,429,430],{"class":341},"0.1",[192,432,421],{"class":202},[192,434,436,439,442],{"class":194,"line":435},12,[192,437,438],{"class":202},"    startSoftness: {default: ",[192,440,441],{"class":341},"1",[192,443,421],{"class":202},[192,445,447,450,453],{"class":194,"line":446},13,[192,448,449],{"class":202},"    endSoftness: {default: ",[192,451,452],{"class":341},"0.3",[192,454,421],{"class":202},[192,456,458,461,464],{"class":194,"line":457},14,[192,459,460],{"class":202},"    insideColor: {default: ",[192,462,463],{"class":209},"'#ff3b30'",[192,465,466],{"class":202},", transform: transformColor},\n",[192,468,470,473,476],{"class":194,"line":469},15,[192,471,472],{"class":202},"    outsideColor: {default: ",[192,474,475],{"class":209},"'#1e40ff'",[192,477,466],{"class":202},[192,479,481,484,487,490,493,496,499],{"class":194,"line":480},16,[192,482,483],{"class":202},"    colorSpace: {default: ",[192,485,486],{"class":209},"'oklab'",[192,488,489],{"class":202},", transform: transformColorSpace, compileTime: ",[192,491,492],{"class":341},"true",[192,494,495],{"class":202},", ui: {type: ",[192,497,498],{"class":209},"'select'",[192,500,501],{"class":202},", options: colorSpaceOptions}},\n",[192,503,505],{"class":194,"line":504},17,[192,506,507],{"class":202},"  },\n",[192,509,511,514,516],{"class":194,"line":510},18,[192,512,513],{"class":202},"  paint: gradients.",[192,515,288],{"class":348},[192,517,352],{"class":202},[192,519,521,524,526,529,532],{"class":194,"line":520},19,[192,522,523],{"class":202},"    from: ",[192,525,156],{"class":348},[192,527,528],{"class":202},"(",[192,530,531],{"class":209},"'startPosition'",[192,533,534],{"class":202},"),\n",[192,536,538,541,543,545,548],{"class":194,"line":537},20,[192,539,540],{"class":202},"    to: ",[192,542,156],{"class":348},[192,544,528],{"class":202},[192,546,547],{"class":209},"'endPosition'",[192,549,534],{"class":202},[192,551,553,556,558,560,563,566,568,570,573],{"class":194,"line":552},21,[192,554,555],{"class":202},"    thickness: {start: ",[192,557,156],{"class":348},[192,559,528],{"class":202},[192,561,562],{"class":209},"'startThickness'",[192,564,565],{"class":202},"), end: ",[192,567,156],{"class":348},[192,569,528],{"class":202},[192,571,572],{"class":209},"'endThickness'",[192,574,575],{"class":202},")},\n",[192,577,579,582,584,586,589,591,593,595,598],{"class":194,"line":578},22,[192,580,581],{"class":202},"    softness: {start: ",[192,583,156],{"class":348},[192,585,528],{"class":202},[192,587,588],{"class":209},"'startSoftness'",[192,590,565],{"class":202},[192,592,156],{"class":348},[192,594,528],{"class":202},[192,596,597],{"class":209},"'endSoftness'",[192,599,575],{"class":202},[192,601,603,606,608,610,613,616,618,620,623],{"class":194,"line":602},23,[192,604,605],{"class":202},"    colors: {inside: ",[192,607,156],{"class":348},[192,609,528],{"class":202},[192,611,612],{"class":209},"'insideColor'",[192,614,615],{"class":202},"), outside: ",[192,617,156],{"class":348},[192,619,528],{"class":202},[192,621,622],{"class":209},"'outsideColor'",[192,624,575],{"class":202},[192,626,628,631,633,635,638],{"class":194,"line":627},24,[192,629,630],{"class":202},"    space: ",[192,632,156],{"class":348},[192,634,528],{"class":202},[192,636,637],{"class":209},"'colorSpace'",[192,639,534],{"class":202},[192,641,643],{"class":194,"line":642},25,[192,644,645],{"class":202},"  }),\n",[192,647,649],{"class":194,"line":648},26,[192,650,651],{"class":202},"})\n",[212,653,655],{"id":654},"types","Types",[217,657,658,668],{},[220,659,660],{},[223,661,662,665],{},[226,663,664],{},"Type",[226,666,667],{},"What it is",[233,669,670],{},[223,671,672,677],{},[238,673,674],{},[8,675,676],{},"Paint",[238,678,679,680,682],{},"What a generator's ",[8,681,180],{}," field takes: a function that returns the color at this pixel.",[212,684,686],{"id":685},"words","Words",[688,689,691],"primitive-words",{":words":690},"[{\"name\":\"solidColor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fsolidcolor\",\"summary\":\"A flat fill in one color prop.\"},{\"name\":\"beam\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fbeam\",\"summary\":\"A glowing beam of light between two points.\"},{\"name\":\"beamPreconvertedFields\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fbeampreconvertedfields\",\"summary\":\"The `extraFields` a `beam` definition must declare.\"},{\"name\":\"colorWheel\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fcolorwheel\",\"summary\":\"A striped gradient that slides across the canvas, cycling through its colors over time.\"},{\"name\":\"pointCloudGradient\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fgradients\u002Fpointcloudgradient\",\"summary\":\"Five colored points placed anywhere on the canvas, each pixel taking the colors of the points nearest it.\"}]",[692,693,694,702,709,723,730],"ul",{},[695,696,697,701],"li",{},[244,698,699],{"href":246},[8,700,249],{}," — A flat fill in one color prop.",[695,703,704,708],{},[244,705,706],{"href":285},[8,707,288],{}," — A glowing beam of light between two points.",[695,710,711,715,716,719,720,722],{},[244,712,713],{"href":292},[8,714,295],{}," — The ",[8,717,718],{},"extraFields"," a ",[8,721,288],{}," definition must declare.",[695,724,725,729],{},[244,726,727],{"href":259},[8,728,262],{}," — A striped gradient that slides across the canvas, cycling through its colors over time.",[695,731,732,736],{},[244,733,734],{"href":272},[8,735,275],{}," — Five colored points placed anywhere on the canvas, each pixel taking the colors of the points nearest it.",[738,739,740],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":188,"searchDepth":318,"depth":318,"links":742},[743,744,745,746],{"id":214,"depth":318,"text":215},{"id":298,"depth":318,"text":299},{"id":654,"depth":318,"text":655},{"id":685,"depth":318,"text":686},"Finished gradient paints: a flat fill, a color wheel that cycles over time, a cloud of five colored points, and a beam of light between two points.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fgradients.md","md","paint","Painting",{},"\u002Fdocs\u002Fprimitives\u002Fgradients",{"title":147,"description":747},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fgradients.ts","docs\u002Fprimitives\u002F7.gradients\u002Findex","b-LBhopLJ07mP1M9fLFPhM-ocy0Bqk6ASZZJVqCcvmM"]