shaders 3.1.462 → 3.2.464

package/dist/core/NoiseDissolve-DGbFYpRH.js

@@ -0,0 +1,80 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { n as reveal, t as coverage } from "./reveal-xpOj9hSs.js";
+import { i as transformBoolean } from "./transformations-CoIwF5JU.js";
+const componentDefinition = defineStd({
+	name: "NoiseDissolve",
+	role: "filter",
+	species: "pointwise",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Transitions",
+	description: "Dissolve the content away through an organic noise pattern",
+	props: {
+		progress: {
+			default: .5,
+			description: "How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Progress",
+				group: "Transition"
+			}
+		},
+		scale: {
+			default: 3,
+			description: "Frequency of the dissolve pattern (higher = smaller blobs)",
+			ui: {
+				type: ["range", "map"],
+				min: .5,
+				max: 20,
+				step: .1,
+				label: "Scale",
+				group: "Transition"
+			}
+		},
+		softness: {
+			default: .25,
+			description: "How softly the erosion edge fades out (0 = hard-edged blobs)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness",
+				group: "Transition"
+			}
+		},
+		seed: {
+			default: 0,
+			description: "Random seed for pattern variation",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Seed",
+				group: "Transition"
+			}
+		},
+		invert: {
+			default: false,
+			transform: transformBoolean,
+			description: "Reverse the order the pattern dissolves in",
+			ui: {
+				type: "checkbox",
+				label: "Invert",
+				group: "Transition"
+			}
+		}
+	},
+	effect: reveal({
+		coverage: coverage.noise(p("scale"), p("seed")),
+		progress: p("progress"),
+		feather: p("softness"),
+		invert: p("invert")
+	}),
+	missingChildMessage: "You must pass a child component into the Noise Dissolve shader."
+});
+var NoiseDissolve_default = componentDefinition;
+export { componentDefinition as n, NoiseDissolve_default as t };

package/dist/core/ObjectTracker-T8FCXWre.js

