shaders 2.2.43 → 2.2.45

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

@@ -1,5 +1,5 @@
 import { s as transformPosition } from "./transformations-YbhRK-rd.js";
-import { Fn, convertToTexture, cos, float, screenUV, sin, vec2, vec4 } from "three/tsl";
+import { Fn, convertToTexture, cos, float, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "AngularBlur",
 	category: "Blurs",
@@ -39,8 +39,10 @@ const componentDefinition = {
 		});
 		const center = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
 		const angle = uniforms.intensity.uniform.mul(.005);
+		const aspect = viewportSize.x.div(viewportSize.y);
 		return Fn(() => {
 			const initialCoord = screenUV.sub(center);
+			const aspectCorrectedCoord = vec2(initialCoord.x.mul(aspect), initialCoord.y);
 			const total = vec4(0).toVar();
 			const totalWeight = float(0).toVar();
 			const angleStep = angle.div(float(31));
@@ -50,7 +52,9 @@ const componentDefinition = {
 				const currentAngle = angleStep.mul(float(i));
 				const cosAngle = cos(currentAngle);
 				const sinAngle = sin(currentAngle);
-				const sampleCoord = vec2(initialCoord.x.mul(cosAngle).sub(initialCoord.y.mul(sinAngle)), initialCoord.x.mul(sinAngle).add(initialCoord.y.mul(cosAngle))).add(center);
+				const rotatedX = aspectCorrectedCoord.x.mul(cosAngle).sub(aspectCorrectedCoord.y.mul(sinAngle));
+				const rotatedY = aspectCorrectedCoord.x.mul(sinAngle).add(aspectCorrectedCoord.y.mul(cosAngle));
+				const sampleCoord = vec2(rotatedX.div(aspect), rotatedY).add(center);
 				const sample = childTexture.sample(sampleCoord).mul(weight);
 				total.assign(total.add(sample));
 				totalWeight.assign(totalWeight.add(weight));

package/dist/core/{Beam-CbG4MkLo.js → Beam-CZo-XeQ-.js}

@@ -37,7 +37,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Start Thickness"
 			}
 		},
@@ -48,7 +48,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "End Thickness"
 			}
 		},
@@ -59,7 +59,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 50,
-				step: .01,
+				step: .1,
 				label: "Start Softness"
 			}
 		},
@@ -70,7 +70,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 20,
-				step: .01,
+				step: .1,
 				label: "End Softness"
 			}
 		},

package/dist/core/{Blob-Ck1tVOL_.js → Blob-D3PIrwWv.js}

@@ -32,7 +32,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Size"
 			}
 		},
@@ -43,7 +43,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Deformation"
 			}
 		},
@@ -54,7 +54,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Softness"
 			}
 		},
@@ -65,7 +65,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Highlight Intensity"
 			}
 		},
@@ -76,7 +76,7 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Highlight X"
 			}
 		},
@@ -87,7 +87,7 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Highlight Y"
 			}
 		},
@@ -98,7 +98,7 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Highlight Z"
 			}
 		},

package/dist/core/{BrightnessContrast-CaErceqR.js → BrightnessContrast-SC7HYw9z.js}

@@ -12,7 +12,7 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Brightness"
 			}
 		},
@@ -23,7 +23,7 @@ const componentDefinition = {
 				type: "range",
 				min: -1,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Contrast"
 			},
 			transform: (value) => value + 1

package/dist/core/{Bulge-BVcWo6On.js → Bulge-CbZA25NX.js}

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

package/dist/core/{CRTScreen-CcAYeqoI.js → CRTScreen-DV5Y2GRA.js}

@@ -1,4 +1,4 @@
-import { convertToTexture, float, fract, length, screenUV, sin, smoothstep, vec2, vec3, vec4 } from "three/tsl";
+import { convertToTexture, float, fract, length, mix, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "CRTScreen",
 	category: "Stylize",
@@ -35,7 +35,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Scanline Intensity"
 			}
 		},
@@ -57,7 +57,7 @@ const componentDefinition = {
 				type: "range",
 				min: .5,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Brightness"
 			}
 		},
@@ -68,9 +68,31 @@ const componentDefinition = {
 				type: "range",
 				min: .5,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Contrast"
 			}
+		},
+		vignetteIntensity: {
+			default: 1,
+			description: "Strength of corner darkening effect (0 = off)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .1,
+				label: "Vignette Intensity"
+			}
+		},
+		vignetteRadius: {
+			default: .5,
+			description: "How far the vignette extends inward (0 = edges only, 1 = reaches center)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .1,
+				label: "Vignette Radius"
+			}
 		}
 	},
 	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
