[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fsimulate":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":154,"categorySlug":154,"categoryTitle":9,"curated":389,"description":927,"editUrl":928,"extension":929,"group":930,"groupTitle":931,"kind":9,"meta":932,"navigation":389,"path":933,"seo":934,"sourceUrl":935,"stem":936,"wordCount":441,"__hash__":937},"primitives\u002Fdocs\u002Fprimitives\u002F36.simulate\u002Findex.md","Simulate",{"type":149,"value":150,"toc":921},"minimark",[151,155,188,213,230,259,264,364,368,748,752,841,845,917],[152,153,147],"h1",{"id":154},"simulate",[156,157,158,159,166,167,173,174,180,181,187],"p",{},"Say \"simulate this\" and let the engine run it. ",[160,161,163],"a",{"href":162},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fsimulate-grid",[8,164,165],{},"simulate.grid"," declares a square grid of\nnumbers that changes a little every frame: you list the steps that advance it (",[160,168,170],{"href":169},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop-wave",[8,171,172],{},"op.wave","\nmakes it ripple, ",[160,175,177],{"href":176},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop-splat",[8,178,179],{},"op.splat"," presses the pointer into it) and name the outputs you want derived\nfrom it (",[160,182,184],{"href":183},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop-gradient",[8,185,186],{},"op.gradient",", the slope at every cell). The engine allocates the state, keeps the\nhistory a wave needs, tracks the pointer, clamps the frame clock, and stops dispatching once\nthe field has faded to nothing. There is no GPU code in the definition at all.",[156,189,190,191,195,196,199,200,203,204,207,208,212],{},"An ",[192,193,194],"strong",{},"output"," is a field an effect can read. Declare the simulation once at module scope, then\nhand ",[8,197,198],{},"waves.output('displacement')"," to ",[8,201,202],{},"displaceBy",", which bends the layer inside along the\nslope with a chromatic split and edge handling. Today the engine implements exactly one recipe,\n",[8,205,206],{},"[op.wave, op.splat]"," with a derived ",[160,209,210],{"href":183},[8,211,186],{},"; a different configuration throws when the\nshader is defined, never at render time.",[156,214,215,216,219,220,219,223,219,226,229],{},"When an effect needs its own GPU step (a reaction-diffusion rule, a fluid, a flock), the\nlower-level families take over: ",[8,217,218],{},"sim.grids",", ",[8,221,222],{},"sim.fluids",[8,224,225],{},"sim.feedback",[8,227,228],{},"sim.agents",".",[231,232,237],"pre",{"className":233,"code":234,"language":235,"meta":236,"style":236},"language-ts shiki shiki-themes github-dark","import {simulate, grid, op, …} from 'shaders\u002Fstd'\n","ts","",[8,238,239],{"__ignoreMap":236},[240,241,244,248,252,255],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"snl16","import",[240,249,251],{"class":250},"s95oV"," {simulate, grid, op, …} ",[240,253,254],{"class":246},"from",[240,256,258],{"class":257},"sU2Wk"," 'shaders\u002Fstd'\n",[260,261,263],"h2",{"id":262},"reach-for-it-when","Reach for it when",[265,266,267,280],"table",{},[268,269,270],"thead",{},[271,272,273,277],"tr",{},[274,275,276],"th",{},"When you need",[274,278,279],{},"Use",[281,282,283,311,323,338,350],"tbody",{},[271,284,285,289],{},[286,287,288],"td",{},"ripples that spread from the cursor and distort the layer inside",[286,290,291,295,296,219,300,219,304,308,309],{},[160,292,293],{"href":162},[8,294,165],{}," with ",[160,297,298],{"href":169},[8,299,172],{},[160,301,302],{"href":176},[8,303,179],{},[160,305,306],{"href":183},[8,307,186],{},", read by ",[8,310,202],{},[271,312,313,316],{},[286,314,315],{},"the ripples should fade faster or ring longer",[286,317,318,322],{},[160,319,320],{"href":169},[8,321,172],{}," with a damping prop, 0 rings forever, 20 dies in frames",[271,324,325,328],{},[286,326,327],{},"the brush should be bigger or press harder",[286,329,330,334,335],{},[160,331,332],{"href":176},[8,333,179],{}," with a radius prop and ",[8,336,337],{},"pointerSpeed",[271,339,340,343],{},[286,341,342],{},"the simulation should sleep once still",[286,344,345,346],{},"the rest option on ",[160,347,348],{"href":162},[8,349,165],{},[271,351,352,355],{},[286,353,354],{},"a handle to the field for an effect",[286,356,357,363],{},[160,358,360],{"href":359},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fgridsim",[8,361,362],{},"GridSim"," and its output method",[260,365,367],{"id":366},"example","Example",[231,369,371],{"className":233,"code":370,"language":235,"meta":236,"style":236},"import {defineShader, p, simulate, op, pointer, pointerSpeed, displaceBy, transformEdges} from 'shaders\u002Fstd'\n\n\u002F\u002F A 128-cell wave field the pointer stirs. The engine keeps two frames of history for the wave,\n\u002F\u002F tracks the pointer (a jump into the canvas is not a stroke), and sleeps once the field has decayed.\nconst waves = simulate.grid({\n  resolution: 128,\n  history: 2,\n  step: [\n    op.wave({damping: p('decay')}),\n    op.splat({at: pointer({teleportGuard: 'on'}), amount: pointerSpeed({max: 2}), radius: p('radius')}),\n  ],\n  derive: {displacement: op.gradient()},\n  rest: {settlesWhen: 'derived-from-damping'},\n})\n\n\u002F\u002F Ripples: the layer inside is displaced along the wave's slope, with a chromatic split at the crests.\nexport const Ripples = defineShader({\n  name: 'Ripples',\n  props: {\n    intensity: {default: 10},\n    decay: {default: 10},\n    radius: {default: 0.5},\n    chromaticSplit: {default: 1},\n    edges: {default: 'stretch', transform: transformEdges, compileTime: true},\n  },\n  effect: displaceBy(waves.output('displacement'), {\n    strength: p('intensity'),\n    chromatic: p('chromaticSplit'),\n    edges: p('edges'),\n  }),\n})\n",[8,372,373,384,391,398,404,427,439,450,456,479,521,527,539,551,557,562,568,587,598,604,615,625,636,647,664,670,691,707,722,737,743],{"__ignoreMap":236},[240,374,375,377,380,382],{"class":242,"line":243},[240,376,247],{"class":246},[240,378,379],{"class":250}," {defineShader, p, simulate, op, pointer, pointerSpeed, displaceBy, transformEdges} ",[240,381,254],{"class":246},[240,383,258],{"class":257},[240,385,387],{"class":242,"line":386},2,[240,388,390],{"emptyLinePlaceholder":389},true,"\n",[240,392,394],{"class":242,"line":393},3,[240,395,397],{"class":396},"sAwPA","\u002F\u002F A 128-cell wave field the pointer stirs. The engine keeps two frames of history for the wave,\n",[240,399,401],{"class":242,"line":400},4,[240,402,403],{"class":396},"\u002F\u002F tracks the pointer (a jump into the canvas is not a stroke), and sleeps once the field has decayed.\n",[240,405,407,410,414,417,420,424],{"class":242,"line":406},5,[240,408,409],{"class":246},"const",[240,411,413],{"class":412},"sDLfK"," waves",[240,415,416],{"class":246}," =",[240,418,419],{"class":250}," simulate.",[240,421,423],{"class":422},"svObZ","grid",[240,425,426],{"class":250},"({\n",[240,428,430,433,436],{"class":242,"line":429},6,[240,431,432],{"class":250},"  resolution: ",[240,434,435],{"class":412},"128",[240,437,438],{"class":250},",\n",[240,440,442,445,448],{"class":242,"line":441},7,[240,443,444],{"class":250},"  history: ",[240,446,447],{"class":412},"2",[240,449,438],{"class":250},[240,451,453],{"class":242,"line":452},8,[240,454,455],{"class":250},"  step: [\n",[240,457,459,462,465,468,470,473,476],{"class":242,"line":458},9,[240,460,461],{"class":250},"    op.",[240,463,464],{"class":422},"wave",[240,466,467],{"class":250},"({damping: ",[240,469,156],{"class":422},[240,471,472],{"class":250},"(",[240,474,475],{"class":257},"'decay'",[240,477,478],{"class":250},")}),\n",[240,480,482,484,487,490,493,496,499,502,504,507,509,512,514,516,519],{"class":242,"line":481},10,[240,483,461],{"class":250},[240,485,486],{"class":422},"splat",[240,488,489],{"class":250},"({at: ",[240,491,492],{"class":422},"pointer",[240,494,495],{"class":250},"({teleportGuard: ",[240,497,498],{"class":257},"'on'",[240,500,501],{"class":250},"}), amount: ",[240,503,337],{"class":422},[240,505,506],{"class":250},"({max: ",[240,508,447],{"class":412},[240,510,511],{"class":250},"}), radius: ",[240,513,156],{"class":422},[240,515,472],{"class":250},[240,517,518],{"class":257},"'radius'",[240,520,478],{"class":250},[240,522,524],{"class":242,"line":523},11,[240,525,526],{"class":250},"  ],\n",[240,528,530,533,536],{"class":242,"line":529},12,[240,531,532],{"class":250},"  derive: {displacement: op.",[240,534,535],{"class":422},"gradient",[240,537,538],{"class":250},"()},\n",[240,540,542,545,548],{"class":242,"line":541},13,[240,543,544],{"class":250},"  rest: {settlesWhen: ",[240,546,547],{"class":257},"'derived-from-damping'",[240,549,550],{"class":250},"},\n",[240,552,554],{"class":242,"line":553},14,[240,555,556],{"class":250},"})\n",[240,558,560],{"class":242,"line":559},15,[240,561,390],{"emptyLinePlaceholder":389},[240,563,565],{"class":242,"line":564},16,[240,566,567],{"class":396},"\u002F\u002F Ripples: the layer inside is displaced along the wave's slope, with a chromatic split at the crests.\n",[240,569,571,574,577,580,582,585],{"class":242,"line":570},17,[240,572,573],{"class":246},"export",[240,575,576],{"class":246}," const",[240,578,579],{"class":412}," Ripples",[240,581,416],{"class":246},[240,583,584],{"class":422}," defineShader",[240,586,426],{"class":250},[240,588,590,593,596],{"class":242,"line":589},18,[240,591,592],{"class":250},"  name: ",[240,594,595],{"class":257},"'Ripples'",[240,597,438],{"class":250},[240,599,601],{"class":242,"line":600},19,[240,602,603],{"class":250},"  props: {\n",[240,605,607,610,613],{"class":242,"line":606},20,[240,608,609],{"class":250},"    intensity: {default: ",[240,611,612],{"class":412},"10",[240,614,550],{"class":250},[240,616,618,621,623],{"class":242,"line":617},21,[240,619,620],{"class":250},"    decay: {default: ",[240,622,612],{"class":412},[240,624,550],{"class":250},[240,626,628,631,634],{"class":242,"line":627},22,[240,629,630],{"class":250},"    radius: {default: ",[240,632,633],{"class":412},"0.5",[240,635,550],{"class":250},[240,637,639,642,645],{"class":242,"line":638},23,[240,640,641],{"class":250},"    chromaticSplit: {default: ",[240,643,644],{"class":412},"1",[240,646,550],{"class":250},[240,648,650,653,656,659,662],{"class":242,"line":649},24,[240,651,652],{"class":250},"    edges: {default: ",[240,654,655],{"class":257},"'stretch'",[240,657,658],{"class":250},", transform: transformEdges, compileTime: ",[240,660,661],{"class":412},"true",[240,663,550],{"class":250},[240,665,667],{"class":242,"line":666},25,[240,668,669],{"class":250},"  },\n",[240,671,673,676,678,681,683,685,688],{"class":242,"line":672},26,[240,674,675],{"class":250},"  effect: ",[240,677,202],{"class":422},[240,679,680],{"class":250},"(waves.",[240,682,194],{"class":422},[240,684,472],{"class":250},[240,686,687],{"class":257},"'displacement'",[240,689,690],{"class":250},"), {\n",[240,692,694,697,699,701,704],{"class":242,"line":693},27,[240,695,696],{"class":250},"    strength: ",[240,698,156],{"class":422},[240,700,472],{"class":250},[240,702,703],{"class":257},"'intensity'",[240,705,706],{"class":250},"),\n",[240,708,710,713,715,717,720],{"class":242,"line":709},28,[240,711,712],{"class":250},"    chromatic: ",[240,714,156],{"class":422},[240,716,472],{"class":250},[240,718,719],{"class":257},"'chromaticSplit'",[240,721,706],{"class":250},[240,723,725,728,730,732,735],{"class":242,"line":724},29,[240,726,727],{"class":250},"    edges: ",[240,729,156],{"class":422},[240,731,472],{"class":250},[240,733,734],{"class":257},"'edges'",[240,736,706],{"class":250},[240,738,740],{"class":242,"line":739},30,[240,741,742],{"class":250},"  }),\n",[240,744,746],{"class":242,"line":745},31,[240,747,556],{"class":250},[260,749,751],{"id":750},"types","Types",[265,753,754,764],{},[268,755,756],{},[271,757,758,761],{},[274,759,760],{},"Type",[274,762,763],{},"What it is",[281,765,766,776,786,796,806,818,828],{},[271,767,768,773],{},[286,769,770],{},[8,771,772],{},"GradientOp",[286,774,775],{},"A derived output: the slope of the grid at every cell, as a 2D vector.",[271,777,778,783],{},[286,779,780],{},[8,781,782],{},"GridDeriveOp",[286,784,785],{},"Any output derived from the grid after the steps have run.",[271,787,788,793],{},[286,789,790],{},[8,791,792],{},"GridSimConfig",[286,794,795],{},"What a grid simulation declares: its size, how many past frames it keeps, its steps, and its named outputs.",[271,797,798,803],{},[286,799,800],{},[8,801,802],{},"GridStepOp",[286,804,805],{},"Any step that advances the grid each frame.",[271,807,808,813],{},[286,809,810],{},[8,811,812],{},"SimOutputRef",[286,814,815,816,229],{},"A handle to one named output of a simulation, the thing you hand to ",[8,817,202],{},[271,819,820,825],{},[286,821,822],{},[8,823,824],{},"SplatOp",[286,826,827],{},"A step that presses a soft round brush into the grid wherever the pointer moves.",[271,829,830,835],{},[286,831,832],{},[8,833,834],{},"WaveOp",[286,836,837,838,229],{},"A step that makes the grid ripple like a water surface, fading by ",[8,839,840],{},"damping",[260,842,844],{"id":843},"words","Words",[846,847,849],"primitive-words",{":words":848},"[{\"name\":\"simulate\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fsimulate\",\"summary\":\"Declare a simulation the engine runs for you.\"},{\"name\":\"simulate.grid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fsimulate-grid\",\"summary\":\"A square grid of numbers advanced once per frame by `step`, with named outputs in `derive`.\"},{\"name\":\"op\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop\",\"summary\":\"The steps and outputs a grid simulation is built from.\"},{\"name\":\"op.wave\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop-wave\",\"summary\":\"A wave step: the grid ripples outward from any disturbance and fades by `damping` (a prop, 0–20).\"},{\"name\":\"op.splat\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop-splat\",\"summary\":\"A brush step: a soft round push into the grid at the pointer, scaled by how fast it moves.\"},{\"name\":\"op.gradient\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop-gradient\",\"summary\":\"A derived output: the grid's slope at every cell as a 2D vector, ready for `displaceBy`.\"},{\"name\":\"GridSim\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fgridsim\",\"summary\":\"A declared grid simulation.\"}]",[850,851,852,861,875,884,894,901,910],"ul",{},[853,854,855,860],"li",{},[160,856,858],{"href":857},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fsimulate",[8,859,154],{}," — Declare a simulation the engine runs for you.",[853,862,863,867,868,871,872,229],{},[160,864,865],{"href":162},[8,866,165],{}," — A square grid of numbers advanced once per frame by ",[8,869,870],{},"step",", with named outputs in ",[8,873,874],{},"derive",[853,876,877,883],{},[160,878,880],{"href":879},"\u002Fdocs\u002Fprimitives\u002Fsimulate\u002Fop",[8,881,882],{},"op"," — The steps and outputs a grid simulation is built from.",[853,885,886,890,891,893],{},[160,887,888],{"href":169},[8,889,172],{}," — A wave step: the grid ripples outward from any disturbance and fades by ",[8,892,840],{}," (a prop, 0–20).",[853,895,896,900],{},[160,897,898],{"href":176},[8,899,179],{}," — A brush step: a soft round push into the grid at the pointer, scaled by how fast it moves.",[853,902,903,907,908,229],{},[160,904,905],{"href":183},[8,906,186],{}," — A derived output: the grid's slope at every cell as a 2D vector, ready for ",[8,909,202],{},[853,911,912,916],{},[160,913,914],{"href":359},[8,915,362],{}," — A declared grid simulation.",[918,919,920],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":236,"searchDepth":386,"depth":386,"links":922},[923,924,925,926],{"id":262,"depth":386,"text":263},{"id":366,"depth":386,"text":367},{"id":750,"depth":386,"text":751},{"id":843,"depth":386,"text":844},"Say \"simulate this\" and let the engine run it. simulate.grid declares a square grid of numbers that changes a little every frame: you list the steps that advance it (op.wave makes it ripple, op.splat presses the pointer into it) and name the outputs you want derived from it (op.gradient, the slope at every cell).","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fsimulate.md","md","simulation","Simulation",{},"\u002Fdocs\u002Fprimitives\u002Fsimulate",{"title":147,"description":927},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim.ts","docs\u002Fprimitives\u002F36.simulate\u002Findex","lb6s0ZCBktTlteyMKALzH92Q6FPdFX03X8osktcA7qU"]