shaders 2.2.23 → 2.2.25

package/dist/core/Checkerboard-CgB-egNY.js

@@ -0,0 +1,83 @@
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-DxfQXZWi.js";
+import { t as mixColors } from "./colorMixing-BXiTAqJU.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Checkerboard",
+	category: "Base Layers",
+	description: "Classic checkerboard pattern with two alternating colors",
+	acceptsUVContext: true,
+	props: {
+		colorA: {
+			default: "#cccccc",
+			transform: transformColor,
+			description: "First color of the checkerboard pattern",
+			ui: {
+				type: "color",
+				label: "Color A"
+			}
+		},
+		colorB: {
+			default: "#999999",
+			transform: transformColor,
+			description: "Second color of the checkerboard pattern",
+			ui: {
+				type: "color",
+				label: "Color B"
+			}
+		},
+		cells: {
+			default: 8,
+			description: "Number of cells along the shortest canvas edge (creates square cells)",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 50,
+				step: 1,
+				label: "Cells"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Smoothness of the transition between colors (0 = hard edges, 1 = very soft)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, uvContext }) => {
+		const { vec2: vec2$1, float: float$1, floor, mod, fract, smoothstep, min: min$1, screenUV: screenUV$1, viewportSize: viewportSize$1 } = TSL;
+		const uv = uvContext ?? screenUV$1;
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const correctedUV = vec2$1(uv.x.mul(aspect), uv.y.oneMinus());
+		const cells = uniforms.cells.uniform;
+		const softness = uniforms.softness.uniform;
+		const gridUV = correctedUV.mul(cells);
+		const gridCoords = floor(gridUV);
+		const checkerValue = mod(gridCoords.x.add(gridCoords.y), 2);
+		let blendFactor = checkerValue;
+		if (softness) {
+			const cellUV = fract(gridUV);
+			const distToEdge = min$1(min$1(cellUV.x, float$1(1).sub(cellUV.x)), min$1(cellUV.y, float$1(1).sub(cellUV.y)));
+			const softRange = softness.mul(.5);
+			const edgeBlend = smoothstep(float$1(0), softRange, distToEdge);
+			blendFactor = checkerValue.mul(edgeBlend).add(float$1(.5).mul(float$1(1).sub(edgeBlend)));
+		}
+		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, blendFactor, uniforms.colorSpace.uniform);
+	}
+};
+var Checkerboard_default = componentDefinition;
+export { componentDefinition as n, Checkerboard_default as t };

package/dist/core/ChromaFlow-vRCwhQpN.js

