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