@twick/visualizer 0.0.1 → 0.14.2

package/.eslintrc.json

@@ -1,21 +1,21 @@
-{
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "env": {
-    "es2022": true,
-    "node": true
-  },
-  "rules": {
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
-  }
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "env": {
+    "es2022": true,
+    "node": true
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
+  }
 } 

package/README.md

@@ -1,13 +1,13 @@
-# @twick/visualizer
-
-A visualization library built on top of [@revideo/2d](https://github.com/re-video/2d) for creating interactive visualizations.
-
-## Installation
-```
-pnpm install
-```
-
-## Build
-```
-pnpm build
+# @twick/visualizer
+
+A visualization library built on top of [@twick/2d](https://github.com/re-video/2d) for creating interactive visualizations.
+
+## Installation
+```
+pnpm install
+```
+
+## Build
+```
+pnpm build
 ```

package/package.json

@@ -1,31 +1,34 @@
-{
-  "name": "@twick/visualizer",
-  "version": "0.0.1",
-  "license": "Apache-2.0",
-  "scripts": {
-    "start": "revideo editor --projectFile ./src/live.tsx",
-    "build": "tsc && vite build",
-    "docs": "typedoc --out docs src/index.ts",
-    "clean": "rimraf .turbo node_modules dist"
-  },
-  "dependencies": {
-    "@preact/signals": "^1.2.1",
-    "@revideo/2d": "^0.10.4",
-    "@revideo/core": "^0.10.4",
-    "@revideo/renderer": "^0.10.4",
-    "@revideo/vite-plugin": "^0.10.4",
-    "date-fns": "^4.1.0",
-    "preact": "^10.19.2",
-    "crelt": "^1.0.6",
-    "@twick/media-utils": "0.0.1"
-  },
-  "devDependencies": {
-    "@revideo/cli": "0.10.4",
-    "@revideo/ui": "0.10.4",
-    "typescript": "5.4.2",
-    "typedoc": "^0.25.8",
-    "typedoc-plugin-markdown": "^3.17.1",
-    "vite-plugin-dts": "^3.7.3",
-    "vite": "^5.1.4"
-  }
-}
+{
+  "name": "@twick/visualizer",
+  "version": "0.14.2",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "twick editor --projectFile ./src/live.tsx",
+    "build": "tsc && vite build",
+    "docs": "typedoc --out docs src/index.ts",
+    "clean": "rimraf .turbo node_modules dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@preact/signals": "^1.2.1",
+    "@twick/2d": "0.14.2",
+    "@twick/core": "0.14.2",
+    "@twick/renderer": "0.14.2",
+    "@twick/vite-plugin": "0.14.2",
+    "date-fns": "^4.1.0",
+    "preact": "^10.19.2",
+    "crelt": "^1.0.6",
+    "@twick/media-utils": "0.14.2"
+  },
+  "devDependencies": {
+    "@twick/cli": "0.14.0",
+    "@twick/ui": "0.14.0",
+    "typescript": "5.4.2",
+    "typedoc": "^0.25.8",
+    "typedoc-plugin-markdown": "^3.17.1",
+    "vite-plugin-dts": "^3.7.3",
+    "vite": "^5.1.4"
+  }
+}

package/package.json.bak

@@ -0,0 +1,34 @@
+{
+  "name": "@twick/visualizer",
+  "version": "0.14.2",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "twick editor --projectFile ./src/live.tsx",
+    "build": "tsc && vite build",
+    "docs": "typedoc --out docs src/index.ts",
+    "clean": "rimraf .turbo node_modules dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@preact/signals": "^1.2.1",
+    "@twick/2d": "0.14.2",
+    "@twick/core": "0.14.2",
+    "@twick/renderer": "0.14.2",
+    "@twick/vite-plugin": "0.14.2",
+    "date-fns": "^4.1.0",
+    "preact": "^10.19.2",
+    "crelt": "^1.0.6",
+    "@twick/media-utils": "0.14.2"
+  },
+  "devDependencies": {
+    "@twick/cli": "0.14.0",
+    "@twick/ui": "0.14.0",
+    "typescript": "5.4.2",
+    "typedoc": "^0.25.8",
+    "typedoc-plugin-markdown": "^3.17.1",
+    "vite-plugin-dts": "^3.7.3",
+    "vite": "^5.1.4"
+  }
+}

package/src/animations/blur.tsx

@@ -0,0 +1,60 @@
+import { waitFor } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * BlurAnimation applies a blur effect to an element or its container
+ * during enter, exit, or both animations.
+ *
+ * Available animation modes:
+ * - "enter": Starts blurred and gradually becomes clear.
+ * - "exit": Starts clear and gradually becomes blurred.
+ * - "both": Blurs in, clears, then blurs out.
+ *
+ * @param elementRef - Reference to the main element.
+ * @param containerRef - Optional reference to a container element.
+ * @param interval - Duration (in frames or ms) of each blur transition.
+ * @param duration - Total duration of the animation.
+ * @param intensity - Maximum blur strength (default: 25).
+ * @param animate - Animation phase ("enter" | "exit" | "both").
+ */
+export const BlurAnimation = {
+  name: "blur",
+
+  /**
+   * Generator function controlling the blur animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    interval,
+    duration,
+    intensity = 25,
+    animate,
+  }: AnimationParams) {
+    // Choose containerRef if provided; otherwise, fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    let animationInterval = Math.min(interval, duration);
+    if (animate === "enter") {
+      // Start fully blurred
+      ref().filters.blur(intensity);
+      // Animate to no blur over 'interval'
+      yield* ref().filters.blur(0, animationInterval);
+    } else if (animate === "exit") {
+      // Wait for the time before exit animation starts
+      yield* waitFor(duration - animationInterval);
+      // Animate from no blur to full blur over 'interval'
+      yield* ref().filters.blur(intensity, animationInterval);
+    } else if (animate === "both") {
+      animationInterval = Math.min(interval, duration/2);
+      // Start fully blurred
+      ref().filters.blur(intensity);
+      // Animate to no blur
+      yield* ref().filters.blur(0, animationInterval);
+      // Wait until exit animation
+      yield* waitFor(duration - animationInterval);
+      // Animate to full blur again
+      yield* ref().filters.blur(intensity, animationInterval);
+    }
+  },
+};

package/src/animations/breathe.tsx

@@ -0,0 +1,60 @@
+import { Vector2 } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+import { getTimingFunction } from "../helpers/timing.utils";
+
+/**
+ * BreatheAnimation applies a smooth scale in/out effect to simulate
+ * a "breathing" motion.
+ *
+ * Available modes:
+ * - "in": Gradually scales down (shrinks) to the target intensity.
+ * - "out": Starts scaled down, then grows back to original size.
+ *
+ * @param elementRef - Reference to the main element to animate.
+ * @param containerRef - Optional reference to a container element.
+ * @param mode - Animation phase ("in" | "out").
+ * @param duration - Duration of the scaling animation.
+ * @param intensity - Target scale factor (default: 0.5).
+ */
+export const BreatheAnimation = {
+  name: "breathe",
+
+  /**
+   * Generator function controlling the breathing scale animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    mode,
+    duration,
+    intensity = 0.5,
+  }: AnimationParams) {
+    // Use containerRef if provided, otherwise fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    // Get the current scale of the element
+    const scale = ref().scale();
+
+    if (mode === "in") {
+      // Animate scaling down to (original scale * intensity)
+      yield* ref().scale(
+        new Vector2(scale.x * intensity, scale.y * intensity),
+        duration,
+        getTimingFunction("easeInSine")
+      );
+    }
+
+    if (mode === "out") {
+      // Immediately set to scaled down size
+      ref().scale(
+        new Vector2(scale.x * intensity, scale.y * intensity)
+      );
+      // Animate scaling back up to original size
+      yield* ref().scale(
+        new Vector2(scale.x, scale.y),
+        duration,
+        getTimingFunction("easeOutSine")
+      );
+    }
+  },
+};

package/src/animations/fade.tsx

@@ -0,0 +1,60 @@
+import { waitFor } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * FadeAnimation applies a simple fade-in and fade-out effect
+ * by adjusting opacity.
+ *
+ * Available animation modes:
+ * - "enter": Starts transparent and fades in to fully opaque.
+ * - "exit": Waits, then fades out to transparent.
+ * - "both": Fades in, waits, then fades out.
+ *
+ * @param elementRef - Reference to the main element to animate.
+ * @param containerRef - Optional reference to a container element.
+ * @param interval - Duration of the fade transition (in frames or ms).
+ * @param duration - Total duration of the animation.
+ * @param animate - Animation phase ("enter" | "exit" | "both").
+ */
+export const FadeAnimation = {
+  name: "fade",
+
+  /**
+   * Generator function controlling the fade animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    interval,
+    duration,
+    animate,
+  }: AnimationParams) {
+    // Use containerRef if provided, otherwise fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    let animationInterval = Math.min(interval, duration);
+    if (animate === "enter") {
+      // Start fully transparent
+      ref().opacity(0);
+      // Fade in to full opacity over 'interval'
+      yield* ref().opacity(1, animationInterval);
+
+    } else if (animate === "exit") {
+      // Wait until it's time to start fading out
+      yield* waitFor(duration - animationInterval);
+      // Fade out to transparent over 'interval'
+      yield* ref().opacity(0, animationInterval);
+
+    } else if (animate === "both") {
+      animationInterval = Math.min(interval, duration/2);
+      // Start fully transparent
+      ref().opacity(0);
+      // Fade in to full opacity
+      yield* ref().opacity(1, animationInterval);
+      // Wait for the remaining duration before fade-out
+      yield* waitFor(duration - animationInterval);
+      // Fade out to transparent
+      yield* ref().opacity(0, animationInterval);
+    }
+  },
+};

package/src/animations/photo-rise.tsx

@@ -0,0 +1,66 @@
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * PhotoRiseAnimation applies a smooth directional movement to a photo element.
+ *
+ * Behavior:
+ * - Starts offset in a given direction (up, down, left, or right).
+ * - Animates back to the original position over the specified duration.
+ *
+ * Available directions:
+ * - "up": Starts below and moves upward.
+ * - "down": Starts above and moves downward.
+ * - "left": Starts to the right and moves leftward.
+ * - "right": Starts to the left and moves rightward.
+ *
+ * @param elementRef - Reference to the photo element to animate.
+ * @param containerRef - Optional reference to a container element (required for this animation).
+ * @param direction - Direction of the movement ("up" | "down" | "left" | "right").
+ * @param duration - Duration of the movement animation.
+ * @param intensity - Offset distance in pixels (default: 200).
+ */
+export const PhotoRiseAnimation = {
+  name: "photo-rise",
+
+  /**
+   * Generator function controlling the photo rise animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    direction,
+    duration,
+    intensity = 200,
+  }: AnimationParams) {
+    // Only run if a containerRef is provided
+    if (containerRef) {
+      // Get the element's current position
+      const pos = elementRef().position();
+
+      if (direction === "up") {
+        // Start offset below
+        elementRef().y(pos.y + intensity);
+        // Animate moving upward to the original position
+        yield* elementRef().y(pos.y, duration);
+
+      } else if (direction === "down") {
+        // Start offset above
+        elementRef().y(pos.y - intensity);
+        // Animate moving downward to the original position
+        yield* elementRef().y(pos.y, duration);
+
+      } else if (direction === "left") {
+        // Start offset to the right
+        elementRef().x(pos.x + intensity);
+        // Animate moving left to the original position
+        yield* elementRef().x(pos.x, duration);
+
+      } else if (direction === "right") {
+        // Start offset to the left
+        elementRef().x(pos.x - intensity);
+        // Animate moving right to the original position
+        yield* elementRef().x(pos.x, duration);
+      }
+    }
+  },
+};

package/src/animations/photo-zoom.tsx

@@ -0,0 +1,73 @@
+import { Vector2 } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * PhotoZoomAnimation applies a smooth zoom-in or zoom-out effect
+ * on a photo element.
+ *
+ * Available animation modes:
+ * - "in": Starts zoomed in and smoothly scales back to the original size.
+ * - "out": Starts at normal size and smoothly scales up to the target zoom level.
+ *
+ * @param elementRef - Reference to the photo element to animate.
+ * @param containerRef - Optional reference to a container element (required for this animation).
+ * @param mode - Animation phase ("in" | "out").
+ * @param duration - Duration of the zoom animation.
+ * @param intensity - Zoom scale multiplier (default: 1.5).
+ */
+export const PhotoZoomAnimation = {
+  name: "photo-zoom",
+
+  /**
+   * Generator function controlling the photo zoom animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    mode,
+    duration,
+    intensity = 1.5,
+  }: AnimationParams) {
+    // Only run if a containerRef is provided
+    if (containerRef) {
+      // Get the element's current scale
+      const elementScale = elementRef().scale();
+
+      if (mode === "in") {
+        // Instantly set to zoomed-in scale
+        yield elementRef().scale(
+          new Vector2(
+            elementScale.x * intensity,
+            elementScale.y * intensity
+          )
+        );
+        // Smoothly scale back to original size over 'duration'
+        yield* elementRef().scale(
+          new Vector2(
+            elementScale.x,
+            elementScale.y
+          ),
+          duration
+        );
+      }
+
+      if (mode === "out") {
+        // Start at original scale
+        elementRef().scale(
+          new Vector2(
+            elementScale.x,
+            elementScale.y
+          )
+        );
+        // Smoothly scale up to zoomed-in scale over 'duration'
+        yield* elementRef().scale(
+          new Vector2(
+            elementScale.x * intensity,
+            elementScale.y * intensity
+          ),
+          duration
+        );
+      }
+    }
+  },
+};

package/src/animations/rise.tsx

@@ -0,0 +1,118 @@
+import { all, waitFor, delay } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * RiseAnimation combines vertical motion and opacity transitions
+ * to create a "rising" (or "falling") appearance/disappearance effect.
+ *
+ * Available animation modes:
+ * - "enter": Starts offset and transparent, moves into position while fading in.
+ * - "exit": Waits, then moves out of position while fading out.
+ * - "both": Enters, waits, and exits in a continuous sequence.
+ *
+ * @param elementRef - Reference to the main element to animate.
+ * @param containerRef - Optional reference to a container element.
+ * @param interval - Duration of movement and opacity transitions (default: 0.25).
+ * @param duration - Total duration of the animation.
+ * @param animate - Animation phase ("enter" | "exit" | "both").
+ * @param direction - Direction to animate ("up" or "down").
+ * @param intensity - Number of units to offset position vertically (default: 200).
+ */
+export const RiseAnimation = {
+  name: "rise",
+
+  /**
+   * Generator function controlling the rise/fall animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    interval = 0.25,
+    duration,
+    animate,
+    direction,
+    intensity = 200,
+  }: AnimationParams) {
+    // Use containerRef if provided, otherwise fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    // Get the element's current position
+    const pos = ref().position();
+
+    let animationInterval = Math.min(interval, duration);
+
+    if (animate === "enter") {
+      // Start fully transparent
+      ref().opacity(0);
+
+      if (direction === "up") {
+        // Offset element below final position
+        ref().y(pos.y + intensity);
+        // Animate moving up while fading in
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+      } else if (direction === "down") {
+        // Offset element above final position
+        ref().y(pos.y - intensity);
+        // Animate moving down while fading in
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+      }
+    } else if (animate === "exit") {
+      // Wait until exit animation starts
+      yield* waitFor(duration - animationInterval);
+
+      if (direction === "up") {
+        // Animate moving up while fading out (opacity fades slightly after motion starts)
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y - intensity, animationInterval)
+        );
+      } else if (direction === "down") {
+        // Animate moving down while fading out
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y + intensity, animationInterval)
+        );
+      }
+    } else if (animate === "both") {
+      animationInterval = Math.min(interval, duration/2);
+      // Start fully transparent
+      ref().opacity(0);
+
+      if (direction === "up") {
+        // Enter animation: move up while fading in
+        ref().y(pos.y + intensity);
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+        // Wait for the remaining duration
+        yield* waitFor(duration - animationInterval);
+        // Exit animation: move up further while fading out
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y - intensity, animationInterval)
+        );
+      } else if (direction === "down") {
+        // Enter animation: move down while fading in
+        ref().y(pos.y - intensity);
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+        // Wait for the remaining duration
+        yield* waitFor(duration - animationInterval);
+        // Exit animation: move down further while fading out
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y + intensity, animationInterval)
+        );
+      }
+    }
+  },
+};