shaders 2.2.47 → 2.3.49

package/dist/core/{Grid-CdslWvoH.js → Grid-B6Hf5dZa.js}

@@ -1,8 +1,8 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 import { fract, fwidth, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Grid",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Simple grid lines pattern with adjustable thickness",
 	props: {
 		color: {
@@ -11,7 +11,8 @@ const componentDefinition = {
 			description: "The color of the grid lines",
 			ui: {
 				type: "color",
-				label: "Color"
+				label: "Color",
+				group: "Colors"
 			}
 		},
 		cells: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 				min: 1,
 				max: 50,
 				step: 1,
-				label: "Cells"
+				label: "Cells",
+				group: "Effect"
 			}
 		},
 		thickness: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Thickness"
+				label: "Thickness",
+				group: "Effect"
 			}
 		}
 	},
@@ -48,7 +51,7 @@ const componentDefinition = {
 		const distToLineX = gridFract.x.min(gridFract.x.oneMinus());
 		const distToLineY = gridFract.y.min(gridFract.y.oneMinus());
 		const pixelSize = fwidth(gridUV);
-		const gridMask = max(smoothstep(lineWidth.add(pixelSize.x), lineWidth, distToLineX), smoothstep(lineWidth.add(pixelSize.y), lineWidth, distToLineY));
+		const gridMask = max(smoothstep(lineWidth, lineWidth.add(pixelSize.x), distToLineX).oneMinus(), smoothstep(lineWidth, lineWidth.add(pixelSize.y), distToLineY).oneMinus());
 		return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(gridMask));
 	}
 };

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

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { convertToTexture, float, screenUV, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 var DEFAULT_GRID_SIZE = 20;
@@ -43,7 +43,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		decay: {
@@ -54,7 +55,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Decay"
+				label: "Decay",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -65,7 +67,8 @@ const componentDefinition = {
 				min: 0,
 				max: 3,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		gridSize: {
@@ -76,7 +79,8 @@ const componentDefinition = {
 				min: 8,
 				max: 128,
 				step: 1,
-				label: "Grid Size"
+				label: "Grid Size",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -103,7 +107,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},
@@ -132,8 +137,8 @@ const componentDefinition = {
 				displacementData[idx + 1] *= 1 - decay * dt;
 				const cellX = (j + .5) / GRID_SIZE;
 				const cellY = (i + .5) / GRID_SIZE;
-				const dx = (cellX - pointer.x) / aspect$1;
-				const dy = cellY - pointer.y;
+				const dx = aspect$1 >= 1 ? (cellX - pointer.x) * aspect$1 : cellX - pointer.x;
+				const dy = aspect$1 >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect$1;
 				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));

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

@@ -1,4 +1,4 @@
-import { n as transformAngle } from "./transformations-YbhRK-rd.js";
+import { n as transformAngle } from "./transformations-CC_c-QAT.js";
 import { cos, dot, fract, length, radians, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Halftone",
@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 10,
 				max: 300,
 				step: 1,
-				label: "Frequency"
+				label: "Frequency",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -26,7 +27,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		smoothness: {
@@ -37,7 +39,8 @@ const componentDefinition = {
 				min: 0,
 				max: .3,
 				step: .1,
-				label: "Smoothness"
+				label: "Smoothness",
+				group: "Effect"
 			}
 		}
 	},
@@ -56,7 +59,7 @@ const componentDefinition = {
 		const originalColor = childNode;
 		const dotSize = dot(originalColor.rgb, vec3(.299, .587, .114)).mul(.7).add(.15);
 		const dist = length(gridUV);
-		const dotPattern = smoothstep(dotSize.add(smoothness), dotSize.sub(smoothness), dist);
+		const dotPattern = smoothstep(dotSize.sub(smoothness), dotSize.add(smoothness), dist).oneMinus();
 		return vec4(originalColor.rgb.mul(dotPattern), originalColor.a.mul(dotPattern));
 	}
 };

package/dist/core/{HueShift-DQ2WgImx.js → HueShift-C4E-S49G.js}

@@ -12,7 +12,8 @@ const componentDefinition = {
 			min: -180,
 			max: 180,
 			step: 1,
-			label: "Shift"
+			label: "Shift",
+			group: "Appearance"
 		},
 		transform: (value) => value * Math.PI / 180
 	} },

