shaders 3.0.453 → 3.1.455

package/dist/core/{TiltShift-e57KIilk.js → TiltShift-DqEFOoJG.js}

@@ -1,8 +1,8 @@
-import { At as max, Bt as sin, F as unpremultiplyAlpha, Gt as data_exports, Jt as texture2d, Mt as mix, Pt as pow, Rt as round, St as cos, Vt as smoothstep, Yt as textureStorage2d, _t as abs, an as vec2u, cn as vec4f, ct as textureStore, d as ZERO, dn as u32, en as struct, it as std_exports, ln as f32, m as call, nt as src_default, on as vec3f, ot as textureLoad, rn as vec2f, un as i32, wt as dot, xt as clamp, y as mixExpr } from "./edges-B7Yet3LV.js";
-import { n as createGuardedCompute } from "./compute-Ax-p6Ubc.js";
-import { a as createVariableGaussianBlurCompute, t as BLUR_MAP_FORMAT } from "./blur-cLcFzL4x.js";
-import { c as transformPosition, r as transformAngle } from "./transformations-C7gn_5rF.js";
-var DEG_TO_RAD = Math.PI / 180;
+import { Bt as sin, Gt as data_exports, Jt as texture2d, Rt as round, St as cos, Vt as smoothstep, Yt as textureStorage2d, _t as abs, an as vec2u, at as std_exports, b as mixExpr, cn as vec4f, dn as i32, en as struct, fn as u32, h as call, lt as textureStore, rn as vec2f, rt as src_default, st as textureLoad, un as f32, wt as dot, xt as clamp } from "./edges-CD7gCAto.js";
+import { t as DEG_TO_RAD$1 } from "./constants-DoOzbl5b.js";
+import { a as REMAP_WINDOW_FIELDS, i as MAP_SOURCE_DIM_FIELDS, m as remapWindowValues, o as applyRemapWindow, p as mapSourceScalar, s as blur_exports, t as BLUR_MAP_FORMAT, u as composeBlurredOverSharp, v as withVariableBlurCompute } from "./blur-CZuIxzX6.js";
+import { c as transformPosition, r as transformAngle } from "./transformations-B-zNWNdd.js";
+var DEG_TO_RAD = DEG_TO_RAD$1;
 const INTENSITY_TO_RADIUS = .36;
 const intensityToRadius = (intensity) => intensity * INTENSITY_TO_RADIUS;
 const tiltShiftBlurAmount = src_default.fn([
@@ -246,13 +246,8 @@ function tiltShiftFillMapParams() {
 		width: f32,
 		falloff: f32,
 		aspect: f32,
-		inputWidth: f32,
-		inputHeight: f32,
-		inputMin: f32,
-		inputMax: f32,
-		outputMin: f32,
-		outputMax: f32,
-		curve: f32
+		...MAP_SOURCE_DIM_FIELDS,
+		...REMAP_WINDOW_FIELDS
 	});
 }
 function buildTiltShiftFillGraph(computeWidth, computeHeight) {
@@ -483,6 +478,7 @@ function buildTiltShiftFillMapGraph(computeWidth, computeHeight, channel) {
 		blurMap: { storageTexture: textureStorage2d(BLUR_MAP_FORMAT, "write-only") },
 		params: { uniform: Params }
 	}), "layout");
