[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Finvoke":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":1187,"categorySlug":1187,"categoryTitle":9,"curated":426,"description":1188,"editUrl":1189,"extension":1190,"group":1191,"groupTitle":1192,"kind":9,"meta":1193,"navigation":426,"path":1194,"seo":1195,"sourceUrl":1196,"stem":1197,"wordCount":595,"__hash__":1198},"primitives\u002Fdocs\u002Fprimitives\u002F4.invoke\u002Findex.md","Context & invocation",{"type":149,"value":150,"toc":1181},"minimark",[151,155,200,265,294,299,401,405,956,960,1025,1029,1177],[152,153,147],"h1",{"id":154},"context-invocation",[156,157,158,159,163,164,167,168,171,172,175,176,179,180,183,184,191,192,195,196,199],"p",{},"The ",[160,161,162],"strong",{},"context"," is what every pixel knows about its surroundings: its coordinate (",[8,165,166],{},"uv",", 0–1\nacross the canvas with y down), the clock (",[8,169,170],{},"time",", in seconds), the canvas shape (",[8,173,174],{},"aspect",",\n",[8,177,178],{},"viewportSize",") and the mouse (",[8,181,182],{},"pointer","). ",[185,186,188],"a",{"href":187},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx",[8,189,190],{},"ctx"," names these as tokens you can pass to a word\nor bind in a ",[8,193,194],{},"wgsl"," body's ",[8,197,198],{},"inputs",".",[156,201,202,203,206,207,210,211,214,215,217,218,224,225,231,232,238,239,245,246,249,250,256,257,260,261,264],{},"The rest of this page is for a ",[160,204,205],{},"hand-written builder",": a ",[8,208,209],{},"paint:"," or ",[8,212,213],{},"effect:"," given as a\nfunction of the params instead of a composition or a ",[8,216,194],{}," body. Inside one, ",[185,219,221],{"href":220},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fpaintframe",[8,222,223],{},"paintFrame","\ngives the coordinate and frame size to draw in, ",[185,226,228],{"href":227},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Funiformof",[8,229,230],{},"uniformOf"," reads a prop as a GPU value,\n",[185,233,235],{"href":234},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fresolvescalar",[8,236,237],{},"resolveScalar"," and ",[185,240,242],{"href":241},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fresolvearg",[8,243,244],{},"resolveArg"," turn anything a word accepts (a prop ref, a ",[8,247,248],{},"Scalar",", a\ncontext token, a number) into a GPU value, and ",[185,251,253],{"href":252},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fpointwiseop",[8,254,255],{},"pointwiseOp"," wraps a compiled GPU function\nas a new color word. Combine the results with the ",[8,258,259],{},"math"," words and return a ",[8,262,263],{},"vec4"," color.",[266,267,272],"pre",{"className":268,"code":269,"language":270,"meta":271,"style":271},"language-ts shiki shiki-themes github-dark","import {ctx, uv, time, …} from 'shaders\u002Fstd'\n","ts","",[8,273,274],{"__ignoreMap":271},[275,276,279,283,287,290],"span",{"class":277,"line":278},"line",1,[275,280,282],{"class":281},"snl16","import",[275,284,286],{"class":285},"s95oV"," {ctx, uv, time, …} ",[275,288,289],{"class":281},"from",[275,291,293],{"class":292},"sU2Wk"," 'shaders\u002Fstd'\n",[295,296,298],"h2",{"id":297},"reach-for-it-when","Reach for it when",[300,301,302,315],"table",{},[303,304,305],"thead",{},[306,307,308,312],"tr",{},[309,310,311],"th",{},"When you need",[309,313,314],{},"Use",[316,317,318,330,341,352,366,377,390],"tbody",{},[306,319,320,324],{},[321,322,323],"td",{},"the mouse, the clock or the canvas size as an input to a word",[321,325,326],{},[185,327,328],{"href":187},[8,329,190],{},[306,331,332,335],{},[321,333,334],{},"the coordinate to draw at in a hand-written paint",[321,336,337],{},[185,338,339],{"href":220},[8,340,223],{},[306,342,343,346],{},[321,344,345],{},"a prop's value inside a hand-written builder",[321,347,348],{},[185,349,350],{"href":227},[8,351,230],{},[306,353,354,360],{},[321,355,356,357,359],{},"a ",[8,358,248],{}," (a mask times a prop) inside a builder",[321,361,362],{},[185,363,364],{"href":234},[8,365,237],{},[306,367,368,371],{},[321,369,370],{},"any value a word accepts, inside a filter builder",[321,372,373],{},[185,374,375],{"href":241},[8,376,244],{},[306,378,379,382],{},[321,380,381],{},"the same inside a warp's map factory",[321,383,384],{},[185,385,387],{"href":386},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fresolveargin",[8,388,389],{},"resolveArgIn",[306,391,392,395],{},[321,393,394],{},"a new color word from a compiled GPU function",[321,396,397],{},[185,398,399],{"href":252},[8,400,255],{},[295,402,404],{"id":403},"example","Example",[266,406,408],{"className":268,"code":407,"language":270,"meta":271,"style":271},"import {defineShader, p, paintFrame, uniformOf, animatedTime, math, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {sub, mul, add, vec2, vec4, length, smoothstep, mix, sin} = math\n\n\u002F\u002F A spotlight: a soft disc around a draggable point that breathes on the layer's own clock.\nexport const Spotlight = defineShader({\n  name: 'Spotlight',\n  animatedTime: {speed: 'speed'},\n  props: {\n    colorA: {default: '#0b1026', transform: transformColor},\n    colorB: {default: '#ffd27a', transform: transformColor},\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    radius: {default: 0.4},\n    speed: {default: 1},\n  },\n  paint: (params) => {\n    const {uv} = paintFrame(params)\n    const center = uniformOf(p('center'), params)\n    const colorA = uniformOf(p('colorA'), params)\n    const colorB = uniformOf(p('colorB'), params)\n    \u002F\u002F A position prop's y is stored flipped; undo it to compare with uv.\n    const toCenter = sub(uv, vec2(center.member('x'), sub(1, center.member('y'))))\n    const d = length(mul(toCenter, vec2(params.ctx.aspect, 1)))\n    const breath = add(1, mul(0.1, sin(animatedTime(params))))\n    const t = sub(1, smoothstep(0, mul(uniformOf(p('radius'), params), breath), d))\n    return vec4(mix(colorA.member('rgb'), colorB.member('rgb'), t), 1)\n  },\n})\n",[8,409,410,421,428,490,495,502,524,535,547,553,565,576,593,604,615,621,643,663,689,712,735,741,792,822,860,905,945,950],{"__ignoreMap":271},[275,411,412,414,417,419],{"class":277,"line":278},[275,413,282],{"class":281},[275,415,416],{"class":285}," {defineShader, p, paintFrame, uniformOf, animatedTime, math, transformColor, transformPosition} ",[275,418,289],{"class":281},[275,420,293],{"class":292},[275,422,424],{"class":277,"line":423},2,[275,425,427],{"emptyLinePlaceholder":426},true,"\n",[275,429,431,434,437,441,444,447,449,452,454,457,459,461,463,466,468,471,473,476,478,481,484,487],{"class":277,"line":430},3,[275,432,433],{"class":281},"const",[275,435,436],{"class":285}," {",[275,438,440],{"class":439},"sDLfK","sub",[275,442,443],{"class":285},", ",[275,445,446],{"class":439},"mul",[275,448,443],{"class":285},[275,450,451],{"class":439},"add",[275,453,443],{"class":285},[275,455,456],{"class":439},"vec2",[275,458,443],{"class":285},[275,460,263],{"class":439},[275,462,443],{"class":285},[275,464,465],{"class":439},"length",[275,467,443],{"class":285},[275,469,470],{"class":439},"smoothstep",[275,472,443],{"class":285},[275,474,475],{"class":439},"mix",[275,477,443],{"class":285},[275,479,480],{"class":439},"sin",[275,482,483],{"class":285},"} ",[275,485,486],{"class":281},"=",[275,488,489],{"class":285}," math\n",[275,491,493],{"class":277,"line":492},4,[275,494,427],{"emptyLinePlaceholder":426},[275,496,498],{"class":277,"line":497},5,[275,499,501],{"class":500},"sAwPA","\u002F\u002F A spotlight: a soft disc around a draggable point that breathes on the layer's own clock.\n",[275,503,505,508,511,514,517,521],{"class":277,"line":504},6,[275,506,507],{"class":281},"export",[275,509,510],{"class":281}," const",[275,512,513],{"class":439}," Spotlight",[275,515,516],{"class":281}," =",[275,518,520],{"class":519},"svObZ"," defineShader",[275,522,523],{"class":285},"({\n",[275,525,527,530,533],{"class":277,"line":526},7,[275,528,529],{"class":285},"  name: ",[275,531,532],{"class":292},"'Spotlight'",[275,534,175],{"class":285},[275,536,538,541,544],{"class":277,"line":537},8,[275,539,540],{"class":285},"  animatedTime: {speed: ",[275,542,543],{"class":292},"'speed'",[275,545,546],{"class":285},"},\n",[275,548,550],{"class":277,"line":549},9,[275,551,552],{"class":285},"  props: {\n",[275,554,556,559,562],{"class":277,"line":555},10,[275,557,558],{"class":285},"    colorA: {default: ",[275,560,561],{"class":292},"'#0b1026'",[275,563,564],{"class":285},", transform: transformColor},\n",[275,566,568,571,574],{"class":277,"line":567},11,[275,569,570],{"class":285},"    colorB: {default: ",[275,572,573],{"class":292},"'#ffd27a'",[275,575,564],{"class":285},[275,577,579,582,585,588,590],{"class":277,"line":578},12,[275,580,581],{"class":285},"    center: {default: {x: ",[275,583,584],{"class":439},"0.5",[275,586,587],{"class":285},", y: ",[275,589,584],{"class":439},[275,591,592],{"class":285},"}, transform: transformPosition},\n",[275,594,596,599,602],{"class":277,"line":595},13,[275,597,598],{"class":285},"    radius: {default: ",[275,600,601],{"class":439},"0.4",[275,603,546],{"class":285},[275,605,607,610,613],{"class":277,"line":606},14,[275,608,609],{"class":285},"    speed: {default: ",[275,611,612],{"class":439},"1",[275,614,546],{"class":285},[275,616,618],{"class":277,"line":617},15,[275,619,620],{"class":285},"  },\n",[275,622,624,627,630,634,637,640],{"class":277,"line":623},16,[275,625,626],{"class":519},"  paint",[275,628,629],{"class":285},": (",[275,631,633],{"class":632},"s9osk","params",[275,635,636],{"class":285},") ",[275,638,639],{"class":281},"=>",[275,641,642],{"class":285}," {\n",[275,644,646,649,651,653,655,657,660],{"class":277,"line":645},17,[275,647,648],{"class":281},"    const",[275,650,436],{"class":285},[275,652,166],{"class":439},[275,654,483],{"class":285},[275,656,486],{"class":281},[275,658,659],{"class":519}," paintFrame",[275,661,662],{"class":285},"(params)\n",[275,664,666,668,671,673,676,679,681,683,686],{"class":277,"line":665},18,[275,667,648],{"class":281},[275,669,670],{"class":439}," center",[275,672,516],{"class":281},[275,674,675],{"class":519}," uniformOf",[275,677,678],{"class":285},"(",[275,680,156],{"class":519},[275,682,678],{"class":285},[275,684,685],{"class":292},"'center'",[275,687,688],{"class":285},"), params)\n",[275,690,692,694,697,699,701,703,705,707,710],{"class":277,"line":691},19,[275,693,648],{"class":281},[275,695,696],{"class":439}," colorA",[275,698,516],{"class":281},[275,700,675],{"class":519},[275,702,678],{"class":285},[275,704,156],{"class":519},[275,706,678],{"class":285},[275,708,709],{"class":292},"'colorA'",[275,711,688],{"class":285},[275,713,715,717,720,722,724,726,728,730,733],{"class":277,"line":714},20,[275,716,648],{"class":281},[275,718,719],{"class":439}," colorB",[275,721,516],{"class":281},[275,723,675],{"class":519},[275,725,678],{"class":285},[275,727,156],{"class":519},[275,729,678],{"class":285},[275,731,732],{"class":292},"'colorB'",[275,734,688],{"class":285},[275,736,738],{"class":277,"line":737},21,[275,739,740],{"class":500},"    \u002F\u002F A position prop's y is stored flipped; undo it to compare with uv.\n",[275,742,744,746,749,751,754,757,759,762,765,767,770,773,775,777,779,782,784,786,789],{"class":277,"line":743},22,[275,745,648],{"class":281},[275,747,748],{"class":439}," toCenter",[275,750,516],{"class":281},[275,752,753],{"class":519}," sub",[275,755,756],{"class":285},"(uv, ",[275,758,456],{"class":519},[275,760,761],{"class":285},"(center.",[275,763,764],{"class":519},"member",[275,766,678],{"class":285},[275,768,769],{"class":292},"'x'",[275,771,772],{"class":285},"), ",[275,774,440],{"class":519},[275,776,678],{"class":285},[275,778,612],{"class":439},[275,780,781],{"class":285},", center.",[275,783,764],{"class":519},[275,785,678],{"class":285},[275,787,788],{"class":292},"'y'",[275,790,791],{"class":285},"))))\n",[275,793,795,797,800,802,805,807,809,812,814,817,819],{"class":277,"line":794},23,[275,796,648],{"class":281},[275,798,799],{"class":439}," d",[275,801,516],{"class":281},[275,803,804],{"class":519}," length",[275,806,678],{"class":285},[275,808,446],{"class":519},[275,810,811],{"class":285},"(toCenter, ",[275,813,456],{"class":519},[275,815,816],{"class":285},"(params.ctx.aspect, ",[275,818,612],{"class":439},[275,820,821],{"class":285},")))\n",[275,823,825,827,830,832,835,837,839,841,843,845,848,850,852,854,857],{"class":277,"line":824},24,[275,826,648],{"class":281},[275,828,829],{"class":439}," breath",[275,831,516],{"class":281},[275,833,834],{"class":519}," add",[275,836,678],{"class":285},[275,838,612],{"class":439},[275,840,443],{"class":285},[275,842,446],{"class":519},[275,844,678],{"class":285},[275,846,847],{"class":439},"0.1",[275,849,443],{"class":285},[275,851,480],{"class":519},[275,853,678],{"class":285},[275,855,856],{"class":519},"animatedTime",[275,858,859],{"class":285},"(params))))\n",[275,861,863,865,868,870,872,874,876,878,880,882,885,887,889,891,893,895,897,899,902],{"class":277,"line":862},25,[275,864,648],{"class":281},[275,866,867],{"class":439}," t",[275,869,516],{"class":281},[275,871,753],{"class":519},[275,873,678],{"class":285},[275,875,612],{"class":439},[275,877,443],{"class":285},[275,879,470],{"class":519},[275,881,678],{"class":285},[275,883,884],{"class":439},"0",[275,886,443],{"class":285},[275,888,446],{"class":519},[275,890,678],{"class":285},[275,892,230],{"class":519},[275,894,678],{"class":285},[275,896,156],{"class":519},[275,898,678],{"class":285},[275,900,901],{"class":292},"'radius'",[275,903,904],{"class":285},"), params), breath), d))\n",[275,906,908,911,914,916,918,921,923,925,928,931,933,935,937,940,942],{"class":277,"line":907},26,[275,909,910],{"class":281},"    return",[275,912,913],{"class":519}," vec4",[275,915,678],{"class":285},[275,917,475],{"class":519},[275,919,920],{"class":285},"(colorA.",[275,922,764],{"class":519},[275,924,678],{"class":285},[275,926,927],{"class":292},"'rgb'",[275,929,930],{"class":285},"), colorB.",[275,932,764],{"class":519},[275,934,678],{"class":285},[275,936,927],{"class":292},[275,938,939],{"class":285},"), t), ",[275,941,612],{"class":439},[275,943,944],{"class":285},")\n",[275,946,948],{"class":277,"line":947},27,[275,949,620],{"class":285},[275,951,953],{"class":277,"line":952},28,[275,954,955],{"class":285},"})\n",[295,957,959],{"id":958},"types","Types",[300,961,962,972],{},[303,963,964],{},[306,965,966,969],{},[309,967,968],{},"Type",[309,970,971],{},"What it is",[316,973,974,991,1008],{},[306,975,976,981],{},[321,977,978],{},[8,979,980],{},"ArgSpec",[321,982,983,984,987,988,990],{},"Anything a word accepts as an input value: a prop ref ",[8,985,986],{},"p('x')",", a ",[8,989,248],{},", a context token, or a plain number.",[306,992,993,998],{},[321,994,995],{},[8,996,997],{},"CtxToken",[321,999,1000,1001,443,1004,1007],{},"One of the context values as a token you can pass where a word takes a value: ",[8,1002,1003],{},"ctx.uv",[8,1005,1006],{},"ctx.time",", …",[306,1009,1010,1015],{},[321,1011,1012],{},[8,1013,1014],{},"SlotParams",[321,1016,1017,1018,1020,1021,1024],{},"The least a value needs to resolve against: the props, plus ",[8,1019,190],{}," where the host has one (a warp's ",[8,1022,1023],{},"map:"," does not).",[295,1026,1028],{"id":1027},"words","Words",[1030,1031,1033],"primitive-words",{":words":1032},"[{\"name\":\"ctx\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx\",\"summary\":\"The context values as tokens: `ctx.uv`, `ctx.time`, `ctx.aspect`, `ctx.pointer`, `ctx.viewportSize`, `ctx.logicalViewportSize`.\"},{\"name\":\"ctx.uv\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-uv\",\"summary\":\"The pixel's coordinate: 0–1 across the canvas, y down.\"},{\"name\":\"ctx.time\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-time\",\"summary\":\"The global clock in seconds.\"},{\"name\":\"ctx.aspect\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-aspect\",\"summary\":\"The canvas's width divided by its height.\"},{\"name\":\"ctx.pointer\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-pointer\",\"summary\":\"The mouse position in uv (0–1, y down).\"},{\"name\":\"ctx.viewportSize\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-viewportsize\",\"summary\":\"The frame size in device pixels, as a `vec2f`.\"},{\"name\":\"ctx.logicalViewportSize\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-logicalviewportsize\",\"summary\":\"The frame size in CSS pixels, as a `vec2f`, for feature counts that should not change with screen density.\"},{\"name\":\"paintFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fpaintframe\",\"summary\":\"The coordinate and frame size a hand-written `paint:` builder should draw in.\"},{\"name\":\"uniformOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Funiformof\",\"summary\":\"The live GPU value of a prop, for a hand-written builder: `uniformOf(p('radius'), params)`.\"},{\"name\":\"resolveScalar\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fresolvescalar\",\"summary\":\"A `Scalar` or prop ref as a GPU value, for a hand-written builder.\"},{\"name\":\"resolveArg\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fresolvearg\",\"summary\":\"Any input value a word accepts (a prop ref, a `Scalar`, a context token, a number) as a GPU value inside a filter's builder.\"},{\"name\":\"resolveArgIn\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fresolveargin\",\"summary\":\"`resolveArg` for any host, including a warp's `map:` factory.\"},{\"name\":\"pointwiseOp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fpointwiseop\",\"summary\":\"Wrap a compiled GPU function as a pointwise filter effect: the child's color goes in first, then `args`.\"}]",[1034,1035,1036,1060,1068,1076,1084,1092,1103,1114,1124,1134,1144,1154,1167],"ul",{},[1037,1038,1039,1043,1044,443,1046,443,1048,443,1051,443,1054,443,1057,199],"li",{},[185,1040,1041],{"href":187},[8,1042,190],{}," — The context values as tokens: ",[8,1045,1003],{},[8,1047,1006],{},[8,1049,1050],{},"ctx.aspect",[8,1052,1053],{},"ctx.pointer",[8,1055,1056],{},"ctx.viewportSize",[8,1058,1059],{},"ctx.logicalViewportSize",[1037,1061,1062,1067],{},[185,1063,1065],{"href":1064},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-uv",[8,1066,1003],{}," — The pixel's coordinate: 0–1 across the canvas, y down.",[1037,1069,1070,1075],{},[185,1071,1073],{"href":1072},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-time",[8,1074,1006],{}," — The global clock in seconds.",[1037,1077,1078,1083],{},[185,1079,1081],{"href":1080},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-aspect",[8,1082,1050],{}," — The canvas's width divided by its height.",[1037,1085,1086,1091],{},[185,1087,1089],{"href":1088},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-pointer",[8,1090,1053],{}," — The mouse position in uv (0–1, y down).",[1037,1093,1094,1099,1100,199],{},[185,1095,1097],{"href":1096},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-viewportsize",[8,1098,1056],{}," — The frame size in device pixels, as a ",[8,1101,1102],{},"vec2f",[1037,1104,1105,1110,1111,1113],{},[185,1106,1108],{"href":1107},"\u002Fdocs\u002Fprimitives\u002Finvoke\u002Fctx-logicalviewportsize",[8,1109,1059],{}," — The frame size in CSS pixels, as a ",[8,1112,1102],{},", for feature counts that should not change with screen density.",[1037,1115,1116,1120,1121,1123],{},[185,1117,1118],{"href":220},[8,1119,223],{}," — The coordinate and frame size a hand-written ",[8,1122,209],{}," builder should draw in.",[1037,1125,1126,1130,1131,199],{},[185,1127,1128],{"href":227},[8,1129,230],{}," — The live GPU value of a prop, for a hand-written builder: ",[8,1132,1133],{},"uniformOf(p('radius'), params)",[1037,1135,1136,1140,1141,1143],{},[185,1137,1138],{"href":234},[8,1139,237],{}," — A ",[8,1142,248],{}," or prop ref as a GPU value, for a hand-written builder.",[1037,1145,1146,1150,1151,1153],{},[185,1147,1148],{"href":241},[8,1149,244],{}," — Any input value a word accepts (a prop ref, a ",[8,1152,248],{},", a context token, a number) as a GPU value inside a filter's builder.",[1037,1155,1156,1160,1161,1163,1164,1166],{},[185,1157,1158],{"href":386},[8,1159,389],{}," — ",[8,1162,244],{}," for any host, including a warp's ",[8,1165,1023],{}," factory.",[1037,1168,1169,1173,1174,199],{},[185,1170,1171],{"href":252},[8,1172,255],{}," — Wrap a compiled GPU function as a pointwise filter effect: the child's color goes in first, then ",[8,1175,1176],{},"args",[1178,1179,1180],"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":271,"searchDepth":423,"depth":423,"links":1182},[1183,1184,1185,1186],{"id":297,"depth":423,"text":298},{"id":403,"depth":423,"text":404},{"id":958,"depth":423,"text":959},{"id":1027,"depth":423,"text":1028},"invoke","The context is what every pixel knows about its surroundings: its coordinate (uv, 0–1 across the canvas with y down), the clock (time, in seconds), the canvas shape (aspect, viewportSize) and the mouse (pointer). ctx names these as tokens you can pass to a word or bind in a wgsl body's inputs.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Finvoke.md","md","define","Defining a shader",{},"\u002Fdocs\u002Fprimitives\u002Finvoke",{"title":147,"description":1188},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Finvoke.ts","docs\u002Fprimitives\u002F4.invoke\u002Findex","f2fquuFuvyQuKefGjEW7H5174aw7ZtbjlnSLDHbau3I"]