shaders 2.5.116 → 2.5.118

package/dist/svelte/source/engine/Preview.svelte

@@ -8,17 +8,21 @@ import RenderComponent from './PreviewRenderComponent.svelte'
 import AngularBlur from '../components/AngularBlur.svelte'
 import Ascii from '../components/Ascii.svelte'
 import Aurora from '../components/Aurora.svelte'
+import BarShift from '../components/BarShift.svelte'
 import Beam from '../components/Beam.svelte'
 import Blob from '../components/Blob.svelte'
 import Blur from '../components/Blur.svelte'
+import BrickPattern from '../components/BrickPattern.svelte'
 import BrightnessContrast from '../components/BrightnessContrast.svelte'
 import Bulge from '../components/Bulge.svelte'
 import CRTScreen from '../components/CRTScreen.svelte'
 import ChannelBlur from '../components/ChannelBlur.svelte'
 import Checkerboard from '../components/Checkerboard.svelte'
+import Chevron from '../components/Chevron.svelte'
 import ChromaFlow from '../components/ChromaFlow.svelte'
 import ChromaticAberration from '../components/ChromaticAberration.svelte'
 import Circle from '../components/Circle.svelte'
+import ColorWheel from '../components/ColorWheel.svelte'
 import ConcentricSpin from '../components/ConcentricSpin.svelte'
 import ConicGradient from '../components/ConicGradient.svelte'
 import ContourLines from '../components/ContourLines.svelte'
@@ -45,6 +49,7 @@ import FlowingGradient from '../components/FlowingGradient.svelte'
 import FlutedGlass from '../components/FlutedGlass.svelte'
 import Fog from '../components/Fog.svelte'
 import Form3D from '../components/Form3D.svelte'
+import FractalNoise from '../components/FractalNoise.svelte'
 import Glass from '../components/Glass.svelte'
 import GlassTiles from '../components/GlassTiles.svelte'
 import Glitch from '../components/Glitch.svelte'
@@ -64,6 +69,7 @@ import LensFlare from '../components/LensFlare.svelte'
 import LinearBlur from '../components/LinearBlur.svelte'
 import LinearGradient from '../components/LinearGradient.svelte'
 import Liquify from '../components/Liquify.svelte'
+import Marble from '../components/Marble.svelte'
 import Mirror from '../components/Mirror.svelte'
 import MultiPointGradient from '../components/MultiPointGradient.svelte'
 import Neon from '../components/Neon.svelte'
@@ -96,6 +102,7 @@ import Strands from '../components/Strands.svelte'
 import Stretch from '../components/Stretch.svelte'
 import Stripes from '../components/Stripes.svelte'
 import StudioBackground from '../components/StudioBackground.svelte'
+import SunBurst from '../components/SunBurst.svelte'
 import Swirl from '../components/Swirl.svelte'
 import TiltShift from '../components/TiltShift.svelte'
 import Tint from '../components/Tint.svelte'
@@ -112,6 +119,7 @@ import Voronoi from '../components/Voronoi.svelte'
 import WaveDistortion from '../components/WaveDistortion.svelte'
 import Weave from '../components/Weave.svelte'
 import WebcamTexture from '../components/WebcamTexture.svelte'
+import WorleyNoise from '../components/WorleyNoise.svelte'
 import ZoomBlur from '../components/ZoomBlur.svelte'
 
 // --- Component Map ---
