shaders 2.2.47 → 2.3.49

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

@@ -1,4 +1,4 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.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]) => {
@@ -22,7 +22,7 @@ var getParticleDistance = Fn(([uv$1, cellUV, randomness]) => {
 });
 const componentDefinition = {
 	name: "FloatingParticles",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Animated floating particles with twinkle effects",
 	requiresRTT: false,
 	props: {
@@ -34,7 +34,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Randomness"
+				label: "Randomness",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -45,7 +46,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		angle: {
@@ -56,7 +58,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Animation"
 			}
 		},
 		particleSize: {
@@ -67,7 +70,8 @@ const componentDefinition = {
 				min: .1,
 				max: 20,
 				step: .1,
-				label: "Particle Size"
+				label: "Particle Size",
+				group: "Effect"
 			}
 		},
 		particleSoftness: {
@@ -78,7 +82,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Particle Softness"
+				label: "Particle Softness",
+				group: "Effect"
 			}
 		},
 		twinkle: {
@@ -89,7 +94,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Twinkle"
+				label: "Twinkle",
+				group: "Animation"
 			}
 		},
 		count: {
@@ -100,7 +106,8 @@ const componentDefinition = {
 				min: 1,
 				max: 5,
 				step: 1,
-				label: "Count"
+				label: "Count",
+				group: "Effect"
 			}
 		},
 		particleColor: {
@@ -109,7 +116,8 @@ const componentDefinition = {
 			description: "Color of the particles",
 			ui: {
 				type: "color",
-				label: "Particle Color"
+				label: "Particle Color",
+				group: "Colors"
 			}
 		},
 		speedVariance: {
@@ -120,7 +128,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Speed Variance"
+				label: "Speed Variance",
+				group: "Animation"
 			}
 		},
 		angleVariance: {
@@ -131,7 +140,8 @@ const componentDefinition = {
 				min: 0,
 				max: 180,
 				step: 1,
-				label: "Angle Variance"
+				label: "Angle Variance",
+				group: "Animation"
 			}
 		},
 		particleDensity: {
@@ -142,7 +152,8 @@ const componentDefinition = {
 				min: .5,
 				max: 3,
 				step: .1,
-				label: "Particle Density"
+				label: "Particle Density",
+				group: "Effect"
 			}
 		}
 	},
@@ -170,7 +181,7 @@ const componentDefinition = {
 			minDist = checkRight.select(min(minDist, getParticleDistance(uv$2, rootUV.add(vec2(1, 0)), uniforms.randomness.uniform)), minDist);
 			minDist = checkTop.select(min(minDist, getParticleDistance(uv$2, rootUV.add(vec2(0, -1)), uniforms.randomness.uniform)), minDist);
 			minDist = checkBottom.select(min(minDist, getParticleDistance(uv$2, rootUV.add(vec2(0, 1)), uniforms.randomness.uniform)), minDist);
-			const baseIntensity = smoothstep(outerRadius, scaledSize.mul(.6), minDist);
+			const baseIntensity = smoothstep(scaledSize.mul(.6), outerRadius, minDist).oneMinus();
 			const twinkleIntensity = uniforms.twinkle.uniform;
 			const particlePhase = rootUV.x.mul(12.9898).add(rootUV.y.mul(78.233)).sin().mul(43758.5453).fract();
 			const twinkleValue = sin(time.mul(2).add(particlePhase.mul(6.28318))).mul(.5).add(.5);

package/dist/core/FlowField-BZ-ZbMzR.js

@@ -0,0 +1,107 @@
+import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
+import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
+import { convertToTexture, cos, float, length, max, mx_noise_float, screenUV, sin, vec2, vec3, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "FlowField",
+	category: "Distortions",
+	description: "Fluid-like distortion with constant smooth motion",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		strength: {
+			default: .15,
+			description: "Intensity of the flow distortion",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .5,
+				step: .05,
+				label: "Strength",
+				group: "Effect"
+			}
+		},
+		detail: {
+			default: 2,
+			description: "Scale of the flow patterns",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 5,
+				step: .1,
+				label: "Detail",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: 1,
+			description: "Speed of the flow",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		edges: {
+			default: "mirror",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			transform: transformEdges,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms, childNode, onCleanup } = params;
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const time$1 = createAnimatedTime(params, uniforms.speed).mul(.1);
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectCorrectedUV = vec2(screenUV.x.mul(aspect), screenUV.y);
+		const scale = uniforms.detail.uniform;
+		const strength = uniforms.strength.uniform;
+		const drift1 = time$1.mul(.7);
+		const angle1 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale).add(drift1.mul(.3)), aspectCorrectedUV.y.mul(scale).add(drift1.mul(.5)), drift1.mul(.2))).mul(Math.PI * 2);
+		const flow1 = vec2(cos(angle1), sin(angle1));
+		const drift2 = time$1.mul(.5);
+		const angle2 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale.mul(2.3)).add(drift2.mul(-.4)).add(173.5), aspectCorrectedUV.y.mul(scale.mul(2.3)).add(drift2.mul(.3)).add(291.7), drift2.mul(.15).add(50))).mul(Math.PI * 2);
+		const flow2 = vec2(cos(angle2), sin(angle2));
+		const drift3 = time$1.mul(.3);
+		const angle3 = mx_noise_float(vec3(aspectCorrectedUV.x.mul(scale.mul(4.7)).add(drift3.mul(.2)).add(527.3), aspectCorrectedUV.y.mul(scale.mul(4.7)).add(drift3.mul(-.6)).add(839.1), drift3.mul(.1).add(100))).mul(Math.PI * 2);
+		const flow3 = vec2(cos(angle3), sin(angle3));
+		const combinedFlow = flow1.add(flow2.mul(.5)).add(flow3.mul(.25));
+		const flowLength = max(length(combinedFlow), float(.001));
+		const normalizedFlow = combinedFlow.div(flowLength);
+		const finalFlow = vec2(normalizedFlow.x.mul(strength).div(aspect), normalizedFlow.y.mul(strength));
+		const distortedUV = vec2(screenUV.x.add(finalFlow.x), screenUV.y.add(finalFlow.y));
+		return applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform);
+	}
+};
+var FlowField_default = componentDefinition;
+export { componentDefinition as n, FlowField_default as t };

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

