shaders 2.2.44 → 2.2.46

package/LICENSE

@@ -1,6 +1,6 @@
-Shader Effects License Agreement (v1.1)
+Shader Effects License Agreement (v1.2)
 
-Effective Date: October 14, 2025
+Effective Date: January 19, 2026
 Licensor: Shader Effects, Inc., a Delaware C-Corporation (“Shader Effects,” “we,” “us,” or “our”)
 Product: Shaders (including all npm packages, components, presets, generated code, and the design platform at shaders.com)
 
@@ -38,12 +38,23 @@ Use Shaders technology in SaaS products, design tools, or developer frameworks w
 
 Official open-source projects may use Shaders without a license key only for their promotional or documentation websites, provided Shaders is not a core or monetized part of the project.
 
-4. Telemetry and License Verification
+4. Telemetry and Privacy
 
-Shaders may automatically transmit limited, anonymous usage data to Shader Effects’ servers for the purposes of performance tracking, reliability improvement, and license compliance.
-This data does not include personal information, but may include information such as the domain name, environment type (development or production), and version identifiers to verify that a valid license is in use.
+Shaders may automatically collect and transmit limited, anonymous performance and usage data to Shader Effects' servers for the purposes of improving performance, reliability, and understanding how the library is used in production environments.
 
-By using Shaders, you consent to this limited data collection solely for these operational purposes.
+Data Collected:
+- Performance metrics (frame rate, render times, component usage)
+- Domain name where Shaders is deployed (e.g., "example.com", without URL paths)
+- Browser family (e.g., Chrome, Firefox, Safari)
+- Device type (mobile, tablet, or desktop)
+- Renderer type (WebGPU or WebGL)
+
+This data does not include personal information, IP addresses, user identifiers, or any data that can identify individual end users. Telemetry is sampled at a low rate (typically 1-5% of sessions) and respects Do Not Track browser settings.
+
+Opt-Out:
+You may disable telemetry collection entirely by setting the `disableTelemetry` prop on the Shader component or by configuring your environment to respect user privacy preferences. Even when enabled, telemetry will not collect data from users with Do Not Track enabled in their browser.
+
+By using Shaders, you acknowledge and consent to this limited data collection solely for these operational purposes.
 
 5. Right to Promote Usage
 

package/README.md

@@ -1,73 +1,17 @@
 # Shaders
 
-## 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>
+  <a href="https://twitter.com/intent/user?screen_name=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>
-```
+## Shader Magic for Modern Frontends
 
-</details>
+Shaders is the component system for creative WebGPU effects in the browser. It's available as component libraries for Vue / Nuxt, React / Next, Svelte & Solid. 
 
 **Learn more and try the Design Editor at https://shaders.com**
 
@@ -75,6 +19,6 @@ npm install shaders
 
 Shaders © Shader Effects, Inc.
 
-Licensed under the Shader Effects License Agreement (v1.1).
+Licensed under the [Shader Effects License Agreement](./LICENSE).
 You may use Shaders freely for non-production or educational use.
 A valid paid license is required for production deployment.

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));
 	}
 };