shaders 2.2.28 → 2.2.30

package/README.md

@@ -1,11 +1,80 @@
 # Shaders
 
-https://shaders.com
+## Shader magic for modern frontends
+
+<img alt="image" src="https://shaders.com/og.png" />
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/shaders" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/shaders?color=0368FF&label=version" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/shaders" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/shaders?color=8D30FF&label=npm" alt="npm downloads per month"></a>
+  <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/shaders"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/shaders?logo=jsdeliver&color=FF4FBA"></a>
+  <a href="https://img.shields.io/twitter/follow/npm_i_shaders" target="_blank"><img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/npm_i_shaders"></a>
+</p>
+
+## Getting Started
+
+Shaders is available as component libraries for Vue, React & Svelte. No matter which framework you use, you always install `npm install shaders` and then import components from the framework-specific directory, such as `shaders/vue`.
+
+```bash
+# Install
+npm install shaders
+```
+
+<details>
+<summary>Usage (Vue)</summary>
+
+```html
+<script>
+    import { Shader, LinearGradient } from "shaders/vue"
+</script>
+
+<template>
+    <Shader>
+        <LinearGradient/>
+    </Shader>
+</template>
+```
+
+</details>
+
+<details>
+<summary>Usage (React)</summary>
+
+```html
+<script>
+    import { Shader, LinearGradient } from "shaders/react"
+</script>
+
+<template>
+    <Shader>
+        <LinearGradient/>
+    </Shader>
+</template>
+```
+
+</details>
+
+<details>
+<summary>Usage (Svelte)</summary>
+
+```svelte
+<script>
+    import { Shader, LinearGradient } from "shaders/svelte"
+</script>
+
+<Shader>
+    <LinearGradient/>
+</Shader>
+```
+
+</details>
+
+**Learn more and try the Design Editor at https://shaders.com**
+
+---
 
 Shaders © Shader Effects, Inc.
 
 Licensed under the Shader Effects License Agreement (v1.1).
 You may use Shaders freely for non-production or educational use.
-A valid paid license is required for production deployment.
-
-See full terms in the [LICENSE](LICENSE)
+A valid paid license is required for production deployment.

package/dist/core/{AngularBlur-DKFExWUF.js → AngularBlur-CuwAjUOA.js}

@@ -1,4 +1,4 @@
-import { o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { Fn, convertToTexture, cos, float, screenUV, sin, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "AngularBlur",

package/dist/core/{Ascii-BRApYlD4.js → Ascii-Dxk6VaBp.js}

@@ -124,6 +124,9 @@ const componentDefinition = {
 				}
 			} catch (error) {}
 		}
