[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fmaterials":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":2284,"categorySlug":2284,"categoryTitle":9,"curated":744,"description":2285,"editUrl":2286,"extension":2287,"group":166,"groupTitle":2288,"kind":9,"meta":2289,"navigation":744,"path":2290,"seo":2291,"sourceUrl":2292,"stem":2293,"wordCount":2294,"__hash__":2295},"primitives\u002Fdocs\u002Fprimitives\u002F14.materials\u002Findex.md","Materials & surfaces",{"type":149,"value":150,"toc":2278},"minimark",[151,155,191,312,319,348,353,719,723,1730,1734,1800,1804,2274],[152,153,147],"h1",{"id":154},"materials-surfaces",[156,157,158,159,163,164,167,168,171,172,179,180,183,184,190],"p",{},"Words that shade a surface so a shape reads as glass, metal, plastic or stone. A material is\nthree things: a ",[160,161,162],"strong",{},"normal"," (which way the surface faces at this pixel), a ",[160,165,166],{},"light"," (where it\ncomes from) and a ",[160,169,170],{},"response"," (how the surface answers: diffuse, glint, mirror, tint).\n",[173,174,176],"a",{"href":175},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fshapedsurface",[8,177,178],{},"shapedSurface"," turns a shape prop into a surface you can shade. It hands your ",[8,181,182],{},"surface","\nfunction a frame with the shape's distance field, and ",[173,185,187],{"href":186},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacefield",[8,188,189],{},"surfaceField"," binds what you read from\nit: the signed distance, the pixel size, the neighbour taps.",[156,192,193,194,200,201,207,208,214,215,221,222,228,229,235,236,235,242,248,249,235,255,261,262,268,269,275,276,282,283,289,290,296,297,301,302,306,307,311],{},"From there a material is a recipe read top to bottom. A normal from ",[173,195,197],{"href":196},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgeometricnormal",[8,198,199],{},"geometricNormal",", bent\nby ",[173,202,204],{"href":203},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fnudgenormal",[8,205,206],{},"nudgeNormal"," or ",[173,209,211],{"href":210},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftiltnormal",[8,212,213],{},"tiltNormal"," for relief. A light from ",[173,216,218],{"href":217},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fkeylightat",[8,219,220],{},"keyLightAt"," (an angle) or\n",[173,223,225],{"href":224},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fpointlightfrom",[8,226,227],{},"pointLightFrom"," (a position). A response from ",[173,230,232],{"href":231},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Flambert",[8,233,234],{},"lambert",", ",[173,237,239],{"href":238},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsharpglint",[8,240,241],{},"sharpGlint",[173,243,245],{"href":244},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fduallobeglint",[8,246,247],{},"dualLobeGlint",",\n",[173,250,252],{"href":251},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fschlickfresnel",[8,253,254],{},"schlickFresnel",[173,256,258],{"href":257},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fbeerlambert",[8,259,260],{},"beerLambert",". A finish from ",[173,263,265],{"href":264},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fneutraltone",[8,266,267],{},"neutralTone"," and ",[173,270,272],{"href":271},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsilhouette",[8,273,274],{},"silhouette",", closed with\n",[173,277,279],{"href":278},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fguarded",[8,280,281],{},"guarded"," around ",[173,284,286],{"href":285},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Finsideshape",[8,287,288],{},"insideShape"," so pixels outside the shape pay nothing. The same words light\nanything with a slope, not only shapes: ",[173,291,293],{"href":292},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ffdslope",[8,294,295],{},"fdSlope"," of a noise field feeds ",[173,298,299],{"href":203},[8,300,206],{},", and\n",[173,303,304],{"href":217},[8,305,220],{}," with ",[173,308,309],{"href":231},[8,310,234],{}," shades it.",[156,313,314,315,318],{},"Two conventions to hold. The viewer looks along +z, so a normal that faces the viewer has\nnegative z and a key light on the viewer's side has a negative elevation (−0.6 raking to\n−0.9 frontal). And a trailing ",[8,316,317],{},"hint"," argument only names a value in the compiled shader for\ndebugging. Leave it out.",[320,321,326],"pre",{"className":322,"code":323,"language":324,"meta":325,"style":325},"language-ts shiki shiki-themes github-dark","import {materials} from 'shaders\u002Fstd'\n","ts","",[8,327,328],{"__ignoreMap":325},[329,330,333,337,341,344],"span",{"class":331,"line":332},"line",1,[329,334,336],{"class":335},"snl16","import",[329,338,340],{"class":339},"s95oV"," {materials} ",[329,342,343],{"class":335},"from",[329,345,347],{"class":346},"sU2Wk"," 'shaders\u002Fstd'\n",[349,350,352],"h2",{"id":351},"reach-for-it-when","Reach for it when",[354,355,356,369],"table",{},[357,358,359],"thead",{},[360,361,362,366],"tr",{},[363,364,365],"th",{},"When you need",[363,367,368],{},"Use",[370,371,372,390,401,423,440,451,475,486,497,508,527,557,586,603,616,635,656,675,700],"tbody",{},[360,373,374,378],{},[375,376,377],"td",{},"a shape prop should become a shaded surface",[375,379,380,384,385,389],{},[173,381,382],{"href":175},[8,383,178],{},", then ",[173,386,387],{"href":186},[8,388,189],{}," as the first line",[360,391,392,395],{},[375,393,394],{},"the surface normal of whatever shape is active",[375,396,397],{},[173,398,399],{"href":196},[8,400,199],{},[360,402,403,406],{},[375,404,405],{},"relief from a height field or noise",[375,407,408,207,412,418,419],{},[173,409,410],{"href":292},[8,411,295],{},[173,413,415],{"href":414},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fperlinslope",[8,416,417],{},"perlinSlope"," into ",[173,420,421],{"href":203},[8,422,206],{},[360,424,425,428],{},[375,426,427],{},"brushed or woven relief along a direction",[375,429,430,306,434],{},[173,431,432],{"href":210},[8,433,213],{},[173,435,437],{"href":436},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgrainnoise",[8,438,439],{},"grainNoise",[360,441,442,445],{},[375,443,444],{},"a light from an angle prop",[375,446,447],{},[173,448,449],{"href":217},[8,450,220],{},[360,452,453,456],{},[375,454,455],{},"a light from a position prop",[375,457,458,418,464,468,469],{},[173,459,461],{"href":460},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fplacementpoint",[8,462,463],{},"placementPoint",[173,465,466],{"href":224},[8,467,227],{},", faded by ",[173,470,472],{"href":471},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Finversesquare",[8,473,474],{},"inverseSquare",[360,476,477,480],{},[375,478,479],{},"soft diffuse shading",[375,481,482],{},[173,483,484],{"href":231},[8,485,234],{},[360,487,488,491],{},[375,489,490],{},"a highlight that follows a sharpness slider",[375,492,493],{},[173,494,495],{"href":238},[8,496,241],{},[360,498,499,502],{},[375,500,501],{},"a highlight with a hot core and a wide halo",[375,503,504],{},[173,505,506],{"href":244},[8,507,247],{},[360,509,510,513],{},[375,511,512],{},"a highlight stretched along a grain",[375,514,515,306,521],{},[173,516,518],{"href":517},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fanisospecular",[8,519,520],{},"anisoSpecular",[173,522,524],{"href":523},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fwardalphas",[8,525,526],{},"wardAlphas",[360,528,529,532],{},[375,530,531],{},"brighter or more mirror-like rims",[375,533,534,235,540,544,545,207,551],{},[173,535,537],{"href":536},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ffresnelboost",[8,538,539],{},"fresnelBoost",[173,541,542],{"href":251},[8,543,254],{}," over ",[173,546,548],{"href":547},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgrazingof",[8,549,550],{},"grazingOf",[173,552,554],{"href":553},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgrazingflat",[8,555,556],{},"grazingFlat",[360,558,559,562],{},[375,560,561],{},"a studio reflection in a metal",[375,563,564,235,570,235,573,579,580],{},[173,565,567],{"href":566},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fviewray",[8,568,569],{},"viewRay",[8,571,572],{},"reflect",[173,574,576],{"href":575},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fstudiosoftboxes",[8,577,578],{},"studioSoftboxes",", smeared by ",[173,581,583],{"href":582},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsmearalong",[8,584,585],{},"smearAlong",[360,587,588,591],{},[375,589,590],{},"glass, ice or water that darkens with thickness",[375,592,593,418,599],{},[173,594,596],{"href":595},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fopticalthickness",[8,597,598],{},"opticalThickness",[173,600,601],{"href":257},[8,602,260],{},[360,604,605,608],{},[375,606,607],{},"a rainbow sheen",[375,609,610],{},[173,611,613],{"href":612},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fcosinerainbow",[8,614,615],{},"cosineRainbow",[360,617,618,621],{},[375,619,620],{},"stars, glitter or dust",[375,622,623,306,629],{},[173,624,626],{"href":625},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fpointstars",[8,627,628],{},"pointStars",[173,630,632],{"href":631},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftwinkle",[8,633,634],{},"twinkle",[360,636,637,640],{},[375,638,639],{},"a soft edge and nothing drawn outside the shape",[375,641,642,646,647,651,652],{},[173,643,644],{"href":271},[8,645,274],{}," inside ",[173,648,649],{"href":278},[8,650,281],{}," on ",[173,653,654],{"href":285},[8,655,288],{},[360,657,658,661],{},[375,659,660],{},"bright light brought back into range",[375,662,663,667,668,674],{},[173,664,665],{"href":264},[8,666,267],{}," for a surface, ",[173,669,671],{"href":670},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fexposuretone",[8,672,673],{},"exposureTone"," for emitted light",[360,676,677,680],{},[375,678,679],{},"film grain or per-pixel jitter",[375,681,682,235,688,235,694],{},[173,683,685],{"href":684},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsensorgrain",[8,686,687],{},"sensorGrain",[173,689,691],{"href":690},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fhashnoise",[8,692,693],{},"hashNoise",[173,695,697],{"href":696},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Finterleavednoise",[8,698,699],{},"interleavedNoise",[360,701,702,705],{},[375,703,704],{},"a rim glow or contact shadow outside the shape",[375,706,707,235,713],{},[173,708,710],{"href":709},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fnearestedge",[8,711,712],{},"nearestEdge",[173,714,716],{"href":715},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fcontinuedfield",[8,717,718],{},"continuedField",[349,720,722],{"id":721},"example","Example",[320,724,726],{"className":322,"code":725,"language":324,"meta":325,"style":325},"import {defineShader, p, uniformOf, paint, frames, materials, compose, math, transformColor, transformColorSpace, colorSpaceOptions} from 'shaders\u002Fstd'\n\nconst {add, mul, dot, vec3, vec4} = math\nconst {noiseField, warped, scaledVolume, tone, pair} = paint\nconst {surfaceOf, direction} = frames\nconst {fdSlope, nudgeNormal, keyLightAt, lambert, dualLobeGlint, neutralTone} = materials\n\n\u002F\u002F One height field drives everything: warped noise on a zoomable slab.\nconst height = scaledVolume(\n  warped(noiseField('mx3'), {amount: p('warp'), amountScale: 4, timeScale: 0.12}),\n  {scale: p('scale')},\n)\n\n\u002F\u002F Silk: the field's slope becomes a normal, a key light shades it, a two-lobe sheen catches the folds.\nexport const SilkTide = defineShader({\n  name: 'SilkTide',\n  animatedTime: {speed: 'speed'},\n  props: {\n    colorA: {default: '#0b1026', transform: transformColor},\n    colorB: {default: '#ff7e5f', transform: transformColor},\n    colorSpace: {default: 'oklch', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},\n    highlight: {default: '#fff3dc', transform: transformColor},\n    scale: {default: 1.8},\n    warp: {default: 0.55},\n    lightAngle: {default: 35},\n    sheen: {default: 1},\n    speed: {default: 1},\n  },\n  paint: (params) => {\n    const {uv} = surfaceOf(params)\n    const u = (name: string) => uniformOf(p(name), params)\n\n    \u002F\u002F 1 · the field and its slope: three taps of the noise, bound once\n    const relief = fdSlope((at) => height(params, at), uv, 0.0035, 'tide')\n\n    \u002F\u002F 2 · color: tone-shape the field and read it through the two-color palette\n    const shaped = tone(() => relief.value, {glow: 5, contrast: 1.3, balance: 50, invert: true})(params, uv)\n    const base = pair(p('colorA'), p('colorB'), p('colorSpace'))(shaped, params)\n\n    \u002F\u002F 3 · light: slope → normal → key light → a wrapped diffuse and a sheen\n    const tilt = mul(u('sheen'), -0.08)\n    const n = nudgeNormal(vec3(0, 0, -1), mul(relief.dx, tilt), mul(relief.dy, tilt), 'tideN')\n    const key = keyLightAt(direction(u('lightAngle'), 'tideDir'), -0.7, 'tideKey')\n    const diffuse = add(0.55, mul(0.45, lambert(n, key.member('L'), {wrap: 0.5})))\n    const spec = dualLobeGlint(dot(n, key.member('H')), {core: [140, 1], halo: [22, 0.15], gain: u('sheen')})\n\n    const rgb = neutralTone(add(mul(base.member('rgb'), diffuse), mul(u('highlight').member('rgb'), spec)))\n    return compose.dithered(vec4(rgb, base.member('a')), params)\n  },\n})\n",[8,727,728,739,746,788,825,847,883,888,895,913,954,970,976,981,987,1007,1018,1030,1036,1048,1059,1083,1094,1105,1116,1127,1138,1148,1154,1176,1197,1233,1238,1244,1282,1287,1293,1337,1381,1386,1392,1425,1474,1519,1569,1628,1633,1690,1719,1724],{"__ignoreMap":325},[329,729,730,732,735,737],{"class":331,"line":332},[329,731,336],{"class":335},[329,733,734],{"class":339}," {defineShader, p, uniformOf, paint, frames, materials, compose, math, transformColor, transformColorSpace, colorSpaceOptions} ",[329,736,343],{"class":335},[329,738,347],{"class":346},[329,740,742],{"class":331,"line":741},2,[329,743,745],{"emptyLinePlaceholder":744},true,"\n",[329,747,749,752,755,759,761,764,766,769,771,774,776,779,782,785],{"class":331,"line":748},3,[329,750,751],{"class":335},"const",[329,753,754],{"class":339}," {",[329,756,758],{"class":757},"sDLfK","add",[329,760,235],{"class":339},[329,762,763],{"class":757},"mul",[329,765,235],{"class":339},[329,767,768],{"class":757},"dot",[329,770,235],{"class":339},[329,772,773],{"class":757},"vec3",[329,775,235],{"class":339},[329,777,778],{"class":757},"vec4",[329,780,781],{"class":339},"} ",[329,783,784],{"class":335},"=",[329,786,787],{"class":339}," math\n",[329,789,791,793,795,798,800,803,805,808,810,813,815,818,820,822],{"class":331,"line":790},4,[329,792,751],{"class":335},[329,794,754],{"class":339},[329,796,797],{"class":757},"noiseField",[329,799,235],{"class":339},[329,801,802],{"class":757},"warped",[329,804,235],{"class":339},[329,806,807],{"class":757},"scaledVolume",[329,809,235],{"class":339},[329,811,812],{"class":757},"tone",[329,814,235],{"class":339},[329,816,817],{"class":757},"pair",[329,819,781],{"class":339},[329,821,784],{"class":335},[329,823,824],{"class":339}," paint\n",[329,826,828,830,832,835,837,840,842,844],{"class":331,"line":827},5,[329,829,751],{"class":335},[329,831,754],{"class":339},[329,833,834],{"class":757},"surfaceOf",[329,836,235],{"class":339},[329,838,839],{"class":757},"direction",[329,841,781],{"class":339},[329,843,784],{"class":335},[329,845,846],{"class":339}," frames\n",[329,848,850,852,854,856,858,860,862,864,866,868,870,872,874,876,878,880],{"class":331,"line":849},6,[329,851,751],{"class":335},[329,853,754],{"class":339},[329,855,295],{"class":757},[329,857,235],{"class":339},[329,859,206],{"class":757},[329,861,235],{"class":339},[329,863,220],{"class":757},[329,865,235],{"class":339},[329,867,234],{"class":757},[329,869,235],{"class":339},[329,871,247],{"class":757},[329,873,235],{"class":339},[329,875,267],{"class":757},[329,877,781],{"class":339},[329,879,784],{"class":335},[329,881,882],{"class":339}," materials\n",[329,884,886],{"class":331,"line":885},7,[329,887,745],{"emptyLinePlaceholder":744},[329,889,891],{"class":331,"line":890},8,[329,892,894],{"class":893},"sAwPA","\u002F\u002F One height field drives everything: warped noise on a zoomable slab.\n",[329,896,898,900,903,906,910],{"class":331,"line":897},9,[329,899,751],{"class":335},[329,901,902],{"class":757}," height",[329,904,905],{"class":335}," =",[329,907,909],{"class":908},"svObZ"," scaledVolume",[329,911,912],{"class":339},"(\n",[329,914,916,919,922,924,926,929,932,934,936,939,942,945,948,951],{"class":331,"line":915},10,[329,917,918],{"class":908},"  warped",[329,920,921],{"class":339},"(",[329,923,797],{"class":908},[329,925,921],{"class":339},[329,927,928],{"class":346},"'mx3'",[329,930,931],{"class":339},"), {amount: ",[329,933,156],{"class":908},[329,935,921],{"class":339},[329,937,938],{"class":346},"'warp'",[329,940,941],{"class":339},"), amountScale: ",[329,943,944],{"class":757},"4",[329,946,947],{"class":339},", timeScale: ",[329,949,950],{"class":757},"0.12",[329,952,953],{"class":339},"}),\n",[329,955,957,960,962,964,967],{"class":331,"line":956},11,[329,958,959],{"class":339},"  {scale: ",[329,961,156],{"class":908},[329,963,921],{"class":339},[329,965,966],{"class":346},"'scale'",[329,968,969],{"class":339},")},\n",[329,971,973],{"class":331,"line":972},12,[329,974,975],{"class":339},")\n",[329,977,979],{"class":331,"line":978},13,[329,980,745],{"emptyLinePlaceholder":744},[329,982,984],{"class":331,"line":983},14,[329,985,986],{"class":893},"\u002F\u002F Silk: the field's slope becomes a normal, a key light shades it, a two-lobe sheen catches the folds.\n",[329,988,990,993,996,999,1001,1004],{"class":331,"line":989},15,[329,991,992],{"class":335},"export",[329,994,995],{"class":335}," const",[329,997,998],{"class":757}," SilkTide",[329,1000,905],{"class":335},[329,1002,1003],{"class":908}," defineShader",[329,1005,1006],{"class":339},"({\n",[329,1008,1010,1013,1016],{"class":331,"line":1009},16,[329,1011,1012],{"class":339},"  name: ",[329,1014,1015],{"class":346},"'SilkTide'",[329,1017,248],{"class":339},[329,1019,1021,1024,1027],{"class":331,"line":1020},17,[329,1022,1023],{"class":339},"  animatedTime: {speed: ",[329,1025,1026],{"class":346},"'speed'",[329,1028,1029],{"class":339},"},\n",[329,1031,1033],{"class":331,"line":1032},18,[329,1034,1035],{"class":339},"  props: {\n",[329,1037,1039,1042,1045],{"class":331,"line":1038},19,[329,1040,1041],{"class":339},"    colorA: {default: ",[329,1043,1044],{"class":346},"'#0b1026'",[329,1046,1047],{"class":339},", transform: transformColor},\n",[329,1049,1051,1054,1057],{"class":331,"line":1050},20,[329,1052,1053],{"class":339},"    colorB: {default: ",[329,1055,1056],{"class":346},"'#ff7e5f'",[329,1058,1047],{"class":339},[329,1060,1062,1065,1068,1071,1074,1077,1080],{"class":331,"line":1061},21,[329,1063,1064],{"class":339},"    colorSpace: {default: ",[329,1066,1067],{"class":346},"'oklch'",[329,1069,1070],{"class":339},", transform: transformColorSpace, compileTime: ",[329,1072,1073],{"class":757},"true",[329,1075,1076],{"class":339},", ui: {type: ",[329,1078,1079],{"class":346},"'select'",[329,1081,1082],{"class":339},", options: colorSpaceOptions}},\n",[329,1084,1086,1089,1092],{"class":331,"line":1085},22,[329,1087,1088],{"class":339},"    highlight: {default: ",[329,1090,1091],{"class":346},"'#fff3dc'",[329,1093,1047],{"class":339},[329,1095,1097,1100,1103],{"class":331,"line":1096},23,[329,1098,1099],{"class":339},"    scale: {default: ",[329,1101,1102],{"class":757},"1.8",[329,1104,1029],{"class":339},[329,1106,1108,1111,1114],{"class":331,"line":1107},24,[329,1109,1110],{"class":339},"    warp: {default: ",[329,1112,1113],{"class":757},"0.55",[329,1115,1029],{"class":339},[329,1117,1119,1122,1125],{"class":331,"line":1118},25,[329,1120,1121],{"class":339},"    lightAngle: {default: ",[329,1123,1124],{"class":757},"35",[329,1126,1029],{"class":339},[329,1128,1130,1133,1136],{"class":331,"line":1129},26,[329,1131,1132],{"class":339},"    sheen: {default: ",[329,1134,1135],{"class":757},"1",[329,1137,1029],{"class":339},[329,1139,1141,1144,1146],{"class":331,"line":1140},27,[329,1142,1143],{"class":339},"    speed: {default: ",[329,1145,1135],{"class":757},[329,1147,1029],{"class":339},[329,1149,1151],{"class":331,"line":1150},28,[329,1152,1153],{"class":339},"  },\n",[329,1155,1157,1160,1163,1167,1170,1173],{"class":331,"line":1156},29,[329,1158,1159],{"class":908},"  paint",[329,1161,1162],{"class":339},": (",[329,1164,1166],{"class":1165},"s9osk","params",[329,1168,1169],{"class":339},") ",[329,1171,1172],{"class":335},"=>",[329,1174,1175],{"class":339}," {\n",[329,1177,1179,1182,1184,1187,1189,1191,1194],{"class":331,"line":1178},30,[329,1180,1181],{"class":335},"    const",[329,1183,754],{"class":339},[329,1185,1186],{"class":757},"uv",[329,1188,781],{"class":339},[329,1190,784],{"class":335},[329,1192,1193],{"class":908}," surfaceOf",[329,1195,1196],{"class":339},"(params)\n",[329,1198,1200,1202,1205,1207,1210,1213,1216,1219,1221,1223,1226,1228,1230],{"class":331,"line":1199},31,[329,1201,1181],{"class":335},[329,1203,1204],{"class":908}," u",[329,1206,905],{"class":335},[329,1208,1209],{"class":339}," (",[329,1211,1212],{"class":1165},"name",[329,1214,1215],{"class":335},":",[329,1217,1218],{"class":757}," string",[329,1220,1169],{"class":339},[329,1222,1172],{"class":335},[329,1224,1225],{"class":908}," uniformOf",[329,1227,921],{"class":339},[329,1229,156],{"class":908},[329,1231,1232],{"class":339},"(name), params)\n",[329,1234,1236],{"class":331,"line":1235},32,[329,1237,745],{"emptyLinePlaceholder":744},[329,1239,1241],{"class":331,"line":1240},33,[329,1242,1243],{"class":893},"    \u002F\u002F 1 · the field and its slope: three taps of the noise, bound once\n",[329,1245,1247,1249,1252,1254,1257,1260,1263,1265,1267,1269,1272,1275,1277,1280],{"class":331,"line":1246},34,[329,1248,1181],{"class":335},[329,1250,1251],{"class":757}," relief",[329,1253,905],{"class":335},[329,1255,1256],{"class":908}," fdSlope",[329,1258,1259],{"class":339},"((",[329,1261,1262],{"class":1165},"at",[329,1264,1169],{"class":339},[329,1266,1172],{"class":335},[329,1268,902],{"class":908},[329,1270,1271],{"class":339},"(params, at), uv, ",[329,1273,1274],{"class":757},"0.0035",[329,1276,235],{"class":339},[329,1278,1279],{"class":346},"'tide'",[329,1281,975],{"class":339},[329,1283,1285],{"class":331,"line":1284},35,[329,1286,745],{"emptyLinePlaceholder":744},[329,1288,1290],{"class":331,"line":1289},36,[329,1291,1292],{"class":893},"    \u002F\u002F 2 · color: tone-shape the field and read it through the two-color palette\n",[329,1294,1296,1298,1301,1303,1306,1309,1311,1314,1317,1320,1323,1326,1329,1332,1334],{"class":331,"line":1295},37,[329,1297,1181],{"class":335},[329,1299,1300],{"class":757}," shaped",[329,1302,905],{"class":335},[329,1304,1305],{"class":908}," tone",[329,1307,1308],{"class":339},"(() ",[329,1310,1172],{"class":335},[329,1312,1313],{"class":339}," relief.value, {glow: ",[329,1315,1316],{"class":757},"5",[329,1318,1319],{"class":339},", contrast: ",[329,1321,1322],{"class":757},"1.3",[329,1324,1325],{"class":339},", balance: ",[329,1327,1328],{"class":757},"50",[329,1330,1331],{"class":339},", invert: ",[329,1333,1073],{"class":757},[329,1335,1336],{"class":339},"})(params, uv)\n",[329,1338,1340,1342,1345,1347,1350,1352,1354,1356,1359,1362,1364,1366,1369,1371,1373,1375,1378],{"class":331,"line":1339},38,[329,1341,1181],{"class":335},[329,1343,1344],{"class":757}," base",[329,1346,905],{"class":335},[329,1348,1349],{"class":908}," pair",[329,1351,921],{"class":339},[329,1353,156],{"class":908},[329,1355,921],{"class":339},[329,1357,1358],{"class":346},"'colorA'",[329,1360,1361],{"class":339},"), ",[329,1363,156],{"class":908},[329,1365,921],{"class":339},[329,1367,1368],{"class":346},"'colorB'",[329,1370,1361],{"class":339},[329,1372,156],{"class":908},[329,1374,921],{"class":339},[329,1376,1377],{"class":346},"'colorSpace'",[329,1379,1380],{"class":339},"))(shaped, params)\n",[329,1382,1384],{"class":331,"line":1383},39,[329,1385,745],{"emptyLinePlaceholder":744},[329,1387,1389],{"class":331,"line":1388},40,[329,1390,1391],{"class":893},"    \u002F\u002F 3 · light: slope → normal → key light → a wrapped diffuse and a sheen\n",[329,1393,1395,1397,1400,1402,1405,1407,1410,1412,1415,1417,1420,1423],{"class":331,"line":1394},41,[329,1396,1181],{"class":335},[329,1398,1399],{"class":757}," tilt",[329,1401,905],{"class":335},[329,1403,1404],{"class":908}," mul",[329,1406,921],{"class":339},[329,1408,1409],{"class":908},"u",[329,1411,921],{"class":339},[329,1413,1414],{"class":346},"'sheen'",[329,1416,1361],{"class":339},[329,1418,1419],{"class":335},"-",[329,1421,1422],{"class":757},"0.08",[329,1424,975],{"class":339},[329,1426,1428,1430,1433,1435,1438,1440,1442,1444,1447,1449,1451,1453,1455,1457,1459,1461,1464,1466,1469,1472],{"class":331,"line":1427},42,[329,1429,1181],{"class":335},[329,1431,1432],{"class":757}," n",[329,1434,905],{"class":335},[329,1436,1437],{"class":908}," nudgeNormal",[329,1439,921],{"class":339},[329,1441,773],{"class":908},[329,1443,921],{"class":339},[329,1445,1446],{"class":757},"0",[329,1448,235],{"class":339},[329,1450,1446],{"class":757},[329,1452,235],{"class":339},[329,1454,1419],{"class":335},[329,1456,1135],{"class":757},[329,1458,1361],{"class":339},[329,1460,763],{"class":908},[329,1462,1463],{"class":339},"(relief.dx, tilt), ",[329,1465,763],{"class":908},[329,1467,1468],{"class":339},"(relief.dy, tilt), ",[329,1470,1471],{"class":346},"'tideN'",[329,1473,975],{"class":339},[329,1475,1477,1479,1482,1484,1487,1489,1491,1493,1495,1497,1500,1502,1505,1507,1509,1512,1514,1517],{"class":331,"line":1476},43,[329,1478,1181],{"class":335},[329,1480,1481],{"class":757}," key",[329,1483,905],{"class":335},[329,1485,1486],{"class":908}," keyLightAt",[329,1488,921],{"class":339},[329,1490,839],{"class":908},[329,1492,921],{"class":339},[329,1494,1409],{"class":908},[329,1496,921],{"class":339},[329,1498,1499],{"class":346},"'lightAngle'",[329,1501,1361],{"class":339},[329,1503,1504],{"class":346},"'tideDir'",[329,1506,1361],{"class":339},[329,1508,1419],{"class":335},[329,1510,1511],{"class":757},"0.7",[329,1513,235],{"class":339},[329,1515,1516],{"class":346},"'tideKey'",[329,1518,975],{"class":339},[329,1520,1522,1524,1527,1529,1532,1534,1536,1538,1540,1542,1545,1547,1549,1552,1555,1557,1560,1563,1566],{"class":331,"line":1521},44,[329,1523,1181],{"class":335},[329,1525,1526],{"class":757}," diffuse",[329,1528,905],{"class":335},[329,1530,1531],{"class":908}," add",[329,1533,921],{"class":339},[329,1535,1113],{"class":757},[329,1537,235],{"class":339},[329,1539,763],{"class":908},[329,1541,921],{"class":339},[329,1543,1544],{"class":757},"0.45",[329,1546,235],{"class":339},[329,1548,234],{"class":908},[329,1550,1551],{"class":339},"(n, key.",[329,1553,1554],{"class":908},"member",[329,1556,921],{"class":339},[329,1558,1559],{"class":346},"'L'",[329,1561,1562],{"class":339},"), {wrap: ",[329,1564,1565],{"class":757},"0.5",[329,1567,1568],{"class":339},"})))\n",[329,1570,1572,1574,1577,1579,1582,1584,1586,1588,1590,1592,1595,1598,1601,1603,1605,1608,1611,1613,1616,1619,1621,1623,1625],{"class":331,"line":1571},45,[329,1573,1181],{"class":335},[329,1575,1576],{"class":757}," spec",[329,1578,905],{"class":335},[329,1580,1581],{"class":908}," dualLobeGlint",[329,1583,921],{"class":339},[329,1585,768],{"class":908},[329,1587,1551],{"class":339},[329,1589,1554],{"class":908},[329,1591,921],{"class":339},[329,1593,1594],{"class":346},"'H'",[329,1596,1597],{"class":339},")), {core: [",[329,1599,1600],{"class":757},"140",[329,1602,235],{"class":339},[329,1604,1135],{"class":757},[329,1606,1607],{"class":339},"], halo: [",[329,1609,1610],{"class":757},"22",[329,1612,235],{"class":339},[329,1614,1615],{"class":757},"0.15",[329,1617,1618],{"class":339},"], gain: ",[329,1620,1409],{"class":908},[329,1622,921],{"class":339},[329,1624,1414],{"class":346},[329,1626,1627],{"class":339},")})\n",[329,1629,1631],{"class":331,"line":1630},46,[329,1632,745],{"emptyLinePlaceholder":744},[329,1634,1636,1638,1641,1643,1646,1648,1650,1652,1654,1657,1659,1661,1664,1667,1669,1671,1673,1675,1678,1681,1683,1685,1687],{"class":331,"line":1635},47,[329,1637,1181],{"class":335},[329,1639,1640],{"class":757}," rgb",[329,1642,905],{"class":335},[329,1644,1645],{"class":908}," neutralTone",[329,1647,921],{"class":339},[329,1649,758],{"class":908},[329,1651,921],{"class":339},[329,1653,763],{"class":908},[329,1655,1656],{"class":339},"(base.",[329,1658,1554],{"class":908},[329,1660,921],{"class":339},[329,1662,1663],{"class":346},"'rgb'",[329,1665,1666],{"class":339},"), diffuse), ",[329,1668,763],{"class":908},[329,1670,921],{"class":339},[329,1672,1409],{"class":908},[329,1674,921],{"class":339},[329,1676,1677],{"class":346},"'highlight'",[329,1679,1680],{"class":339},").",[329,1682,1554],{"class":908},[329,1684,921],{"class":339},[329,1686,1663],{"class":346},[329,1688,1689],{"class":339},"), spec)))\n",[329,1691,1693,1696,1699,1702,1704,1706,1709,1711,1713,1716],{"class":331,"line":1692},48,[329,1694,1695],{"class":335},"    return",[329,1697,1698],{"class":339}," compose.",[329,1700,1701],{"class":908},"dithered",[329,1703,921],{"class":339},[329,1705,778],{"class":908},[329,1707,1708],{"class":339},"(rgb, base.",[329,1710,1554],{"class":908},[329,1712,921],{"class":339},[329,1714,1715],{"class":346},"'a'",[329,1717,1718],{"class":339},")), params)\n",[329,1720,1722],{"class":331,"line":1721},49,[329,1723,1153],{"class":339},[329,1725,1727],{"class":331,"line":1726},50,[329,1728,1729],{"class":339},"})\n",[349,1731,1733],{"id":1732},"types","Types",[354,1735,1736,1746],{},[357,1737,1738],{},[360,1739,1740,1743],{},[363,1741,1742],{},"Type",[363,1744,1745],{},"What it is",[370,1747,1748,1761,1774,1784],{},[360,1749,1750,1755],{},[375,1751,1752],{},[8,1753,1754],{},"ShapedSurfaceEffect",[375,1756,1757,1758,1760],{},"The three fields ",[8,1759,178],{}," returns.",[360,1762,1763,1768],{},[375,1764,1765],{},[8,1766,1767],{},"ShapedSurfaceSpec",[375,1769,1770,1771,1773],{},"The options ",[8,1772,178],{}," takes.",[360,1775,1776,1781],{},[375,1777,1778],{},[8,1779,1780],{},"SurfaceField",[375,1782,1783],{},"The field values a material reads, bound once: the taps, the signed distance and the pixel size.",[360,1785,1786,1791],{},[375,1787,1788],{},[8,1789,1790],{},"SurfaceFrame",[375,1792,1793,1794,1796,1797,1799],{},"What ",[8,1795,178],{}," hands your ",[8,1798,182],{}," function: the shape's distance field, sampled and ready to shade.",[349,1801,1803],{"id":1802},"words","Words",[1805,1806,1808],"primitive-words",{":words":1807},"[{\"name\":\"shapedSurface\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fshapedsurface\",\"summary\":\"Turns a shape prop into a surface your material shades.\"},{\"name\":\"surfaceField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacefield\",\"summary\":\"The first line of a material: the field taps, the signed distance and the pixel size, bound once.\"},{\"name\":\"geometricNormal\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgeometricnormal\",\"summary\":\"The surface normal of the shape, whichever kind of shape is active.\"},{\"name\":\"marchedNormal\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fmarchednormal\",\"summary\":\"The surface normal of a 3D shape, from the marched depth.\"},{\"name\":\"nudgeNormal\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fnudgenormal\",\"summary\":\"Tilts a normal by a slope in x and y, turning a height field into relief.\"},{\"name\":\"tiltNormal\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftiltnormal\",\"summary\":\"Tilts a normal along and across a direction, for brushed or woven relief.\"},{\"name\":\"tiltAlong\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftiltalong\",\"summary\":\"Tilts a normal along one 2D direction by a slope amount.\"},{\"name\":\"fdSlope\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ffdslope\",\"summary\":\"The value and slope of any field at a point: `value`, `dx` and `dy`.\"},{\"name\":\"perlinSlope\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fperlinslope\",\"summary\":\"The slope of smooth noise at a point, for wavy or molten relief.\"},{\"name\":\"fieldSlope\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ffieldslope\",\"summary\":\"The direction the shape's distance grows in: a 2D vector pointing outward at this pixel.\"},{\"name\":\"surfacePattern\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacepattern\",\"summary\":\"Coordinates for a pattern that sticks to the shape's surface.\"},{\"name\":\"keyLightAt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fkeylightat\",\"summary\":\"A key light from an angle: the light direction `.L` and the half vector `.H` for highlights.\"},{\"name\":\"keyLightXY\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fkeylightxy\",\"summary\":\"A key light from explicit x and y components, for a second or a crossed light.\"},{\"name\":\"lightVec3\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Flightvec3\",\"summary\":\"A 3D light direction from a `direction()` vector and an elevation.\"},{\"name\":\"placementPoint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fplacementpoint\",\"summary\":\"A position prop in the shape's own coordinates, so you can compare it with the field.\"},{\"name\":\"pointLightFrom\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fpointlightfrom\",\"summary\":\"A point light as seen from a point on the shape: the 3D light vector `L`, the 2D direction `toLight` and the `distance`.\"},{\"name\":\"inverseSquare\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Finversesquare\",\"summary\":\"How a point light fades with distance: 1 at the source, half at `range`.\"},{\"name\":\"lambert\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Flambert\",\"summary\":\"How much a light falls on a surface: 0 facing away, 1 facing it.\"},{\"name\":\"sharpGlint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsharpglint\",\"summary\":\"A highlight whose tightness follows a sharpness slider.\"},{\"name\":\"dualLobeGlint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fduallobeglint\",\"summary\":\"A highlight with a tight hot core and a wide dim halo.\"},{\"name\":\"anisoSpecular\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fanisospecular\",\"summary\":\"A highlight stretched along a grain, as on brushed metal or carbon fibre.\"},{\"name\":\"wardAlphas\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fwardalphas\",\"summary\":\"Turns roughness and anisotropy sliders (0–1 each) into the two lobe widths `anisoSpecular` takes.\"},{\"name\":\"viewRay\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fviewray\",\"summary\":\"The direction the viewer looks along at this pixel, for reflections that sweep across a face.\"},{\"name\":\"grazingOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgrazingof\",\"summary\":\"How edge-on the surface is to the viewer: 0 face-on, 1 grazing.\"},{\"name\":\"grazingFlat\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgrazingflat\",\"summary\":\"How edge-on the surface is to a straight-on viewer: 0 face-on, 1 grazing.\"},{\"name\":\"fresnelBoost\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ffresnelboost\",\"summary\":\"A multiplier that brightens grazing edges: 1 face-on, up to `1 + amount` at the rim.\"},{\"name\":\"schlickFresnel\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fschlickfresnel\",\"summary\":\"How mirror-like a surface is at this pixel: `r0` face-on, rising to `r0 + gain` at the rim.\"},{\"name\":\"studioSoftboxes\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fstudiosoftboxes\",\"summary\":\"The brightness of a five-light studio seen in a reflected direction.\"},{\"name\":\"smearAlong\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsmearalong\",\"summary\":\"Blurs any 2D lookup along a direction, for streaked reflections and motion smear.\"},{\"name\":\"opticalThickness\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fopticalthickness\",\"summary\":\"How much material the view passes through at this pixel: 0 at the edge, up to about 1.2 deep inside.\"},{\"name\":\"beerLambert\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fbeerlambert\",\"summary\":\"How much light survives a thickness of tinted material, per channel.\"},{\"name\":\"cosineRainbow\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fcosinerainbow\",\"summary\":\"A smooth rainbow color from a value that wraps every 1.\"},{\"name\":\"tintRamp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftintramp\",\"summary\":\"Maps a lighting value (0 dark, 1 light) onto two colors.\"},{\"name\":\"neutralTone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fneutraltone\",\"summary\":\"Compresses bright color back into range without shifting its hue.\"},{\"name\":\"exposureTone\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fexposuretone\",\"summary\":\"Turns light that piles past 1 into a soft burn toward white, like film.\"},{\"name\":\"silhouette\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsilhouette\",\"summary\":\"The shape's coverage at this pixel: 1 inside, 0 outside, soft across the edge.\"},{\"name\":\"insideShape\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Finsideshape\",\"summary\":\"True inside the shape and up to two pixels outside it.\"},{\"name\":\"guarded\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fguarded\",\"summary\":\"Evaluates an expression only where a condition holds, and a cheap fallback everywhere else.\"},{\"name\":\"surfaceNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacenoise\",\"summary\":\"Smooth signed noise at a 2D point, roughly −1 to 1, with features about one unit wide.\"},{\"name\":\"surfaceNoiseAt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacenoiseat\",\"summary\":\"`surfaceNoise` at a 2D point you already hold.\"},{\"name\":\"volumeNoiseAt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fvolumenoiseat\",\"summary\":\"Smooth signed noise at a 3D point, roughly −1 to 1.\"},{\"name\":\"cellNoiseAt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fcellnoiseat\",\"summary\":\"Cellular noise at a 2D point: 0 at each cell's seed point, rising toward the cell walls.\"},{\"name\":\"valueNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fvaluenoise\",\"summary\":\"Smooth noise 0–1 at a 2D point, softer and blockier than `surfaceNoise`.\"},{\"name\":\"hashNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fhashnoise\",\"summary\":\"Random 0–1 per point, with no smoothness between neighbours.\"},{\"name\":\"interleavedNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Finterleavednoise\",\"summary\":\"A 0–1 dither pattern over device pixels where neighbours differ as much as possible.\"},{\"name\":\"grainNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgrainnoise\",\"summary\":\"One octave of smooth signed noise along and across a direction, for grain.\"},{\"name\":\"flowWarp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fflowwarp\",\"summary\":\"A slowly folding 2D offset to add to pattern coordinates, for molten or wind-blown motion.\"},{\"name\":\"sensorGrain\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsensorgrain\",\"summary\":\"Adds a fine per-pixel brightness jitter, so rendered light reads as photographed.\"},{\"name\":\"pointStars\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fpointstars\",\"summary\":\"A plane of sparse glinting points: stars, glitter, dust.\"},{\"name\":\"twinkle\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftwinkle\",\"summary\":\"A brightness factor that shimmers over time, different for each element.\"},{\"name\":\"shellRefract\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fshellrefract\",\"summary\":\"Coordinates for what sits inside a glass shell, bent where the shell curves.\"},{\"name\":\"rotationSensor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Frotationsensor\",\"summary\":\"How far a 3D shape has rotated, as a 2D pan you can move content by.\"},{\"name\":\"nearestEdge\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fnearestedge\",\"summary\":\"The closest point on the shape's edge to this pixel, and the outward normal there.\"},{\"name\":\"continuedField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fcontinuedfield\",\"summary\":\"The distance field extended past the edge of an SVG shape's texture.\"}]",[1809,1810,1811,1819,1826,1833,1842,1849,1856,1865,1882,1889,1898,1907,1922,1931,1944,1951,1969,1979,1986,1993,2000,2007,2016,2023,2030,2037,2048,2062,2069,2076,2083,2090,2097,2106,2113,2120,2127,2134,2141,2150,2162,2171,2180,2191,2198,2205,2212,2221,2228,2235,2242,2251,2260,2267],"ul",{},[1812,1813,1814,1818],"li",{},[173,1815,1816],{"href":175},[8,1817,178],{}," — Turns a shape prop into a surface your material shades.",[1812,1820,1821,1825],{},[173,1822,1823],{"href":186},[8,1824,189],{}," — The first line of a material: the field taps, the signed distance and the pixel size, bound once.",[1812,1827,1828,1832],{},[173,1829,1830],{"href":196},[8,1831,199],{}," — The surface normal of the shape, whichever kind of shape is active.",[1812,1834,1835,1841],{},[173,1836,1838],{"href":1837},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fmarchednormal",[8,1839,1840],{},"marchedNormal"," — The surface normal of a 3D shape, from the marched depth.",[1812,1843,1844,1848],{},[173,1845,1846],{"href":203},[8,1847,206],{}," — Tilts a normal by a slope in x and y, turning a height field into relief.",[1812,1850,1851,1855],{},[173,1852,1853],{"href":210},[8,1854,213],{}," — Tilts a normal along and across a direction, for brushed or woven relief.",[1812,1857,1858,1864],{},[173,1859,1861],{"href":1860},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftiltalong",[8,1862,1863],{},"tiltAlong"," — Tilts a normal along one 2D direction by a slope amount.",[1812,1866,1867,1871,1872,235,1875,268,1878,1881],{},[173,1868,1869],{"href":292},[8,1870,295],{}," — The value and slope of any field at a point: ",[8,1873,1874],{},"value",[8,1876,1877],{},"dx",[8,1879,1880],{},"dy",".",[1812,1883,1884,1888],{},[173,1885,1886],{"href":414},[8,1887,417],{}," — The slope of smooth noise at a point, for wavy or molten relief.",[1812,1890,1891,1897],{},[173,1892,1894],{"href":1893},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ffieldslope",[8,1895,1896],{},"fieldSlope"," — The direction the shape's distance grows in: a 2D vector pointing outward at this pixel.",[1812,1899,1900,1906],{},[173,1901,1903],{"href":1902},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacepattern",[8,1904,1905],{},"surfacePattern"," — Coordinates for a pattern that sticks to the shape's surface.",[1812,1908,1909,1913,1914,1917,1918,1921],{},[173,1910,1911],{"href":217},[8,1912,220],{}," — A key light from an angle: the light direction ",[8,1915,1916],{},".L"," and the half vector ",[8,1919,1920],{},".H"," for highlights.",[1812,1923,1924,1930],{},[173,1925,1927],{"href":1926},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fkeylightxy",[8,1928,1929],{},"keyLightXY"," — A key light from explicit x and y components, for a second or a crossed light.",[1812,1932,1933,1939,1940,1943],{},[173,1934,1936],{"href":1935},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Flightvec3",[8,1937,1938],{},"lightVec3"," — A 3D light direction from a ",[8,1941,1942],{},"direction()"," vector and an elevation.",[1812,1945,1946,1950],{},[173,1947,1948],{"href":460},[8,1949,463],{}," — A position prop in the shape's own coordinates, so you can compare it with the field.",[1812,1952,1953,1957,1958,1961,1962,1965,1966,1881],{},[173,1954,1955],{"href":224},[8,1956,227],{}," — A point light as seen from a point on the shape: the 3D light vector ",[8,1959,1960],{},"L",", the 2D direction ",[8,1963,1964],{},"toLight"," and the ",[8,1967,1968],{},"distance",[1812,1970,1971,1975,1976,1881],{},[173,1972,1973],{"href":471},[8,1974,474],{}," — How a point light fades with distance: 1 at the source, half at ",[8,1977,1978],{},"range",[1812,1980,1981,1985],{},[173,1982,1983],{"href":231},[8,1984,234],{}," — How much a light falls on a surface: 0 facing away, 1 facing it.",[1812,1987,1988,1992],{},[173,1989,1990],{"href":238},[8,1991,241],{}," — A highlight whose tightness follows a sharpness slider.",[1812,1994,1995,1999],{},[173,1996,1997],{"href":244},[8,1998,247],{}," — A highlight with a tight hot core and a wide dim halo.",[1812,2001,2002,2006],{},[173,2003,2004],{"href":517},[8,2005,520],{}," — A highlight stretched along a grain, as on brushed metal or carbon fibre.",[1812,2008,2009,2013,2014,1773],{},[173,2010,2011],{"href":523},[8,2012,526],{}," — Turns roughness and anisotropy sliders (0–1 each) into the two lobe widths ",[8,2015,520],{},[1812,2017,2018,2022],{},[173,2019,2020],{"href":566},[8,2021,569],{}," — The direction the viewer looks along at this pixel, for reflections that sweep across a face.",[1812,2024,2025,2029],{},[173,2026,2027],{"href":547},[8,2028,550],{}," — How edge-on the surface is to the viewer: 0 face-on, 1 grazing.",[1812,2031,2032,2036],{},[173,2033,2034],{"href":553},[8,2035,556],{}," — How edge-on the surface is to a straight-on viewer: 0 face-on, 1 grazing.",[1812,2038,2039,2043,2044,2047],{},[173,2040,2041],{"href":536},[8,2042,539],{}," — A multiplier that brightens grazing edges: 1 face-on, up to ",[8,2045,2046],{},"1 + amount"," at the rim.",[1812,2049,2050,2054,2055,2058,2059,2047],{},[173,2051,2052],{"href":251},[8,2053,254],{}," — How mirror-like a surface is at this pixel: ",[8,2056,2057],{},"r0"," face-on, rising to ",[8,2060,2061],{},"r0 + gain",[1812,2063,2064,2068],{},[173,2065,2066],{"href":575},[8,2067,578],{}," — The brightness of a five-light studio seen in a reflected direction.",[1812,2070,2071,2075],{},[173,2072,2073],{"href":582},[8,2074,585],{}," — Blurs any 2D lookup along a direction, for streaked reflections and motion smear.",[1812,2077,2078,2082],{},[173,2079,2080],{"href":595},[8,2081,598],{}," — How much material the view passes through at this pixel: 0 at the edge, up to about 1.2 deep inside.",[1812,2084,2085,2089],{},[173,2086,2087],{"href":257},[8,2088,260],{}," — How much light survives a thickness of tinted material, per channel.",[1812,2091,2092,2096],{},[173,2093,2094],{"href":612},[8,2095,615],{}," — A smooth rainbow color from a value that wraps every 1.",[1812,2098,2099,2105],{},[173,2100,2102],{"href":2101},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Ftintramp",[8,2103,2104],{},"tintRamp"," — Maps a lighting value (0 dark, 1 light) onto two colors.",[1812,2107,2108,2112],{},[173,2109,2110],{"href":264},[8,2111,267],{}," — Compresses bright color back into range without shifting its hue.",[1812,2114,2115,2119],{},[173,2116,2117],{"href":670},[8,2118,673],{}," — Turns light that piles past 1 into a soft burn toward white, like film.",[1812,2121,2122,2126],{},[173,2123,2124],{"href":271},[8,2125,274],{}," — The shape's coverage at this pixel: 1 inside, 0 outside, soft across the edge.",[1812,2128,2129,2133],{},[173,2130,2131],{"href":285},[8,2132,288],{}," — True inside the shape and up to two pixels outside it.",[1812,2135,2136,2140],{},[173,2137,2138],{"href":278},[8,2139,281],{}," — Evaluates an expression only where a condition holds, and a cheap fallback everywhere else.",[1812,2142,2143,2149],{},[173,2144,2146],{"href":2145},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacenoise",[8,2147,2148],{},"surfaceNoise"," — Smooth signed noise at a 2D point, roughly −1 to 1, with features about one unit wide.",[1812,2151,2152,2158,2159,2161],{},[173,2153,2155],{"href":2154},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacenoiseat",[8,2156,2157],{},"surfaceNoiseAt"," — ",[8,2160,2148],{}," at a 2D point you already hold.",[1812,2163,2164,2170],{},[173,2165,2167],{"href":2166},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fvolumenoiseat",[8,2168,2169],{},"volumeNoiseAt"," — Smooth signed noise at a 3D point, roughly −1 to 1.",[1812,2172,2173,2179],{},[173,2174,2176],{"href":2175},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fcellnoiseat",[8,2177,2178],{},"cellNoiseAt"," — Cellular noise at a 2D point: 0 at each cell's seed point, rising toward the cell walls.",[1812,2181,2182,2188,2189,1881],{},[173,2183,2185],{"href":2184},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fvaluenoise",[8,2186,2187],{},"valueNoise"," — Smooth noise 0–1 at a 2D point, softer and blockier than ",[8,2190,2148],{},[1812,2192,2193,2197],{},[173,2194,2195],{"href":690},[8,2196,693],{}," — Random 0–1 per point, with no smoothness between neighbours.",[1812,2199,2200,2204],{},[173,2201,2202],{"href":696},[8,2203,699],{}," — A 0–1 dither pattern over device pixels where neighbours differ as much as possible.",[1812,2206,2207,2211],{},[173,2208,2209],{"href":436},[8,2210,439],{}," — One octave of smooth signed noise along and across a direction, for grain.",[1812,2213,2214,2220],{},[173,2215,2217],{"href":2216},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fflowwarp",[8,2218,2219],{},"flowWarp"," — A slowly folding 2D offset to add to pattern coordinates, for molten or wind-blown motion.",[1812,2222,2223,2227],{},[173,2224,2225],{"href":684},[8,2226,687],{}," — Adds a fine per-pixel brightness jitter, so rendered light reads as photographed.",[1812,2229,2230,2234],{},[173,2231,2232],{"href":625},[8,2233,628],{}," — A plane of sparse glinting points: stars, glitter, dust.",[1812,2236,2237,2241],{},[173,2238,2239],{"href":631},[8,2240,634],{}," — A brightness factor that shimmers over time, different for each element.",[1812,2243,2244,2250],{},[173,2245,2247],{"href":2246},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fshellrefract",[8,2248,2249],{},"shellRefract"," — Coordinates for what sits inside a glass shell, bent where the shell curves.",[1812,2252,2253,2259],{},[173,2254,2256],{"href":2255},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Frotationsensor",[8,2257,2258],{},"rotationSensor"," — How far a 3D shape has rotated, as a 2D pan you can move content by.",[1812,2261,2262,2266],{},[173,2263,2264],{"href":709},[8,2265,712],{}," — The closest point on the shape's edge to this pixel, and the outward normal there.",[1812,2268,2269,2273],{},[173,2270,2271],{"href":715},[8,2272,718],{}," — The distance field extended past the edge of an SVG shape's texture.",[2275,2276,2277],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":325,"searchDepth":741,"depth":741,"links":2279},[2280,2281,2282,2283],{"id":351,"depth":741,"text":352},{"id":721,"depth":741,"text":722},{"id":1732,"depth":741,"text":1733},{"id":1802,"depth":741,"text":1803},"materials","Words that shade a surface so a shape reads as glass, metal, plastic or stone.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fmaterials.md","md","Noise, light & materials",{},"\u002Fdocs\u002Fprimitives\u002Fmaterials",{"title":147,"description":2285},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fmaterials.ts","docs\u002Fprimitives\u002F14.materials\u002Findex",54,"yUEUs8feMU2Apojf8voxGTjDHonWFs88NvIkxoBonGA"]