diff options
| -rw-r--r-- | apps/web/src/components/editor/panels/timeline/timeline-element.tsx | 2 | ||||
| -rw-r--r-- | apps/web/src/lib/effects/definitions/blur.ts | 48 |
2 files changed, 25 insertions, 25 deletions
diff --git a/apps/web/src/components/editor/panels/timeline/timeline-element.tsx b/apps/web/src/components/editor/panels/timeline/timeline-element.tsx index d5b8cade..9121f6c2 100644 --- a/apps/web/src/components/editor/panels/timeline/timeline-element.tsx +++ b/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()} > diff --git a/apps/web/src/lib/effects/definitions/blur.ts b/apps/web/src/lib/effects/definitions/blur.ts index 3a8f691a..3819f82c 100644 --- a/apps/web/src/lib/effects/definitions/blur.ts +++ b/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], + }; }, + }, ], }, }; |