@@ -120,17 +128,21 @@ const componentMap: Record<string, any> = {
   AngularBlur,
   Ascii,
   Aurora,
+  BarShift,
   Beam,
   Blob,
   Blur,
+  BrickPattern,
   BrightnessContrast,
   Bulge,
   CRTScreen,
   ChannelBlur,
   Checkerboard,
+  Chevron,
   ChromaFlow,
   ChromaticAberration,
   Circle,
+  ColorWheel,
   ConcentricSpin,
   ConicGradient,
   ContourLines,
@@ -157,6 +169,7 @@ const componentMap: Record<string, any> = {
   FlutedGlass,
   Fog,
   Form3D,
+  FractalNoise,
   Glass,
   GlassTiles,
   Glitch,
@@ -176,6 +189,7 @@ const componentMap: Record<string, any> = {
   LinearBlur,
   LinearGradient,
   Liquify,
+  Marble,
   Mirror,
   MultiPointGradient,
   Neon,
@@ -208,6 +222,7 @@ const componentMap: Record<string, any> = {
   Stretch,
   Stripes,
   StudioBackground,
+  SunBurst,
   Swirl,
   TiltShift,
   Tint,
@@ -224,6 +239,7 @@ const componentMap: Record<string, any> = {
   WaveDistortion,
   Weave,
   WebcamTexture,
+  WorleyNoise,
   ZoomBlur,
 }
 // <<< SHADERS_PREVIEW_MAP:END >>>

package/dist/svelte/source/index.js

@@ -1,17 +1,21 @@
 export { default as AngularBlur } from './components/AngularBlur.svelte';
 export { default as Ascii } from './components/Ascii.svelte';
 export { default as Aurora } from './components/Aurora.svelte';
+export { default as BarShift } from './components/BarShift.svelte';
 export { default as Beam } from './components/Beam.svelte';
 export { default as Blob } from './components/Blob.svelte';
 export { default as Blur } from './components/Blur.svelte';
+export { default as BrickPattern } from './components/BrickPattern.svelte';
 export { default as BrightnessContrast } from './components/BrightnessContrast.svelte';
 export { default as Bulge } from './components/Bulge.svelte';
 export { default as CRTScreen } from './components/CRTScreen.svelte';
 export { default as ChannelBlur } from './components/ChannelBlur.svelte';
 export { default as Checkerboard } from './components/Checkerboard.svelte';
+export { default as Chevron } from './components/Chevron.svelte';
 export { default as ChromaFlow } from './components/ChromaFlow.svelte';
 export { default as ChromaticAberration } from './components/ChromaticAberration.svelte';
 export { default as Circle } from './components/Circle.svelte';
+export { default as ColorWheel } from './components/ColorWheel.svelte';
 export { default as ConcentricSpin } from './components/ConcentricSpin.svelte';
 export { default as ConicGradient } from './components/ConicGradient.svelte';
 export { default as ContourLines } from './components/ContourLines.svelte';
@@ -38,6 +42,7 @@ export { default as FlowingGradient } from './components/FlowingGradient.svelte'
 export { default as FlutedGlass } from './components/FlutedGlass.svelte';
 export { default as Fog } from './components/Fog.svelte';
 export { default as Form3D } from './components/Form3D.svelte';
+export { default as FractalNoise } from './components/FractalNoise.svelte';
 export { default as Glass } from './components/Glass.svelte';
 export { default as GlassTiles } from './components/GlassTiles.svelte';
 export { default as Glitch } from './components/Glitch.svelte';
@@ -57,6 +62,7 @@ export { default as LensFlare } from './components/LensFlare.svelte';
 export { default as LinearBlur } from './components/LinearBlur.svelte';
 export { default as LinearGradient } from './components/LinearGradient.svelte';
 export { default as Liquify } from './components/Liquify.svelte';
+export { default as Marble } from './components/Marble.svelte';
 export { default as Mirror } from './components/Mirror.svelte';
 export { default as MultiPointGradient } from './components/MultiPointGradient.svelte';
 export { default as Neon } from './components/Neon.svelte';
@@ -89,6 +95,7 @@ export { default as Strands } from './components/Strands.svelte';
 export { default as Stretch } from './components/Stretch.svelte';
 export { default as Stripes } from './components/Stripes.svelte';
 export { default as StudioBackground } from './components/StudioBackground.svelte';
+export { default as SunBurst } from './components/SunBurst.svelte';
 export { default as Swirl } from './components/Swirl.svelte';
 export { default as TiltShift } from './components/TiltShift.svelte';
 export { default as Tint } from './components/Tint.svelte';
@@ -105,6 +112,7 @@ export { default as Voronoi } from './components/Voronoi.svelte';
 export { default as WaveDistortion } from './components/WaveDistortion.svelte';
 export { default as Weave } from './components/Weave.svelte';
 export { default as WebcamTexture } from './components/WebcamTexture.svelte';
+export { default as WorleyNoise } from './components/WorleyNoise.svelte';
 export { default as ZoomBlur } from './components/ZoomBlur.svelte';
 export { default as Shader } from './engine/Shader.svelte';
 export { default as Preview } from './engine/Preview.svelte';

package/dist/svelte/utils/generatePresetCode.js

@@ -53,6 +53,16 @@ var shaderMetadata = {
 		},
 		"seed": 0
 	},
+	"BarShift": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"count": 6,
+		"angle": 0,
+		"intensity": .15,
+		"seed": 0,
+		"speed": 0,
+		"edges": "mirror"
+	},
 	"Beam": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -98,6 +108,21 @@ var shaderMetadata = {
 		"blendMode": "normal",
 		"intensity": 50
 	},
+	"BrickPattern": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"colorBrick": "#000000",
+		"colorMortar": "#ffffff",
+		"cellsX": 8,
+		"cellsY": 10,
+		"mortar": .05,
+		"angle": 0,
+		"speed": 0,
+		"offset": 0,
+		"speedVariance": 0,
+		"seed": 0,
+		"colorSpace": "linear"
+	},
 	"BrightnessContrast": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -132,6 +157,19 @@ var shaderMetadata = {
 		"softness": 0,
 		"colorSpace": "linear"
 	},
+	"Chevron": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"colorA": "#000000",
+		"colorB": "#ffffff",
+		"count": 5,
+		"angle": 0,
+		"balance": .5,
+		"softness": 0,
+		"speed": 0,
+		"offset": 0,
+		"colorSpace": "linear"
+	},
 	"ChromaFlow": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -168,6 +206,18 @@ var shaderMetadata = {
 		"strokePosition": "center",
 		"colorSpace": "linear"
 	},
