shaders 2.2.44 → 2.2.45

package/dist/core/{GridDistortion-D-iiGELF.js → GridDistortion-fimECOse.js}

@@ -1,7 +1,7 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.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";
+import { convertToTexture, float, screenUV, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 var DEFAULT_GRID_SIZE = 20;
 var displacementStateCache = /* @__PURE__ */ new WeakMap();
 var getOrCreateDisplacementState = (uniforms) => {
@@ -46,17 +46,6 @@ const componentDefinition = {
 				label: "Intensity"
 			}
 		},
-		swirl: {
-			default: 0,
-			description: "Amount of swirl motion",
-			ui: {
-				type: "range",
-				min: 0,
-				max: 2,
-				step: .1,
-				label: "Swirl"
-			}
-		},
 		decay: {
 			default: 3,
 			description: "Rate of distortion decay (higher = faster)",
@@ -75,7 +64,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},
@@ -118,7 +107,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup }) => {
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions }) => {
 		const { dataTexture: displacementTexture, data: displacementData, tslNode: displacementField, gridSize: GRID_SIZE } = getOrCreateDisplacementState(uniforms);
 		const mouseVelX = uniform(0);
 		const mouseVelY = uniform(0);
@@ -129,6 +118,7 @@ const componentDefinition = {
 			const currentTime = Date.now();
 			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 			lastTime = currentTime;
+			const aspect$1 = Math.max(1, dimensions.width) / Math.max(1, dimensions.height);
 			const velX = dt > 0 ? (pointer.x - prevX) / dt : 0;
 			const velY = dt > 0 ? (pointer.y - prevY) / dt : 0;
 			mouseVelX.value = mouseVelX.value * .85 + velX * .15;
@@ -136,25 +126,19 @@ const componentDefinition = {
 			const decay = uniforms.decay.uniform.value;
 			const intensity = uniforms.intensity.uniform.value;
 			const radius = uniforms.radius.uniform.value * .05;
-			const swirl = uniforms.swirl.uniform.value;
 			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
 				const idx = (i * GRID_SIZE + j) * 2;
 				displacementData[idx] *= 1 - decay * dt;
 				displacementData[idx + 1] *= 1 - decay * dt;
 				const cellX = (j + .5) / GRID_SIZE;
 				const cellY = (i + .5) / GRID_SIZE;
-				const dx = cellX - pointer.x;
+				const dx = (cellX - pointer.x) / aspect$1;
 				const dy = cellY - pointer.y;
 				const dist = Math.sqrt(dx * dx + dy * dy);
 				if (dist < radius * 2 && Math.abs(velX) + Math.abs(velY) > .01) {
 					const influence = Math.exp(-dist * dist / (radius * radius));
 					displacementData[idx] += mouseVelX.value * influence * intensity * dt * .5;
 					displacementData[idx + 1] += mouseVelY.value * influence * intensity * dt * .5;
-					if (swirl > 0) {
-						const angle = Math.atan2(dy, dx) + Math.PI * .5;
-						displacementData[idx] += Math.cos(angle) * swirl * influence * dt * 2;
-						displacementData[idx + 1] += Math.sin(angle) * swirl * influence * dt * 2;
-					}
 				}
 				displacementData[idx] = Math.max(-1, Math.min(1, displacementData[idx]));
 				displacementData[idx + 1] = Math.max(-1, Math.min(1, displacementData[idx + 1]));
@@ -172,9 +156,14 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
+		const aspect = viewportSize.x.div(viewportSize.y);
 		const gridSizeUniform = uniforms.gridSize.uniform;
-		const gridScale = float(1).div(gridSizeUniform);
-		const gridCellUV = screenUV.div(gridScale).floor().mul(gridScale).add(gridScale.mul(.5));
+		const isWide = aspect.greaterThan(float(1));
+		const cellsX = isWide.select(gridSizeUniform, gridSizeUniform.mul(aspect)).max(float(1));
+		const cellsY = isWide.select(gridSizeUniform.div(aspect), gridSizeUniform).max(float(1));
+		const cellIndexX = screenUV.x.mul(cellsX).floor();
+		const cellIndexY = screenUV.y.mul(cellsY).floor();
+		const gridCellUV = vec2(cellIndexX.add(.5).div(cellsX), cellIndexY.add(.5).div(cellsY));
 		const displacement = displacementField.sample(gridCellUV).xy;
 		const maxDisplacement = float(.1);
 		const negMaxDisplacement = float(-.1);

package/dist/core/{Halftone-CV0aFuRG.js → Halftone-Cb5yrPnj.js}

@@ -36,7 +36,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: .3,
-				step: .01,
+				step: .1,
 				label: "Smoothness"
 			}
 		}

package/dist/core/{LinearBlur-CTXjolzL.js → LinearBlur-CfMT259a.js}

@@ -38,7 +38,8 @@ const componentDefinition = {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
 		const angleRad = radians(uniforms.angle.uniform);
-		const blurDirection = vec2(cos(angleRad), sin(angleRad));
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const blurDirection = vec2(cos(angleRad).div(aspect), sin(angleRad));
 		return Fn(() => {
 			const uv$1 = screenUV;
 			const texel = vec2(1).div(viewportSize);

package/dist/core/{LinearGradient-CZo6e7r8.js → LinearGradient-Cn7w-umQ.js}

@@ -1,6 +1,6 @@
 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";
+import { abs, cos, dot, float, fract, length, mod, normalize, radians, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "LinearGradient",
 	category: "Base Layers",
@@ -105,12 +105,16 @@ const componentDefinition = {
 		const gradientVector = endPos.sub(startPos);
 		const gradientLength = length(gradientVector);
 		const gradientDir = normalize(gradientVector);
+		const safeViewportY = viewportSize.y.max(1e-6);
+		const aspect = viewportSize.x.div(safeViewportY);
 		const angleRad = radians(uniforms.angle.uniform).negate();
 		const cosAngle = cos(angleRad);
 		const sinAngle = sin(angleRad);
 		const midpoint = startPos.add(endPos).mul(.5);
 		const centeredUV = uv$1.sub(midpoint);
-		const t = dot(vec2(centeredUV.x.mul(cosAngle).sub(centeredUV.y.mul(sinAngle)), centeredUV.x.mul(sinAngle).add(centeredUV.y.mul(cosAngle))).add(midpoint).sub(startPos), gradientDir).div(gradientLength.max(1e-6));
+		const aspectCorrectedCentered = vec2(centeredUV.x.mul(aspect), centeredUV.y);
+		const rotatedCorrected = vec2(aspectCorrectedCentered.x.mul(cosAngle).sub(aspectCorrectedCentered.y.mul(sinAngle)), aspectCorrectedCentered.x.mul(sinAngle).add(aspectCorrectedCentered.y.mul(cosAngle)));
+		const t = dot(vec2(rotatedCorrected.x.div(aspect), rotatedCorrected.y).add(midpoint).sub(startPos), gradientDir).div(gradientLength.max(1e-6));
 		const edgeMode = uniforms.edges.uniform;
 		const stretchT = t.clamp(float(0), float(1));
 		const inBoundsX = t.greaterThanEqual(float(0)).select(float(1), float(0));

package/dist/core/{Liquify-BbfDBMNZ.js → Liquify-BCkIt0A1.js}

@@ -40,17 +40,6 @@ const componentDefinition = {
 				label: "Intensity"
 			}
 		},
-		swirl: {
-			default: 0,
-			description: "Amount of swirl motion (0-1)",
-			ui: {
-				type: "range",
-				min: 0,
-				max: 1,
-				step: .01,
-				label: "Swirl"
-			}
-		},
 		decay: {
 			default: 3,
 			description: "Rate of distortion decay (higher = faster)",
@@ -69,7 +58,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},
@@ -119,7 +108,6 @@ const componentDefinition = {
 			const decay = uniforms.decay.uniform.value;
 			const intensity = uniforms.intensity.uniform.value;
 			const radius = uniforms.radius.uniform.value * .05;
-			const swirl = uniforms.swirl.uniform.value;
 			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
 				const idx = (i * GRID_SIZE + j) * 2;
 				displacementData[idx] *= 1 - decay * dt;
@@ -133,11 +121,6 @@ const componentDefinition = {
 					const influence = Math.exp(-dist * dist / (radius * radius));
 					displacementData[idx] += mouseVelX.value * influence * intensity * dt * .5;
 					displacementData[idx + 1] += mouseVelY.value * influence * intensity * dt * .5;
-					if (swirl > 0) {
-						const angle = Math.atan2(dy, dx) + Math.PI * .5;
-						displacementData[idx] += Math.cos(angle) * swirl * influence * dt * 2;
-						displacementData[idx + 1] += Math.sin(angle) * swirl * influence * dt * 2;
-					}
 				}
 				displacementData[idx] = Math.max(-1, Math.min(1, displacementData[idx]));
 				displacementData[idx + 1] = Math.max(-1, Math.min(1, displacementData[idx + 1]));

package/dist/core/{Perspective-CSP2Hb16.js → Perspective-CJOFHxEC.js}

@@ -60,7 +60,7 @@ const componentDefinition = {
 				type: "range",
 				min: .5,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Zoom"
 			}
 		},

package/dist/core/{Pixelate-BAoi-CSx.js → Pixelate-BhNAxBsT.js}

@@ -1,4 +1,4 @@
-import { convertToTexture, floor, screenUV, vec4 } from "three/tsl";
+import { convertToTexture, float, floor, screenUV, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Pixelate",
 	category: "Stylize",
@@ -7,7 +7,7 @@ const componentDefinition = {
 	requiresChild: true,
 	props: { scale: {
 		default: 50,
-		description: "Pixel size - higher values create larger, more visible pixels",
+		description: "Number of pixels along the longest edge (higher = smaller pixels)",
 		ui: {
 			type: "range",
 			min: 1,
@@ -22,8 +22,12 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
+		const aspect = viewportSize.x.div(viewportSize.y);
 		const pixelSize = uniforms.scale.uniform;
-		const pixelatedUV = floor(screenUV.mul(pixelSize)).div(pixelSize);
+		const isWide = aspect.greaterThan(float(1));
+		const pixelCountX = isWide.select(pixelSize, pixelSize.mul(aspect)).max(float(1));
+		const pixelCountY = isWide.select(pixelSize.div(aspect), pixelSize).max(float(1));
+		const pixelatedUV = vec2(floor(screenUV.x.mul(pixelCountX)).div(pixelCountX), floor(screenUV.y.mul(pixelCountY)).div(pixelCountY));
 		return childTexture.sample(pixelatedUV);
 	}
 };

package/dist/core/{PolarCoordinates-BwN9HhFK.js → PolarCoordinates-DLs3K__1.js}

@@ -27,7 +27,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Wrap"
 			}
 		},
@@ -38,7 +38,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},
@@ -49,7 +49,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Intensity"
 			}
 		},

package/dist/core/{ProgressiveBlur-RuAm_BKx.js → ProgressiveBlur-BIZSnUjp.js}

@@ -49,7 +49,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Falloff"
 			}
 		}
@@ -60,8 +60,11 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
+		const aspect = viewportSize.x.div(viewportSize.y);
 		const angleRad = radians(uniforms.angle.uniform);
-		const direction = vec2(cos(angleRad), sin(angleRad));
+		const cosAngle = cos(angleRad);
+		const sinAngle = sin(angleRad);
+		const direction = vec2(cosAngle.div(aspect), sinAngle);
 		const centerPosition = vec2(uniforms.center.uniform[0], uniforms.center.uniform[1].oneMinus());
 		const centeredUV = screenUV.sub(centerPosition);
 		const directionalDist = max(float(0), centeredUV.dot(direction));

package/dist/core/{RadialGradient-BfFuRbIl.js → RadialGradient-sQgXXXQk.js}

@@ -43,7 +43,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},