package/dist/core/{ImageTexture-DKFb8ze3.js → ImageTexture-B40GVvXK.js}

@@ -2,7 +2,7 @@ import { SRGBColorSpace, Texture, TextureLoader } from "three/webgpu";
 import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ImageTexture",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Display an image with customizable object-fit modes",
 	props: {
 		url: {
@@ -10,7 +10,8 @@ const componentDefinition = {
 			description: "Upload an image or provide a URL",
 			ui: {
 				type: "image-upload",
-				label: "Image"
+				label: "Image",
+				group: "Media"
 			}
 		},
 		objectFit: {
@@ -49,7 +50,8 @@ const componentDefinition = {
 						value: "none"
 					}
 				],
-				label: "Object Fit"
+				label: "Object Fit",
+				group: "Appearance"
 			}
 		}
 	},

package/dist/core/{Kaleidoscope-3Kt0m_sh.js → Kaleidoscope-BO3WUc5P.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { atan2, convertToTexture, cos, float, length, mod, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Kaleidoscope",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point of the kaleidoscope effect",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		segments: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: 2,
 				max: 24,
 				step: 1,
-				label: "Segments"
+				label: "Segments",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -66,7 +69,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/LensFlare-BoaXy9ZE.js

@@ -0,0 +1,371 @@
+import { s as transformPosition } from "./transformations-CC_c-QAT.js";
+import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
+import { Fn, abs, atan2, clamp, cos, dot, float, max, mix, pow, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var spectralColor = Fn(([t]) => {
+	const TAU = float(6.2831853);
+	return vec3(cos(TAU.mul(t)).mul(.5).add(.5), cos(TAU.mul(t.sub(.333))).mul(.5).add(.5), cos(TAU.mul(t.sub(.666))).mul(.5).add(.5));
+});
+const componentDefinition = {
+	name: "LensFlare",
+	category: "Stylize",
+	description: "Realistic camera lens flare with artifacts.",
+	props: {
+		lightPosition: {
+			default: {
+				x: .3,
+				y: .3
+			},
+			transform: transformPosition,
+			description: "Position of the light source",
+			ui: {
+				type: "position",
+				label: "Light Position",
+				group: "Light"
+			}
+		},
+		intensity: {
+			default: .5,
+			description: "Master brightness of the entire lens flare effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Intensity",
+				group: "Light"
+			}
+		},
+		ghostIntensity: {
+			default: .4,
+			description: "Brightness of internal reflection ghost discs along the flare axis",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Ghosts",
+				group: "Reflections"
+			}
+		},
+		ghostSpread: {
+			default: .7,
+			description: "Spacing between ghost reflections along the flare axis",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 2,
+				step: .01,
+				label: "Ghost Spread",
+				group: "Reflections"
+			}
+		},
+		ghostChroma: {
+			default: .3,
+			description: "Rainbow chromatic fringing around ghost element edges",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Ghost Chroma",
+				group: "Reflections"
+			}
+		},
+		haloIntensity: {
+			default: .4,
+			description: "Brightness of the circular halo ring from internal reflection",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Halo",
+				group: "Reflections"
+			}
+		},
+		haloRadius: {
+			default: .6,
+			description: "Radius of the halo ring",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 1,
+				step: .01,
+				label: "Halo Size",
+				group: "Reflections"
+			}
+		},
+		haloChroma: {
+			default: .6,
+			description: "Spectral dispersion on the halo creating rainbow color separation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Halo Chroma",
+				group: "Reflections"
+			}
+		},
+		haloSoftness: {
+			default: .8,
+			description: "Thickness and softness of the halo ring",
+			ui: {
+				type: "range",
+				min: .01,
+				max: 3,
+				step: .01,
+				label: "Halo Softness",
+				group: "Reflections"
+			}
+		},
+		starburstIntensity: {
+			default: .3,
+			description: "Brightness of diffraction spikes radiating from the light source",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Starburst",
+				group: "Effects"
+			}
+		},
+		starburstPoints: {
+			default: 6,
+			description: "Number of starburst spikes (simulates aperture blade count)",
+			ui: {
+				type: "range",
+				min: 4,
+				max: 16,
+				step: 1,
+				label: "Blades",
+				group: "Effects"
+			}
+		},
+		streakIntensity: {
+			default: .15,
+			description: "Brightness of horizontal anamorphic light streak",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Streak",
+				group: "Effects"
+			}
+		},
+		streakLength: {
+			default: .5,
+			description: "Horizontal extent of the anamorphic streak",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 1,
+				step: .01,
+				label: "Streak Length",
+				group: "Effects"
+			}
+		},
+		glareIntensity: {
+			default: .2,
+			description: "Soft veiling glare that washes out contrast around the light",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Glare",
+				group: "Effects"
+			}
+		},
+		glareSize: {
+			default: .5,
+			description: "Size of the soft glare glow",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 1,
+				step: .01,
+				label: "Glare Size",
+				group: "Effects"
+			}
+		},
+		edgeFade: {
+			default: .2,
+			description: "How much the flare fades when the light source is near the screen edge (0 = no fade, 1 = heavy fade)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Edge Fade",
+				group: "Light"
+			}
+		},
+		speed: {
+			default: .5,
+			description: "Speed of subtle flare shimmer and starburst rotation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .1,
+				label: "Speed",
+				group: "Animation"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms } = params;
+		const uIntensity = uniforms.intensity.uniform;
+		const uGhostInt = uniforms.ghostIntensity.uniform;
+		const uGhostSpread = uniforms.ghostSpread.uniform;
+		const uGhostChroma = uniforms.ghostChroma.uniform;
+		const uHaloInt = uniforms.haloIntensity.uniform;
+		const uHaloRad = uniforms.haloRadius.uniform;
+		const uHaloChroma = uniforms.haloChroma.uniform;
+		const uHaloSoft = uniforms.haloSoftness.uniform;
+		const uStarburstInt = uniforms.starburstIntensity.uniform;
+		const uStarburstPts = uniforms.starburstPoints.uniform;
+		const uStreakInt = uniforms.streakIntensity.uniform;
+		const uStreakLen = uniforms.streakLength.uniform;
+		const uGlareInt = uniforms.glareIntensity.uniform;
+		const uGlareSz = uniforms.glareSize.uniform;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const uv$1 = screenUV;
+		const lightPos = vec2(uniforms.lightPosition.uniform.x, uniforms.lightPosition.uniform.y.oneMinus());
+		const flareAxis = vec2(.5, .5).sub(lightPos);
+		const t = createAnimatedTime(params, uniforms.speed);
+		const shimmer = sin(t.mul(3.7)).mul(.04).add(sin(t.mul(7.3)).mul(.03)).add(sin(t.mul(13.1)).mul(.02)).add(.97);
+		const uEdgeFade = uniforms.edgeFade.uniform;
+		const edgeDist = max(abs(lightPos.x.sub(.5)).mul(2), abs(lightPos.y.sub(.5)).mul(2));
+		const fadeStart = float(1).sub(uEdgeFade.mul(.5));
+		const edgeFade = mix(float(1), smoothstep(fadeStart, float(1), edgeDist).oneMinus(), uEdgeFade);
+		const masterFade = uIntensity.mul(edgeFade).mul(shimmer);
+		const toLightAR = vec2(uv$1.x.sub(lightPos.x).mul(aspect), uv$1.y.sub(lightPos.y));
+		const lightDist = toLightAR.length();
+		const ghostConfigs = [
+			{
+				offset: .15,
+				size: .2,
+				bright: .3,
+				hollow: .1,
+				r: 1,
+				g: .95,
+				b: .9
+			},
+			{
+				offset: .3,
+				size: .12,
+				bright: .25,
+				hollow: .65,
+				r: 1,
+				g: .85,
+				b: .55
+			},
+			{
+				offset: .5,
+				size: .08,
+				bright: .35,
+				hollow: .15,
+				r: .62,
+				g: .82,
+				b: 1
+			},
+			{
+				offset: .72,
+				size: .14,
+				bright: .18,
+				hollow: .75,
+				r: .75,
+				g: 1,
+				b: .7
+			},
+			{
+				offset: .95,
+				size: .06,
+				bright: .3,
+				hollow: 0,
+				r: 1,
+				g: .6,
+				b: .85
+			},
+			{
+				offset: 1.25,
+				size: .1,
+				bright: .15,
+				hollow: .8,
+				r: .55,
+				g: .88,
+				b: 1
+			},
+			{
+				offset: 1.55,
+				size: .07,
+				bright: .2,
+				hollow: .25,
+				r: 1,
+				g: .92,
+				b: .6
+			}
+		];
+		let ghostAccum = vec3(0, 0, 0);
+		for (let i = 0; i < ghostConfigs.length; i++) {
+			const cfg = ghostConfigs[i];
+			const ghostPos = lightPos.add(flareAxis.mul(float(cfg.offset).mul(uGhostSpread).mul(2)));
+			const dist = vec2(uv$1.x.sub(ghostPos.x).mul(aspect), uv$1.y.sub(ghostPos.y)).length();
+			const sz = float(cfg.size);
+			const disc = smoothstep(sz.mul(.12), sz, dist).oneMinus();
+			const innerFade = smoothstep(sz.mul(.05), sz.mul(.45), dist).oneMinus();
+			const shape = disc.mul(float(1).sub(innerFade.mul(float(cfg.hollow))));
+			const gPhase = float(i * 2.17);
+			const gShimmer = sin(t.mul(4.3).add(gPhase)).mul(.08).add(sin(t.mul(9.1).add(gPhase.mul(1.7))).mul(.05)).add(.95);
+			const ringCenter = sz.mul(.78);
+			const chromaSpread = sz.mul(uGhostChroma).mul(.14);
+			const ringWidth = sz.mul(.1);
+			const rRing = smoothstep(float(0), ringWidth, abs(dist.sub(ringCenter.add(chromaSpread)))).oneMinus();
+			const gRing = smoothstep(float(0), ringWidth, abs(dist.sub(ringCenter))).oneMinus();
+			const bRing = smoothstep(float(0), ringWidth, abs(dist.sub(ringCenter.sub(chromaSpread)))).oneMinus();
+			const brightness = float(cfg.bright).mul(uGhostInt).mul(gShimmer);
+			const contribution = vec3(shape.mul(float(cfg.r)).add(rRing.mul(uGhostChroma)).mul(brightness), shape.mul(float(cfg.g)).add(gRing.mul(uGhostChroma)).mul(brightness), shape.mul(float(cfg.b)).add(bRing.mul(uGhostChroma)).mul(brightness));
+			ghostAccum = ghostAccum.add(contribution);
+		}
+		const antiLight = vec2(float(1).sub(lightPos.x), float(1).sub(lightPos.y));
+		const toAntiLight = vec2(uv$1.x.sub(antiLight.x).mul(aspect), uv$1.y.sub(antiLight.y));
+		const antiLightDist = toAntiLight.length();
+		const haloChromaSpread = uHaloRad.mul(uHaloChroma).mul(.06);
+		const haloWidth = uHaloSoft.mul(.12).add(.005);
+		const rHalo = smoothstep(float(0), haloWidth, abs(antiLightDist.sub(uHaloRad.add(haloChromaSpread)))).oneMinus();
+		const gHalo = smoothstep(float(0), haloWidth, abs(antiLightDist.sub(uHaloRad))).oneMinus();
+		const bHalo = smoothstep(float(0), haloWidth, abs(antiLightDist.sub(uHaloRad.sub(haloChromaSpread)))).oneMinus();
+		const haloAngVar = sin(atan2(toAntiLight.y, toAntiLight.x).mul(3).add(t.mul(.5))).mul(.12).add(.88);
+		const haloColor = vec3(rHalo, gHalo, bHalo).mul(uHaloInt).mul(haloAngVar);
+		const lightAngle = atan2(toLightAR.y, toLightAR.x);
+		const rotation = atan2(flareAxis.y, flareAxis.x.mul(aspect)).mul(.5).add(t.mul(.06));
+		const spikeAngle = lightAngle.add(rotation);
+		const primarySpikes = pow(abs(cos(spikeAngle.mul(uStarburstPts.div(2)))), float(3.5));
+		const secondarySpikes = pow(abs(cos(spikeAngle.add(.25).mul(uStarburstPts.div(2)))), float(7)).mul(.4);
+		const radialFall = float(1).div(float(1).add(lightDist.mul(lightDist).mul(60)));
+		const starSpectral = spectralColor(spikeAngle.div(float(6.2831853)).add(.5));
+		const starTint = mix(vec3(1, .97, .92), starSpectral, float(.12));
+		const starburstColor = primarySpikes.add(secondarySpikes).mul(radialFall).mul(uStarburstInt).mul(starTint);
+		const dy = abs(uv$1.y.sub(lightPos.y));
+		const dx = abs(uv$1.x.sub(lightPos.x));
+		const vertFall = float(-800).mul(dy).mul(dy).exp();
+		const lenSq = uStreakLen.mul(uStreakLen).mul(.25).add(.001);
+		const rStreak = float(-1).mul(dx).mul(dx).div(lenSq.mul(.7)).exp();
+		const gStreak = float(-1).mul(dx).mul(dx).div(lenSq).exp();
+		const bStreak = float(-1).mul(dx).mul(dx).div(lenSq.mul(1.4)).exp();
+		const streakColor = vec3(vertFall.mul(rStreak).mul(.5), vertFall.mul(gStreak).mul(.65), vertFall.mul(bStreak).mul(.9)).mul(uStreakInt);
+		const glareSharpness = float(1).div(uGlareSz.mul(uGlareSz).add(.01));
+		const glareColor = float(-1).mul(lightDist).mul(lightDist).mul(glareSharpness).exp().mul(uGlareInt).mul(vec3(1, .98, .95));
+		const coreSoft = float(-500).mul(lightDist).mul(lightDist).exp();
+		const coreSharp = smoothstep(float(0), float(.025), lightDist).oneMinus();
+		const coreColor = coreSoft.add(coreSharp.mul(1.5)).mul(vec3(1, .98, .96)).mul(uIntensity);
+		const finalColor = ghostAccum.add(haloColor).add(starburstColor).add(streakColor).add(glareColor).add(coreColor).mul(masterFade);
+		return vec4(finalColor, clamp(dot(finalColor, vec3(.299, .587, .114)).mul(2), 0, 1));
+	}
+};
+var LensFlare_default = componentDefinition;
+export { componentDefinition as n, LensFlare_default as t };

