[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fsim-feedback":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":1328,"categorySlug":1329,"categoryTitle":1330,"curated":345,"description":1331,"editUrl":1332,"extension":1333,"group":1334,"groupTitle":1335,"kind":1330,"meta":1336,"navigation":345,"path":1337,"seo":1338,"sourceUrl":1339,"stem":1340,"wordCount":191,"__hash__":1341},"primitives\u002Fdocs\u002Fprimitives\u002F39.sim-feedback\u002Findex.md","Feedback",{"type":133,"value":134,"toc":1322},"minimark",[135,139,151,167,178,207,212,279,283,1241,1245,1299,1303,1318],[136,137,131],"h1",{"id":138},"feedback",[140,141,142,143,150],"p",{},"Effects that remember the last frame. A feedback simulation keeps a picture of its own\nprevious output and advances it by one step of your rule every frame: read last frame's state,\napply the rule, write the new state. Temporal echoes, codec smears and decaying trails all live\nhere. ",[144,145,147],"a",{"href":146},"\u002Fdocs\u002Fprimitives\u002Fsim-feedback\u002Ffeedbacksim",[10,148,149],{},"feedbackSim"," keeps the two state textures and swaps them, keeps a display copy the layer\nsamples, binds the child's picture once it exists, and runs a clock you can scale with a speed\nprop.",[140,152,153,154,158,159,162,163,166],{},"You bring one ",[155,156,157],"strong",{},"step"," (a GPU function run once per state cell that reads the previous state\nand writes the next) and the ",[10,160,161],{},"values"," it reads each frame. The build callback runs once per\ninstance of the layer; pick the step's variant there when a compile-time prop changes it. The\nfragment samples ",[10,164,165],{},"display"," and mixes it with the live child however the effect wants. Without a\nGPU nothing runs, so the fragment should fall back to the child.",[140,168,169,170,173,174,177],{},"The simulation needs a child. For a wave field or a displacement, ",[10,171,172],{},"simulate.grid"," says it\nwithout GPU code; for a rule that runs many iterations per frame, see ",[10,175,176],{},"sim.grids",".",[179,180,185],"pre",{"className":181,"code":182,"language":183,"meta":184,"style":184},"language-ts shiki shiki-themes github-dark","import {sim} from 'shaders\u002Fstd'\n","ts","",[10,186,187],{"__ignoreMap":184},[188,189,192,196,200,203],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"snl16","import",[188,197,199],{"class":198},"s95oV"," {sim} ",[188,201,202],{"class":194},"from",[188,204,206],{"class":205},"sU2Wk"," 'shaders\u002Fstd'\n",[208,209,211],"h2",{"id":210},"reach-for-it-when","Reach for it when",[213,214,215,228],"table",{},[216,217,218],"thead",{},[219,220,221,225],"tr",{},[222,223,224],"th",{},"When you need",[222,226,227],{},"Use",[229,230,231,243,255,267],"tbody",{},[219,232,233,237],{},[234,235,236],"td",{},"a codec smear, a temporal echo, a decaying trail of the layer inside",[234,238,239],{},[144,240,241],{"href":146},[10,242,149],{},[219,244,245,248],{},[234,246,247],{},"the effect should pause or run faster from a prop",[234,249,250,251],{},"the speedProp option of ",[144,252,253],{"href":146},[10,254,149],{},[219,256,257,260],{},[234,258,259],{},"a second texture that must swap with the state",[234,261,262,263],{},"the extraSlots option of ",[144,264,265],{"href":146},[10,266,149],{},[219,268,269,272],{},[234,270,271],{},"skip the whole step while a prop is 0",[234,273,274,275],{},"the skip option of ",[144,276,277],{"href":146},[10,278,149],{},[208,280,282],{"id":281},"example","Example",[179,284,286],{"className":181,"code":285,"language":183,"meta":184,"style":184},"import {defineShader, sim} from 'shaders\u002Fstd'\nimport {buildMacroblockAdvectKernel, call, mixExpr, ZERO} from '@coreroot\u002Fgpu\u002Fporters'\nimport type {GpuFragmentParams, KitTexture, Expr} from '@coreroot\u002Fgpu\u002Fporters'\nimport {blend} from '@coreroot\u002Fgpu\u002Fkit'\n\nconst {feedbackSim} = sim.feedback\n\nconst STATE_RES = 768\n\n\u002F\u002F The rule: each block of the picture either refreshes from the live child or holds and drags\n\u002F\u002F its previous contents along a motion vector, like a video stream that lost its keyframes.\nconst decoder = buildMacroblockAdvectKernel({\n  res: STATE_RES,\n  format: 'rgba16float',\n  namePrefix: 'dataMosh',\n  blockMix: {coarseScale: 2.6, coarsePick: 0.35},\n  generationLoss: {levels: 18, amount: 0.12, decay: 0.9985},\n})\n\n\u002F\u002F DataMosh: corrupted-codec smearing of the layer inside.\nexport const DataMosh = defineShader({\n  name: 'DataMosh',\n  requiresRTT: true,\n  requiresChild: true,\n  props: {\n    intensity: {default: 0.7},\n    blockSize: {default: 48},\n    drift: {default: 0.35},\n    churn: {default: 0.4},\n    blend: {default: 1},\n    speed: {default: 1},\n    seed: {default: 0},\n  },\n  ...feedbackSim((params, root) => ({\n    size: STATE_RES,\n    format: 'rgba16float',\n    speedProp: 'speed',\n    paramsSchema: decoder.Params,\n    \u002F\u002F Hand the step the child, last frame's state, this frame's state, the display copy and the values.\n    bindGroups: ({childTexture, display, paramsBuffer}, read, write) => root.createBindGroup(decoder.layout, {\n      src: childTexture, prev: read.state, next: write.state, display, params: paramsBuffer,\n    } as never),\n    step: decoder.kernel,\n    \u002F\u002F The simulation's own clock stops with speed 0, so the smear freezes in place.\n    values: ({dt, localTime}) => ({\n      time: localTime,\n      dt,\n      seed: (params.getCpuValue('seed') as number) ?? 0,\n      intensity: (params.getCpuValue('intensity') as number) ?? 0.7,\n      blockSize: (params.getCpuValue('blockSize') as number) ?? 48,\n      drift: (params.getCpuValue('drift') as number) ?? 0.35,\n      churn: (params.getCpuValue('churn') as number) ?? 0.4,\n    }),\n  })),\n  gpu: {\n    fragment: ({childNode, ctx, computeOutputs, uniforms, convertToTexture}: GpuFragmentParams): Expr => {\n      if (!childNode) return ZERO\n      const display = computeOutputs?.display as KitTexture | undefined\n      const childTex = (computeOutputs?.childTexture as KitTexture | undefined) ?? convertToTexture(childNode)\n      const live = childTex.sample(ctx.uv)\n      if (!display) return call(blend.unpremultiplyAlpha, 'unpremultiplyAlpha', [live]) \u002F\u002F no GPU: the child untouched\n      const moshed = display.sample(ctx.uv, 'linearClamp')\n      return call(blend.unpremultiplyAlpha, 'unpremultiplyAlpha', [mixExpr(live, moshed, uniforms.blend)])\n    },\n  },\n})\n",[10,287,288,299,312,327,340,347,368,373,387,392,399,405,422,434,445,456,474,497,503,508,514,533,544,555,565,571,582,593,603,614,625,635,646,652,682,692,702,713,719,725,770,776,791,797,803,826,832,838,870,898,926,954,982,988,994,1000,1054,1075,1100,1132,1151,1180,1204,1225,1231,1236],{"__ignoreMap":184},[188,289,290,292,295,297],{"class":190,"line":191},[188,291,195],{"class":194},[188,293,294],{"class":198}," {defineShader, sim} ",[188,296,202],{"class":194},[188,298,206],{"class":205},[188,300,302,304,307,309],{"class":190,"line":301},2,[188,303,195],{"class":194},[188,305,306],{"class":198}," {buildMacroblockAdvectKernel, call, mixExpr, ZERO} ",[188,308,202],{"class":194},[188,310,311],{"class":205}," '@coreroot\u002Fgpu\u002Fporters'\n",[188,313,315,317,320,323,325],{"class":190,"line":314},3,[188,316,195],{"class":194},[188,318,319],{"class":194}," type",[188,321,322],{"class":198}," {GpuFragmentParams, KitTexture, Expr} ",[188,324,202],{"class":194},[188,326,311],{"class":205},[188,328,330,332,335,337],{"class":190,"line":329},4,[188,331,195],{"class":194},[188,333,334],{"class":198}," {blend} ",[188,336,202],{"class":194},[188,338,339],{"class":205}," '@coreroot\u002Fgpu\u002Fkit'\n",[188,341,343],{"class":190,"line":342},5,[188,344,346],{"emptyLinePlaceholder":345},true,"\n",[188,348,350,353,356,359,362,365],{"class":190,"line":349},6,[188,351,352],{"class":194},"const",[188,354,355],{"class":198}," {",[188,357,149],{"class":358},"sDLfK",[188,360,361],{"class":198},"} ",[188,363,364],{"class":194},"=",[188,366,367],{"class":198}," sim.feedback\n",[188,369,371],{"class":190,"line":370},7,[188,372,346],{"emptyLinePlaceholder":345},[188,374,376,378,381,384],{"class":190,"line":375},8,[188,377,352],{"class":194},[188,379,380],{"class":358}," STATE_RES",[188,382,383],{"class":194}," =",[188,385,386],{"class":358}," 768\n",[188,388,390],{"class":190,"line":389},9,[188,391,346],{"emptyLinePlaceholder":345},[188,393,395],{"class":190,"line":394},10,[188,396,398],{"class":397},"sAwPA","\u002F\u002F The rule: each block of the picture either refreshes from the live child or holds and drags\n",[188,400,402],{"class":190,"line":401},11,[188,403,404],{"class":397},"\u002F\u002F its previous contents along a motion vector, like a video stream that lost its keyframes.\n",[188,406,408,410,413,415,419],{"class":190,"line":407},12,[188,409,352],{"class":194},[188,411,412],{"class":358}," decoder",[188,414,383],{"class":194},[188,416,418],{"class":417},"svObZ"," buildMacroblockAdvectKernel",[188,420,421],{"class":198},"({\n",[188,423,425,428,431],{"class":190,"line":424},13,[188,426,427],{"class":198},"  res: ",[188,429,430],{"class":358},"STATE_RES",[188,432,433],{"class":198},",\n",[188,435,437,440,443],{"class":190,"line":436},14,[188,438,439],{"class":198},"  format: ",[188,441,442],{"class":205},"'rgba16float'",[188,444,433],{"class":198},[188,446,448,451,454],{"class":190,"line":447},15,[188,449,450],{"class":198},"  namePrefix: ",[188,452,453],{"class":205},"'dataMosh'",[188,455,433],{"class":198},[188,457,459,462,465,468,471],{"class":190,"line":458},16,[188,460,461],{"class":198},"  blockMix: {coarseScale: ",[188,463,464],{"class":358},"2.6",[188,466,467],{"class":198},", coarsePick: ",[188,469,470],{"class":358},"0.35",[188,472,473],{"class":198},"},\n",[188,475,477,480,483,486,489,492,495],{"class":190,"line":476},17,[188,478,479],{"class":198},"  generationLoss: {levels: ",[188,481,482],{"class":358},"18",[188,484,485],{"class":198},", amount: ",[188,487,488],{"class":358},"0.12",[188,490,491],{"class":198},", decay: ",[188,493,494],{"class":358},"0.9985",[188,496,473],{"class":198},[188,498,500],{"class":190,"line":499},18,[188,501,502],{"class":198},"})\n",[188,504,506],{"class":190,"line":505},19,[188,507,346],{"emptyLinePlaceholder":345},[188,509,511],{"class":190,"line":510},20,[188,512,513],{"class":397},"\u002F\u002F DataMosh: corrupted-codec smearing of the layer inside.\n",[188,515,517,520,523,526,528,531],{"class":190,"line":516},21,[188,518,519],{"class":194},"export",[188,521,522],{"class":194}," const",[188,524,525],{"class":358}," DataMosh",[188,527,383],{"class":194},[188,529,530],{"class":417}," defineShader",[188,532,421],{"class":198},[188,534,536,539,542],{"class":190,"line":535},22,[188,537,538],{"class":198},"  name: ",[188,540,541],{"class":205},"'DataMosh'",[188,543,433],{"class":198},[188,545,547,550,553],{"class":190,"line":546},23,[188,548,549],{"class":198},"  requiresRTT: ",[188,551,552],{"class":358},"true",[188,554,433],{"class":198},[188,556,558,561,563],{"class":190,"line":557},24,[188,559,560],{"class":198},"  requiresChild: ",[188,562,552],{"class":358},[188,564,433],{"class":198},[188,566,568],{"class":190,"line":567},25,[188,569,570],{"class":198},"  props: {\n",[188,572,574,577,580],{"class":190,"line":573},26,[188,575,576],{"class":198},"    intensity: {default: ",[188,578,579],{"class":358},"0.7",[188,581,473],{"class":198},[188,583,585,588,591],{"class":190,"line":584},27,[188,586,587],{"class":198},"    blockSize: {default: ",[188,589,590],{"class":358},"48",[188,592,473],{"class":198},[188,594,596,599,601],{"class":190,"line":595},28,[188,597,598],{"class":198},"    drift: {default: ",[188,600,470],{"class":358},[188,602,473],{"class":198},[188,604,606,609,612],{"class":190,"line":605},29,[188,607,608],{"class":198},"    churn: {default: ",[188,610,611],{"class":358},"0.4",[188,613,473],{"class":198},[188,615,617,620,623],{"class":190,"line":616},30,[188,618,619],{"class":198},"    blend: {default: ",[188,621,622],{"class":358},"1",[188,624,473],{"class":198},[188,626,628,631,633],{"class":190,"line":627},31,[188,629,630],{"class":198},"    speed: {default: ",[188,632,622],{"class":358},[188,634,473],{"class":198},[188,636,638,641,644],{"class":190,"line":637},32,[188,639,640],{"class":198},"    seed: {default: ",[188,642,643],{"class":358},"0",[188,645,473],{"class":198},[188,647,649],{"class":190,"line":648},33,[188,650,651],{"class":198},"  },\n",[188,653,655,658,660,663,667,670,673,676,679],{"class":190,"line":654},34,[188,656,657],{"class":194},"  ...",[188,659,149],{"class":417},[188,661,662],{"class":198},"((",[188,664,666],{"class":665},"s9osk","params",[188,668,669],{"class":198},", ",[188,671,672],{"class":665},"root",[188,674,675],{"class":198},") ",[188,677,678],{"class":194},"=>",[188,680,681],{"class":198}," ({\n",[188,683,685,688,690],{"class":190,"line":684},35,[188,686,687],{"class":198},"    size: ",[188,689,430],{"class":358},[188,691,433],{"class":198},[188,693,695,698,700],{"class":190,"line":694},36,[188,696,697],{"class":198},"    format: ",[188,699,442],{"class":205},[188,701,433],{"class":198},[188,703,705,708,711],{"class":190,"line":704},37,[188,706,707],{"class":198},"    speedProp: ",[188,709,710],{"class":205},"'speed'",[188,712,433],{"class":198},[188,714,716],{"class":190,"line":715},38,[188,717,718],{"class":198},"    paramsSchema: decoder.Params,\n",[188,720,722],{"class":190,"line":721},39,[188,723,724],{"class":397},"    \u002F\u002F Hand the step the child, last frame's state, this frame's state, the display copy and the values.\n",[188,726,728,731,734,737,739,741,743,746,749,752,754,757,759,761,764,767],{"class":190,"line":727},40,[188,729,730],{"class":417},"    bindGroups",[188,732,733],{"class":198},": ({",[188,735,736],{"class":665},"childTexture",[188,738,669],{"class":198},[188,740,165],{"class":665},[188,742,669],{"class":198},[188,744,745],{"class":665},"paramsBuffer",[188,747,748],{"class":198},"}, ",[188,750,751],{"class":665},"read",[188,753,669],{"class":198},[188,755,756],{"class":665},"write",[188,758,675],{"class":198},[188,760,678],{"class":194},[188,762,763],{"class":198}," root.",[188,765,766],{"class":417},"createBindGroup",[188,768,769],{"class":198},"(decoder.layout, {\n",[188,771,773],{"class":190,"line":772},41,[188,774,775],{"class":198},"      src: childTexture, prev: read.state, next: write.state, display, params: paramsBuffer,\n",[188,777,779,782,785,788],{"class":190,"line":778},42,[188,780,781],{"class":198},"    } ",[188,783,784],{"class":194},"as",[188,786,787],{"class":358}," never",[188,789,790],{"class":198},"),\n",[188,792,794],{"class":190,"line":793},43,[188,795,796],{"class":198},"    step: decoder.kernel,\n",[188,798,800],{"class":190,"line":799},44,[188,801,802],{"class":397},"    \u002F\u002F The simulation's own clock stops with speed 0, so the smear freezes in place.\n",[188,804,806,809,811,814,816,819,822,824],{"class":190,"line":805},45,[188,807,808],{"class":417},"    values",[188,810,733],{"class":198},[188,812,813],{"class":665},"dt",[188,815,669],{"class":198},[188,817,818],{"class":665},"localTime",[188,820,821],{"class":198},"}) ",[188,823,678],{"class":194},[188,825,681],{"class":198},[188,827,829],{"class":190,"line":828},46,[188,830,831],{"class":198},"      time: localTime,\n",[188,833,835],{"class":190,"line":834},47,[188,836,837],{"class":198},"      dt,\n",[188,839,841,844,847,850,853,855,857,860,862,865,868],{"class":190,"line":840},48,[188,842,843],{"class":198},"      seed: (params.",[188,845,846],{"class":417},"getCpuValue",[188,848,849],{"class":198},"(",[188,851,852],{"class":205},"'seed'",[188,854,675],{"class":198},[188,856,784],{"class":194},[188,858,859],{"class":358}," number",[188,861,675],{"class":198},[188,863,864],{"class":194},"??",[188,866,867],{"class":358}," 0",[188,869,433],{"class":198},[188,871,873,876,878,880,883,885,887,889,891,893,896],{"class":190,"line":872},49,[188,874,875],{"class":198},"      intensity: (params.",[188,877,846],{"class":417},[188,879,849],{"class":198},[188,881,882],{"class":205},"'intensity'",[188,884,675],{"class":198},[188,886,784],{"class":194},[188,888,859],{"class":358},[188,890,675],{"class":198},[188,892,864],{"class":194},[188,894,895],{"class":358}," 0.7",[188,897,433],{"class":198},[188,899,901,904,906,908,911,913,915,917,919,921,924],{"class":190,"line":900},50,[188,902,903],{"class":198},"      blockSize: (params.",[188,905,846],{"class":417},[188,907,849],{"class":198},[188,909,910],{"class":205},"'blockSize'",[188,912,675],{"class":198},[188,914,784],{"class":194},[188,916,859],{"class":358},[188,918,675],{"class":198},[188,920,864],{"class":194},[188,922,923],{"class":358}," 48",[188,925,433],{"class":198},[188,927,929,932,934,936,939,941,943,945,947,949,952],{"class":190,"line":928},51,[188,930,931],{"class":198},"      drift: (params.",[188,933,846],{"class":417},[188,935,849],{"class":198},[188,937,938],{"class":205},"'drift'",[188,940,675],{"class":198},[188,942,784],{"class":194},[188,944,859],{"class":358},[188,946,675],{"class":198},[188,948,864],{"class":194},[188,950,951],{"class":358}," 0.35",[188,953,433],{"class":198},[188,955,957,960,962,964,967,969,971,973,975,977,980],{"class":190,"line":956},52,[188,958,959],{"class":198},"      churn: (params.",[188,961,846],{"class":417},[188,963,849],{"class":198},[188,965,966],{"class":205},"'churn'",[188,968,675],{"class":198},[188,970,784],{"class":194},[188,972,859],{"class":358},[188,974,675],{"class":198},[188,976,864],{"class":194},[188,978,979],{"class":358}," 0.4",[188,981,433],{"class":198},[188,983,985],{"class":190,"line":984},53,[188,986,987],{"class":198},"    }),\n",[188,989,991],{"class":190,"line":990},54,[188,992,993],{"class":198},"  })),\n",[188,995,997],{"class":190,"line":996},55,[188,998,999],{"class":198},"  gpu: {\n",[188,1001,1003,1006,1008,1011,1013,1016,1018,1021,1023,1026,1028,1031,1034,1037,1040,1043,1045,1048,1051],{"class":190,"line":1002},56,[188,1004,1005],{"class":417},"    fragment",[188,1007,733],{"class":198},[188,1009,1010],{"class":665},"childNode",[188,1012,669],{"class":198},[188,1014,1015],{"class":665},"ctx",[188,1017,669],{"class":198},[188,1019,1020],{"class":665},"computeOutputs",[188,1022,669],{"class":198},[188,1024,1025],{"class":665},"uniforms",[188,1027,669],{"class":198},[188,1029,1030],{"class":665},"convertToTexture",[188,1032,1033],{"class":198},"}",[188,1035,1036],{"class":194},":",[188,1038,1039],{"class":417}," GpuFragmentParams",[188,1041,1042],{"class":198},")",[188,1044,1036],{"class":194},[188,1046,1047],{"class":417}," Expr",[188,1049,1050],{"class":194}," =>",[188,1052,1053],{"class":198}," {\n",[188,1055,1057,1060,1063,1066,1069,1072],{"class":190,"line":1056},57,[188,1058,1059],{"class":194},"      if",[188,1061,1062],{"class":198}," (",[188,1064,1065],{"class":194},"!",[188,1067,1068],{"class":198},"childNode) ",[188,1070,1071],{"class":194},"return",[188,1073,1074],{"class":358}," ZERO\n",[188,1076,1078,1081,1084,1086,1089,1091,1094,1097],{"class":190,"line":1077},58,[188,1079,1080],{"class":194},"      const",[188,1082,1083],{"class":358}," display",[188,1085,383],{"class":194},[188,1087,1088],{"class":198}," computeOutputs?.display ",[188,1090,784],{"class":194},[188,1092,1093],{"class":417}," KitTexture",[188,1095,1096],{"class":194}," |",[188,1098,1099],{"class":358}," undefined\n",[188,1101,1103,1105,1108,1110,1113,1115,1117,1119,1122,1124,1126,1129],{"class":190,"line":1102},59,[188,1104,1080],{"class":194},[188,1106,1107],{"class":358}," childTex",[188,1109,383],{"class":194},[188,1111,1112],{"class":198}," (computeOutputs?.childTexture ",[188,1114,784],{"class":194},[188,1116,1093],{"class":417},[188,1118,1096],{"class":194},[188,1120,1121],{"class":358}," undefined",[188,1123,675],{"class":198},[188,1125,864],{"class":194},[188,1127,1128],{"class":417}," convertToTexture",[188,1130,1131],{"class":198},"(childNode)\n",[188,1133,1135,1137,1140,1142,1145,1148],{"class":190,"line":1134},60,[188,1136,1080],{"class":194},[188,1138,1139],{"class":358}," live",[188,1141,383],{"class":194},[188,1143,1144],{"class":198}," childTex.",[188,1146,1147],{"class":417},"sample",[188,1149,1150],{"class":198},"(ctx.uv)\n",[188,1152,1154,1156,1158,1160,1163,1165,1168,1171,1174,1177],{"class":190,"line":1153},61,[188,1155,1059],{"class":194},[188,1157,1062],{"class":198},[188,1159,1065],{"class":194},[188,1161,1162],{"class":198},"display) ",[188,1164,1071],{"class":194},[188,1166,1167],{"class":417}," call",[188,1169,1170],{"class":198},"(blend.unpremultiplyAlpha, ",[188,1172,1173],{"class":205},"'unpremultiplyAlpha'",[188,1175,1176],{"class":198},", [live]) ",[188,1178,1179],{"class":397},"\u002F\u002F no GPU: the child untouched\n",[188,1181,1183,1185,1188,1190,1193,1195,1198,1201],{"class":190,"line":1182},62,[188,1184,1080],{"class":194},[188,1186,1187],{"class":358}," moshed",[188,1189,383],{"class":194},[188,1191,1192],{"class":198}," display.",[188,1194,1147],{"class":417},[188,1196,1197],{"class":198},"(ctx.uv, ",[188,1199,1200],{"class":205},"'linearClamp'",[188,1202,1203],{"class":198},")\n",[188,1205,1207,1210,1212,1214,1216,1219,1222],{"class":190,"line":1206},63,[188,1208,1209],{"class":194},"      return",[188,1211,1167],{"class":417},[188,1213,1170],{"class":198},[188,1215,1173],{"class":205},[188,1217,1218],{"class":198},", [",[188,1220,1221],{"class":417},"mixExpr",[188,1223,1224],{"class":198},"(live, moshed, uniforms.blend)])\n",[188,1226,1228],{"class":190,"line":1227},64,[188,1229,1230],{"class":198},"    },\n",[188,1232,1234],{"class":190,"line":1233},65,[188,1235,651],{"class":198},[188,1237,1239],{"class":190,"line":1238},66,[188,1240,502],{"class":198},[208,1242,1244],{"id":1243},"types","Types",[213,1246,1247,1257],{},[216,1248,1249],{},[219,1250,1251,1254],{},[222,1252,1253],{},"Type",[222,1255,1256],{},"What it is",[229,1258,1259,1269,1279,1289],{},[219,1260,1261,1266],{},[234,1262,1263],{},[10,1264,1265],{},"FeedbackBindContext",[234,1267,1268],{},"What you get when wiring your layout: the child's picture, the display texture, any extra textures you declared, and the buffer holding your per-frame values.",[219,1270,1271,1276],{},[234,1272,1273],{},[10,1274,1275],{},"FeedbackKernel",[234,1277,1278],{},"A step function run once per state cell, with the cell's column and row.",[219,1280,1281,1286],{},[234,1282,1283],{},[10,1284,1285],{},"FeedbackRoot",[234,1287,1288],{},"The GPU device handle the build callback receives, for creating the resources your step reads.",[219,1290,1291,1296],{},[234,1292,1293],{},[10,1294,1295],{},"FeedbackSimConfig",[234,1297,1298],{},"What a feedback simulation declares: the state's size and format, one step function, the wiring that hands it the read and write sides, and the values it reads each frame.",[208,1300,1302],{"id":1301},"words","Words",[1304,1305,1307],"primitive-words",{":words":1306},"[{\"name\":\"feedbackSim\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-feedback\u002Ffeedbacksim\",\"summary\":\"A simulation that advances a picture of its own last frame by one step of your rule, every frame.\"}]",[1308,1309,1310],"ul",{},[1311,1312,1313,1317],"li",{},[144,1314,1315],{"href":146},[10,1316,149],{}," — A simulation that advances a picture of its own last frame by one step of your rule, every frame.",[1319,1320,1321],"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":184,"searchDepth":301,"depth":301,"links":1323},[1324,1325,1326,1327],{"id":210,"depth":301,"text":211},{"id":281,"depth":301,"text":282},{"id":1243,"depth":301,"text":1244},{"id":1301,"depth":301,"text":1302},"sim.feedback","sim-feedback",null,"Effects that remember the last frame.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fsim.feedback.md","md","simulation","Simulation",{},"\u002Fdocs\u002Fprimitives\u002Fsim-feedback",{"title":131,"description":1331},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim\u002Ffeedback.ts","docs\u002Fprimitives\u002F39.sim-feedback\u002Findex","pm_eqiF9kdKb0YyzaMyr_lTUdpQcdGh9a3NxY7C7HfU"]