package/dist/core/{RectangularCoordinates-CiW3J4UT.js → RectangularCoordinates-CyarkXn0.js}

@@ -27,7 +27,7 @@ const componentDefinition = {
 				type: "range",
 				min: .1,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Scale"
 			}
 		},
@@ -38,7 +38,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Intensity"
 			}
 		},

package/dist/core/{Ripples-DKBIp3Qq.js → Ripples-Djjw66Bn.js}

@@ -66,7 +66,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Softness"
 			}
 		},
@@ -77,7 +77,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Thickness"
 			}
 		},
@@ -88,7 +88,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 6.28,
-				step: .01,
+				step: .1,
 				label: "Phase"
 			}
 		}

package/dist/core/{Saturation-DVVlpikK.js → Saturation-DLHW_GP6.js}

@@ -11,7 +11,7 @@ const componentDefinition = {
 			type: "range",
 			min: 0,
 			max: 3,
-			step: .01,
+			step: .1,
 			label: "Intensity"
 		}
 	} },

package/dist/core/{Sharpness-cw57bW0s.js → Sharpness-DkGuV_dy.js}

@@ -12,7 +12,7 @@ const componentDefinition = {
 			type: "range",
 			min: 0,
 			max: 5,
-			step: .01,
+			step: .1,
 			label: "Sharpness"
 		}
 	} },