@@ -0,0 +1,345 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { t as detectionOverlay } from "./overlay-Sye7-I6D.js";
+import { a as transformColor, i as transformBoolean } from "./transformations-CoIwF5JU.js";
+const componentDefinition = defineStd({
+	name: "ObjectTracker",
+	role: "overlay",
+	species: "custom",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Stylize",
+	description: "Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		detectionMode: {
+			default: "bright",
+			compileTime: true,
+			description: "What counts as a detectable object.",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Transparency",
+						value: "alpha"
+					},
+					{
+						label: "Brightness",
+						value: "bright"
+					},
+					{
+						label: "Darkness",
+						value: "dark"
+					},
+					{
+						label: "Red",
+						value: "red"
+					},
+					{
+						label: "Green",
+						value: "green"
+					},
+					{
+						label: "Blue",
+						value: "blue"
+					}
+				],
+				label: "Detect",
+				group: "Detection"
+			}
+		},
+		threshold: {
+			default: .25,
+			description: "Detection cut-off.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Threshold",
+				group: "Detection"
+			}
+		},
+		layout: {
+			default: "mosaic",
+			compileTime: true,
+			description: "How the canvas is partitioned into detection cells.",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Grid",
+						value: "grid"
+					},
+					{
+						label: "Quadtree",
+						value: "quadtree"
+					},
+					{
+						label: "Mosaic",
+						value: "mosaic"
+					}
+				],
+				label: "Layout",
+				group: "Detection"
+			}
+		},
+		cellSize: {
+			default: 400,
+			description: "Base cell size in pixels",
+			ui: {
+				type: "range",
+				min: 24,
+				max: 800,
+				step: 1,
+				label: "Base Cell Size",
+				group: "Detection"
+			}
+		},
+		maxDepth: {
+			default: 2,
+			compileTime: true,
+			description: "Maximum subdivision levels for Quadtree/Mosaic layouts (each level can quarter a cell).",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 5,
+				step: 1,
+				label: "Subdivision",
+				group: "Detection",
+				condition: { layout: ["quadtree", "mosaic"] }
+			}
+		},
+		boxStyle: {
+			default: "corners",
+			compileTime: true,
+			description: "Bounding box outline style",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Full",
+					value: "full"
+				}, {
+					label: "Corners",
+					value: "corners"
+				}],
+				label: "Box Style",
+				group: "Boxes"
+			}
+		},
+		lineWidth: {
+			default: 1.5,
+			description: "Thickness of the box outline in pixels.",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 12,
+				step: .5,
+				label: "Line Width",
+				group: "Boxes"
+			}
+		},
+		cornerRadius: {
+			default: 0,
+			description: "Corner radius of the box outline in pixels",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 40,
+				step: 1,
+				label: "Corner Radius",
+				group: "Boxes",
+				condition: { boxStyle: "full" }
+			}
+		},
+		strokeColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Bounding box outline colour.",
+			ui: {
+				type: "color",
+				label: "Stroke",
+				group: "Colors"
+			}
+		},
+		fillColor: {
+			default: "#5a79911a",
+			transform: transformColor,
+			description: "Bounding box fill color.",
+			ui: {
+				type: "color",
+				label: "Fill",
+				group: "Colors"
+			}
+		},
+		labelColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Label text color.",
+			ui: {
+				type: "color",
+				label: "Label",
+				group: "Colors",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		labelBackgroundColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Label pill background color.",
+			ui: {
+				type: "color",
+				label: "Label Background",
+				group: "Colors",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		labelMode: {
+			default: "none",
+			compileTime: true,
+			description: "What each label shows.",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "None",
+						value: "none"
+					},
+					{
+						label: "Dimensions",
+						value: "dimensions"
+					},
+					{
+						label: "Percentage",
+						value: "percentage"
+					}
+				],
+				label: "Label",
+				group: "Labels"
+			}
+		},
+		labelPosition: {
+			default: "bottom-right",
+			compileTime: true,
+			description: "Which corner of the box the label anchors to.",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Bottom Left",
+						value: "bottom-left"
+					},
+					{
+						label: "Bottom Right",
+						value: "bottom-right"
+					},
+					{
+						label: "Top Left",
+						value: "top-left"
+					},
+					{
+						label: "Top Right",
+						value: "top-right"
+					}
+				],
+				label: "Label Position",
+				group: "Labels",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		labelRadius: {
+			default: 0,
+			description: "Corner radius of the label pill in pixels.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 30,
+				step: 1,
+				label: "Border Radius",
+				group: "Labels",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		labelInset: {
+			default: true,
+			transform: transformBoolean,
+			description: "Place the label inside or outside the box.",
+			ui: {
+				type: "checkbox",
+				label: "Label Inset",
+				group: "Labels",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		fontFamily: {
+			default: "Inter",
+			description: "Google Fonts family used for label text.",
+			ui: {
+				type: "font-family",
+				label: "Font",
+				group: "Typography",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		fontWeight: {
+			default: 500,
+			description: "Font weight for label text.",
+			ui: {
+				type: "font-weight",
+				label: "Weight",
+				group: "Typography",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		fontSize: {
+			default: .015,
+			description: "Label text size as a fraction of canvas height.",
+			ui: {
+				type: "range",
+				min: .01,
+				max: .5,
+				step: .005,
+				label: "Size",
+				group: "Typography",
+				dimensional: "canvas-height",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		},
+		letterSpacing: {
+			default: 0,
+			description: "Letter spacing for label text, in em units.",
+			ui: {
+				type: "range",
+				min: -.1,
+				max: .5,
+				step: .005,
+				label: "Letter Spacing",
+				group: "Typography",
+				condition: { labelMode: ["dimensions", "percentage"] }
+			}
+		}
+	},
+	gpu: { fragment: detectionOverlay({
+		detectionMode: p("detectionMode"),
+		threshold: p("threshold"),
+		layout: p("layout"),
+		cellSize: p("cellSize"),
+		maxDepth: p("maxDepth"),
+		boxStyle: p("boxStyle"),
+		lineWidth: p("lineWidth"),
+		cornerRadius: p("cornerRadius"),
+		strokeColor: p("strokeColor"),
+		fillColor: p("fillColor"),
+		labelColor: p("labelColor"),
+		labelBackgroundColor: p("labelBackgroundColor"),
+		labelMode: p("labelMode"),
+		labelPosition: p("labelPosition"),
+		labelInset: p("labelInset"),
+		labelRadius: p("labelRadius"),
+		fontFamily: p("fontFamily"),
+		fontWeight: p("fontWeight"),
+		fontSize: p("fontSize"),
+		letterSpacing: p("letterSpacing")
+	}) }
+});
+var ObjectTracker_default = componentDefinition;
+export { componentDefinition as n, ObjectTracker_default as t };

package/dist/core/PagePeel-DilPJ9RZ.js

@@ -0,0 +1,134 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { D as peelFrame, E as peelCompose, N as revealShadow, T as overhangShadow, d as curlShading, f as curlSheen, v as gatherStack } from "./blurs-O1YbZEVw.js";
+var peel = peelFrame({
+	corner: p("corner"),
+	amount: p("amount"),
+	radius: p("radius")
+});
+const componentDefinition = defineStd({
+	name: "PagePeel",
+	role: "filter",
+	species: "gather",
+	category: "Transitions",
+	description: "Curl the content up from a corner like a peeling page",
+	boundingBoxDeclaration: { aspectRatio: null },
+	props: {
+		corner: {
+			default: "bottom-right",
+			description: "Which corner the page peels from",
+			compileTime: true,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Top Left",
+						value: "top-left"
+					},
+					{
+						label: "Top Right",
+						value: "top-right"
+					},
+					{
+						label: "Bottom Left",
+						value: "bottom-left"
+					},
+					{
+						label: "Bottom Right",
+						value: "bottom-right"
+					}
+				],
+				label: "Corner",
+				group: "Effect"
+			}
+		},
+		amount: {
+			default: .2,
+			description: "How far the peel has progressed across the page (0 = flat, 1 = fully peeled)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Amount",
+				group: "Effect"
+			}
+		},
+		radius: {
+			default: .2,
+			description: "Tightness of the curl (fraction of the page diagonal)",
+			ui: {
+				type: ["range", "map"],
+				min: .02,
+				max: .4,
+				step: .01,
+				label: "Curl Radius",
+				group: "Effect"
+			}
+		},
+		shading: {
+			default: .55,
+			description: "How much the underside of the curl is shaded for depth",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Shading",
+				group: "Effect"
+			}
+		},
+		highlight: {
+			default: .4,
+			description: "Strength of the specular sheen running along the curl",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Highlight",
+				group: "Effect"
+			}
+		},
+		highlightSoftness: {
+			default: .2,
+			description: "Width of the specular highlight band (low = tight gloss, high = broad satin)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Highlight Softness",
+				group: "Effect"
+			}
+		},
+		shadow: {
+			default: 1,
+			description: "Strength of the contact shadow the curl casts on the page",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Shadow",
+				group: "Effect"
+			}
+		}
+	},
+	effect: gatherStack(peelCompose(peel, {
+		shade: curlShading(peel, { shading: p("shading") }),
+		sheen: curlSheen(peel, {
+			highlight: p("highlight"),
+			softness: p("highlightSoftness")
+		}),
+		overhang: overhangShadow(peel, {
+			amount: p("amount"),
+			shadow: p("shadow")
+		}),
+		reveal: revealShadow(peel, {
+			amount: p("amount"),
+			shadow: p("shadow")
+		})
+	}), [])
+});
+var PagePeel_default = componentDefinition;
+export { componentDefinition as n, PagePeel_default as t };

