@shotstack/shotstack-canvas 2.1.5 → 2.1.7

package/dist/entry.node.d.ts

@@ -271,11 +271,6 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
         wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
@@ -356,39 +351,38 @@ declare const richCaptionAssetSchema: z.ZodObject<{
                 "line-through": "line-through";
             }>>;
         }, z.core.$strip>>;
-        stroke: z.ZodOptional<z.ZodObject<{
+        stroke: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             width: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
-        shadow: z.ZodOptional<z.ZodObject<{
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
+        shadow: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             offsetX: z.ZodOptional<z.ZodNumber>;
             offsetY: z.ZodOptional<z.ZodNumber>;
             blur: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
         scale: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strict>>;
     wordAnimation: z.ZodOptional<z.ZodObject<{
         style: z.ZodDefault<z.ZodEnum<{
             typewriter: "typewriter";
             none: "none";
+            pop: "pop";
             karaoke: "karaoke";
             highlight: "highlight";
-            pop: "pop";
             fade: "fade";
             slide: "slide";
             bounce: "bounce";
         }>>;
-        speed: z.ZodDefault<z.ZodNumber>;
         direction: z.ZodDefault<z.ZodEnum<{
             right: "right";
             left: "left";
             up: "up";
             down: "down";
         }>>;
-    }, z.core.$strict>>;
+    }, z.core.$strip>>;
     pauseThreshold: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     customFonts: z.ZodOptional<z.ZodArray<z.ZodObject<{
         src: z.ZodString;
@@ -414,11 +408,6 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
         wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
@@ -499,39 +488,38 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
                 "line-through": "line-through";
             }>>;
         }, z.core.$strip>>;