package/dist/core/{Shatter-COjV2jLy.js → Shatter-DVgj2Ea3.js}

@@ -129,7 +129,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup }) => {
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions }) => {
 		const SHARD_COUNT = 16;
 		const FRICTION = 1;
 		const cellData = new Float32Array(SHARD_COUNT * 4);
@@ -160,6 +160,7 @@ const componentDefinition = {
 			const currentTime = Date.now();
 			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 			lastTime = currentTime;
+			const aspect = dimensions.width / dimensions.height;
 			const newSeed = uniforms.seed.uniform.value;
 			if (newSeed !== currentSeed) {
 				currentSeed = newSeed;
@@ -185,7 +186,7 @@ const componentDefinition = {
 				const cellY = cellData[i * 4 + 1];
 				const randomDirX = cellData[i * 4 + 2] - .5;
 				const randomDirY = cellData[i * 4 + 3] - .5;
-				const dx = cellX - pointer.x;
+				const dx = (cellX - pointer.x) / aspect;
 				const dy = cellY - pointer.y;
 				const dist = Math.sqrt(dx * dx + dy * dy);
 				let currentDx = displacementData[i * 4];

package/dist/core/{SimplexNoise-Ce79jgYM.js → SimplexNoise-BXtLTcAr.js}

@@ -43,7 +43,7 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Balance"
 			}
 		},

package/dist/core/{SineWave-Cv2gOU8a.js → SineWave-BxqFasFh.js}

@@ -22,7 +22,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Amplitude"
 			}
 		},
