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