+	const channelScalar = mapSourceScalar(channel);
 	return {
 		layout,
 		kernel: src_default.fn([u32, u32])(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((cx, cy) => {
@@ -493,12 +489,8 @@ function buildTiltShiftFillMapGraph(computeWidth, computeHeight, channel) {
 			const blurAmount = tiltShiftBlurAmount(p.angle, vec2f(p.centerX, p.centerY), p.width, p.falloff, vec2f(u, v), p.aspect);
 			const srcX = clamp(i32(round(__tsover_mul(u, p.inputWidth))), 0, i32(__tsover_sub(p.inputWidth, 1)));
 			const srcY = clamp(i32(round(__tsover_mul(v, p.inputHeight))), 0, i32(__tsover_sub(p.inputHeight, 1)));
-			const sample = textureLoad(layout.$.source, vec2u(u32(srcX), u32(srcY)), 0);
-			const raw = channel === "alpha" ? sample.w : channel === "alphaInverted" ? __tsover_sub(1, sample.w) : channel === "luminanceInverted" ? __tsover_sub(1, dot(sample.xyz, vec3f(.2126, .7152, .0722))) : dot(sample.xyz, vec3f(.2126, .7152, .0722));
-			const inputRange = max(__tsover_sub(p.inputMax, p.inputMin), 1e-4);
-			const eased = pow(clamp(__tsover_div(__tsover_sub(raw, p.inputMin), inputRange), 0, 1), pow(2, __tsover_mul(-p.curve, 2)));
-			const maxRadius = __tsover_mul(mix(p.outputMin, p.outputMax, eased), .36);
-			const radius = __tsover_mul(blurAmount, maxRadius);
+			const remapped = applyRemapWindow(channelScalar(textureLoad(layout.$.source, vec2u(u32(srcX), u32(srcY)), 0)), p.inputMin, p.inputMax, p.outputMin, p.outputMax, p.curve);
+			const radius = __tsover_mul(blurAmount, __tsover_mul(remapped, .36));
 			textureStore(layout.$.blurMap, vec2u(cx, cy), vec4f(radius, 0, 0, 1));
 		}), {
 			v: 1,
@@ -796,229 +788,46 @@ function buildTiltShiftFillMapGraph(computeWidth, computeHeight, channel) {
 					],
 					[
 						13,
-						"raw",
+						"remapped",
 						[
-							105,
-							[
-								1,
-								"channel",
-								"===",
-								[103, "alpha"]
-							],
+							6,
 							[
 								7,
-								"sample",
-								"w"
+								"blur",
+								"applyRemapWindow"
 							],
 							[
-								105,
 								[
-									1,
-									"channel",
-									"===",
-									[103, "alphaInverted"]
+									6,
+									"channelScalar",
+									["sample"]
 								],
 								[
-									1,
-									[5, "1"],
-									"-",
-									[
-										7,
-										"sample",
-										"w"
-									]
+									7,
+									"p",
+									"inputMin"
 								],
-								[
-									105,
-									[
-										1,
-										"channel",
-										"===",
-										[103, "luminanceInverted"]
-									],
-									[
-										1,
-										[5, "1"],
-										"-",
-										[
-											6,
-											[
-												7,
-												"std",
-												"dot"
-											],
-											[[
-												7,
-												"sample",
-												"xyz"
-											], [
-												6,
-												[
-													7,
-													"d",
-													"vec3f"
-												],
-												[
-													[5, "0.2126"],
-													[5, "0.7152"],
-													[5, "0.0722"]
-												]
-											]]
-										]
-									],
-									[
-										6,
-										[
-											7,
-											"std",
-											"dot"
-										],
-										[[
-											7,
-											"sample",
-											"xyz"
-										], [
-											6,
-											[
-												7,
-												"d",
-												"vec3f"
-											],
-											[
-												[5, "0.2126"],
-												[5, "0.7152"],
-												[5, "0.0722"]
-											]
-										]]
-									]
-								]
-							]
-						]
-					],
-					[
-						13,
-						"inputRange",
-						[
-							6,
-							[
-								7,
-								"std",
-								"max"
-							],
-							[[
-								1,
 								[
 									7,
 									"p",
 									"inputMax"
 								],
-								"-",
 								[
 									7,
 									"p",
-									"inputMin"
-								]
-							], [5, "0.0001"]]
-						]
-					],
-					[
-						13,
-						"normalised",
-						[
-							6,
-							[
-								7,
-								"std",
-								"clamp"
-							],
-							[
-								[
-									1,
-									[
-										1,
-										"raw",
-										"-",
-										[
-											7,
-											"p",
-											"inputMin"
-										]
-									],
-									"/",
-									"inputRange"
+									"outputMin"
 								],
-								[5, "0"],
-								[5, "1"]
-							]
-						]
-					],
-					[
-						13,
-						"exponent",
-						[
-							6,
-							[
-								7,
-								"std",
-								"pow"
-							],
-							[[5, "2"], [
-								1,
-								[
-									4,
-									"-",
-									[
-										7,
-										"p",
-										"curve"
-									]
-								],
-								"*",
-								[5, "2"]
-							]]
-						]
-					],
-					[
-						13,
-						"eased",
-						[
-							6,
-							[
-								7,
-								"std",
-								"pow"
-							],
-							["normalised", "exponent"]
-						]
-					],
-					[
-						13,
-						"maxRadius",
-						[
-							1,
-							[
-								6,
 								[
 									7,
-									"std",
-									"mix"
+									"p",
+									"outputMax"
 								],
 								[
-									[
-										7,
-										"p",
-										"outputMin"
-									],
-									[
-										7,
-										"p",
-										"outputMax"
-									],
-									"eased"
+									7,
+									"p",
+									"curve"
 								]
-							],
-							"*",
-							"INTENSITY_TO_RADIUS"
+							]
 						]
 					],
 					[
@@ -1028,7 +837,12 @@ function buildTiltShiftFillMapGraph(computeWidth, computeHeight, channel) {
 							1,
 							"blurAmount",
 							"*",
-							"maxRadius"
+							[
+								1,
+								"remapped",
+								"*",
+								"INTENSITY_TO_RADIUS"
+							]
 						]
 					],
 					[
@@ -1081,7 +895,8 @@ function buildTiltShiftFillMapGraph(computeWidth, computeHeight, channel) {
 					"computeHeight",
 					"tiltShiftBlurAmount",
 					"std",
-					"channel",
+					"blur",
+					"channelScalar",
 					"INTENSITY_TO_RADIUS"
 				]
 			},
@@ -1092,7 +907,8 @@ function buildTiltShiftFillMapGraph(computeWidth, computeHeight, channel) {
 				computeHeight,
 				tiltShiftBlurAmount,
 				std: std_exports,
-				channel,
+				blur: blur_exports,
+				channelScalar,
 				INTENSITY_TO_RADIUS: .36
 			})
 		}) && $.f)({})).$name("tiltShiftFillBlurMapVariable"),
