shaders 2.5.87 → 2.5.89

package/dist/core/ConicGradient-BXXizzIs.js

@@ -0,0 +1,92 @@
+import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { atan, float, fract, screenUV, vec2, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "ConicGradient",
+	category: "Textures",
+	description: "Colors sweep in a full circle around a center point, like a color wheel",
+	props: {
+		colorA: {
+			default: "#FF0080",
+			transform: transformColor,
+			description: "Starting color of the sweep",
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#00BFFF",
+			transform: transformColor,
+			description: "Ending color of the sweep (wraps back to Color A)",
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center point of the sweep",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation offset in degrees — shifts where Color A begins",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Effect"
+			}
+		},
+		repeat: {
+			default: 1,
+			description: "Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern.",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 24,
+				step: 1,
+				label: "Repeat",
+				group: "Effect"
+			}
+		},
+		colorSpace: {
+			default: "oklch",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const dx = aspectUV.x.sub(centerPos.x);
+		const normalized = atan(aspectUV.y.sub(centerPos.y), dx).negate().div(float(2 * Math.PI)).add(float(.5));
+		const rotationFraction = uniforms.rotation.uniform.div(float(360));
+		const t = fract(normalized.add(rotationFraction).mul(uniforms.repeat.uniform));
+		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, t, uniforms.colorSpace.uniform.value);
+	}
+};
+var ConicGradient_default = componentDefinition;
+export { componentDefinition as n, ConicGradient_default as t };

