shaders 2.2.47 → 2.3.49

package/dist/core/{Spiral-BY5eOKPL.js → Spiral-Bl67ud0b.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 { abs, atan, clamp, float, fract, fwidth, length, mix, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Spiral",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Rotating spiral pattern with animated movement",
 	props: {
 		colorA: {
@@ -13,7 +13,8 @@ const componentDefinition = {
 			description: "Background color",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 			description: "Spiral stroke color",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		strokeWidth: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Stroke Width"
+				label: "Stroke Width",
+				group: "Effect"
 			}
 		},
 		strokeFalloff: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Stroke Falloff"
+				label: "Stroke Falloff",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -55,7 +59,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -66,7 +71,8 @@ const componentDefinition = {
 				min: -3,
 				max: 3,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		center: {
@@ -78,7 +84,8 @@ const componentDefinition = {
 			description: "The center point of the spiral",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		scale: {
@@ -89,7 +96,8 @@ const componentDefinition = {
 				min: .1,
 				max: 5,
 				step: .1,
-				label: "Scale"
+				label: "Scale",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -99,7 +107,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},

package/dist/core/{Strands-C5-TqTXW.js → Strands-BNxk94tR.js}

@@ -1,9 +1,9 @@
-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 { Fn, abs, cos, float, max, mix, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Strands",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Procedural wavy strands with layered animation",
 	requiresRTT: false,
 	requiresChild: false,
@@ -16,7 +16,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		amplitude: {
@@ -27,7 +28,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Amplitude"
+				label: "Amplitude",
+				group: "Effect"
 			}
 		},
 		frequency: {
@@ -38,7 +40,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Frequency"
+				label: "Frequency",
+				group: "Effect"
 			}
 		},
 		lineCount: {
@@ -49,7 +52,8 @@ const componentDefinition = {
 				min: 4,
 				max: 32,
 				step: 1,
-				label: "Line Count"
+				label: "Line Count",
+				group: "Effect"
 			}
 		},
 		lineWidth: {
@@ -60,7 +64,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .05,
-				label: "Line Width"
+				label: "Line Width",
+				group: "Effect"
 			}
 		},
 		waveColor: {
@@ -69,7 +74,8 @@ const componentDefinition = {
 			description: "Color of the waves",
 			ui: {
 				type: "color",
-				label: "Wave Color"
+				label: "Wave Color",
+				group: "Colors"
 			}
 		},
 		pinEdges: {
@@ -77,7 +83,8 @@ const componentDefinition = {
 			description: "Pin waves at edges (fade effect)",
 			ui: {
 				type: "checkbox",
-				label: "Pin Edges"
+				label: "Pin Edges",
+				group: "Effect"
 			}
 		},
 		start: {
@@ -89,7 +96,8 @@ const componentDefinition = {
 			description: "Starting point of the waves",
 			ui: {
 				type: "position",
-				label: "Start"
+				label: "Start",
+				group: "Position"
 			}
 		},
 		end: {
@@ -101,7 +109,8 @@ const componentDefinition = {
 			description: "Ending point of the waves",
 			ui: {
 				type: "position",
-				label: "End"
+				label: "End",
+				group: "Position"
 			}
 		}
 	},
@@ -126,7 +135,7 @@ const componentDefinition = {
 			const distFromLine = relativePos.dot(perpDir);
 			const waveCoord = progress.mul(10);
 			const perpCoord = distFromLine.mul(10);
-			const edgeFade = uniforms.pinEdges.uniform.select(smoothstep(float(0), float(.1), progress).mul(smoothstep(float(1), float(.9), progress)), float(1));
+			const edgeFade = uniforms.pinEdges.uniform.select(smoothstep(float(0), float(.1), progress).mul(smoothstep(float(.9), float(1), progress).oneMinus()), float(1));
 			const horizontalFade = uniforms.pinEdges.uniform.select(cos(progress.mul(6.28)).mul(.5).add(.5).oneMinus(), float(1));
 			const verticalFade = cos(progress.mul(6.28)).mul(.5).add(.5).oneMinus();
 			const linesColor = vec4(0, 0, 0, 0).toVar();
@@ -147,7 +156,7 @@ const componentDefinition = {
 				const linePosition = random(waveCoord.mul(uniforms.frequency.uniform).add(t)).mul(horizontalFade).mul(uniforms.amplitude.uniform).add(offset);
 				const dist = abs(perpCoord.sub(linePosition));
 				const lineEdgeSoftness = float(.01);
-				const line = smoothstep(halfWidth.add(lineEdgeSoftness), halfWidth.sub(lineEdgeSoftness), dist);
+				const line = smoothstep(halfWidth.sub(lineEdgeSoftness), halfWidth.add(lineEdgeSoftness), dist).oneMinus();
 				const lineContribution = vec4(uniforms.waveColor.uniform.r, uniforms.waveColor.uniform.g, uniforms.waveColor.uniform.b, line).mul(rand);
 				linesColor.assign(max(linesColor, lineActive.select(lineContribution, vec4(0, 0, 0, 0))));
 			}

package/dist/core/{Stretch-CatYi4MC.js → Stretch-DROTOuvH.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 { clamp, convertToTexture, cos, float, mix, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Stretch",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point of the stretch effect",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		strength: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Strength"
+				label: "Strength",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		falloff: {
@@ -50,7 +53,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Falloff"
+				label: "Falloff",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -77,7 +81,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Stripes-BbNIMHDl.js → Stripes-IMsC1G-g.js}

@@ -1,10 +1,10 @@
-import { i as transformColorSpace, n as transformAngle, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
+import { i as transformColorSpace, n as transformAngle, 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-CZPFmiT4.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { cos, fract, fwidth, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Stripes",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Alternating colored stripes with animation",
 	props: {
 		colorA: {
@@ -13,7 +13,8 @@ const componentDefinition = {
 			description: "First stripe color",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 			description: "Second stripe color",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		angle: {
@@ -34,7 +36,8 @@ const componentDefinition = {
 				min: -180,
 				max: 180,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		density: {
@@ -45,7 +48,8 @@ const componentDefinition = {
 				min: 1,
 				max: 30,
 				step: 1,
-				label: "Density"
+				label: "Density",
+				group: "Effect"
 			}
 		},
 		balance: {
@@ -56,7 +60,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Balance"
+				label: "Balance",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -67,7 +72,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -78,7 +84,8 @@ const componentDefinition = {
 				min: -1,
 				max: 1,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		offset: {
@@ -89,7 +96,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Offset"
+				label: "Offset",
+				group: "Animation"
 			}
 		},
 		colorSpace: {
@@ -99,7 +107,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},

package/dist/core/{Swirl-ytfGCJTs.js → Swirl-C9xCY4TA.js}

@@ -1,10 +1,10 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
+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-CZPFmiT4.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { cos, screenUV, sin, smoothstep, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Swirl",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Flowing swirl pattern with multi-layered noise",
 	props: {
 		colorA: {
@@ -13,7 +13,8 @@ const componentDefinition = {
 			transform: transformColor,
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 			transform: transformColor,
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		speed: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		detail: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Detail"
+				label: "Detail",
+				group: "Effect"
 			}
 		},
 		blend: {
@@ -55,7 +59,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Blend"
+				label: "Blend",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -65,7 +70,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},

package/dist/core/{TiltShift-CvEKlLKc.js → TiltShift-CFhc4M-Z.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, abs, convertToTexture, cos, dot, float, mix, radians, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "TiltShift",
@@ -15,7 +15,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		width: {
@@ -26,7 +27,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Width"
+				label: "Width",
+				group: "Effect"
 			}
 		},
 		falloff: {
@@ -37,7 +39,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Falloff"
+				label: "Falloff",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -49,7 +52,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -61,7 +65,8 @@ const componentDefinition = {
 			description: "Center point of the focus line",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		}
 	},

package/dist/core/{Tint-PBKR7M-T.js → Tint-DS1FvtQc.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 { dot, max, mix, vec3, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Tint",
@@ -12,7 +12,8 @@ const componentDefinition = {
 			description: "Tint color",
 			ui: {
 				type: "color",
-				label: "Tint Color"
+				label: "Tint Color",
+				group: "Colors"
 			}
 		},
 		amount: {
@@ -23,7 +24,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Amount"
+				label: "Amount",
+				group: "Effect"
 			}
 		},
 		preserveLuminosity: {
@@ -31,7 +33,8 @@ const componentDefinition = {
 			description: "Preserve original brightness",
 			ui: {
 				type: "checkbox",
-				label: "Preserve Luminosity"
+				label: "Preserve Luminosity",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Tritone-D1rsE5HX.js → Tritone-CesYYNTz.js}

@@ -1,5 +1,5 @@
-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 { convertToTexture, dot, screenUV, smoothstep, vec3, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Tritone",
@@ -14,7 +14,8 @@ const componentDefinition = {
 			description: "First color (used for shadows/darkest areas)",
 			ui: {
 				type: "color",
-				label: "Color A (Shadows)"
+				label: "Color A (Shadows)",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -23,7 +24,8 @@ const componentDefinition = {
 			description: "Second color (used for midtones)",
 			ui: {
 				type: "color",
-				label: "Color B (Midtones)"
+				label: "Color B (Midtones)",
+				group: "Colors"
 			}
 		},
 		colorC: {
@@ -32,7 +34,8 @@ const componentDefinition = {
 			description: "Third color (used for highlights/brightest areas)",
 			ui: {
 				type: "color",
-				label: "Color C (Highlights)"
+				label: "Color C (Highlights)",
+				group: "Colors"
 			}
 		},
 		blendMid: {
@@ -43,7 +46,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Midpoint"
+				label: "Midpoint",
+				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/{Twirl-BQzDHvml.js → Twirl-8C-m04yw.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, length, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Twirl",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point of the twirl effect",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		intensity: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: -5,
 				max: 5,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -55,7 +57,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Vibrance-JFvD6I5g.js → Vibrance-Cbr-9ds2.js}

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