@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		tileCount: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 				min: 5,
 				max: 50,
 				step: 1,
-				label: "Tile Count"
+				label: "Tile Count",
+				group: "Effect"
 			}
 		},
 		rotation: {
@@ -36,7 +38,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Rotation"
+				label: "Rotation",
+				group: "Effect"
 			}
 		},
 		roundness: {
@@ -47,7 +50,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Roundness"
+				label: "Roundness",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/Glitch-DmF8pHjd.js

@@ -0,0 +1,168 @@
+import { Fn, abs, clamp, convertToTexture, float, floor, fract, mix, screenUV, sin, step, time, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var hash11 = Fn(([p]) => {
+	return fract(sin(p.mul(78.233)).mul(43758.5453));
+});
+const componentDefinition = {
+	name: "Glitch",
+	category: "Stylize",
+	description: "Digital glitch that melts pixels and distorts colors",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: .5,
+			description: "Overall glitch strength and frequency of glitch bursts",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Intensity",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: 1,
+			description: "How fast the glitch pattern evolves",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Effect"
+			}
+		},
+		rgbShift: {
+			default: 5,
+			description: "Amount of chromatic aberration (RGB channel splitting)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .5,
+				label: "RGB Shift",
+				group: "Effect"
+			}
+		},
+		blockDensity: {
+			default: 10,
+			description: "Base number of horizontal glitch bands",
+			ui: {
+				type: "range",
+				min: 2,
+				max: 50,
+				step: 1,
+				label: "Block Density",
+				group: "Effect"
+			}
+		},
+		colorBarIntensity: {
+			default: .2,
+			description: "Intensity of vivid neon color bar overlay in glitch regions",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Color Bars",
+				group: "Effect"
+			}
+		},
+		mirrorAmount: {
+			default: .3,
+			description: "Chance of glitch blocks showing mirrored/flipped content",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Mirror",
+				group: "Effect"
+			}
+		},
+		scanlineIntensity: {
+			default: .2,
+			description: "Visibility of CRT-style horizontal scanlines in distorted areas",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Scanlines",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const intensity = uniforms.intensity.uniform;
+		const speed = uniforms.speed.uniform;
+		const rgbShiftAmount = uniforms.rgbShift.uniform;
+		const blockDensity = uniforms.blockDensity.uniform;
+		const colorBarMix = uniforms.colorBarIntensity.uniform;
+		const mirrorChance = uniforms.mirrorAmount.uniform;
+		const scanlines = uniforms.scanlineIntensity.uniform;
+		const t = time.mul(speed);
+		const slowFrame = floor(t.mul(2.5));
+		const slowHash = hash11(slowFrame);
+		const slowPulse = slowHash.mul(slowHash).mul(slowHash);
+		const fastFrame = floor(t.mul(10));
+		const fastHash = hash11(fastFrame.add(73));
+		const fastPulse = fastHash.mul(fastHash);
+		const threshold = float(1).sub(intensity);
+		const majorBurst = step(threshold, slowPulse);
+		const minorFlicker = step(threshold.add(.15), fastPulse);
+		const glitchStrength = clamp(majorBurst.mul(.8).add(minorFlicker.mul(.4)), 0, 1).mul(intensity);
+		const bandY1 = floor(screenUV.y.mul(blockDensity));
+		const bandSeed1 = bandY1.mul(.37).add(slowFrame.mul(7.13));
+		const bandHash1 = hash11(bandSeed1);
+		const bandActive1 = step(float(1).sub(glitchStrength.mul(.5)), bandHash1);
+		const displace1 = hash11(bandSeed1.add(42)).sub(.5).mul(.25).mul(bandActive1);
+		const bandSeed2 = floor(screenUV.y.mul(blockDensity.mul(2))).mul(.53).add(fastFrame.mul(3.37));
+		const bandHash2 = hash11(bandSeed2);
+		const bandActive2 = step(float(1).sub(glitchStrength.mul(.7)), bandHash2);
+		const displace2 = hash11(bandSeed2.add(99)).sub(.5).mul(.12).mul(bandActive2);
+		const bandSeed3 = floor(screenUV.y.mul(blockDensity.mul(4))).mul(.71).add(fastFrame.mul(11.71));
+		const bandHash3 = hash11(bandSeed3);
+		const bandActive3 = step(float(1).sub(glitchStrength.mul(.9)), bandHash3);
+		const displace3 = hash11(bandSeed3.add(173)).sub(.5).mul(.05).mul(bandActive3);
+		const colX = floor(screenUV.x.mul(4));
+		const blockSeed = colX.mul(.41).add(bandY1.mul(.67)).add(slowFrame.mul(2.31));
+		const blockHash = hash11(blockSeed);
+		const blockActive = step(float(1).sub(glitchStrength.mul(.35)), blockHash);
+		const blockDisplace = hash11(blockSeed.add(77)).sub(.5).mul(.18).mul(blockActive);
+		const totalDisplaceX = displace1.add(displace2).add(displace3).add(blockDisplace);
+		const vertJitter = bandActive1.mul(hash11(bandSeed1.add(200)).sub(.5)).mul(.012);
+		const displacedUV = vec2(clamp(screenUV.x.add(totalDisplaceX.mul(glitchStrength)), 0, 1), clamp(screenUV.y.add(vertJitter.mul(glitchStrength)), 0, 1));
+		const mirrorSeed = colX.mul(.83).add(bandY1.mul(1.17)).add(slowFrame.mul(4.57));
+		const hMirrorHash = hash11(mirrorSeed);
+		const vMirrorHash = hash11(mirrorSeed.add(500));
+		const hMirrorActive = step(float(1).sub(mirrorChance.mul(glitchStrength)), hMirrorHash).mul(bandActive1);
+		const vMirrorActive = step(float(1).sub(mirrorChance.mul(glitchStrength).mul(.4)), vMirrorHash).mul(bandActive1);
+		const mirroredUV = vec2(mix(displacedUV.x, float(1).sub(displacedUV.x), hMirrorActive), mix(displacedUV.y, float(1).sub(displacedUV.y), vMirrorActive));
+		const rgbOffset = rgbShiftAmount.mul(.003).mul(glitchStrength.add(abs(totalDisplaceX).mul(2)));
+		const redUV = vec2(clamp(mirroredUV.x.add(rgbOffset), 0, 1), mirroredUV.y);
+		const blueUV = vec2(clamp(mirroredUV.x.sub(rgbOffset), 0, 1), mirroredUV.y);
+		const rSample = childTexture.sample(redUV).r;
+		const gSample = childTexture.sample(mirroredUV).g;
+		const bSample = childTexture.sample(blueUV).b;
+		const glitchedColor = vec3(rSample, gSample, bSample);
+		const fillStyleHash = hash11(blockSeed.add(555));
+		const barOffset = hash11(bandY1.add(slowFrame.mul(3.33)).add(333));
+		const barIndex = floor(fract(screenUV.x.mul(3).add(barOffset.mul(7))).mul(7));
+		const smpteColor = vec3(float(1).sub(step(float(2), barIndex)).add(step(float(4), barIndex).mul(float(1).sub(step(float(6), barIndex)))), float(1).sub(step(float(4), barIndex)), float(1).sub(step(float(.5), fract(barIndex.mul(.5)))));
+		const sh6 = fract(hash11(bandY1.add(13)).mul(.8).add(slowFrame.mul(.07))).mul(6);
+		const withBars = mix(glitchedColor, mix(vec3(clamp(abs(sh6.sub(3)).sub(1), 0, 1), clamp(float(2).sub(abs(sh6.sub(2))), 0, 1), clamp(float(2).sub(abs(sh6.sub(4))), 0, 1)).mul(1.3), smpteColor, step(float(.5), fillStyleHash)), bandActive1.mul(blockActive).mul(colorBarMix).mul(glitchStrength));
+		const anyDistortion = clamp(bandActive1.add(bandActive2).add(bandActive3), 0, 1);
+		const scanlineWave = sin(screenUV.y.mul(viewportSize.y).mul(float(3.14159265))).mul(.5).add(.5);
+		const scanlineEffect = float(1).sub(scanlines.mul(scanlineWave).mul(.3).mul(anyDistortion));
+		return vec4(withBars.mul(scanlineEffect), float(1));
+	}
+};
+var Glitch_default = componentDefinition;
+export { componentDefinition as n, Glitch_default as t };

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