@@ -102,8 +124,14 @@ const componentDefinition = {
 		const greenMask = sin(pixelPhase.x.mul(float(6.28318)).add(float(2.09))).mul(float(.1)).add(float(.95));
 		const blueMask = sin(pixelPhase.x.mul(float(6.28318)).add(float(4.18))).mul(float(.1)).add(float(.95));
 		const phosphorColor = vec3(scanlinedColor.r.mul(redMask), scanlinedColor.g.mul(greenMask), scanlinedColor.b.mul(blueMask));
-		const vignetteDistance = length(screenUV.sub(vec2(.5, .5)));
-		const vignette = smoothstep(float(.8), float(.3), vignetteDistance);
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const centeredUV = screenUV.sub(vec2(.5, .5));
+		const vignetteDistance = length(vec2(centeredUV.x.mul(aspect), centeredUV.y));
+		const vignetteRadiusProp = uniforms.vignetteRadius.uniform;
+		const vignetteIntensity = uniforms.vignetteIntensity.uniform;
+		const innerEdge = float(1).sub(vignetteRadiusProp.mul(float(.9)));
+		const vignetteValue = smoothstep(innerEdge.add(float(.5)), innerEdge, vignetteDistance);
+		const vignette = mix(float(1), vignetteValue, vignetteIntensity);
 		return vec4(phosphorColor.mul(vignette), float(1));
 	}
 };

package/dist/core/{Checkerboard-D_hGvoO7.js → Checkerboard-DBcVaYQv.js}

@@ -42,7 +42,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Softness"
 			}
 		},
@@ -66,14 +66,11 @@ const componentDefinition = {
 		const gridUV = correctedUV.mul(cells);
 		const gridCoords = floor(gridUV);
 		const checkerValue = mod(gridCoords.x.add(gridCoords.y), 2);
-		let blendFactor = checkerValue;
-		if (softness) {
-			const cellUV = fract(gridUV);
-			const distToEdge = min(min(cellUV.x, float(1).sub(cellUV.x)), min(cellUV.y, float(1).sub(cellUV.y)));
-			const softRange = softness.mul(.5);
-			const edgeBlend = smoothstep(float(0), softRange, distToEdge);
-			blendFactor = checkerValue.mul(edgeBlend).add(float(.5).mul(float(1).sub(edgeBlend)));
-		}
+		const cellUV = fract(gridUV);
+		const distToEdge = min(min(cellUV.x, float(1).sub(cellUV.x)), min(cellUV.y, float(1).sub(cellUV.y)));
+		const softRange = softness.mul(.5).add(1e-4);
+		const edgeBlend = smoothstep(float(0), softRange, distToEdge);
+		const blendFactor = checkerValue.mul(edgeBlend).add(float(.5).mul(float(1).sub(edgeBlend)));
 		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, blendFactor, uniforms.colorSpace.uniform);
 	}
 };

package/dist/core/{ChromaFlow-DizYQSgf.js → ChromaFlow-DcqnZ1wf.js}

