@twick/visualizer 0.14.0 → 0.14.3

package/src/sample.ts

@@ -1,248 +1,248 @@
-export const sample = {
-    "input": {
-      "properties": {
-        "width": 720,
-        "height": 1280,
-        "video_format": "mp4",
-        "video_codec": "libx264",
-        "audio_codec": "aac",
-        "video_bitrate": "2500k",
-        "audio_bitrate": "128k",
-        "fps": 30
-      },
-      "backgroundMusic": "",
-      "backgroundMusicLevel": 1,
-      "bucket_name": "kifferai-assets",
-      "context": {
-        "scriptInput": {
-          "scriptStyle": "PRODUCT_DEMONSTRATION"
-        },
-        "requestId": "f5d5db7a-8911-4b28-9c3c-71d91c83ddda",
-        "campaignId": "campaign",
-        "productUrl": "",
-        "pageId": "page",
-        "userId": "b1436dea-50e1-7049-cf34-6e49702da72a",
-        "productName": "product",
-        "orgId": "a251d9971a55"
-      },
-      "basePath": "carlyn",
-      "tracks": [
-        {
-          "id": "t-scene",
-          "type": "scene",
-          "elements": [
-            {
-              "id": "e-244f8d5a3bbc",
-              "type": "video",
-              "s": 0,
-              "e": 4.74,
-              "objectFit": "cover",
-              "props": {
-                "time": 8.428,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/c436f351-ee9c-49c2-a26f-e7a7733c77ff/video_1746786031627-96448ec8-6430-4d4b-bb89-ebdbfeade7fa-normalized-1747225095191.mp4",
-                "play": true,
-                "decoder": "web",
-                "volume": 1,
-                "playbackRate": 2.4
-              },
-              "animation": {
-                  "name": "photo-zoom",
-                  "interval": 1,
-                  "mode": "out",
-                  "animate": "both",
-                  "direction": "top"
-              },
-              "frame": {
-                "size": [
-                  720,
-                  1280
-                ],
-                "layout": false,
-                "clip": "true"
-              }
-            },
-            {
-              "id": "e-ef2f208db319",
-              "type": "video",
-              "s": 4.74,
-              "e": 6.774,
-              "objectFit": "cover",
-              "props": {
-                "time": 0,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/63e0e7c3-5939-41a2-95c7-4e47e8be1ebf/video_1746786032120-6e4ab84c-d0dd-401e-b5e8-13d49fd8fe67-normalized-1747225095053.mp4",
-                "play": true,
-                "decoder": "web",
-                "volume": 1,
-                "playbackRate": 2
-              },
-              "frame": {
-                "size": [
-                  720,
-                  1280
-                ],
-                "layout": false,
-                "clip": "true"
-              }
-            },
-            {
-              "id": "e-477f620c0ec7",
-              "type": "video",
-              "s": 6.774,
-              "e": 9.395,
-              "objectFit": "cover",
-              "props": {
-                "time": 18.222499999999997,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/e66b4682-096d-46c5-b1b2-1e2e6a46fe8d/video_1746790653457-7e9e9a1d-9410-4bb3-bec1-7474fa88286c-normalized-1747225095442.mp4",
-                "play": true,
-                "decoder": "web",
-                "volume": 1,
-                "playbackRate": 2
-              },
-              "frame": {
-                "size": [
-                  2292.281711648068,
-                  1286.2247382025269
-                ],
-                "layout": false,
-                "clip": "true",
-                "rotation": 0,
-                "x": 269.48206359326264,
-                "y": 6.293648227413769
-              }
-            }
-          ],
-          "name": "scene"
-        },
-        {
-          "id": "t-83fa5f365f7f",
-          "type": "audio",
-          "name": "audio",
-          "elements": [
-            {
-              "id": "e-50848c2d8271",
-              "type": "audio",
-              "s": 0,
-              "e": 10,
-              "props": {
-                "time": 0,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/brand-music/Unstoppable-Reprise-909549aa-6807-482b-ab92-bce7e6834fe7.mp3",
-                "play": true
-              },
-              "frame": {
-                "size": [
-                  720,
-                  1280
-                ],
-                "layout": false,
-                "clip": "true"
-              }
-            }
-          ]
-        },
-        {
-          "id": "t-795891203a03",
-          "type": "element",
-          "name": "element",
-          "elements": [
-            {
-              "id": "e-6c32ca5f728e",
-              "type": "text",
-              "s": 0.009,
-              "e": 4.691000000000001,
-              "t": "GOD WILL BREAK YOU",
-              "textEffect": {
-                "name": "elastic",
-                "duration": 1,
-              },
-              "props": {
-                "fill": "#ffd700",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "Italic",
-                "rotation": 0,
-                "x": -11.306514773940933,
-                "y": 103.95475034024639
-              }
-            },
-            {
-              "id": "e-39e2112fa735",
-              "type": "text",
-              "s": 4.824,
-              "e": 6.709,
-              "t": "BREAK YOU AGAIN",
-              "props": {
-                "fill": "#FFFFFF",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "normal",
-                "rotation": 0,
-                "x": 2.261302954788164,
-                "y": 128.8134949868271
-              }
-            },
-            {
-              "id": "e-384f59e94253",
-              "type": "text",
-              "s": 4.904,
-              "e": 6.7059999999999995,
-              "t": "AND THEN",
-              "props": {
-                "fill": "#fffd70",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "Italic",
-                "rotation": 0,
-                "x": 0,
-                "y": 201.12984304960742
-              }
-            },
-            {
-              "id": "e-180cab9f1871",
-              "type": "text",
-              "s": 6.891,
-              "e": 9.343,
-              "t": "BREAK YOU ONCE AGAIN",
-              "props": {
-                "fill": "#ffd700",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "Italic",
-                "rotation": 0,
-                "x": 4.522605909576328,
-                "y": 81.35589157062759
-              }
-            }
-          ]
-        }
-      ],
-      "version": 1
-    }
+export const sample = {
+    "input": {
+      "properties": {
+        "width": 720,
+        "height": 1280,
+        "video_format": "mp4",
+        "video_codec": "libx264",
+        "audio_codec": "aac",
+        "video_bitrate": "2500k",
+        "audio_bitrate": "128k",
+        "fps": 30
+      },
+      "backgroundMusic": "",
+      "backgroundMusicLevel": 1,
+      "bucket_name": "kifferai-assets",
+      "context": {
+        "scriptInput": {
+          "scriptStyle": "PRODUCT_DEMONSTRATION"
+        },
+        "requestId": "f5d5db7a-8911-4b28-9c3c-71d91c83ddda",
+        "campaignId": "campaign",
+        "productUrl": "",
+        "pageId": "page",
+        "userId": "b1436dea-50e1-7049-cf34-6e49702da72a",
+        "productName": "product",
+        "orgId": "a251d9971a55"
+      },
+      "basePath": "carlyn",
+      "tracks": [
+        {
+          "id": "t-scene",
+          "type": "scene",
+          "elements": [
+            {
+              "id": "e-244f8d5a3bbc",
+              "type": "video",
+              "s": 0,
+              "e": 4.74,
+              "objectFit": "cover",
+              "props": {
+                "time": 8.428,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/c436f351-ee9c-49c2-a26f-e7a7733c77ff/video_1746786031627-96448ec8-6430-4d4b-bb89-ebdbfeade7fa-normalized-1747225095191.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 2.4
+              },
+              "animation": {
+                  "name": "photo-zoom",
+                  "interval": 1,
+                  "mode": "out",
+                  "animate": "both",
+                  "direction": "top"
+              },
+              "frame": {
+                "size": [
+                  720,
+                  1280
+                ],
+                "layout": false,
+                "clip": "true"
+              }
+            },
+            {
+              "id": "e-ef2f208db319",
+              "type": "video",
+              "s": 4.74,
+              "e": 6.774,
+              "objectFit": "cover",
+              "props": {
+                "time": 0,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/63e0e7c3-5939-41a2-95c7-4e47e8be1ebf/video_1746786032120-6e4ab84c-d0dd-401e-b5e8-13d49fd8fe67-normalized-1747225095053.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 2
+              },
+              "frame": {
+                "size": [
+                  720,
+                  1280
+                ],
+                "layout": false,
+                "clip": "true"
+              }
+            },
+            {
+              "id": "e-477f620c0ec7",
+              "type": "video",
+              "s": 6.774,
+              "e": 9.395,
+              "objectFit": "cover",
+              "props": {
+                "time": 18.222499999999997,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/e66b4682-096d-46c5-b1b2-1e2e6a46fe8d/video_1746790653457-7e9e9a1d-9410-4bb3-bec1-7474fa88286c-normalized-1747225095442.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 2
+              },
+              "frame": {
+                "size": [
+                  2292.281711648068,
+                  1286.2247382025269
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": 269.48206359326264,
+                "y": 6.293648227413769
+              }
+            }
+          ],
+          "name": "scene"
+        },
+        {
+          "id": "t-83fa5f365f7f",
+          "type": "audio",
+          "name": "audio",
+          "elements": [
+            {
+              "id": "e-50848c2d8271",
+              "type": "audio",
+              "s": 0,
+              "e": 10,
+              "props": {
+                "time": 0,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/brand-music/Unstoppable-Reprise-909549aa-6807-482b-ab92-bce7e6834fe7.mp3",
+                "play": true
+              },
+              "frame": {
+                "size": [
+                  720,
+                  1280
+                ],
+                "layout": false,
+                "clip": "true"
+              }
+            }
+          ]
+        },
+        {
+          "id": "t-795891203a03",
+          "type": "element",
+          "name": "element",
+          "elements": [
+            {
+              "id": "e-6c32ca5f728e",
+              "type": "text",
+              "s": 0.009,
+              "e": 4.691000000000001,
+              "t": "GOD WILL BREAK YOU",
+              "textEffect": {
+                "name": "elastic",
+                "duration": 1,
+              },
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": -11.306514773940933,
+                "y": 103.95475034024639
+              }
+            },
+            {
+              "id": "e-39e2112fa735",
+              "type": "text",
+              "s": 4.824,
+              "e": 6.709,
+              "t": "BREAK YOU AGAIN",
+              "props": {
+                "fill": "#FFFFFF",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "normal",
+                "rotation": 0,
+                "x": 2.261302954788164,
+                "y": 128.8134949868271
+              }
+            },
+            {
+              "id": "e-384f59e94253",
+              "type": "text",
+              "s": 4.904,
+              "e": 6.7059999999999995,
+              "t": "AND THEN",
+              "props": {
+                "fill": "#fffd70",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": 0,
+                "y": 201.12984304960742
+              }
+            },
+            {
+              "id": "e-180cab9f1871",
+              "type": "text",
+              "s": 6.891,
+              "e": 9.343,
+              "t": "BREAK YOU ONCE AGAIN",
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": 4.522605909576328,
+                "y": 81.35589157062759
+              }
+            }
+          ]
+        }
+      ],
+      "version": 1
+    }
   }

