shaders 2.2.48 → 2.3.50

package/dist/core/{Blob-D3PIrwWv.js → Blob-DeD9KRj-.js}

@@ -1,10 +1,10 @@
-import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } 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 { dot, float, length, max, normalize, pow, reflect, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Blob",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Organic animated blob with 3D lighting and gradients",
 	props: {
 		colorA: {
@@ -13,7 +13,8 @@ const componentDefinition = {
 			description: "Primary color of the blob",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 			description: "Secondary color of the blob",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		size: {
@@ -31,9 +33,10 @@ const componentDefinition = {
 			ui: {
 				type: "range",
 				min: 0,
-				max: 1,
-				step: .1,
-				label: "Size"
+				max: 2,
+				step: .05,
+				label: "Size",
+				group: "Effect"
 			}
 		},
 		deformation: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Deformation"
+				label: "Deformation",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -55,7 +59,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		highlightIntensity: {
@@ -66,7 +71,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Highlight Intensity"
+				label: "Highlight Intensity",
+				group: "Highlight"
 			}
 		},
 		highlightX: {
@@ -77,7 +83,8 @@ const componentDefinition = {
 				min: -1,
 				max: 1,
 				step: .1,
-				label: "Highlight X"
+				label: "Highlight X",
+				group: "Highlight"
 			}
 		},
 		highlightY: {
@@ -88,7 +95,8 @@ const componentDefinition = {
 				min: -1,
 				max: 1,
 				step: .1,
-				label: "Highlight Y"
+				label: "Highlight Y",
+				group: "Highlight"
 			}
 		},
 		highlightZ: {
@@ -99,7 +107,8 @@ const componentDefinition = {
 				min: -1,
 				max: 1,
 				step: .1,
-				label: "Highlight Z"
+				label: "Highlight Z",
+				group: "Highlight"
 			}
 		},
 		highlightColor: {
@@ -108,7 +117,8 @@ const componentDefinition = {
 			description: "Color of the specular highlight",
 			ui: {
 				type: "color",
-				label: "Highlight Color"
+				label: "Highlight Color",
+				group: "Highlight"
 			}
 		},
 		speed: {
@@ -119,7 +129,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		seed: {
@@ -130,7 +141,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Seed"
+				label: "Seed",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -142,7 +154,8 @@ const componentDefinition = {
 			description: "The center point of the blob",
 			ui: {
 				type: "position",
-				label: "Center Position"
+				label: "Center Position",
+				group: "Position"
 			}
 		},
 		colorSpace: {
@@ -152,7 +165,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},
@@ -188,7 +202,7 @@ const componentDefinition = {
 		const noise6 = sin(uv$1.x.mul(noiseScale.mul(float(3.2))).add(animTime.mul(float(1.1)))).add(sin(uv$1.y.mul(noiseScale.mul(float(3.5))).sub(animTime.mul(float(.4))))).mul(float(.04)).mul(deformation).mul(smoothstep(float(.75), float(.85), edgeComplexity));
 		const noiseAmount = noise1.add(noise2).add(noise3).add(noise4).add(noise5).add(noise6);
 		const organicRadius = baseRadius.add(noiseAmount);
-		const blobMask = pow(smoothstep(organicRadius.add(edgeWidth), organicRadius.sub(edgeWidth), dist), edgeCurve);
+		const blobMask = pow(smoothstep(organicRadius.sub(edgeWidth), organicRadius.add(edgeWidth), dist).oneMinus(), edgeCurve);
 		const distFromCenter = length(uv$1);
 		const sphereRadius = organicRadius;
 		const normalTilt = smoothstep(float(0), sphereRadius, distFromCenter);

package/dist/core/{Blur-k37gOaRA.js → Blur-Brqgsz7y.js}

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

package/dist/core/{BrightnessContrast-SC7HYw9z.js → BrightnessContrast-DSePKfxC.js}

@@ -12,8 +12,9 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .1,
-				label: "Brightness"
+				step: .05,
+				label: "Brightness",
+				group: "Appearance"
 			}
 		},
 		contrast: {
@@ -23,8 +24,9 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .1,
-				label: "Contrast"
+				step: .05,
+				label: "Contrast",
+				group: "Appearance"
 			},
 			transform: (value) => value + 1
 		}

package/dist/core/{Bulge-CbZA25NX.js → Bulge-D2OwcL23.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, float, length, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Bulge",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point of the bulge effect",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		strength: {
@@ -27,8 +28,9 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .1,
-				label: "Strength"
+				step: .05,
+				label: "Strength",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		falloff: {
@@ -49,8 +52,9 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .1,
-				label: "Falloff"
+				step: .05,
+				label: "Falloff",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -77,7 +81,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{CRTScreen-DV5Y2GRA.js → CRTScreen-D6qh6DnD.js}

@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 8,
 				max: 128,
 				step: 1,
-				label: "Pixel Size"
+				label: "Pixel Size",
+				group: "Effect"
 			}
 		},
 		colorShift: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Color Shift"
+				label: "Color Shift",
+				group: "Effect"
 			}
 		},
 		scanlineIntensity: {
@@ -36,7 +38,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Scanline Intensity"
+				label: "Scanline Intensity",
+				group: "Effect"
 			}
 		},
 		scanlineFrequency: {
@@ -47,7 +50,8 @@ const componentDefinition = {
 				min: 100,
 				max: 800,
 				step: 10,
-				label: "Scanline Frequency"
+				label: "Scanline Frequency",
+				group: "Effect"
 			}
 		},
 		brightness: {
@@ -58,7 +62,8 @@ const componentDefinition = {
 				min: .5,
 				max: 2,
 				step: .1,
-				label: "Brightness"
+				label: "Brightness",
+				group: "Appearance"
 			}
 		},
 		contrast: {
@@ -69,7 +74,8 @@ const componentDefinition = {
 				min: .5,
 				max: 2,
 				step: .1,
-				label: "Contrast"
+				label: "Contrast",
+				group: "Appearance"
 			}
 		},
 		vignetteIntensity: {
@@ -80,7 +86,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Vignette Intensity"
+				label: "Vignette Intensity",
+				group: "Effect"
 			}
 		},
 		vignetteRadius: {
@@ -90,8 +97,9 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .1,
-				label: "Vignette Radius"
+				step: .05,
+				label: "Vignette Radius",
+				group: "Effect"
 			}
 		}
 	},