-        stroke: z.ZodOptional<z.ZodObject<{
+        stroke: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             width: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
-        shadow: z.ZodOptional<z.ZodObject<{
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
+        shadow: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             offsetX: z.ZodOptional<z.ZodNumber>;
             offsetY: z.ZodOptional<z.ZodNumber>;
             blur: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
         scale: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strict>>;
     wordAnimation: z.ZodOptional<z.ZodObject<{
         style: z.ZodDefault<z.ZodEnum<{
             typewriter: "typewriter";
             none: "none";
+            pop: "pop";
             karaoke: "karaoke";
             highlight: "highlight";
-            pop: "pop";
             fade: "fade";
             slide: "slide";
             bounce: "bounce";
         }>>;
-        speed: z.ZodDefault<z.ZodNumber>;
         direction: z.ZodDefault<z.ZodEnum<{
             right: "right";
             left: "left";
             up: "up";
             down: "down";
         }>>;
-    }, z.core.$strict>>;
+    }, z.core.$strip>>;
     pauseThreshold: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     customFonts: z.ZodOptional<z.ZodArray<z.ZodObject<{
         src: z.ZodString;
@@ -663,7 +651,6 @@ interface CaptionLayoutConfig {
     fontFamily: string;
     fontWeight: string | number;
     letterSpacing: number;
-    wordSpacing: number;
     lineHeight: number;
     textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
     pauseThreshold: number;
@@ -745,7 +732,6 @@ type AnimationStyle = "karaoke" | "highlight" | "pop" | "fade" | "slide" | "boun
 type AnimationDirection = "left" | "right" | "up" | "down";
 interface WordAnimationConfig {
     style: AnimationStyle;
-    speed: number;
     direction: AnimationDirection;
 }
 interface WordAnimationState {
@@ -1183,7 +1169,7 @@ interface FrameSchedule {
     uniqueFrameCount: number;
     skipRatio: number;
 }
-declare function createFrameSchedule(layout: CaptionLayout, durationMs: number, fps: number, animationStyle?: AnimationStyle, speed?: number): FrameSchedule;
+declare function createFrameSchedule(layout: CaptionLayout, durationMs: number, fps: number, animationStyle?: AnimationStyle): FrameSchedule;
 
 interface RichCaptionRendererOptions {
     width: number;
@@ -1252,7 +1238,6 @@ declare class RichCaptionRenderer {
     private mapVerticalAlign;
     private mapHorizontalAlign;
     private extractAnimationStyle;
-    private extractAnimationSpeed;
     private logProgress;
     private logCompletion;
     private checkMemoryUsage;

package/dist/entry.node.js

@@ -18,8 +18,7 @@ import {
   svgShadowSchema,
   svgTransformSchema,
   svgGradientStopSchema,
-  richCaptionActiveSchema as baseCaptionActiveSchema,
-  richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema
+  richCaptionActiveSchema as baseCaptionActiveSchema
 } from "@shotstack/schemas/zod";
 
 // src/config/canvas-constants.ts
@@ -188,8 +187,7 @@ var richCaptionFontSchema = z.object({
   weight: z.union([z.string(), z.number()]).default("400"),
   color: z.string().regex(HEX6).default("#ffffff"),
   opacity: z.number().min(0).max(1).default(1),
-  background: z.string().regex(HEX6).optional(),
-  textDecoration: z.enum(["none", "underline", "line-through"]).default("none")
+  background: z.string().regex(HEX6).optional()
 });
 var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
   font: z.object({
@@ -198,23 +196,28 @@ var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
     opacity: z.number().min(0).max(1).optional(),
     textDecoration: z.enum(["none", "underline", "line-through"]).optional()
   }).optional(),
-  stroke: z.object({
-    width: z.number().min(0).optional(),
-    color: z.string().regex(HEX6).optional(),
-    opacity: z.number().min(0).max(1).optional()
-  }).optional(),
-  shadow: z.object({
-    offsetX: z.number().optional(),
-    offsetY: z.number().optional(),
-    blur: z.number().min(0).optional(),
-    color: z.string().regex(HEX6).optional(),
-    opacity: z.number().min(0).max(1).optional()
-  }).optional(),
+  stroke: z.union([
+    z.object({
+      width: z.number().min(0).optional(),
+      color: z.string().regex(HEX6).optional(),
+      opacity: z.number().min(0).max(1).optional()
+    }),
+    z.literal("none")
+  ]).optional(),
+  shadow: z.union([
+    z.object({
+      offsetX: z.number().optional(),
+      offsetY: z.number().optional(),
+      blur: z.number().min(0).optional(),
+      color: z.string().regex(HEX6).optional(),
+      opacity: z.number().min(0).max(1).optional()
+    }),
+    z.literal("none")
+  ]).optional(),
   scale: z.number().min(0.5).max(2).default(1)
 });
-var richCaptionWordAnimationSchema = baseCaptionWordAnimationSchema.extend({
+var richCaptionWordAnimationSchema = z.object({
   style: z.enum(["karaoke", "highlight", "pop", "fade", "slide", "bounce", "typewriter", "none"]).default("highlight"),
-  speed: z.number().min(0.5).max(2).default(1),
   direction: z.enum(["left", "right", "up", "down"]).default("up")
 });
 var richCaptionAssetSchema = z.object({
@@ -1131,7 +1134,7 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
+      const { textTransform, desc, fontSize, letterSpacing, wordSpacing = 0, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
@@ -1161,9 +1164,10 @@ var LayoutEngine = class {
             char = String.fromCodePoint(codePoint);
           }
         }
+        const isSpace = char === " ";
         return {
           id: g.g,
-          xAdvance: g.ax * scale + letterSpacing,
+          xAdvance: g.ax * scale + letterSpacing + (isSpace ? wordSpacing : 0),
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
@@ -2440,10 +2444,10 @@ var CaptionLayoutEngine = class {
     let spaceWidth;
     if (config.measureTextWidth) {
       const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
-      spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
+      spaceWidth = config.measureTextWidth(" ", fontString);
     } else {
       const spaceWord = await this.measureWord(" ", measurementConfig);
-      spaceWidth = spaceWord.width + config.wordSpacing;
+      spaceWidth = spaceWord.width;
     }
     const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
@@ -2642,12 +2646,8 @@ function calculateWordProgress(ctx) {
 function isWordActive(ctx) {
   return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
 }
-function calculateKaraokeState(ctx, speed) {
+function calculateKaraokeState(ctx) {
   const isActive = isWordActive(ctx);
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
   if (ctx.currentTime < ctx.wordStart) {
     return {
       fillProgress: 0,
@@ -2655,7 +2655,7 @@ function calculateKaraokeState(ctx, speed) {
       opacity: 1
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  if (ctx.currentTime >= ctx.wordEnd) {
     return {
       fillProgress: 1,
       isActive: false,
@@ -2663,7 +2663,7 @@ function calculateKaraokeState(ctx, speed) {
     };
   }
   return {
-    fillProgress: calculateWordProgress(adjustedCtx),
+    fillProgress: calculateWordProgress(ctx),
     isActive,
     opacity: 1
   };
@@ -2676,7 +2676,7 @@ function calculateHighlightState(ctx) {
     opacity: 1
   };
 }
-function calculatePopState(ctx, activeScale, speed) {
+function calculatePopState(ctx, activeScale) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       scale: 0.5,
@@ -2685,9 +2685,7 @@ function calculatePopState(ctx, activeScale, speed) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
   const isActive = isWordActive(ctx);
@@ -2700,7 +2698,7 @@ function calculatePopState(ctx, activeScale, speed) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateFadeState(ctx, speed) {
+function calculateFadeState(ctx) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
@@ -2708,9 +2706,7 @@ function calculateFadeState(ctx, speed) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeInOutQuad(progress);
   const isActive = isWordActive(ctx);
   return {
@@ -2719,7 +2715,7 @@ function calculateFadeState(ctx, speed) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateSlideState(ctx, direction, speed, fontSize) {
+function calculateSlideState(ctx, direction, fontSize) {
   const slideDistance = fontSize * 1.5;
   if (ctx.currentTime < ctx.wordStart) {
     const offset2 = getDirectionOffset(direction, slideDistance);
@@ -2731,9 +2727,7 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutCirc(progress);
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
@@ -2759,7 +2753,7 @@ function getDirectionOffset(direction, distance) {
       return { x: 0, y: -distance };
   }
 }
-function calculateBounceState(ctx, speed, fontSize) {
+function calculateBounceState(ctx, fontSize) {
   const bounceDistance = fontSize * 0.8;
   if (ctx.currentTime < ctx.wordStart) {
     return {
@@ -2769,9 +2763,7 @@ function calculateBounceState(ctx, speed, fontSize) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutBounce(progress);
   const isActive = isWordActive(ctx);
   return {
@@ -2781,11 +2773,7 @@ function calculateBounceState(ctx, speed, fontSize) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateTypewriterState(ctx, charCount, speed) {
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
+function calculateTypewriterState(ctx, charCount) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       visibleCharacters: 0,
@@ -2794,7 +2782,7 @@ function calculateTypewriterState(ctx, charCount, speed) {
       fillProgress: 0
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  if (ctx.currentTime >= ctx.wordEnd) {
     return {
       visibleCharacters: charCount,
       opacity: 1,
@@ -2802,7 +2790,7 @@ function calculateTypewriterState(ctx, charCount, speed) {
       fillProgress: 0
     };
   }
-  const progress = calculateWordProgress(adjustedCtx);
+  const progress = calculateWordProgress(ctx);
   const visibleCharacters = Math.ceil(progress * charCount);
   const isActive = isWordActive(ctx);
   return {
@@ -2820,7 +2808,6 @@ function calculateNoneState(_ctx) {
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
-  const safeSpeed = config.speed > 0 ? config.speed : 1;
   const ctx = {
     wordStart,
     wordEnd,
@@ -2831,27 +2818,27 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, ac
   let partialState;
   switch (config.style) {
     case "karaoke":
-      partialState = calculateKaraokeState(ctx, safeSpeed);
+      partialState = calculateKaraokeState(ctx);
       break;
     case "highlight":
       partialState = calculateHighlightState(ctx);
       break;
     case "pop":
-      partialState = calculatePopState(ctx, activeScale, safeSpeed);
+      partialState = calculatePopState(ctx, activeScale);
       break;
     case "fade":
-      partialState = calculateFadeState(ctx, safeSpeed);
+      partialState = calculateFadeState(ctx);
       break;
     case "slide": {
       const slideDir = mirrorAnimationDirection(config.direction, isRTL);
-      partialState = calculateSlideState(ctx, slideDir, config.speed, fontSize);
+      partialState = calculateSlideState(ctx, slideDir, fontSize);
       break;
     }
     case "bounce":
-      partialState = calculateBounceState(ctx, safeSpeed, fontSize);
+      partialState = calculateBounceState(ctx, fontSize);
       break;
     case "typewriter":
-      partialState = calculateTypewriterState(ctx, charCount, safeSpeed);
+      partialState = calculateTypewriterState(ctx, charCount);
       break;
     case "none":
     default:
@@ -2884,7 +2871,6 @@ function calculateAnimationStatesForGroup(words, currentTime, config, activeScal
 function getDefaultAnimationConfig() {
   return {
     style: "highlight",
-    speed: 1,
     direction: "up"
   };
 }
@@ -2925,18 +2911,17 @@ function extractFontConfig(asset) {
 function extractStrokeConfig(asset, isActive) {
   const baseStroke = asset.stroke;
   const activeStroke = asset.active?.stroke;
-  if (!baseStroke && !activeStroke) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeStroke) {
+    if (activeStroke === "none") {
       return void 0;
     }
-    return {
-      width: activeStroke.width ?? baseStroke?.width ?? 0,
-      color: activeStroke.color ?? baseStroke?.color ?? "#000000",
-      opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
-    };
+    if (activeStroke && typeof activeStroke === "object") {
+      return {
+        width: activeStroke.width ?? baseStroke?.width ?? 0,
+        color: activeStroke.color ?? baseStroke?.color ?? "#000000",
+        opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
+      };
+    }
   }
   if (baseStroke) {
     return {
@@ -2950,20 +2935,19 @@ function extractStrokeConfig(asset, isActive) {
 function extractShadowConfig(asset, isActive) {
   const baseShadow = asset.shadow;
   const activeShadow = asset.active?.shadow;
-  if (!baseShadow && !activeShadow) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeShadow) {
+    if (activeShadow === "none") {
       return void 0;
     }
-    return {
-      offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
-      offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
-      blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
-      color: activeShadow.color ?? baseShadow?.color ?? "#000000",
-      opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
-    };
+    if (activeShadow && typeof activeShadow === "object") {
+      return {
+        offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
+        offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
+        blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
+        color: activeShadow.color ?? baseShadow?.color ?? "#000000",
+        opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
+      };
+    }
   }
   if (baseShadow) {
     return {
@@ -2979,7 +2963,12 @@ function extractShadowConfig(asset, isActive) {
 function extractBackgroundConfig(asset, isActive, fontSize) {
   const fontBackground = asset.font?.background;
   const activeBackground = asset.active?.font?.background;
-  const bgColor = isActive && activeBackground ? activeBackground : fontBackground;
+  let bgColor;
+  if (isActive) {
+    bgColor = activeBackground ?? fontBackground;
+  } else {
+    bgColor = fontBackground;
+  }
   if (!bgColor) {
     return void 0;
   }
@@ -3030,7 +3019,7 @@ function extractCaptionBorder(asset) {
   };
 }
 function extractTextDecoration(asset, isActive) {
-  const baseDecoration = asset.font?.textDecoration;
+  const baseDecoration = asset.style?.textDecoration;
   const activeDecoration = asset.active?.font?.textDecoration;
   if (isActive && activeDecoration !== void 0) {
     return activeDecoration === "none" ? void 0 : activeDecoration;
@@ -3047,7 +3036,6 @@ function extractAnimationConfig(asset) {
   }
   return {
     style: wordAnim.style ?? "highlight",
-    speed: wordAnim.speed ?? 1,
     direction: wordAnim.direction ?? "up"
   };
 }
@@ -5094,11 +5082,14 @@ function extractSvgDimensions(svgString) {
 }
 
 // src/core/canvas-text-measurer.ts
-async function createCanvasTextMeasurer() {
+async function createCanvasTextMeasurer(letterSpacing) {
   const canvasMod = await import("canvas");
   const canvas = canvasMod.createCanvas(1, 1);
   const ctx = canvas.getContext("2d");
   ctx.textBaseline = "alphabetic";
+  if (letterSpacing) {
+    ctx.letterSpacing = `${letterSpacing}px`;
+  }
   let lastFont = "";
   return (text, font) => {
     if (font !== lastFont) {
@@ -5467,7 +5458,7 @@ function findActiveWordIndex(store, groupWordIndices, timeMs) {
   }
   return -1;
 }
-function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, speed) {
+function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle) {
   if (groupWordIndices.length === 0) {
     return "idle";
   }
@@ -5484,7 +5475,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
     return "after";
   }
   if (TRANSITION_ANIMATION_STYLES.has(animationStyle)) {
-    const transitionDurationMs = (ANIMATION_DURATION_MS[animationStyle] ?? 200) / speed;
+    const transitionDurationMs = ANIMATION_DURATION_MS[animationStyle] ?? 200;
     for (const idx of groupWordIndices) {
       const wordStart = store.startTimes[idx];
       if (timeMs >= wordStart && timeMs < wordStart + transitionDurationMs) {
@@ -5506,7 +5497,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
   }
   return "before";
 }
-function computeStateSignature(layout, timeMs, animationStyle, speed) {
+function computeStateSignature(layout, timeMs, animationStyle) {
   const groupIndex = findGroupIndexAtTime(layout.groups, timeMs);
   if (groupIndex === -1) {
     return { groupIndex: -1, activeWordIndex: -1, animationPhase: "idle" };
@@ -5517,21 +5508,20 @@ function computeStateSignature(layout, timeMs, animationStyle, speed) {
     layout.store,
     group.wordIndices,
     timeMs,
-    animationStyle,
-    speed
+    animationStyle
   );
   return { groupIndex, activeWordIndex, animationPhase };
 }
 function signaturesMatch(a, b) {
   return a.groupIndex === b.groupIndex && a.activeWordIndex === b.activeWordIndex && a.animationPhase === b.animationPhase;
 }
-function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight", speed = 1) {
+function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight") {
   const totalFrames = Math.max(2, Math.round(durationMs / 1e3 * fps) + 1);
   const renderFrames = [];
   let previousSignature = null;
   for (let frame = 0; frame < totalFrames; frame++) {
     const timeMs = frame / (totalFrames - 1) * durationMs;
-    const signature = computeStateSignature(layout, timeMs, animationStyle, speed);
+    const signature = computeStateSignature(layout, timeMs, animationStyle);
     const isAnimating = signature.animationPhase === "animating";
     if (isAnimating || previousSignature === null || !signaturesMatch(signature, previousSignature)) {
       renderFrames.push({
@@ -5878,7 +5868,7 @@ var RichCaptionRenderer = class {
     }
     const font = asset.font;
     const style = asset.style;
-    const measureTextWidth = await createCanvasTextMeasurer();
+    const measureTextWidth = await createCanvasTextMeasurer(style?.letterSpacing ?? 0);
     const fontSize = font?.size ?? 24;
     const lineHeight = style?.lineHeight ?? 1.2;
     const padding = extractCaptionPadding(asset);
@@ -5899,7 +5889,6 @@ var RichCaptionRenderer = class {
       fontFamily: font?.family ?? "Roboto",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
-      wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
       lineHeight,
       textTransform: style?.textTransform ?? "none",
       pauseThreshold: this.currentAsset?.pauseThreshold ?? 500,
@@ -5933,14 +5922,12 @@ var RichCaptionRenderer = class {
       throw new Error("No asset loaded. Call loadAsset() first.");
     }
     const animationStyle = this.extractAnimationStyle();
-    const animationSpeed = this.extractAnimationSpeed();
     const durationMs = duration * 1e3;
     const schedule = createFrameSchedule(
       this.currentLayout,
       durationMs,
       this.fps,
-      animationStyle,
-      animationSpeed
+      animationStyle
     );
     const bgColor = options?.bgColor;
     const hasAlpha = !bgColor;
@@ -6101,13 +6088,11 @@ var RichCaptionRenderer = class {
       throw new Error("No asset loaded. Call loadAsset() first.");
     }
     const animationStyle = this.extractAnimationStyle();
-    const animationSpeed = this.extractAnimationSpeed();
     return createFrameSchedule(
       this.currentLayout,
       duration * 1e3,
       this.fps,
-      animationStyle,
-      animationSpeed
+      animationStyle
     );
   }
   getStats() {
@@ -6145,10 +6130,6 @@ var RichCaptionRenderer = class {
     const wordAnim = this.currentAsset?.wordAnimation;
     return wordAnim?.style ?? "highlight";
   }
-  extractAnimationSpeed() {
-    const wordAnim = this.currentAsset?.wordAnimation;
-    return wordAnim?.speed ?? 1;
-  }
   logProgress(pct, framesProcessed, totalFrames, uniqueProcessed, uniqueTotal, fps, eta) {
     if (typeof process !== "undefined" && process.stderr) {
       process.stderr.write(
@@ -6461,6 +6442,7 @@ async function createTextEngine(opts = {}) {
             text: asset.text,
             width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
+            wordSpacing: typeof asset.style?.wordSpacing === "number" ? asset.style.wordSpacing : 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,