package/dist/core/Paper-l6RxJWBc.js

@@ -0,0 +1,82 @@
+import { Tt as unpremultiplyAlpha, at as call, dt as vec4, nt as ZERO, t as defineStd } from "./lower-z2vuXP8M.js";
+import { c as paperSurface } from "./noisePaints-Cs2Q1Xk9.js";
+const componentDefinition = defineStd({
+	name: "Paper",
+	role: "filter",
+	species: "custom",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Stylize",
+	description: "Applies realistic paper grain and surface roughness to child content",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		roughness: {
+			default: .3,
+			description: "Surface roughness — higher values create more pronounced brightness variation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Roughness",
+				group: "Texture"
+			}
+		},
+		grainScale: {
+			default: 1,
+			description: "Scale of the paper grain — lower = coarser, higher = finer",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .01,
+				label: "Grain Scale",
+				group: "Texture"
+			}
+		},
+		displacement: {
+			default: .15,
+			description: "Surface micro-roughness — shifts pixels at grain scale like real paper fiber bumps",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Displacement",
+				group: "Texture"
+			}
+		},
+		seed: {
+			default: 0,
+			description: "Random seed for pattern variation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Seed",
+				group: "Texture"
+			}
+		}
+	},
+	gpu: { fragment: (params) => {
+		const { childNode, ctx, uniforms, convertToTexture } = params;
+		if (!childNode) {
+			console.error("You must pass a child component into the Paper shader.");
+			return ZERO;
+		}
+		const texture = convertToTexture(childNode);
+		const surface = call(paperSurface, "paperSurface", [
+			ctx.uv,
+			ctx.aspect,
+			uniforms.grainScale,
+			uniforms.seed,
+			uniforms.displacement,
+			uniforms.roughness
+		]);
+		const straight = call(unpremultiplyAlpha, "unpremultiplyAlpha", [texture.sample(surface.member("xy"))]);
+		return vec4(straight.member("rgb").mul(surface.member("z")), straight.member("a"));
+	} }
+});
+var Paper_default = componentDefinition;
+export { componentDefinition as n, Paper_default as t };

package/dist/core/Parallelogram-C95JWNsU.js

@@ -0,0 +1,56 @@
+import { t as defineStd } from "./lower-z2vuXP8M.js";
+import { l as parallelogram } from "./shape-BMO1cLTt.js";
+const componentDefinition = defineStd({
+	role: "shape",
+	name: "Parallelogram",
+	description: "Parallelogram with adjustable width, height and skew",
+	shape: {
+		distance: ({ x, y }, u) => parallelogram(x, y, u("width"), u("height"), u("skew")),
+		colorDescription: "Fill color of the parallelogram",
+		centerDescription: "Center position of the parallelogram",
+		bounds: { size: {
+			width: "width",
+			height: "height"
+		} },
+		shapeProps: {
+			width: {
+				default: .32,
+				description: "Half-width of the parallelogram",
+				ui: {
+					type: "range",
+					min: .02,
+					max: 1,
+					step: .01,
+					label: "Width",
+					group: "Shape"
+				}
+			},
+			height: {
+				default: .22,
+				description: "Half-height of the parallelogram",
+				ui: {
+					type: "range",
+					min: .02,
+					max: 1,
+					step: .01,
+					label: "Height",
+					group: "Shape"
+				}
+			},
+			skew: {
+				default: .15,
+				description: "Horizontal skew of the top edge",
+				ui: {
+					type: "range",
+					min: -.4,
+					max: .4,
+					step: .01,
+					label: "Skew",
+					group: "Shape"
+				}
+			}
+		}
+	}
+});
+var Parallelogram_default = componentDefinition;
+export { componentDefinition as n, Parallelogram_default as t };