From 068a53a35b7105c90f5a1832133fdaef0e36aac9 Mon Sep 17 00:00:00 2001
From: Pramod <pramodkumar.damam73@gmail.com>
Date: Tue, 9 Apr 2024 10:33:16 +0530
Subject: [PATCH] Add blur to animations

---
 packages/example/src/Example.tsx      |  3 +++
 packages/example/src/Root.tsx         |  1 +
 packages/library/package.json         |  2 +-
 packages/library/src/animate-text.tsx | 11 +++++++++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/example/src/Example.tsx b/packages/example/src/Example.tsx
index 801a631..5007afb 100644
--- a/packages/example/src/Example.tsx
+++ b/packages/example/src/Example.tsx
@@ -10,6 +10,7 @@ export const inputSchema = z.object({
   y: z.array(z.number().step(0.1)).optional(),
   scale: z.array(z.number().step(0.1).min(0).max(1)).optional(),
   rotate: z.array(z.number().step(0.1)).optional(),
+  blur: z.array(z.number().step(0.2)).optional(),
   windowSize: z.number().min(0).max(100),
 });
 
@@ -21,6 +22,7 @@ export default function Example({
   y,
   scale,
   rotate,
+  blur,
   windowSize,
 }: z.infer<typeof inputSchema>) {
   return (
@@ -42,6 +44,7 @@ export default function Example({
             y,
             scale,
             rotate,
+            blur,
             windowSize,
           }}
         >
diff --git a/packages/example/src/Root.tsx b/packages/example/src/Root.tsx
index d936a29..9741f1c 100644
--- a/packages/example/src/Root.tsx
+++ b/packages/example/src/Root.tsx
@@ -20,6 +20,7 @@ const Root = () => {
           rotate: [0, 0],
           windowSize: 20,
           word: false,
+          blur: [0, 0],
         }}
         schema={inputSchema}
       />
diff --git a/packages/library/package.json b/packages/library/package.json
index ad48486..79ecd10 100644
--- a/packages/library/package.json
+++ b/packages/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "remotion-animate-text",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A remotion package to animate text",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/library/src/animate-text.tsx b/packages/library/src/animate-text.tsx
index cb12701..ab02295 100644
--- a/packages/library/src/animate-text.tsx
+++ b/packages/library/src/animate-text.tsx
@@ -13,6 +13,7 @@ export type TextAnimation = {
   showOverflow?: boolean;
   refRange?: number[];
   durations?: number[];
+  blur?: number[];
 };
 
 type Part = {
@@ -149,6 +150,9 @@ export const applyTextAnimation = ({
     toStyle: ({ pct }) => {
       const transforms: string[] = [];
       const refRange = animation?.refRange || [0, 100];
+
+      let blur = 0;
+
       if (animation?.scale) {
         const scale = interpolate(pct, refRange, animation.scale, {
           extrapolateRight: "clamp",
@@ -173,6 +177,12 @@ export const applyTextAnimation = ({
         });
         transforms.push(`rotate(${rotate}deg)`);
       }
+      if (animation?.blur) {
+        blur = interpolate(pct, refRange, animation.blur, {
+          extrapolateRight: "clamp",
+        });
+      }
+
       return {
         opacity:
           animation?.opacity &&
@@ -181,6 +191,7 @@ export const applyTextAnimation = ({
           }),
         transform: transforms.length > 0 ? transforms.join(" ") : undefined,
         display: animation?.hideLoading && pct === 0 ? "none" : "inline-block",
+        filter: `blur(${blur}px)`,
       };
     },
   });