package/dist/core/{Crescent-DnFexzlT.js → Crescent-DPxGWdPH.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { i as crescentSdf } from "./sdf-CZRX0uur.js";
+import { i as crescentSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Cross-rsVMygBv.js → Cross-CDyzf8TT.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { a as crossSdf } from "./sdf-CZRX0uur.js";
+import { a as crossSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Crystal-z-2qqfhQ.js → Crystal-DSuN8TNY.js}

@@ -1,5 +1,5 @@
 import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-CZRX0uur.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-Bux00UoZ.js";
 import { Fn, atan, clamp, convertToTexture, cos, dot, float, fract, max, min, mix, mx_worley_noise_float, pow, screenUV, sin, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var transformBoolean = (value) => value ? 1 : 0;
 var DEFAULT_SHAPE_CONFIG = JSON.stringify({

package/dist/core/DiamondGradient-TsOxHjg_.js

@@ -0,0 +1,123 @@
+import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { abs, cos, float, fract, max, mix, screenUV, sin, vec2, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "DiamondGradient",
+	category: "Textures",
+	description: "Diamond-shaped gradient radiating from a center point using Manhattan distance",
+	props: {
+		colorA: {
+			default: "#4ffb4a",
+			transform: transformColor,
+			description: "Color at the center of the diamond",
+			ui: {
+				type: "color",
+				label: "Color A (Center)",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#4f1238",
+			transform: transformColor,
+			description: "Color at the outer edges of the diamond",
+			ui: {
+				type: "color",
+				label: "Color B (Edge)",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center point of the diamond",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		size: {
+			default: .7,
+			description: "Extent of the gradient — controls how far Color A reaches before transitioning to Color B",
+			ui: {
+				type: ["range", "map"],
+				min: .01,
+				max: 2,
+				step: .01,
+				label: "Size",
+				group: "Effect"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation in degrees — tilts the diamond into a rhombus",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Effect"
+			}
+		},
+		repeat: {
+			default: 1,
+			description: "Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands.",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 16,
+				step: .5,
+				label: "Repeat",
+				group: "Effect"
+			}
+		},
+		roundness: {
+			default: 0,
+			description: "Morphs from a sharp diamond (0) to a square (1)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Roundness",
+				group: "Effect"
+			}
+		},
+		colorSpace: {
+			default: "oklch",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const dx = aspectUV.x.sub(centerPos.x);
+		const dy = aspectUV.y.sub(centerPos.y);
+		const rotRad = uniforms.rotation.uniform.mul(float(Math.PI / 180));
+		const cosR = cos(rotRad);
+		const sinR = sin(rotRad);
+		const rdx = dx.mul(cosR).add(dy.mul(sinR));
+		const rdy = dy.mul(cosR).sub(dx.mul(sinR));
+		const absDx = abs(rdx);
+		const absDy = abs(rdy);
+		const t = mix(absDx.add(absDy), max(absDx, absDy), uniforms.roundness.uniform).div(uniforms.size.uniform).mul(uniforms.repeat.uniform);
+		const finalT = uniforms.repeat.uniform.greaterThan(float(1.0001)).select(fract(t), t.clamp(float(0), float(1)));
+		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, finalT, uniforms.colorSpace.uniform.value);
+	}
+};
+var DiamondGradient_default = componentDefinition;
+export { componentDefinition as n, DiamondGradient_default as t };

package/dist/core/DropShadow-_VJqd8du.js

@@ -0,0 +1,131 @@
+import { a as transformColor } from "./transformations-B5lM6fYX.js";
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { Fn, convertToTexture, cos, float, max, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
+var weights = [
+	.056,
+	.135,
+	.278,
+	.487,
+	.726,
+	.923,
+	1,
+	.923,
+	.726,
+	.487,
+	.278,
+	.135,
+	.056
+];
+var weightSum = 6.214;
+const componentDefinition = {
+	name: "DropShadow",
+	category: "Stylize",
+	description: "Adds a soft shadow behind the child content based on its alpha silhouette",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		color: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Shadow color",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		distance: {
+			default: .1,
+			description: "How far the shadow is offset from the content",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .005,
+				label: "Distance",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 135,
+			description: "Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect"
+			}
+		},
+		blur: {
+			default: 5,
+			description: "Shadow softness (blur radius in pixels)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 20,
+				step: .5,
+				label: "Blur",
+				group: "Effect"
+			}
+		},
+		intensity: {
+			default: .5,
+			description: "Shadow intensity — how strong/visible the shadow is",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Intensity",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const originalColor = childTexture.sample(screenUV);
+		const angleRad = uniforms.angle.uniform.mul(float(Math.PI / 180));
+		const dist = uniforms.distance.uniform.mul(float(.2));
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const offsetUV = vec2(sin(angleRad).mul(dist).div(aspect), cos(angleRad).negate().mul(dist));
+		const shadowUV = screenUV.sub(offsetUV);
+		const horizontalTexture = convertToTexture(Fn(() => {
+			const blurRadius = uniforms.blur.uniform;
+			const pixelSize = vec2(float(1)).div(viewportSize);
+			const total = float(0).toVar();
+			for (let x = -6; x <= 6; x++) {
+				const weight = float(weights[x + 6] / weightSum);
+				const offset = vec2(float(x), float(0)).mul(blurRadius).mul(pixelSize);
+				total.assign(total.add(childTexture.sample(shadowUV.add(offset)).a.mul(weight)));
+			}
+			return vec4(total, float(0), float(0), float(1));
+		})());
+		onCleanup(() => {
+			if (horizontalTexture?.renderTarget?.dispose) horizontalTexture.renderTarget.dispose();
+		});
+		const shadowAlpha = Fn(() => {
+			const blurRadius = uniforms.blur.uniform;
+			const pixelSize = vec2(float(1)).div(viewportSize);
+			const total = float(0).toVar();
+			for (let y = -6; y <= 6; y++) {
+				const weight = float(weights[y + 6] / weightSum);
+				const offset = vec2(float(0), float(y)).mul(blurRadius).mul(pixelSize);
+				total.assign(total.add(horizontalTexture.sample(screenUV.add(offset)).r.mul(weight)));
+			}
+			return total;
+		})().mul(uniforms.intensity.uniform);
+		const shadowColor = uniforms.color.uniform;
+		const shadowPremulRGB = shadowColor.rgb.mul(shadowColor.a).mul(shadowAlpha);
+		const shadowA = shadowColor.a.mul(shadowAlpha);
+		const oneMinusOrigA = float(1).sub(originalColor.a);
+		return unpremultiplyAlpha(vec4(originalColor.rgb.add(shadowPremulRGB.mul(oneMinusOrigA)), max(originalColor.a.add(shadowA.mul(oneMinusOrigA)), originalColor.a)));
+	}
+};
+var DropShadow_default = componentDefinition;
+export { componentDefinition as n, DropShadow_default as t };

package/dist/core/{Ellipse-CJFK20Xl.js → Ellipse-BvlGDQyZ.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { o as ellipseSdf } from "./sdf-CZRX0uur.js";
+import { o as ellipseSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Emboss-DWXpvlZO.js → Emboss-CF-BN_CQ.js}

@@ -1,5 +1,5 @@
 import { l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-CZRX0uur.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-Bux00UoZ.js";
 import { Fn, abs, clamp, convertToTexture, cos, float, max, screenUV, sin, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var _INV_LIGHT_LEN = 1 / Math.sqrt(1.49);
 var _LZN = .7 * _INV_LIGHT_LEN;

package/dist/core/{Flower-BST3LQVi.js → Flower-ByQNUJyZ.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { s as flowerSdf } from "./sdf-CZRX0uur.js";
+import { s as flowerSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Glass-BDHs6Enu.js → Glass-BGy9jsiS.js}

@@ -1,5 +1,5 @@
 import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-CZRX0uur.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-Bux00UoZ.js";
 import { Fn, clamp, convertToTexture, cos, dot, exp2, float, max, mix, pow, screenUV, sin, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var GOLDEN_ANGLE = 2.3999632297286535;
 var BLUR_SAMPLE_COUNT = 9;

package/dist/core/{Grid-CV2iJqlk.js → Grid-Dweeo8b2.js}

@@ -1,9 +1,9 @@
 import { a as transformColor } from "./transformations-B5lM6fYX.js";
-import { floor, fract, fwidth, max, screenUV, smoothstep, step, vec2, vec4, viewportSize } from "three/tsl";
+import { cos, float, floor, fract, fwidth, max, screenUV, sin, smoothstep, step, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Grid",
 	category: "Textures",
-	description: "Simple grid lines pattern with adjustable thickness",
+	description: "Simple grid lines pattern with adjustable thickness and rotation",
 	props: {
 		color: {
 			default: "#ffffff",
@@ -38,23 +38,49 @@ const componentDefinition = {
 				label: "Thickness",
 				group: "Effect"
 			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation of the grid in degrees. At 45° this produces a crosshatch/diamond pattern.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Effect"
+			}
 		}
 	},
 	mapSampleUVs: (uniforms) => {
 		const aspect = viewportSize.x.div(viewportSize.y);
-		const cellCenterCorrected = floor(vec2(screenUV.x.mul(aspect), screenUV.y.oneMinus()).mul(uniforms.cells.uniform)).add(.5).div(uniforms.cells.uniform);
-		const cellCenterScreen = vec2(cellCenterCorrected.x.div(aspect), cellCenterCorrected.y.oneMinus());
+		const correctedUV = vec2(screenUV.x.mul(aspect), screenUV.y.oneMinus());
+		const rotRad = uniforms.rotation.uniform.mul(float(Math.PI / 180));
+		const cosR = cos(rotRad);
+		const sinR = sin(rotRad);
+		const center = vec2(aspect.mul(float(.5)), float(.5));
+		const centered = correctedUV.sub(center);
+		const cellCentered = floor(vec2(centered.x.mul(cosR).sub(centered.y.mul(sinR)), centered.x.mul(sinR).add(centered.y.mul(cosR))).add(center).mul(uniforms.cells.uniform)).add(.5).div(uniforms.cells.uniform).sub(center);
+		const unrotated = vec2(cellCentered.x.mul(cosR).add(cellCentered.y.mul(sinR)), cellCentered.x.mul(sinR).negate().add(cellCentered.y.mul(cosR))).add(center);
+		const cellCenterScreen = vec2(unrotated.x.div(aspect), unrotated.y.oneMinus());
 		return {
 			thickness: cellCenterScreen,
-			cells: cellCenterScreen
+			cells: cellCenterScreen,
+			rotation: cellCenterScreen
 		};
 	},
 	fragmentNode: ({ uniforms }) => {
 		const uv$1 = screenUV;
 		const aspect = viewportSize.x.div(viewportSize.y);
 		const correctedUV = vec2(uv$1.x.mul(aspect), uv$1.y.oneMinus());
+		const rotRad = uniforms.rotation.uniform.mul(float(Math.PI / 180));
+		const cosR = cos(rotRad);
+		const sinR = sin(rotRad);
+		const center = vec2(aspect.mul(float(.5)), float(.5));
+		const centered = correctedUV.sub(center);
+		const rotated = vec2(centered.x.mul(cosR).sub(centered.y.mul(sinR)), centered.x.mul(sinR).add(centered.y.mul(cosR))).add(center);
 		const cells = uniforms.cells.uniform;
-		const gridUV = correctedUV.mul(cells);
+		const gridUV = rotated.mul(cells);
 		const gridFract = fract(gridUV);
 		const lineWidth = uniforms.thickness.uniform.mul(.01);
 		const distToLineX = gridFract.x.min(gridFract.x.oneMinus());

package/dist/core/HexGrid-KxwCqF1D.js

@@ -0,0 +1,85 @@
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { abs, dot, float, fwidth, max, mod, screenUV, smoothstep, step, vec2, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "HexGrid",
+	category: "Textures",
+	description: "Honeycomb hexagonal grid pattern",
+	props: {
+		colorA: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Cell fill color",
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Grid line color",
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		cells: {
+			default: 8,
+			description: "Number of hexagons across the shortest canvas edge",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 40,
+				step: 1,
+				label: "Cells",
+				group: "Effect"
+			}
+		},
+		thickness: {
+			default: 1,
+			description: "Thickness of the hex grid lines",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 10,
+				step: .1,
+				label: "Thickness",
+				group: "Effect"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const scaledUV = vec2(uv$1.x.mul(aspect), uv$1.y).mul(uniforms.cells.uniform);
+		const s = vec2(float(Math.sqrt(3)), float(1));
+		const sh = s.mul(float(.5));
+		const a = mod(scaledUV, s).sub(sh);
+		const b = mod(scaledUV.sub(sh), s).sub(sh);
+		const gv = dot(a, a).lessThan(dot(b, b)).select(a, b);
+		const pAbs = vec2(abs(gv.x), abs(gv.y));
+		const hexDist = max(dot(pAbs, vec2(float(Math.sqrt(3) / 2), float(.5))), pAbs.y);
+		const edgeDist = float(.5).sub(hexDist);
+		const lineWidth = uniforms.thickness.uniform.mul(float(.01));
+		const pixel = fwidth(scaledUV.x).mul(float(.5));
+		const lineMask = smoothstep(lineWidth.add(pixel), lineWidth, edgeDist).mul(step(float(1e-4), lineWidth));
+		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, lineMask, uniforms.colorSpace.uniform.value);
+	}
+};
+var HexGrid_default = componentDefinition;
+export { componentDefinition as n, HexGrid_default as t };