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