@@ -0,0 +1,222 @@
+import { r as transformColor } from "./transformations-DxfQXZWi.js";
+import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "ChromaFlow",
+	category: "Interactive",
+	description: "Interactive liquid flow effect that follows your cursor",
+	props: {
+		baseColor: {
+			default: "#0066ff",
+			transform: transformColor,
+			description: "Base liquid color",
+			ui: {
+				type: "color",
+				label: "Base Color"
+			}
+		},
+		upColor: {
+			default: "#00ff00",
+			transform: transformColor,
+			description: "Color for upward movement",
+			ui: {
+				type: "color",
+				label: "Up Color"
+			}
+		},
+		downColor: {
+			default: "#ff0000",
+			transform: transformColor,
+			description: "Color for downward movement",
+			ui: {
+				type: "color",
+				label: "Down Color"
+			}
+		},
+		leftColor: {
+			default: "#0000ff",
+			transform: transformColor,
+			description: "Color for leftward movement",
+			ui: {
+				type: "color",
+				label: "Left Color"
+			}
+		},
+		rightColor: {
+			default: "#ffff00",
+			transform: transformColor,
+			description: "Color for rightward movement",
+			ui: {
+				type: "color",
+				label: "Right Color"
+			}
+		},
+		intensity: {
+			default: 1,
+			description: "Strength of the liquid effect",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 1.5,
+				step: .1,
+				label: "Intensity"
+			}
+		},
+		radius: {
+			default: 2,
+			description: "Radius of the liquid effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .01,
+				label: "Radius"
+			}
+		},
+		momentum: {
+			default: 30,
+			description: "How much momentum colors retain in their flow direction",
+			ui: {
+				type: "range",
+				min: 10,
+				max: 60,
+				step: 1,
+				label: "Momentum"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onBeforeRender, onCleanup }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, uniform: uniform$1, screenUV: screenUV$1, texture, smoothstep, mix: mix$1 } = TSL;
+		const GRID_SIZE = 128;
+		const displacementData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
+		const liquidData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
+		const displacementTexture = new DataTexture(displacementData, GRID_SIZE, GRID_SIZE, RGFormat, FloatType);
+		displacementTexture.magFilter = LinearFilter;
+		displacementTexture.minFilter = LinearFilter;
+		displacementTexture.needsUpdate = true;
+		const liquidTexture = new DataTexture(liquidData, GRID_SIZE, GRID_SIZE, RGFormat, FloatType);
+		liquidTexture.magFilter = LinearFilter;
+		liquidTexture.minFilter = LinearFilter;
+		liquidTexture.needsUpdate = true;
+		const displacementField = texture(displacementTexture);
+		const liquidField = texture(liquidTexture);
+		const mouseX = uniform$1(.5);
+		const mouseY = uniform$1(.5);
+		const mouseVelX = uniform$1(0);
+		const mouseVelY = uniform$1(0);
+		let prevX = .5;
+		let prevY = .5;
+		let lastTime = Date.now();
+		onBeforeRender(({ pointer }) => {
+			const currentTime = Date.now();
+			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
+			lastTime = currentTime;
+			const velX = dt > 0 ? (pointer.x - prevX) / dt : 0;
+			const velY = dt > 0 ? (pointer.y - prevY) / dt : 0;
+			mouseVelX.value = mouseVelX.value * .85 + velX * .15;
+			mouseVelY.value = mouseVelY.value * .85 + velY * .15;
+			mouseX.value = pointer.x;
+			mouseY.value = pointer.y;
+			const intensity = uniforms.intensity.uniform.value;
+			const radius = uniforms.radius.uniform.value * .05;
+			const momentum = uniforms.momentum.uniform.value;
+			const newDisplacementData = new Float32Array(displacementData);
+			const newLiquidData = new Float32Array(liquidData);
+			const flowFadeRate = 1 - dt / Math.max(.1, 1);
+			for (let i = 0; i < GRID_SIZE * GRID_SIZE * 2; i++) newDisplacementData[i] = displacementData[i] * flowFadeRate;
+			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
+				const idx = (i * GRID_SIZE + j) * 2;
+				const liquidFadeRate = 1 - dt / Math.max(.4, 1);
+				newLiquidData[idx] = liquidData[idx] * liquidFadeRate;
+				newLiquidData[idx + 1] = liquidData[idx + 1] * liquidFadeRate;
+				if (Math.abs(displacementData[idx]) > .001 || Math.abs(displacementData[idx + 1]) > .001) {
+					const flowSpeed = momentum * 50 * dt;
+					const advectX = j - displacementData[idx] * flowSpeed;
+					const advectY = i - displacementData[idx + 1] * flowSpeed;
+					const x0 = Math.floor(advectX);
+					const y0 = Math.floor(advectY);
+					const x1 = x0 + 1;
+					const y1 = y0 + 1;
+					if (x0 >= 0 && y0 >= 0 && x1 < GRID_SIZE && y1 < GRID_SIZE) {
+						const fx = advectX - x0;
+						const fy = advectY - y0;
+						const idx00 = (y0 * GRID_SIZE + x0) * 2;
+						const idx01 = (y0 * GRID_SIZE + x1) * 2;
+						const idx10 = (y1 * GRID_SIZE + x0) * 2;
+						const idx11 = (y1 * GRID_SIZE + x1) * 2;
+						newLiquidData[idx] = (liquidData[idx00] * (1 - fx) * (1 - fy) + liquidData[idx01] * fx * (1 - fy) + liquidData[idx10] * (1 - fx) * fy + liquidData[idx11] * fx * fy) * liquidFadeRate;
+					}
+				}
+			}
+			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
+				const idx = (i * GRID_SIZE + j) * 2;
+				const cellX = (j + .5) / GRID_SIZE;
+				const cellY = (i + .5) / GRID_SIZE;
+				const dx = cellX - pointer.x;
+				const dy = cellY - pointer.y;
+				const dist = Math.sqrt(dx * dx + dy * dy);
+				const speed = Math.sqrt(mouseVelX.value * mouseVelX.value + mouseVelY.value * mouseVelY.value);
+				const effectiveRadius = radius * Math.min(speed * speed * 20, 1);
+				if (dist < effectiveRadius * 2 && Math.abs(velX) + Math.abs(velY) > .01) {
+					const influence = Math.exp(-dist * dist / (effectiveRadius * effectiveRadius));
+					newDisplacementData[idx] += mouseVelX.value * influence * (intensity * 100) * dt * .01;
+					newDisplacementData[idx + 1] += mouseVelY.value * influence * (intensity * 100) * dt * .01;
+					const speedMultiplier = Math.min(speed * 10, 1);
+					newLiquidData[idx] += influence * (intensity * 100) * dt * .01 * speedMultiplier;
+					newLiquidData[idx + 1] = 0;
+				}
+				newDisplacementData[idx] = Math.max(-1, Math.min(1, newDisplacementData[idx]));
+				newDisplacementData[idx + 1] = Math.max(-1, Math.min(1, newDisplacementData[idx + 1]));
+				newLiquidData[idx] = Math.max(0, Math.min(1, newLiquidData[idx]));
+				newLiquidData[idx + 1] = 0;
+			}
+			displacementData.set(newDisplacementData);
+			liquidData.set(newLiquidData);
+			displacementTexture.needsUpdate = true;
+			liquidTexture.needsUpdate = true;
+			prevX = pointer.x;
+			prevY = pointer.y;
+		});
+		onCleanup(() => {
+			displacementTexture.dispose();
+			liquidTexture.dispose();
+		});
+		const liquidDensity = liquidField.sample(screenUV$1).x;
+		const pixelSize = vec2$1(float$1(1 / 128), float$1(1 / 128));
+		const sample1 = liquidField.sample(screenUV$1.add(vec2$1(pixelSize.x, float$1(0)))).x;
+		const sample2 = liquidField.sample(screenUV$1.add(vec2$1(float$1(0), pixelSize.y))).x;
+		const sample3 = liquidField.sample(screenUV$1.add(vec2$1(pixelSize.x.negate(), float$1(0)))).x;
+		const sample4 = liquidField.sample(screenUV$1.add(vec2$1(float$1(0), pixelSize.y.negate()))).x;
+		const smoothedLiquid = liquidDensity.add(sample1).add(sample2).add(sample3).add(sample4).mul(float$1(.2));
+		const liquidIntensity = smoothstep(float$1(0), float$1(.1), smoothedLiquid);
+		const flowPixelSize = vec2$1(float$1(1 / 128), float$1(1 / 128));
+		const centerFlow = displacementField.sample(screenUV$1).xy;
+		const flowSample1 = displacementField.sample(screenUV$1.add(vec2$1(flowPixelSize.x, float$1(0)))).xy;
+		const flowSample2 = displacementField.sample(screenUV$1.add(vec2$1(float$1(0), flowPixelSize.y))).xy;
+		const flowSample3 = displacementField.sample(screenUV$1.add(vec2$1(flowPixelSize.x.negate(), float$1(0)))).xy;
+		const flowSample4 = displacementField.sample(screenUV$1.add(vec2$1(float$1(0), flowPixelSize.y.negate()))).xy;
+		const flowVectors = centerFlow.add(flowSample1).add(flowSample2).add(flowSample3).add(flowSample4).mul(float$1(.2));
+		const baseColor = uniforms.baseColor.uniform;
+		const upColor = uniforms.upColor.uniform;
+		const downColor = uniforms.downColor.uniform;
+		const leftColor = uniforms.leftColor.uniform;
+		const rightColor = uniforms.rightColor.uniform;
+		const flowMagnitude = flowVectors.x.mul(flowVectors.x).add(flowVectors.y.mul(flowVectors.y)).sqrt();
+		const hasFlow = smoothstep(float$1(.01), float$1(.1), flowMagnitude);
+		const normalizedX = flowVectors.x.div(flowMagnitude.add(float$1(.001)));
+		const normalizedY = flowVectors.y.div(flowMagnitude.add(float$1(.001)));
+		const rightAmount = smoothstep(float$1(0), float$1(.7), normalizedX.max(float$1(0)));
+		const leftAmount = smoothstep(float$1(0), float$1(.7), normalizedX.negate().max(float$1(0)));
+		const upAmount = smoothstep(float$1(0), float$1(.7), normalizedY.max(float$1(0)));
+		const downAmount = smoothstep(float$1(0), float$1(.7), normalizedY.negate().max(float$1(0)));
+		const horizontalColor = leftColor.mul(leftAmount).add(rightColor.mul(rightAmount));
+		const verticalColor = downColor.mul(downAmount).add(upColor.mul(upAmount));
+		const horizontalWeight = leftAmount.add(rightAmount);
+		const verticalWeight = upAmount.add(downAmount);
+		const totalWeight = horizontalWeight.add(verticalWeight).add(float$1(.001));
+		const finalColor = mix$1(baseColor, horizontalColor.mul(horizontalWeight.div(totalWeight)).add(verticalColor.mul(verticalWeight.div(totalWeight))), hasFlow);
+		return vec4$1(finalColor.rgb.mul(liquidIntensity), finalColor.a.mul(liquidIntensity));
+	}
+};
+var ChromaFlow_default = componentDefinition;
+export { componentDefinition as n, ChromaFlow_default as t };

