@twick/visualizer 0.14.0 → 0.14.2

package/src/elements/text.element.tsx

@@ -1,28 +1,28 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Txt } from "@twick/2d";
-import { addAnimation, addTextEffect } from "../helpers/element.utils";
-
-export const TextElement = {
-    name: "text",
-    *create({ containerRef, element, view }: ElementParams) { 
-    const elementRef = createRef<any>();
-
-    yield* waitFor(element?.s);
-    yield containerRef().add(
-      <Txt
-        ref={elementRef}
-        key={element.id}
-        text={element.t}
-        {...element.props}
-      />
-    );
-    yield* all(
-      addAnimation({ elementRef: elementRef, element: element, view }),
-      addTextEffect({ elementRef: elementRef, element: element }),
-      waitFor(Math.max(0, element.e - element.s))
-    );
-    yield elementRef().remove();
-}
-  }
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import { addAnimation, addTextEffect } from "../helpers/element.utils";
+
+export const TextElement = {
+    name: "text",
+    *create({ containerRef, element, view }: ElementParams) { 
+    const elementRef = createRef<any>();
+
+    yield* waitFor(element?.s);
+    yield containerRef().add(
+      <Txt
+        ref={elementRef}
+        key={element.id}
+        text={element.t}
+        {...element.props}
+      />
+    );
+    yield* all(
+      addAnimation({ elementRef: elementRef, element: element, view }),
+      addTextEffect({ elementRef: elementRef, element: element }),
+      waitFor(Math.max(0, element.e - element.s))
+    );
+    yield elementRef().remove();
+}
+  }
   

package/src/elements/video.element.tsx