@@ -79,7 +79,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Thickness"
 			}
 		},
@@ -90,7 +90,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Softness"
 			}
 		}

package/dist/core/{Spherize-R-s4pX9t.js → Spherize-DIJ4c_EG.js}

@@ -14,7 +14,7 @@ const componentDefinition = {
 				type: "range",
 				min: .1,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},
@@ -25,7 +25,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Depth"
 			}
 		},
@@ -60,7 +60,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Light Intensity"
 			}
 		},
@@ -71,7 +71,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Light Softness"
 			}
 		},

package/dist/core/{Spiral-W4dALX1z.js → Spiral-BBtmU1Fv.js}

@@ -32,7 +32,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Stroke Width"
 			}
 		},
@@ -43,7 +43,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Stroke Falloff"
 			}
 		},
@@ -54,7 +54,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Softness"
 			}
 		},

package/dist/core/{Strands-DtN5POfO.js → Strands-D6UOhX0L.js}

@@ -15,7 +15,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Speed"
 			}
 		},
@@ -37,7 +37,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 5,
-				step: .01,
+				step: .1,
 				label: "Frequency"
 			}
 		},
@@ -57,9 +57,9 @@ const componentDefinition = {
 			description: "Width of wave lines",
 			ui: {
 				type: "range",
-				min: .01,
-				max: .5,
-				step: .01,
+				min: 0,
+				max: 1,
+				step: .05,
 				label: "Line Width"
 			}
 		},

package/dist/core/{Stretch-BzvP_hdu.js → Stretch-DLpz8Ofm.js}

@@ -27,7 +27,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Strength"
 			}
 		},
@@ -49,7 +49,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Falloff"
 			}
 		},

package/dist/core/{Stripes-BbNFX05u.js → Stripes-Bre3Z2m_.js}

@@ -53,9 +53,9 @@ const componentDefinition = {
 			description: "Ratio of the two colors",
 			ui: {
 				type: "range",
-				min: .01,
-				max: .99,
-				step: .01,
+				min: 0,
+				max: 1,
+				step: .1,
 				label: "Balance"
 			}
 		},
