Add blur to animations

pskd73 · Apr 9, 2024 · 068a53a · 068a53a
1 parent 52fe0da
commit 068a53a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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)`,
       };
     },
   });