@shotstack/shotstack-canvas 2.1.3 → 2.1.4

package/dist/entry.node.cjs

@@ -2727,7 +2727,8 @@ function calculatePopState(ctx, activeScale, speed) {
     return {
       scale: 0.5,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2735,28 +2736,33 @@ function calculatePopState(ctx, activeScale, speed) {
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
-  const endScale = isWordActive(ctx) ? activeScale : 1;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
   const scale = startScale + (endScale - startScale) * easedProgress;
   return {
     scale: Math.min(scale, activeScale),
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateFadeState(ctx, speed) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
   return {
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateSlideState(ctx, direction, speed, fontSize) {
@@ -2767,7 +2773,8 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       translateX: offset2.x,
       translateY: offset2.y,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2777,11 +2784,13 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
   const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
   return {
     translateX,
     translateY,
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function getDirectionOffset(direction, distance) {
@@ -2802,17 +2811,20 @@ function calculateBounceState(ctx, speed, fontSize) {
     return {
       translateY: -bounceDistance,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
   return {
     translateY: -bounceDistance * (1 - easedProgress),
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateTypewriterState(ctx, charCount, speed) {
@@ -2928,20 +2940,30 @@ var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
+  const hasActiveConfig = asset.active !== void 0;
   const baseColor = font?.color ?? "#ffffff";
-  const explicitActiveColor = active?.color;
-  const animStyle = asset.wordAnimation?.style ?? "highlight";
-  const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
-  const DEFAULT_ACTIVE_COLOR = "#ffff00";
-  const activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+  const baseOpacity = font?.opacity ?? 1;
+  let activeColor;
+  let activeOpacity;
+  if (!hasActiveConfig) {
+    activeColor = baseColor;
+    activeOpacity = baseOpacity;
+  } else {
+    const explicitActiveColor = active?.color;
+    const animStyle = asset.wordAnimation?.style ?? "highlight";
+    const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
+    const DEFAULT_ACTIVE_COLOR = "#ffff00";
+    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeOpacity = active?.opacity ?? baseOpacity;
+  }
   return {
     family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor,
     activeColor,
-    baseOpacity: font?.opacity ?? 1,
-    activeOpacity: active?.opacity ?? font?.opacity ?? 1,
+    baseOpacity,
+    activeOpacity,
     letterSpacing: asset.style?.letterSpacing ?? 0
   };
 }

package/dist/entry.node.js

@@ -2324,7 +2324,8 @@ function calculatePopState(ctx, activeScale, speed) {
     return {
       scale: 0.5,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2332,28 +2333,33 @@ function calculatePopState(ctx, activeScale, speed) {
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
-  const endScale = isWordActive(ctx) ? activeScale : 1;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
   const scale = startScale + (endScale - startScale) * easedProgress;
   return {
     scale: Math.min(scale, activeScale),
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateFadeState(ctx, speed) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
   return {
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateSlideState(ctx, direction, speed, fontSize) {
@@ -2364,7 +2370,8 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       translateX: offset2.x,
       translateY: offset2.y,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2374,11 +2381,13 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
   const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
   return {
     translateX,
     translateY,
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function getDirectionOffset(direction, distance) {
@@ -2399,17 +2408,20 @@ function calculateBounceState(ctx, speed, fontSize) {
     return {
       translateY: -bounceDistance,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
   return {
     translateY: -bounceDistance * (1 - easedProgress),
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateTypewriterState(ctx, charCount, speed) {
@@ -2525,20 +2537,30 @@ var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
+  const hasActiveConfig = asset.active !== void 0;
   const baseColor = font?.color ?? "#ffffff";
-  const explicitActiveColor = active?.color;
-  const animStyle = asset.wordAnimation?.style ?? "highlight";
-  const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
-  const DEFAULT_ACTIVE_COLOR = "#ffff00";
-  const activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+  const baseOpacity = font?.opacity ?? 1;
+  let activeColor;
+  let activeOpacity;
+  if (!hasActiveConfig) {
+    activeColor = baseColor;
+    activeOpacity = baseOpacity;
+  } else {
+    const explicitActiveColor = active?.color;
+    const animStyle = asset.wordAnimation?.style ?? "highlight";
+    const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
+    const DEFAULT_ACTIVE_COLOR = "#ffff00";
+    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeOpacity = active?.opacity ?? baseOpacity;
+  }
   return {
     family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor,
     activeColor,
-    baseOpacity: font?.opacity ?? 1,
-    activeOpacity: active?.opacity ?? font?.opacity ?? 1,
+    baseOpacity,
+    activeOpacity,
     letterSpacing: asset.style?.letterSpacing ?? 0
   };
 }

package/dist/entry.web.js

@@ -34359,7 +34359,8 @@ function calculatePopState(ctx, activeScale, speed) {
     return {
       scale: 0.5,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -34367,28 +34368,33 @@ function calculatePopState(ctx, activeScale, speed) {
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
-  const endScale = isWordActive(ctx) ? activeScale : 1;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
   const scale = startScale + (endScale - startScale) * easedProgress;
   return {
     scale: Math.min(scale, activeScale),
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateFadeState(ctx, speed) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
   return {
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateSlideState(ctx, direction, speed, fontSize) {
@@ -34399,7 +34405,8 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       translateX: offset2.x,
       translateY: offset2.y,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -34409,11 +34416,13 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
   const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
   return {
     translateX,
     translateY,
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function getDirectionOffset(direction, distance) {
@@ -34434,17 +34443,20 @@ function calculateBounceState(ctx, speed, fontSize) {
     return {
       translateY: -bounceDistance,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
   return {
     translateY: -bounceDistance * (1 - easedProgress),
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateTypewriterState(ctx, charCount, speed) {
@@ -34560,20 +34572,30 @@ var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
+  const hasActiveConfig = asset.active !== void 0;
   const baseColor = font?.color ?? "#ffffff";
-  const explicitActiveColor = active?.color;
-  const animStyle = asset.wordAnimation?.style ?? "highlight";
-  const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
-  const DEFAULT_ACTIVE_COLOR = "#ffff00";
-  const activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+  const baseOpacity = font?.opacity ?? 1;
+  let activeColor;
+  let activeOpacity;
+  if (!hasActiveConfig) {
+    activeColor = baseColor;
+    activeOpacity = baseOpacity;
+  } else {
+    const explicitActiveColor = active?.color;
+    const animStyle = asset.wordAnimation?.style ?? "highlight";
+    const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
+    const DEFAULT_ACTIVE_COLOR = "#ffff00";
+    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeOpacity = active?.opacity ?? baseOpacity;
+  }
   return {
     family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor,
     activeColor,
-    baseOpacity: font?.opacity ?? 1,
-    activeOpacity: active?.opacity ?? font?.opacity ?? 1,
+    baseOpacity,
+    activeOpacity,
     letterSpacing: asset.style?.letterSpacing ?? 0
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",