shaders 2.2.47 → 2.3.49

package/LICENSE

@@ -1,6 +1,6 @@
-Shader Effects License Agreement (v1.2)
+Shader Effects License Agreement (v1.4)
 
-Effective Date: January 19, 2026
+Effective Date: February 8, 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)
 
@@ -16,9 +16,25 @@ Annual License: You may deploy any version of Shaders released during your activ
 
 Lifetime License: You may deploy all versions of Shaders released during the lifetime of the company and while the npm registry continues to host the licensed packages. Shader Effects makes no guarantee of ongoing updates, support, or compatibility beyond reasonable efforts to maintain them.
 
-Free use is permitted in non-production, educational, demonstration, or evaluation environments. A valid paid license is required for production deployment or any public or commercial use.
+Shaders is free to use in all environments, including production deployments and commercial projects. A Pro license unlocks additional features such as code export, Pro presets, priority support, and more.
 
-3. Prohibited Uses
+3. License Tiers and Benefits
+
+Free Tier: Shaders is free to use in all environments, including production deployments and commercial projects. Free users have access to the design editor, basic presets, and can install the npm package to use Shaders components in their projects.
+
+Pro Tier: A Pro subscription unlocks the following benefits:
+
+Code Export: Export clean, production-ready component code for Vue, React, Svelte, and other supported frameworks directly from the design editor.
+
+Pro Presets: Access to an exclusive library of premium, hand-crafted presets not available to free users.
+
+Discord Community Access: Receive a special role in the official Shaders Discord community with access to Pro-only channels.
+
+Priority Support: Prioritized assistance with technical questions and implementation guidance. Support is limited to answering questions about Shaders usage and troubleshooting. Direct code implementation, extended consulting, and hands-on project work require a separate support contract and may be available upon request for an additional fee.
+
+Pro benefits are tied to an active subscription. Upon expiration, access to Pro features (including code export and Pro presets) will be restricted, though previously exported code remains licensed per the terms in section 2.
+
+4. Prohibited Uses
 
 You may not:
 
@@ -26,7 +42,7 @@ Resell, sublicense, distribute, or repackage Shaders or its components as standa
 
 Use Shaders to create or power a competing tool, library, or service (including design editors, component libraries, visual-effect builders, or shader packs).
 
-Redistribute Shaders presets, effect registries, or exports derived directly from the Shaders Design Editor, except for modified or self-created effects.
+Redistribute Shaders presets (including modified versions of presets from the library) as downloadable files, preset libraries, or code packages. Using presets in your projects (including public websites and applications) is permitted; this restriction applies only to redistribution of the presets themselves.
 
 Modify or remove any copyright, trademark, or attribution notice (including “Powered by Shaders” references) contained within the code.
 
@@ -38,9 +54,9 @@ 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 Privacy
+5. Telemetry and Privacy
 
-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.
+Shaders may automatically collect and transmit limited, anonymous performance and usage data to Shader Effects' servers and third-party analytics services for the purposes of improving performance, reliability, and understanding how the library is used in production environments.
 
 Data Collected:
 - Performance metrics (frame rate, render times, component usage)
@@ -56,45 +72,45 @@ You may disable telemetry collection entirely by setting the `disableTelemetry`
 
 By using Shaders, you acknowledge and consent to this limited data collection solely for these operational purposes.
 
-5. Right to Promote Usage
+6. Right to Promote Usage
 
 Shader Effects reserves the right to publicly identify and promote organizations, products, or websites that use Shaders in production environments, provided no confidential information is disclosed and the representation is factual.
 
 Licensees may request in writing to opt out of promotional use of their name or logo, and Shader Effects will honor such requests within a reasonable timeframe.
 
-6. Intellectual Property
+7. Intellectual Property
 
 All rights, title, and interest in Shaders—including but not limited to source code, design assets, presets, shaders, and trademarks—remain the exclusive property of Shader Effects, Inc.
 Licensees retain ownership of their implementation and integration code, but such work is considered derivative and remains subject to this Agreement.
 
 No ownership or IP rights are transferred under this Agreement. You may not claim or register any intellectual property derived from Shaders.
 
-7. License Compliance and Revocation
+8. License Compliance and Revocation
 
 Shader Effects reserves the right to audit compliance and revoke, suspend, or deactivate licenses upon evidence of misuse, redistribution, or breach of this Agreement. Upon termination, you must immediately stop deploying or distributing Shaders in any production environment.
 