@@ -1171,16 +987,8 @@ const componentDefinition = {
 		}
 	},
 	compute: (params) => {
-		const { childNode, gpu, convertToTexture, registerComputeTexture, getCpuValue, getMapInfo, onCleanup, onResize, dimensions } = params;
-		if (!childNode) return null;
-		const root = gpu?.root;
-		if (!root) return null;
-		const childTexture = convertToTexture(childNode);
-		let curWidth = Math.max(1, Math.round(dimensions.width));
-		let curHeight = Math.max(1, Math.round(dimensions.height));
-		const variable = createVariableGaussianBlurCompute(root, null, curWidth, curHeight, onCleanup, 14);
-		const blurredTexture = registerComputeTexture(variable.outputTexture);
-		const readGeometry = () => {
+		const { getCpuValue, getMapInfo } = params;
+		const readGeometry = (dims) => {
 			const center = getCpuValue("center");
 			return {
 				angle: getCpuValue("angle") ?? 0,
@@ -1188,155 +996,41 @@ const componentDefinition = {
 				centerY: typeof center?.y === "number" ? center.y : .5,
 				width: getCpuValue("width") ?? .3,
 				falloff: getCpuValue("falloff") ?? .3,
-				aspect: curWidth / curHeight
+				aspect: dims.width / dims.height
 			};
 		};
 		const mapInfo = getMapInfo("intensity");
-		if (mapInfo) {
-			const graph$1 = buildTiltShiftFillMapGraph(variable.computeWidth, variable.computeHeight, mapInfo.channel);
-			const fillParams$1 = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createUniform(graph$1.Params), "fillParams");
-			let fillPass$1 = createGuardedCompute(root, /* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((cx, cy) => {
-				"use gpu";
-				graph$1.kernel(cx, cy);
-			}), {
-				v: 1,
-				name: void 0,
-				ast: {
-					"params": [{
-						"type": "i",
-						"name": "cx"
-					}, {
-						"type": "i",
-						"name": "cy"
-					}],
-					"body": [0, [[
-						6,
-						[
-							7,
-							"graph",
-							"kernel"
-						],
-						["cx", "cy"]
-					]]],
-					"externalNames": ["graph"]
-				},
-				externals: () => ({ graph: graph$1 })
-			}) && $.f)({}), { size: [variable.computeWidth, variable.computeHeight] });
-			onResize(({ width, height }) => {
-				curWidth = Math.max(1, Math.round(width));
-				curHeight = Math.max(1, Math.round(height));
-				variable.setInputDimensions(curWidth, curHeight);
-			});
-			return {
-				outputs: {
-					childTexture,
-					blurredTexture
-				},
-				bindInputs: (resolve) => {
-					const src = resolve(childTexture.key);
-					if (src) variable.setInputTexture(src.texture);
-					const mapSrc = resolve(mapInfo.sourceTexture.key);
-					if (mapSrc) {
-						const bg = root.createBindGroup(graph$1.layout, {
-							source: mapSrc.texture,
-							blurMap: variable.blurMapTexture,
-							params: fillParams$1.buffer
-						});
-						fillPass$1 = fillPass$1.with(bg);
-					}
-				},
-				getComputeNodes: () => {
-					const g = readGeometry();
-					const w = mapInfo.window();
-					fillParams$1.write({
-						...g,
-						inputWidth: curWidth,
-						inputHeight: curHeight,
-						inputMin: w.inputMin,
-						inputMax: w.inputMax,
-						outputMin: w.outputMin,
-						outputMax: w.outputMax,
-						curve: w.curve
-					});
-					return [fillPass$1, ...variable.computeSteps];
-				}
-			};
-		}
-		const graph = buildTiltShiftFillGraph(variable.computeWidth, variable.computeHeight);
-		const fillParams = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createUniform(graph.Params), "fillParams");
-		const fillBindGroup = root.createBindGroup(graph.layout, {
-			blurMap: variable.blurMapTexture,
-			params: fillParams.buffer
-		});
-		const fillPass = createGuardedCompute(root, /* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((cx, cy) => {
-			"use gpu";
-			graph.kernel(cx, cy);
-		}), {
-			v: 1,
-			name: void 0,
-			ast: {
-				"params": [{
-					"type": "i",
-					"name": "cx"
-				}, {
-					"type": "i",
-					"name": "cy"
-				}],
-				"body": [0, [[
-					6,
-					[
-						7,
-						"graph",
-						"kernel"
-					],
-					["cx", "cy"]
-				]]],
-				"externalNames": ["graph"]
-			},
-			externals: () => ({ graph })
-		}) && $.f)({}), {
-			size: [variable.computeWidth, variable.computeHeight],
-			bindGroup: fillBindGroup
+		if (mapInfo) return withVariableBlurCompute(params, {
+			halfKernel: 14,
+			source: mapInfo,
+			buildFill: (cw, ch) => buildTiltShiftFillMapGraph(cw, ch, mapInfo.channel),
+			fillValues: (dims, window) => ({
+				...readGeometry(dims),
+				inputWidth: dims.width,
+				inputHeight: dims.height,
+				...remapWindowValues(window)
+			})
 		});
-		onResize(({ width, height }) => {
-			curWidth = Math.max(1, Math.round(width));
-			curHeight = Math.max(1, Math.round(height));
-			variable.setInputDimensions(curWidth, curHeight);
+		return withVariableBlurCompute(params, {
+			halfKernel: 14,
+			buildFill: buildTiltShiftFillGraph,
+			fillValues: (dims) => ({
+				...readGeometry(dims),
+				maxRadius: intensityToRadius(getCpuValue("intensity") ?? 0)
+			})
 		});
-		return {
-			outputs: {
-				childTexture,
-				blurredTexture
-			},
-			bindInputs: (resolve) => {
-				const src = resolve(childTexture.key);
-				if (src) variable.setInputTexture(src.texture);
-			},
-			getComputeNodes: () => {
-				const g = readGeometry();
-				const intensity = getCpuValue("intensity") ?? 0;
-				fillParams.write({
-					...g,
-					maxRadius: intensityToRadius(intensity)
-				});
-				return [fillPass, ...variable.computeSteps];
-			}
-		};
 	},
-	fragment: ({ childNode, computeOutputs, uniforms, ctx, convertToTexture }) => {
-		if (!childNode) return ZERO;
-		const blurred = computeOutputs?.blurredTexture;
-		const sharp = computeOutputs?.childTexture;
-		if (!blurred || !sharp) return call(unpremultiplyAlpha, "unpremultiplyAlpha", [convertToTexture(childNode).sample(ctx.uv)]);
-		return call(unpremultiplyAlpha, "unpremultiplyAlpha", [mixExpr(sharp.sample(ctx.uv), blurred.sample(ctx.uv), call(tiltShiftBlurAmount, "tiltShiftBlurAmount", [
+	fragment: (params) => composeBlurredOverSharp(params, (blurred, sharp) => {
+		const { uniforms, ctx } = params;
+		return mixExpr(sharp, blurred, call(tiltShiftBlurAmount, "tiltShiftBlurAmount", [
 			uniforms.angle,
 			uniforms.center,
 			uniforms.width,
 			uniforms.falloff,
 			ctx.uv,
 			ctx.aspect
-		]))]);
-	}
+		]));
+	})
 };
 var TiltShift_default = componentDefinition;
 export { componentDefinition as a, buildTiltShiftFillMapGraph as i, TiltShift_default as n, intensityToRadius as o, buildTiltShiftFillGraph as r, tiltShiftBlurAmount as s, INTENSITY_TO_RADIUS as t };

package/dist/core/{TimeTrail-CYofyeeE.js → TimeTrail-G_JamlY8.js}

@@ -1,7 +1,7 @@
-import { At as max, B as hslToRgb, F as unpremultiplyAlpha, Gt as data_exports, Jt as texture2d, L as colorMixing_exports, N as blendModes, Ot as fract, Vt as smoothstep, Yt as textureStorage2d, Z as rgbToHsl, _t as abs, an as vec2u, cn as vec4f, ct as textureStore, d as ZERO, dn as u32, en as struct, gt as select, it as std_exports, ln as f32, m as call, nt as src_default, on as vec3f, ot as textureLoad, rn as vec2f, st as textureSampleLevel, v as floatE, wt as dot } from "./edges-B7Yet3LV.js";
-import { n as createGuardedCompute } from "./compute-Ax-p6Ubc.js";
-import { t as isMobileGpuViewport } from "./device-BODv_4aH.js";
-import { a as transformColor } from "./transformations-C7gn_5rF.js";
+import { At as max, Gt as data_exports, I as unpremultiplyAlpha, Jt as texture2d, Ot as fract, P as blendModes, Q as rgbToHsl, R as colorMixing_exports, V as hslToRgb, Vt as smoothstep, Yt as textureStorage2d, _t as abs, an as vec2u, at as std_exports, cn as vec4f, ct as textureSampleLevel, en as struct, f as ZERO, fn as u32, gt as select, h as call, lt as textureStore, on as vec3f, rn as vec2f, rt as src_default, st as textureLoad, un as f32, wt as dot, y as floatE } from "./edges-CD7gCAto.js";
+import { D as createFeedbackTrailSim } from "./porters-DUtQounc.js";
+import { M as createGuardedCompute, t as isMobileGpuViewport } from "./device-B0ZwBfOg.js";
+import { a as transformColor } from "./transformations-B-zNWNdd.js";
 var STATE_RES = isMobileGpuViewport() ? 384 : 640;
 var STATE_FORMAT = "rgba16float";
 var DIFFUSE_HALF_UV = 2.5 * .5 / STATE_RES;
@@ -2045,43 +2045,13 @@ const componentDefinition = {
 		}
 	},
 	compute: (params) => {
-		const { childNode, gpu, registerComputeTexture, convertToTexture, getCpuValue, propValues, onCleanup } = params;
+		const { childNode, gpu, getCpuValue, propValues } = params;
 		if (!childNode) return null;
 		const root = gpu?.root;
 		if (!root) return null;
-		const childTexture = convertToTexture(childNode);
 		const tintMode = Number(propValues.tintMode) || 0;
 		const blendMode = stampModeFor(resolveBlendKey(propValues.trailBlend));
 		const isMotion = (propValues.trailSource == null ? 1 : Number(propValues.trailSource)) > .5;
-		const stateA = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createTexture({
-			size: [STATE_RES, STATE_RES],
-			format: STATE_FORMAT
-		}).$usage("storage", "sampled"), "stateA");
-		const stateB = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createTexture({
-			size: [STATE_RES, STATE_RES],
-			format: STATE_FORMAT
-		}).$usage("storage", "sampled"), "stateB");
-		const displayTex = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createTexture({
-			size: [STATE_RES, STATE_RES],
-			format: STATE_FORMAT
-		}).$usage("storage", "sampled"), "displayTex");
-		const liveSize = isMotion ? [STATE_RES, STATE_RES] : [1, 1];
-		const prevLiveA = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createTexture({
-			size: liveSize,
-			format: STATE_FORMAT
-		}).$usage("storage", "sampled"), "prevLiveA");
-		const prevLiveB = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createTexture({
-			size: liveSize,
-			format: STATE_FORMAT
-		}).$usage("storage", "sampled"), "prevLiveB");
-		onCleanup(() => {
-			stateA.destroy();
-			stateB.destroy();
-			displayTex.destroy();
-			prevLiveA.destroy();
-			prevLiveB.destroy();
-		});
-		const display = registerComputeTexture(displayTex);
 		const trailSampler = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createSampler({
 			magFilter: "linear",
 			minFilter: "linear",
@@ -2089,6 +2059,23 @@ const componentDefinition = {
 			addressModeV: "clamp-to-edge"
 		}), "trailSampler");
 		const paramsBuf = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(root.createUniform(TrailParams), "paramsBuf");
+		const sim = createFeedbackTrailSim(params, {
+			size: STATE_RES,
+			format: STATE_FORMAT,
+			extraSlots: { prevLive: isMotion ? STATE_RES : [1, 1] },
+			speedProp: "speed",
+			bindGroups: ({ childTexture, display }, read, write) => root.createBindGroup(trailLayout, {
+				src: childTexture,
+				prev: read.state,
+				next: write.state,
+				display,
+				prevLive: read.extra.prevLive,
+				prevLiveOut: write.extra.prevLive,
+				samp: trailSampler,
+				params: paramsBuf.buffer
+			})
+		});
+		if (!sim) return null;
 		const trailFn = tintMode === 2 ? timeTrailDecayedTinted : timeTrailDecayed;
 		const kernel = isMotion ? makeTimeTrailKernel(trailFn) : makeTimeTrailAlphaKernel(trailFn);
 		const pipeline = createGuardedCompute(root, /* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((cx, cy) => {
@@ -2114,45 +2101,15 @@ const componentDefinition = {
 			},
 			externals: () => ({ kernel })
 		}) && $.f)({}), { size: [STATE_RES, STATE_RES] });
-		let bgAB = null;
-		let bgBA = null;
-		let direction = 0;
 		return {
 			outputs: {
-				childTexture,
-				display
-			},
-			bindInputs: (resolve) => {
-				const src = resolve(childTexture.key);
-				if (!src) return;
-				bgAB = root.createBindGroup(trailLayout, {
-					src: src.texture,
-					prev: stateA,
-					next: stateB,
-					display: displayTex,
-					prevLive: prevLiveA,
-					prevLiveOut: prevLiveB,
-					samp: trailSampler,
-					params: paramsBuf.buffer
-				});
-				bgBA = root.createBindGroup(trailLayout, {
-					src: src.texture,
-					prev: stateB,
-					next: stateA,
-					display: displayTex,
-					prevLive: prevLiveB,
-					prevLiveOut: prevLiveA,
-					samp: trailSampler,
-					params: paramsBuf.buffer
-				});
+				childTexture: sim.childTexture,
+				display: sim.display
 			},
-			getComputeNodes: (frameParams) => {
-				if (!bgAB || !bgBA) return null;
-				const fp = frameParams;
-				const speed = getCpuValue("speed") ?? 1;
+			bindInputs: sim.bindInputs,
+			getComputeNodes: (frameParams) => sim.tick(frameParams, ({ groups, dt }) => {
 				const zoom = getCpuValue("zoom") ?? 1;
 				if ((getCpuValue("trailOpacity") ?? 1) === 0) return null;
-				const dt = Math.min(fp.deltaTime ?? .016, .05) * speed;
 				const trailLength = Math.max(getCpuValue("trailLength") ?? .6, .001);
 				paramsBuf.write({
 					persistence: Math.exp(-dt / trailLength),
@@ -2165,10 +2122,8 @@ const componentDefinition = {
 					blendMode,
 					motionThreshold: getCpuValue("motionThreshold") ?? .06
 				});
-				const nodes = [pipeline.with(direction === 0 ? bgAB : bgBA)];
-				direction = 1 - direction;
-				return nodes;
-			}
+				return [pipeline.with(groups)];
+			})
 		};
 	},
 	fragment: ({ childNode, ctx, computeOutputs, uniforms, propValues, convertToTexture }) => {