shaders 2.2.48 → 2.3.49

package/dist/core/{Liquify-_eLJRjd7.js → Liquify-JsuLWWkx.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { convertToTexture, float, screenUV, texture, uniform, vec2, vec4 } from "three/tsl";
 var GRID_SIZE = 32;
@@ -37,7 +37,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		decay: {
@@ -48,7 +49,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Decay"
+				label: "Decay",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -59,7 +61,8 @@ const componentDefinition = {
 				min: 0,
 				max: 3,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -86,7 +89,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},
@@ -97,10 +101,11 @@ const componentDefinition = {
 		let prevX = .5;
 		let prevY = .5;
 		let lastTime = Date.now();
-		onBeforeRender(({ pointer }) => {
+		onBeforeRender(({ pointer, dimensions }) => {
 			const currentTime = Date.now();
 			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 			lastTime = currentTime;
+			const aspect = dimensions.width / dimensions.height;
 			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;
@@ -114,8 +119,8 @@ const componentDefinition = {
 				displacementData[idx + 1] *= 1 - decay * dt;
 				const cellX = (j + .5) / GRID_SIZE;
 				const cellY = (i + .5) / GRID_SIZE;
-				const dx = cellX - pointer.x;
-				const dy = cellY - pointer.y;
+				const dx = aspect >= 1 ? (cellX - pointer.x) * aspect : cellX - pointer.x;
+				const dy = aspect >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect;
 				const dist = Math.sqrt(dx * dx + dy * dy);
 				if (dist < radius * 2 && Math.abs(velX) + Math.abs(velY) > .01) {
 					const influence = Math.exp(-dist * dist / (radius * radius));

package/dist/core/{Mirror-CnCw4TpZ.js → Mirror--f1QXEID.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { convertToTexture, cos, mix, screenUV, sin, step, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Mirror",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The point the mirror line passes through",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		angle: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -55,7 +57,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Perspective-BpgcHA7E.js → Perspective-Dyj4iJMR.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { convertToTexture, cos, float, max, screenUV, sin, tan, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Perspective",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "Center point of rotation",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		pan: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: -90,
 				max: 90,
 				step: .1,
-				label: "Pan"
+				label: "Pan",
+				group: "Effect"
 			}
 		},
 		tilt: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: -90,
 				max: 90,
 				step: .1,
-				label: "Tilt"
+				label: "Tilt",
+				group: "Effect"
 			}
 		},
 		fov: {
@@ -50,7 +53,8 @@ const componentDefinition = {
 				min: 30,
 				max: 120,
 				step: 1,
-				label: "FOV"
+				label: "FOV",
+				group: "Effect"
 			}
 		},
 		zoom: {
@@ -61,7 +65,8 @@ const componentDefinition = {
 				min: .5,
 				max: 3,
 				step: .1,
-				label: "Zoom"
+				label: "Zoom",
+				group: "Effect"
 			}
 		},
 		offset: {
@@ -73,7 +78,8 @@ const componentDefinition = {
 			description: "Shift the result in X/Y",
 			ui: {
 				type: "position",
-				label: "Offset"
+				label: "Offset",
+				group: "Position"
 			}
 		},
 		edges: {
@@ -100,7 +106,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Pixelate-Bt2jxIDd.js → Pixelate-CzXp_BwM.js}

@@ -13,7 +13,8 @@ const componentDefinition = {
 			min: 1,
 			max: 200,
 			step: 1,
-			label: "Scale"
+			label: "Scale",
+			group: "Effect"
 		}
 	} },
 	fragmentNode: ({ uniforms, childNode, onCleanup }) => {

package/dist/core/Plasma-FfOwR9cP.js

@@ -0,0 +1,135 @@
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
+import { clamp, exp, float, mx_noise_float, pow, screenUV, vec3, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "Plasma",
+	category: "Textures",
+	description: "Animated effect of glowing plasma",
+	props: {
+		density: {
+			default: 2,
+			description: "Density of the plasma pattern",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 4,
+				step: .1,
+				label: "Density",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: 2,
+			description: "Animation speed",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Effect"
+			}
+		},
+		intensity: {
+			default: 1.5,
+			description: "Brightness and spread of the plasma glow",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .1,
+				label: "Intensity",
+				group: "Colors"
+			}
+		},
+		warp: {
+			default: .4,
+			description: "How much the flow distorts and swirls",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Warp",
+				group: "Effect"
+			}
+		},
+		contrast: {
+			default: 1,
+			description: "Push darks darker and lights lighter",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .1,
+				label: "Contrast",
+				group: "Colors"
+			}
+		},
+		balance: {
+			default: 50,
+			description: "Skew color balance toward A (higher) or B (lower)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Balance",
+				group: "Colors"
+			}
+		},
+		colorA: {
+			default: "#7018be",
+			description: "Primary color",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#000000",
+			description: "Secondary color",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms } = params;
+		const density = uniforms.density.uniform;
+		const intensity = uniforms.intensity.uniform;
+		const warp = uniforms.warp.uniform;
+		const t = createAnimatedTime(params, uniforms.speed).mul(.125);
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const pos = vec3(screenUV.x.mul(aspect), screenUV.y, float(0)).mul(exp(density.sub(1))).toVar();
+		const warpAmount = warp.mul(4);
+		const qx = mx_noise_float(pos.add(vec3(t.mul(.3), t.mul(-.2), 0)));
+		const qy = mx_noise_float(pos.add(vec3(5.2, 1.3, t.mul(.25))));
+		const warped1 = pos.add(vec3(qx, qy, float(0)).mul(warpAmount));
+		const rx = mx_noise_float(warped1.add(vec3(1.7, 9.2, t.mul(.15))));
+		const ry = mx_noise_float(warped1.add(vec3(8.3, 2.8, t.mul(.13))));
+		const contrasted = clamp(pow(mx_noise_float(pos.add(vec3(rx, ry, float(0)).mul(warpAmount))).mul(.5).add(.5), float(5).div(intensity)).sub(.5).mul(uniforms.contrast.uniform).add(.5), 0, 1);
+		const balanceShift = uniforms.balance.uniform.div(100).sub(.5);
+		const balanced = clamp(contrasted.add(balanceShift), 0, 1);
+		return vec4(mixColors(uniforms.colorB.uniform, uniforms.colorA.uniform, balanced, uniforms.colorSpace.uniform), 1);
+	}
+};
+var Plasma_default = componentDefinition;
+export { componentDefinition as n, Plasma_default as t };

package/dist/core/{PolarCoordinates-BJ8-cfC7.js → PolarCoordinates-CfuvmwZm.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { PI, atan, convertToTexture, length, mix, screenUV, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "PolarCoordinates",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point for polar coordinate conversion",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		wrap: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Wrap"
+				label: "Wrap",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		intensity: {
@@ -50,7 +53,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -77,7 +81,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Posterize-Bs-iNEVB.js → Posterize-IUwDieMu.js}

@@ -12,7 +12,8 @@ const componentDefinition = {
 			min: 2,
 			max: 20,
 			step: 1,
-			label: "Intensity"
+			label: "Intensity",
+			group: "Effect"
 		}
 	} },
 	fragmentNode: ({ uniforms, childNode }) => {

package/dist/core/{ProgressiveBlur-DELpd9wJ.js → ProgressiveBlur-BTGKywKM.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { n as transformAngle, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { Fn, convertToTexture, cos, float, max, radians, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ProgressiveBlur",
@@ -15,7 +15,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -27,7 +28,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 			description: "Center point where blur begins",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		falloff: {
@@ -50,7 +53,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Falloff"
+				label: "Falloff",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{RadialGradient-DQ4JGS5G.js → RadialGradient-DbcPAwI7.js}

@@ -1,9 +1,9 @@
-import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { distance, float, screenUV, vec2, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "RadialGradient",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Radial gradient radiating from a center point",
 	props: {
 		colorA: {
@@ -12,7 +12,8 @@ const componentDefinition = {
 			description: "The starting color at the center of the gradient",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -21,7 +22,8 @@ const componentDefinition = {
 			description: "The ending color at the edge of the gradient",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		center: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 			description: "The center point of the radial gradient",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		radius: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -54,7 +58,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},

package/dist/core/{RectangularCoordinates-DXSP_gdW.js → RectangularCoordinates-OOpDHjTM.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { PI, convertToTexture, cos, mix, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "RectangularCoordinates",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point for rectangular coordinate conversion",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		scale: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: .1,
 				max: 3,
 				step: .1,
-				label: "Scale"
+				label: "Scale",
+				group: "Effect"
 			}
 		},
 		intensity: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -66,7 +69,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Ripples-DwDKIvtQ.js → Ripples-CGhzc9or.js}

@@ -1,10 +1,10 @@
-import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { distance, float, screenUV, sin, smoothstep, vec2, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Ripples",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Concentric animated ripples emanating from a point",
 	props: {
 		center: {
@@ -16,7 +16,8 @@ const componentDefinition = {
 			description: "The center point where ripples emanate from",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		colorA: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 			description: "Color of the ripple waves",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -34,7 +36,8 @@ const componentDefinition = {
 			description: "Background color between ripples",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		speed: {
@@ -45,7 +48,8 @@ const componentDefinition = {
 				min: -5,
 				max: 5,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		frequency: {
@@ -56,7 +60,8 @@ const componentDefinition = {
 				min: 1,
 				max: 80,
 				step: .1,
-				label: "Frequency"
+				label: "Frequency",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -67,7 +72,8 @@ const componentDefinition = {
 				min: 0,
 				max: 3,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		thickness: {
@@ -78,7 +84,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Thickness"
+				label: "Thickness",
+				group: "Effect"
 			}
 		},
 		phase: {
@@ -89,7 +96,8 @@ const componentDefinition = {
 				min: 0,
 				max: 6.28,
 				step: .1,
-				label: "Phase"
+				label: "Phase",
+				group: "Animation"
 			}
 		}
 	},
@@ -108,7 +116,7 @@ const componentDefinition = {
 		const animTime = createAnimatedTime(params, uniforms.speed);
 		const baseWave = sin(dist.mul(frequency).sub(animTime).add(phase));
 		const thicknessThreshold = thickness.mul(float(2)).sub(float(1));
-		return mixColors(colorB, colorA, smoothstep(thicknessThreshold.add(softness), thicknessThreshold.sub(softness), baseWave), float(0));
+		return mixColors(colorB, colorA, smoothstep(thicknessThreshold.sub(softness), thicknessThreshold.add(softness), baseWave).oneMinus(), float(0));
 	}
 };
 var Ripples_default = componentDefinition;

package/dist/core/{Saturation-ekyl1D9y.js → Saturation-ssiNVXIp.js}

@@ -12,7 +12,8 @@ const componentDefinition = {
 			min: 0,
 			max: 3,
 			step: .1,
-			label: "Intensity"
+			label: "Intensity",
+			group: "Appearance"
 		}
 	} },
 	fragmentNode: ({ uniforms, childNode }) => {

package/dist/core/{Sharpness-DlWZ-yPe.js → Sharpness-B-nN0G5P.js}

@@ -13,7 +13,8 @@ const componentDefinition = {
 			min: 0,
 			max: 5,
 			step: .1,
-			label: "Sharpness"
+			label: "Sharpness",
+			group: "Appearance"
 		}
 	} },
 	fragmentNode: ({ uniforms, childNode, onCleanup }) => {