+	"ColorWheel": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"mode": "rainbow",
+		"colorA": "#ff0000",
+		"colorB": "#00ff88",
+		"colorC": "#0066ff",
+		"scale": 1,
+		"angle": 0,
+		"speed": .05,
+		"colorSpace": "oklch"
+	},
 	"ConcentricSpin": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -517,6 +567,19 @@ var shaderMetadata = {
 		"uvMode": "stretch",
 		"speed": 1
 	},
+	"FractalNoise": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"colorA": "#000000",
+		"colorB": "#ffffff",
+		"octaves": 4,
+		"detail": 2,
+		"contrast": .5,
+		"speed": .15,
+		"angle": 0,
+		"seed": 0,
+		"colorSpace": "linear"
+	},
 	"Glass": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -718,6 +781,18 @@ var shaderMetadata = {
 		"radius": 1,
 		"edges": "stretch"
 	},
+	"Marble": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"colorA": "#ffffff",
+		"colorB": "#3a2d54",
+		"colorC": "#0f0f0f",
+		"scale": 2,
+		"turbulence": 10,
+		"speed": .05,
+		"seed": 0,
+		"colorSpace": "linear"
+	},
 	"Mirror": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -1183,6 +1258,21 @@ var shaderMetadata = {
 		"ambientSpeed": 2,
 		"seed": 0
 	},
+	"SunBurst": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"color": "#ffdd88",
+		"background": "#000000",
+		"center": {
+			"x": .5,
+			"y": .5
+		},
+		"rayCount": 12,
+		"softness": .3,
+		"radius": .8,
+		"feather": .5,
+		"speed": .2
+	},
 	"Swirl": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -1346,6 +1436,24 @@ var shaderMetadata = {
 		"objectFit": "cover",
 		"mirror": true
 	},
