[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fsim-grids":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":1061,"categorySlug":1062,"categoryTitle":1063,"curated":479,"description":1064,"editUrl":1065,"extension":1066,"group":1067,"groupTitle":1068,"kind":1063,"meta":1069,"navigation":479,"path":1070,"seo":1071,"sourceUrl":1072,"stem":1073,"wordCount":627,"__hash__":1074},"primitives\u002Fdocs\u002Fprimitives\u002F37.sim-grids\u002Findex.md","Grid programs",{"type":133,"value":134,"toc":1055},"minimark",[135,139,225,233,262,291,296,454,458,796,800,894,898,1051],[136,137,131],"h1",{"id":138},"grid-programs",[140,141,142,143,150,151,155,156,159,160,166,167,166,173,179,180,186,187,166,193,166,199,166,205,166,211,217,218,224],"p",{},"A grid simulation is a fixed-size field of cells (a displacement per cell, two chemical\nconcentrations, a sort offset) that changes a little every frame. ",[144,145,147],"a",{"href":146},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fgridsim",[10,148,149],{},"gridSim"," runs it: you\ndescribe the frame as an ordered list of ",[152,153,154],"strong",{},"stages"," built with ",[10,157,158],{},"op.*",", and the engine runs that\nlist every frame, owning the clock, the frame-delta clamp, the ready gate, the settle gate and\nthe outputs the layer samples. A stage is bookkeeping (",[144,161,163],{"href":162},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-host",[10,164,165],{},"op.host",", ",[144,168,170],{"href":169},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-values",[10,171,172],{},"op.values",[144,174,176],{"href":175},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-readywhen",[10,177,178],{},"op.readyWhen",",\n",[144,181,183],{"href":182},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-settle",[10,184,185],{},"op.settle",") or work (",[144,188,190],{"href":189},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-pass",[10,191,192],{},"op.pass",[144,194,196],{"href":195},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-cache",[10,197,198],{},"op.cache",[144,200,202],{"href":201},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-seedonce",[10,203,204],{},"op.seedOnce",[144,206,208],{"href":207},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-iterate",[10,209,210],{},"op.iterate",[144,212,214],{"href":213},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-sortpass",[10,215,216],{},"op.sortPass","), and\nevery frame ends with ",[144,219,221],{"href":220},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-publish",[10,222,223],{},"op.publish",", which writes the state into the texture the fragment reads.",[140,226,227,228,232],{},"The build callback runs once per instance of the layer and returns the outputs, the clamp and\nthe stages; anything it creates (buffers, passes, trackers) belongs to that instance. A settled\nfield costs nothing: once ",[144,229,230],{"href":182},[10,231,185],{}," sees nothing driving it, frames are skipped and the last\npublished picture stays on screen.",[140,234,235,236,239,240,243,244,250,251,257,258,261],{},"Two shortcuts sit on top. The pointer fields in ",[10,237,238],{},"effects.pointerFields"," are whole grid programs\nyou spread as ",[10,241,242],{},"...gridSim(springLatticeField({...}))"," and read with a warp map. And for a small\nfield whose arithmetic reads better as JavaScript loops, ",[144,245,247],{"href":246},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fhostgridprogram",[10,248,249],{},"hostGridProgram"," runs the same named\nsteps on the CPU and ",[144,252,254],{"href":253},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fhostfieldtexture",[10,255,256],{},"hostFieldTexture"," uploads the cells as a texture. When a wave field and a\ndisplacement are all you need, declare them with ",[10,259,260],{},"simulate.grid"," instead.",[263,264,269],"pre",{"className":265,"code":266,"language":267,"meta":268,"style":268},"language-ts shiki shiki-themes github-dark","import {sim} from 'shaders\u002Fstd'\n","ts","",[10,270,271],{"__ignoreMap":268},[272,273,276,280,284,287],"span",{"class":274,"line":275},"line",1,[272,277,279],{"class":278},"snl16","import",[272,281,283],{"class":282},"s95oV"," {sim} ",[272,285,286],{"class":278},"from",[272,288,290],{"class":289},"sU2Wk"," 'shaders\u002Fstd'\n",[292,293,295],"h2",{"id":294},"reach-for-it-when","Reach for it when",[297,298,299,312],"table",{},[300,301,302],"thead",{},[303,304,305,309],"tr",{},[306,307,308],"th",{},"When you need",[306,310,311],{},"Use",[313,314,315,332,353,370,381,397,408,419,432],"tbody",{},[303,316,317,321],{},[318,319,320],"td",{},"liquid or fabric that ripples after the cursor pushes it",[318,322,323,327,328,331],{},[144,324,325],{"href":146},[10,326,149],{}," with ",[10,329,330],{},"springLatticeField"," and a warp map",[303,333,334,337],{},[318,335,336],{},"a rule that must run N times per frame (reaction-diffusion)",[318,338,339,343,344,348,349],{},[144,340,341],{"href":207},[10,342,210],{}," after ",[144,345,346],{"href":169},[10,347,172],{},", then ",[144,350,351],{"href":220},[10,352,223],{},[303,354,355,358],{},[318,356,357],{},"a sort that settles a little more every frame",[318,359,360,364,365,369],{},[144,361,362],{"href":213},[10,363,216],{},", with ",[144,366,367],{"href":220},[10,368,223],{}," reading its side",[303,371,372,375],{},[318,373,374],{},"the state must be reset on the first frame or a seed change",[318,376,377],{},[144,378,379],{"href":201},[10,380,204],{},[303,382,383,386],{},[318,384,385],{},"a pass that needs the child's picture, which arrives late",[318,387,388,392,393],{},[144,389,390],{"href":175},[10,391,178],{}," and ",[144,394,395],{"href":195},[10,396,198],{},[303,398,399,402],{},[318,400,401],{},"the simulation should sleep once nothing drives it",[318,403,404],{},[144,405,406],{"href":182},[10,407,185],{},[303,409,410,413],{},[318,411,412],{},"this frame's values written before the passes read them",[318,414,415],{},[144,416,417],{"href":169},[10,418,172],{},[303,420,421,424],{},[318,422,423],{},"the canvas size or aspect inside a stage",[318,425,426],{},[144,427,429],{"href":428},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Ftrackedviewport",[10,430,431],{},"trackedViewport",[303,433,434,437],{},[318,435,436],{},"a small field stepped in plain JavaScript",[318,438,439,327,443,449,450],{},[144,440,441],{"href":246},[10,442,249],{},[144,444,446],{"href":445},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fhoststep",[10,447,448],{},"hostStep",", published by ",[144,451,452],{"href":253},[10,453,256],{},[292,455,457],{"id":456},"example","Example",[263,459,461],{"className":265,"code":460,"language":267,"meta":268,"style":268},"import {defineShader, p, sim, effects, warps, transformEdges} from 'shaders\u002Fstd'\n\nconst {gridSim} = sim.grids\nconst {springLatticeField} = effects.pointerFields\n\n\u002F\u002F Liquify: a spring lattice the cursor pushes, published as a displacement field the warp map reads.\n\u002F\u002F The pointer field packages the whole stage list (pointer tracking, values, the step passes, the\n\u002F\u002F settle gate, publish); this definition only names the props and the output.\nexport const Liquify = defineShader({\n  name: 'Liquify',\n  usesPointer: true,\n  props: {\n    intensity: {default: 10},\n    stiffness: {default: 3},\n    damping: {default: 3},\n    radius: {default: 1},\n    edges: {default: 'stretch', transform: transformEdges, compileTime: true},\n  },\n  ...gridSim(springLatticeField({\n    stiffness: p('stiffness'), damping: p('damping'), radius: p('radius'),\n    output: 'displacement',\n  })),\n  \u002F\u002F Bend the incoming coordinate by the field, scaled by intensity, then handle the edges.\n  map: warps.liquidDisplace({intensity: p('intensity'), output: 'displacement'}),\n  \u002F\u002F Before the field exists (no GPU yet), the warp passes the layer through untouched.\n  uvRemapIdentityWhen: ({computeOutputs}) => !computeOutputs?.displacement,\n})\n",[10,462,463,474,481,502,518,523,530,536,542,564,575,586,592,604,615,625,636,652,658,673,709,720,726,732,759,765,790],{"__ignoreMap":268},[272,464,465,467,470,472],{"class":274,"line":275},[272,466,279],{"class":278},[272,468,469],{"class":282}," {defineShader, p, sim, effects, warps, transformEdges} ",[272,471,286],{"class":278},[272,473,290],{"class":289},[272,475,477],{"class":274,"line":476},2,[272,478,480],{"emptyLinePlaceholder":479},true,"\n",[272,482,484,487,490,493,496,499],{"class":274,"line":483},3,[272,485,486],{"class":278},"const",[272,488,489],{"class":282}," {",[272,491,149],{"class":492},"sDLfK",[272,494,495],{"class":282},"} ",[272,497,498],{"class":278},"=",[272,500,501],{"class":282}," sim.grids\n",[272,503,505,507,509,511,513,515],{"class":274,"line":504},4,[272,506,486],{"class":278},[272,508,489],{"class":282},[272,510,330],{"class":492},[272,512,495],{"class":282},[272,514,498],{"class":278},[272,516,517],{"class":282}," effects.pointerFields\n",[272,519,521],{"class":274,"line":520},5,[272,522,480],{"emptyLinePlaceholder":479},[272,524,526],{"class":274,"line":525},6,[272,527,529],{"class":528},"sAwPA","\u002F\u002F Liquify: a spring lattice the cursor pushes, published as a displacement field the warp map reads.\n",[272,531,533],{"class":274,"line":532},7,[272,534,535],{"class":528},"\u002F\u002F The pointer field packages the whole stage list (pointer tracking, values, the step passes, the\n",[272,537,539],{"class":274,"line":538},8,[272,540,541],{"class":528},"\u002F\u002F settle gate, publish); this definition only names the props and the output.\n",[272,543,545,548,551,554,557,561],{"class":274,"line":544},9,[272,546,547],{"class":278},"export",[272,549,550],{"class":278}," const",[272,552,553],{"class":492}," Liquify",[272,555,556],{"class":278}," =",[272,558,560],{"class":559},"svObZ"," defineShader",[272,562,563],{"class":282},"({\n",[272,565,567,570,573],{"class":274,"line":566},10,[272,568,569],{"class":282},"  name: ",[272,571,572],{"class":289},"'Liquify'",[272,574,179],{"class":282},[272,576,578,581,584],{"class":274,"line":577},11,[272,579,580],{"class":282},"  usesPointer: ",[272,582,583],{"class":492},"true",[272,585,179],{"class":282},[272,587,589],{"class":274,"line":588},12,[272,590,591],{"class":282},"  props: {\n",[272,593,595,598,601],{"class":274,"line":594},13,[272,596,597],{"class":282},"    intensity: {default: ",[272,599,600],{"class":492},"10",[272,602,603],{"class":282},"},\n",[272,605,607,610,613],{"class":274,"line":606},14,[272,608,609],{"class":282},"    stiffness: {default: ",[272,611,612],{"class":492},"3",[272,614,603],{"class":282},[272,616,618,621,623],{"class":274,"line":617},15,[272,619,620],{"class":282},"    damping: {default: ",[272,622,612],{"class":492},[272,624,603],{"class":282},[272,626,628,631,634],{"class":274,"line":627},16,[272,629,630],{"class":282},"    radius: {default: ",[272,632,633],{"class":492},"1",[272,635,603],{"class":282},[272,637,639,642,645,648,650],{"class":274,"line":638},17,[272,640,641],{"class":282},"    edges: {default: ",[272,643,644],{"class":289},"'stretch'",[272,646,647],{"class":282},", transform: transformEdges, compileTime: ",[272,649,583],{"class":492},[272,651,603],{"class":282},[272,653,655],{"class":274,"line":654},18,[272,656,657],{"class":282},"  },\n",[272,659,661,664,666,669,671],{"class":274,"line":660},19,[272,662,663],{"class":278},"  ...",[272,665,149],{"class":559},[272,667,668],{"class":282},"(",[272,670,330],{"class":559},[272,672,563],{"class":282},[272,674,676,679,681,683,686,689,691,693,696,699,701,703,706],{"class":274,"line":675},20,[272,677,678],{"class":282},"    stiffness: ",[272,680,140],{"class":559},[272,682,668],{"class":282},[272,684,685],{"class":289},"'stiffness'",[272,687,688],{"class":282},"), damping: ",[272,690,140],{"class":559},[272,692,668],{"class":282},[272,694,695],{"class":289},"'damping'",[272,697,698],{"class":282},"), radius: ",[272,700,140],{"class":559},[272,702,668],{"class":282},[272,704,705],{"class":289},"'radius'",[272,707,708],{"class":282},"),\n",[272,710,712,715,718],{"class":274,"line":711},21,[272,713,714],{"class":282},"    output: ",[272,716,717],{"class":289},"'displacement'",[272,719,179],{"class":282},[272,721,723],{"class":274,"line":722},22,[272,724,725],{"class":282},"  })),\n",[272,727,729],{"class":274,"line":728},23,[272,730,731],{"class":528},"  \u002F\u002F Bend the incoming coordinate by the field, scaled by intensity, then handle the edges.\n",[272,733,735,738,741,744,746,748,751,754,756],{"class":274,"line":734},24,[272,736,737],{"class":282},"  map: warps.",[272,739,740],{"class":559},"liquidDisplace",[272,742,743],{"class":282},"({intensity: ",[272,745,140],{"class":559},[272,747,668],{"class":282},[272,749,750],{"class":289},"'intensity'",[272,752,753],{"class":282},"), output: ",[272,755,717],{"class":289},[272,757,758],{"class":282},"}),\n",[272,760,762],{"class":274,"line":761},25,[272,763,764],{"class":528},"  \u002F\u002F Before the field exists (no GPU yet), the warp passes the layer through untouched.\n",[272,766,768,771,774,778,781,784,787],{"class":274,"line":767},26,[272,769,770],{"class":559},"  uvRemapIdentityWhen",[272,772,773],{"class":282},": ({",[272,775,777],{"class":776},"s9osk","computeOutputs",[272,779,780],{"class":282},"}) ",[272,782,783],{"class":278},"=>",[272,785,786],{"class":278}," !",[272,788,789],{"class":282},"computeOutputs?.displacement,\n",[272,791,793],{"class":274,"line":792},27,[272,794,795],{"class":282},"})\n",[292,797,799],{"id":798},"types","Types",[297,801,802,812],{},[300,803,804],{},[303,805,806,809],{},[306,807,808],{},"Type",[306,810,811],{},"What it is",[313,813,814,824,834,844,854,864,874,884],{},[303,815,816,821],{},[318,817,818],{},[10,819,820],{},"GridFrame",[318,822,823],{},"One frame, as every stage sees it: the clamped delta, the clock, and your props.",[303,825,826,831],{},[318,827,828],{},[10,829,830],{},"GridFrameParams",[318,832,833],{},"What the renderer reports each frame: the pointer in uv, the frame delta in seconds, the canvas size in pixels.",[303,835,836,841],{},[318,837,838],{},[10,839,840],{},"GridRoot",[318,842,843],{},"The GPU device handle the build callback receives, for creating the buffers and passes your stages use.",[303,845,846,851],{},[318,847,848],{},[10,849,850],{},"GridSimConfig",[318,852,853],{},"What a GPU grid simulation declares: its outputs, its frame-delta clamp, and its stages.",[303,855,856,861],{},[318,857,858],{},[10,859,860],{},"GridStage",[318,862,863],{},"One stage of the frame.",[303,865,866,871],{},[318,867,868],{},[10,869,870],{},"HostFrame",[318,872,873],{},"One frame of a JavaScript-stepped grid: the clamped delta, the clock and the pointer in uv.",[303,875,876,881],{},[318,877,878],{},[10,879,880],{},"HostStep",[318,882,883],{},"One named JavaScript step.",[303,885,886,891],{},[318,887,888],{},[10,889,890],{},"SortPassStage",[318,892,893],{},"A sort chain's stage, which also reports which of its two buffers holds the current result.",[292,895,897],{"id":896},"words","Words",[899,900,902],"primitive-words",{":words":901},"[{\"name\":\"gridSim\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fgridsim\",\"summary\":\"A field of cells advanced every frame by an ordered list of stages.\"},{\"name\":\"op\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop\",\"summary\":\"The stages a grid frame is built from.\"},{\"name\":\"op.values\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-values\",\"summary\":\"A named step that writes this frame's values for the passes after it.\"},{\"name\":\"op.pass\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-pass\",\"summary\":\"One GPU pass, the same every frame.\"},{\"name\":\"op.publish\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-publish\",\"summary\":\"The last stage: write the state into the texture the layer samples.\"},{\"name\":\"op.iterate\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-iterate\",\"summary\":\"Run a step `count` times this frame.\"},{\"name\":\"op.seedOnce\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-seedonce\",\"summary\":\"A one-shot reset run before the rest of the frame whenever `staleWhen` says the state is stale: on the first frame, or when a seed prop changes.\"},{\"name\":\"op.sortPass\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-sortpass\",\"summary\":\"A compare-and-swap sort that converges a little more every frame: `passes` swaps per frame, alternating odd and even pairs and the two buffers.\"},{\"name\":\"op.cache\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-cache\",\"summary\":\"A GPU pass chosen per frame, for a pass whose input is rebound after the frame starts.\"},{\"name\":\"op.readyWhen\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-readywhen\",\"summary\":\"Run nothing until `fn` returns true, typically once the child's picture has arrived through `bindInputs`.\"},{\"name\":\"op.settle\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-settle\",\"summary\":\"Sleep the simulation once nothing has driven it for `settleMs` of simulated time.\"},{\"name\":\"op.host\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop-host\",\"summary\":\"A named step that runs before any gate: pointer smoothing, activity flags, anything a later `settle` needs to know.\"},{\"name\":\"trackedViewport\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Ftrackedviewport\",\"summary\":\"The canvas size in pixels, kept current across resizes, in the two forms a stage wants.\"},{\"name\":\"hostGridProgram\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fhostgridprogram\",\"summary\":\"A frame program for a small grid stepped in plain JavaScript: the steps run in order every frame until one returns `'skip'`.\"},{\"name\":\"hostStep\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fhoststep\",\"summary\":\"One named step of a JavaScript-stepped grid.\"},{\"name\":\"hostFieldTexture\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fhostfieldtexture\",\"summary\":\"The texture a JavaScript-stepped grid is read through.\"}]",[903,904,905,913,922,929,936,943,954,965,976,983,998,1009,1020,1027,1037,1044],"ul",{},[906,907,908,912],"li",{},[144,909,910],{"href":146},[10,911,149],{}," — A field of cells advanced every frame by an ordered list of stages.",[906,914,915,921],{},[144,916,918],{"href":917},"\u002Fdocs\u002Fprimitives\u002Fsim-grids\u002Fop",[10,919,920],{},"op"," — The stages a grid frame is built from.",[906,923,924,928],{},[144,925,926],{"href":169},[10,927,172],{}," — A named step that writes this frame's values for the passes after it.",[906,930,931,935],{},[144,932,933],{"href":189},[10,934,192],{}," — One GPU pass, the same every frame.",[906,937,938,942],{},[144,939,940],{"href":220},[10,941,223],{}," — The last stage: write the state into the texture the layer samples.",[906,944,945,949,950,953],{},[144,946,947],{"href":207},[10,948,210],{}," — Run a step ",[10,951,952],{},"count"," times this frame.",[906,955,956,960,961,964],{},[144,957,958],{"href":201},[10,959,204],{}," — A one-shot reset run before the rest of the frame whenever ",[10,962,963],{},"staleWhen"," says the state is stale: on the first frame, or when a seed prop changes.",[906,966,967,971,972,975],{},[144,968,969],{"href":213},[10,970,216],{}," — A compare-and-swap sort that converges a little more every frame: ",[10,973,974],{},"passes"," swaps per frame, alternating odd and even pairs and the two buffers.",[906,977,978,982],{},[144,979,980],{"href":195},[10,981,198],{}," — A GPU pass chosen per frame, for a pass whose input is rebound after the frame starts.",[906,984,985,989,990,993,994,997],{},[144,986,987],{"href":175},[10,988,178],{}," — Run nothing until ",[10,991,992],{},"fn"," returns true, typically once the child's picture has arrived through ",[10,995,996],{},"bindInputs",".",[906,999,1000,1004,1005,1008],{},[144,1001,1002],{"href":182},[10,1003,185],{}," — Sleep the simulation once nothing has driven it for ",[10,1006,1007],{},"settleMs"," of simulated time.",[906,1010,1011,1015,1016,1019],{},[144,1012,1013],{"href":162},[10,1014,165],{}," — A named step that runs before any gate: pointer smoothing, activity flags, anything a later ",[10,1017,1018],{},"settle"," needs to know.",[906,1021,1022,1026],{},[144,1023,1024],{"href":428},[10,1025,431],{}," — The canvas size in pixels, kept current across resizes, in the two forms a stage wants.",[906,1028,1029,1033,1034,997],{},[144,1030,1031],{"href":246},[10,1032,249],{}," — A frame program for a small grid stepped in plain JavaScript: the steps run in order every frame until one returns ",[10,1035,1036],{},"'skip'",[906,1038,1039,1043],{},[144,1040,1041],{"href":445},[10,1042,448],{}," — One named step of a JavaScript-stepped grid.",[906,1045,1046,1050],{},[144,1047,1048],{"href":253},[10,1049,256],{}," — The texture a JavaScript-stepped grid is read through.",[1052,1053,1054],"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":268,"searchDepth":476,"depth":476,"links":1056},[1057,1058,1059,1060],{"id":294,"depth":476,"text":295},{"id":456,"depth":476,"text":457},{"id":798,"depth":476,"text":799},{"id":896,"depth":476,"text":897},"sim.grids","sim-grids",null,"A grid simulation is a fixed-size field of cells (a displacement per cell, two chemical concentrations, a sort offset) that changes a little every frame. gridSim runs it: you describe the frame as an ordered list of stages built with op., and the engine runs that list every frame, owning the clock, the frame-delta clamp, the ready gate, the settle gate and the outputs the layer samples.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fsim.grids.md","md","simulation","Simulation",{},"\u002Fdocs\u002Fprimitives\u002Fsim-grids",{"title":131,"description":1064},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim\u002Fgrids.ts","docs\u002Fprimitives\u002F37.sim-grids\u002Findex","EamxLgb9xTQRs36aauk9DSac_cKRPlHwKdbXhEDiKBM"]