package/dist/core/{LinearBlur-B-rumcdD.js → LinearBlur-BHaYZoXd.js}

@@ -1,5 +1,11 @@
-import { n as transformAngle } from "./transformations-YbhRK-rd.js";
+import { n as transformAngle } from "./transformations-CC_c-QAT.js";
 import { Fn, convertToTexture, cos, float, radians, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
+var rawWeights = Array.from({ length: 32 }, (_, i) => {
+	const t = (i / 31 - .5) * 2;
+	return Math.exp(-.5 * t * t / .64);
+});
+var wSum = rawWeights.reduce((a, b) => a + b);
+var blurWeights = rawWeights.map((w) => w / wSum);
 const componentDefinition = {
 	name: "LinearBlur",
 	category: "Blurs",
@@ -15,7 +21,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -27,7 +34,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		}
 	},
@@ -42,19 +50,13 @@ const componentDefinition = {
 		const blurDirection = vec2(cos(angleRad).div(aspect), sin(angleRad));
 		return Fn(() => {
 			const uv$1 = screenUV;
-			const texel = vec2(1).div(viewportSize);
-			const blurVector = blurDirection.mul(uniforms.intensity.uniform).mul(texel).mul(2);
+			const blurVector = blurDirection.mul(uniforms.intensity.uniform).div(viewportSize).mul(2);
 			const total = vec4(0).toVar();
-			const totalWeight = float(0).toVar();
 			for (let i = 0; i < 32; i++) {
-				const t = float(i).div(float(31)).sub(.5).mul(2);
-				const weight = float(1).div(float(2.506628)).mul(float(-.5).mul(t).mul(t).div(float(.64)).exp());
-				const coord = uv$1.add(blurVector.mul(t.mul(.5)));
-				const sample = childTexture.sample(coord).mul(weight);
-				total.assign(total.add(sample));
-				totalWeight.assign(totalWeight.add(weight));
+				const coord = uv$1.add(blurVector.mul(i / 31 - .5));
+				total.assign(total.add(childTexture.sample(coord).mul(float(blurWeights[i]))));
 			}
-			return total.div(totalWeight);
+			return total;
 		})();
 	}
 };