[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fnoise":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":687,"description":1461,"editUrl":1462,"extension":1463,"group":1464,"groupTitle":1465,"kind":9,"meta":1466,"navigation":687,"path":1467,"seo":1468,"sourceUrl":1469,"stem":1470,"wordCount":1471,"__hash__":1472},"primitives\u002Fdocs\u002Fprimitives\u002F12.noise\u002Findex.md","Noise",{"type":149,"value":150,"toc":1455},"minimark",[151,155,252,312,341,346,662,666,1057,1061,1121,1125,1451],[152,153,147],"h1",{"id":154},"noise",[156,157,158,159,163,164,171,172,178,179,185,186,189,190,193,194,200,201,207,208,211,212,218,219,225,226,232,233,236,237,240,241,244,245,251],"p",{},"Words for grainy, cloudy, cellular and streaked surfaces: the textures behind clouds, film\ngrain, stone, water and brushed metal. Read a noise recipe from the inside out, in four\nsteps. A ",[160,161,162],"strong",{},"basis"," is the raw pattern, one number per point (",[165,166,168],"a",{"href":167},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fgaborgrains",[8,169,170],{},"gaborGrains",", ",[165,173,175],{"href":174},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcurlspeed",[8,176,177],{},"curlSpeed",",\n",[165,180,182],{"href":181},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fbluespeckle",[8,183,184],{},"blueSpeckle",", or a ",[8,187,188],{},"noiseField"," from paint). A ",[160,191,192],{},"framing"," decides where on the canvas the\nbasis is sampled and how big it is: ",[165,195,197],{"href":196},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fseededplane",[8,198,199],{},"seededPlane"," for almost everything, ",[165,202,204],{"href":203},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fpixelgrid",[8,205,206],{},"pixelGrid"," for\npatterns that live on pixels. A ",[160,209,210],{},"tone"," word turns the raw number into a 0–1 ramp position\nwith contrast and balance controls: ",[165,213,215],{"href":214},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fnoisetone",[8,216,217],{},"noiseTone"," for a 0–1 basis, ",[165,220,222],{"href":221},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fsignedtone",[8,223,224],{},"signedTone"," for a −1 to 1\none, or ",[165,227,229],{"href":228},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Funitized",[8,230,231],{},"unitized"," to convert first. A ",[160,234,235],{},"ramp"," closes it: ",[8,238,239],{},"rampOver"," with ",[8,242,243],{},"stops"," or\n",[165,246,248],{"href":247},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Flinearpair",[8,249,250],{},"linearPair"," gives the field color.",[156,253,254,255,259,260,264,265,269,270,273,274,280,281,287,288,171,294,300,301,304,305,311],{},"Each basis is either signed (−1 to 1) or unit (0 to 1); its comment says which. Signed\nbases go through ",[165,256,257],{"href":228},[8,258,231],{}," or ",[165,261,262],{"href":221},[8,263,224],{},", unit bases straight into ",[165,266,267],{"href":214},[8,268,217],{},". Bases\nthat move read the layer's clock, so declare ",[8,271,272],{},"animatedTime: {speed: 'speed'}"," on the\ndefinition. ",[165,275,277],{"href":276},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ffractalnoise",[8,278,279],{},"fractalNoise"," and ",[165,282,284],{"href":283},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fworleynoise",[8,285,286],{},"worleyNoise"," are complete paints that do all four steps\nfor you. The wave words (",[165,289,291],{"href":290},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fwaves",[8,292,293],{},"waves",[165,295,297],{"href":296},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fwavyline",[8,298,299],{},"wavyLine",") are expressions rather than fields, for\nrecipes written as a ",[8,302,303],{},"paint: (params) => …"," function. ",[165,306,308],{"href":307},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fnoiserelief",[8,309,310],{},"noiseRelief"," is the one filter here:\nit embosses the layer inside instead of painting.",[313,314,319],"pre",{"className":315,"code":316,"language":317,"meta":318,"style":318},"language-ts shiki shiki-themes github-dark","import {noise} from 'shaders\u002Fstd'\n","ts","",[8,320,321],{"__ignoreMap":318},[322,323,326,330,334,337],"span",{"class":324,"line":325},"line",1,[322,327,329],{"class":328},"snl16","import",[322,331,333],{"class":332},"s95oV"," {noise} ",[322,335,336],{"class":328},"from",[322,338,340],{"class":339},"sU2Wk"," 'shaders\u002Fstd'\n",[342,343,345],"h2",{"id":344},"reach-for-it-when","Reach for it when",[347,348,349,362],"table",{},[350,351,352],"thead",{},[353,354,355,359],"tr",{},[356,357,358],"th",{},"When you need",[356,360,361],{},"Use",[363,364,365,391,402,413,444,460,477,492,509,520,533,548,559,572,583,602,613,645],"tbody",{},[353,366,367,371],{},[368,369,370],"td",{},"soft drifting clouds or smoke",[368,372,373,377,378,377,384,386,387],{},[165,374,375],{"href":196},[8,376,199],{}," around ",[165,379,381],{"href":380},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fevolving",[8,382,383],{},"evolving",[8,385,188],{},", then ",[165,388,389],{"href":214},[8,390,217],{},[353,392,393,396],{},[368,394,395],{},"layered fractal detail with an angle",[368,397,398],{},[165,399,400],{"href":276},[8,401,279],{},[353,403,404,407],{},[368,405,406],{},"cells, scales or a cracked-earth look",[368,408,409],{},[165,410,411],{"href":283},[8,412,286],{},[353,414,415,418],{},[368,416,417],{},"Voronoi cells with a fill and border lines",[368,419,420,240,426,171,432,280,438],{},[165,421,423],{"href":422},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcelldistances",[8,424,425],{},"cellDistances",[165,427,429],{"href":428},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcellfill",[8,430,431],{},"cellFill",[165,433,435],{"href":434},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcellborders",[8,436,437],{},"cellBorders",[165,439,441],{"href":440},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fborderoverlay",[8,442,443],{},"borderOverlay",[353,445,446,449],{},[368,447,448],{},"brushed metal or wood grain",[368,450,451,455,456],{},[165,452,453],{"href":167},[8,454,170],{}," inside ",[165,457,458],{"href":228},[8,459,231],{},[353,461,462,465],{},[368,463,464],{},"rippling water interference",[368,466,467,455,473],{},[165,468,470],{"href":469},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fwaveletbands",[8,471,472],{},"waveletBands",[165,474,475],{"href":228},[8,476,231],{},[353,478,479,482],{},[368,480,481],{},"film grain or dither",[368,483,484,377,488],{},[165,485,486],{"href":203},[8,487,206],{},[165,489,490],{"href":181},[8,491,184],{},[353,493,494,497],{},[368,495,496],{},"eroded terrain ridges",[368,498,499,455,505],{},[165,500,502],{"href":501},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ferosionridges",[8,503,504],{},"erosionRidges",[165,506,507],{"href":228},[8,508,231],{},[353,510,511,514],{},[368,512,513],{},"swirling flow, eddies and streams",[368,515,516],{},[165,517,518],{"href":174},[8,519,177],{},[353,521,522,525],{},[368,523,524],{},"hairline scratches on a surface",[368,526,527],{},[165,528,530],{"href":529},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fscratchstreaks",[8,531,532],{},"scratchStreaks",[353,534,535,538],{},[368,536,537],{},"a basis is −1 to 1 and the ramp wants 0–1",[368,539,540,259,544],{},[165,541,542],{"href":228},[8,543,231],{},[165,545,546],{"href":221},[8,547,224],{},[353,549,550,553],{},[368,551,552],{},"the standard contrast and balance sliders",[368,554,555],{},[165,556,557],{"href":214},[8,558,217],{},[353,560,561,564],{},[368,562,563],{},"a contrast slider where 1 means unchanged",[368,565,566],{},[165,567,569],{"href":568},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fgaintone",[8,570,571],{},"gainTone",[353,573,574,577],{},[368,575,576],{},"two colors with no color-space prop",[368,578,579],{},[165,580,581],{"href":247},[8,582,250],{},[353,584,585,588],{},[368,586,587],{},"an organic wobble on an edge, radius or fill",[368,589,590,594,595,601],{},[165,591,592],{"href":290},[8,593,293],{},", or ",[165,596,598],{"href":597},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Forganicwaves",[8,599,600],{},"organicWaves"," for a ready schedule",[353,603,604,607],{},[368,605,606],{},"a wavy line, horizon or curtain path",[368,608,609],{},[165,610,611],{"href":296},[8,612,299],{},[353,614,615,618],{},[368,616,617],{},"flowing gradient ribbons between two points",[368,619,620,626,627,240,633,280,639],{},[165,621,623],{"href":622},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fribbons",[8,624,625],{},"ribbons"," closed by ",[165,628,630],{"href":629},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Foverrgb",[8,631,632],{},"overRgb",[165,634,636],{"href":635},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fbacktop3",[8,637,638],{},"backToP3",[165,640,642],{"href":641},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftonepow",[8,643,644],{},"tonePow",[353,646,647,650],{},[368,648,649],{},"embossing the layer inside as stone or cloth",[368,651,652,240,656],{},[165,653,654],{"href":307},[8,655,310],{},[165,657,659],{"href":658},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Freliefbases",[8,660,661],{},"reliefBases",[342,663,665],{"id":664},"example","Example",[313,667,669],{"className":315,"code":668,"language":317,"meta":318,"style":318},"import {defineShader, p, noise, paint, transformColor, transformColorSpace, colorSpaceOptions} from 'shaders\u002Fstd'\n\nconst {seededPlane, gaborGrains, unitized, noiseTone} = noise\nconst {rampOver, stops} = paint\n\n\u002F\u002F Brushed metal: oriented sine grains (a signed basis) framed on a zoomable plane,\n\u002F\u002F converted to 0–1, toned with contrast and balance, and read through the color ramp.\nexport const BrushedMetal = defineShader({\n  name: 'BrushedMetal',\n  animatedTime: {speed: 'speed'},\n  props: {\n    colorA: {default: '#f4f4f5', transform: transformColor},\n    colorB: {default: '#27272a', transform: transformColor},\n    colorSpace: {default: 'oklab', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},\n    scale: {default: 1.5},\n    frequency: {default: 8},\n    seed: {default: 0},\n    contrast: {default: 0},\n    balance: {default: 0},\n    speed: {default: 0.5},\n  },\n  paint: rampOver(\n    noiseTone(\n      seededPlane(unitized(gaborGrains({frequency: p('frequency')})), {scale: p('scale'), seed: p('seed')}),\n      {contrast: p('contrast'), balance: p('balance')},\n    ),\n    stops(p('colorSpace')),\n  ),\n})\n",[8,670,671,682,689,722,742,747,754,760,782,793,805,811,823,834,858,869,880,891,901,911,922,928,939,947,995,1021,1027,1045,1051],{"__ignoreMap":318},[322,672,673,675,678,680],{"class":324,"line":325},[322,674,329],{"class":328},[322,676,677],{"class":332}," {defineShader, p, noise, paint, transformColor, transformColorSpace, colorSpaceOptions} ",[322,679,336],{"class":328},[322,681,340],{"class":339},[322,683,685],{"class":324,"line":684},2,[322,686,688],{"emptyLinePlaceholder":687},true,"\n",[322,690,692,695,698,701,703,705,707,709,711,713,716,719],{"class":324,"line":691},3,[322,693,694],{"class":328},"const",[322,696,697],{"class":332}," {",[322,699,199],{"class":700},"sDLfK",[322,702,171],{"class":332},[322,704,170],{"class":700},[322,706,171],{"class":332},[322,708,231],{"class":700},[322,710,171],{"class":332},[322,712,217],{"class":700},[322,714,715],{"class":332},"} ",[322,717,718],{"class":328},"=",[322,720,721],{"class":332}," noise\n",[322,723,725,727,729,731,733,735,737,739],{"class":324,"line":724},4,[322,726,694],{"class":328},[322,728,697],{"class":332},[322,730,239],{"class":700},[322,732,171],{"class":332},[322,734,243],{"class":700},[322,736,715],{"class":332},[322,738,718],{"class":328},[322,740,741],{"class":332}," paint\n",[322,743,745],{"class":324,"line":744},5,[322,746,688],{"emptyLinePlaceholder":687},[322,748,750],{"class":324,"line":749},6,[322,751,753],{"class":752},"sAwPA","\u002F\u002F Brushed metal: oriented sine grains (a signed basis) framed on a zoomable plane,\n",[322,755,757],{"class":324,"line":756},7,[322,758,759],{"class":752},"\u002F\u002F converted to 0–1, toned with contrast and balance, and read through the color ramp.\n",[322,761,763,766,769,772,775,779],{"class":324,"line":762},8,[322,764,765],{"class":328},"export",[322,767,768],{"class":328}," const",[322,770,771],{"class":700}," BrushedMetal",[322,773,774],{"class":328}," =",[322,776,778],{"class":777},"svObZ"," defineShader",[322,780,781],{"class":332},"({\n",[322,783,785,788,791],{"class":324,"line":784},9,[322,786,787],{"class":332},"  name: ",[322,789,790],{"class":339},"'BrushedMetal'",[322,792,178],{"class":332},[322,794,796,799,802],{"class":324,"line":795},10,[322,797,798],{"class":332},"  animatedTime: {speed: ",[322,800,801],{"class":339},"'speed'",[322,803,804],{"class":332},"},\n",[322,806,808],{"class":324,"line":807},11,[322,809,810],{"class":332},"  props: {\n",[322,812,814,817,820],{"class":324,"line":813},12,[322,815,816],{"class":332},"    colorA: {default: ",[322,818,819],{"class":339},"'#f4f4f5'",[322,821,822],{"class":332},", transform: transformColor},\n",[322,824,826,829,832],{"class":324,"line":825},13,[322,827,828],{"class":332},"    colorB: {default: ",[322,830,831],{"class":339},"'#27272a'",[322,833,822],{"class":332},[322,835,837,840,843,846,849,852,855],{"class":324,"line":836},14,[322,838,839],{"class":332},"    colorSpace: {default: ",[322,841,842],{"class":339},"'oklab'",[322,844,845],{"class":332},", transform: transformColorSpace, compileTime: ",[322,847,848],{"class":700},"true",[322,850,851],{"class":332},", ui: {type: ",[322,853,854],{"class":339},"'select'",[322,856,857],{"class":332},", options: colorSpaceOptions}},\n",[322,859,861,864,867],{"class":324,"line":860},15,[322,862,863],{"class":332},"    scale: {default: ",[322,865,866],{"class":700},"1.5",[322,868,804],{"class":332},[322,870,872,875,878],{"class":324,"line":871},16,[322,873,874],{"class":332},"    frequency: {default: ",[322,876,877],{"class":700},"8",[322,879,804],{"class":332},[322,881,883,886,889],{"class":324,"line":882},17,[322,884,885],{"class":332},"    seed: {default: ",[322,887,888],{"class":700},"0",[322,890,804],{"class":332},[322,892,894,897,899],{"class":324,"line":893},18,[322,895,896],{"class":332},"    contrast: {default: ",[322,898,888],{"class":700},[322,900,804],{"class":332},[322,902,904,907,909],{"class":324,"line":903},19,[322,905,906],{"class":332},"    balance: {default: ",[322,908,888],{"class":700},[322,910,804],{"class":332},[322,912,914,917,920],{"class":324,"line":913},20,[322,915,916],{"class":332},"    speed: {default: ",[322,918,919],{"class":700},"0.5",[322,921,804],{"class":332},[322,923,925],{"class":324,"line":924},21,[322,926,927],{"class":332},"  },\n",[322,929,931,934,936],{"class":324,"line":930},22,[322,932,933],{"class":332},"  paint: ",[322,935,239],{"class":777},[322,937,938],{"class":332},"(\n",[322,940,942,945],{"class":324,"line":941},23,[322,943,944],{"class":777},"    noiseTone",[322,946,938],{"class":332},[322,948,950,953,956,958,960,962,965,967,969,972,975,977,979,982,985,987,989,992],{"class":324,"line":949},24,[322,951,952],{"class":777},"      seededPlane",[322,954,955],{"class":332},"(",[322,957,231],{"class":777},[322,959,955],{"class":332},[322,961,170],{"class":777},[322,963,964],{"class":332},"({frequency: ",[322,966,156],{"class":777},[322,968,955],{"class":332},[322,970,971],{"class":339},"'frequency'",[322,973,974],{"class":332},")})), {scale: ",[322,976,156],{"class":777},[322,978,955],{"class":332},[322,980,981],{"class":339},"'scale'",[322,983,984],{"class":332},"), seed: ",[322,986,156],{"class":777},[322,988,955],{"class":332},[322,990,991],{"class":339},"'seed'",[322,993,994],{"class":332},")}),\n",[322,996,998,1001,1003,1005,1008,1011,1013,1015,1018],{"class":324,"line":997},25,[322,999,1000],{"class":332},"      {contrast: ",[322,1002,156],{"class":777},[322,1004,955],{"class":332},[322,1006,1007],{"class":339},"'contrast'",[322,1009,1010],{"class":332},"), balance: ",[322,1012,156],{"class":777},[322,1014,955],{"class":332},[322,1016,1017],{"class":339},"'balance'",[322,1019,1020],{"class":332},")},\n",[322,1022,1024],{"class":324,"line":1023},26,[322,1025,1026],{"class":332},"    ),\n",[322,1028,1030,1033,1035,1037,1039,1042],{"class":324,"line":1029},27,[322,1031,1032],{"class":777},"    stops",[322,1034,955],{"class":332},[322,1036,156],{"class":777},[322,1038,955],{"class":332},[322,1040,1041],{"class":339},"'colorSpace'",[322,1043,1044],{"class":332},")),\n",[322,1046,1048],{"class":324,"line":1047},28,[322,1049,1050],{"class":332},"  ),\n",[322,1052,1054],{"class":324,"line":1053},29,[322,1055,1056],{"class":332},"})\n",[342,1058,1060],{"id":1059},"types","Types",[347,1062,1063,1073],{},[350,1064,1065],{},[353,1066,1067,1070],{},[356,1068,1069],{},"Type",[356,1071,1072],{},"What it is",[363,1074,1075,1088,1101,1111],{},[353,1076,1077,1082],{},[368,1078,1079],{},[8,1080,1081],{},"ReliefBasis",[368,1083,1084,1085,1087],{},"A height field ",[8,1086,310],{}," can emboss a layer with.",[353,1089,1090,1095],{},[368,1091,1092],{},[8,1093,1094],{},"RgbStage",[368,1096,1097,1098,1100],{},"A color-only step for ",[8,1099,632],{},": takes a paint's rgb and returns new rgb.",[353,1102,1103,1108],{},[368,1104,1105],{},[8,1106,1107],{},"Wave",[368,1109,1110],{},"One traveling sine wave, written as plain data.",[353,1112,1113,1118],{},[368,1114,1115],{},[8,1116,1117],{},"WaveTerm",[368,1119,1120],{},"One term of a wave schedule: a single wave, or several multiplied together.",[342,1122,1124],{"id":1123},"words","Words",[1126,1127,1129],"primitive-words",{":words":1128},"[{\"name\":\"seededPlane\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fseededplane\",\"summary\":\"Frames a field on a zoomable plane: how big the pattern is and where it starts.\"},{\"name\":\"evolving\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fevolving\",\"summary\":\"Makes a 3D noise basis morph in place over time instead of sliding across the canvas.\"},{\"name\":\"noiseTone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fnoisetone\",\"summary\":\"The standard contrast and balance controls of a noise texture, turning a 0–1 field into the ramp position.\"},{\"name\":\"unitized\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Funitized\",\"summary\":\"Turns a signed field (−1 to 1) into a unit field (0 to 1).\"},{\"name\":\"signedTone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fsignedtone\",\"summary\":\"Contrast and balance for a signed field (−1 to 1), applied before it is squashed to 0–1.\"},{\"name\":\"gainTone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fgaintone\",\"summary\":\"Contrast as a multiplier and balance as a shift over a 0–1 field, not flipped.\"},{\"name\":\"gaborGrains\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fgaborgrains\",\"summary\":\"Oriented sine grains: short striped patches, each facing a random way, like brushed metal or wood grain.\"},{\"name\":\"waveletBands\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fwaveletbands\",\"summary\":\"Rotating bands of wavelets: layered ripples that turn against each other, a watery interference look.\"},{\"name\":\"curlSpeed\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcurlspeed\",\"summary\":\"How fast a swirling flow moves at each point: soft eddies and streams that morph in place.\"},{\"name\":\"erosionRidges\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ferosionridges\",\"summary\":\"Terrain eroded by water: sharp branching ridges with gullies running off them.\"},{\"name\":\"scratchStreaks\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fscratchstreaks\",\"summary\":\"Fine hairline scratches, like a scuffed surface, flickering on the layer's clock.\"},{\"name\":\"pixelGrid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fpixelgrid\",\"summary\":\"Frames a field on the pixel grid: one value per block of `grain` device pixels.\"},{\"name\":\"blueSpeckle\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fbluespeckle\",\"summary\":\"Fine, even speckle with no clumps: blue noise, one random value per pixel block.\"},{\"name\":\"scaledPlane\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fscaledplane\",\"summary\":\"Frames a field on the aspect-corrected canvas plane, zoomed by a plain multiplier.\"},{\"name\":\"linearPair\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Flinearpair\",\"summary\":\"A two-color palette mixed in linear RGB, for a definition with no color-space prop.\"},{\"name\":\"fractalNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ffractalnoise\",\"summary\":\"A complete fractal-noise paint: layered simplex noise that morphs over time, read through the color ramp.\"},{\"name\":\"worleyNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fworleynoise\",\"summary\":\"A complete cellular-noise paint: distances to drifting cell points, read through the color ramp.\"},{\"name\":\"transformWorleyMode\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftransformworleymode\",\"summary\":\"The `transform` for a `worleyNoise` `mode` prop: maps `'f1'`, `'f2'`, `'f2MinusF1'`, `'f1PlusF2'` or `'f1TimesF2'` to the number the paint reads.\"},{\"name\":\"transformWorleyDistance\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftransformworleydistance\",\"summary\":\"The `transform` for a `worleyNoise` `distance` prop: maps `'euclidean'`, `'manhattan'` or `'chebyshev'` to the number the paint reads.\"},{\"name\":\"cellDistances\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcelldistances\",\"summary\":\"Distances from each pixel to its nearest two cell points, as `(d1, d2)`: the raw material for Voronoi fills and borders.\"},{\"name\":\"cellFill\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcellfill\",\"summary\":\"A 0–1 fill for each cell: 0 at the cell's point, 1 at its boundary, whatever the cell size.\"},{\"name\":\"cellBorders\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fcellborders\",\"summary\":\"A mask of the lines between cells: 0 on a boundary, 1 inside a cell.\"},{\"name\":\"borderOverlay\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fborderoverlay\",\"summary\":\"Draws a color over a paint wherever a mask falls to 0, keeping the paint's alpha.\"},{\"name\":\"waves\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fwaves\",\"summary\":\"Overlapping traveling sine waves from a schedule written as data: the organic wobble behind blob edges, water lines and drifting fills.\"},{\"name\":\"wavyLine\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fwavyline\",\"summary\":\"The height of an animated wavy line at a point along it: a stack of traveling sines.\"},{\"name\":\"organicWaves\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Forganicwaves\",\"summary\":\"A ready-made `waves` schedule from three knobs, for when you have no hand-tuned constants.\"},{\"name\":\"ribbons\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fribbons\",\"summary\":\"Flowing gradient-colored ribbons between two points: the Strands look.\"},{\"name\":\"overRgb\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Foverrgb\",\"summary\":\"Runs color-only steps over a paint, in order, leaving its alpha alone.\"},{\"name\":\"backToP3\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fbacktop3\",\"summary\":\"Brings `ribbons` color from its working color space back to display color.\"},{\"name\":\"tonePow\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftonepow\",\"summary\":\"A gentle lift of the mid-tones (rgb to the power 0.85), as an `overRgb` step.\"},{\"name\":\"noiseRelief\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fnoiserelief\",\"summary\":\"Embosses the layer inside with a textured surface: the child is slightly distorted, then lit by a height field so it reads as carved stone or woven cloth.\"},{\"name\":\"reliefBases\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Freliefbases\",\"summary\":\"The height fields `noiseRelief` accepts: `stone` (marbled stone) and `wool` (interwoven fibres).\"},{\"name\":\"reliefBases.stone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Freliefbases-stone\",\"summary\":\"Marbled stone height field.\"},{\"name\":\"reliefBases.wool\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Freliefbases-wool\",\"summary\":\"Interwoven fibrous fabric height field.\"}]",[1130,1131,1132,1140,1147,1154,1161,1168,1175,1182,1189,1196,1203,1210,1221,1228,1237,1244,1251,1258,1294,1318,1329,1336,1343,1350,1357,1364,1374,1381,1388,1398,1408,1415,1433,1442],"ul",{},[1133,1134,1135,1139],"li",{},[165,1136,1137],{"href":196},[8,1138,199],{}," — Frames a field on a zoomable plane: how big the pattern is and where it starts.",[1133,1141,1142,1146],{},[165,1143,1144],{"href":380},[8,1145,383],{}," — Makes a 3D noise basis morph in place over time instead of sliding across the canvas.",[1133,1148,1149,1153],{},[165,1150,1151],{"href":214},[8,1152,217],{}," — The standard contrast and balance controls of a noise texture, turning a 0–1 field into the ramp position.",[1133,1155,1156,1160],{},[165,1157,1158],{"href":228},[8,1159,231],{}," — Turns a signed field (−1 to 1) into a unit field (0 to 1).",[1133,1162,1163,1167],{},[165,1164,1165],{"href":221},[8,1166,224],{}," — Contrast and balance for a signed field (−1 to 1), applied before it is squashed to 0–1.",[1133,1169,1170,1174],{},[165,1171,1172],{"href":568},[8,1173,571],{}," — Contrast as a multiplier and balance as a shift over a 0–1 field, not flipped.",[1133,1176,1177,1181],{},[165,1178,1179],{"href":167},[8,1180,170],{}," — Oriented sine grains: short striped patches, each facing a random way, like brushed metal or wood grain.",[1133,1183,1184,1188],{},[165,1185,1186],{"href":469},[8,1187,472],{}," — Rotating bands of wavelets: layered ripples that turn against each other, a watery interference look.",[1133,1190,1191,1195],{},[165,1192,1193],{"href":174},[8,1194,177],{}," — How fast a swirling flow moves at each point: soft eddies and streams that morph in place.",[1133,1197,1198,1202],{},[165,1199,1200],{"href":501},[8,1201,504],{}," — Terrain eroded by water: sharp branching ridges with gullies running off them.",[1133,1204,1205,1209],{},[165,1206,1207],{"href":529},[8,1208,532],{}," — Fine hairline scratches, like a scuffed surface, flickering on the layer's clock.",[1133,1211,1212,1216,1217,1220],{},[165,1213,1214],{"href":203},[8,1215,206],{}," — Frames a field on the pixel grid: one value per block of ",[8,1218,1219],{},"grain"," device pixels.",[1133,1222,1223,1227],{},[165,1224,1225],{"href":181},[8,1226,184],{}," — Fine, even speckle with no clumps: blue noise, one random value per pixel block.",[1133,1229,1230,1236],{},[165,1231,1233],{"href":1232},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fscaledplane",[8,1234,1235],{},"scaledPlane"," — Frames a field on the aspect-corrected canvas plane, zoomed by a plain multiplier.",[1133,1238,1239,1243],{},[165,1240,1241],{"href":247},[8,1242,250],{}," — A two-color palette mixed in linear RGB, for a definition with no color-space prop.",[1133,1245,1246,1250],{},[165,1247,1248],{"href":276},[8,1249,279],{}," — A complete fractal-noise paint: layered simplex noise that morphs over time, read through the color ramp.",[1133,1252,1253,1257],{},[165,1254,1255],{"href":283},[8,1256,286],{}," — A complete cellular-noise paint: distances to drifting cell points, read through the color ramp.",[1133,1259,1260,1266,1267,1270,1271,1273,1274,1277,1278,171,1281,171,1284,171,1287,259,1290,1293],{},[165,1261,1263],{"href":1262},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftransformworleymode",[8,1264,1265],{},"transformWorleyMode"," — The ",[8,1268,1269],{},"transform"," for a ",[8,1272,286],{}," ",[8,1275,1276],{},"mode"," prop: maps ",[8,1279,1280],{},"'f1'",[8,1282,1283],{},"'f2'",[8,1285,1286],{},"'f2MinusF1'",[8,1288,1289],{},"'f1PlusF2'",[8,1291,1292],{},"'f1TimesF2'"," to the number the paint reads.",[1133,1295,1296,1266,1302,1270,1304,1273,1306,1277,1309,171,1312,259,1315,1293],{},[165,1297,1299],{"href":1298},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftransformworleydistance",[8,1300,1301],{},"transformWorleyDistance",[8,1303,1269],{},[8,1305,286],{},[8,1307,1308],{},"distance",[8,1310,1311],{},"'euclidean'",[8,1313,1314],{},"'manhattan'",[8,1316,1317],{},"'chebyshev'",[1133,1319,1320,1324,1325,1328],{},[165,1321,1322],{"href":422},[8,1323,425],{}," — Distances from each pixel to its nearest two cell points, as ",[8,1326,1327],{},"(d1, d2)",": the raw material for Voronoi fills and borders.",[1133,1330,1331,1335],{},[165,1332,1333],{"href":428},[8,1334,431],{}," — A 0–1 fill for each cell: 0 at the cell's point, 1 at its boundary, whatever the cell size.",[1133,1337,1338,1342],{},[165,1339,1340],{"href":434},[8,1341,437],{}," — A mask of the lines between cells: 0 on a boundary, 1 inside a cell.",[1133,1344,1345,1349],{},[165,1346,1347],{"href":440},[8,1348,443],{}," — Draws a color over a paint wherever a mask falls to 0, keeping the paint's alpha.",[1133,1351,1352,1356],{},[165,1353,1354],{"href":290},[8,1355,293],{}," — Overlapping traveling sine waves from a schedule written as data: the organic wobble behind blob edges, water lines and drifting fills.",[1133,1358,1359,1363],{},[165,1360,1361],{"href":296},[8,1362,299],{}," — The height of an animated wavy line at a point along it: a stack of traveling sines.",[1133,1365,1366,1370,1371,1373],{},[165,1367,1368],{"href":597},[8,1369,600],{}," — A ready-made ",[8,1372,293],{}," schedule from three knobs, for when you have no hand-tuned constants.",[1133,1375,1376,1380],{},[165,1377,1378],{"href":622},[8,1379,625],{}," — Flowing gradient-colored ribbons between two points: the Strands look.",[1133,1382,1383,1387],{},[165,1384,1385],{"href":629},[8,1386,632],{}," — Runs color-only steps over a paint, in order, leaving its alpha alone.",[1133,1389,1390,1394,1395,1397],{},[165,1391,1392],{"href":635},[8,1393,638],{}," — Brings ",[8,1396,625],{}," color from its working color space back to display color.",[1133,1399,1400,1404,1405,1407],{},[165,1401,1402],{"href":641},[8,1403,644],{}," — A gentle lift of the mid-tones (rgb to the power 0.85), as an ",[8,1406,632],{}," step.",[1133,1409,1410,1414],{},[165,1411,1412],{"href":307},[8,1413,310],{}," — Embosses the layer inside with a textured surface: the child is slightly distorted, then lit by a height field so it reads as carved stone or woven cloth.",[1133,1416,1417,1421,1422,1424,1425,1428,1429,1432],{},[165,1418,1419],{"href":658},[8,1420,661],{}," — The height fields ",[8,1423,310],{}," accepts: ",[8,1426,1427],{},"stone"," (marbled stone) and ",[8,1430,1431],{},"wool"," (interwoven fibres).",[1133,1434,1435,1441],{},[165,1436,1438],{"href":1437},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Freliefbases-stone",[8,1439,1440],{},"reliefBases.stone"," — Marbled stone height field.",[1133,1443,1444,1450],{},[165,1445,1447],{"href":1446},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Freliefbases-wool",[8,1448,1449],{},"reliefBases.wool"," — Interwoven fibrous fabric height field.",[1452,1453,1454],"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":318,"searchDepth":684,"depth":684,"links":1456},[1457,1458,1459,1460],{"id":344,"depth":684,"text":345},{"id":664,"depth":684,"text":665},{"id":1059,"depth":684,"text":1060},{"id":1123,"depth":684,"text":1124},"Words for grainy, cloudy, cellular and streaked surfaces: the textures behind clouds, film grain, stone, water and brushed metal.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fnoise.md","md","light","Noise, light & materials",{},"\u002Fdocs\u002Fprimitives\u002Fnoise",{"title":147,"description":1461},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fnoise.ts","docs\u002Fprimitives\u002F12.noise\u002Findex",34,"NUijVy7oLx005bcY3kSJ9D5I-44I07mFaL2FKz4Nurk"]