Merge branch 'dev'

apps/web/src/components/editor/panels/timeline/timeline-element.tsx

@@ -650,7 +650,7 @@ function EffectsButton({
 		<Button
 			variant="text"
 			size="icon"
-			className={cn("rounded-sm !size-5 bg-background/50", className)}
+			className={cn("rounded-sm !size-5 bg-black/50 text-white", className)}
 			onClick={handleClick}
 			onMouseDown={(event) => event.stopPropagation()}
 		>

apps/web/src/lib/effects/definitions/blur.ts

@@ -19,32 +19,32 @@ export const blurEffectDefinition: EffectDefinition = {
 	renderer: {
 		type: "webgl",
 		passes: [
-			{
-				fragmentShader: blurFragmentShader,
-				uniforms: ({ effectParams }) => {
-					const intensity =
-						typeof effectParams.intensity === "number"
-							? effectParams.intensity
-							: Number.parseFloat(String(effectParams.intensity));
-					return {
-						u_sigma: Math.max(intensity / 5, 0.001),
-						u_direction: [1, 0],
-					};
-				},
+		{
+			fragmentShader: blurFragmentShader,
+			uniforms: ({ effectParams, width }) => {
+				const intensity =
+					typeof effectParams.intensity === "number"
+						? effectParams.intensity
+						: Number.parseFloat(String(effectParams.intensity));
+				return {
+					u_sigma: Math.max((intensity / 5) * (width / 1920), 0.001),
+					u_direction: [1, 0],
+				};
 			},
-			{
-				fragmentShader: blurFragmentShader,
-				uniforms: ({ effectParams }) => {
-					const intensity =
-						typeof effectParams.intensity === "number"
-							? effectParams.intensity
-							: Number.parseFloat(String(effectParams.intensity));
-					return {
-						u_sigma: Math.max(intensity / 5, 0.001),
-						u_direction: [0, 1],
-					};
-				},
+		},
+		{
+			fragmentShader: blurFragmentShader,
+			uniforms: ({ effectParams, height }) => {
+				const intensity =
+					typeof effectParams.intensity === "number"
+						? effectParams.intensity
+						: Number.parseFloat(String(effectParams.intensity));
+				return {
+					u_sigma: Math.max((intensity / 5) * (height / 1080), 0.001),
+					u_direction: [0, 1],
+				};
 			},
+		},
 		],
 	},
 };