[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fdefine\u002Fdefineshader":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":942,"categorySlug":942,"categoryTitle":943,"curated":944,"description":158,"editUrl":9,"extension":945,"group":942,"groupTitle":946,"kind":947,"meta":948,"navigation":473,"path":949,"seo":950,"sourceUrl":951,"stem":952,"wordCount":9,"__hash__":953},"primitives\u002Fdocs\u002Fprimitives\u002F1.define\u002F1.defineshader.md","defineShader",{"type":149,"value":150,"toc":937},"minimark",[151,155,159,221,231,274,385,403,408,444,448,649,843,856,860,933],[152,153,147],"h1",{"id":154},"defineshader",[156,157,158],"p",{},"Define a shader component from a plain object: its props, and one field that says what it draws.",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-ts shiki shiki-themes github-dark","defineShader\u003CT extends ComponentProps>(definition: StdDefinition\u003CT>): GpuShaderDefinition\u003CT>\n","ts","",[8,167,168],{"__ignoreMap":165},[169,170,173,177,181,185,188,191,195,198,201,204,206,209,211,214,216,218],"span",{"class":171,"line":172},"line",1,[169,174,176],{"class":175},"s95oV","defineShader\u003C",[169,178,180],{"class":179},"svObZ","T",[169,182,184],{"class":183},"snl16"," extends",[169,186,187],{"class":179}," ComponentProps",[169,189,190],{"class":175},">(",[169,192,194],{"class":193},"s9osk","definition",[169,196,197],{"class":183},":",[169,199,200],{"class":179}," StdDefinition",[169,202,203],{"class":175},"\u003C",[169,205,180],{"class":179},[169,207,208],{"class":175},">)",[169,210,197],{"class":183},[169,212,213],{"class":179}," GpuShaderDefinition",[169,215,203],{"class":175},[169,217,180],{"class":179},[169,219,220],{"class":175},">\n",[156,222,223,224,226,227,230],{},"Import ",[8,225,147],{}," from ",[8,228,229],{},"shaders\u002Fstd",".",[156,232,233,234,237,238,241,242,245,246,249,250,253,254,257,258,261,262,265,266,269,270,273],{},"The field carrying the per-pixel work decides what kind of component you get. ",[8,235,236],{},"paint:"," makes a generator: it paints from coordinates and needs nothing inside it. ",[8,239,240],{},"effect:"," makes a filter over the layer inside it (the child). A ",[8,243,244],{},"wgsl"," body that only reads ",[8,247,248],{},"child"," edits one pixel at a time; one that samples ",[8,251,252],{},"childTexture"," reads neighbours through its own render pass. ",[8,255,256],{},"map:"," makes a distortion from one coordinate function, ",[8,259,260],{},"shape:"," a 2D shape with fill and stroke, ",[8,263,264],{},"gpu:"," a raw builder. Give exactly one. ",[8,267,268],{},"role"," and ",[8,271,272],{},"species"," are optional and may only restate what the field already says.",[156,275,276,279,280,283,284,287,288,291,292,295,296,299,300,303,304,307,308,291,311,291,314,291,317,291,320,291,323,291,326,291,329,291,331,291,334,291,337,291,340,291,343,291,346,291,349,352,353,291,356,359,360,291,363,291,366,369,370,373,374,377,378,380,381,384],{},[8,277,278],{},"props"," are the component's attributes. Each has a ",[8,281,282],{},"default",", an optional ",[8,285,286],{},"transform"," (",[8,289,290],{},"transformColor",", ",[8,293,294],{},"transformPosition",", …), optional ",[8,297,298],{},"ui"," metadata for editors, and ",[8,301,302],{},"compileTime: true"," when a change should rebuild the shader (or ",[8,305,306],{},"recompile: crosses(0)"," to rebuild only at a threshold). A prop name must be a plain identifier and must not be one of the layer props every component already has — ",[8,309,310],{},"blendMode",[8,312,313],{},"opacity",[8,315,316],{},"visible",[8,318,319],{},"id",[8,321,322],{},"maskSource",[8,324,325],{},"maskType",[8,327,328],{},"renderOrder",[8,330,286],{},[8,332,333],{},"boundingBox",[8,335,336],{},"flow",[8,338,339],{},"absolute",[8,341,342],{},"children",[8,344,345],{},"ref",[8,347,348],{},"key",[8,350,351],{},"src"," — nor a name the renderer manages itself (",[8,354,355],{},"_animTime",[8,357,358],{},"_opacity",", or anything starting ",[8,361,362],{},"_pad",[8,364,365],{},"_bbox_",[8,367,368],{},"_map_","). Those throw when the definition is built. ",[8,371,372],{},"animatedTime: {speed: 'speed'}"," gives the layer its own clock, scaled by that prop (0 pauses it); ",[8,375,376],{},"time"," in a ",[8,379,244],{}," body and ",[8,382,383],{},"animatedTime(params)"," in a builder read it.",[156,386,387,388,391,392,395,396,399,400,230],{},"The returned definition is what you hand to ",[8,389,390],{},"\u003CCustomShader src={Halo}>"," in React, Vue, Svelte or Solid, to ",[8,393,394],{},"registerShader",", or to ",[8,397,398],{},"createShader(canvas, preset, {components: [Halo]})"," so preset JSON can name it by ",[8,401,402],{},"type",[404,405,407],"h2",{"id":406},"parameters","Parameters",[409,410,411,427],"table",{},[412,413,414],"thead",{},[415,416,417,421,424],"tr",{},[418,419,420],"th",{},"Name",[418,422,423],{},"Type",[418,425,426],{},"Notes",[428,429,430],"tbody",{},[415,431,432,437,442],{},[433,434,435],"td",{},[8,436,194],{},[433,438,439],{},[8,440,441],{},"StdDefinition\u003CT>",[433,443],{},[404,445,447],{"id":446},"examples","Examples",[160,449,451],{"className":162,"code":450,"language":164,"meta":165,"style":165},"import {defineShader, wgsl, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nexport const Halo = defineShader({\n  name: 'Halo',\n  animatedTime: {speed: 'speed'},\n  props: {\n    inner: {default: '#ffd166', transform: transformColor},\n    outer: {default: '#0b132b', transform: transformColor},\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    radius: {default: 0.6},\n    bands: {default: 4},\n    speed: {default: 1},\n  },\n  paint: wgsl`\n    let d = length((uv - center) * vec2f(aspect, 1.0)) \u002F radius;\n    let wave = 0.5 + 0.5 * cos(d * bands * 6.2831853 - time * 2.0);\n    return vec4f(mix(outer.rgb, inner.rgb, wave * (1.0 - smoothstep(0.7, 1.0, d))), 1.0);\n  `,\n})\n",[8,452,453,468,475,497,509,521,527,539,550,567,578,589,600,606,617,623,629,635,643],{"__ignoreMap":165},[169,454,455,458,461,464],{"class":171,"line":172},[169,456,457],{"class":183},"import",[169,459,460],{"class":175}," {defineShader, wgsl, transformColor, transformPosition} ",[169,462,463],{"class":183},"from",[169,465,467],{"class":466},"sU2Wk"," 'shaders\u002Fstd'\n",[169,469,471],{"class":171,"line":470},2,[169,472,474],{"emptyLinePlaceholder":473},true,"\n",[169,476,478,481,484,488,491,494],{"class":171,"line":477},3,[169,479,480],{"class":183},"export",[169,482,483],{"class":183}," const",[169,485,487],{"class":486},"sDLfK"," Halo",[169,489,490],{"class":183}," =",[169,492,493],{"class":179}," defineShader",[169,495,496],{"class":175},"({\n",[169,498,500,503,506],{"class":171,"line":499},4,[169,501,502],{"class":175},"  name: ",[169,504,505],{"class":466},"'Halo'",[169,507,508],{"class":175},",\n",[169,510,512,515,518],{"class":171,"line":511},5,[169,513,514],{"class":175},"  animatedTime: {speed: ",[169,516,517],{"class":466},"'speed'",[169,519,520],{"class":175},"},\n",[169,522,524],{"class":171,"line":523},6,[169,525,526],{"class":175},"  props: {\n",[169,528,530,533,536],{"class":171,"line":529},7,[169,531,532],{"class":175},"    inner: {default: ",[169,534,535],{"class":466},"'#ffd166'",[169,537,538],{"class":175},", transform: transformColor},\n",[169,540,542,545,548],{"class":171,"line":541},8,[169,543,544],{"class":175},"    outer: {default: ",[169,546,547],{"class":466},"'#0b132b'",[169,549,538],{"class":175},[169,551,553,556,559,562,564],{"class":171,"line":552},9,[169,554,555],{"class":175},"    center: {default: {x: ",[169,557,558],{"class":486},"0.5",[169,560,561],{"class":175},", y: ",[169,563,558],{"class":486},[169,565,566],{"class":175},"}, transform: transformPosition},\n",[169,568,570,573,576],{"class":171,"line":569},10,[169,571,572],{"class":175},"    radius: {default: ",[169,574,575],{"class":486},"0.6",[169,577,520],{"class":175},[169,579,581,584,587],{"class":171,"line":580},11,[169,582,583],{"class":175},"    bands: {default: ",[169,585,586],{"class":486},"4",[169,588,520],{"class":175},[169,590,592,595,598],{"class":171,"line":591},12,[169,593,594],{"class":175},"    speed: {default: ",[169,596,597],{"class":486},"1",[169,599,520],{"class":175},[169,601,603],{"class":171,"line":602},13,[169,604,605],{"class":175},"  },\n",[169,607,609,612,614],{"class":171,"line":608},14,[169,610,611],{"class":175},"  paint: ",[169,613,244],{"class":179},[169,615,616],{"class":466},"`\n",[169,618,620],{"class":171,"line":619},15,[169,621,622],{"class":466},"    let d = length((uv - center) * vec2f(aspect, 1.0)) \u002F radius;\n",[169,624,626],{"class":171,"line":625},16,[169,627,628],{"class":466},"    let wave = 0.5 + 0.5 * cos(d * bands * 6.2831853 - time * 2.0);\n",[169,630,632],{"class":171,"line":631},17,[169,633,634],{"class":466},"    return vec4f(mix(outer.rgb, inner.rgb, wave * (1.0 - smoothstep(0.7, 1.0, d))), 1.0);\n",[169,636,638,641],{"class":171,"line":637},18,[169,639,640],{"class":466},"  `",[169,642,508],{"class":175},[169,644,646],{"class":171,"line":645},19,[169,647,648],{"class":175},"})\n",[160,650,652],{"className":162,"code":651,"language":164,"meta":165,"style":165},"\u002F\u002F A filter composed from std words, skipped entirely while `intensity` is 0.\nexport const Vignette = defineShader({\n  name: 'Vignette',\n  props: {\n    color: {default: '#000000', transform: transformColor},\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    radius: {default: 0.5},\n    falloff: {default: 0.5},\n    intensity: {default: 1, recompile: crosses(0)},\n  },\n  effect: tintToward(p('color'), {amount: radialMask({center: p('center'), radius: p('radius'), falloff: p('falloff')}).times(p('intensity'))}),\n  identityWhen: isZero('intensity'),\n})\n",[8,653,654,660,675,684,688,698,710,718,727,749,753,824,839],{"__ignoreMap":165},[169,655,656],{"class":171,"line":172},[169,657,659],{"class":658},"sAwPA","\u002F\u002F A filter composed from std words, skipped entirely while `intensity` is 0.\n",[169,661,662,664,666,669,671,673],{"class":171,"line":470},[169,663,480],{"class":183},[169,665,483],{"class":183},[169,667,668],{"class":486}," Vignette",[169,670,490],{"class":183},[169,672,493],{"class":179},[169,674,496],{"class":175},[169,676,677,679,682],{"class":171,"line":477},[169,678,502],{"class":175},[169,680,681],{"class":466},"'Vignette'",[169,683,508],{"class":175},[169,685,686],{"class":171,"line":499},[169,687,526],{"class":175},[169,689,690,693,696],{"class":171,"line":511},[169,691,692],{"class":175},"    color: {default: ",[169,694,695],{"class":466},"'#000000'",[169,697,538],{"class":175},[169,699,700,702,704,706,708],{"class":171,"line":523},[169,701,555],{"class":175},[169,703,558],{"class":486},[169,705,561],{"class":175},[169,707,558],{"class":486},[169,709,566],{"class":175},[169,711,712,714,716],{"class":171,"line":529},[169,713,572],{"class":175},[169,715,558],{"class":486},[169,717,520],{"class":175},[169,719,720,723,725],{"class":171,"line":541},[169,721,722],{"class":175},"    falloff: {default: ",[169,724,558],{"class":486},[169,726,520],{"class":175},[169,728,729,732,734,737,740,743,746],{"class":171,"line":552},[169,730,731],{"class":175},"    intensity: {default: ",[169,733,597],{"class":486},[169,735,736],{"class":175},", recompile: ",[169,738,739],{"class":179},"crosses",[169,741,742],{"class":175},"(",[169,744,745],{"class":486},"0",[169,747,748],{"class":175},")},\n",[169,750,751],{"class":171,"line":569},[169,752,605],{"class":175},[169,754,755,758,761,763,765,767,770,773,776,779,781,783,786,789,791,793,796,799,801,803,806,809,812,814,816,818,821],{"class":171,"line":580},[169,756,757],{"class":175},"  effect: ",[169,759,760],{"class":179},"tintToward",[169,762,742],{"class":175},[169,764,156],{"class":179},[169,766,742],{"class":175},[169,768,769],{"class":466},"'color'",[169,771,772],{"class":175},"), {amount: ",[169,774,775],{"class":179},"radialMask",[169,777,778],{"class":175},"({center: ",[169,780,156],{"class":179},[169,782,742],{"class":175},[169,784,785],{"class":466},"'center'",[169,787,788],{"class":175},"), radius: ",[169,790,156],{"class":179},[169,792,742],{"class":175},[169,794,795],{"class":466},"'radius'",[169,797,798],{"class":175},"), falloff: ",[169,800,156],{"class":179},[169,802,742],{"class":175},[169,804,805],{"class":466},"'falloff'",[169,807,808],{"class":175},")}).",[169,810,811],{"class":179},"times",[169,813,742],{"class":175},[169,815,156],{"class":179},[169,817,742],{"class":175},[169,819,820],{"class":466},"'intensity'",[169,822,823],{"class":175},"))}),\n",[169,825,826,829,832,834,836],{"class":171,"line":591},[169,827,828],{"class":175},"  identityWhen: ",[169,830,831],{"class":179},"isZero",[169,833,742],{"class":175},[169,835,820],{"class":466},[169,837,838],{"class":175},"),\n",[169,840,841],{"class":171,"line":602},[169,842,648],{"class":175},[844,845,846],"blockquote",{},[156,847,848,852,853,855],{},[849,850,851],"strong",{},"Tip."," A prop the engine never sends to the GPU (a URL string, a shape object, a list) cannot be read in a ",[8,854,244],{}," body; reference it and WGSL reports the name as undefined.",[404,857,859],{"id":858},"see-also","See also",[861,862,863,877,892,900,912,924],"ul",{},[864,865,866,872,873,876],"li",{},[867,868,870],"a",{"href":869},"\u002Fdocs\u002Fprimitives\u002Fdefine\u002Fwgsl",[8,871,244],{}," — Write the per-pixel math by hand, as one WGSL function body that returns a ",[8,874,875],{},"vec4f"," color.",[864,878,879,884,885,888,889,230],{},[867,880,882],{"href":881},"\u002Fdocs\u002Fprimitives\u002Fdefine\u002Fregistershader",[8,883,394],{}," — Make a user-defined shader findable by its ",[8,886,887],{},"name",", so preset JSON can reference it as ",[8,890,891],{},"type: 'Halo'",[864,893,894,899],{},[867,895,897],{"href":896},"\u002Fdocs\u002Fprimitives\u002Fvalues\u002Fp",[8,898,156],{}," — Reference one of the definition's props by name, wherever a word asks for a value.",[864,901,902,907,908,911],{},[867,903,905],{"href":904},"\u002Fdocs\u002Fprimitives\u002Fslots\u002Fcrosses",[8,906,739],{}," — Rebuild the shader only when the prop crosses ",[8,909,910],{},"value",", not on every change.",[864,913,914,919,920,923],{},[867,915,917],{"href":916},"\u002Fdocs\u002Fprimitives\u002Fslots\u002Fiszero",[8,918,831],{}," — Skip the filter entirely while ",[8,921,922],{},"prop"," is exactly 0.",[864,925,926,932],{},[867,927,929],{"href":928},"\u002Fdocs\u002Fprimitives\u002Flists\u002Flistof",[8,930,931],{},"listOf"," — Read a list prop inside a hand-written builder: its live item count and each item's fields.",[934,935,936],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}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 .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":165,"searchDepth":470,"depth":470,"links":938},[939,940,941],{"id":406,"depth":470,"text":407},{"id":446,"depth":470,"text":447},{"id":858,"depth":470,"text":859},"define","defineShader & wgsl",false,"md","Defining a shader","function",{},"\u002Fdocs\u002Fprimitives\u002Fdefine\u002Fdefineshader",{"title":147,"description":158},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Flower.ts#L528","docs\u002Fprimitives\u002F1.define\u002F1.defineshader","peLEVlMh8keu85xUREVWFrtvcKYLOwYUaW04zxZqvE0"]