shaders 2.3.74 → 2.4.76

package/dist/core/Ellipse-BjbjXlOx.js

@@ -0,0 +1,174 @@
+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 ellipseSdf } from "./sdf-BDsv-WBk.js";
+import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+var transformStrokePosition = (value) => {
+	return {
+		"outside": 0,
+		"center": 1,
+		"inside": 2
+	}[value?.toLowerCase()] ?? 1;
+};
+const componentDefinition = {
+	name: "Ellipse",
+	category: "Shapes",
+	description: "Ellipse with independently adjustable horizontal and vertical radii",
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Fill color of the ellipse",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the ellipse",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		radiusX: {
+			default: .35,
+			description: "Horizontal semi-axis radius",
+			ui: {
+				type: "range",
+				min: .01,
+				max: 1,
+				step: .01,
+				label: "Width",
+				group: "Shape"
+			}
+		},
+		radiusY: {
+			default: .2,
+			description: "Vertical semi-axis radius",
+			ui: {
+				type: "range",
+				min: .01,
+				max: 1,
+				step: .01,
+				label: "Height",
+				group: "Shape"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Shape"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness for antialiasing",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .1,
+				step: .001,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		strokeThickness: {
+			default: 0,
+			description: "Stroke thickness. Zero means no stroke.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .2,
+				step: .005,
+				label: "Stroke Thickness",
+				group: "Stroke"
+			}
+		},
+		strokeColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Color of the stroke outline",
+			ui: {
+				type: "color",
+				label: "Stroke Color",
+				group: "Colors"
+			}
+		},
+		strokePosition: {
+			default: "center",
+			transform: transformStrokePosition,
+			description: "Position of the stroke relative to the shape edge",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Outside",
+						value: "outside"
+					},
+					{
+						label: "Center",
+						value: "center"
+					},
+					{
+						label: "Inside",
+						value: "inside"
+					}
+				],
+				label: "Stroke Position",
+				group: "Stroke"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for blending fill and stroke colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Blending",
+				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 sdf = ellipseSdf(dx.mul(cosR).add(dy.mul(sinR)), dy.mul(cosR).sub(dx.mul(sinR)), uniforms.radiusX.uniform, uniforms.radiusY.uniform);
+		const edgeSoftness = uniforms.softness.uniform;
+		const strokeThickness = uniforms.strokeThickness.uniform;
+		const strokePositionMode = uniforms.strokePosition.uniform;
+		const hasStroke = strokeThickness.greaterThan(float(0));
+		const isCenter = strokePositionMode.greaterThanEqual(float(.5)).and(strokePositionMode.lessThan(float(1.5)));
+		const isInside = strokePositionMode.greaterThanEqual(float(1.5));
+		const halfThickness = strokeThickness.mul(.5);
+		const strokeInner = isInside.select(strokeThickness.negate(), isCenter.select(halfThickness.negate(), float(0)));
+		const strokeOuter = isInside.select(float(0), isCenter.select(halfThickness, strokeThickness));
+		const overallMask = smoothstep(strokeOuter.sub(edgeSoftness), strokeOuter, sdf).oneMinus();
+		const strokeBlend = hasStroke.select(smoothstep(strokeInner.sub(edgeSoftness), strokeInner, sdf), float(0));
+		const blendedColor = mixColors(vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a), vec4(uniforms.strokeColor.uniform.rgb, uniforms.strokeColor.uniform.a), strokeBlend, uniforms.colorSpace.uniform.value);
+		return vec4(blendedColor.xyz, blendedColor.w.mul(overallMask));
+	}
+};
+var Ellipse_default = componentDefinition;
+export { componentDefinition as n, Ellipse_default as t };

package/dist/core/Emboss-K5TExa67.js