@@ -66,7 +66,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Softness"
 			}
 		},
@@ -88,7 +88,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Offset"
 			}
 		},

package/dist/core/{TiltShift-B6gbm7Z8.js → TiltShift-BPpXBzBg.js}

@@ -25,7 +25,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Width"
 			}
 		},
@@ -36,7 +36,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Falloff"
 			}
 		},
@@ -71,11 +71,13 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
+		const aspect = viewportSize.x.div(viewportSize.y);
 		const angleRad = radians(uniforms.angle.uniform);
 		const cosAngle = cos(angleRad);
 		const perpVector = vec2(sin(angleRad).negate(), cosAngle);
 		const centerPosition = vec2(uniforms.center.uniform[0], uniforms.center.uniform[1].oneMinus());
-		const distFromLine = abs(dot(screenUV.sub(centerPosition), perpVector));
+		const centeredUV = screenUV.sub(centerPosition);
+		const distFromLine = abs(dot(vec2(centeredUV.x.mul(aspect), centeredUV.y), perpVector));
 		const focusWidth = uniforms.width.uniform.mul(.5);
 		const falloff = uniforms.falloff.uniform;
 		const blurAmount = smoothstep(focusWidth, focusWidth.add(falloff), distFromLine);
@@ -96,7 +98,7 @@ const componentDefinition = {
 			.135,
 			.056
 		];
-		const weightSum = 6.214;
+		const weightSum = 6.21;
 		const horizontalTexture = convertToTexture(Fn(() => {
 			const uv$1 = screenUV;
 			const pixelSize = vec2(1).div(viewportSize);

package/dist/core/{Tint-CpnitsHw.js → Tint-BazvezVn.js}

@@ -22,7 +22,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Amount"
 			}
 		},

package/dist/core/{Tritone-DzvSKVfR.js → Tritone-w0h2ebDB.js}

@@ -42,7 +42,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Midpoint"
 			}
 		},

package/dist/core/{Twirl-BXH4uAd6.js → Twirl-dmfYS2Eo.js}

@@ -1,6 +1,6 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
 import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
-import { convertToTexture, cos, length, screenUV, sin, vec2, vec4 } from "three/tsl";
+import { convertToTexture, cos, length, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Twirl",
 	category: "Distortions",
@@ -69,14 +69,16 @@ const componentDefinition = {
 			if (texture$1?.renderTarget?.dispose) texture$1.renderTarget.dispose();
 		});
 		const uvNode = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
 		const centerPos = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
 		const delta = uvNode.sub(centerPos);
-		const angle = uniforms.intensity.uniform.mul(length(delta));
+		const aspectCorrectedDelta = vec2(delta.x.mul(aspect), delta.y);
+		const angle = uniforms.intensity.uniform.mul(length(aspectCorrectedDelta));
 		const cosAngle = cos(angle);
 		const sinAngle = sin(angle);
-		const rotatedX = cosAngle.mul(delta.x).sub(sinAngle.mul(delta.y));
-		const rotatedY = sinAngle.mul(delta.x).add(cosAngle.mul(delta.y));
-		const twistedUV = vec2(rotatedX.add(centerPos.x), rotatedY.add(centerPos.y));
+		const rotatedX = cosAngle.mul(aspectCorrectedDelta.x).sub(sinAngle.mul(aspectCorrectedDelta.y));
+		const rotatedY = sinAngle.mul(aspectCorrectedDelta.x).add(cosAngle.mul(aspectCorrectedDelta.y));
+		const twistedUV = vec2(rotatedX.div(aspect).add(centerPos.x), rotatedY.add(centerPos.y));
 		return applyEdgeHandling(twistedUV, texture$1.sample(twistedUV), texture$1, uniforms.edges.uniform);
 	}
 };

package/dist/core/{Vibrance-ByN9bRgU.js → Vibrance-BpWyAK9W.js}

@@ -11,7 +11,7 @@ const componentDefinition = {
 			type: "range",
 			min: -2,
 			max: 2,
-			step: .01,
+			step: .1,
 			label: "Intensity"
 		}
 	} },