@@ -130,7 +138,7 @@ const componentDefinition = {
 		const vignetteRadiusProp = uniforms.vignetteRadius.uniform;
 		const vignetteIntensity = uniforms.vignetteIntensity.uniform;
 		const innerEdge = float(1).sub(vignetteRadiusProp.mul(float(.9)));
-		const vignetteValue = smoothstep(innerEdge.add(float(.5)), innerEdge, vignetteDistance);
+		const vignetteValue = smoothstep(innerEdge, innerEdge.add(float(.5)), vignetteDistance).oneMinus();
 		const vignette = mix(float(1), vignetteValue, vignetteIntensity);
 		return vec4(phosphorColor.mul(vignette), float(1));
 	}

package/dist/core/{ChannelBlur-CQoP7Igg.js → ChannelBlur-BKo9uGaB.js}

@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Red Intensity"
+				label: "Red Intensity",
+				group: "Effect"
 			}
 		},
 		greenIntensity: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Green Intensity"
+				label: "Green Intensity",
+				group: "Effect"
 			}
 		},
 		blueIntensity: {
@@ -36,7 +38,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Blue Intensity"
+				label: "Blue Intensity",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Checkerboard-DBcVaYQv.js → Checkerboard-ChbG4nPC.js}

@@ -1,9 +1,9 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { float, floor, fract, min, mod, screenUV, smoothstep, vec2, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Checkerboard",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Classic checkerboard pattern with two alternating colors",
 	props: {
 		colorA: {
@@ -12,7 +12,8 @@ const componentDefinition = {
 			description: "First color of the checkerboard pattern",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -21,7 +22,8 @@ const componentDefinition = {
 			description: "Second color of the checkerboard pattern",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		cells: {
@@ -32,7 +34,8 @@ const componentDefinition = {
 				min: 1,
 				max: 50,
 				step: 1,
-				label: "Cells"
+				label: "Cells",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -43,7 +46,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -53,7 +57,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},

package/dist/core/{ChromaFlow-DcqnZ1wf.js → ChromaFlow-DyqU1igx.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { float, mix, screenUV, smoothstep, texture, uniform, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
@@ -12,7 +12,8 @@ const componentDefinition = {
 			description: "Base liquid color",
 			ui: {
 				type: "color",
-				label: "Base Color"
+				label: "Base Color",
+				group: "Colors"
 			}
 		},
 		upColor: {
@@ -21,7 +22,8 @@ const componentDefinition = {
 			description: "Color for upward movement",
 			ui: {
 				type: "color",
-				label: "Up Color"
+				label: "Up Color",
+				group: "Colors"
 			}
 		},
 		downColor: {
@@ -30,7 +32,8 @@ const componentDefinition = {
 			description: "Color for downward movement",
 			ui: {
 				type: "color",
-				label: "Down Color"
+				label: "Down Color",
+				group: "Colors"
 			}
 		},
 		leftColor: {
@@ -39,7 +42,8 @@ const componentDefinition = {
 			description: "Color for leftward movement",
 			ui: {
 				type: "color",
-				label: "Left Color"
+				label: "Left Color",
+				group: "Colors"
 			}
 		},
 		rightColor: {
@@ -48,7 +52,8 @@ const componentDefinition = {
 			description: "Color for rightward movement",
 			ui: {
 				type: "color",
-				label: "Right Color"
+				label: "Right Color",
+				group: "Colors"
 			}
 		},
 		intensity: {
@@ -59,7 +64,8 @@ const componentDefinition = {
 				min: .5,
 				max: 1.5,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -70,7 +76,8 @@ const componentDefinition = {
 				min: 0,
 				max: 3,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		momentum: {
@@ -81,7 +88,8 @@ const componentDefinition = {
 				min: 10,
 				max: 60,
 				step: 1,
-				label: "Momentum"
+				label: "Momentum",
+				group: "Effect"
 			}
 		}
 	},
@@ -154,8 +162,8 @@ const componentDefinition = {
 				const idx = (i * GRID_SIZE + j) * 2;
 				const cellX = (j + .5) / GRID_SIZE;
 				const cellY = (i + .5) / GRID_SIZE;
-				const dx = (cellX - pointer.x) / aspect;
-				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);
 				const speed = Math.sqrt(mouseVelX.value * mouseVelX.value + mouseVelY.value * mouseVelY.value);
 				const effectiveRadius = radius * Math.min(speed * speed * 20, 1);

package/dist/core/{ChromaticAberration-Dgf83J6w.js → ChromaticAberration-9nlFN2h0.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle } from "./transformations-YbhRK-rd.js";
+import { n as transformAngle } from "./transformations-CC_c-QAT.js";
 import { convertToTexture, cos, radians, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ChromaticAberration",
@@ -14,8 +14,9 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .1,
-				label: "Strength"
+				step: .05,
+				label: "Strength",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -27,7 +28,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		redOffset: {
@@ -38,7 +40,8 @@ const componentDefinition = {
 				min: -2,
 				max: 2,
 				step: .1,
-				label: "Red Offset"
+				label: "Red Offset",
+				group: "Effect"
 			}
 		},
 		greenOffset: {
@@ -49,7 +52,8 @@ const componentDefinition = {
 				min: -2,
 				max: 2,
 				step: .1,
-				label: "Green Offset"
+				label: "Green Offset",
+				group: "Effect"
 			}
 		},
 		blueOffset: {
@@ -60,7 +64,8 @@ const componentDefinition = {
 				min: -2,
 				max: 2,
 				step: .1,
-				label: "Blue Offset"
+				label: "Blue Offset",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Circle-BWd84W7f.js → Circle-DSQ_9vPx.js}

@@ -1,8 +1,8 @@
-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 { length, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Circle",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Generate a circle with adjustable size and softness",
 	props: {
 		color: {
@@ -11,7 +11,8 @@ const componentDefinition = {
 			description: "The color of the circle",
 			ui: {
 				type: "color",
-				label: "Color"
+				label: "Color",
+				group: "Colors"
 			}
 		},
 		radius: {
@@ -21,8 +22,9 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .1,
-				label: "Radius"
+				step: .05,
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -32,8 +34,9 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .1,
-				label: "Softness"
+				step: .05,
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -45,7 +48,8 @@ const componentDefinition = {
 			description: "The center point of the circle",
 			ui: {
 				type: "position",
-				label: "Center Position"
+				label: "Center Position",
+				group: "Position"
 			}
 		}
 	},
@@ -57,7 +61,7 @@ const componentDefinition = {
 		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);
+		const circleMask = smoothstep(circleEdge.sub(edgeSoftness), circleEdge, distanceFromCenter).oneMinus();
 		return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(circleMask));
 	}
 };