@@ -0,0 +1,241 @@
+import { l as transformPosition } from "./transformations-B5lM6fYX.js";
+import { a as ellipseSdf, c as ringSdf, d as trapezoidSdf, f as vesicaSdf, i as crossSdf, l as roundedRectSdf, n as createSvgSdfSampler, o as flowerSdf, r as crescentSdf, s as polygonSdf, t as circleSdf, u as starSdf } from "./sdf-BDsv-WBk.js";
+import { Fn, abs, clamp, convertToTexture, cos, float, max, mix, screenUV, sin, smoothstep, sqrt, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var _INV_LIGHT_LEN = 1 / Math.sqrt(1.49);
+var _LZN = .7 * _INV_LIGHT_LEN;
+function applyEmbossEffect(childTexture, sdfSampler, uniforms) {
+	return Fn(() => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const centerPos = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
+		const scale = uniforms.scale.uniform;
+		const sdfUV = vec2(uv$1.x.sub(centerPos.x).mul(aspect).div(scale).add(float(.5)), uv$1.y.sub(centerPos.y).div(scale).add(float(.5)));
+		const eps = float(.003);
+		const tw = float(.003);
+		const sdfC = sdfSampler(sdfUV).r;
+		const sdfR = sdfSampler(sdfUV.add(vec2(eps, float(0)))).r;
+		const sdfL = sdfSampler(sdfUV.sub(vec2(eps, float(0)))).r;
+		const sdfU = sdfSampler(sdfUV.add(vec2(float(0), eps))).r;
+		const sdfD = sdfSampler(sdfUV.sub(vec2(float(0), eps))).r;
+		const depth = uniforms.depth.uniform;
+		const hC = depth.mul(smoothstep(tw, tw.negate(), sdfC));
+		const hR = depth.mul(smoothstep(tw, tw.negate(), sdfR));
+		const hL = depth.mul(smoothstep(tw, tw.negate(), sdfL));
+		const hU = depth.mul(smoothstep(tw, tw.negate(), sdfU));
+		const hD = depth.mul(smoothstep(tw, tw.negate(), sdfD));
+		const dhx = hR.sub(hL).div(eps.mul(float(2)));
+		const dhy = hU.sub(hD).div(eps.mul(float(2)));
+		const nLen = sqrt(dhx.mul(dhx).add(dhy.mul(dhy)).add(float(1)));
+		const nx = dhx.negate().div(nLen);
+		const ny = dhy.negate().div(nLen);
+		const nz = float(1).div(nLen);
+		const lightRad = uniforms.lightAngle.uniform.mul(float(Math.PI / 180));
+		const lx = cos(lightRad);
+		const ly = sin(lightRad);
+		const lxn = lx.mul(float(_INV_LIGHT_LEN));
+		const lyn = ly.mul(float(_INV_LIGHT_LEN));
+		const lzn = float(_LZN);
+		const edgeLighting = nx.mul(lxn).add(ny.mul(lyn)).add(nz.mul(lzn)).sub(lzn).mul(uniforms.lightIntensity.uniform);
+		const highlight = max(edgeLighting, float(0));
+		const edgeShadow = max(edgeLighting.negate(), float(0));
+		const absDepth = abs(depth).max(float(1e-4));
+		const spread = absDepth.mul(float(.06));
+		const shadowTw = spread;
+		const s1UV = sdfUV.add(vec2(lx.mul(spread.mul(float(.5))), ly.mul(spread.mul(float(.5)))));
+		const s2UV = sdfUV.add(vec2(lx.mul(spread), ly.mul(spread)));
+		const h1 = depth.mul(smoothstep(shadowTw, shadowTw.negate(), sdfSampler(s1UV).r));
+		const h2 = depth.mul(smoothstep(shadowTw, shadowTw.negate(), sdfSampler(s2UV).r));
+		const diff1 = h1.sub(hC).div(absDepth);
+		const diff2 = h2.sub(hC).div(absDepth);
+		const castShadow = smoothstep(float(0), float(.5), diff1).mul(float(.55)).add(smoothstep(float(0), float(.5), diff2).mul(float(.45)));
+		const inside = smoothstep(tw, tw.negate(), sdfC);
+		const dispScale = float(1).sub(depth.mul(float(.05)).mul(inside));
+		const warpedUV = vec2(centerPos.x.add(uv$1.x.sub(centerPos.x).mul(dispScale)), centerPos.y.add(uv$1.y.sub(centerPos.y).mul(dispScale)));
+		const totalShadow = clamp(edgeShadow.add(castShadow), float(0), float(1)).mul(uniforms.shadowIntensity.uniform);
+		const childColor = childTexture.sample(warpedUV);
+		const finalRgb = clamp(vec3(childColor.r, childColor.g, childColor.b).mul(float(1).sub(totalShadow)).add(vec3(highlight, highlight, highlight)), float(0), float(1));
+		return vec4(finalRgb.x, finalRgb.y, finalRgb.z, childColor.a);
+	})();
+}
+var DEFAULT_SHAPE_CONFIG = JSON.stringify({
+	type: "circleSDF",
+	radius: .35
+});
+const componentDefinition = {
+	name: "Emboss",
+	category: "Shape Effects",
+	description: "Embossed / debossed relief shading on top of child content, driven by a custom shape",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the embossed shape",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Scale of the embossed shape (1 = default size)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .05,
+				label: "Scale",
+				group: "Position"
+			}
+		},
+		depth: {
+			default: -.5,
+			description: "Relief depth — negative = inset (debossed), positive = raised (embossed)",
+			ui: {
+				type: "range",
+				min: -1,
+				max: 1,
+				step: .01,
+				label: "Depth",
+				group: "Relief"
+			}
+		},
+		lightAngle: {
+			default: 260,
+			description: "Directional light angle in degrees — controls highlight and shadow direction",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Light Angle",
+				group: "Lighting"
+			}
+		},
+		lightIntensity: {
+			default: .6,
+			description: "Strength of the directional edge highlights and shadows",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 2,
+				step: .05,
+				label: "Light Intensity",
+				group: "Lighting"
+			}
+		},
+		shadowIntensity: {
+			default: .3,
+			description: "Darkness of the relief shadow",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Shadow Intensity",
+				group: "Relief"
+			}
+		},
+		shape: {
+			default: DEFAULT_SHAPE_CONFIG,
+			description: "Serialized shape configuration (JSON)",
+			ui: {
+				type: "shape",
+				label: "Shape",
+				group: "Shape"
+			}
+		},
+		shapeSdfUrl: {
+			default: "",
+			compileTime: true,
+			description: "URL to a pre-generated SDF .bin file — when non-empty, activates SVG mode and triggers a shader recompile"
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup, onBeforeRender }) => {
+		if (!childNode) return vec4(0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const shapeSdfUrl = uniforms.shapeSdfUrl.uniform.value;
+		const initialConfig = (() => {
+			try {
+				return JSON.parse(uniforms.shape.uniform.value);
+			} catch {
+				return {
+					type: "circleSDF",
+					radius: .35,
+					centerX: .5,
+					centerY: .5
+				};
+			}
+		})();
+		if (shapeSdfUrl) return applyEmbossEffect(childTexture, createSvgSdfSampler(shapeSdfUrl, onBeforeRender, onCleanup), uniforms);
+		else {
+			const SHAPE_MODES = {
+				circleSDF: 0,
+				polygonSDF: 1,
+				flowerSDF: 2,
+				ringSDF: 3,
+				crossSDF: 4,
+				starSDF: 5,
+				roundedRectSDF: 6,
+				ellipseSDF: 7,
+				vesicaSDF: 8,
+				crescentSDF: 9,
+				trapezoidSDF: 10
+			};
+			const radiusU = uniform(initialConfig.radius ?? .35);
+			const sidesU = uniform(initialConfig.sides ?? 6);
+			const roundingU = uniform(initialConfig.rounding ?? 0);
+			const innerRatioU = uniform(initialConfig.innerRatio ?? initialConfig.thickness ?? .4);
+			const rotationU = uniform(initialConfig.rotation ?? 0);
+			const heightU = uniform(initialConfig.height ?? .25);
+			const offsetU = uniform(initialConfig.offset ?? .2);
+			const shapeModeU = uniform(SHAPE_MODES[initialConfig.type] ?? 0);
+			onBeforeRender(() => {
+				try {
+					const cfg = JSON.parse(uniforms.shape.uniform.value);
+					radiusU.value = cfg.radius ?? cfg.width ?? cfg.bottomWidth ?? .35;
+					sidesU.value = cfg.sides ?? 6;
+					roundingU.value = cfg.rounding ?? 0;
+					innerRatioU.value = cfg.innerRatio ?? cfg.thickness ?? cfg.spread ?? cfg.topWidth ?? cfg.topRatio ?? .4;
+					rotationU.value = cfg.rotation ?? 0;
+					heightU.value = cfg.height ?? .25;
+					offsetU.value = cfg.offset ?? .2;
+					shapeModeU.value = SHAPE_MODES[cfg.type] ?? 0;
+				} catch {}
+			});
+			const sdfSampler = (uv$1) => {
+				const dx = uv$1.x.sub(float(.5));
+				const dy = uv$1.y.sub(float(.5));
+				const rotRad = rotationU.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 circle = circleSdf(dx, dy, radiusU);
+				const polygon = mix(polygonSdf(rdx, rdy, radiusU, sidesU), circle, roundingU);
+				const flower = flowerSdf(rdx, rdy, radiusU, sidesU, innerRatioU);
+				const ring = ringSdf(dx, dy, radiusU, innerRatioU);
+				const cross = crossSdf(rdx, rdy, radiusU, innerRatioU, roundingU);
+				const star = starSdf(rdx, rdy, radiusU, sidesU, innerRatioU);
+				const roundedRect = roundedRectSdf(rdx, rdy, radiusU, heightU, roundingU);
+				const ellipse = ellipseSdf(rdx, rdy, radiusU, heightU);
+				const vesica = vesicaSdf(rdx, rdy, radiusU, innerRatioU);
+				const crescent = crescentSdf(rdx, rdy, radiusU, innerRatioU, offsetU);
+				const trapezoid = trapezoidSdf(rdx, rdy, innerRatioU, radiusU, heightU);
+				const m = shapeModeU;
+				return vec4(m.lessThan(float(.5)).select(circle, m.lessThan(float(1.5)).select(polygon, m.lessThan(float(2.5)).select(flower, m.lessThan(float(3.5)).select(ring, m.lessThan(float(4.5)).select(cross, m.lessThan(float(5.5)).select(star, m.lessThan(float(6.5)).select(roundedRect, m.lessThan(float(7.5)).select(ellipse, m.lessThan(float(8.5)).select(vesica, m.lessThan(float(9.5)).select(crescent, trapezoid)))))))))), float(0), float(0), float(1));
+			};
+			return applyEmbossEffect(childTexture, sdfSampler, uniforms);
+		}
+	}
+};
+var Emboss_default = componentDefinition;
+export { componentDefinition as n, Emboss_default as t };