-8. Disclaimer of Warranties
+9. Disclaimer of Warranties
 
 SHADERS AND ALL ASSOCIATED COMPONENTS ARE PROVIDED “AS IS,” WITHOUT ANY WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR CONTINUOUS AVAILABILITY.
 
 Shader Effects makes no guarantee of uninterrupted access to npm packages, shaders.com, or hosted resources, and assumes no responsibility for maintaining historical versions beyond reasonable efforts.
 
-9. Limitation of Liability
+10. Limitation of Liability
 
 TO THE MAXIMUM EXTENT PERMITTED BY LAW, SHADER EFFECTS, INC. SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO LOSS OF PROFITS, DATA, BUSINESS INTERRUPTION, OR DAMAGES ARISING FROM THE USE OR INABILITY TO USE SHADERS.
 
 Shader Effects’ total liability under this Agreement shall not exceed the total fees paid by Licensee for the applicable license.
 
-10. Governing Law and Venue
+11. Governing Law and Venue
 
 This Agreement shall be governed by and construed in accordance with the laws of the State of Delaware and, where applicable, the State of Florida, without regard to conflict of law principles.
 Any dispute arising from or relating to this Agreement shall be resolved exclusively in the state or federal courts located in either Delaware or Florida, and each party irrevocably consents to the jurisdiction of those courts.
 
-11. Entire Agreement
+12. Entire Agreement
 
 This Agreement constitutes the entire understanding between Licensee and Shader Effects, Inc. regarding the use of Shaders and supersedes all prior agreements or understandings. Shader Effects reserves the right to update this Agreement, and continued use of Shaders constitutes acceptance of the latest version.
 
-12. Contact
+13. Contact
 
 Shader Effects, Inc.
 https://shaders.com

package/README.md

@@ -1,6 +1,6 @@
 # Shaders
 
-<img alt="image" src="https://shaders.com/og.png" />
+<img alt="image" src="https://shaders.com/og.jpg" />
 
 <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>
@@ -20,5 +20,4 @@ Shaders is the component system for creative WebGPU effects in the browser. It's
 Shaders © Shader Effects, Inc.
 
 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.
+You may use Shaders freely for personal or production usage, but redistribution, creating competing tools, SaaS use without an OEM agreement, and publishing exported code as public libraries are prohibited (see [LICENSE](./LICENSE) Section 4 for full terms).

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

@@ -1,5 +1,11 @@
-import { s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { Fn, convertToTexture, cos, float, 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: "AngularBlur",
 	category: "Blurs",
@@ -15,7 +21,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Blur Intensity"
+				label: "Blur Intensity",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -27,7 +34,8 @@ const componentDefinition = {
 			description: "The center point of the rotation",
 			ui: {
 				type: "position",
-				label: "Center Position"
+				label: "Center Position",
+				group: "Position"
 			}
 		}
 	},
@@ -38,28 +46,27 @@ const componentDefinition = {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
 		const center = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
-		const angle = uniforms.intensity.uniform.mul(.005);
+		const angleStep = uniforms.intensity.uniform.mul(.005).div(float(31));
 		const aspect = viewportSize.x.div(viewportSize.y);
+		const cosStep = cos(angleStep);
+		const sinStep = sin(angleStep);
 		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));
+			const curCos = float(1).toVar();
+			const curSin = 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 currentAngle = angleStep.mul(float(i));
-				const cosAngle = cos(currentAngle);
-				const sinAngle = sin(currentAngle);
-				const rotatedX = aspectCorrectedCoord.x.mul(cosAngle).sub(aspectCorrectedCoord.y.mul(sinAngle));
-				const rotatedY = aspectCorrectedCoord.x.mul(sinAngle).add(aspectCorrectedCoord.y.mul(cosAngle));
+				const rotatedX = aspectCorrectedCoord.x.mul(curCos).sub(aspectCorrectedCoord.y.mul(curSin));
+				const rotatedY = aspectCorrectedCoord.x.mul(curSin).add(aspectCorrectedCoord.y.mul(curCos));
 				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));
+				total.assign(total.add(childTexture.sample(sampleCoord).mul(float(blurWeights[i]))));
+				const nextCos = curCos.mul(cosStep).sub(curSin.mul(sinStep));
+				const nextSin = curSin.mul(cosStep).add(curCos.mul(sinStep));
+				curCos.assign(nextCos);
+				curSin.assign(nextSin);
 			}
-			return total.div(totalWeight);
+			return total;
 		})();
 	}
 };

package/dist/core/{Ascii-Dxk6VaBp.js → Ascii-BmSlALjq.js}