@@ -1,56 +1,55 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Rect, Video } from "@twick/2d";
-import { addAnimation, addFrameEffect, fitElement } from "../helpers/element.utils";
-import { logger } from "../helpers/log.utils";
-import { applyColorFilter } from "../helpers/filters";
-
-export const VideoElement = {
-  name: "video",
-  *create({ containerRef, element, view }: ElementParams) {
-    yield* waitFor(element?.s);
-    logger(`Adding video element ${element.id}`);
-    const frameContainerRef = createRef<any>();
-    const frameElementRef = createRef<any>();
-
-    yield containerRef().add(
-      <Rect ref={frameContainerRef} key={element.id} {...element.frame}>
-        <Video
-          ref={frameElementRef}
-          key={`child-${element.id}`}
-          {...element.props}
-        />
-      </Rect>
-    );
-    if (frameContainerRef()) {
-      yield fitElement({
-        elementRef: frameElementRef,
-        containerSize: frameContainerRef().size(),
-        elementSize: frameElementRef().size(),
-        objectFit: element.objectFit,
-      });
-
-      if (element?.props?.mediaFilter) {
-        applyColorFilter(frameElementRef, element.props.mediaFilter);
-      }
-
-      yield* all(
-        addAnimation({
-          elementRef: frameElementRef,
-          containerRef: frameContainerRef,
-          element: element,
-          view,
-        }),
-        addFrameEffect({
-          containerRef: frameContainerRef,
-          elementRef: frameElementRef,
-          element,
-        }),
-        waitFor(Math.max(0, element.e - element.s))
-      );
-      yield frameElementRef().playing(false);
-      yield frameElementRef().remove();
-      yield frameContainerRef().remove();
-    }
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Rect, Video } from "@twick/2d";
+import { addAnimation, addFrameEffect, fitElement } from "../helpers/element.utils";
+import { applyColorFilter } from "../helpers/filters";
+
+export const VideoElement = {
+  name: "video",
+  *create({ containerRef, element, view }: ElementParams) {
+    yield* waitFor(element?.s);
+    const frameContainerRef = createRef<any>();
+    const frameElementRef = createRef<any>();
+
+    yield containerRef().add(
+      <Rect ref={frameContainerRef} key={element.id} {...element.frame}>
+        <Video
+          ref={frameElementRef}
+          key={`child-${element.id}`}
+          play={true}
+          {...element.props}
+        />
+      </Rect>
+    );
+    if (frameContainerRef()) {
+      yield fitElement({
+        elementRef: frameElementRef,
+        containerSize: frameContainerRef().size(),
+        elementSize: frameElementRef().size(),
+        objectFit: element.objectFit,
+      });
+
+      if (element?.props?.mediaFilter) {
+        applyColorFilter(frameElementRef, element.props.mediaFilter);
+      }
+
+      yield* all(
+        addAnimation({
+          elementRef: frameElementRef,
+          containerRef: frameContainerRef,
+          element: element,
+          view,
+        }),
+        addFrameEffect({
+          containerRef: frameContainerRef,
+          elementRef: frameElementRef,
+          element,
+        }),
+        waitFor(Math.max(0, element.e - element.s))
+      );
+      yield frameElementRef().play(false);
+      yield frameElementRef().remove();
+      yield frameContainerRef().remove();
+    }
+  },
+};

package/src/frame-effects/circle.frame.tsx

@@ -1,103 +1,103 @@
-/**
- * Frame effects component that handles the application of various visual effects
- * to frames and elements in the scene.
- */
-
-import { all, waitFor } from "@twick/core";
-import { getTimingFunction } from "../helpers/timing.utils";
-import { fitElement } from "../helpers/element.utils";
-import {
-  DEFAULT_POSITION,
-  DEFAULT_TIMING_FUNCTION,
-} from "../helpers/constants";
-import { FrameEffectParams } from "../helpers/types";
-
-/**
- * CircleFrameEffect animates a frame transitioning into a circular shape,
- * resizing, repositioning, and optionally fitting its content.
- *
- * Behavior:
- * - Waits for the specified start time.
- * - Resizes and repositions the frame container smoothly.
- * - Animates the corner radius to create a perfect circle.
- * - Repositions the content element if needed.
- * - Optionally fits the element inside the container based on object-fit.
- *
- * @param containerRef - Reference to the frame container element.
- * @param elementRef - Reference to the content element inside the frame.
- * @param initFrameState - Initial size and position state of the element.
- * @param frameEffect - Frame transformation configuration and timing.
- */
-export const CircleFrameEffect = {
-  name: "circle",
-
-  /**
-   * Generator function controlling the circle frame animation.
-   */
-  *run({
-    containerRef,
-    elementRef,
-    initFrameState,
-    frameEffect,
-  }: FrameEffectParams) {
-    // Wait for the specified start time before starting animation
-    yield* waitFor(frameEffect.s);
-
-    const props = frameEffect.props;
-    const sequence = [];
-
-    // Animate resizing the container to target size
-    sequence.push(
-      containerRef().size(
-        { x: props.frameSize[0], y: props.frameSize[1] },
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Animate repositioning the container
-    sequence.push(
-      containerRef().position(
-        props.framePosition ?? { x: 0, y: 0 },
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Animate repositioning the element inside the container
-    sequence.push(
-      elementRef().position(
-        props.elementPosition ?? DEFAULT_POSITION,
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Animate rounding corners to create a circle (radius = half the width)
-    sequence.push(
-      containerRef().radius(
-        props.frameSize[0] / 2,
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Optionally fit the element inside the resized container
-    if (props.objectFit) {
-      sequence.push(
-        fitElement({
-          elementRef,
-          containerSize: {
-            x: props.frameSize[0],
-            y: props.frameSize[1],
-          },
-          elementSize: initFrameState.element.size,
-          objectFit: props.objectFit,
-        })
-      );
-    }
-
-    // Run all animations in parallel
-    yield* all(...sequence);
-  },
-};
+/**
+ * Frame effects component that handles the application of various visual effects
+ * to frames and elements in the scene.
+ */
+
+import { all, waitFor } from "@twick/core";
+import { getTimingFunction } from "../helpers/timing.utils";
+import { fitElement } from "../helpers/element.utils";
+import {
+  DEFAULT_POSITION,
+  DEFAULT_TIMING_FUNCTION,
+} from "../helpers/constants";
+import { FrameEffectParams } from "../helpers/types";
+
+/**
+ * CircleFrameEffect animates a frame transitioning into a circular shape,
+ * resizing, repositioning, and optionally fitting its content.
+ *
+ * Behavior:
+ * - Waits for the specified start time.
+ * - Resizes and repositions the frame container smoothly.
+ * - Animates the corner radius to create a perfect circle.
+ * - Repositions the content element if needed.
+ * - Optionally fits the element inside the container based on object-fit.
+ *
+ * @param containerRef - Reference to the frame container element.
+ * @param elementRef - Reference to the content element inside the frame.
+ * @param initFrameState - Initial size and position state of the element.
+ * @param frameEffect - Frame transformation configuration and timing.
+ */
+export const CircleFrameEffect = {
+  name: "circle",
+
+  /**
+   * Generator function controlling the circle frame animation.
+   */
+  *run({
+    containerRef,
+    elementRef,
+    initFrameState,
+    frameEffect,
+  }: FrameEffectParams) {
+    // Wait for the specified start time before starting animation
+    yield* waitFor(frameEffect.s);
+
+    const props = frameEffect.props;
+    const sequence = [];
+
+    // Animate resizing the container to target size
+    sequence.push(
+      containerRef().size(
+        { x: props.frameSize[0], y: props.frameSize[1] },
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the container
+    sequence.push(
+      containerRef().position(
+        props.framePosition ?? { x: 0, y: 0 },
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the element inside the container
+    sequence.push(
+      elementRef().position(
+        props.elementPosition ?? DEFAULT_POSITION,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate rounding corners to create a circle (radius = half the width)
+    sequence.push(
+      containerRef().radius(
+        props.frameSize[0] / 2,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Optionally fit the element inside the resized container
+    if (props.objectFit) {
+      sequence.push(
+        fitElement({
+          elementRef,
+          containerSize: {
+            x: props.frameSize[0],
+            y: props.frameSize[1],
+          },
+          elementSize: initFrameState.element.size,
+          objectFit: props.objectFit,
+        })
+      );
+    }
+
+    // Run all animations in parallel
+    yield* all(...sequence);
+  },
+};

package/src/frame-effects/rect.frame.tsx

@@ -1,103 +1,103 @@
-/**
- * Frame effects component that handles the application of various visual effects
- * to frames and elements in the scene.
- */
-
-import { all, waitFor } from "@twick/core";
-import { getTimingFunction } from "../helpers/timing.utils";
-import { fitElement } from "../helpers/element.utils";
-import {
-  DEFAULT_POSITION,
-  DEFAULT_TIMING_FUNCTION,
-} from "../helpers/constants";
-import { FrameEffectParams } from "../helpers/types";
-
-/**
- * RectFrameEffect applies frame transformations such as resizing,
- * repositioning, rounding corners, and optionally fitting the element
- * within the frame according to an object-fit mode.
- *
- * Behavior:
- * - Waits for the specified start time.
- * - Resizes and repositions the container and element smoothly.
- * - Adjusts corner radius if provided.
- * - Optionally fits the element inside the container.
- *
- * @param containerRef - Reference to the frame container element.
- * @param elementRef - Reference to the content element inside the frame.
- * @param initFrameState - Initial size and position state of the element.
- * @param frameEffect - Frame transformation configuration and timing.
- */
-export const RectFrameEffect = {
-  name: "rect",
-
-  /**
-   * Generator function controlling the frame resizing and positioning animation.
-   */
-  *run({
-    containerRef,
-    elementRef,
-    initFrameState,
-    frameEffect,
-  }: FrameEffectParams) {
-    // Wait until the effect start time
-    yield* waitFor(frameEffect.s);
-
-    const props = frameEffect.props;
-    const sequence = [];
-
-    // Animate resizing the container
-    sequence.push(
-      containerRef().size(
-        props.frameSize,
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Animate repositioning the container
-    sequence.push(
-      containerRef().position(
-        props.framePosition ?? { x: 0, y: 0 },
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Animate repositioning the element inside the container
-    sequence.push(
-      elementRef().position(
-        props.elementPosition ?? DEFAULT_POSITION,
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Animate corner radius if specified
-    sequence.push(
-      containerRef().radius(
-        props.radius ?? 0,
-        props.transitionDuration,
-        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-      )
-    );
-
-    // Optionally fit the element within the container based on object-fit
-    if (props.objectFit) {
-      sequence.push(
-        fitElement({
-          elementRef,
-          containerSize: {
-            x: props.frameSize[0],
-            y: props.frameSize[1],
-          },
-          elementSize: initFrameState.element.size,
-          objectFit: props.objectFit,
-        })
-      );
-    }
-
-    // Run all animations in parallel
-    yield* all(...sequence);
-  },
-};
+/**
+ * Frame effects component that handles the application of various visual effects
+ * to frames and elements in the scene.
+ */
+
+import { all, waitFor } from "@twick/core";
+import { getTimingFunction } from "../helpers/timing.utils";
+import { fitElement } from "../helpers/element.utils";
+import {
+  DEFAULT_POSITION,
+  DEFAULT_TIMING_FUNCTION,
+} from "../helpers/constants";
+import { FrameEffectParams } from "../helpers/types";
+
+/**
+ * RectFrameEffect applies frame transformations such as resizing,
+ * repositioning, rounding corners, and optionally fitting the element
+ * within the frame according to an object-fit mode.
+ *
+ * Behavior:
+ * - Waits for the specified start time.
+ * - Resizes and repositions the container and element smoothly.
+ * - Adjusts corner radius if provided.
+ * - Optionally fits the element inside the container.
+ *
+ * @param containerRef - Reference to the frame container element.
+ * @param elementRef - Reference to the content element inside the frame.
+ * @param initFrameState - Initial size and position state of the element.
+ * @param frameEffect - Frame transformation configuration and timing.
+ */
+export const RectFrameEffect = {
+  name: "rect",
+
+  /**
+   * Generator function controlling the frame resizing and positioning animation.
+   */
+  *run({
+    containerRef,
+    elementRef,
+    initFrameState,
+    frameEffect,
+  }: FrameEffectParams) {
+    // Wait until the effect start time
+    yield* waitFor(frameEffect.s);
+
+    const props = frameEffect.props;
+    const sequence = [];
+
+    // Animate resizing the container
+    sequence.push(
+      containerRef().size(
+        props.frameSize,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the container
+    sequence.push(
+      containerRef().position(
+        props.framePosition ?? { x: 0, y: 0 },
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the element inside the container
+    sequence.push(
+      elementRef().position(
+        props.elementPosition ?? DEFAULT_POSITION,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate corner radius if specified
+    sequence.push(
+      containerRef().radius(
+        props.radius ?? 0,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Optionally fit the element within the container based on object-fit
+    if (props.objectFit) {
+      sequence.push(
+        fitElement({
+          elementRef,
+          containerSize: {
+            x: props.frameSize[0],
+            y: props.frameSize[1],
+          },
+          elementSize: initFrameState.element.size,
+          objectFit: props.objectFit,
+        })
+      );
+    }
+
+    // Run all animations in parallel
+    yield* all(...sequence);
+  },
+};

package/src/global.css

@@ -1,12 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Birthstone&family=Corinthia:wght@400;700&family=Imperial+Script&family=Kumar+One+Outline&family=Londrina+Outline&family=Marck+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pattaya&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-@import url('https://fonts.cdnfonts.com/css/peralta');
-@import url('https://fonts.cdnfonts.com/css/impact');
-@import url('https://fonts.cdnfonts.com/css/lumanosimo');
-@import url('https://fonts.cdnfonts.com/css/kapakana');
-@import url('https://fonts.cdnfonts.com/css/handyrush');
-@import url('https://fonts.cdnfonts.com/css/dasher');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Birthstone&family=Corinthia:wght@400;700&family=Imperial+Script&family=Kumar+One+Outline&family=Londrina+Outline&family=Marck+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pattaya&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.cdnfonts.com/css/peralta');
+@import url('https://fonts.cdnfonts.com/css/impact');
+@import url('https://fonts.cdnfonts.com/css/lumanosimo');
+@import url('https://fonts.cdnfonts.com/css/kapakana');
+@import url('https://fonts.cdnfonts.com/css/handyrush');
+@import url('https://fonts.cdnfonts.com/css/dasher');
 @import url('https://fonts.cdnfonts.com/css/brittany-signature');