@shotstack/shotstack-canvas 1.3.9 → 1.4.1

package/dist/entry.node.cjs

@@ -119,7 +119,7 @@ var animationSchema = import_joi.default.object({
   speed: import_joi.default.number().min(0.1).max(10).default(1),
   duration: import_joi.default.number().min(CANVAS_CONFIG.LIMITS.minDuration).max(CANVAS_CONFIG.LIMITS.maxDuration).optional(),
   style: import_joi.default.string().valid("character", "word").optional().when("preset", {
-    is: import_joi.default.valid("typewriter", "shift"),
+    is: import_joi.default.valid("typewriter", "shift", "fadeIn", "slideIn"),
     then: import_joi.default.optional(),
     otherwise: import_joi.default.forbidden()
   }),
@@ -419,7 +419,8 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
+    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -732,13 +733,11 @@ var LayoutEngine = class {
         const glyph = glyphs[i];
         const glyphWidth = glyph.xAdvance;
         if (glyph.char === "\n") {
-          if (currentLine.length > 0) {
-            lines.push({
-              glyphs: currentLine,
-              width: currentWidth,
-              y: 0
-            });
-          }
+          lines.push({
+            glyphs: currentLine,
+            width: currentWidth,
+            y: 0
+          });
           currentLine = [];
           currentWidth = 0;
           lastBreakIndex = i;
@@ -997,7 +996,11 @@ function applyAnimation(ops, lines, p) {
   if (!p.anim || !p.anim.preset) return ops;
   const { preset } = p.anim;
   const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
-  const duration = p.anim.duration ?? Math.max(0.3, totalGlyphs / 30 / p.anim.speed);
+  let autoDuration = Math.max(0.3, totalGlyphs / (30 * p.anim.speed));
+  if (p.clipDuration && !p.anim.duration) {
+    autoDuration = Math.min(autoDuration, p.clipDuration * 0.9);
+  }
+  const duration = p.anim.duration ?? autoDuration;
   const progress = Math.max(0, Math.min(1, p.t / duration));
   switch (preset) {
     case "typewriter":
@@ -1011,9 +1014,9 @@ function applyAnimation(ops, lines, p) {
         duration
       );
     case "fadeIn":
-      return applyFadeInAnimation(ops, progress);
+      return applyFadeInAnimation(ops, lines, progress, p.anim.style, p.fontSize, duration);
     case "slideIn":
-      return applySlideInAnimation(ops, progress, p.anim.direction ?? "left", p.fontSize);
+      return applySlideInAnimation(ops, lines, progress, p.anim.direction ?? "left", p.fontSize, p.anim.style, duration);
     case "shift":
       return applyShiftAnimation(
         ops,
@@ -1034,7 +1037,7 @@ function applyAnimation(ops, lines, p) {
         duration
       );
     case "movingLetters":
-      return applyMovingLettersAnimation(ops, progress, p.anim.direction ?? "up", p.fontSize);
+      return applyMovingLettersAnimation(ops, p.t, p.anim.direction ?? "up", p.fontSize);
     default:
       return ops;
   }
@@ -1216,20 +1219,177 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   }
   return result;
 }
-function applyFadeInAnimation(ops, progress) {
-  const alpha = easeOutQuad(progress);
-  const scale = 0.95 + 0.05 * alpha;
-  return scaleAndFade(ops, alpha, scale);
+function applyFadeInAnimation(ops, lines, progress, style, fontSize, duration) {
+  const byWord = style === "word";
+  const byCharacter = style === "character";
+  if (!byWord && !byCharacter) {
+    const alpha = easeOutQuad(progress);
+    const scale = 0.95 + 0.05 * alpha;
+    return scaleAndFade(ops, alpha, scale);
+  }
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutQuad(Math.min(1, local));
+      const animated = { ...op };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
 }
-function applySlideInAnimation(ops, progress, direction, fontSize) {
-  const easeProgress = easeOutCubic(progress);
-  const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
-  const alpha = easeOutQuad(progress);
-  return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+function applySlideInAnimation(ops, lines, progress, direction, fontSize, style, duration) {
+  const byWord = style === "word";
+  const byCharacter = style === "character";
+  if (!byWord && !byCharacter) {
+    const easeProgress = easeOutCubic(progress);
+    const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
+    const alpha = easeOutQuad(progress);
+    return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+  }
+  const startOffsets = {
+    left: { x: fontSize * 2, y: 0 },
+    right: { x: -fontSize * 2, y: 0 },
+    up: { x: 0, y: fontSize * 2 },
+    down: { x: 0, y: -fontSize * 2 }
+  };
+  const offset = startOffsets[direction];
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op, x: op.x + offset.x, y: op.y + offset.y };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutCubic(Math.min(1, local));
+      const dx = offset.x * (1 - ease);
+      const dy = offset.y * (1 - ease);
+      const animated = { ...op, x: op.x + dx, y: op.y + dy };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
 }
-function applyMovingLettersAnimation(ops, progress, direction, fontSize) {
+function applyMovingLettersAnimation(ops, time, direction, fontSize) {
   const amp = fontSize * 0.3;
-  return waveTransform(ops, direction, amp, progress);
+  return waveTransform(ops, direction, amp, time);
 }
 function getWordSegments(lines) {
   const segments = [];
@@ -1387,14 +1547,15 @@ function translateGlyphOps(ops, dx, dy, alpha = 1) {
     return op;
   });
 }
-function waveTransform(ops, dir, amp, p) {
+function waveTransform(ops, dir, amp, time) {
   let glyphIndex = 0;
+  const fadeInDuration = 0.5;
+  const waveAlpha = Math.min(1, time / fadeInDuration);
   return ops.map((op) => {
     if (op.op === "FillPath" || op.op === "StrokePath") {
-      const phase = Math.sin(glyphIndex / 5 * Math.PI + p * Math.PI * 4);
+      const phase = Math.sin(glyphIndex / 5 * Math.PI + time * Math.PI * 2);
       const dx = dir === "left" || dir === "right" ? phase * amp * (dir === "left" ? -1 : 1) : 0;
       const dy = dir === "up" || dir === "down" ? phase * amp * (dir === "up" ? -1 : 1) : 0;
-      const waveAlpha = Math.min(1, p * 2);
       if (op.op === "FillPath") {
         if (!isShadowFill(op)) glyphIndex++;
         const out = { ...op, x: op.x + dx, y: op.y + dy };
@@ -2121,7 +2282,7 @@ async function createTextEngine(opts = {}) {
         );
       }
     },
-    async renderFrame(asset, tSeconds) {
+    async renderFrame(asset, tSeconds, clipDuration) {
       try {
         const main = await ensureFonts(asset);
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
@@ -2196,6 +2357,7 @@ async function createTextEngine(opts = {}) {
           const ops = applyAnimation(ops0, lines, {
             t: tSeconds,
             fontSize: main.size,
+            clipDuration,
             anim: asset.animation ? {
               preset: asset.animation.preset,
               speed: asset.animation.speed,
@@ -2243,14 +2405,15 @@ async function createTextEngine(opts = {}) {
           width: asset.width ?? width,
           height: asset.height ?? height,
           fps,
-          duration: asset.animation?.duration ?? 3,
+          duration: options.duration ?? 3,
           outputPath: options.outputPath ?? "output.mp4",
           pixelRatio: asset.pixelRatio ?? pixelRatio,
           hasAlpha: needsAlpha,
           ...options
         };
+        const clipDuration = finalOptions.duration;
         const frameGenerator = async (time) => {
-          return this.renderFrame(asset, time);
+          return this.renderFrame(asset, time, clipDuration);
         };
         const actualOutputPath = await videoGenerator.generateVideo(frameGenerator, finalOptions);
         return actualOutputPath;

package/dist/entry.node.d.cts

@@ -239,7 +239,7 @@ declare function createTextEngine(opts?: {
         weight?: string | number;
         style?: string;
     }): Promise<void>;
-    renderFrame(asset: RichTextValidated, tSeconds: number): Promise<DrawOp[]>;
+    renderFrame(asset: RichTextValidated, tSeconds: number, clipDuration?: number): Promise<DrawOp[]>;
     createRenderer(p: {
         width?: number;
         height?: number;

package/dist/entry.node.d.ts

@@ -239,7 +239,7 @@ declare function createTextEngine(opts?: {
         weight?: string | number;
         style?: string;
     }): Promise<void>;
-    renderFrame(asset: RichTextValidated, tSeconds: number): Promise<DrawOp[]>;
+    renderFrame(asset: RichTextValidated, tSeconds: number, clipDuration?: number): Promise<DrawOp[]>;
     createRenderer(p: {
         width?: number;
         height?: number;

package/dist/entry.node.js

@@ -81,7 +81,7 @@ var animationSchema = Joi.object({
   speed: Joi.number().min(0.1).max(10).default(1),
   duration: Joi.number().min(CANVAS_CONFIG.LIMITS.minDuration).max(CANVAS_CONFIG.LIMITS.maxDuration).optional(),
   style: Joi.string().valid("character", "word").optional().when("preset", {
-    is: Joi.valid("typewriter", "shift"),
+    is: Joi.valid("typewriter", "shift", "fadeIn", "slideIn"),
     then: Joi.optional(),
     otherwise: Joi.forbidden()
   }),
@@ -380,7 +380,8 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
+    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -693,13 +694,11 @@ var LayoutEngine = class {
         const glyph = glyphs[i];
         const glyphWidth = glyph.xAdvance;
         if (glyph.char === "\n") {
-          if (currentLine.length > 0) {
-            lines.push({
-              glyphs: currentLine,
-              width: currentWidth,
-              y: 0
-            });
-          }
+          lines.push({
+            glyphs: currentLine,
+            width: currentWidth,
+            y: 0
+          });
           currentLine = [];
           currentWidth = 0;
           lastBreakIndex = i;
@@ -958,7 +957,11 @@ function applyAnimation(ops, lines, p) {
   if (!p.anim || !p.anim.preset) return ops;
   const { preset } = p.anim;
   const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
-  const duration = p.anim.duration ?? Math.max(0.3, totalGlyphs / 30 / p.anim.speed);
+  let autoDuration = Math.max(0.3, totalGlyphs / (30 * p.anim.speed));
+  if (p.clipDuration && !p.anim.duration) {
+    autoDuration = Math.min(autoDuration, p.clipDuration * 0.9);
+  }
+  const duration = p.anim.duration ?? autoDuration;
   const progress = Math.max(0, Math.min(1, p.t / duration));
   switch (preset) {
     case "typewriter":
@@ -972,9 +975,9 @@ function applyAnimation(ops, lines, p) {
         duration
       );
     case "fadeIn":
-      return applyFadeInAnimation(ops, progress);
+      return applyFadeInAnimation(ops, lines, progress, p.anim.style, p.fontSize, duration);
     case "slideIn":
-      return applySlideInAnimation(ops, progress, p.anim.direction ?? "left", p.fontSize);
+      return applySlideInAnimation(ops, lines, progress, p.anim.direction ?? "left", p.fontSize, p.anim.style, duration);
     case "shift":
       return applyShiftAnimation(
         ops,
@@ -995,7 +998,7 @@ function applyAnimation(ops, lines, p) {
         duration
       );
     case "movingLetters":
-      return applyMovingLettersAnimation(ops, progress, p.anim.direction ?? "up", p.fontSize);
+      return applyMovingLettersAnimation(ops, p.t, p.anim.direction ?? "up", p.fontSize);
     default:
       return ops;
   }
@@ -1177,20 +1180,177 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   }
   return result;
 }
-function applyFadeInAnimation(ops, progress) {
-  const alpha = easeOutQuad(progress);
-  const scale = 0.95 + 0.05 * alpha;
-  return scaleAndFade(ops, alpha, scale);
+function applyFadeInAnimation(ops, lines, progress, style, fontSize, duration) {
+  const byWord = style === "word";
+  const byCharacter = style === "character";
+  if (!byWord && !byCharacter) {
+    const alpha = easeOutQuad(progress);
+    const scale = 0.95 + 0.05 * alpha;
+    return scaleAndFade(ops, alpha, scale);
+  }
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutQuad(Math.min(1, local));
+      const animated = { ...op };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
 }
-function applySlideInAnimation(ops, progress, direction, fontSize) {
-  const easeProgress = easeOutCubic(progress);
-  const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
-  const alpha = easeOutQuad(progress);
-  return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+function applySlideInAnimation(ops, lines, progress, direction, fontSize, style, duration) {
+  const byWord = style === "word";
+  const byCharacter = style === "character";
+  if (!byWord && !byCharacter) {
+    const easeProgress = easeOutCubic(progress);
+    const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
+    const alpha = easeOutQuad(progress);
+    return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+  }
+  const startOffsets = {
+    left: { x: fontSize * 2, y: 0 },
+    right: { x: -fontSize * 2, y: 0 },
+    up: { x: 0, y: fontSize * 2 },
+    down: { x: 0, y: -fontSize * 2 }
+  };
+  const offset = startOffsets[direction];
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op, x: op.x + offset.x, y: op.y + offset.y };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutCubic(Math.min(1, local));
+      const dx = offset.x * (1 - ease);
+      const dy = offset.y * (1 - ease);
+      const animated = { ...op, x: op.x + dx, y: op.y + dy };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
 }
-function applyMovingLettersAnimation(ops, progress, direction, fontSize) {
+function applyMovingLettersAnimation(ops, time, direction, fontSize) {
   const amp = fontSize * 0.3;
-  return waveTransform(ops, direction, amp, progress);
+  return waveTransform(ops, direction, amp, time);
 }
 function getWordSegments(lines) {
   const segments = [];
@@ -1348,14 +1508,15 @@ function translateGlyphOps(ops, dx, dy, alpha = 1) {
     return op;
   });
 }
-function waveTransform(ops, dir, amp, p) {
+function waveTransform(ops, dir, amp, time) {
   let glyphIndex = 0;
+  const fadeInDuration = 0.5;
+  const waveAlpha = Math.min(1, time / fadeInDuration);
   return ops.map((op) => {
     if (op.op === "FillPath" || op.op === "StrokePath") {
-      const phase = Math.sin(glyphIndex / 5 * Math.PI + p * Math.PI * 4);
+      const phase = Math.sin(glyphIndex / 5 * Math.PI + time * Math.PI * 2);
       const dx = dir === "left" || dir === "right" ? phase * amp * (dir === "left" ? -1 : 1) : 0;
       const dy = dir === "up" || dir === "down" ? phase * amp * (dir === "up" ? -1 : 1) : 0;
-      const waveAlpha = Math.min(1, p * 2);
       if (op.op === "FillPath") {
         if (!isShadowFill(op)) glyphIndex++;
         const out = { ...op, x: op.x + dx, y: op.y + dy };
@@ -2082,7 +2243,7 @@ async function createTextEngine(opts = {}) {
         );
       }
     },
-    async renderFrame(asset, tSeconds) {
+    async renderFrame(asset, tSeconds, clipDuration) {
       try {
         const main = await ensureFonts(asset);
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
@@ -2157,6 +2318,7 @@ async function createTextEngine(opts = {}) {
           const ops = applyAnimation(ops0, lines, {
             t: tSeconds,
             fontSize: main.size,
+            clipDuration,
             anim: asset.animation ? {
               preset: asset.animation.preset,
               speed: asset.animation.speed,
@@ -2204,14 +2366,15 @@ async function createTextEngine(opts = {}) {
           width: asset.width ?? width,
           height: asset.height ?? height,
           fps,
-          duration: asset.animation?.duration ?? 3,
+          duration: options.duration ?? 3,
           outputPath: options.outputPath ?? "output.mp4",
           pixelRatio: asset.pixelRatio ?? pixelRatio,
           hasAlpha: needsAlpha,
           ...options
         };
+        const clipDuration = finalOptions.duration;
         const frameGenerator = async (time) => {
-          return this.renderFrame(asset, time);
+          return this.renderFrame(asset, time, clipDuration);
         };
         const actualOutputPath = await videoGenerator.generateVideo(frameGenerator, finalOptions);
         return actualOutputPath;

package/dist/entry.web.d.ts

@@ -222,7 +222,7 @@ declare function createTextEngine(opts?: {
         weight?: string | number;
         style?: string;
     }): Promise<void>;
-    renderFrame(asset: RichTextValidated, tSeconds: number): Promise<DrawOp[]>;
+    renderFrame(asset: RichTextValidated, tSeconds: number, clipDuration?: number): Promise<DrawOp[]>;
     createRenderer(canvas: HTMLCanvasElement | OffscreenCanvas): {
         render(ops: DrawOp[]): Promise<void>;
     };

package/dist/entry.web.js

@@ -85,7 +85,7 @@ var animationSchema = Joi.object({
   speed: Joi.number().min(0.1).max(10).default(1),
   duration: Joi.number().min(CANVAS_CONFIG.LIMITS.minDuration).max(CANVAS_CONFIG.LIMITS.maxDuration).optional(),
   style: Joi.string().valid("character", "word").optional().when("preset", {
-    is: Joi.valid("typewriter", "shift"),
+    is: Joi.valid("typewriter", "shift", "fadeIn", "slideIn"),
     then: Joi.optional(),
     otherwise: Joi.forbidden()
   }),
@@ -383,7 +383,8 @@ var _FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
+    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -698,13 +699,11 @@ var LayoutEngine = class {
         const glyph = glyphs[i];
         const glyphWidth = glyph.xAdvance;
         if (glyph.char === "\n") {
-          if (currentLine.length > 0) {
-            lines.push({
-              glyphs: currentLine,
-              width: currentWidth,
-              y: 0
-            });
-          }
+          lines.push({
+            glyphs: currentLine,
+            width: currentWidth,
+            y: 0
+          });
           currentLine = [];
           currentWidth = 0;
           lastBreakIndex = i;
@@ -963,7 +962,11 @@ function applyAnimation(ops, lines, p) {
   if (!p.anim || !p.anim.preset) return ops;
   const { preset } = p.anim;
   const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
-  const duration = p.anim.duration ?? Math.max(0.3, totalGlyphs / 30 / p.anim.speed);
+  let autoDuration = Math.max(0.3, totalGlyphs / (30 * p.anim.speed));
+  if (p.clipDuration && !p.anim.duration) {
+    autoDuration = Math.min(autoDuration, p.clipDuration * 0.9);
+  }
+  const duration = p.anim.duration ?? autoDuration;
   const progress = Math.max(0, Math.min(1, p.t / duration));
   switch (preset) {
     case "typewriter":
@@ -977,9 +980,9 @@ function applyAnimation(ops, lines, p) {
         duration
       );
     case "fadeIn":
-      return applyFadeInAnimation(ops, progress);
+      return applyFadeInAnimation(ops, lines, progress, p.anim.style, p.fontSize, duration);
     case "slideIn":
-      return applySlideInAnimation(ops, progress, p.anim.direction ?? "left", p.fontSize);
+      return applySlideInAnimation(ops, lines, progress, p.anim.direction ?? "left", p.fontSize, p.anim.style, duration);
     case "shift":
       return applyShiftAnimation(
         ops,
@@ -1000,7 +1003,7 @@ function applyAnimation(ops, lines, p) {
         duration
       );
     case "movingLetters":
-      return applyMovingLettersAnimation(ops, progress, p.anim.direction ?? "up", p.fontSize);
+      return applyMovingLettersAnimation(ops, p.t, p.anim.direction ?? "up", p.fontSize);
     default:
       return ops;
   }
@@ -1182,20 +1185,177 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   }
   return result;
 }
-function applyFadeInAnimation(ops, progress) {
-  const alpha = easeOutQuad(progress);
-  const scale = 0.95 + 0.05 * alpha;
-  return scaleAndFade(ops, alpha, scale);
+function applyFadeInAnimation(ops, lines, progress, style, fontSize, duration) {
+  const byWord = style === "word";
+  const byCharacter = style === "character";
+  if (!byWord && !byCharacter) {
+    const alpha = easeOutQuad(progress);
+    const scale = 0.95 + 0.05 * alpha;
+    return scaleAndFade(ops, alpha, scale);
+  }
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutQuad(Math.min(1, local));
+      const animated = { ...op };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
 }
-function applySlideInAnimation(ops, progress, direction, fontSize) {
-  const easeProgress = easeOutCubic(progress);
-  const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
-  const alpha = easeOutQuad(progress);
-  return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+function applySlideInAnimation(ops, lines, progress, direction, fontSize, style, duration) {
+  const byWord = style === "word";
+  const byCharacter = style === "character";
+  if (!byWord && !byCharacter) {
+    const easeProgress = easeOutCubic(progress);
+    const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
+    const alpha = easeOutQuad(progress);
+    return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+  }
+  const startOffsets = {
+    left: { x: fontSize * 2, y: 0 },
+    right: { x: -fontSize * 2, y: 0 },
+    up: { x: 0, y: fontSize * 2 },
+    down: { x: 0, y: -fontSize * 2 }
+  };
+  const offset = startOffsets[direction];
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op, x: op.x + offset.x, y: op.y + offset.y };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutCubic(Math.min(1, local));
+      const dx = offset.x * (1 - ease);
+      const dy = offset.y * (1 - ease);
+      const animated = { ...op, x: op.x + dx, y: op.y + dy };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
 }
-function applyMovingLettersAnimation(ops, progress, direction, fontSize) {
+function applyMovingLettersAnimation(ops, time, direction, fontSize) {
   const amp = fontSize * 0.3;
-  return waveTransform(ops, direction, amp, progress);
+  return waveTransform(ops, direction, amp, time);
 }
 function getWordSegments(lines) {
   const segments = [];
@@ -1353,14 +1513,15 @@ function translateGlyphOps(ops, dx, dy, alpha = 1) {
     return op;
   });
 }
-function waveTransform(ops, dir, amp, p) {
+function waveTransform(ops, dir, amp, time) {
   let glyphIndex = 0;
+  const fadeInDuration = 0.5;
+  const waveAlpha = Math.min(1, time / fadeInDuration);
   return ops.map((op) => {
     if (op.op === "FillPath" || op.op === "StrokePath") {
-      const phase = Math.sin(glyphIndex / 5 * Math.PI + p * Math.PI * 4);
+      const phase = Math.sin(glyphIndex / 5 * Math.PI + time * Math.PI * 2);
       const dx = dir === "left" || dir === "right" ? phase * amp * (dir === "left" ? -1 : 1) : 0;
       const dy = dir === "up" || dir === "down" ? phase * amp * (dir === "up" ? -1 : 1) : 0;
-      const waveAlpha = Math.min(1, p * 2);
       if (op.op === "FillPath") {
         if (!isShadowFill(op)) glyphIndex++;
         const out = { ...op, x: op.x + dx, y: op.y + dy };
@@ -1803,7 +1964,7 @@ async function createTextEngine(opts = {}) {
         );
       }
     },
-    async renderFrame(asset, tSeconds) {
+    async renderFrame(asset, tSeconds, clipDuration) {
       try {
         const main = await ensureFonts(asset);
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
@@ -1878,6 +2039,7 @@ async function createTextEngine(opts = {}) {
           const ops = applyAnimation(ops0, lines, {
             t: tSeconds,
             fontSize: main.size,
+            clipDuration,
             anim: asset.animation ? {
               preset: asset.animation.preset,
               speed: asset.animation.speed,

package/package.json

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