package/dist/core/ChromaticAberration-FTquTQIL.js

@@ -0,0 +1,88 @@
+import { n as transformAngle } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "ChromaticAberration",
+	category: "Stylize",
+	description: "Separate RGB channels for a prismatic distortion effect",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		strength: {
+			default: .2,
+			description: "Overall strength of the chromatic aberration effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Strength"
+			}
+		},
+		angle: {
+			default: 0,
+			transform: transformAngle,
+			description: "Direction of the chromatic aberration in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle"
+			}
+		},
+		redOffset: {
+			default: -1,
+			description: "Red channel offset multiplier",
+			ui: {
+				type: "range",
+				min: -2,
+				max: 2,
+				step: .1,
+				label: "Red Offset"
+			}
+		},
+		greenOffset: {
+			default: 0,
+			description: "Green channel offset multiplier",
+			ui: {
+				type: "range",
+				min: -2,
+				max: 2,
+				step: .1,
+				label: "Green Offset"
+			}
+		},
+		blueOffset: {
+			default: 1,
+			description: "Blue channel offset multiplier",
+			ui: {
+				type: "range",
+				min: -2,
+				max: 2,
+				step: .1,
+				label: "Blue Offset"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		const { vec2: vec2$1, vec4: vec4$1, cos: cos$1, sin: sin$1, radians, screenUV: screenUV$1, convertToTexture: convertToTexture$1 } = TSL;
+		if (!childNode) return vec4$1(0, 0, 0, 0);
+		const childTexture = convertToTexture$1(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const angleRad = radians(uniforms.angle.uniform);
+		const direction = vec2$1(cos$1(angleRad), sin$1(angleRad));
+		const scaledStrength = uniforms.strength.uniform.mul(.1);
+		const redUV = screenUV$1.add(direction.mul(scaledStrength).mul(uniforms.redOffset.uniform));
+		const greenUV = screenUV$1.add(direction.mul(scaledStrength).mul(uniforms.greenOffset.uniform));
+		const blueUV = screenUV$1.add(direction.mul(scaledStrength).mul(uniforms.blueOffset.uniform));
+		const redChannel = childTexture.sample(redUV).r;
+		const greenChannel = childTexture.sample(greenUV).g;
+		const blueChannel = childTexture.sample(blueUV).b;
+		const alpha = childTexture.sample(screenUV$1).a;
+		return vec4$1(redChannel, greenChannel, blueChannel, alpha);
+	}
+};
+var ChromaticAberration_default = componentDefinition;
+export { componentDefinition as n, ChromaticAberration_default as t };

package/dist/core/Circle-Daziv5d7.js

@@ -0,0 +1,67 @@
+import { o as transformPosition, r as transformColor } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Circle",
+	category: "Base Layers",
+	description: "Generate a circle with adjustable size and softness",
+	acceptsUVContext: true,
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "The color of the circle",
+			ui: {
+				type: "color",
+				label: "Color"
+			}
+		},
+		radius: {
+			default: 1,
+			description: "The radius of the circle. A value of one (1) is sets the circle to fit the canvas.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Radius"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "The center point of the circle",
+			ui: {
+				type: "position",
+				label: "Center Position"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, uvContext }) => {
+		const { vec2: vec2$1, vec4: vec4$1, length, smoothstep, screenUV: screenUV$1, viewportSize: viewportSize$1 } = TSL;
+		const uv = uvContext ?? screenUV$1;
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const aspectCorrectedUV = vec2$1(uv.x.mul(aspect), uv.y);
+		const centerPos = vec2$1(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const distanceFromCenter = length(aspectCorrectedUV.sub(centerPos));
+		const edgeSoftness = uniforms.softness.uniform;
+		const circleEdge = uniforms.radius.uniform.mul(.5);
+		const circleMask = smoothstep(circleEdge, circleEdge.sub(edgeSoftness), distanceFromCenter);
+		return vec4$1(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(circleMask));
+	}
+};
+var Circle_default = componentDefinition;
+export { componentDefinition as n, Circle_default as t };