+		let reusableCanvas = null;
+		let reusableCtx = null;
+		let reusableDataBuffer = null;
 		const createCharacterAtlas = async (characters, cellSize, fontFamily, spacing) => {
 			if (!characters || characters.length === 0) throw new Error("Characters string cannot be empty");
 			const charCount$1 = characters.length;
@@ -132,11 +135,22 @@ const componentDefinition = {
 			const spacingMultiplier = Math.max(1, 2 / spacing);
 			const actualCellSize = Math.min(baseAtlasCellSize * spacingMultiplier, ATLAS_TEXTURE_SIZE / atlasSize$1);
 			const fontSize = actualCellSize * .75;
-			const atlasCanvas = document.createElement("canvas");
-			atlasCanvas.width = ATLAS_TEXTURE_SIZE;
-			atlasCanvas.height = ATLAS_TEXTURE_SIZE;
-			const ctx = atlasCanvas.getContext("2d");
-			ctx.clearRect(0, 0, atlasCanvas.width, atlasCanvas.height);
+			if (!reusableCanvas) {
+				reusableCanvas = document.createElement("canvas");
+				reusableCanvas.width = ATLAS_TEXTURE_SIZE;
+				reusableCanvas.height = ATLAS_TEXTURE_SIZE;
+				reusableCtx = reusableCanvas.getContext("2d");
+				if (!reusableCtx) {
+					console.error("[Ascii] Failed to create 2D canvas context for character atlas");
+					throw new Error("Ascii shader: Canvas 2D context unavailable");
+				}
+			}
+			if (!reusableCtx) {
+				console.error("[Ascii] Canvas context unexpectedly null during atlas creation");
+				throw new Error("Ascii shader: Canvas 2D context unavailable");
+			}
+			const ctx = reusableCtx;
+			ctx.clearRect(0, 0, ATLAS_TEXTURE_SIZE, ATLAS_TEXTURE_SIZE);
 			ctx.fillStyle = "#ffffff";
 			ctx.font = `${fontSize}px "${fontFamily}", ${fontFamily}, monospace`;
 			if (!ctx.font.includes(fontFamily) && !ctx.font.includes("IBM") && !ctx.font.includes("Plex")) ctx.font = `${fontSize}px ${fontFamily}, monospace`;
@@ -149,9 +163,11 @@ const componentDefinition = {
 				const y = row * actualCellSize + actualCellSize / 2;
 				ctx.fillText(char, x, y);
 			}
-			const imageData = ctx.getImageData(0, 0, atlasCanvas.width, atlasCanvas.height);
+			const imageData = ctx.getImageData(0, 0, ATLAS_TEXTURE_SIZE, ATLAS_TEXTURE_SIZE);
+			if (!reusableDataBuffer) reusableDataBuffer = new Uint8Array(ATLAS_TEXTURE_SIZE * ATLAS_TEXTURE_SIZE * 4);
+			reusableDataBuffer.set(imageData.data);
 			return {
-				data: new Uint8Array(imageData.data),
+				data: reusableDataBuffer,
 				width: ATLAS_TEXTURE_SIZE,
 				height: ATLAS_TEXTURE_SIZE,
 				atlasSize: atlasSize$1,
@@ -255,6 +271,13 @@ const componentDefinition = {
 		});
 		onCleanup(() => {
 			atlasTexture.dispose();
+			if (reusableCanvas) {
+				reusableCanvas.width = 0;
+				reusableCanvas.height = 0;
+				reusableCanvas = null;
+				reusableCtx = null;
+			}
+			reusableDataBuffer = null;
 		});
 		const effectiveCellSize = cellSizeUniform.mul(1.5);
 		const mainGridSize = viewportSize.div(effectiveCellSize);

package/dist/core/{Beam-DU7wxmIh.js → Beam-DCaOPIk_.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { clamp, float, max, mix, pow, screenUV, smoothstep, sqrt, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{Blob-nssNzEgN.js → Blob-8YqXuE5v.js}

@@ -1,5 +1,5 @@
-import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
-import { i as transformColorSpace, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
+import { t as createAnimatedTime } from "./time-DgRTVr2F.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { dot, float, length, max, normalize, pow, reflect, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{Bulge-Dm02_fG6.js → Bulge-D9mLn8-p.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { convertToTexture, float, length, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Bulge",

package/dist/core/{Checkerboard-SKsXoUXE.js → Checkerboard-DjrQsDvl.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { float, floor, fract, min, mod, screenUV, smoothstep, vec2, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{ChromaFlow-VpfgLFbs.js → ChromaFlow-DhzC_8Ne.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { float, mix, screenUV, smoothstep, texture, uniform, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
@@ -89,6 +89,8 @@ const componentDefinition = {
 		const GRID_SIZE = 128;
 		const displacementData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
 		const liquidData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
+		const tempDisplacementData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
+		const tempLiquidData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
 		const displacementTexture = new DataTexture(displacementData, GRID_SIZE, GRID_SIZE, RGFormat, FloatType);
 		displacementTexture.magFilter = LinearFilter;
 		displacementTexture.minFilter = LinearFilter;
@@ -119,15 +121,15 @@ const componentDefinition = {
 			const intensity = uniforms.intensity.uniform.value;
 			const radius = uniforms.radius.uniform.value * .05;
 			const momentum = uniforms.momentum.uniform.value;
-			const newDisplacementData = new Float32Array(displacementData);
-			const newLiquidData = new Float32Array(liquidData);
+			tempDisplacementData.set(displacementData);
+			tempLiquidData.set(liquidData);
 			const flowFadeRate = 1 - dt / Math.max(.1, 1);
-			for (let i = 0; i < GRID_SIZE * GRID_SIZE * 2; i++) newDisplacementData[i] = displacementData[i] * flowFadeRate;
+			for (let i = 0; i < GRID_SIZE * GRID_SIZE * 2; i++) tempDisplacementData[i] = displacementData[i] * flowFadeRate;
 			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
 				const idx = (i * GRID_SIZE + j) * 2;
 				const liquidFadeRate = 1 - dt / Math.max(.4, 1);
-				newLiquidData[idx] = liquidData[idx] * liquidFadeRate;
-				newLiquidData[idx + 1] = liquidData[idx + 1] * liquidFadeRate;
+				tempLiquidData[idx] = liquidData[idx] * liquidFadeRate;
+				tempLiquidData[idx + 1] = liquidData[idx + 1] * liquidFadeRate;
 				if (Math.abs(displacementData[idx]) > .001 || Math.abs(displacementData[idx + 1]) > .001) {
 					const flowSpeed = momentum * 50 * dt;
 					const advectX = j - displacementData[idx] * flowSpeed;
@@ -143,7 +145,7 @@ const componentDefinition = {
 						const idx01 = (y0 * GRID_SIZE + x1) * 2;
 						const idx10 = (y1 * GRID_SIZE + x0) * 2;
 						const idx11 = (y1 * GRID_SIZE + x1) * 2;
-						newLiquidData[idx] = (liquidData[idx00] * (1 - fx) * (1 - fy) + liquidData[idx01] * fx * (1 - fy) + liquidData[idx10] * (1 - fx) * fy + liquidData[idx11] * fx * fy) * liquidFadeRate;
+						tempLiquidData[idx] = (liquidData[idx00] * (1 - fx) * (1 - fy) + liquidData[idx01] * fx * (1 - fy) + liquidData[idx10] * (1 - fx) * fy + liquidData[idx11] * fx * fy) * liquidFadeRate;
 					}
 				}
 			}
@@ -158,19 +160,19 @@ const componentDefinition = {
 				const effectiveRadius = radius * Math.min(speed * speed * 20, 1);
 				if (dist < effectiveRadius * 2 && Math.abs(velX) + Math.abs(velY) > .01) {
 					const influence = Math.exp(-dist * dist / (effectiveRadius * effectiveRadius));
-					newDisplacementData[idx] += mouseVelX.value * influence * (intensity * 100) * dt * .01;
-					newDisplacementData[idx + 1] += mouseVelY.value * influence * (intensity * 100) * dt * .01;
+					tempDisplacementData[idx] += mouseVelX.value * influence * (intensity * 100) * dt * .01;
+					tempDisplacementData[idx + 1] += mouseVelY.value * influence * (intensity * 100) * dt * .01;
 					const speedMultiplier = Math.min(speed * 10, 1);
-					newLiquidData[idx] += influence * (intensity * 100) * dt * .01 * speedMultiplier;
-					newLiquidData[idx + 1] = 0;
+					tempLiquidData[idx] += influence * (intensity * 100) * dt * .01 * speedMultiplier;
+					tempLiquidData[idx + 1] = 0;
 				}
-				newDisplacementData[idx] = Math.max(-1, Math.min(1, newDisplacementData[idx]));
-				newDisplacementData[idx + 1] = Math.max(-1, Math.min(1, newDisplacementData[idx + 1]));
-				newLiquidData[idx] = Math.max(0, Math.min(1, newLiquidData[idx]));
-				newLiquidData[idx + 1] = 0;
+				tempDisplacementData[idx] = Math.max(-1, Math.min(1, tempDisplacementData[idx]));
+				tempDisplacementData[idx + 1] = Math.max(-1, Math.min(1, tempDisplacementData[idx + 1]));
+				tempLiquidData[idx] = Math.max(0, Math.min(1, tempLiquidData[idx]));
+				tempLiquidData[idx + 1] = 0;
 			}
-			displacementData.set(newDisplacementData);
-			liquidData.set(newLiquidData);
+			displacementData.set(tempDisplacementData);
+			liquidData.set(tempLiquidData);
 			displacementTexture.needsUpdate = true;
 			liquidTexture.needsUpdate = true;
 			prevX = pointer.x;

package/dist/core/{ChromaticAberration-CaCyXMyE.js → ChromaticAberration-hi7WGiVk.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle } from "./transformations-Dv5JW9ck.js";
+import { n as transformAngle } from "./transformations-YbhRK-rd.js";
 import { convertToTexture, cos, radians, screenUV, sin, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "ChromaticAberration",

package/dist/core/{Circle-BHnAmzVb.js → Circle-BSAdYHYZ.js}

@@ -1,4 +1,4 @@
-import { o as transformPosition, r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { length, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Circle",

package/dist/core/{CursorTrail-CfVWIKok.js → CursorTrail-B9EQ9FsP.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
 import { float, screenUV, step, texture, vec2, vec4 } from "three/tsl";

package/dist/core/{DiffuseBlur-GWPb8Zht.js → DiffuseBlur-B-QHWSjt.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges } from "./transformations-YbhRK-rd.js";
 import { convertToTexture, dot, fract, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "DiffuseBlur",

package/dist/core/{Dither-BNEeyo0u.js → Dither-Bb5rLGEI.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.js";
 import { dot, floor, mix, screenUV, step, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Dither",

package/dist/core/{DotGrid-CRRS6nbt.js → DotGrid-BJyEY7YH.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.js";
 import { float, floor, fwidth, length, mix, screenUV, sin, smoothstep, time, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "DotGrid",

package/dist/core/{Duotone-5gKND3an.js → Duotone-CRwhugbV.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { convertToTexture, dot, screenUV, smoothstep, vec3, vec4 } from "three/tsl";
 const componentDefinition = {

package/dist/core/{FloatingParticles-CULOurGT.js → FloatingParticles-Ct7GMVzZ.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.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/{Godrays-BQsDwU26.js → Godrays-fJIUiGke.js}

@@ -1,4 +1,4 @@
-import { o as transformPosition, r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { Fn, PI, abs, atan, clamp, float, length, mix, pow, screenUV, sin, smoothstep, time, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Godrays",

package/dist/core/{Grid-CWHxwO7R.js → Grid-o_nFs0CE.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.js";
 import { fract, fwidth, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Grid",

package/dist/core/{GridDistortion-CZB9w-rv.js → GridDistortion-xuUXyMGP.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges } from "./transformations-YbhRK-rd.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { convertToTexture, float, screenUV, texture, uniform, vec2, vec4 } from "three/tsl";
 var DEFAULT_GRID_SIZE = 20;

package/dist/core/{Halftone-MMcLMRpL.js → Halftone-Ddrldk6b.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle } from "./transformations-Dv5JW9ck.js";
+import { n as transformAngle } from "./transformations-YbhRK-rd.js";
 import { cos, dot, fract, length, radians, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Halftone",

package/dist/core/{LinearBlur-B-Ikurxt.js → LinearBlur-cYfqaOhb.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle } from "./transformations-Dv5JW9ck.js";
+import { n as transformAngle } from "./transformations-YbhRK-rd.js";
 import { Fn, convertToTexture, cos, float, radians, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "LinearBlur",

package/dist/core/{LinearGradient-DV6UkhZk.js → LinearGradient-DN_FYXL2.js}

@@ -1,4 +1,4 @@
-import { a as transformEdges, i as transformColorSpace, n as transformAngle, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, n as transformAngle, o as transformEdges, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { abs, cos, dot, float, fract, length, mod, normalize, radians, screenUV, sin, vec2, vec4 } from "three/tsl";
 const componentDefinition = {

package/dist/core/{Liquify-W8UQNeEM.js → Liquify-Qm_y-apj.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges } from "./transformations-YbhRK-rd.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { convertToTexture, float, screenUV, texture, uniform, vec2, vec4 } from "three/tsl";
 var GRID_SIZE = 32;

package/dist/core/{PolarCoordinates-D63xm0oJ.js → PolarCoordinates-DfjOpgDQ.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { PI, atan, convertToTexture, length, mix, screenUV, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "PolarCoordinates",

package/dist/core/{ProgressiveBlur-G-s-o9ic.js → ProgressiveBlur-XD4ivmMn.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { n as transformAngle, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { Fn, convertToTexture, cos, float, max, radians, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ProgressiveBlur",

package/dist/core/{RadialGradient-BGVqSwh0.js → RadialGradient-DGmfTA60.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { distance, float, screenUV, vec2, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{RectangularCoordinates-DyHBo456.js → RectangularCoordinates-TM8tkEBk.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { PI, convertToTexture, cos, mix, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "RectangularCoordinates",

package/dist/core/{Ripples-2FGWCZlp.js → Ripples-D60vIa8s.js}

@@ -1,5 +1,5 @@
-import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
-import { o as transformPosition, r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { t as createAnimatedTime } from "./time-DgRTVr2F.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { distance, float, screenUV, sin, smoothstep, vec2, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{SimplexNoise-B6dtUCmn.js → SimplexNoise-CI-FEJ6v.js}

@@ -1,5 +1,5 @@
-import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { t as createAnimatedTime } from "./time-DgRTVr2F.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { clamp, exp, float, mx_noise_float, screenUV, vec2, vec3, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{SineWave-BtPf6-2H.js → SineWave-CQIQ0oCt.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle, o as transformPosition, r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { n as transformAngle, r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { PI, abs, cos, radians, screenUV, sin, smoothstep, time, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "SineWave",

package/dist/core/{SolidColor-CETl1cEr.js → SolidColor-CTN8J944.js}

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor } from "./transformations-YbhRK-rd.js";
 const componentDefinition = {
 	name: "SolidColor",
 	category: "Base Layers",

package/dist/core/{Spherize-BwvUcorJ.js → Spherize-DDP0_5VP.js}

@@ -1,4 +1,4 @@
-import { o as transformPosition, r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { convertToTexture, dot, float, max, normalize, pow, screenUV, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Spherize",

package/dist/core/{Spiral-DmJWmUmr.js → Spiral-DIzFj8Xi.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { abs, atan, clamp, float, fract, fwidth, length, mix, screenUV, smoothstep, time, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/{Strands-CV1oCmHx.js → Strands-WwfH6CNO.js}

@@ -1,5 +1,5 @@
-import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
-import { o as transformPosition, r as transformColor } from "./transformations-Dv5JW9ck.js";
+import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { t as createAnimatedTime } from "./time-DgRTVr2F.js";
 import { Fn, abs, cos, float, max, mix, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Strands",

package/dist/core/{Stretch-pl-Cn2F8.js → Stretch-DxuMSLMk.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { clamp, convertToTexture, cos, float, mix, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Stretch",

package/dist/core/{Swirl-D65vXLDw.js → Swirl-SrhhoVBs.js}

@@ -1,5 +1,5 @@
-import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
+import { t as createAnimatedTime } from "./time-DgRTVr2F.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4 } from "three/tsl";
 const componentDefinition = {

package/dist/core/{TiltShift-CFcK6Hzg.js → TiltShift-CvKqM1xk.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { n as transformAngle, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { Fn, abs, convertToTexture, cos, dot, float, mix, radians, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "TiltShift",

package/dist/core/{Tritone-EmnjV2rX.js → Tritone-BeEJj4U0.js}

@@ -1,4 +1,4 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-Dv5JW9ck.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
 import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
 import { convertToTexture, dot, screenUV, smoothstep, vec3, vec4 } from "three/tsl";
 const componentDefinition = {

package/dist/core/{Twirl-HSMyRx5I.js → Twirl-DRomCc8u.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges, o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { convertToTexture, cos, length, screenUV, sin, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Twirl",

package/dist/core/{WaveDistortion-DG8GO_l8.js → WaveDistortion-Btn7OJ4m.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Djr_12SL.js";
-import { a as transformEdges } from "./transformations-Dv5JW9ck.js";
+import { o as transformEdges } from "./transformations-YbhRK-rd.js";
 import { PI, abs, convertToTexture, cos, float, fract, screenUV, sin, step, time, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "WaveDistortion",

package/dist/core/{ZoomBlur-C01oGwwG.js → ZoomBlur-gB0BxldE.js}

@@ -1,4 +1,4 @@
-import { o as transformPosition } from "./transformations-Dv5JW9ck.js";
+import { s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { Fn, convertToTexture, float, screenUV, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "ZoomBlur",