fix: align background blur with effect blur intensity scale

1 files changed, 9 insertions, 12 deletions

diff --git a/apps/web/src/lib/effects/definitions/blur.ts b/apps/web/src/lib/effects/definitions/blur.ts
index 3bfd5e3c..b464db3a 100644
--- a/apps/web/src/lib/effects/definitions/blur.ts
+++ b/apps/web/src/lib/effects/definitions/blur.ts
@@ -7,11 +7,6 @@ const MAX_STEP = 4;
 const MAX_EFFECTIVE_SIGMA = MAX_SINGLE_PASS_SIGMA * MAX_STEP;
 const MAX_ITERATIONS = 8;
 
-/**
- * Builds multi-pass gaussian blur passes for a given sigma.
- * Shared by the blur effect and background blur — they each
- * compute their own sigma from their own intensity scale.
- */
 export function buildGaussianBlurPasses({
 	sigmaX,
 	sigmaY,
@@ -59,8 +54,10 @@ export function buildGaussianBlurPasses({
 	return passes;
 }
 
-function intensityToSigma(intensity: number, resolution: number, reference: number): number {
-	return (intensity / 5) * (resolution / reference);
+export const INTENSITY_TO_SIGMA_DIVISOR = 5;
+
+export function intensityToSigma({ intensity, resolution, reference }: { intensity: number; resolution: number; reference: number }): number {
+	return (intensity / INTENSITY_TO_SIGMA_DIVISOR) * (resolution / reference);
 }
 
 function parseIntensity(effectParams: Record<string, unknown>): number {
@@ -88,7 +85,7 @@ export const blurEffectDefinition: EffectDefinition = {
 			{
 				shader: GAUSSIAN_BLUR_SHADER,
 				uniforms: ({ effectParams, width }) => ({
-					u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), width, 1920), 0.001),
+					u_sigma: Math.max(intensityToSigma({ intensity: parseIntensity(effectParams), resolution: width, reference: 1920 }), 0.001),
 					u_step: 1,
 					u_direction: [1, 0],
 				}),
@@ -96,7 +93,7 @@ export const blurEffectDefinition: EffectDefinition = {
 			{
 				shader: GAUSSIAN_BLUR_SHADER,
 				uniforms: ({ effectParams, height }) => ({
-					u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), height, 1080), 0.001),
+					u_sigma: Math.max(intensityToSigma({ intensity: parseIntensity(effectParams), resolution: height, reference: 1080 }), 0.001),
 					u_step: 1,
 					u_direction: [0, 1],
 				}),
@@ -104,9 +101,9 @@ export const blurEffectDefinition: EffectDefinition = {
 		],
 		buildPasses: ({ effectParams, width, height }) => {
 			const intensity = parseIntensity(effectParams);
-			return buildGaussianBlurPasses({
-				sigmaX: intensityToSigma(intensity, width, 1920),
-				sigmaY: intensityToSigma(intensity, height, 1080),
+		return buildGaussianBlurPasses({
+				sigmaX: intensityToSigma({ intensity, resolution: width, reference: 1920 }),
+				sigmaY: intensityToSigma({ intensity, resolution: height, reference: 1080 }),
 			});
 		},
 	},