package/dist/core/CursorTrail-Bsz9e6Fn.js

@@ -0,0 +1,145 @@
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-DxfQXZWi.js";
+import { t as mixColors } from "./colorMixing-BXiTAqJU.js";
+import { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "CursorTrail",
+	category: "Interactive",
+	description: "Animated trail effect that tracks cursor movement",
+	props: {
+		colorA: {
+			default: "#00aaff",
+			transform: transformColor,
+			description: "Color of fresh trails",
+			ui: {
+				type: "color",
+				label: "Start Color"
+			}
+		},
+		colorB: {
+			default: "#ff00aa",
+			transform: transformColor,
+			description: "Color trails transition to as they fade",
+			ui: {
+				type: "color",
+				label: "End Color"
+			}
+		},
+		radius: {
+			default: .5,
+			description: "Base radius of trail circles",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 2,
+				step: .01,
+				label: "Radius"
+			}
+		},
+		length: {
+			default: .5,
+			description: "How long trail circles persist (in seconds)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 2,
+				step: .1,
+				label: "Trail Length"
+			}
+		},
+		shrink: {
+			default: 1,
+			description: "How much circles shrink as they fade out (0 = no shrink, 1 = full shrink)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Shrink Amount"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onBeforeRender, onCleanup }) => {
+		const { vec4: vec4$1, float: float$1, texture, step: step$1, screenUV: screenUV$1 } = TSL;
+		const GRID_SIZE = 128;
+		const trailData = new Float32Array(GRID_SIZE * GRID_SIZE * 4);
+		const trailTexture = new DataTexture(trailData, GRID_SIZE, GRID_SIZE, RGBAFormat, FloatType);
+		trailTexture.magFilter = LinearFilter;
+		trailTexture.minFilter = LinearFilter;
+		trailTexture.needsUpdate = true;
+		const trailField = texture(trailTexture);
+		let prevX = .5;
+		let prevY = .5;
+		let lastTime = Date.now();
+		onBeforeRender(({ pointer }) => {
+			const currentTime = Date.now();
+			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
+			lastTime = currentTime;
+			const radius = uniforms.radius.uniform.value * .1;
+			const length = uniforms.length.uniform.value;
+			const shrink = uniforms.shrink.uniform.value;
+			const dx = pointer.x - prevX;
+			const dy = pointer.y - prevY;
+			const speed = Math.sqrt(dx * dx + dy * dy);
+			const fadeRate = 1 - dt / Math.max(.1, length);
+			const ageRate = dt / Math.max(.1, length);
+			for (let i = 0; i < GRID_SIZE * GRID_SIZE * 4; i += 4) {
+				trailData[i] *= fadeRate;
+				trailData[i + 1] = 1 - (1 - trailData[i]) * shrink;
+				trailData[i + 2] = Math.min(1, trailData[i + 2] + ageRate);
+			}
+			if (speed > .001) {
+				const influenceRadius = radius * 3;
+				const minJ = Math.max(0, Math.floor((pointer.x - influenceRadius) * GRID_SIZE));
+				const maxJ = Math.min(GRID_SIZE - 1, Math.ceil((pointer.x + influenceRadius) * GRID_SIZE));
+				const minI = Math.max(0, Math.floor((pointer.y - influenceRadius) * GRID_SIZE));
+				const maxI = Math.min(GRID_SIZE - 1, Math.ceil((pointer.y + influenceRadius) * GRID_SIZE));
+				for (let i = minI; i <= maxI; i++) for (let j = minJ; j <= maxJ; j++) {
+					const idx = (i * GRID_SIZE + j) * 4;
+					const cellX = (j + .5) / GRID_SIZE;
+					const cellY = (i + .5) / GRID_SIZE;
+					const cellDx = cellX - pointer.x;
+					const cellDy = cellY - pointer.y;
+					const dist = Math.sqrt(cellDx * cellDx + cellDy * cellDy);
+					if (dist < influenceRadius) {
+						const addAmount = Math.exp(-dist * dist / (radius * radius)) * speed * 50 * dt;
+						trailData[idx] = Math.min(1, trailData[idx] + addAmount);
+						trailData[idx + 1] = 1;
+						trailData[idx + 2] = 0;
+					}
+				}
+			}
+			trailTexture.needsUpdate = true;
+			prevX = pointer.x;
+			prevY = pointer.y;
+		});
+		onCleanup(() => {
+			trailTexture.dispose();
+		});
+		const pixelSize = float$1(1 / GRID_SIZE);
+		const centerSample = trailField.sample(screenUV$1);
+		const sample1 = trailField.sample(screenUV$1.add(TSL.vec2(pixelSize, float$1(0))));
+		const sample2 = trailField.sample(screenUV$1.add(TSL.vec2(float$1(0), pixelSize)));
+		const sample3 = trailField.sample(screenUV$1.add(TSL.vec2(pixelSize.negate(), float$1(0))));
+		const sample4 = trailField.sample(screenUV$1.add(TSL.vec2(float$1(0), pixelSize.negate())));
+		const trailIntensity = centerSample.x.mul(float$1(.5)).add(sample1.x.mul(float$1(.125))).add(sample2.x.mul(float$1(.125))).add(sample3.x.mul(float$1(.125))).add(sample4.x.mul(float$1(.125)));
+		const trailAge = centerSample.z.mul(float$1(.5)).add(sample1.z.mul(float$1(.125))).add(sample2.z.mul(float$1(.125))).add(sample3.z.mul(float$1(.125))).add(sample4.z.mul(float$1(.125)));
+		const circleMask = step$1(float$1(.01), trailIntensity);
+		const colorA = uniforms.colorA.uniform;
+		const colorB = uniforms.colorB.uniform;
+		const trailColor = mixColors(colorA, colorB, trailAge, uniforms.colorSpace.uniform);
+		return vec4$1(trailColor.rgb, trailColor.a.mul(circleMask));
+	}
+};
+var CursorTrail_default = componentDefinition;
+export { componentDefinition as n, CursorTrail_default as t };

