shaders 2.5.102 → 2.5.103

package/dist/core/Halftone-XFa7by1s.js

@@ -0,0 +1,287 @@
+import { a as transformColor, r as transformAngle } from "./transformations-B5lM6fYX.js";
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { convertToTexture, cos, dot, float, fract, length, max, mix, radians, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var transformStyle = (value) => {
+	return value === "cmyk" ? 1 : 0;
+};
+const componentDefinition = {
+	name: "Halftone",
+	category: "Stylize",
+	description: "Halftone dot pattern effect for printing aesthetics",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		style: {
+			default: "classic",
+			transform: transformStyle,
+			compileTime: true,
+			description: "Halftone rendering style",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Simple",
+					value: "classic"
+				}, {
+					label: "CMYK Print",
+					value: "cmyk"
+				}],
+				label: "Style",
+				group: "Effect"
+			}
+		},
+		frequency: {
+			default: 100,
+			description: "Frequency of the halftone dots",
+			ui: {
+				type: ["range", "map"],
+				min: 10,
+				max: 300,
+				step: 1,
+				label: "Frequency",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 45,
+			transform: transformAngle,
+			description: "Rotation angle of the pattern (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect",
+				condition: { style: "classic" }
+			}
+		},
+		cyanAngle: {
+			default: 15,
+			transform: transformAngle,
+			description: "Screen angle for the cyan plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Cyan Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		magentaAngle: {
+			default: 75,
+			transform: transformAngle,
+			description: "Screen angle for the magenta plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Magenta Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		yellowAngle: {
+			default: 0,
+			transform: transformAngle,
+			description: "Screen angle for the yellow plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Yellow Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		blackAngle: {
+			default: 45,
+			transform: transformAngle,
+			description: "Screen angle for the black plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Black Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		misprint: {
+			default: 0,
+			description: "Simulated mis-registration between plates. Plates are offset around the misprint angle, producing colour fringing at the edges of inked regions.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: .01,
+				step: 5e-4,
+				label: "Misprint",
+				group: "Effect",
+				condition: { style: "cmyk" }
+			}
+		},
+		misprintAngle: {
+			default: 0,
+			transform: transformAngle,
+			description: "Direction the plates drift apart. Rotating this rotates the colour-fringing pattern.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Misprint Angle",
+				group: "Effect",
+				condition: { style: "cmyk" }
+			}
+		},
+		paperColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Paper/substrate color shown where no ink lands",
+			ui: {
+				type: "color",
+				label: "Paper",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		cyanColor: {
+			default: "#00ffff",
+			transform: transformColor,
+			description: "Cyan ink color",
+			ui: {
+				type: "color",
+				label: "Cyan",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		magentaColor: {
+			default: "#ff00ff",
+			transform: transformColor,
+			description: "Magenta ink color",
+			ui: {
+				type: "color",
+				label: "Magenta",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		yellowColor: {
+			default: "#ffff00",
+			transform: transformColor,
+			description: "Yellow ink color",
+			ui: {
+				type: "color",
+				label: "Yellow",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		blackColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Black (key) ink color",
+			ui: {
+				type: "color",
+				label: "Black",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0);
+		const frequency = uniforms.frequency.uniform;
+		const smoothness = float(.1);
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(screenUV.x.mul(aspect), screenUV.y);
+		const rotateUV = (uv$1, angleRad) => {
+			const c$1 = cos(angleRad);
+			const s = sin(angleRad);
+			return vec2(dot(uv$1, vec2(c$1, s.negate())), dot(uv$1, vec2(s, c$1)));
+		};
+		const dotMask = (rotatedUV, intensity) => {
+			const dist = length(fract(rotatedUV.mul(frequency)).sub(.5));
+			const size = intensity.mul(.75).sub(smoothness);
+			return smoothstep(size.sub(smoothness), size.add(smoothness), dist).oneMinus();
+		};
+		if (uniforms.style.uniform.value === 0) {
+			const gridUV = fract(rotateUV(aspectUV, radians(uniforms.angle.uniform)).mul(frequency)).sub(.5);
+			const dotSize = dot(childNode.rgb, vec3(.299, .587, .114)).mul(.7).add(.15);
+			const dist = length(gridUV);
+			const dotPattern = smoothstep(dotSize.sub(smoothness), dotSize.add(smoothness), dist).oneMinus();
+			return vec4(childNode.rgb.mul(dotPattern), childNode.a.mul(dotPattern));
+		}
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const misprint = uniforms.misprint.uniform;
+		const misprintAngleRad = radians(uniforms.misprintAngle.uniform);
+		const cAngleRad = radians(uniforms.cyanAngle.uniform);
+		const mAngleRad = radians(uniforms.magentaAngle.uniform);
+		const yAngleRad = radians(uniforms.yellowAngle.uniform);
+		const kAngleRad = radians(uniforms.blackAngle.uniform);
+		const plateOffset = (offsetAngleRad) => {
+			return vec2(cos(offsetAngleRad).mul(misprint), sin(offsetAngleRad).mul(misprint).div(aspect));
+		};
+		const cSampleUV = screenUV.add(plateOffset(misprintAngleRad));
+		const mSampleUV = screenUV.add(plateOffset(misprintAngleRad.add(radians(float(90)))));
+		const ySampleUV = screenUV.add(plateOffset(misprintAngleRad.add(radians(float(180)))));
+		const kSampleUV = screenUV.add(plateOffset(misprintAngleRad.add(radians(float(270)))));
+		const cSample = unpremultiplyAlpha(childTexture.sample(cSampleUV));
+		const mSample = unpremultiplyAlpha(childTexture.sample(mSampleUV));
+		const ySample = unpremultiplyAlpha(childTexture.sample(ySampleUV));
+		const kSample = unpremultiplyAlpha(childTexture.sample(kSampleUV));
+		const centerSample = unpremultiplyAlpha(childTexture.sample(screenUV));
+		const channelK = (s) => float(1).sub(max(max(s.r, s.g), s.b));
+		const channelC = (s) => {
+			const k$1 = channelK(s);
+			const invK = float(1).sub(k$1).max(float(1e-4));
+			return float(1).sub(s.r).sub(k$1).div(invK);
+		};
+		const channelM = (s) => {
+			const k$1 = channelK(s);
+			const invK = float(1).sub(k$1).max(float(1e-4));
+			return float(1).sub(s.g).sub(k$1).div(invK);
+		};
+		const channelY = (s) => {
+			const k$1 = channelK(s);
+			const invK = float(1).sub(k$1).max(float(1e-4));
+			return float(1).sub(s.b).sub(k$1).div(invK);
+		};
+		const c = channelC(cSample);
+		const m = channelM(mSample);
+		const y = channelY(ySample);
+		const k = channelK(kSample);
+		const cUV = rotateUV(aspectUV, cAngleRad);
+		const mUV = rotateUV(aspectUV, mAngleRad);
+		const yUV = rotateUV(aspectUV, yAngleRad);
+		const kUV = rotateUV(aspectUV, kAngleRad);
+		const cInk = dotMask(cUV, c);
+		const mInk = dotMask(mUV, m);
+		const yInk = dotMask(yUV, y);
+		const kInk = dotMask(kUV, k);
+		const paper = uniforms.paperColor.uniform;
+		const cyanCol = uniforms.cyanColor.uniform;
+		const magentaCol = uniforms.magentaColor.uniform;
+		const yellowCol = uniforms.yellowColor.uniform;
+		const blackCol = uniforms.blackColor.uniform;
+		const transmission = (inkColor, inkMask) => {
+			return mix(vec3(1, 1, 1), inkColor.rgb, inkMask.mul(inkColor.a));
+		};
+		let printed = paper.rgb;
+		printed = printed.mul(transmission(cyanCol, cInk));
+		printed = printed.mul(transmission(magentaCol, mInk));
+		printed = printed.mul(transmission(yellowCol, yInk));
+		printed = printed.mul(transmission(blackCol, kInk));
+		return vec4(printed, centerSample.a);
+	}
+};
+var Halftone_default = componentDefinition;
+export { componentDefinition as n, Halftone_default as t };

package/dist/core/index.js

@@ -52,7 +52,7 @@ import "./Grayscale-lYKBBkGY.js";
 import "./Grid-BJ-nxN3i.js";
 import "./GridDistortion-DtaRNrTZ.js";
 import "./Group-DpozigtX.js";
-import "./Halftone-BVL2oy37.js";
+import "./Halftone-XFa7by1s.js";
 import "./HexGrid-D-EmQ4kI.js";
 import "./HueShift-D9K0ynaS.js";
 import "./ImageTexture-CArkZMfh.js";
@@ -110,7 +110,7 @@ import "./WaveDistortion--Y-m667K.js";
 import "./Weave-CtyohvHz.js";
 import "./WebcamTexture-XBDo2kgN.js";
 import "./ZoomBlur-BwkhsFRE.js";
-import { t as getAllShaders } from "./shaderRegistry-B6D8HKv7.js";
+import { t as getAllShaders } from "./shaderRegistry-BWuH2me2.js";
 import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
 import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";

package/dist/core/registry.js

@@ -52,7 +52,7 @@ import "./Grayscale-lYKBBkGY.js";
 import "./Grid-BJ-nxN3i.js";
 import "./GridDistortion-DtaRNrTZ.js";
 import "./Group-DpozigtX.js";
-import "./Halftone-BVL2oy37.js";
+import "./Halftone-XFa7by1s.js";
 import "./HexGrid-D-EmQ4kI.js";
 import "./HueShift-D9K0ynaS.js";
 import "./ImageTexture-CArkZMfh.js";
@@ -110,5 +110,5 @@ import "./WaveDistortion--Y-m667K.js";
 import "./Weave-CtyohvHz.js";
 import "./WebcamTexture-XBDo2kgN.js";
 import "./ZoomBlur-BwkhsFRE.js";
-import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-B6D8HKv7.js";
+import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-BWuH2me2.js";
 export { getAllShaders, getShaderByName, getShaderCategories, getShadersByCategory, shaderRegistry };

package/dist/core/{shaderRegistry-B6D8HKv7.js → shaderRegistry-BWuH2me2.js}

@@ -45,7 +45,7 @@ import { n as componentDefinition$43 } from "./Grayscale-lYKBBkGY.js";
 import { n as componentDefinition$44 } from "./Grid-BJ-nxN3i.js";
 import { n as componentDefinition$45 } from "./GridDistortion-DtaRNrTZ.js";
 import { n as componentDefinition$46 } from "./Group-DpozigtX.js";
-import { n as componentDefinition$47 } from "./Halftone-BVL2oy37.js";
+import { n as componentDefinition$47 } from "./Halftone-XFa7by1s.js";
 import { n as componentDefinition$48 } from "./HexGrid-D-EmQ4kI.js";
 import { n as componentDefinition$49 } from "./HueShift-D9K0ynaS.js";
 import { n as componentDefinition$50 } from "./ImageTexture-CArkZMfh.js";

package/dist/core/shaders/Halftone/index.d.ts

@@ -1,7 +1,14 @@
 import { ComponentDefinition } from '../../types';
-import { transformAngle } from '../../utilities/transformations';
+import { transformAngle, transformColor } from '../../utilities/transformations';
 
 export interface ComponentProps {
+    /**
+     * Halftone rendering style
+     *
+     * Accepts one of: `"classic"`, `"cmyk"`.
+     * @default "classic"
+     */
+    style: string;
     /**
      * Frequency of the halftone dots
      *
@@ -15,11 +22,76 @@ export interface ComponentProps {
      */
     angle: Parameters<typeof transformAngle>[0];
     /**
-     * Edge smoothness of the dots
+     * Screen angle for the cyan plate (in degrees)
+     *
+     * @default 15
+     */
+    cyanAngle: Parameters<typeof transformAngle>[0];
+    /**
+     * Screen angle for the magenta plate (in degrees)
+     *
+     * @default 75
+     */
+    magentaAngle: Parameters<typeof transformAngle>[0];
+    /**
+     * Screen angle for the yellow plate (in degrees)
+     *
+     * @default 0
+     */
+    yellowAngle: Parameters<typeof transformAngle>[0];
+    /**
+     * Screen angle for the black plate (in degrees)
+     *
+     * @default 45
+     */
+    blackAngle: Parameters<typeof transformAngle>[0];
+    /**
+     * Simulated mis-registration between plates. Plates are offset around the misprint angle, producing colour fringing at the edges of inked regions.
+     *
+     * @default 0
+     */
+    misprint: number;
+    /**
+     * Direction the plates drift apart. Rotating this rotates the colour-fringing pattern.
+     *
+     * @default 0
+     */
+    misprintAngle: Parameters<typeof transformAngle>[0];
+    /**
+     * Paper/substrate color shown where no ink lands
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#ffffff"
+     */
+    paperColor: Parameters<typeof transformColor>[0];
+    /**
+     * Cyan ink color
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#00ffff"
+     */
+    cyanColor: Parameters<typeof transformColor>[0];
+    /**
+     * Magenta ink color
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#ff00ff"
+     */
+    magentaColor: Parameters<typeof transformColor>[0];
+    /**
+     * Yellow ink color
+     *
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#ffff00"
+     */
+    yellowColor: Parameters<typeof transformColor>[0];
+    /**
+     * Black (key) ink color
      *
-     * @default 0.1
+     * Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
+     * @default "#000000"
      */
-    smoothness: number;
+    blackColor: Parameters<typeof transformColor>[0];
 }
 export declare const componentDefinition: ComponentDefinition<ComponentProps>;
 export default componentDefinition;

package/dist/core/shaders/Halftone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Halftone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAA;AAElE,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3C,UAAU,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAwFnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Halftone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,qCAAqC,CAAA;AAUlF,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3C,SAAS,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/C,YAAY,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAClD,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACjD,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAChD,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAChD,SAAS,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/C,YAAY,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAClD,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACjD,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAyUnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/core/shaders/Halftone/index.js

@@ -1,3 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import { n as componentDefinition, t as Halftone_default } from "../../Halftone-BVL2oy37.js";
+import "../../alpha-C4ptedXe.js";
+import { n as componentDefinition, t as Halftone_default } from "../../Halftone-XFa7by1s.js";
 export { componentDefinition, Halftone_default as default };

package/dist/js/createShader.js

@@ -46,7 +46,7 @@ async function createShader(canvas, preset, options) {
 	if (isExternalUser()) {
 		const checkRendering = () => {
 			if (renderer.getPerformanceStats().fps > 0) {
-				telemetryCollector = startTelemetry(renderer, "2.5.102", options?.disableTelemetry || false, false);
+				telemetryCollector = startTelemetry(renderer, "2.5.103", options?.disableTelemetry || false, false);
 				if (telemetryCollector) telemetryCollector.start();
 				telemetryStartTimeout = null;
 			} else telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/js/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAm4CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAoBlG;AAGD,eAAO,MAAM,mBAAmB,UA0G/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA84CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAoBlG;AAGD,eAAO,MAAM,mBAAmB,UA0G/B,CAAA"}

package/dist/js/utils/generatePresetCode.js

@@ -575,9 +575,20 @@ var shaderMetadata = {
 	"Halftone": {
 		"opacity": 1,
 		"blendMode": "normal",
+		"style": "classic",
 		"frequency": 100,
 		"angle": 45,
-		"smoothness": .1
+		"cyanAngle": 15,
+		"magentaAngle": 75,
+		"yellowAngle": 0,
+		"blackAngle": 45,
+		"misprint": 0,
+		"misprintAngle": 0,
+		"paperColor": "#ffffff",
+		"cyanColor": "#00ffff",
+		"magentaColor": "#ff00ff",
+		"yellowColor": "#ffff00",
+		"blackColor": "#000000"
 	},
 	"HexGrid": {
 		"opacity": 1,

package/dist/react/Shader.js

@@ -89,7 +89,7 @@ const Shader = ({ children, disableTelemetry = false, colorSpace = "p3-linear",
 				return;
 			}
 			if (rendererRef.current.getPerformanceStats().fps > 0) {
-				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.102", disableTelemetry, isPreview);
+				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.103", disableTelemetry, isPreview);
 				if (telemetryCollectorRef.current) telemetryCollectorRef.current.start();
 				telemetryStartTimeoutRef.current = null;
 			} else telemetryStartTimeoutRef.current = window.setTimeout(checkRendering, 500);

package/dist/react/components/Halftone.d.ts

@@ -22,10 +22,15 @@ interface BaseShaderProps {
  * Component-specific props that merge base props with shader-specific props
  * Note: ComponentProps are made optional since they have defaults from the shader definition
  */
-type ShaderComponentProps = BaseShaderProps & Partial<Omit<ComponentProps, 'frequency' | 'angle' | 'smoothness'>> & {
+type ShaderComponentProps = BaseShaderProps & Partial<Omit<ComponentProps, 'frequency' | 'angle' | 'cyanAngle' | 'magentaAngle' | 'yellowAngle' | 'blackAngle' | 'misprint' | 'misprintAngle'>> & {
     frequency?: ComponentProps['frequency'] | PropDriver;
     angle?: ComponentProps['angle'] | PropDriver;
-    smoothness?: ComponentProps['smoothness'] | PropDriver;
+    cyanAngle?: ComponentProps['cyanAngle'] | PropDriver;
+    magentaAngle?: ComponentProps['magentaAngle'] | PropDriver;
+    yellowAngle?: ComponentProps['yellowAngle'] | PropDriver;
+    blackAngle?: ComponentProps['blackAngle'] | PropDriver;
+    misprint?: ComponentProps['misprint'] | PropDriver;
+    misprintAngle?: ComponentProps['misprintAngle'] | PropDriver;
 };
 /**
  * The main React wrapper component for Shader shader nodes

package/dist/react/components/Halftone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Halftone.d.ts","sourceRoot":"","sources":["../../src/components/Halftone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGjF,YAAY,EAAE,cAAc,EAAE,CAAC;AAY/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC,CAAC,GAAG;IAClH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;CACxD,CAAC;AAwDF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmO1D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"Halftone.d.ts","sourceRoot":"","sources":["../../src/components/Halftone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGjF,YAAY,EAAE,cAAc,EAAE,CAAC;AAY/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC,CAAC,GAAG;IAChM,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;IAC3D,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC;IACzD,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;IACnD,aAAa,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC9D,CAAC;AAwDF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmO1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/react/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAs5CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAiFlG;AAGD,eAAO,MAAM,mBAAmB,UA0G/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAi6CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAiFlG;AAGD,eAAO,MAAM,mBAAmB,UA0G/B,CAAA"}

package/dist/react/utils/generatePresetCode.js

@@ -587,9 +587,20 @@ var shaderMetadata = {
 	"Halftone": {
 		"opacity": 1,
 		"blendMode": "normal",
+		"style": "classic",
 		"frequency": 100,
 		"angle": 45,
-		"smoothness": .1
+		"cyanAngle": 15,
+		"magentaAngle": 75,
+		"yellowAngle": 0,
+		"blackAngle": 45,
+		"misprint": 0,
+		"misprintAngle": 0,
+		"paperColor": "#ffffff",
+		"cyanColor": "#00ffff",
+		"magentaColor": "#ff00ff",
+		"yellowColor": "#ffff00",
+		"blackColor": "#000000"
 	},
 	"HexGrid": {
 		"opacity": 1,