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