@shotstack/shotstack-canvas 1.4.0 → 1.4.2

package/dist/entry.node.cjs

@@ -99,7 +99,6 @@ var fontSchema = import_joi.default.object({
   family: import_joi.default.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   size: import_joi.default.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: import_joi.default.alternatives().try(import_joi.default.string(), import_joi.default.number()).default("400"),
-  style: import_joi.default.string().valid("normal", "italic", "oblique").default("normal"),
   color: import_joi.default.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
   opacity: import_joi.default.number().min(0).max(1).default(1)
 }).unknown(false);
@@ -119,7 +118,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,8 +418,7 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
-    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
+    return `${desc.family}__${desc.weight ?? "400"}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -469,14 +467,12 @@ var FontRegistry = class _FontRegistry {
     try {
       const bytes = await loader({
         family: desc.family,
-        weight: desc.weight ?? "400",
-        style: desc.style ?? "normal"
+        weight: desc.weight ?? "400"
       });
       if (!bytes) return false;
       await this.registerFromBytes(bytes, {
         family: desc.family,
-        weight: desc.weight ?? "400",
-        style: desc.style ?? "normal"
+        weight: desc.weight ?? "400"
       });
       return true;
     } catch {
@@ -733,13 +729,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;
@@ -998,7 +992,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":
@@ -1012,9 +1010,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,
@@ -1035,7 +1033,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;
   }
@@ -1217,20 +1215,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 = [];
@@ -1388,14 +1543,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 };
@@ -2060,8 +2216,7 @@ async function createTextEngine(opts = {}) {
             const bytes = await loadFileOrHttpToArrayBuffer(cf.src);
             await fonts.registerFromBytes(bytes, {
               family: cf.family,
-              weight: cf.weight ?? "400",
-              style: cf.style ?? "normal"
+              weight: cf.weight ?? "400"
             });
           } catch (err) {
             throw new Error(
@@ -2073,7 +2228,6 @@ async function createTextEngine(opts = {}) {
       const main = asset.font ?? {
         family: "Roboto",
         weight: "400",
-        style: "normal",
         size: 48,
         color: "#000000",
         opacity: 1
@@ -2122,13 +2276,13 @@ 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 };
+        const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          const emojiDesc = { family: "NotoEmoji", weight: "400" };
           let emojiAvailable = false;
           try {
             await fonts.getFace(emojiDesc);
@@ -2169,7 +2323,6 @@ async function createTextEngine(opts = {}) {
               family: main.family,
               size: main.size,
               weight: `${main.weight}`,
-              style: main.style,
               color: main.color,
               opacity: main.opacity
             },
@@ -2197,6 +2350,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,
@@ -2244,14 +2398,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

@@ -31,7 +31,6 @@ type RichTextValidated = Required<{
         family: string;
         size: number;
         weight: string | number;
-        style: "normal" | "italic" | "oblique";
         color: string;
         opacity: number;
     };
@@ -124,7 +123,6 @@ type Glyph = {
     fontDesc?: {
         family: string;
         weight?: string | number;
-        style?: string;
     };
 };
 type ShapedLine = {
@@ -232,14 +230,12 @@ declare function createTextEngine(opts?: {
     registerFontFromFile(path: string, desc: {
         family: string;
         weight?: string | number;
-        style?: string;
     }): Promise<void>;
     registerFontFromUrl(url: string, desc: {
         family: string;
         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

@@ -31,7 +31,6 @@ type RichTextValidated = Required<{
         family: string;
         size: number;
         weight: string | number;
-        style: "normal" | "italic" | "oblique";
         color: string;
         opacity: number;
     };
@@ -124,7 +123,6 @@ type Glyph = {
     fontDesc?: {
         family: string;
         weight?: string | number;
-        style?: string;
     };
 };
 type ShapedLine = {
@@ -232,14 +230,12 @@ declare function createTextEngine(opts?: {
     registerFontFromFile(path: string, desc: {
         family: string;
         weight?: string | number;
-        style?: string;
     }): Promise<void>;
     registerFontFromUrl(url: string, desc: {
         family: string;
         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

@@ -61,7 +61,6 @@ var fontSchema = Joi.object({
   family: Joi.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
-  style: Joi.string().valid("normal", "italic", "oblique").default("normal"),
   color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
   opacity: Joi.number().min(0).max(1).default(1)
 }).unknown(false);
@@ -81,7 +80,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,8 +379,7 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
-    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
+    return `${desc.family}__${desc.weight ?? "400"}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -430,14 +428,12 @@ var FontRegistry = class _FontRegistry {
     try {
       const bytes = await loader({
         family: desc.family,
-        weight: desc.weight ?? "400",
-        style: desc.style ?? "normal"
+        weight: desc.weight ?? "400"
       });
       if (!bytes) return false;
       await this.registerFromBytes(bytes, {
         family: desc.family,
-        weight: desc.weight ?? "400",
-        style: desc.style ?? "normal"
+        weight: desc.weight ?? "400"
       });
       return true;
     } catch {
@@ -694,13 +690,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;
@@ -959,7 +953,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":
@@ -973,9 +971,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,
@@ -996,7 +994,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;
   }
@@ -1178,20 +1176,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 = [];
@@ -1349,14 +1504,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 };
@@ -2021,8 +2177,7 @@ async function createTextEngine(opts = {}) {
             const bytes = await loadFileOrHttpToArrayBuffer(cf.src);
             await fonts.registerFromBytes(bytes, {
               family: cf.family,
-              weight: cf.weight ?? "400",
-              style: cf.style ?? "normal"
+              weight: cf.weight ?? "400"
             });
           } catch (err) {
             throw new Error(
@@ -2034,7 +2189,6 @@ async function createTextEngine(opts = {}) {
       const main = asset.font ?? {
         family: "Roboto",
         weight: "400",
-        style: "normal",
         size: 48,
         color: "#000000",
         opacity: 1
@@ -2083,13 +2237,13 @@ 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 };
+        const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          const emojiDesc = { family: "NotoEmoji", weight: "400" };
           let emojiAvailable = false;
           try {
             await fonts.getFace(emojiDesc);
@@ -2130,7 +2284,6 @@ async function createTextEngine(opts = {}) {
               family: main.family,
               size: main.size,
               weight: `${main.weight}`,
-              style: main.style,
               color: main.color,
               opacity: main.opacity
             },
@@ -2158,6 +2311,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,
@@ -2205,14 +2359,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

@@ -31,7 +31,6 @@ type RichTextValidated = Required<{
         family: string;
         size: number;
         weight: string | number;
-        style: "normal" | "italic" | "oblique";
         color: string;
         opacity: number;
     };
@@ -124,7 +123,6 @@ type Glyph = {
     fontDesc?: {
         family: string;
         weight?: string | number;
-        style?: string;
     };
 };
 type ShapedLine = {
@@ -215,14 +213,12 @@ declare function createTextEngine(opts?: {
     registerFontFromUrl(url: string, desc: {
         family: string;
         weight?: string | number;
-        style?: string;
     }): Promise<void>;
     registerFontFromFile(source: string | Blob, desc: {
         family: string;
         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

@@ -65,7 +65,6 @@ var fontSchema = Joi.object({
   family: Joi.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
-  style: Joi.string().valid("normal", "italic", "oblique").default("normal"),
   color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
   opacity: Joi.number().min(0).max(1).default(1)
 }).unknown(false);
@@ -85,7 +84,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,8 +382,7 @@ var _FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
-    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
+    return `${desc.family}__${desc.weight ?? "400"}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -433,14 +431,12 @@ var _FontRegistry = class _FontRegistry {
     try {
       const bytes = await loader({
         family: desc.family,
-        weight: desc.weight ?? "400",
-        style: desc.style ?? "normal"
+        weight: desc.weight ?? "400"
       });
       if (!bytes) return false;
       await this.registerFromBytes(bytes, {
         family: desc.family,
-        weight: desc.weight ?? "400",
-        style: desc.style ?? "normal"
+        weight: desc.weight ?? "400"
       });
       return true;
     } catch {
@@ -699,13 +695,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;
@@ -964,7 +958,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":
@@ -978,9 +976,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,
@@ -1001,7 +999,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;
   }
@@ -1183,20 +1181,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 = [];
@@ -1354,14 +1509,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 };
@@ -1683,8 +1839,7 @@ async function createTextEngine(opts = {}) {
     FontRegistry.setFallbackLoader(async (desc) => {
       const family = (desc.family ?? "Roboto").toLowerCase();
       const weight = `${desc.weight ?? "400"}`;
-      const style = desc.style ?? "normal";
-      if (family === "roboto" && weight === "400" && style === "normal") {
+      if (family === "roboto" && weight === "400") {
         return fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
       }
       return void 0;
@@ -1703,8 +1858,7 @@ async function createTextEngine(opts = {}) {
             const bytes = await fetchToArrayBuffer(cf.src);
             await fonts.registerFromBytes(bytes, {
               family: cf.family,
-              weight: cf.weight ?? "400",
-              style: cf.style ?? "normal"
+              weight: cf.weight ?? "400"
             });
           } catch (err) {
             throw new Error(
@@ -1716,27 +1870,25 @@ async function createTextEngine(opts = {}) {
       const main = asset.font ?? {
         family: "Roboto",
         weight: "400",
-        style: "normal",
         size: 48,
         color: "#000000",
         opacity: 1
       };
-      const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
+      const desc = { family: main.family, weight: `${main.weight}` };
       const ensureFace = async () => {
         try {
           await fonts.getFace(desc);
         } catch {
-          const wantsDefaultRoboto = (main.family || "Roboto").toLowerCase() === "roboto" && `${main.weight}` === "400" && main.style === "normal";
+          const wantsDefaultRoboto = (main.family || "Roboto").toLowerCase() === "roboto" && `${main.weight}` === "400";
           if (wantsDefaultRoboto) {
             const bytes = await fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
             await fonts.registerFromBytes(bytes, {
               family: "Roboto",
-              weight: "400",
-              style: "normal"
+              weight: "400"
             });
           } else {
             throw new Error(
-              `Font not registered for ${desc.family}__${desc.weight}__${desc.style}`
+              `Font not registered for ${desc.family}__${desc.weight}`
             );
           }
         }
@@ -1804,13 +1956,13 @@ 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 };
+        const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          const emojiDesc = { family: "NotoEmoji", weight: "400" };
           let emojiAvailable = false;
           try {
             await fonts.getFace(emojiDesc);
@@ -1851,7 +2003,6 @@ async function createTextEngine(opts = {}) {
               family: main.family,
               size: main.size,
               weight: `${main.weight}`,
-              style: main.style,
               color: main.color,
               opacity: main.opacity
             },
@@ -1879,6 +2030,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.4.0",
+  "version": "1.4.2",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",