package/src/text-effects/elastic.tsx

@@ -1,39 +1,70 @@
-import { easeOutElastic, waitFor } from "@twick/core";
-import { TextEffectParams } from "../helpers/types";
-
-/**
- * ElasticEffect applies a scaling animation to text elements
- * with an elastic easing curve for a "pop" or "bounce" effect.
- *
- * Behavior:
- * - Optionally waits for a delay.
- * - Starts at zero scale (invisible).
- * - Scales up to full size with an elastic bounce.
- *
- * @param elementRef - Reference to the text element to animate.
- * @param duration - Duration of the scaling animation.
- * @param delay - Optional delay before the animation starts.
- */
-export const ElasticEffect = {
-  name: "elastic",
-
-  /**
-   * Generator function controlling the elastic text scaling effect.
-   */
-  *run({
-    elementRef,
-    duration,
-    delay,
-  }: TextEffectParams) {
-    // If a delay is specified, wait before starting the animation
-    if (delay) {
-      yield* waitFor(delay);
-    }
-
-    // Instantly set scale to 0 (invisible)
-    elementRef().scale(0);
-
-    // Animate scaling up to full size using elastic easing
-    yield* elementRef().scale(1, duration, easeOutElastic);
-  },
-};
+import { easeOutElastic, waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * @group ElasticEffect
+ * ElasticEffect applies a scaling animation to text elements with an elastic easing 
+ * curve for a "pop" or "bounce" effect. Creates playful, attention-grabbing text 
+ * animations that bounce into view with natural physics.
+ *
+ * Behavior:
+ * - Optionally waits for a delay
+ * - Starts at zero scale (invisible)
+ * - Scales up to full size with an elastic bounce
+ *
+ * @param elementRef - Reference to the text element to animate
+ * @param duration - Duration of the scaling animation in seconds
+ * @param delay - Optional delay before the animation starts in seconds
+ * 
+ * @example
+ * ```js
+ * // Basic elastic bounce
+ * textEffect: {
+ *   name: "elastic",
+ *   duration: 1.5,
+ *   delay: 0.5
+ * }
+ * 
+ * // Quick elastic pop
+ * textEffect: {
+ *   name: "elastic",
+ *   duration: 0.8
+ * }
+ * ```
+ */
+export const ElasticEffect = {
+  name: "elastic",
+
+  /**
+   * Generator function controlling the elastic text scaling effect.
+   * Handles elastic bounce animations for text elements with natural physics.
+   *
+   * @param params - Text effect parameters including element reference and timing
+   * @returns Generator that controls the elastic animation timeline
+   * 
+   * @example
+   * ```js
+   * yield* ElasticEffect.run({
+   *   elementRef: textElement,
+   *   duration: 1.5,
+   *   delay: 0.5
+   * });
+   * ```
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+  }: TextEffectParams) {
+    // If a delay is specified, wait before starting the animation
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    // Instantly set scale to 0 (invisible)
+    elementRef().scale(0);
+
+    // Animate scaling up to full size using elastic easing
+    yield* elementRef().scale(1, duration, easeOutElastic);
+  },
+};