[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Flists\u002Faccumulate":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":630,"categorySlug":630,"categoryTitle":631,"curated":632,"description":157,"editUrl":9,"extension":633,"group":634,"groupTitle":635,"kind":636,"meta":637,"navigation":638,"path":639,"seo":640,"sourceUrl":641,"stem":642,"wordCount":9,"__hash__":643},"primitives\u002Fdocs\u002Fprimitives\u002F5.lists\u002F2.accumulate.md","accumulate",{"type":149,"value":150,"toc":624},"minimark",[151,154,158,241,251,279,284,353,357,592,596,610,614,620],[152,153,147],"h1",{"id":147},[155,156,157],"p",{},"Add up a per-item value over every item of a list, in a real GPU loop over the live count.",[159,160,165],"pre",{"className":161,"code":162,"language":163,"meta":164,"style":164},"language-ts shiki shiki-themes github-dark","accumulate(\n  list: ListRef,\n  body: (i: Expr) =,\n> Expr, opts: {zero?: 'f32' | 'vec3f'; deps?: Expr[]; hint?: string} = {}): Expr\n","ts","",[8,166,167,179,185,205],{"__ignoreMap":164},[168,169,172,175],"span",{"class":170,"line":171},"line",1,[168,173,147],{"class":174},"svObZ",[168,176,178],{"class":177},"s95oV","(\n",[168,180,182],{"class":170,"line":181},2,[168,183,184],{"class":177},"  list: ListRef,\n",[168,186,188,191,195,199,202],{"class":170,"line":187},3,[168,189,190],{"class":177},"  body: (",[168,192,194],{"class":193},"s9osk","i",[168,196,198],{"class":197},"snl16",":",[168,200,201],{"class":174}," Expr",[168,203,204],{"class":177},") =,\n",[168,206,208,211,215,218,221,224,227,230,232,235,238],{"class":170,"line":207},4,[168,209,210],{"class":177},"> Expr, opts: {zero?: ",[168,212,214],{"class":213},"sU2Wk","'f32'",[168,216,217],{"class":197}," |",[168,219,220],{"class":213}," 'vec3f'",[168,222,223],{"class":177},"; deps",[168,225,226],{"class":197},"?:",[168,228,229],{"class":177}," Expr[]; hint",[168,231,226],{"class":197},[168,233,234],{"class":177}," string} ",[168,236,237],{"class":197},"=",[168,239,240],{"class":177}," {}): Expr\n",[155,242,243,244,246,247,250],{},"Import ",[8,245,147],{}," from ",[8,248,249],{},"shaders\u002Fstd",".",[155,252,253,256,257,259,260,263,264,266,267,270,271,274,275,278],{},[8,254,255],{},"body(i)"," returns the value for item ",[8,258,194],{},". ",[8,261,262],{},"zero"," picks the sum's type: ",[8,265,214],{}," (default) or ",[8,268,269],{},"'vec3f'"," for a color. Anything the body reads that was computed outside the loop (a normal, a surface point) goes in ",[8,272,273],{},"deps",", so it is emitted once before the loop instead of inside it. ",[8,276,277],{},"hint"," names the sum in the generated code.",[280,281,283],"h2",{"id":282},"parameters","Parameters",[285,286,287,303],"table",{},[288,289,290],"thead",{},[291,292,293,297,300],"tr",{},[294,295,296],"th",{},"Name",[294,298,299],{},"Type",[294,301,302],{},"Notes",[304,305,306,321,335],"tbody",{},[291,307,308,314,319],{},[309,310,311],"td",{},[8,312,313],{},"list",[309,315,316],{},[8,317,318],{},"ListRef",[309,320],{},[291,322,323,328,333],{},[309,324,325],{},[8,326,327],{},"body",[309,329,330],{},[8,331,332],{},"(i: Expr) => Expr",[309,334],{},[291,336,337,342,347],{},[309,338,339],{},[8,340,341],{},"opts",[309,343,344],{},[8,345,346],{},"{zero?: 'f32' | 'vec3f'; deps?: Expr[]; hint?: string}",[309,348,349,350,250],{},"Optional. Default ",[8,351,352],{},"{}",[280,354,356],{"id":355},"example","Example",[159,358,360],{"className":161,"code":359,"language":163,"meta":164,"style":164},"const lights = listOf(params, 'lights')\nconst rgb = accumulate(lights, (i) => {\n  const light = lights.at(i)\n  const pos = light.position('position')\n  const d = length(sub(uv, vec2(pos.member('x'), sub(1, pos.member('y')))))\n  return mul(light.color('color').member('rgb'), div(light.number('intensity'), add(1, mul(d, d))))\n}, {zero: 'vec3f', deps: [uv], hint: 'lightSum'})\n",[8,361,362,386,412,431,454,512,575],{"__ignoreMap":164},[168,363,364,367,371,374,377,380,383],{"class":170,"line":171},[168,365,366],{"class":197},"const",[168,368,370],{"class":369},"sDLfK"," lights",[168,372,373],{"class":197}," =",[168,375,376],{"class":174}," listOf",[168,378,379],{"class":177},"(params, ",[168,381,382],{"class":213},"'lights'",[168,384,385],{"class":177},")\n",[168,387,388,390,393,395,398,401,403,406,409],{"class":170,"line":181},[168,389,366],{"class":197},[168,391,392],{"class":369}," rgb",[168,394,373],{"class":197},[168,396,397],{"class":174}," accumulate",[168,399,400],{"class":177},"(lights, (",[168,402,194],{"class":193},[168,404,405],{"class":177},") ",[168,407,408],{"class":197},"=>",[168,410,411],{"class":177}," {\n",[168,413,414,417,420,422,425,428],{"class":170,"line":187},[168,415,416],{"class":197},"  const",[168,418,419],{"class":369}," light",[168,421,373],{"class":197},[168,423,424],{"class":177}," lights.",[168,426,427],{"class":174},"at",[168,429,430],{"class":177},"(i)\n",[168,432,433,435,438,440,443,446,449,452],{"class":170,"line":207},[168,434,416],{"class":197},[168,436,437],{"class":369}," pos",[168,439,373],{"class":197},[168,441,442],{"class":177}," light.",[168,444,445],{"class":174},"position",[168,447,448],{"class":177},"(",[168,450,451],{"class":213},"'position'",[168,453,385],{"class":177},[168,455,457,459,462,464,467,469,472,475,478,481,484,486,489,492,494,496,499,502,504,506,509],{"class":170,"line":456},5,[168,458,416],{"class":197},[168,460,461],{"class":369}," d",[168,463,373],{"class":197},[168,465,466],{"class":174}," length",[168,468,448],{"class":177},[168,470,471],{"class":174},"sub",[168,473,474],{"class":177},"(uv, ",[168,476,477],{"class":174},"vec2",[168,479,480],{"class":177},"(pos.",[168,482,483],{"class":174},"member",[168,485,448],{"class":177},[168,487,488],{"class":213},"'x'",[168,490,491],{"class":177},"), ",[168,493,471],{"class":174},[168,495,448],{"class":177},[168,497,498],{"class":369},"1",[168,500,501],{"class":177},", pos.",[168,503,483],{"class":174},[168,505,448],{"class":177},[168,507,508],{"class":213},"'y'",[168,510,511],{"class":177},")))))\n",[168,513,515,518,521,524,527,529,532,535,537,539,542,544,547,549,552,554,557,559,562,564,566,569,572],{"class":170,"line":514},6,[168,516,517],{"class":197},"  return",[168,519,520],{"class":174}," mul",[168,522,523],{"class":177},"(light.",[168,525,526],{"class":174},"color",[168,528,448],{"class":177},[168,530,531],{"class":213},"'color'",[168,533,534],{"class":177},").",[168,536,483],{"class":174},[168,538,448],{"class":177},[168,540,541],{"class":213},"'rgb'",[168,543,491],{"class":177},[168,545,546],{"class":174},"div",[168,548,523],{"class":177},[168,550,551],{"class":174},"number",[168,553,448],{"class":177},[168,555,556],{"class":213},"'intensity'",[168,558,491],{"class":177},[168,560,561],{"class":174},"add",[168,563,448],{"class":177},[168,565,498],{"class":369},[168,567,568],{"class":177},", ",[168,570,571],{"class":174},"mul",[168,573,574],{"class":177},"(d, d))))\n",[168,576,578,581,583,586,589],{"class":170,"line":577},7,[168,579,580],{"class":177},"}, {zero: ",[168,582,269],{"class":213},[168,584,585],{"class":177},", deps: [uv], hint: ",[168,587,588],{"class":213},"'lightSum'",[168,590,591],{"class":177},"})\n",[280,593,595],{"id":594},"see-also","See also",[597,598,599],"ul",{},[600,601,602,609],"li",{},[603,604,606],"a",{"href":605},"\u002Fdocs\u002Fprimitives\u002Flists\u002Flistof",[8,607,608],{},"listOf"," — Read a list prop inside a hand-written builder: its live item count and each item's fields.",[280,611,613],{"id":612},"used-by","Used by",[155,615,616],{},[603,617,619],{"href":618},"\u002Fdocs\u002Fcomponents\u002Firradiance","Irradiance",[621,622,623],"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 pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}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 .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}",{"title":164,"searchDepth":181,"depth":181,"links":625},[626,627,628,629],{"id":282,"depth":181,"text":283},{"id":355,"depth":181,"text":356},{"id":594,"depth":181,"text":595},{"id":612,"depth":181,"text":613},"lists","List props",false,"md","define","Defining a shader","function",{},true,"\u002Fdocs\u002Fprimitives\u002Flists\u002Faccumulate",{"title":147,"description":157},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Flists.ts#L98","docs\u002Fprimitives\u002F5.lists\u002F2.accumulate","G3l6YulSwqYZwaWgTFfvBQqu-dTp9GbWWNPTYXiDOQ4"]