+	"WorleyNoise": {
+		"opacity": 1,
+		"blendMode": "normal",
+		"colorA": "#ffffff",
+		"colorB": "#000000",
+		"colorSpace": "linear",
+		"scale": 6,
+		"mode": "f1",
+		"distance": "euclidean",
+		"octaves": 1,
+		"lacunarity": 2,
+		"persistence": .5,
+		"jitter": 1,
+		"contrast": 1,
+		"balance": 0,
+		"seed": 0,
+		"speed": .5
+	},
 	"ZoomBlur": {
 		"opacity": 1,
 		"blendMode": "normal",
@@ -1469,17 +1577,21 @@ const availableComponents = [
 	"AngularBlur",
 	"Ascii",
 	"Aurora",
+	"BarShift",
 	"Beam",
 	"Blob",
 	"Blur",
+	"BrickPattern",
 	"BrightnessContrast",
 	"Bulge",
 	"CRTScreen",
 	"ChannelBlur",
 	"Checkerboard",
+	"Chevron",
 	"ChromaFlow",
 	"ChromaticAberration",
 	"Circle",
+	"ColorWheel",
 	"ConcentricSpin",
 	"ConicGradient",
 	"ContourLines",
@@ -1506,6 +1618,7 @@ const availableComponents = [
 	"FlutedGlass",
 	"Fog",
 	"Form3D",
+	"FractalNoise",
 	"Glass",
 	"GlassTiles",
 	"Glitch",
@@ -1525,6 +1638,7 @@ const availableComponents = [
 	"LinearBlur",
 	"LinearGradient",
 	"Liquify",
+	"Marble",
 	"Mirror",
 	"MultiPointGradient",
 	"Neon",
@@ -1557,6 +1671,7 @@ const availableComponents = [
 	"Stretch",
 	"Stripes",
 	"StudioBackground",
+	"SunBurst",
 	"Swirl",
 	"TiltShift",
 	"Tint",
@@ -1573,6 +1688,7 @@ const availableComponents = [
 	"WaveDistortion",
 	"Weave",
 	"WebcamTexture",
+	"WorleyNoise",
 	"ZoomBlur"
 ];
 export { availableComponents, generatePresetCode };

package/dist/vue/BarShift.js

@@ -0,0 +1,3 @@
+import BarShift_vue_vue_type_script_setup_true_lang_default from "./BarShift.vue_vue_type_script_setup_true_lang.js";
+var BarShift_default = BarShift_vue_vue_type_script_setup_true_lang_default;
+export { BarShift_default as default };

package/dist/vue/BarShift.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,218 @@
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { createUniformsMap } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { componentDefinition } from "../core/shaders/BarShift/index.js";
+var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
+var BarShift_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "BarShift",
+	props: /* @__PURE__ */ mergeDefaults({
+		count: {},
+		angle: {},
+		intensity: {},
+		blendMode: {},
+		opacity: {},
+		visible: { type: Boolean },
+		id: {},
+		maskSource: {},
+		maskType: {},
+		renderOrder: {},
+		transform: {},
+		seed: {},
+		speed: {},
+		edges: {}
+	}, {
+		blendMode: "normal",
+		visible: true,
+		...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+			acc[key] = config.default;
+			return acc;
+		}, {})
+	}),
+	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
+		function isPropDriver(value) {
+			return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+		}
+		const props = __props;
+		const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
+		provide("shaderParentId", instanceId);
+		const DEFAULT_TRANSFORM = {
+			offsetX: 0,
+			offsetY: 0,
+			rotation: 0,
+			scale: 1,
+			anchorX: .5,
+			anchorY: .5,
+			edges: "transparent"
+		};
+		const effectiveTransform = computed(() => ({
+			...DEFAULT_TRANSFORM,
+			...props.transform
+		}));
+		const shaderReadyProps = computed(() => {
+			let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
+				acc[key] = config.default;
+				return acc;
+			}, {}) };
+			for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform") {
+				const val = toValue(props[key]);
+				if (isPropDriver(val)) continue;
+				if (val !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
+					acc[key$1] = config.default;
+					return acc;
+				}, {})[key]) baseProps[key] = val;
+			}
+			return baseProps;
+		});
+		const mapsFromProps = computed(() => {
+			const maps = {};
+			for (const key of Object.keys(componentDefinition.props)) {
+				const val = props[key];
+				if (isPropDriver(val)) maps[key] = val;
+			}
+			return Object.keys(maps).length > 0 ? maps : void 0;
+		});
+		const shaderColorSpace = inject("shaderColorSpace");
+		if (shaderColorSpace) setColorSpaceMode(shaderColorSpace.value);
+		const uniforms = createUniformsMap(componentDefinition, shaderReadyProps.value, instanceId);
+		const parentId = inject("shaderParentId");
+		if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentRegister = inject("shaderNodeRegister");
+		if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+		const parentUniformUpdate = inject("shaderUniformUpdate");
+		if (parentUniformUpdate === void 0) throw new Error("Shader components require shaderUniformUpdate from parent");
+		const parentMetadataUpdate = inject("shaderMetadataUpdate");
+		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
+		const rendererResetSignal = inject("shaderRendererResetSignal");
+		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
+		let detectedRenderOrder = void 0;
+		const registerWithRenderer = () => {
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
+				blendMode: props.blendMode,
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps.value,
+				renderOrder: props.renderOrder ?? detectedRenderOrder,
+				transform: effectiveTransform.value
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
+		};
+		onMounted(() => {
+			if (props.renderOrder === void 0 && orderMarker.value) {
+				const parent = orderMarker.value.parentElement;
+				if (parent) {
+					const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+					const position = Array.from(siblings).indexOf(orderMarker.value);
+					if (position >= 0) {
+						detectedRenderOrder = position;
+						parentMetadataUpdate(instanceId, { renderOrder: position });
+					}
+				}
+			}
+		});
+		const setupUniformWatchers = () => {
+			const scope = effectScope();
+			scope.run(() => {
+				Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+					watch(() => props[propName], (newValue) => {
+						if (uniform && uniform.value !== void 0 && !isPropDriver(newValue)) parentUniformUpdate(instanceId, propName, newValue);
+					}, { deep: true });
+				});
+				watch(() => [
+					props.blendMode,
+					props.opacity,
+					props.visible,
+					props.id,
+					props.maskSource,
+					props.maskType,
+					props.renderOrder,
+					props.transform,
+					mapsFromProps.value
+				], ([blendMode, opacity, visible]) => {
+					parentMetadataUpdate(instanceId, {
+						blendMode,
+						opacity,
+						visible: visible === false ? false : true,
+						id: props.id,
+						mask: props.maskSource ? {
+							source: props.maskSource,
+							type: props.maskType || "alpha"
+						} : void 0,
+						maps: mapsFromProps.value,
+						renderOrder: props.renderOrder ?? detectedRenderOrder,
+						transform: effectiveTransform.value
+					});
+				}, { deep: true });
+				if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
+					if (newValue > 0) registerWithRenderer();
+				}, { immediate: true });
+			});
+			onBeforeUnmount(() => {
+				scope.stop();
+			});
+		};
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
+		onBeforeUnmount(() => {
+			parentRegister(instanceId, null, null, null, null, null);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				ref_key: "orderMarker",
+				ref: orderMarker,
+				style: { "display": "contents" },
+				"data-shader-id": unref(instanceId)
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+export { BarShift_vue_vue_type_script_setup_true_lang_default as default };

package/dist/vue/BrickPattern.js

@@ -0,0 +1,3 @@
+import BrickPattern_vue_vue_type_script_setup_true_lang_default from "./BrickPattern.vue_vue_type_script_setup_true_lang.js";
+var BrickPattern_default = BrickPattern_vue_vue_type_script_setup_true_lang_default;
+export { BrickPattern_default as default };