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