package/dist/core/DiffuseBlur-Cj2PtRNd.js

@@ -0,0 +1,83 @@
+import { t as applyEdgeHandling } from "./edges-Bn_OIa_h.js";
+import { a as transformEdges } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "DiffuseBlur",
+	category: "Blurs",
+	description: "Grain-like pixel displacement at random",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: 30,
+			description: "Intensity of the diffuse blur effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Intensity"
+			}
+		},
+		edges: {
+			default: "stretch",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			transform: transformEdges,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges"
+			}
+		}
+	},
+	uvTransformNode: ({ uv, uniforms, viewportSize: viewportSize$1 }) => {
+		const { vec2: vec2$1, fract, sin: sin$1, dot: dot$1 } = TSL;
+		const hash = (p) => {
+			return fract(sin$1(dot$1(p, vec2$1(12.9898, 78.233).mul(2))).mul(43758.5453));
+		};
+		const pixelSize = vec2$1(1).div(viewportSize$1);
+		const seed = uv.mul(1e3);
+		const rand1 = hash(seed);
+		const rand2 = hash(seed.add(vec2$1(73.2, 41.9)));
+		const offset = vec2$1(rand1.mul(2).sub(1), rand2.mul(2).sub(1)).mul(uniforms.intensity.uniform).mul(pixelSize);
+		return uv.add(offset);
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		const { vec2: vec2$1, vec4: vec4$1, screenUV: screenUV$1, convertToTexture: convertToTexture$1, viewportSize: viewportSize$1, fract, sin: sin$1, dot: dot$1 } = TSL;
+		if (!childNode) return vec4$1(0, 0, 0, 0);
+		const childTexture = convertToTexture$1(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const hash = (p) => {
+			return fract(sin$1(dot$1(p, vec2$1(12.9898, 78.233).mul(2))).mul(43758.5453));
+		};
+		const uv = screenUV$1;
+		const pixelSize = vec2$1(1).div(viewportSize$1);
+		const seed = uv.mul(1e3);
+		const rand1 = hash(seed);
+		const rand2 = hash(seed.add(vec2$1(73.2, 41.9)));
+		const offset = vec2$1(rand1.mul(2).sub(1), rand2.mul(2).sub(1)).mul(uniforms.intensity.uniform).mul(pixelSize);
+		const displacedUV = uv.add(offset);
+		return applyEdgeHandling(displacedUV, childTexture.sample(displacedUV), childTexture, uniforms.edges.uniform);
+	}
+};
+var DiffuseBlur_default = componentDefinition;
+export { componentDefinition as n, DiffuseBlur_default as t };