@@ -63,13 +63,13 @@ const componentDefinition = {
 			}
 		},
 		radius: {
-			default: 2,
+			default: 1.5,
 			description: "Radius of the liquid effect",
 			ui: {
 				type: "range",
 				min: 0,
 				max: 3,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},
@@ -85,7 +85,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragmentNode: ({ uniforms, onBeforeRender, onCleanup }) => {
+	fragmentNode: ({ uniforms, onBeforeRender, onCleanup, dimensions }) => {
 		const GRID_SIZE = 128;
 		const displacementData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
 		const liquidData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
@@ -112,6 +112,7 @@ const componentDefinition = {
 			const currentTime = Date.now();
 			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 			lastTime = currentTime;
+			const aspect = dimensions.width / 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;
@@ -153,7 +154,7 @@ const componentDefinition = {
 				const idx = (i * GRID_SIZE + j) * 2;
 				const cellX = (j + .5) / GRID_SIZE;
 				const cellY = (i + .5) / GRID_SIZE;
-				const dx = cellX - pointer.x;
+				const dx = (cellX - pointer.x) / aspect;
 				const dy = cellY - pointer.y;
 				const dist = Math.sqrt(dx * dx + dy * dy);
 				const speed = Math.sqrt(mouseVelX.value * mouseVelX.value + mouseVelY.value * mouseVelY.value);

package/dist/core/{ChromaticAberration-Bk_DMYJm.js → ChromaticAberration-Dgf83J6w.js}

@@ -1,5 +1,5 @@
 import { n as transformAngle } from "./transformations-YbhRK-rd.js";
-import { convertToTexture, cos, radians, screenUV, sin, vec2, vec4 } from "three/tsl";
+import { convertToTexture, cos, radians, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ChromaticAberration",
 	category: "Stylize",
@@ -14,7 +14,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Strength"
 			}
 		},
@@ -71,7 +71,8 @@ const componentDefinition = {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
 		const angleRad = radians(uniforms.angle.uniform);
-		const direction = vec2(cos(angleRad), sin(angleRad));
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const direction = vec2(cos(angleRad).div(aspect), sin(angleRad));
 		const scaledStrength = uniforms.strength.uniform.mul(.1);
 		const redUV = screenUV.add(direction.mul(scaledStrength).mul(uniforms.redOffset.uniform));
 		const greenUV = screenUV.add(direction.mul(scaledStrength).mul(uniforms.greenOffset.uniform));

package/dist/core/{Circle-BlVzkeyl.js → Circle-BWd84W7f.js}

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

package/dist/core/{CursorTrail-CxXWV7KH.js → CursorTrail-BKfdORYc.js}

@@ -32,7 +32,7 @@ const componentDefinition = {
 				type: "range",
 				min: .5,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Radius"
 			}
 		},
@@ -54,7 +54,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Shrink Amount"
 			}
 		},
@@ -69,7 +69,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragmentNode: ({ uniforms, onBeforeRender, onCleanup }) => {
+	fragmentNode: ({ uniforms, onBeforeRender, onCleanup, dimensions }) => {
 		const GRID_SIZE = 128;
 		const trailData = new Float32Array(GRID_SIZE * GRID_SIZE * 4);
 		const trailTexture = new DataTexture(trailData, GRID_SIZE, GRID_SIZE, RGBAFormat, FloatType);
@@ -84,6 +84,7 @@ const componentDefinition = {
 			const currentTime = Date.now();
 			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 			lastTime = currentTime;
+			const aspect = dimensions.width / dimensions.height;
 			const radius = uniforms.radius.uniform.value * .1;
 			const length$1 = uniforms.length.uniform.value;
 			const shrink = uniforms.shrink.uniform.value;
@@ -107,7 +108,7 @@ const componentDefinition = {
 					const idx = (i * GRID_SIZE + j) * 4;
 					const cellX = (j + .5) / GRID_SIZE;
 					const cellY = (i + .5) / GRID_SIZE;
-					const cellDx = cellX - pointer.x;
+					const cellDx = (cellX - pointer.x) / aspect;
 					const cellDy = cellY - pointer.y;
 					const dist = Math.sqrt(cellDx * cellDx + cellDy * cellDy);
 					if (dist < influenceRadius) {

package/dist/core/{Dither-C1KyBYuE.js → Dither-DWoCLL0e.js}

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

package/dist/core/{DotGrid-ll8XCA0p.js → DotGrid-BZVfqUZO.js}

@@ -32,7 +32,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Dot Size"
 			}
 		},
@@ -43,7 +43,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Twinkle"
 			}
 		}

package/dist/core/{Duotone-d2gQJr4M.js → Duotone-sjvdZBlx.js}

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

package/dist/core/{FilmGrain-3h6TIe1T.js → FilmGrain-Cr3qP38A.js}

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

package/dist/core/{FloatingParticles-D95-rj4h.js → FloatingParticles-CPsVFZJl.js}

@@ -33,7 +33,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Randomness"
 			}
 		},
@@ -44,7 +44,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Speed"
 			}
 		},
@@ -77,7 +77,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 5,
-				step: .01,
+				step: .1,
 				label: "Particle Softness"
 			}
 		},
@@ -88,7 +88,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Twinkle"
 			}
 		},
@@ -119,7 +119,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Speed Variance"
 			}
 		},

package/dist/core/{GlassTiles-DqT67iqr.js → GlassTiles-C6LLjlnB.js}

@@ -1,4 +1,4 @@
-import { add, convertToTexture, cos, div, floor, mul, screenUV, sin, sub, uniform, vec2, vec4 } from "three/tsl";
+import { add, convertToTexture, cos, div, float, floor, mul, screenUV, sin, sub, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "GlassTiles",
 	category: "Distortions",
@@ -19,7 +19,7 @@ const componentDefinition = {
 		},
 		tileCount: {
 			default: 20,
-			description: "Number of tiles across the shortest dimension",
+			description: "Number of tiles across the longest dimension",
 			ui: {
 				type: "range",
 				min: 5,
@@ -46,12 +46,12 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Roundness"
 			}
 		}
 	},