package/dist/core/FallingLines-DBNJVWio.js

@@ -0,0 +1,186 @@
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
+import { Fn, abs, cos, float, floor, fract, fwidth, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+var colHash = Fn(([idx]) => {
+	return vec2(fract(sin(idx.mul(127.1)).mul(43758.5453123)), fract(sin(idx.mul(311.7)).mul(38291.3421)));
+});
+const componentDefinition = {
+	name: "FallingLines",
+	category: "Textures",
+	description: "Directional falling lines with a leading-to-trailing color fade",
+	requiresRTT: false,
+	props: {
+		colorA: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Color at the leading edge of each line",
+			ui: {
+				type: "color",
+				label: "Lead Color",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#ffffff00",
+			transform: transformColor,
+			description: "Color at the trailing edge (transparent by default)",
+			ui: {
+				type: "color",
+				label: "Trail Color",
+				group: "Colors"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for interpolation between lead and trail colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		},
+		angle: {
+			default: 90,
+			description: "Direction of movement in degrees (90=down, 270=up, 0=right, 180=left)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: .5,
+			description: "Movement speed",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .05,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		speedVariance: {
+			default: .3,
+			description: "Per-line speed variance (0=uniform, 1=high variance)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Speed Variance",
+				group: "Animation"
+			}
+		},
+		density: {
+			default: 15,
+			description: "Number of line columns across the canvas",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 60,
+				step: 1,
+				label: "Density",
+				group: "Effect"
+			}
+		},
+		trailLength: {
+			default: .35,
+			description: "Streak length relative to spacing (0=point, 1=continuous)",
+			ui: {
+				type: ["range", "map"],
+				min: .01,
+				max: 1,
+				step: .01,
+				label: "Trail Length",
+				group: "Effect"
+			}
+		},
+		balance: {
+			default: .5,
+			description: "Color mix midpoint (0.5=linear, 0=all trailing/colorB, 1=all leading/colorA)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Balance",
+				group: "Colors"
+			}
+		},
+		strokeWidth: {
+			default: .15,
+			description: "Line thickness as fraction of column width (0=hairline, 1=full width)",
+			ui: {
+				type: ["range", "map"],
+				min: .02,
+				max: 1,
+				step: .02,
+				label: "Stroke Width",
+				group: "Effect"
+			}
+		},
+		rounding: {
+			default: 1,
+			description: "Rounds the leading edge (0=flat/square, 1=fully rounded cap)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Rounding",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms } = params;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const corrUV = vec2(screenUV.x.mul(aspect), screenUV.y);
+		const canvasCenter = vec2(aspect.mul(.5), float(.5));
+		const centeredUV = corrUV.sub(canvasCenter);
+		const angleRad = uniforms.angle.uniform.mul(Math.PI / 180);
+		const cosA = cos(angleRad);
+		const sinA = sin(angleRad);
+		const u = centeredUV.x.mul(sinA).negate().add(centeredUV.y.mul(cosA));
+		const v = centeredUV.x.mul(cosA).add(centeredUV.y.mul(sinA));
+		const density = uniforms.density.uniform;
+		const colF = u.mul(density);
+		const colIdx = floor(colF);
+		const colLocalU = fract(colF);
+		const h = colHash(colIdx);
+		const speedMod = float(1).add(h.x.sub(.5).mul(uniforms.speedVariance.uniform).mul(2));
+		const phase = h.y;
+		const animOffset = fract(createAnimatedTime(params, uniforms.speed).mul(speedMod));
+		const vPeriodic = fract(v.sub(animOffset).sub(phase));
+		const trailLen = uniforms.trailLength.uniform;
+		const withinStreak = vPeriodic.div(trailLen).clamp(0, 1);
+		const fwV = fwidth(v).clamp(.001, .1);
+		const fwU = fwidth(u).mul(density).clamp(.001, .1);
+		const streakMask = smoothstep(trailLen.sub(fwV), trailLen.add(fwV), vPeriodic).oneMinus();
+		const hw = uniforms.strokeWidth.uniform.mul(.5);
+		const distFromCenter = abs(colLocalU.sub(.5));
+		const widthMask = smoothstep(hw.sub(fwU), hw.add(fwU), distFromCenter).oneMinus();
+		const rectMask = streakMask.mul(widthMask);
+		const maxDepth = hw.mul(uniforms.rounding.uniform);
+		const t = vPeriodic.sub(trailLen).max(float(0)).mul(density).div(maxDepth.max(float(1e-4))).clamp(float(0), float(1));
+		const capHW = hw.mul(float(1).sub(t.mul(t)).max(float(0)).sqrt());
+		const capAlpha = smoothstep(capHW.sub(fwU).max(float(0)), capHW.add(fwU).max(float(.001)), distFromCenter).oneMinus().mul(smoothstep(float(0), fwU, capHW));
+		const finalMask = rectMask.max(capAlpha);
+		const balanceNum = float(2).mul(uniforms.balance.uniform).sub(float(1));
+		const balanceDen = float(2).mul(float(1).sub(uniforms.balance.uniform)).max(.001);
+		const balancedT = withinStreak.add(balanceNum).div(balanceDen).clamp(0, 1);
+		const mixedColor = mixColors(uniforms.colorB.uniform, uniforms.colorA.uniform, balancedT, uniforms.colorSpace.uniform.value);
+		const finalAlpha = finalMask.mul(mixedColor.a);
+		return vec4(mixedColor.rgb, finalAlpha);
+	}
+};
+var FallingLines_default = componentDefinition;
+export { componentDefinition as n, FallingLines_default as t };

