@twick/visualizer 0.14.0 → 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 [@twick/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,20 +1,26 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.14.0",
+  "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.0",
-    "@twick/core": "^0.14.0",
-    "@twick/renderer": "^0.14.0",
-    "@twick/vite-plugin": "^0.14.0",
+    "@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.0"
+    "@twick/media-utils": "0.14.2"
   },
   "devDependencies": {
     "@twick/cli": "0.14.0",
@@ -24,11 +30,5 @@
     "typedoc-plugin-markdown": "^3.17.1",
     "vite-plugin-dts": "^3.7.3",
     "vite": "^5.1.4"
-  },
-  "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"
   }
-}
+}

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

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

@@ -1,60 +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")
-      );
-    }
-  },
-};
+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

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

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