[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fpaint":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":1274,"categorySlug":1274,"categoryTitle":9,"curated":534,"description":1275,"editUrl":1276,"extension":1277,"group":1274,"groupTitle":1278,"kind":9,"meta":1279,"navigation":534,"path":1280,"seo":1281,"sourceUrl":1282,"stem":1283,"wordCount":1284,"__hash__":1285},"primitives\u002Fdocs\u002Fprimitives\u002F6.paint\u002Findex.md","Fields, palettes & ramps",{"type":149,"value":150,"toc":1268},"minimark",[151,155,184,235,242,271,276,509,513,891,895,971,975,1264],[152,153,147],"h1",{"id":154},"fields-palettes-ramps",[156,157,158,159,163,164,167,168,171,172,175,176,183],"p",{},"The words every gradient and most textures are drawn with. A ",[160,161,162],"strong",{},"field"," is a number per pixel\n(",[8,165,166],{},"Field","): the distance from a point, a noise value, a flow pattern. A ",[160,169,170],{},"palette"," turns a\nnumber into a color (",[8,173,174],{},"Palette","): two colors, or a multi-stop ramp, mixed in the color space\nyour definition declares. ",[177,178,180],"a",{"href":179},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Frampover",[8,181,182],{},"rampOver"," joins the two and is the single most common line in a\ngenerator.",[156,185,186,187,193,194,200,201,207,208,214,215,207,221,227,228,234],{},"Everything else here shapes the field before it meets the palette. ",[177,188,190],{"href":189},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwarped",[8,191,192],{},"warped"," bends the\ncoordinate so smooth noise turns liquid. ",[177,195,197],{"href":196},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fscaledvolume",[8,198,199],{},"scaledVolume"," gives noise a zoomable, aspect-correct\ncoordinate. ",[177,202,204],{"href":203},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Ftone",[8,205,206],{},"tone"," and ",[177,209,211],{"href":210},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fthreshold",[8,212,213],{},"threshold"," reshape the value. ",[177,216,218],{"href":217},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Frings",[8,219,220],{},"rings",[177,222,224],{"href":223},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Ftiles",[8,225,226],{},"tiles"," repeat it. ",[177,229,231],{"href":230},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fshare",[8,232,233],{},"share","\nlets two words read one result. Fields nest, so read a recipe from the inside out: the\ninnermost word is sampled first and each wrapper changes what the next one sees.",[156,236,237,238,241],{},"The result is a paint: put it in the definition's ",[8,239,240],{},"paint:"," field.",[243,244,249],"pre",{"className":245,"code":246,"language":247,"meta":248,"style":248},"language-ts shiki shiki-themes github-dark","import {paint} from 'shaders\u002Fstd'\n","ts","",[8,250,251],{"__ignoreMap":248},[252,253,256,260,264,267],"span",{"class":254,"line":255},"line",1,[252,257,259],{"class":258},"snl16","import",[252,261,263],{"class":262},"s95oV"," {paint} ",[252,265,266],{"class":258},"from",[252,268,270],{"class":269},"sU2Wk"," 'shaders\u002Fstd'\n",[272,273,275],"h2",{"id":274},"reach-for-it-when","Reach for it when",[277,278,279,292],"table",{},[280,281,282],"thead",{},[283,284,285,289],"tr",{},[286,287,288],"th",{},"When you need",[286,290,291],{},"Use",[293,294,295,328,351,362,373,391,407,418,438,457,477,496],"tbody",{},[283,296,297,301],{},[298,299,300],"td",{},"a gradient of any shape, in a chosen color space",[298,302,303,307,308,314,315,321,322],{},[177,304,305],{"href":179},[8,306,182],{}," with a ",[177,309,311],{"href":310},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist",[8,312,313],{},"dist"," field and ",[177,316,318],{"href":317},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fpair",[8,319,320],{},"pair"," or ",[177,323,325],{"href":324},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fstops",[8,326,327],{},"stops",[283,329,330,333],{},[298,331,332],{},"the field should flow like liquid",[298,334,335,339,340,346,347],{},[177,336,337],{"href":189},[8,338,192],{}," around a ",[177,341,343],{"href":342},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fnoisefield",[8,344,345],{},"noiseField",", inside ",[177,348,349],{"href":196},[8,350,199],{},[283,352,353,356],{},[298,354,355],{},"noise you can zoom evenly at any canvas size",[298,357,358],{},[177,359,360],{"href":196},[8,361,199],{},[283,363,364,367],{},[298,365,366],{},"the value is too flat or too hot for the palette",[298,368,369],{},[177,370,371],{"href":203},[8,372,206],{},[283,374,375,378],{},[298,376,377],{},"a signed pattern should become soft color bands",[298,379,380,384,385],{},[177,381,382],{"href":210},[8,383,213],{}," over ",[177,386,388],{"href":387},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fflowfield",[8,389,390],{},"flowField",[283,392,393,396],{},[298,394,395],{},"concentric or repeated bands of one field",[298,397,398,402,403],{},[177,399,400],{"href":217},[8,401,220],{},", ",[177,404,405],{"href":223},[8,406,226],{},[283,408,409,412],{},[298,410,411],{},"two words need the same field without computing it twice",[298,413,414],{},[177,415,416],{"href":230},[8,417,233],{},[283,419,420,423],{},[298,421,422],{},"a slow brightness breathing along a pattern",[298,424,425,431,432],{},[177,426,428],{"href":427},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fpulse",[8,429,430],{},"pulse"," inside ",[177,433,435],{"href":434},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fshimmered",[8,436,437],{},"shimmered",[283,439,440,443],{},[298,441,442],{},"the palette value runs past 1 and must not seam",[298,444,445,402,451],{},[177,446,448],{"href":447},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwrapramp",[8,449,450],{},"wrapRamp",[177,452,454],{"href":453},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Ffoldramp",[8,455,456],{},"foldRamp",[283,458,459,462],{},[298,460,461],{},"a mesh-gradient look, colors scattered across the canvas",[298,463,464,470,471],{},[177,465,467],{"href":466},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fscatterfield",[8,468,469],{},"scatterField"," with ",[177,472,474],{"href":473},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fscatteredanchors",[8,475,476],{},"scatteredAnchors",[283,478,479,482],{},[298,480,481],{},"three or four colors blended by two values",[298,483,484,402,490],{},[177,485,487],{"href":486},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fcolorladder3",[8,488,489],{},"colorLadder3",[177,491,493],{"href":492},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fquadblend",[8,494,495],{},"quadBlend",[283,497,498,501],{},[298,499,500],{},"a rainbow from a hue number",[298,502,503],{},[177,504,506],{"href":505},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fhuewheel",[8,507,508],{},"hueWheel",[272,510,512],{"id":511},"example","Example",[243,514,516],{"className":245,"code":515,"language":247,"meta":248,"style":248},"import {defineShader, p, paint, transformColor, transformColorSpace, colorSpaceOptions, colorStopsPropConfig} from 'shaders\u002Fstd'\n\nconst {rampOver, tone, scaledVolume, warped, noiseField, stops} = paint\n\n\u002F\u002F Liquid plasma: warped noise on a zoomable slab, tone-shaped, read through the stop ramp.\nexport const Plasma = defineShader({\n  name: 'Plasma',\n  animatedTime: {speed: 'speed'},\n  props: {\n    colorA: {default: '#7018be', transform: transformColor},\n    colorB: {default: '#000000', transform: transformColor},\n    stops: colorStopsPropConfig(),\n    colorSpace: {default: 'oklch', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},\n    scale: {default: 2},\n    warp: {default: 0.4},\n    intensity: {default: 1.5},\n    speed: {default: 1},\n  },\n  paint: rampOver(\n    tone(\n      scaledVolume(warped(noiseField('mx3'), {amount: p('warp'), amountScale: 4, timeScale: 0.125}), {scale: p('scale')}),\n      {glow: p('intensity'), contrast: 1, balance: 50, invert: true},\n    ),\n    stops(p('colorSpace')),\n  ),\n})\n",[8,517,518,529,536,577,582,589,611,623,635,641,653,664,676,700,711,722,733,744,750,761,769,824,855,861,879,885],{"__ignoreMap":248},[252,519,520,522,525,527],{"class":254,"line":255},[252,521,259],{"class":258},[252,523,524],{"class":262}," {defineShader, p, paint, transformColor, transformColorSpace, colorSpaceOptions, colorStopsPropConfig} ",[252,526,266],{"class":258},[252,528,270],{"class":269},[252,530,532],{"class":254,"line":531},2,[252,533,535],{"emptyLinePlaceholder":534},true,"\n",[252,537,539,542,545,548,550,552,554,556,558,560,562,564,566,568,571,574],{"class":254,"line":538},3,[252,540,541],{"class":258},"const",[252,543,544],{"class":262}," {",[252,546,182],{"class":547},"sDLfK",[252,549,402],{"class":262},[252,551,206],{"class":547},[252,553,402],{"class":262},[252,555,199],{"class":547},[252,557,402],{"class":262},[252,559,192],{"class":547},[252,561,402],{"class":262},[252,563,345],{"class":547},[252,565,402],{"class":262},[252,567,327],{"class":547},[252,569,570],{"class":262},"} ",[252,572,573],{"class":258},"=",[252,575,576],{"class":262}," paint\n",[252,578,580],{"class":254,"line":579},4,[252,581,535],{"emptyLinePlaceholder":534},[252,583,585],{"class":254,"line":584},5,[252,586,588],{"class":587},"sAwPA","\u002F\u002F Liquid plasma: warped noise on a zoomable slab, tone-shaped, read through the stop ramp.\n",[252,590,592,595,598,601,604,608],{"class":254,"line":591},6,[252,593,594],{"class":258},"export",[252,596,597],{"class":258}," const",[252,599,600],{"class":547}," Plasma",[252,602,603],{"class":258}," =",[252,605,607],{"class":606},"svObZ"," defineShader",[252,609,610],{"class":262},"({\n",[252,612,614,617,620],{"class":254,"line":613},7,[252,615,616],{"class":262},"  name: ",[252,618,619],{"class":269},"'Plasma'",[252,621,622],{"class":262},",\n",[252,624,626,629,632],{"class":254,"line":625},8,[252,627,628],{"class":262},"  animatedTime: {speed: ",[252,630,631],{"class":269},"'speed'",[252,633,634],{"class":262},"},\n",[252,636,638],{"class":254,"line":637},9,[252,639,640],{"class":262},"  props: {\n",[252,642,644,647,650],{"class":254,"line":643},10,[252,645,646],{"class":262},"    colorA: {default: ",[252,648,649],{"class":269},"'#7018be'",[252,651,652],{"class":262},", transform: transformColor},\n",[252,654,656,659,662],{"class":254,"line":655},11,[252,657,658],{"class":262},"    colorB: {default: ",[252,660,661],{"class":269},"'#000000'",[252,663,652],{"class":262},[252,665,667,670,673],{"class":254,"line":666},12,[252,668,669],{"class":262},"    stops: ",[252,671,672],{"class":606},"colorStopsPropConfig",[252,674,675],{"class":262},"(),\n",[252,677,679,682,685,688,691,694,697],{"class":254,"line":678},13,[252,680,681],{"class":262},"    colorSpace: {default: ",[252,683,684],{"class":269},"'oklch'",[252,686,687],{"class":262},", transform: transformColorSpace, compileTime: ",[252,689,690],{"class":547},"true",[252,692,693],{"class":262},", ui: {type: ",[252,695,696],{"class":269},"'select'",[252,698,699],{"class":262},", options: colorSpaceOptions}},\n",[252,701,703,706,709],{"class":254,"line":702},14,[252,704,705],{"class":262},"    scale: {default: ",[252,707,708],{"class":547},"2",[252,710,634],{"class":262},[252,712,714,717,720],{"class":254,"line":713},15,[252,715,716],{"class":262},"    warp: {default: ",[252,718,719],{"class":547},"0.4",[252,721,634],{"class":262},[252,723,725,728,731],{"class":254,"line":724},16,[252,726,727],{"class":262},"    intensity: {default: ",[252,729,730],{"class":547},"1.5",[252,732,634],{"class":262},[252,734,736,739,742],{"class":254,"line":735},17,[252,737,738],{"class":262},"    speed: {default: ",[252,740,741],{"class":547},"1",[252,743,634],{"class":262},[252,745,747],{"class":254,"line":746},18,[252,748,749],{"class":262},"  },\n",[252,751,753,756,758],{"class":254,"line":752},19,[252,754,755],{"class":262},"  paint: ",[252,757,182],{"class":606},[252,759,760],{"class":262},"(\n",[252,762,764,767],{"class":254,"line":763},20,[252,765,766],{"class":606},"    tone",[252,768,760],{"class":262},[252,770,772,775,778,780,782,784,786,789,792,794,796,799,802,805,808,811,814,816,818,821],{"class":254,"line":771},21,[252,773,774],{"class":606},"      scaledVolume",[252,776,777],{"class":262},"(",[252,779,192],{"class":606},[252,781,777],{"class":262},[252,783,345],{"class":606},[252,785,777],{"class":262},[252,787,788],{"class":269},"'mx3'",[252,790,791],{"class":262},"), {amount: ",[252,793,156],{"class":606},[252,795,777],{"class":262},[252,797,798],{"class":269},"'warp'",[252,800,801],{"class":262},"), amountScale: ",[252,803,804],{"class":547},"4",[252,806,807],{"class":262},", timeScale: ",[252,809,810],{"class":547},"0.125",[252,812,813],{"class":262},"}), {scale: ",[252,815,156],{"class":606},[252,817,777],{"class":262},[252,819,820],{"class":269},"'scale'",[252,822,823],{"class":262},")}),\n",[252,825,827,830,832,834,837,840,842,845,848,851,853],{"class":254,"line":826},22,[252,828,829],{"class":262},"      {glow: ",[252,831,156],{"class":606},[252,833,777],{"class":262},[252,835,836],{"class":269},"'intensity'",[252,838,839],{"class":262},"), contrast: ",[252,841,741],{"class":547},[252,843,844],{"class":262},", balance: ",[252,846,847],{"class":547},"50",[252,849,850],{"class":262},", invert: ",[252,852,690],{"class":547},[252,854,634],{"class":262},[252,856,858],{"class":254,"line":857},23,[252,859,860],{"class":262},"    ),\n",[252,862,864,867,869,871,873,876],{"class":254,"line":863},24,[252,865,866],{"class":606},"    stops",[252,868,777],{"class":262},[252,870,156],{"class":606},[252,872,777],{"class":262},[252,874,875],{"class":269},"'colorSpace'",[252,877,878],{"class":262},")),\n",[252,880,882],{"class":254,"line":881},25,[252,883,884],{"class":262},"  ),\n",[252,886,888],{"class":254,"line":887},26,[252,889,890],{"class":262},"})\n",[272,892,894],{"id":893},"types","Types",[277,896,897,907],{},[280,898,899],{},[283,900,901,904],{},[286,902,903],{},"Type",[286,905,906],{},"What it is",[293,908,909,918,936,949,962],{},[283,910,911,915],{},[298,912,913],{},[8,914,166],{},[298,916,917],{},"A number per pixel, computed from a coordinate.",[283,919,920,925],{},[298,921,922],{},[8,923,924],{},"FieldScalar",[298,926,927,928,931,932,935],{},"A number input: a prop ",[8,929,930],{},"p('name')",", a plain number, or a prop remapped as ",[8,933,934],{},"{base, add, mul}",".",[283,937,938,943],{},[298,939,940],{},[8,941,942],{},"NoiseBasis",[298,944,945,946,948],{},"The noise flavors ",[8,947,345],{}," can sample.",[283,950,951,956],{},[298,952,953],{},[8,954,955],{},"Paint",[298,957,958,959,961],{},"What a generator's ",[8,960,240],{}," field takes: a function that returns the color at this pixel.",[283,963,964,968],{},[298,965,966],{},[8,967,174],{},[298,969,970],{},"A color for a field value between 0 and 1.",[272,972,974],{"id":973},"words","Words",[976,977,979],"primitive-words",{":words":978},"[{\"name\":\"rampOver\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Frampover\",\"summary\":\"A paint that colors each pixel by looking its field value up in a palette.\"},{\"name\":\"pair\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fpair\",\"summary\":\"A palette of two color props, mixed in the color space named by the `space` prop.\"},{\"name\":\"stops\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fstops\",\"summary\":\"The standard multi-stop palette, read from the `stops`, `colorA` and `colorB` props.\"},{\"name\":\"standardPalette\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fstandardpalette\",\"summary\":\"The color for a 0–1 value from the standard palette props: `colorA`, `colorB`, `stops`, `colorSpace`.\"},{\"name\":\"dist\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist\",\"summary\":\"Distance fields: the shape of a gradient, as a number that grows away from a line or point.\"},{\"name\":\"noiseField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fnoisefield\",\"summary\":\"A field of smooth noise in the chosen flavor.\"},{\"name\":\"warped\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwarped\",\"summary\":\"Makes a field flow like liquid by bending its coordinate with moving noise.\"},{\"name\":\"scaledVolume\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fscaledvolume\",\"summary\":\"Gives a noise field a zoomable, aspect-correct coordinate.\"},{\"name\":\"tone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Ftone\",\"summary\":\"Reshapes a 0–1 field with glow, contrast and balance controls, then flips it.\"},{\"name\":\"threshold\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fthreshold\",\"summary\":\"Turns a signed field (−1 to 1) into a soft 0–1 mask.\"},{\"name\":\"rings\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Frings\",\"summary\":\"Repeats a field as concentric bands.\"},{\"name\":\"tiles\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Ftiles\",\"summary\":\"Repeats a field `count` times, always wrapping.\"},{\"name\":\"share\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fshare\",\"summary\":\"Evaluates a field once and lets several words read the same result.\"},{\"name\":\"flowField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fflowfield\",\"summary\":\"A swirling, animated wave pattern from −1 to 1.\"},{\"name\":\"pulse\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fpulse\",\"summary\":\"A gentle brightness pulse that follows a pattern field, hovering around 1.\"},{\"name\":\"shimmered\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fshimmered\",\"summary\":\"Multiplies a paint's color and alpha by a gain field, for a slow shimmer over a pattern.\"},{\"name\":\"wrapRamp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwrapramp\",\"summary\":\"Runs a palette value back and forth `cycles` times so a ramp repeats without a seam.\"},{\"name\":\"foldRamp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Ffoldramp\",\"summary\":\"Folds any number into 0–1 as a seamless zigzag: up from 0 to 1, back down, every 2 units.\"},{\"name\":\"warpedPoint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwarpedpoint\",\"summary\":\"A 3D position pushed around by moving noise, for reading several fields at one warped spot.\"},{\"name\":\"warpStep\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwarpstep\",\"summary\":\"One step of a chained warp: pushes a 2D position by two noise reads and hands them back.\"},{\"name\":\"scatterField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fscatterfield\",\"summary\":\"A mesh-gradient field: up to 8 drifting points scattered across the canvas, blended by nearness.\"},{\"name\":\"scatteredAnchors\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fscatteredanchors\",\"summary\":\"Computes the `scatterField` points once per frame instead of once per pixel.\"},{\"name\":\"quadBlend\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fquadblend\",\"summary\":\"A four-color blend on a square: `a` to `b` across the top, `c` to `d` across the bottom, then top to bottom.\"},{\"name\":\"colorLadder3\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fcolorladder3\",\"summary\":\"A three-color blend: `a` to `b` by the first value, then on to `c` by the second.\"},{\"name\":\"hueWheel\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fhuewheel\",\"summary\":\"A rainbow color for a hue value: 0 is red, cycling through the spectrum and back every 1.\"},{\"name\":\"dist.conic\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-conic\",\"summary\":\"A sweep around a center, like a clock hand: 0 to 1 once around.\"},{\"name\":\"dist.diamond\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-diamond\",\"summary\":\"A diamond-shaped gradient spreading out from a center.\"},{\"name\":\"dist.linear\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-linear\",\"summary\":\"A straight gradient from one point to another.\"},{\"name\":\"dist.radial\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-radial\",\"summary\":\"A round or elliptical gradient spreading out from a center.\"},{\"name\":\"dist.spiral\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-spiral\",\"summary\":\"A turning spiral stripe: 0 on the background, 1 on the stroke.\"}]",[980,981,982,990,1001,1017,1035,1042,1049,1056,1063,1070,1077,1084,1095,1102,1109,1116,1123,1134,1141,1150,1159,1166,1176,1197,1212,1219,1228,1237,1246,1255],"ul",{},[983,984,985,989],"li",{},[177,986,987],{"href":179},[8,988,182],{}," — A paint that colors each pixel by looking its field value up in a palette.",[983,991,992,996,997,1000],{},[177,993,994],{"href":317},[8,995,320],{}," — A palette of two color props, mixed in the color space named by the ",[8,998,999],{},"space"," prop.",[983,1002,1003,1007,1008,402,1010,207,1013,1016],{},[177,1004,1005],{"href":324},[8,1006,327],{}," — The standard multi-stop palette, read from the ",[8,1009,327],{},[8,1011,1012],{},"colorA",[8,1014,1015],{},"colorB"," props.",[983,1018,1019,1025,1026,402,1028,402,1030,402,1032,935],{},[177,1020,1022],{"href":1021},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fstandardpalette",[8,1023,1024],{},"standardPalette"," — The color for a 0–1 value from the standard palette props: ",[8,1027,1012],{},[8,1029,1015],{},[8,1031,327],{},[8,1033,1034],{},"colorSpace",[983,1036,1037,1041],{},[177,1038,1039],{"href":310},[8,1040,313],{}," — Distance fields: the shape of a gradient, as a number that grows away from a line or point.",[983,1043,1044,1048],{},[177,1045,1046],{"href":342},[8,1047,345],{}," — A field of smooth noise in the chosen flavor.",[983,1050,1051,1055],{},[177,1052,1053],{"href":189},[8,1054,192],{}," — Makes a field flow like liquid by bending its coordinate with moving noise.",[983,1057,1058,1062],{},[177,1059,1060],{"href":196},[8,1061,199],{}," — Gives a noise field a zoomable, aspect-correct coordinate.",[983,1064,1065,1069],{},[177,1066,1067],{"href":203},[8,1068,206],{}," — Reshapes a 0–1 field with glow, contrast and balance controls, then flips it.",[983,1071,1072,1076],{},[177,1073,1074],{"href":210},[8,1075,213],{}," — Turns a signed field (−1 to 1) into a soft 0–1 mask.",[983,1078,1079,1083],{},[177,1080,1081],{"href":217},[8,1082,220],{}," — Repeats a field as concentric bands.",[983,1085,1086,1090,1091,1094],{},[177,1087,1088],{"href":223},[8,1089,226],{}," — Repeats a field ",[8,1092,1093],{},"count"," times, always wrapping.",[983,1096,1097,1101],{},[177,1098,1099],{"href":230},[8,1100,233],{}," — Evaluates a field once and lets several words read the same result.",[983,1103,1104,1108],{},[177,1105,1106],{"href":387},[8,1107,390],{}," — A swirling, animated wave pattern from −1 to 1.",[983,1110,1111,1115],{},[177,1112,1113],{"href":427},[8,1114,430],{}," — A gentle brightness pulse that follows a pattern field, hovering around 1.",[983,1117,1118,1122],{},[177,1119,1120],{"href":434},[8,1121,437],{}," — Multiplies a paint's color and alpha by a gain field, for a slow shimmer over a pattern.",[983,1124,1125,1129,1130,1133],{},[177,1126,1127],{"href":447},[8,1128,450],{}," — Runs a palette value back and forth ",[8,1131,1132],{},"cycles"," times so a ramp repeats without a seam.",[983,1135,1136,1140],{},[177,1137,1138],{"href":453},[8,1139,456],{}," — Folds any number into 0–1 as a seamless zigzag: up from 0 to 1, back down, every 2 units.",[983,1142,1143,1149],{},[177,1144,1146],{"href":1145},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwarpedpoint",[8,1147,1148],{},"warpedPoint"," — A 3D position pushed around by moving noise, for reading several fields at one warped spot.",[983,1151,1152,1158],{},[177,1153,1155],{"href":1154},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fwarpstep",[8,1156,1157],{},"warpStep"," — One step of a chained warp: pushes a 2D position by two noise reads and hands them back.",[983,1160,1161,1165],{},[177,1162,1163],{"href":466},[8,1164,469],{}," — A mesh-gradient field: up to 8 drifting points scattered across the canvas, blended by nearness.",[983,1167,1168,1172,1173,1175],{},[177,1169,1170],{"href":473},[8,1171,476],{}," — Computes the ",[8,1174,469],{}," points once per frame instead of once per pixel.",[983,1177,1178,1182,1183,1185,1186,1189,1190,1185,1193,1196],{},[177,1179,1180],{"href":492},[8,1181,495],{}," — A four-color blend on a square: ",[8,1184,177],{}," to ",[8,1187,1188],{},"b"," across the top, ",[8,1191,1192],{},"c",[8,1194,1195],{},"d"," across the bottom, then top to bottom.",[983,1198,1199,1203,1204,1185,1206,1208,1209,1211],{},[177,1200,1201],{"href":486},[8,1202,489],{}," — A three-color blend: ",[8,1205,177],{},[8,1207,1188],{}," by the first value, then on to ",[8,1210,1192],{}," by the second.",[983,1213,1214,1218],{},[177,1215,1216],{"href":505},[8,1217,508],{}," — A rainbow color for a hue value: 0 is red, cycling through the spectrum and back every 1.",[983,1220,1221,1227],{},[177,1222,1224],{"href":1223},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-conic",[8,1225,1226],{},"dist.conic"," — A sweep around a center, like a clock hand: 0 to 1 once around.",[983,1229,1230,1236],{},[177,1231,1233],{"href":1232},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-diamond",[8,1234,1235],{},"dist.diamond"," — A diamond-shaped gradient spreading out from a center.",[983,1238,1239,1245],{},[177,1240,1242],{"href":1241},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-linear",[8,1243,1244],{},"dist.linear"," — A straight gradient from one point to another.",[983,1247,1248,1254],{},[177,1249,1251],{"href":1250},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-radial",[8,1252,1253],{},"dist.radial"," — A round or elliptical gradient spreading out from a center.",[983,1256,1257,1263],{},[177,1258,1260],{"href":1259},"\u002Fdocs\u002Fprimitives\u002Fpaint\u002Fdist-spiral",[8,1261,1262],{},"dist.spiral"," — A turning spiral stripe: 0 on the background, 1 on the stroke.",[1265,1266,1267],"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}",{"title":248,"searchDepth":531,"depth":531,"links":1269},[1270,1271,1272,1273],{"id":274,"depth":531,"text":275},{"id":511,"depth":531,"text":512},{"id":893,"depth":531,"text":894},{"id":973,"depth":531,"text":974},"paint","The words every gradient and most textures are drawn with.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fpaint.md","md","Painting",{},"\u002Fdocs\u002Fprimitives\u002Fpaint",{"title":147,"description":1275},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Ffields.ts","docs\u002Fprimitives\u002F6.paint\u002Findex",30,"6KKPinee-TIlTbJBKhSUDq5Xp7gS1F2o4n7lnWh62m4"]