@twick/visualizer 0.0.1 → 0.14.0

package/src/helpers/types.ts

@@ -1,10 +1,13 @@
+import { View2D } from "@twick/2d";
+import { Reference, ThreadGenerator, Vector2 } from "@twick/core";
+
 export type VideoInput = {
   backgroundColor: string;
   properties: {
     width: number;
     height: number;
   };
-  timeline: VisualizerTimeline[];
+  tracks: VisualizerTrack[];
 };
 
 export type MediaType = "video" | "image";
@@ -29,12 +32,12 @@ export type Position = {
 };
 
 export type FrameEffect = {
+  name: string;
   s: number;
   e: number;
   props: FrameEffectProps;
 };
 
-
 export type FrameEffectProps = {
   frameSize: SizeArray;
   frameShape: "circle" | "rect";
@@ -75,8 +78,9 @@ export type Caption = {
   t: string;
   s: number;
   e: number;
+  capStyle?: string;
   props?: CaptionProps;
-}
+};
 
 export type CaptionProps = {
   colors: CaptionColors;
@@ -106,25 +110,26 @@ export type CaptionFont = {
 
 export type VisualizerElement = {
   id: string;
+  trackId?: string;
   frame?: any;
   props?: any;
-  objectFit?: 'contain' | 'cover' | 'fill';
+  objectFit?: "contain" | "cover" | "fill";
   type?: string;
   s: number;
   e: number;
   backgroundColor?: string;
-  elements?: VisualizerElement[];
-  animations?: any[];
+  animation?: AnimationProps;
+  textEffect: TextEffectProps;
+  frameEffects?: FrameEffect[];
   scale?: number;
   t?: string;
   hWords?: any;
 };
 
-export type VisualizerTimeline = {
+export type VisualizerTrack = {
   id: string;
   type: string;
   elements: VisualizerElement[];
-  captions?: Caption[];
   props?: {
     capStyle?: string;
     bgOpacity?: number;
@@ -144,3 +149,93 @@ export type VisualizerTimeline = {
     captionProps?: CaptionProps;
   };
 };
+
+export type ElementParams = {
+  view: View2D;
+  containerRef: Reference<any>;
+  element?: VisualizerElement;
+  caption?: Caption;
+  waitOnStart?: boolean;
+};
+
+export interface Element<Params = ElementParams> {
+  name: string;
+  create(params: Params): ThreadGenerator;
+}
+
+export type TextEffectParams = {
+  elementRef: Reference<any>;
+  interval?: number;
+  duration?: number;
+  bufferTime?: number;
+  delay?: number;
+  direction?: "left" | "right" | "center";
+};
+
+export type TextEffectProps = {
+  name: string;
+  interval?: number;
+  duration?: number;
+  bufferTime?: number;
+  delay?: number;
+  direction?: "left" | "right" | "center";
+};
+
+export interface TextEffect<Params = TextEffectParams> {
+  name: string;
+  run(params: Params): Generator;
+}
+
+export type AnimationParams = {
+  elementRef: Reference<any>;
+  containerRef?: Reference<any>;
+  view: View2D;
+  interval?: number;
+  duration?: number;
+  intensity?: number;
+  mode?: "in" | "out";
+  animate?: "enter" | "exit" | "both";
+  direction?: "left" | "right" | "center" | "up" | "down";
+};
+
+export type AnimationProps = {
+  name: string;
+  interval?: number;
+  duration?: number;
+  intensity?: number;
+  mode?: "in" | "out";
+  animate?: "enter" | "exit" | "both";
+  direction?: "left" | "right" | "center" | "up" | "down";
+};
+
+export interface Animation<Params = AnimationParams> {
+  name: string;
+  run(params: Params): ThreadGenerator;
+}
+
+export type FrameEffectParams = {
+  elementRef: Reference<any>;
+  containerRef?: Reference<any>;
+  initFrameState: FrameState;
+  frameEffect: FrameEffect;
+};
+
+export interface FrameEffectPlugin<Params = FrameEffectParams> {
+  name: string;
+  run(params: Params): ThreadGenerator;
+}
+
+export type FrameState = {
+  frame: {
+    size: Vector2;
+    pos: Vector2;
+    radius: number;
+    scale: Vector2;
+    rotation: number;
+  };
+  element: {
+    size: Vector2;
+    pos: Vector2;
+    scale: Vector2;
+  };
+};

package/src/helpers/utils.ts

@@ -0,0 +1,20 @@
+export const hexToRGB = (color: string) => {
+  // Remove leading '#' if present
+  let hex = color.replace(/^#/, '');
+
+  // Handle shorthand hex (e.g., #abc)
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('');
+  }
+
+  if (hex.length !== 6) {
+    throw new Error('Invalid hex color');
+  }
+
+  const num = parseInt(hex, 16);
+  const r = (num >> 16) & 255;
+  const g = (num >> 8) & 255;
+  const b = num & 255;
+
+  return { r, g, b };
+}

package/src/index.ts

@@ -1,4 +1,6 @@
-export * from './visualizer';
-export * from './components/element';
+// Types
 export * from './helpers/types';
 
+// Components
+export * from './visualizer';
+

package/src/live.tsx

@@ -1,4 +1,4 @@
-import { makeProject } from "@revideo/core";
+import { makeProject } from "@twick/core";
 import { scene } from "./visualizer";
 import { sample } from "./sample";
 

package/src/project.ts

@@ -1,4 +1,4 @@
-import { makeProject } from "@revideo/core";
+import { makeProject } from "@twick/core";
 import { scene } from "./visualizer";
 
 export default makeProject({

package/src/sample.ts

@@ -26,7 +26,7 @@ export const sample = {
         "orgId": "a251d9971a55"
       },
       "basePath": "carlyn",
-      "timeline": [
+      "tracks": [
         {
           "id": "t-scene",
           "type": "scene",
@@ -45,6 +45,13 @@ export const sample = {
                 "volume": 1,
                 "playbackRate": 2.4
               },
+              "animation": {
+                  "name": "photo-zoom",
+                  "interval": 1,
+                  "mode": "out",
+                  "animate": "both",
+                  "direction": "top"
+              },
               "frame": {
                 "size": [
                   720,
@@ -102,130 +109,6 @@ export const sample = {
                 "x": 269.48206359326264,
                 "y": 6.293648227413769
               }
-            },
-            {
-              "id": "e-8e7713322971",
-              "type": "video",
-              "s": 9.395,
-              "e": 11.045625,
-              "objectFit": "cover",
-              "props": {
-                "time": 0,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/785c23ac-46b9-412e-afa6-a2cb56359409/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225092682.mp4",
-                "play": true,
-                "decoder": "web",
-                "volume": 1,
-                "playbackRate": 1.6
-              },
-              "frame": {
-                "size": [
-                  2308.2048543926235,
-                  1295.1593905203056
-                ],
-                "layout": false,
-                "clip": "true",
-                "rotation": 0,
-                "x": -13.276787982361498,
-                "y": 7.751279402190107
-              }
-            },
-            {
-              "id": "e-7531e6fa1e0d",
-              "type": "video",
-              "s": 11.046,
-              "e": 12.07,
-              "objectFit": "cover",
-              "props": {
-                "time": 7.721,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/9e75d848-ee72-417c-a0ab-9b03cbe8a8e8/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225094687.mp4",
-                "play": true,
-                "decoder": "web",
-                "volume": 1,
-                "playbackRate": 1.25
-              },
-              "frame": {
-                "size": [
-                  2311.1861840816873,
-                  1296.8322477347244
-                ],
-                "layout": false,
-                "clip": "true",
-                "rotation": 0,
-                "x": 449.37247349257666,
-                "y": 9.38850926628038
-              }
-            },
-            {
-              "id": "e-3b7b7272a680",
-              "type": "video",
-              "s": 12.07,
-              "e": 12.65,
-              "objectFit": "cover",
-              "props": {
-                "time": 15.761000000000001,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/c8411732-b0c8-45a9-808d-e5adf6396cc0/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225095328.mp4",
-                "play": true,
-                "decoder": "web"
-              },
-              "frame": {
-                "size": [
-                  2350.1907312156336,
-                  1318.718132515439
-                ],
-                "layout": false,
-                "clip": "true",
-                "rotation": 0,
-                "x": 172.4452216608522,
-                "y": 15.93068052161425
-              }
-            },
-            {
-              "id": "e-6121e86e1529",
-              "type": "video",
-              "s": 12.65,
-              "e": 12.97,
-              "objectFit": "cover",
-              "props": {
-                "time": 16.467,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/ebdd6f60-5750-4228-a5cd-f321f60664c2/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225093091.mp4",
-                "play": true,
-                "decoder": "web"
-              },
-              "frame": {
-                "size": [
-                  2250.6441550073,
-                  1262.861442531874
-                ],
-                "layout": false,
-                "clip": "true",
-                "rotation": 0,
-                "x": 349.31120819483976,
-                "y": 10.893313528412591
-              }
-            },
-            {
-              "id": "e-1b1fe6998ebd",
-              "type": "video",
-              "s": 12.97,
-              "e": 16.644000000000002,
-              "objectFit": "cover",
-              "props": {
-                "time": 23.286,
-                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/d0156321-eb31-4168-adc0-9c4ad1fd3963/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225092630.mp4",
-                "play": true,
-                "decoder": "web"
-              },
-              "frame": {
-                "size": [
-                  2338.697802344495,
-                  1312.2693224266334
-                ],
-                "layout": false,
-                "clip": "true",
-                "rotation": 0,
-                "x": 105.53672564636827,
-                "y": 12.299877537072007
-              }
             }
           ],
           "name": "scene"
@@ -239,7 +122,7 @@ export const sample = {
               "id": "e-50848c2d8271",
               "type": "audio",
               "s": 0,
-              "e": 16.587755,
+              "e": 10,
               "props": {
                 "time": 0,
                 "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/brand-music/Unstoppable-Reprise-909549aa-6807-482b-ab92-bce7e6834fe7.mp3",
@@ -267,6 +150,10 @@ export const sample = {
               "s": 0.009,
               "e": 4.691000000000001,
               "t": "GOD WILL BREAK YOU",
+              "textEffect": {
+                "name": "elastic",
+                "duration": 1,
+              },
               "props": {
                 "fill": "#ffd700",
                 "font": {
@@ -352,99 +239,10 @@ export const sample = {
                 "x": 4.522605909576328,
                 "y": 81.35589157062759
               }
-            },
-            {
-              "id": "e-7eada9ab2394",
-              "type": "text",
-              "s": 9.521,
-              "e": 10.993,
-              "t": "BUT",
-              "props": {
-                "fill": "#ffd700",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "Italic"
-              }
-            },
-            {
-              "id": "e-03039d49039b",
-              "type": "text",
-              "s": 11.171,
-              "e": 12.831999999999999,
-              "t": "IN THE END",
-              "props": {
-                "fill": "#ffd700",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "Italic",
-                "rotation": 0,
-                "x": 2.2613029547882206,
-                "y": 108.4745220941702
-              }
-            },
-            {
-              "id": "e-91d44d6180f9",
-              "type": "text",
-              "s": 13.077,
-              "e": 16.543,
-              "t": "HE WILL MAKE YOU",
-              "props": {
-                "fill": "#FFFFFF",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "fontSize": 54,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "normal",
-                "rotation": 0,
-                "x": 0,
-                "y": 27.118630523542492
-              }
-            },
-            {
-              "id": "e-ebf12eac0207",
-              "type": "text",
-              "s": 13.811,
-              "e": 16.534,
-              "t": "UNSTOPPABLE",
-              "props": {
-                "fill": "#ffd700",
-                "font": {
-                  "size": 48,
-                  "family": "Poppins"
-                },
-                "rotation": 0,
-                "x": -6.783908864364491,
-                "y": 99.43497858632281,
-                "fontSize": 58,
-                "fontFamily": "Impact",
-                "stroke": "#000000",
-                "lineWidth": 0.25,
-                "fontWeight": "bold",
-                "fontStyle": "Italic"
-              }
             }
           ]
         }
-      ]
-    },
-    "version": 1
+      ],
+      "version": 1
+    }
   }

package/src/text-effects/elastic.tsx

@@ -0,0 +1,39 @@
+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);
+  },
+};

package/src/text-effects/erase.tsx

@@ -0,0 +1,58 @@
+import { waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * EraseEffect animates text disappearing letter by letter,
+ * simulating an "erasing" or backspace effect.
+ *
+ * Behavior:
+ * - Optionally waits for a delay before starting.
+ * - Preserves the original element size.
+ * - Animates removing one character at a time from the end.
+ *
+ * @param elementRef - Reference to the text element to animate.
+ * @param duration - Total duration of the erasing animation.
+ * @param delay - Optional delay before starting.
+ * @param bufferTime - Time reserved at the end of animation (default: 0.1).
+ */
+export const EraseEffect = {
+  name: "erase",
+
+  /**
+   * Generator function controlling the erase text effect.
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+    bufferTime = 0.1,
+  }: TextEffectParams) {
+    // Get the full original text
+    const fullText = elementRef().text();
+
+    // Store the original size to avoid resizing during animation
+    const size = elementRef().size();
+
+    // Initialize element: clear text, set fixed size, align left
+    elementRef().setText("");
+    elementRef().size(size);
+    elementRef().textAlign("left");
+
+    // Wait for the optional initial delay
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    // Compute the time interval between each character removal
+    let timeInterval = (duration - bufferTime) / fullText.length;
+
+    // Optionally wait a bit before starting erasing
+    yield* waitFor(timeInterval);
+
+    // Loop backwards through the text and erase one character at a time
+    for (let i = fullText.length; i >= 0; i--) {
+      yield* waitFor(timeInterval);
+      elementRef().setText(fullText.substring(0, i));
+    }
+  },
+};

package/src/text-effects/stream-word.tsx

@@ -0,0 +1,60 @@
+import { waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * StreamWordEffect animates text appearing word by word,
+ * creating a smooth "typing" or "streaming" effect.
+ *
+ * Behavior:
+ * - Optionally waits for a delay before starting.
+ * - Clears the text initially and preserves the original size.
+ * - Reveals one word at a time with a consistent interval.
+ *
+ * @param elementRef - Reference to the text element to animate.
+ * @param duration - Total duration of the animation.
+ * @param delay - Optional delay before starting.
+ * @param bufferTime - Time reserved at the end of animation (default: 0.1).
+ */
+export const StreamWordEffect = {
+  name: "stream-word",
+
+  /**
+   * Generator function controlling the word streaming effect.
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+    bufferTime = 0.1,
+  }: TextEffectParams) {
+    // Retrieve the full text content
+    const fullText = elementRef().text();
+
+    // Store the element's size to avoid resizing during animation
+    const size = elementRef().size();
+
+    // Split the text into words
+    const words = fullText.split(" ");
+
+    // Clear the text and set fixed size
+    elementRef().setText("");
+    elementRef().size(size);
+
+    // Wait for optional delay before starting
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    // Align text to the left
+    elementRef().textAlign("left");
+
+    // Calculate the interval between words
+    let timeInterval =(duration - bufferTime) / words.length;
+
+    // Reveal each word one at a time
+    for (let i = 0; i < words.length; i++) {
+      yield* waitFor(timeInterval);
+      elementRef().setText(words.slice(0, i + 1).join(" "));
+    }
+  },
+};