package/dist/core/{FloatingParticles-D6fgcEbH.js → FloatingParticles-CoBM_CJ8.js}

@@ -1,5 +1,5 @@
 import { a as transformColor } from "./transformations-B5lM6fYX.js";
-import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
+import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
 import { Fn, cos, dot, float, floor, fract, length, min, mix, screenUV, sin, smoothstep, time, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var hash1_2 = Fn(([p]) => {
 	return fract(sin(dot(p, vec2(127.1, 311.7))).mul(43758.5453123));

package/dist/core/{FlowField-C2KW9_D1.js → FlowField-Bh3-dX6I.js}

@@ -1,7 +1,7 @@
 import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
 import { c as transformEdges } from "./transformations-B5lM6fYX.js";
-import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
-import { t as unpremultiplyAlpha } from "./alpha-Byel9eTg.js";
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
 import { convertToTexture, cos, float, length, max, mx_noise_float, screenUV, sin, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "FlowField",
@@ -35,17 +35,29 @@ const componentDefinition = {
 			}
 		},
 		speed: {
-			default: 1,
+			default: 0,
 			description: "Speed of the flow",
 			ui: {
 				type: "range",
 				min: 0,
-				max: 5,
+				max: 20,
 				step: .1,
 				label: "Speed",
 				group: "Animation"
 			}
 		},
+		evolutionSpeed: {
+			default: 0,
+			description: "How fast the flow field pattern reshapes over time",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .1,
+				label: "Evolution Speed",
+				group: "Animation"
+			}
+		},
 		edges: {
 			default: "mirror",
 			description: "How to handle edges when distortion pushes content out of bounds",
@@ -84,18 +96,22 @@ const componentDefinition = {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
 		const time$1 = createAnimatedTime(params, uniforms.speed).mul(.1);
+		const evolutionTime = createAnimatedTime(params, uniforms.evolutionSpeed).mul(.1);
 		const aspect = viewportSize.x.div(viewportSize.y);
 		const aspectCorrectedUV = vec2(screenUV.x.mul(aspect), screenUV.y);
 		const scale = uniforms.detail.uniform;
 		const strength = uniforms.strength.uniform;
 		const drift1 = time$1.mul(.7);
-		const angle1 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale).add(drift1.mul(.3)), aspectCorrectedUV.y.mul(scale).add(drift1.mul(.5)), drift1.mul(.2))).mul(Math.PI * 2);
+		const evolve1 = evolutionTime.mul(.2);
+		const angle1 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale).add(drift1.mul(.3)), aspectCorrectedUV.y.mul(scale).add(drift1.mul(.5)), evolve1)).mul(Math.PI * 2);
 		const flow1 = vec2(cos(angle1), sin(angle1));
 		const drift2 = time$1.mul(.5);
