[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fshapedsurface":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":185,"categorySlug":185,"categoryTitle":673,"curated":674,"description":158,"editUrl":9,"extension":675,"group":676,"groupTitle":677,"kind":678,"meta":679,"navigation":680,"path":681,"seo":682,"sourceUrl":683,"stem":684,"wordCount":9,"__hash__":685},"primitives\u002Fdocs\u002Fprimitives\u002F14.materials\u002F1.shapedsurface.md","shapedSurface",{"type":149,"value":150,"toc":667},"minimark",[151,155,159,180,195,221,226,263,267,514,535,539,577,581,663],[152,153,147],"h1",{"id":154},"shapedsurface",[156,157,158],"p",{},"Turns a shape prop into a surface your material shades.",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-ts shiki shiki-themes github-dark","shapedSurface(spec: ShapedSurfaceSpec): ShapedSurfaceEffect\n","ts","",[8,167,168],{"__ignoreMap":165},[169,170,173,176],"span",{"class":171,"line":172},"line",1,[169,174,147],{"class":175},"svObZ",[169,177,179],{"class":178},"s95oV","(spec: ShapedSurfaceSpec): ShapedSurfaceEffect\n",[156,181,182,183,186,187,190,191,194],{},"Import ",[8,184,185],{},"materials"," from ",[8,188,189],{},"shaders\u002Fstd"," and use ",[8,192,193],{},"materials.shapedSurface",".",[156,196,197,198,201,202,201,205,208,209,212,213,216,217,220],{},"Spread the result into a definition that declares the ",[8,199,200],{},"center",", ",[8,203,204],{},"scale",[8,206,207],{},"rotation"," and ",[8,210,211],{},"shape"," props (copy them from any shape effect). Your ",[8,214,215],{},"surface"," function receives a ",[8,218,219],{},"SurfaceFrame"," and returns the color at this pixel. Flat shapes, SVG shapes and 3D shapes all arrive through the same frame.",[222,223,225],"h2",{"id":224},"parameters","Parameters",[227,228,229,245],"table",{},[230,231,232],"thead",{},[233,234,235,239,242],"tr",{},[236,237,238],"th",{},"Name",[236,240,241],{},"Type",[236,243,244],{},"Notes",[246,247,248],"tbody",{},[233,249,250,256,261],{},[251,252,253],"td",{},[8,254,255],{},"spec",[251,257,258],{},[8,259,260],{},"ShapedSurfaceSpec",[251,262],{},[222,264,266],{"id":265},"example","Example",[160,268,270],{"className":162,"code":269,"language":164,"meta":165,"style":165},"...shapedSurface({\n  pattern: 'raw',\n  surface: (frame, params) => {\n    const u = params.uniforms\n    const field = surfaceField(frame, params, {scale: u.scale})\n    const n = geometricNormal(frame, field, {bevelWidth: u.bevelWidth, bevelShape: u.bevelShape})\n    const key = keyLightAt(direction(u.lightAngle), -0.7)\n    const rgb = mul(u.color.member('rgb'), lambert(n, key.member('L'), {wrap: 0.3}))\n    return guarded(insideShape(field.sdf, field.pxH), vec4(rgb, silhouette(field, u.edgeSoftness)), vec4(0, 0, 0, 0))\n  },\n}),\n",[8,271,272,283,296,323,339,355,371,402,451,502,508],{"__ignoreMap":165},[169,273,274,278,280],{"class":171,"line":172},[169,275,277],{"class":276},"snl16","...",[169,279,147],{"class":175},[169,281,282],{"class":178},"({\n",[169,284,286,289,293],{"class":171,"line":285},2,[169,287,288],{"class":178},"  pattern: ",[169,290,292],{"class":291},"sU2Wk","'raw'",[169,294,295],{"class":178},",\n",[169,297,299,302,305,309,311,314,317,320],{"class":171,"line":298},3,[169,300,301],{"class":175},"  surface",[169,303,304],{"class":178},": (",[169,306,308],{"class":307},"s9osk","frame",[169,310,201],{"class":178},[169,312,313],{"class":307},"params",[169,315,316],{"class":178},") ",[169,318,319],{"class":276},"=>",[169,321,322],{"class":178}," {\n",[169,324,326,329,333,336],{"class":171,"line":325},4,[169,327,328],{"class":276},"    const",[169,330,332],{"class":331},"sDLfK"," u",[169,334,335],{"class":276}," =",[169,337,338],{"class":178}," params.uniforms\n",[169,340,342,344,347,349,352],{"class":171,"line":341},5,[169,343,328],{"class":276},[169,345,346],{"class":331}," field",[169,348,335],{"class":276},[169,350,351],{"class":175}," surfaceField",[169,353,354],{"class":178},"(frame, params, {scale: u.scale})\n",[169,356,358,360,363,365,368],{"class":171,"line":357},6,[169,359,328],{"class":276},[169,361,362],{"class":331}," n",[169,364,335],{"class":276},[169,366,367],{"class":175}," geometricNormal",[169,369,370],{"class":178},"(frame, field, {bevelWidth: u.bevelWidth, bevelShape: u.bevelShape})\n",[169,372,374,376,379,381,384,387,390,393,396,399],{"class":171,"line":373},7,[169,375,328],{"class":276},[169,377,378],{"class":331}," key",[169,380,335],{"class":276},[169,382,383],{"class":175}," keyLightAt",[169,385,386],{"class":178},"(",[169,388,389],{"class":175},"direction",[169,391,392],{"class":178},"(u.lightAngle), ",[169,394,395],{"class":276},"-",[169,397,398],{"class":331},"0.7",[169,400,401],{"class":178},")\n",[169,403,405,407,410,412,415,418,421,423,426,429,432,435,437,439,442,445,448],{"class":171,"line":404},8,[169,406,328],{"class":276},[169,408,409],{"class":331}," rgb",[169,411,335],{"class":276},[169,413,414],{"class":175}," mul",[169,416,417],{"class":178},"(u.color.",[169,419,420],{"class":175},"member",[169,422,386],{"class":178},[169,424,425],{"class":291},"'rgb'",[169,427,428],{"class":178},"), ",[169,430,431],{"class":175},"lambert",[169,433,434],{"class":178},"(n, key.",[169,436,420],{"class":175},[169,438,386],{"class":178},[169,440,441],{"class":291},"'L'",[169,443,444],{"class":178},"), {wrap: ",[169,446,447],{"class":331},"0.3",[169,449,450],{"class":178},"}))\n",[169,452,454,457,460,462,465,468,471,474,477,480,482,484,487,489,491,493,495,497,499],{"class":171,"line":453},9,[169,455,456],{"class":276},"    return",[169,458,459],{"class":175}," guarded",[169,461,386],{"class":178},[169,463,464],{"class":175},"insideShape",[169,466,467],{"class":178},"(field.sdf, field.pxH), ",[169,469,470],{"class":175},"vec4",[169,472,473],{"class":178},"(rgb, ",[169,475,476],{"class":175},"silhouette",[169,478,479],{"class":178},"(field, u.edgeSoftness)), ",[169,481,470],{"class":175},[169,483,386],{"class":178},[169,485,486],{"class":331},"0",[169,488,201],{"class":178},[169,490,486],{"class":331},[169,492,201],{"class":178},[169,494,486],{"class":331},[169,496,201],{"class":178},[169,498,486],{"class":331},[169,500,501],{"class":178},"))\n",[169,503,505],{"class":171,"line":504},10,[169,506,507],{"class":178},"  },\n",[169,509,511],{"class":171,"line":510},11,[169,512,513],{"class":178},"}),\n",[515,516,517],"blockquote",{},[156,518,519,523,524,527,528,531,532,534],{},[520,521,522],"strong",{},"Tip."," Start from ",[8,525,526],{},"surfaceField",", end with ",[8,529,530],{},"guarded"," around ",[8,533,464],{},". Everything between is the look.",[222,536,538],{"id":537},"see-also","See also",[540,541,542,552,561,569],"ul",{},[543,544,545,551],"li",{},[546,547,549],"a",{"href":548},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsurfacefield",[8,550,526],{}," — The first line of a material: the field taps, the signed distance and the pixel size, bound once.",[543,553,554,560],{},[546,555,557],{"href":556},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fgeometricnormal",[8,558,559],{},"geometricNormal"," — The surface normal of the shape, whichever kind of shape is active.",[543,562,563,568],{},[546,564,566],{"href":565},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fsilhouette",[8,567,476],{}," — The shape's coverage at this pixel: 1 inside, 0 outside, soft across the edge.",[543,570,571,576],{},[546,572,574],{"href":573},"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fguarded",[8,575,530],{}," — Evaluates an expression only where a condition holds, and a cheap fallback everywhere else.",[222,578,580],{"id":579},"used-by","Used by",[156,582,583,201,587,201,591,201,595,201,599,201,603,201,607,201,611,201,615,201,619,201,623,201,627,201,631,201,635,201,639,201,643,201,647,201,651,201,655,201,659],{},[546,584,586],{"href":585},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal","BrushedMetal",[546,588,590],{"href":589},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber","CarbonFiber",[546,592,594],{"href":593},"\u002Fdocs\u002Fcomponents\u002Fchrome","Chrome",[546,596,598],{"href":597},"\u002Fdocs\u002Fcomponents\u002Fcrystal","Crystal",[546,600,602],{"href":601},"\u002Fdocs\u002Fcomponents\u002Femboss","Emboss",[546,604,606],{"href":605},"\u002Fdocs\u002Fcomponents\u002Ffrost","Frost",[546,608,610],{"href":609},"\u002Fdocs\u002Fcomponents\u002Fglass","Glass",[546,612,614],{"href":613},"\u002Fdocs\u002Fcomponents\u002Fgoo","Goo",[546,616,618],{"href":617},"\u002Fdocs\u002Fcomponents\u002Fheatmap","Heatmap",[546,620,622],{"href":621},"\u002Fdocs\u002Fcomponents\u002Fhologram","Hologram",[546,624,626],{"href":625},"\u002Fdocs\u002Fcomponents\u002Fholographic","Holographic",[546,628,630],{"href":629},"\u002Fdocs\u002Fcomponents\u002Firradiance","Irradiance",[546,632,634],{"href":633},"\u002Fdocs\u002Fcomponents\u002Flightedge","LightEdge",[546,636,638],{"href":637},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal","LiquidMetal",[546,640,642],{"href":641},"\u002Fdocs\u002Fcomponents\u002Fnebula","Nebula",[546,644,646],{"href":645},"\u002Fdocs\u002Fcomponents\u002Fneon","Neon",[546,648,650],{"href":649},"\u002Fdocs\u002Fcomponents\u002Fobsidian","Obsidian",[546,652,654],{"href":653},"\u002Fdocs\u002Fcomponents\u002Fplastic","Plastic",[546,656,658],{"href":657},"\u002Fdocs\u002Fcomponents\u002Fthinfilm","ThinFilm",[546,660,662],{"href":661},"\u002Fdocs\u002Fcomponents\u002Fwater","Water",[664,665,666],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}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 .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":165,"searchDepth":285,"depth":285,"links":668},[669,670,671,672],{"id":224,"depth":285,"text":225},{"id":265,"depth":285,"text":266},{"id":537,"depth":285,"text":538},{"id":579,"depth":285,"text":580},"Materials & surfaces",false,"md","light","Noise, light & materials","function",{},true,"\u002Fdocs\u002Fprimitives\u002Fmaterials\u002Fshapedsurface",{"title":147,"description":158},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fmaterials.ts#L237","docs\u002Fprimitives\u002F14.materials\u002F1.shapedsurface","nkkRBvcjIfNh5LM3Q1CmcRBrwq3_LPk_le-NoD81TE8"]