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