[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Fagentsim":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":667,"categorySlug":668,"categoryTitle":669,"curated":670,"description":671,"editUrl":672,"extension":673,"group":674,"groupTitle":675,"kind":676,"meta":677,"navigation":678,"path":679,"seo":680,"sourceUrl":681,"stem":682,"wordCount":672,"__hash__":683},"primitives\u002Fdocs\u002Fprimitives\u002F40.sim-agents\u002F1.agentsim.md","agentSim",{"type":133,"value":134,"toc":660},"minimark",[135,139,151,206,221,241,246,282,286,562,576,580,626,630,656],[136,137,131],"h1",{"id":138},"agentsim",[140,141,142,143,146,147,150],"p",{},"A simulation of many agents, spread into a definition: ",[10,144,145],{},"bake"," assembles the steps from your declared parts, ",[10,148,149],{},"frame"," writes the per-frame values, and the fragment samples the picture.",[152,153,158],"pre",{"className":154,"code":155,"language":156,"meta":157,"style":157},"language-ts shiki shiki-themes github-dark","agentSim\u003CTParams extends AnyWgslStruct>(cfg: AgentSimConfig\u003CTParams>): AgentSimSpread\n","ts","",[10,159,160],{"__ignoreMap":157},[161,162,165,169,173,177,180,183,187,190,193,196,198,201,203],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"s95oV","agentSim\u003C",[161,170,172],{"class":171},"svObZ","TParams",[161,174,176],{"class":175},"snl16"," extends",[161,178,179],{"class":171}," AnyWgslStruct",[161,181,182],{"class":167},">(",[161,184,186],{"class":185},"s9osk","cfg",[161,188,189],{"class":175},":",[161,191,192],{"class":171}," AgentSimConfig",[161,194,195],{"class":167},"\u003C",[161,197,172],{"class":171},[161,199,200],{"class":167},">)",[161,202,189],{"class":175},[161,204,205],{"class":171}," AgentSimSpread\n",[140,207,208,209,212,213,216,217,220],{},"Import ",[10,210,211],{},"sim"," from ",[10,214,215],{},"shaders\u002Fstd"," and use ",[10,218,219],{},"sim.agents.agentSim",".",[140,222,223,225,226,228,229,232,233,236,237,240],{},[10,224,145],{}," runs once per composition with the compile-time props (shape, color space) and returns the pipelines and their order. ",[10,227,149],{}," runs once per frame: read props, write ",[10,230,231],{},"sys.writeParams(...)",", return ",[10,234,235],{},"sys.frame({count})",". The spawn step runs before the first frame and again whenever ",[10,238,239],{},"reseed"," changes. Without a GPU the fragment shows the fallback.",[242,243,245],"h2",{"id":244},"parameters","Parameters",[247,248,249,265],"table",{},[250,251,252],"thead",{},[253,254,255,259,262],"tr",{},[256,257,258],"th",{},"Name",[256,260,261],{},"Type",[256,263,264],{},"Notes",[266,267,268],"tbody",{},[253,269,270,275,280],{},[271,272,273],"td",{},[10,274,186],{},[271,276,277],{},[10,278,279],{},"AgentSimConfig\u003CTParams>",[271,281],{},[242,283,285],{"id":284},"example","Example",[152,287,289],{"className":154,"code":288,"language":156,"meta":157,"style":157},"...agentSim\u003Ctypeof SimParams>({layout: simLayout, params: SimParams, maxAgents: 4096, countCap: {desktop: 4096, mobile: 1200}, output: {key: 'outTex', name: 'boidsTexture', size: [1024, 1024], format: 'rgba16float'}, bake: ({getCpuValue}) => { const render = boidsRender(getCpuValue('agentShape') as string); return {pipelines: {init: {kernel: boidsInitKernel, threads: 'max'}, update: {kernel: boidsUpdateKernel, threads: 'agents'}, splat: render.splat, resolve: render.resolve}, initStep: 'init', program: ['update', 'splat', 'resolve']} }, frame: (sys, {getCpuValue}) => (frameParams) => { const {dt, aspect} = readAgentFrame(frameParams); const count = sys.resolveCount(getCpuValue('count') as number); sys.writeParams({...}); return sys.frame({count}) }, fragment: {output: 'boidsTexture', fallback: 'transparent'}})\n",[10,290,291],{"__ignoreMap":157},[161,292,293,296,298,300,303,306,310,313,315,318,321,324,328,331,334,337,340,343,345,348,351,354,356,359,362,365,368,371,374,377,380,383,386,388,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,434,437,439,442,445,447,450,453,456,458,460,462,465,468,470,472,474,476,479,482,484,487,490,493,496,499,501,504,506,509,512,514,516,518,521,523,525,528,531,534,537,539,542,544,546,548,551,553,556,559],{"class":163,"line":164},[161,294,295],{"class":175},"...",[161,297,131],{"class":171},[161,299,195],{"class":167},[161,301,302],{"class":175},"typeof",[161,304,305],{"class":167}," SimParams>({layout: simLayout, params: SimParams, maxAgents: ",[161,307,309],{"class":308},"sDLfK","4096",[161,311,312],{"class":167},", countCap: {desktop: ",[161,314,309],{"class":308},[161,316,317],{"class":167},", mobile: ",[161,319,320],{"class":308},"1200",[161,322,323],{"class":167},"}, output: {key: ",[161,325,327],{"class":326},"sU2Wk","'outTex'",[161,329,330],{"class":167},", name: ",[161,332,333],{"class":326},"'boidsTexture'",[161,335,336],{"class":167},", size: [",[161,338,339],{"class":308},"1024",[161,341,342],{"class":167},", ",[161,344,339],{"class":308},[161,346,347],{"class":167},"], format: ",[161,349,350],{"class":326},"'rgba16float'",[161,352,353],{"class":167},"}, ",[161,355,145],{"class":171},[161,357,358],{"class":167},": ({",[161,360,361],{"class":185},"getCpuValue",[161,363,364],{"class":167},"}) ",[161,366,367],{"class":175},"=>",[161,369,370],{"class":167}," { ",[161,372,373],{"class":175},"const",[161,375,376],{"class":308}," render",[161,378,379],{"class":175}," =",[161,381,382],{"class":171}," boidsRender",[161,384,385],{"class":167},"(",[161,387,361],{"class":171},[161,389,385],{"class":167},[161,391,392],{"class":326},"'agentShape'",[161,394,395],{"class":167},") ",[161,397,398],{"class":175},"as",[161,400,401],{"class":308}," string",[161,403,404],{"class":167},"); ",[161,406,407],{"class":175},"return",[161,409,410],{"class":167}," {pipelines: {init: {kernel: boidsInitKernel, threads: ",[161,412,413],{"class":326},"'max'",[161,415,416],{"class":167},"}, update: {kernel: boidsUpdateKernel, threads: ",[161,418,419],{"class":326},"'agents'",[161,421,422],{"class":167},"}, splat: render.splat, resolve: render.resolve}, initStep: ",[161,424,425],{"class":326},"'init'",[161,427,428],{"class":167},", program: [",[161,430,431],{"class":326},"'update'",[161,433,342],{"class":167},[161,435,436],{"class":326},"'splat'",[161,438,342],{"class":167},[161,440,441],{"class":326},"'resolve'",[161,443,444],{"class":167},"]} }, ",[161,446,149],{"class":171},[161,448,449],{"class":167},": (",[161,451,452],{"class":185},"sys",[161,454,455],{"class":167},", {",[161,457,361],{"class":185},[161,459,364],{"class":167},[161,461,367],{"class":175},[161,463,464],{"class":167}," (",[161,466,467],{"class":185},"frameParams",[161,469,395],{"class":167},[161,471,367],{"class":175},[161,473,370],{"class":167},[161,475,373],{"class":175},[161,477,478],{"class":167}," {",[161,480,481],{"class":308},"dt",[161,483,342],{"class":167},[161,485,486],{"class":308},"aspect",[161,488,489],{"class":167},"} ",[161,491,492],{"class":175},"=",[161,494,495],{"class":171}," readAgentFrame",[161,497,498],{"class":167},"(frameParams); ",[161,500,373],{"class":175},[161,502,503],{"class":308}," count",[161,505,379],{"class":175},[161,507,508],{"class":167}," sys.",[161,510,511],{"class":171},"resolveCount",[161,513,385],{"class":167},[161,515,361],{"class":171},[161,517,385],{"class":167},[161,519,520],{"class":326},"'count'",[161,522,395],{"class":167},[161,524,398],{"class":175},[161,526,527],{"class":308}," number",[161,529,530],{"class":167},"); sys.",[161,532,533],{"class":171},"writeParams",[161,535,536],{"class":167},"({",[161,538,295],{"class":175},[161,540,541],{"class":167},"}); ",[161,543,407],{"class":175},[161,545,508],{"class":167},[161,547,149],{"class":171},[161,549,550],{"class":167},"({count}) }, fragment: {output: ",[161,552,333],{"class":326},[161,554,555],{"class":167},", fallback: ",[161,557,558],{"class":326},"'transparent'",[161,560,561],{"class":167},"}})\n",[563,564,565],"blockquote",{},[140,566,567,571,572,575],{},[568,569,570],"strong",{},"Tip."," Clamp the count prop with ",[10,573,574],{},"sys.resolveCount"," rather than reading it raw, so a desktop preset still loads on a phone.",[242,577,579],{"id":578},"see-also","See also",[581,582,583,594,603,612,617],"ul",{},[584,585,586,593],"li",{},[587,588,590],"a",{"href":589},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents",[10,591,592],{},"renderAgents"," — How the agents are drawn, as one declared part: a splat (each agent stamps its shape into a shared canvas) paired with the matching resolve (the canvas becomes the output picture).",[584,595,596,602],{},[587,597,599],{"href":598},"\u002Fdocs\u002Fprimitives\u002Fsim-agentforces\u002Fintegrator",[10,600,601],{},"integrator"," — The update step of an agent simulation: one per kind of agent.",[584,604,605,611],{},[587,606,608],{"href":607},"\u002Fdocs\u002Fprimitives\u002Fsim-agentforces\u002Fforce",[10,609,610],{},"force"," — The pushes an agent can feel.",[584,613,614],{},[10,615,616],{},"agentFrame",[584,618,619,625],{},[587,620,622],{"href":621},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fsimulate",[10,623,624],{},"simulate"," — Declare a simulation the engine runs for you.",[242,627,629],{"id":628},"used-by","Used by",[140,631,632,342,636,342,640,342,644,342,648,342,652],{},[587,633,635],{"href":634},"\u002Fdocs\u002Fcomponents\u002Fboids","Boids",[587,637,639],{"href":638},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles","FloatingParticles",[587,641,643],{"href":642},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings","MagneticFilings",[587,645,647],{"href":646},"\u002Fdocs\u002Fcomponents\u002Fparticlefield","ParticleField",[587,649,651],{"href":650},"\u002Fdocs\u002Fcomponents\u002Fparticleflow","ParticleFlow",[587,653,655],{"href":654},"\u002Fdocs\u002Fcomponents\u002Fparticles","Particles",[657,658,659],"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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":157,"searchDepth":661,"depth":661,"links":662},2,[663,664,665,666],{"id":244,"depth":661,"text":245},{"id":284,"depth":661,"text":285},{"id":578,"depth":661,"text":579},{"id":628,"depth":661,"text":629},"sim.agents","sim-agents","Agents",false,"A simulation of many agents, spread into a definition: `bake` assembles the steps from your declared parts, `frame` writes the per-frame values, and the fragment samples the picture.",null,"md","simulation","Simulation","function",{},true,"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Fagentsim",{"title":131,"description":671},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim\u002Fagents.ts#L289","docs\u002Fprimitives\u002F40.sim-agents\u002F1.agentsim","UavDP6YpdDPMuW05WllsKLsbVV1hf5oTC8CPhqNP--A"]