@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		threshold: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Threshold"
+				label: "Threshold",
+				group: "Effect"
 			}
 		},
 		size: {
@@ -36,7 +38,8 @@ const componentDefinition = {
 				min: 1,
 				max: 20,
 				step: .1,
-				label: "Glow Size"
+				label: "Glow Size",
+				group: "Effect"
 			}
 		}
 	},
@@ -47,23 +50,53 @@ const componentDefinition = {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
 		const originalColor = childTexture.sample(screenUV);
-		const glowEffect = Fn(() => {
+		const weights = [
+			.056,
+			.135,
+			.278,
+			.487,
+			.726,
+			.923,
+			1,
+			.923,
+			.726,
+			.487,
+			.278,
+			.135,
+			.056
+		];
+		const weightSum = 6.214;
+		const horizontalTexture = convertToTexture(Fn(() => {
 			const blurRadius = uniforms.size.uniform;
 			const threshold = uniforms.threshold.uniform;
 			const pixelSize = vec2(1).div(viewportSize);
-			const blurredGlow = vec4(0, 0, 0, 0).toVar();
-			const radius = 5;
-			for (let dx = -radius; dx <= radius; dx++) for (let dy = -radius; dy <= radius; dy++) {
-				const offset = vec2(float(dx), float(dy)).mul(pixelSize).mul(blurRadius);
-				const sampleUV = screenUV.add(offset);
-				const sampleColor = childTexture.sample(sampleUV);
+			const total = vec4(0).toVar();
+			for (let x = -6; x <= 6; x++) {
+				const weight = float(weights[x + 6] / weightSum);
+				const offset = vec2(float(x), float(0)).mul(blurRadius).mul(pixelSize);
+				const sampleCoord = screenUV.add(offset);
+				const sampleColor = childTexture.sample(sampleCoord);
 				const luminance = dot(sampleColor.rgb, vec3(.299, .587, .114));
 				const brightnessMask = max(float(0), luminance.sub(threshold));
 				const brightColor = sampleColor.mul(brightnessMask);
-				blurredGlow.assign(blurredGlow.add(brightColor));
+				total.assign(total.add(brightColor.mul(weight)));
+			}
+			return total;
+		})());
+		onCleanup(() => {
+			if (horizontalTexture?.renderTarget?.dispose) horizontalTexture.renderTarget.dispose();
+		});
+		const glowEffect = Fn(() => {
+			const blurRadius = uniforms.size.uniform;
+			const pixelSize = vec2(1).div(viewportSize);
+			const total = vec4(0).toVar();
+			for (let y = -6; y <= 6; y++) {
+				const weight = float(weights[y + 6] / weightSum);
+				const offset = vec2(float(0), float(y)).mul(blurRadius).mul(pixelSize);
+				const sampleCoord = screenUV.add(offset);
+				total.assign(total.add(horizontalTexture.sample(sampleCoord).mul(weight)));
 			}
-			const totalSamples = float((radius * 2 + 1) * (radius * 2 + 1));
-			return blurredGlow.div(totalSamples);
+			return total;
 		})();
 		const intensity = uniforms.intensity.uniform;
 		const intensifiedGlow = glowEffect.mul(intensity);

package/dist/core/{Godrays-RVh5ylQ-.js → Godrays-DqB-88ds.js}

@@ -1,9 +1,9 @@
-import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 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",
+	category: "Textures",
 	description: "Volumetric light rays emanating from a point",
 	requiresRTT: false,
 	props: {
@@ -16,7 +16,8 @@ const componentDefinition = {
 			description: "The center point of the god rays",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		density: {
@@ -27,7 +28,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Density"
+				label: "Density",
+				group: "Effect"
 			}
 		},
 		intensity: {
@@ -38,7 +40,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		spotty: {
@@ -49,7 +52,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Spotty"
+				label: "Spotty",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -60,7 +64,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		rayColor: {
@@ -69,7 +74,8 @@ const componentDefinition = {
 			description: "Color of the light rays",
 			ui: {
 				type: "color",
-				label: "Ray Color"
+				label: "Ray Color",
+				group: "Colors"
 			}
 		},
 		backgroundColor: {
@@ -78,7 +84,8 @@ const componentDefinition = {
 			description: "Background color",
 			ui: {
 				type: "color",
-				label: "Background Color"
+				label: "Background Color",
+				group: "Colors"
 			}
 		}
 	},
@@ -102,12 +109,14 @@ const componentDefinition = {
 			const u = f.mul(f).mul(f.mul(-2).add(3));
 			return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
 		});
-		const raysShape = Fn(([uv$2, r, freq, intensity]) => {
-			const a = atan(uv$2.y, uv$2.x);
+		const angle = atan(shapeUV.y, shapeUV.x);
+		const angleWrapped = angle.mod(PI.mul(2));
+		const blendFactor = smoothstep(-.15, .15, shapeUV.x);
+		const raysShape = Fn(([a, aWrapped, blend, r, freq, intensity]) => {
 			const left = vec2(a.mul(freq), r);
-			const right = vec2(a.mod(PI.mul(2)).mul(freq), r);
+			const right = vec2(aWrapped.mul(freq), r);
 			const nLeft = pow(valueNoise(left), intensity);
-			return mix(pow(valueNoise(right), intensity), nLeft, smoothstep(-.15, .15, uv$2.x));
+			return mix(pow(valueNoise(right), intensity), nLeft, blend);
 		});
 		const animTime = createAnimatedTime(params, uniforms.speed).mul(.2);
 		const rayEffect = Fn(() => {
@@ -119,14 +128,14 @@ const componentDefinition = {
 			const r1 = radius.mul(1).sub(animTime.mul(3));
 			const r2 = radius.mul(.5).mul(float(1).add(spots)).sub(animTime.mul(2));
 			const f1 = density.mul(5);
-			const ray = raysShape(shapeUV, r1, f1, intensityCalc).toVar();
-			ray.assign(ray.mul(raysShape(shapeUV, r2, f1.mul(4), intensityCalc)));
+			const ray = raysShape(angle, angleWrapped, blendFactor, r1, f1, intensityCalc).toVar();
+			ray.assign(ray.mul(raysShape(angle, angleWrapped, blendFactor, r2, f1.mul(4), intensityCalc)));
 			accumRay.assign(accumRay.add(ray));
 			const r3 = radius.mul(1.4).sub(animTime.mul(2.5));
 			const r4 = radius.mul(.7).mul(float(1).add(spots)).sub(animTime.mul(1.8));
 			const f2 = density.mul(4.5);
-			const ray2 = raysShape(shapeUV, r3, f2, intensityCalc).toVar();
-			ray2.assign(ray2.mul(raysShape(shapeUV, r4, f2.mul(3.5), intensityCalc)));
+			const ray2 = raysShape(angle, angleWrapped, blendFactor, r3, f2, intensityCalc).toVar();
+			ray2.assign(ray2.mul(raysShape(angle, angleWrapped, blendFactor, r4, f2.mul(3.5), intensityCalc)));
 			accumRay.assign(accumRay.add(ray2.mul(.7)));
 			return clamp(accumRay, 0, 1);
 		})();