@@ -1,5 +1,5 @@
 import { DataTexture, NearestFilter, RGBAFormat, UnsignedByteType } from "three";
-import { abs, any, ceil, convertToTexture, dot, float, floor, fract, greaterThan, or, screenUV, select, sqrt, texture, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
+import { abs, any, clamp, convertToTexture, dot, float, floor, fract, greaterThan, or, pow, screenUV, select, texture, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Ascii",
 	category: "Stylize",
@@ -9,21 +9,23 @@ const componentDefinition = {
 	props: {
 		characters: {
 			default: "@%#*+=-:.",
-			description: "Characters to use for ASCII effect (light to dark)",
+			description: "Characters ordered from dense to sparse. First character is used for bright areas, last for dark areas.",
 			ui: {
 				type: "text",
-				label: "Characters"
+				label: "Characters",
+				group: "Effect"
 			}
 		},
 		cellSize: {
 			default: 30,
-			description: "Size of each ASCII character cell in pixels",
+			description: "Size of each ASCII character cell (normalized to 1080p reference, scales proportionally at other resolutions)",
 			ui: {
 				type: "range",
 				min: 8,
 				max: 100,
 				step: 1,
-				label: "Cell Size"
+				label: "Cell Size",
+				group: "Effect"
 			}
 		},
 		fontFamily: {
@@ -33,35 +35,84 @@ const componentDefinition = {
 				type: "select",
 				options: [
 					{
-						label: "JetBrains Mono",
-						value: "JetBrains Mono"
+						label: "Azeret Mono",
+						value: "Azeret Mono"
+					},
+					{
+						label: "Courier Prime",
+						value: "Courier Prime"
+					},
+					{
+						label: "Cutive Mono",
+						value: "Cutive Mono"
 					},
 					{
 						label: "Fira Code",
 						value: "Fira Code"
 					},
 					{
-						label: "Source Code Pro",
-						value: "Source Code Pro"
+						label: "Geist Mono",
+						value: "Geist Mono"
 					},
 					{
 						label: "IBM Plex Mono",
 						value: "IBM Plex Mono"
 					},
 					{
-						label: "Space Mono",
-						value: "Space Mono"
+						label: "JetBrains Mono",
+						value: "JetBrains Mono"
+					},
+					{
+						label: "Major Mono Display",
+						value: "Major Mono Display"
+					},
+					{
+						label: "Martian Mono",
+						value: "Martian Mono"
+					},
+					{
+						label: "Nova Mono",
+						value: "Nova Mono"
+					},
+					{
+						label: "Press Start 2P",
+						value: "Press Start 2P"
 					},
 					{
 						label: "Roboto Mono",
 						value: "Roboto Mono"
 					},
 					{
-						label: "Courier Prime",
-						value: "Courier Prime"
+						label: "Share Tech Mono",
+						value: "Share Tech Mono"
+					},
+					{
+						label: "Silkscreen",
+						value: "Silkscreen"
+					},
+					{
+						label: "Source Code Pro",
+						value: "Source Code Pro"
+					},
+					{
+						label: "Space Mono",
+						value: "Space Mono"
+					},
+					{
+						label: "Syne Mono",
+						value: "Syne Mono"
+					},
+					{
+						label: "VT323",
+						value: "VT323"
+					},
+					{
+						label: "Xanh Mono",
+						value: "Xanh Mono"
 					}
 				],
-				label: "Font Family"
+				label: "Font Family",
+				group: "Appearance"
 			}
 		},
 		spacing: {
@@ -72,9 +123,44 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .05,
-				label: "Character Size"
+				label: "Character Size",
+				group: "Effect"
 			},
 			transform: (value) => .1 + value * 1.4
+		},
+		gamma: {
+			default: 1,
+			description: "Brightness curve adjustment. <1 brightens darks (more light characters), >1 darkens midtones (more dark characters). Use to better fit characters to image brightness range.",
+			ui: {
+				type: "range",
+				min: .25,
+				max: 3,
+				step: .05,
+				label: "Gamma",
+				group: "Effect"
+			}
+		},
+		alphaThreshold: {
+			default: 0,
+			description: "Pixels with alpha below this threshold become fully transparent.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Alpha Threshold",
+				group: "Effect"
+			}
+		},
+		preserveAlpha: {
+			default: true,
+			description: "When enabled, output alpha matches input alpha. When disabled, pixels above the alpha threshold become fully opaque.",
+			ui: {
+				type: "checkbox",
+				label: "Preserve Alpha",
+				group: "Effect"
+			},
+			transform: (value) => value ? 1 : 0
 		}
 	},
 	fragmentNode: ({ uniforms, childNode, onCleanup, onBeforeRender }) => {
@@ -91,7 +177,19 @@ const componentDefinition = {
 			"IBM Plex Mono": "IBM+Plex+Mono",
 			"Space Mono": "Space+Mono",
 			"Roboto Mono": "Roboto+Mono",
-			"Courier Prime": "Courier+Prime"
+			"Courier Prime": "Courier+Prime",
+			"Geist Mono": "Geist+Mono",
+			"VT323": "VT323",
+			"Press Start 2P": "Press+Start+2P",
+			"Silkscreen": "Silkscreen",
+			"Major Mono Display": "Major+Mono+Display",
+			"Syne Mono": "Syne+Mono",
+			"Nova Mono": "Nova+Mono",
+			"Xanh Mono": "Xanh+Mono",
+			"Cutive Mono": "Cutive+Mono",
+			"Share Tech Mono": "Share+Tech+Mono",
+			"Martian Mono": "Martian+Mono",
+			"Azeret Mono": "Azeret+Mono"
 		};
 		const loadedFonts = /* @__PURE__ */ new Set();
 		async function loadGoogleFont(fontFamily) {
@@ -139,7 +237,7 @@ const componentDefinition = {
 				reusableCanvas = document.createElement("canvas");
 				reusableCanvas.width = ATLAS_TEXTURE_SIZE;
 				reusableCanvas.height = ATLAS_TEXTURE_SIZE;
-				reusableCtx = reusableCanvas.getContext("2d");
+				reusableCtx = reusableCanvas.getContext("2d", { willReadFrequently: true });
 				if (!reusableCtx) {
 					console.error("[Ascii] Failed to create 2D canvas context for character atlas");
 					throw new Error("Ascii shader: Canvas 2D context unavailable");
@@ -206,6 +304,7 @@ const componentDefinition = {
 		const charCountUniform = uniform(atlasData.charCount);
 		const cellSizeUniform = uniform(atlasData.cellSize);
 		const atlasScaleUniform = uniform(atlasData.uvScale);
+		const atlasSizeUniform = uniform(atlasData.atlasSize);
 		let lastCharacters = initialCharacters;
 		let lastCellSize = initialCellSize;
 		let lastFontFamily = initialFontFamily;
@@ -221,6 +320,7 @@ const componentDefinition = {
 			charCountUniform.value = atlasData.charCount;
 			cellSizeUniform.value = atlasData.cellSize;
 			atlasScaleUniform.value = atlasData.uvScale;
+			atlasSizeUniform.value = atlasData.atlasSize;
 			lastCharacters = currentCharacters;
 			lastCellSize = currentCellSize;
 			lastFontFamily = currentFontFamily;
@@ -258,6 +358,7 @@ const componentDefinition = {
 					charCountUniform.value = atlasData.charCount;
 					cellSizeUniform.value = atlasData.cellSize;
 					atlasScaleUniform.value = atlasData.uvScale;
+					atlasSizeUniform.value = atlasData.atlasSize;
 					lastCharacters = currentCharacters;
 					lastCellSize = currentCellSize;
 					lastFontFamily = currentFontFamily;
@@ -279,7 +380,14 @@ const componentDefinition = {
 			}
 			reusableDataBuffer = null;
 		});
-		const effectiveCellSize = cellSizeUniform.mul(1.5);
+		const defaultGamma = componentDefinition.props.gamma.default;
+		const defaultAlphaThreshold = componentDefinition.props.alphaThreshold.default;
+		const defaultPreserveAlpha = componentDefinition.props.preserveAlpha.transform ? componentDefinition.props.preserveAlpha.transform(componentDefinition.props.preserveAlpha.default) : componentDefinition.props.preserveAlpha.default ? 1 : 0;
+		const gammaUniform = uniforms.gamma?.uniform ?? uniform(defaultGamma);
+		const alphaThresholdUniform = uniforms.alphaThreshold?.uniform ?? uniform(defaultAlphaThreshold);
+		const preserveAlphaUniform = uniforms.preserveAlpha?.uniform ?? uniform(defaultPreserveAlpha);
+		const scaleFactor = viewportSize.y.div(1080);
+		const effectiveCellSize = cellSizeUniform.mul(scaleFactor);
 		const mainGridSize = viewportSize.div(effectiveCellSize);
 		const gridCoords = screenUV.mul(mainGridSize);
 		const cellCoords = floor(gridCoords);
@@ -291,17 +399,21 @@ const componentDefinition = {
 		const isOutsideBounds = any(greaterThan(abs(centeredUV), vec2(characterSize.mul(.5))));
 		const cellCenter = cellCoords.add(vec2(.5)).div(mainGridSize);
 		const cellColor = childTexture.sample(cellCenter);
-		const rawBrightness = dot(cellColor.rgb, vec3(.299, .587, .114));
+		const adjustedBrightness = pow(dot(cellColor.rgb, vec3(.299, .587, .114)), gammaUniform);
 		const charCount = charCountUniform;
-		const charIndex = floor(rawBrightness.mul(.8).add(.1).mul(charCount).min(charCount.sub(1e-4)));
-		const atlasSize = ceil(sqrt(charCount));
+		const charIndex = clamp(floor(float(1).sub(adjustedBrightness).mul(charCount)), 0, charCount.sub(1));
+		const atlasSize = atlasSizeUniform;
 		const atlasCol = charIndex.mod(atlasSize);
 		const atlasRow = floor(charIndex.div(atlasSize));
 		const atlasCellSize = float(1).div(atlasSize).mul(atlasScaleUniform);
 		const atlasSampleUV = vec2(atlasCol, atlasRow).mul(atlasCellSize).add(cellUV.mul(atlasCellSize));
 		const asciiChar = atlasField.sample(atlasSampleUV);
 		const isBackground = dot(asciiChar.rgb, vec3(.299, .587, .114)).lessThan(.1);
-		return vec4(asciiChar.rgb.mul(cellColor.rgb), select(or(isBackground, isOutsideBounds), float(0), cellColor.a));
+		const sourceAlpha = cellColor.a;
+		const isBelowThreshold = sourceAlpha.lessThan(alphaThresholdUniform);
+		const outputAlpha = select(preserveAlphaUniform.greaterThan(.5), sourceAlpha, float(1));
+		const finalAlpha = select(or(or(isBackground, isOutsideBounds), isBelowThreshold), float(0), outputAlpha);
+		return vec4(asciiChar.rgb.mul(cellColor.rgb), finalAlpha);
 	}
 };
 var Ascii_default = componentDefinition;

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

@@ -1,9 +1,9 @@
-import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { clamp, float, max, mix, pow, screenUV, smoothstep, sqrt, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Beam",
-	category: "Base Layers",
+	category: "Textures",
 	description: "A beam of light from one point to another.",
 	props: {
 		startPosition: {
@@ -15,7 +15,8 @@ const componentDefinition = {
 			description: "Starting point of the beam",
 			ui: {
 				type: "position",
-				label: "Start Position"
+				label: "Start Position",
+				group: "Position"
 			}
 		},
 		endPosition: {
@@ -27,7 +28,8 @@ const componentDefinition = {
 			description: "Ending point of the beam",
 			ui: {
 				type: "position",
-				label: "End Position"
+				label: "End Position",
+				group: "Position"
 			}
 		},
 		startThickness: {
@@ -38,7 +40,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Start Thickness"
+				label: "Start Thickness",
+				group: "Effect"
 			}
 		},
 		endThickness: {
@@ -49,7 +52,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "End Thickness"
+				label: "End Thickness",
+				group: "Effect"
 			}
 		},
 		startSoftness: {
@@ -60,7 +64,8 @@ const componentDefinition = {
 				min: 0,
 				max: 50,
 				step: .1,
-				label: "Start Softness"
+				label: "Start Softness",
+				group: "Effect"
 			}
 		},
 		endSoftness: {
@@ -71,7 +76,8 @@ const componentDefinition = {
 				min: 0,
 				max: 20,
 				step: .1,
-				label: "End Softness"
+				label: "End Softness",
+				group: "Effect"
 			}
 		},
 		insideColor: {
@@ -80,7 +86,8 @@ const componentDefinition = {
 			description: "Color at the center of the beam",
 			ui: {
 				type: "color",
-				label: "Inside Color"
+				label: "Inside Color",
+				group: "Colors"
 			}
 		},
 		outsideColor: {
@@ -89,7 +96,8 @@ const componentDefinition = {
 			description: "Color at the edges of the beam",
 			ui: {
 				type: "color",
-				label: "Outside Color"
+				label: "Outside Color",
+				group: "Colors"
 			}
 		},
 		colorSpace: {
@@ -99,7 +107,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},