-		const angle2 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale.mul(2.3)).add(drift2.mul(-.4)).add(173.5), aspectCorrectedUV.y.mul(scale.mul(2.3)).add(drift2.mul(.3)).add(291.7), drift2.mul(.15).add(50))).mul(Math.PI * 2);
+		const evolve2 = evolutionTime.mul(.15);
+		const angle2 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale.mul(2.3)).add(drift2.mul(-.4)).add(173.5), aspectCorrectedUV.y.mul(scale.mul(2.3)).add(drift2.mul(.3)).add(291.7), evolve2.add(50))).mul(Math.PI * 2);
 		const flow2 = vec2(cos(angle2), sin(angle2));
 		const drift3 = time$1.mul(.3);
-		const angle3 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale.mul(4.7)).add(drift3.mul(.2)).add(527.3), aspectCorrectedUV.y.mul(scale.mul(4.7)).add(drift3.mul(-.6)).add(839.1), drift3.mul(.1).add(100))).mul(Math.PI * 2);
+		const evolve3 = evolutionTime.mul(.1);
+		const angle3 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale.mul(4.7)).add(drift3.mul(.2)).add(527.3), aspectCorrectedUV.y.mul(scale.mul(4.7)).add(drift3.mul(-.6)).add(839.1), evolve3.add(100))).mul(Math.PI * 2);
 		const flow3 = vec2(cos(angle3), sin(angle3));
 		const combinedFlow = flow1.add(flow2.mul(.5)).add(flow3.mul(.25));
 		const flowLength = max(length(combinedFlow), float(.001));