-	fragmentNode: ({ uniforms, childNode, dimensions, onCleanup }) => {
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
 		if (!childNode) {
 			console.error("You must pass a child component into the Glass Tiles shader.");
 			return vec4(0);
@@ -60,13 +60,14 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (texture$1?.renderTarget?.dispose) texture$1.renderTarget.dispose();
 		});
-		const aspectRatioUniform = uniform(dimensions.width / dimensions.height);
+		const aspectRatioUniform = viewportSize.x.div(viewportSize.y);
 		const baseUV = screenUV;
 		const intensity = uniforms.intensity.uniform;
 		const baseTileCount = uniforms.tileCount.uniform;
 		const rotationDegrees = uniforms.rotation.uniform;
 		const roundnessAmount = uniforms.roundness.uniform;
-		const tileCount = vec2(aspectRatioUniform.greaterThanEqual(1).select(mul(baseTileCount, aspectRatioUniform), baseTileCount), aspectRatioUniform.lessThan(1).select(div(baseTileCount, aspectRatioUniform), baseTileCount));
+		const isWide = aspectRatioUniform.greaterThan(float(1));
+		const tileCount = vec2(isWide.select(baseTileCount, mul(baseTileCount, aspectRatioUniform)), isWide.select(div(baseTileCount, aspectRatioUniform), baseTileCount));
 		const aspectCorrectedUV = vec2(mul(baseUV.x, aspectRatioUniform), baseUV.y);
 		const rotationRadians = mul(rotationDegrees, Math.PI / 180);
 		const cosAngle = cos(rotationRadians);
@@ -76,7 +77,8 @@ const componentDefinition = {
 		const gridUV = vec2(div(rotatedUV.x, aspectRatioUniform), rotatedUV.y);
 		const fromCenter = sub(div(sub(gridUV, div(floor(mul(gridUV, tileCount)), tileCount)), div(vec2(1), tileCount)), vec2(.5, .5));
 		const clampedRoundness = sub(1, mul(mul(fromCenter.x, fromCenter.x).add(mul(fromCenter.y, fromCenter.y)), mul(roundnessAmount, 4))).max(0);
-		const distortedUV = add(baseUV, mul(fromCenter, mul(mul(intensity, .025), clampedRoundness)));
+		const baseDistortion = mul(fromCenter, mul(mul(intensity, .025), clampedRoundness));
+		const distortedUV = add(baseUV, vec2(div(baseDistortion.x, aspectRatioUniform), baseDistortion.y));
 		return vec4(texture$1.sample(distortedUV));
 	}
 };

package/dist/core/{Glow-BYNKuw0E.js → Glow-C2avDr73.js}

@@ -13,7 +13,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 10,
-				step: .01,
+				step: .1,
 				label: "Intensity"
 			}
 		},
@@ -24,7 +24,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Threshold"
 			}
 		},
@@ -35,7 +35,7 @@ const componentDefinition = {
 				type: "range",
 				min: 1,
 				max: 20,
-				step: .01,
+				step: .1,
 				label: "Glow Size"
 			}
 		}

package/dist/core/{Godrays-DCk1c8sQ.js → Godrays-RVh5ylQ-.js}

@@ -1,6 +1,6 @@
 import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
-import { Fn, PI, abs, atan, clamp, float, length, mix, pow, screenUV, sin, smoothstep, vec2, vec4 } from "three/tsl";
+import { Fn, PI, abs, atan, clamp, float, length, mix, pow, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Godrays",
 	category: "Base Layers",
@@ -26,7 +26,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Density"
 			}
 		},
@@ -37,7 +37,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Intensity"
 			}
 		},
@@ -48,7 +48,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .01,
+				step: .1,
 				label: "Spotty"
 			}
 		},
@@ -59,7 +59,7 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 2,
-				step: .01,
+				step: .1,
 				label: "Speed"
 			}
 		},
@@ -85,8 +85,10 @@ const componentDefinition = {
 	fragmentNode: (params) => {
 		const { uniforms } = params;
 		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
 		const centerPos = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
-		const shapeUV = uv$1.sub(centerPos);
+		const delta = uv$1.sub(centerPos);
+		const shapeUV = vec2(delta.x.mul(aspect), delta.y);
 		const valueNoise = Fn(([st]) => {
 			const i = st.floor();
 			const f = st.fract();