@meframe/core 0.0.18 → 0.0.20

package/dist/workers/stages/compose/video-compose.worker.js

@@ -12,16 +12,794 @@ function frameDurationFromFps(fps) {
   const duration = MICROSECONDS_PER_SECOND / normalized;
   return Math.max(Math.round(duration), 1);
 }
+function measureTextWidth(ctx, text, fontSize, fontFamily, fontWeight = 400) {
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const metrics = ctx.measureText(text);
+  ctx.restore();
+  return metrics.width;
+}
+function getLetterCaseText(text, letterCase) {
+  if (letterCase === "upper") {
+    return text.toUpperCase();
+  }
+  if (letterCase === "lower") {
+    return text.toLowerCase();
+  }
+  return text;
+}
+function findAllBreakPoints(text) {
+  const breakPoints = [0];
+  const chars = Array.from(text);
+  for (let i = 1; i < chars.length - 1; i++) {
+    if (/[、。！？，,!?；：]/.test(chars[i])) {
+      breakPoints.push(i + 1);
+    } else if (/[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF]/.test(chars[i]) && /[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF]/.test(chars[i + 1])) {
+      breakPoints.push(i + 1);
+    } else if (/[\s\-–—,.!?;:]/.test(chars[i])) {
+      breakPoints.push(i + 1);
+    } else if (/\s/.test(chars[i]) && /[a-zA-Z]/.test(chars[i + 1])) {
+      breakPoints.push(i + 1);
+    }
+  }
+  breakPoints.push(chars.length);
+  return breakPoints;
+}
+function evaluateBalance(lines, ctx, fontSize, fontFamily, fontWeight) {
+  if (lines.length <= 1) return 0;
+  const lengths = lines.map(
+    (line) => measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight)
+  );
+  const avgLength = lengths.reduce((a, b) => a + b, 0) / lengths.length;
+  return lengths.reduce((sum, len) => sum + Math.abs(len - avgLength), 0);
+}
+function tryBreakPointsForMultipleLines(ctx, text, start, remainingLines, currentLines, maxWidth, fontSize, fontFamily, fontWeight, breakPoints) {
+  let bestLines = [];
+  let bestBalance = Infinity;
+  if (remainingLines === 1) {
+    const lastLine = text.slice(start).trim();
+    const lastLineWidth = measureTextWidth(ctx, lastLine, fontSize, fontFamily, fontWeight);
+    if (lastLineWidth <= maxWidth) {
+      const allLines = [...currentLines, lastLine];
+      const balance = evaluateBalance(allLines, ctx, fontSize, fontFamily, fontWeight);
+      if (balance < bestBalance) {
+        bestBalance = balance;
+        bestLines = allLines;
+      }
+    } else {
+      const words = lastLine.split(/\s+/);
+      let currentLine = "";
+      let tempLines = [...currentLines];
+      for (const word of words) {
+        const testLine = currentLine ? `${currentLine} ${word}` : word;
+        const lineWidth = measureTextWidth(ctx, testLine, fontSize, fontFamily, fontWeight);
+        if (lineWidth <= maxWidth) {
+          currentLine = testLine;
+        } else {
+          if (currentLine) {
+            tempLines.push(currentLine);
+            currentLine = word;
+          } else {
+            tempLines.push(word);
+            currentLine = "";
+          }
+        }
+      }
+      if (currentLine) {
+        tempLines.push(currentLine);
+      }
+      const balance = evaluateBalance(tempLines, ctx, fontSize, fontFamily, fontWeight);
+      if (balance < bestBalance) {
+        bestBalance = balance;
+        bestLines = tempLines;
+      }
+    }
+    return { bestLines, bestBalance };
+  }
+  let foundValidBreak = false;
+  for (let i = 0; i < breakPoints.length; i++) {
+    const bp = breakPoints[i];
+    if (bp <= start || bp >= text.length) continue;
+    const line = text.slice(start, bp).trim();
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    if (lineWidth <= maxWidth) {
+      foundValidBreak = true;
+      const result = tryBreakPointsForMultipleLines(
+        ctx,
+        text,
+        bp,
+        remainingLines - 1,
+        [...currentLines, line],
+        maxWidth,
+        fontSize,
+        fontFamily,
+        fontWeight,
+        breakPoints
+      );
+      if (result.bestBalance < bestBalance) {
+        bestBalance = result.bestBalance;
+        bestLines = result.bestLines;
+      }
+    }
+  }
+  if (!foundValidBreak) {
+    const textPortion = text.slice(start);
+    const words = textPortion.split(/\s+/);
+    let currentLine = "";
+    let tempLines = [...currentLines];
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const lineWidth = measureTextWidth(ctx, testLine, fontSize, fontFamily, fontWeight);
+      if (lineWidth <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          tempLines.push(currentLine);
+          currentLine = word;
+        } else {
+          tempLines.push(word);
+        }
+      }
+    }
+    if (currentLine) {
+      tempLines.push(currentLine);
+    }
+    bestLines = tempLines;
+  }
+  return { bestLines, bestBalance };
+}
+function wrapText(ctx, text, maxWidth, fontSize, fontFamily, fontWeight = 400) {
+  const textWidth = measureTextWidth(ctx, text, fontSize, fontFamily, fontWeight);
+  if (textWidth <= maxWidth) {
+    return [text];
+  }
+  const estimatedLines = Math.ceil(textWidth / maxWidth);
+  const breakPoints = findAllBreakPoints(text);
+  const { bestLines } = tryBreakPointsForMultipleLines(
+    ctx,
+    text,
+    0,
+    estimatedLines,
+    [],
+    maxWidth,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    breakPoints
+  );
+  return bestLines.length > 0 ? bestLines : [text];
+}
+function formLinesWithWords(ctx, words, maxWidth, fontSize, needsSpace, fontFamily, fontWeight = 400) {
+  const result = [];
+  let accumulatedWidth = 0;
+  const spaceWidth = measureTextWidth(ctx, " ", fontSize, fontFamily, fontWeight);
+  let currentLine = "";
+  for (const word of words) {
+    let wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);
+    if (needsSpace) {
+      wordWidth += spaceWidth;
+    }
+    if (wordWidth + accumulatedWidth <= maxWidth) {
+      currentLine += word + (needsSpace ? " " : "");
+      accumulatedWidth += wordWidth;
+    } else {
+      if (currentLine) {
+        result.push(currentLine);
+      }
+      currentLine = word + (needsSpace ? " " : "");
+      accumulatedWidth = wordWidth;
+    }
+  }
+  if (currentLine !== "") {
+    result.push(currentLine);
+  }
+  return result;
+}
+function formEvenLinesWithWords(ctx, words, maxWidth, fontSize, needsSpace, fontFamily, fontWeight = 400) {
+  let minWidth = maxWidth / 2;
+  for (const word of words) {
+    const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);
+    if (wordWidth > minWidth) {
+      minWidth = wordWidth;
+    }
+  }
+  const leastLineNum = formLinesWithWords(
+    ctx,
+    words,
+    maxWidth,
+    fontSize,
+    needsSpace,
+    fontFamily,
+    fontWeight
+  ).length;
+  let bestDelta = maxWidth;
+  let bestWidth = minWidth;
+  for (let width = maxWidth; width >= minWidth; width -= 1) {
+    const lines = formLinesWithWords(
+      ctx,
+      words,
+      width,
+      fontSize,
+      needsSpace,
+      fontFamily,
+      fontWeight
+    );
+    if (lines.length > leastLineNum) {
+      break;
+    }
+    let minLineWidth = Infinity;
+    let maxLineWidth = 0;
+    for (const line of lines) {
+      const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+      if (lineWidth < minLineWidth) {
+        minLineWidth = lineWidth;
+      }
+      if (lineWidth > maxLineWidth) {
+        maxLineWidth = lineWidth;
+      }
+    }
+    const delta = maxLineWidth - minLineWidth;
+    if (delta < bestDelta) {
+      bestDelta = delta;
+      bestWidth = width;
+    }
+  }
+  return formLinesWithWords(ctx, words, bestWidth, fontSize, needsSpace, fontFamily, fontWeight);
+}
+function springEasing(frame, config) {
+  const { damping, mass, stiffness, overshootClamping = false } = config;
+  if (frame <= 0) return 0;
+  const zeta = damping / (2 * Math.sqrt(mass * stiffness));
+  const omega = Math.sqrt(stiffness / mass);
+  const t = frame / 60;
+  let value;
+  if (zeta < 1) {
+    const omegaD = omega * Math.sqrt(1 - zeta * zeta);
+    const A = 1;
+    const B = zeta * omega / omegaD;
+    value = 1 - Math.exp(-zeta * omega * t) * (A * Math.cos(omegaD * t) + B * Math.sin(omegaD * t));
+  } else if (zeta === 1) {
+    value = 1 - Math.exp(-omega * t) * (1 + omega * t);
+  } else {
+    const r1 = -omega * (zeta - Math.sqrt(zeta * zeta - 1));
+    const r2 = -omega * (zeta + Math.sqrt(zeta * zeta - 1));
+    const A = r2 / (r2 - r1);
+    const B = 1 - A;
+    value = 1 - A * Math.exp(r1 * t) - B * Math.exp(r2 * t);
+  }
+  if (overshootClamping && value > 1) {
+    return 1;
+  }
+  return Math.max(0, value);
+}
+function interpolate(value, inputRange, outputRange, options) {
+  const { extrapolateLeft = "extend", extrapolateRight = "extend" } = options || {};
+  const [inputMin, inputMax] = inputRange;
+  const [outputMin, outputMax] = outputRange;
+  if (value < inputMin) {
+    if (extrapolateLeft === "clamp") {
+      return outputMin;
+    }
+  }
+  if (value > inputMax) {
+    if (extrapolateRight === "clamp") {
+      return outputMax;
+    }
+  }
+  const inputDelta = inputMax - inputMin;
+  if (inputDelta === 0) {
+    return outputMin;
+  }
+  const progress = (value - inputMin) / inputDelta;
+  const outputDelta = outputMax - outputMin;
+  return outputMin + progress * outputDelta;
+}
+function parseRgb(color) {
+  const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (match) {
+    return {
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10)
+    };
+  }
+  return null;
+}
+function interpolateColor(color1, color2, progress) {
+  const rgb1 = parseRgb(color1);
+  const rgb2 = parseRgb(color2);
+  if (!rgb1 || !rgb2) {
+    return color1;
+  }
+  const r = Math.round(interpolate(progress, [0, 1], [rgb1.r, rgb2.r]));
+  const g = Math.round(interpolate(progress, [0, 1], [rgb1.g, rgb2.g]));
+  const b = Math.round(interpolate(progress, [0, 1], [rgb1.b, rgb2.b]));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+const CJK_REGEX = /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\u3400-\u4dbf\uac00-\ud7af]/g;
+function needsSpaceBetweenWords(locale, text) {
+  if (text) {
+    const cjkMatches = text.match(CJK_REGEX);
+    const cjkCount = cjkMatches ? cjkMatches.length : 0;
+    if (cjkCount > 0 && cjkCount / text.length >= 0.6) {
+      return false;
+    }
+    return true;
+  }
+  return !["zh-CN", "ja-JP", "ko-KR"].includes(locale);
+}
+function calculateYPosition$3(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderBasicText(ctx, layer, canvasWidth, canvasHeight, _relativeFrame) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  let lines;
+  if (layer.wordTimings && layer.wordTimings.length > 0) {
+    const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+    const words = text.split(needsSpace ? /\s+/ : "");
+    lines = formEvenLinesWithWords(
+      ctx,
+      words,
+      maxWidth,
+      fontSize,
+      needsSpace,
+      fontFamily,
+      fontWeight
+    );
+  } else {
+    lines = wrapText(ctx, text, maxWidth, fontSize, fontFamily, fontWeight);
+  }
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition$3(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const y = startY + i * fontSize * lineHeight + fontSize / 2;
+    if (stroke && strokeWidth > 0) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(line, canvasWidth / 2, y);
+    }
+    ctx.fillStyle = fill;
+    ctx.fillText(line, canvasWidth / 2, y);
+  }
+  ctx.restore();
+}
+function renderTextWithEntrance(ctx, layer, canvasWidth, canvasHeight, relativeFrame) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const entrance = springEasing(relativeFrame, {
+    damping: 200,
+    mass: 1,
+    stiffness: 300
+  });
+  const opacity = interpolate(entrance, [0, 1], [0, 1]);
+  const scale = interpolate(entrance, [0, 1], [0.9, 1]);
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.translate(canvasWidth / 2, canvasHeight / 2);
+  ctx.scale(scale, scale);
+  ctx.translate(-canvasWidth / 2, -canvasHeight / 2);
+  renderBasicText(ctx, layer, canvasWidth, canvasHeight);
+  ctx.restore();
+}
+function usToFrame$2(us, fps) {
+  return Math.floor(us / (1e6 / fps));
+}
+function calculateYPosition$2(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderWordByWord(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps = 30) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const highlightFill = layer.animation?.highlightTextStyle?.fill || "rgb(255, 215, 0)";
+  const highlightStroke = layer.animation?.highlightTextStyle?.stroke || stroke;
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+  const words = text.split(needsSpace ? /\s+/ : "");
+  const lines = formEvenLinesWithWords(
+    ctx,
+    words,
+    maxWidth,
+    fontSize,
+    needsSpace,
+    fontFamily,
+    fontWeight
+  );
+  const wordPositions = [];
+  let wordIndex = 0;
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition$2(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+    const line = lines[lineIndex];
+    const lineWords = line.split(needsSpace ? /\s+/ : "");
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let currentX = canvasWidth / 2 - lineWidth / 2;
+    for (const word of lineWords) {
+      const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);
+      const wordTimingUs = layer.wordTimings?.[wordIndex];
+      const wordTiming = wordTimingUs ? {
+        startFrame: usToFrame$2(wordTimingUs.startUs, fps),
+        endFrame: usToFrame$2(wordTimingUs.endUs, fps)
+      } : void 0;
+      wordPositions.push({
+        text: word,
+        x: currentX + wordWidth / 2,
+        y,
+        lineIndex,
+        wordIndex,
+        timing: wordTiming
+      });
+      currentX += wordWidth + (needsSpace ? measureTextWidth(ctx, " ", fontSize, fontFamily, fontWeight) : 0);
+      wordIndex++;
+    }
+  }
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  for (const wordPos of wordPositions) {
+    let currentFill = fill;
+    let currentStroke = stroke;
+    if (wordPos.timing) {
+      const { startFrame, endFrame } = wordPos.timing;
+      if (relativeFrame >= startFrame && relativeFrame <= endFrame) {
+        const transitionProgressIn = interpolate(
+          relativeFrame,
+          [startFrame, startFrame + 3],
+          [0, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp"
+          }
+        );
+        currentFill = interpolateColor(fill, highlightFill, transitionProgressIn);
+        if (stroke && highlightStroke) {
+          currentStroke = interpolateColor(stroke, highlightStroke, transitionProgressIn);
+        }
+      } else if (relativeFrame > endFrame) {
+        const transitionProgressOut = interpolate(relativeFrame, [endFrame, endFrame + 3], [1, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+        currentFill = interpolateColor(fill, highlightFill, transitionProgressOut);
+        if (stroke && highlightStroke) {
+          currentStroke = interpolateColor(stroke, highlightStroke, transitionProgressOut);
+        }
+      }
+    }
+    if (currentStroke && strokeWidth > 0) {
+      ctx.strokeStyle = currentStroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(wordPos.text, wordPos.x, wordPos.y);
+    }
+    ctx.fillStyle = currentFill;
+    ctx.fillText(wordPos.text, wordPos.x, wordPos.y);
+  }
+  ctx.restore();
+}
+function usToFrame$1(us, fps) {
+  return Math.floor(us / (1e6 / fps));
+}
+function calculateYPosition$1(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderCharacterKTV(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps = 30) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const baseFill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const highlightFill = layer.animation?.highlightTextStyle?.fill || "rgb(255, 215, 0)";
+  const glowColor = layer.animation?.glowColor || "#ffffff";
+  const glowIntensity = layer.animation?.glowIntensity || 3;
+  const transitionFrames = layer.animation?.transitionFrames || 10;
+  const maxWidth = canvasWidth * 0.9;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+  const characterTimings = [];
+  if (layer.wordTimings && layer.wordTimings.length > 0) {
+    let charIndex = 0;
+    for (let wordIndex = 0; wordIndex < layer.wordTimings.length; wordIndex++) {
+      const word = layer.wordTimings[wordIndex];
+      const wordChars = word.text.split("");
+      const wordStartFrame = usToFrame$1(word.startUs, fps);
+      const wordEndFrame = usToFrame$1(word.endUs, fps);
+      const framesPerChar = wordChars.length > 0 ? (wordEndFrame - wordStartFrame) / wordChars.length : 0;
+      for (let i = 0; i < wordChars.length; i++) {
+        const charStartFrame = Math.floor(wordStartFrame + i * framesPerChar);
+        characterTimings.push({
+          char: wordChars[i],
+          index: charIndex,
+          startFrame: charStartFrame
+        });
+        charIndex++;
+      }
+      if (needsSpace && wordIndex < layer.wordTimings.length - 1) {
+        const nextWord = layer.wordTimings[wordIndex + 1];
+        const nextWordFirstChar = nextWord?.text?.[0] || "";
+        const isPunctuation = /[.,!?;:)]/.test(nextWordFirstChar);
+        if (!isPunctuation) {
+          const spaceStartFrame = characterTimings[characterTimings.length - 1]?.startFrame || 0;
+          characterTimings.push({
+            char: " ",
+            index: charIndex,
+            startFrame: spaceStartFrame
+          });
+          charIndex++;
+        }
+      }
+    }
+  } else {
+    const totalFrames = 100;
+    const chars = text.split("");
+    const framesPerChar = chars.length > 0 ? totalFrames / chars.length : 0;
+    for (let i = 0; i < chars.length; i++) {
+      characterTimings.push({
+        char: chars[i],
+        index: i,
+        startFrame: Math.floor(i * framesPerChar)
+      });
+    }
+  }
+  const fullText = characterTimings.map((ct) => ct.char).join("");
+  const fullTextLines = wrapText(ctx, fullText, maxWidth, fontSize, fontFamily, fontWeight);
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  const totalHeight = fullTextLines.length * fontSize * lineHeight;
+  const startY = calculateYPosition$1(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  let charIndexInText = 0;
+  for (let lineIndex = 0; lineIndex < fullTextLines.length; lineIndex++) {
+    const line = fullTextLines[lineIndex];
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let currentX = canvasWidth / 2 - lineWidth / 2;
+    for (let i = 0; i < line.length; i++) {
+      const char = line[i];
+      const timing = characterTimings[charIndexInText];
+      if (timing) {
+        const hasScanned = relativeFrame >= timing.startFrame;
+        const isCurrentlySinging = hasScanned && relativeFrame < timing.startFrame + transitionFrames;
+        ctx.fillStyle = hasScanned ? highlightFill : baseFill;
+        if (isCurrentlySinging) {
+          ctx.shadowColor = glowColor;
+          ctx.shadowBlur = glowIntensity * 10;
+        } else {
+          ctx.shadowBlur = 0;
+        }
+        if (stroke && strokeWidth > 0) {
+          ctx.strokeStyle = stroke;
+          ctx.lineWidth = strokeWidth;
+          ctx.strokeText(char, currentX, y);
+        }
+        ctx.fillText(char, currentX, y);
+        ctx.shadowBlur = 0;
+      }
+      currentX += measureTextWidth(ctx, char, fontSize, fontFamily, fontWeight);
+      charIndexInText++;
+    }
+  }
+  ctx.restore();
+}
+function usToFrame(us, fps) {
+  return Math.floor(us / (1e6 / fps));
+}
+function calculateYPosition(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderWordByWordFancy(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps = 30) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const highlightBackgroundColor = layer.animation?.highlightColor || "rgb(255, 215, 0)";
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+  const words = text.split(needsSpace ? /\s+/ : "");
+  const lines = formEvenLinesWithWords(
+    ctx,
+    words,
+    maxWidth,
+    fontSize,
+    needsSpace,
+    fontFamily,
+    fontWeight
+  );
+  const wordPositions = [];
+  let wordIndex = 0;
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+    const line = lines[lineIndex];
+    const lineWords = line.split(needsSpace ? /\s+/ : "");
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let currentX = canvasWidth / 2 - lineWidth / 2;
+    for (const word of lineWords) {
+      const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);
+      const wordTimingUs = layer.wordTimings?.[wordIndex];
+      const wordTiming = wordTimingUs ? {
+        startFrame: usToFrame(wordTimingUs.startUs, fps),
+        endFrame: usToFrame(wordTimingUs.endUs, fps)
+      } : void 0;
+      wordPositions.push({
+        text: word,
+        x: currentX + wordWidth / 2,
+        y,
+        width: wordWidth,
+        lineIndex,
+        wordIndex,
+        timing: wordTiming
+      });
+      currentX += wordWidth + (needsSpace ? measureTextWidth(ctx, " ", fontSize, fontFamily, fontWeight) : 0);
+      wordIndex++;
+    }
+  }
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  for (const wordPos of wordPositions) {
+    let backgroundOpacity = 0;
+    let backgroundScale = 0.8;
+    if (wordPos.timing) {
+      const { startFrame, endFrame } = wordPos.timing;
+      const preStartFrames = 3;
+      const isActive = relativeFrame >= startFrame && relativeFrame <= endFrame;
+      if (isActive) {
+        const scaleSpringIn = springEasing(relativeFrame - (startFrame - preStartFrames), {
+          damping: 6,
+          mass: 0.35,
+          stiffness: 200,
+          overshootClamping: false
+        });
+        const inProgress = interpolate(relativeFrame, [startFrame, startFrame + 1], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+        backgroundOpacity = 0.9 * inProgress;
+        backgroundScale = 0.8 + scaleSpringIn * 0.45;
+      } else if (relativeFrame > endFrame) {
+        backgroundOpacity = 0;
+        backgroundScale = 0.8;
+      }
+      if (backgroundOpacity > 0) {
+        const padding = 8;
+        const bgWidth = (wordPos.width + padding * 2) * backgroundScale;
+        const bgHeight = (fontSize + padding) * backgroundScale;
+        ctx.save();
+        ctx.globalAlpha = backgroundOpacity;
+        ctx.fillStyle = highlightBackgroundColor;
+        ctx.beginPath();
+        ctx.roundRect(wordPos.x - bgWidth / 2, wordPos.y - bgHeight / 2, bgWidth, bgHeight, 8);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+    if (stroke && strokeWidth > 0) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(wordPos.text, wordPos.x, wordPos.y);
+    }
+    ctx.fillStyle = fill;
+    ctx.fillText(wordPos.text, wordPos.x, wordPos.y);
+  }
+  ctx.restore();
+}
 class LayerRenderer {
   ctx;
   width;
   height;
-  constructor(ctx, width, height) {
+  currentFrame = 0;
+  fps = 30;
+  constructor(ctx, width, height, fps = 30) {
     this.ctx = ctx;
     this.width = width;
     this.height = height;
+    this.fps = fps;
     this.ensureHighQualityRendering();
   }
+  setCurrentFrame(frame) {
+    this.currentFrame = frame;
+  }
   ensureHighQualityRendering() {
     this.ctx.imageSmoothingEnabled = true;
     this.ctx.imageSmoothingQuality = "high";
@@ -211,73 +989,30 @@ class LayerRenderer {
     }
   }
   async renderTextLayer(layer) {
-    const fontSize = layer.fontSize ?? 16;
-    const fontFamily = layer.fontFamily ?? "sans-serif";
-    const fontWeight = layer.fontWeight ?? "normal";
-    const fontStyle = layer.fontStyle ?? "normal";
-    this.ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
-    this.ctx.fillStyle = layer.color ?? "#000000";
-    this.ctx.textAlign = layer.textAlign ?? "left";
-    this.ctx.textBaseline = layer.verticalAlign ?? "top";
-    if (layer.letterSpacing && typeof this.ctx.letterSpacing !== "undefined") {
-      this.ctx.letterSpacing = `${layer.letterSpacing}px`;
-    }
-    this.ensureHighQualityRendering();
-    const baseX = this.calculateTextX(layer.textAlign);
-    const baseY = this.calculateTextY(layer.verticalAlign, fontSize);
-    const x = Math.round(baseX) + 0.5;
-    const y = Math.round(baseY) + 0.5;
-    if (layer.shadow) {
-      this.ctx.shadowColor = layer.shadow.color;
-      this.ctx.shadowOffsetX = layer.shadow.offsetX;
-      this.ctx.shadowOffsetY = layer.shadow.offsetY;
-      this.ctx.shadowBlur = layer.shadow.blur;
-    }
-    if (layer.strokeColor && layer.strokeWidth && layer.strokeWidth > 0) {
-      this.drawEnhancedStroke(layer.text, x, y, layer.strokeColor, layer.strokeWidth);
-    }
-    this.ctx.fillText(layer.text, x, y);
-    if (layer.shadow) {
-      this.ctx.shadowColor = "transparent";
-      this.ctx.shadowOffsetX = 0;
-      this.ctx.shadowOffsetY = 0;
-      this.ctx.shadowBlur = 0;
-    }
-  }
-  /**
-   * Draw enhanced multi-layer stroke for better text visibility
-   */
-  drawEnhancedStroke(text, x, y, strokeColor, strokeWidth) {
-    this.ctx.save();
-    this.ctx.strokeStyle = strokeColor;
-    this.ctx.lineJoin = "round";
-    this.ctx.lineCap = "round";
-    this.ctx.miterLimit = 2;
-    const layers = [1.1, 1];
-    layers.forEach((multiplier) => {
-      this.ctx.lineWidth = strokeWidth * multiplier;
-      this.ctx.strokeText(text, x, y);
-    });
-    this.ctx.restore();
-  }
-  calculateTextX(align) {
-    switch (align) {
-      case "center":
-        return this.width / 2;
-      case "right":
-        return this.width;
-      default:
-        return 0;
-    }
-  }
-  calculateTextY(align, fontSize = 16) {
-    switch (align) {
-      case "middle":
-        return this.height / 2;
-      case "bottom":
-        return this.height * 0.85;
+    const animationType = layer.animation?.type;
+    switch (animationType) {
+      case "wordByWord":
+        renderWordByWord(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);
+        break;
+      case "characterKTV":
+        renderCharacterKTV(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);
+        break;
+      case "wordByWordFancy":
+        renderWordByWordFancy(
+          this.ctx,
+          layer,
+          this.width,
+          this.height,
+          this.currentFrame,
+          this.fps
+        );
+        break;
+      case "fade":
+        renderTextWithEntrance(this.ctx, layer, this.width, this.height, this.currentFrame);
+        break;
       default:
-        return fontSize;
+        renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);
+        break;
     }
   }
   applyMask(mask) {
@@ -731,8 +1466,14 @@ class VideoComposer {
     }
     this.ctx = ctx;
     this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
+    this.loadFonts();
     this.ctx.imageSmoothingQuality = "high";
-    this.layerRenderer = new LayerRenderer(ctx, this.config.width, this.config.height);
+    this.layerRenderer = new LayerRenderer(
+      ctx,
+      this.config.width,
+      this.config.height,
+      this.config.fps
+    );
     this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);
     this.filterProcessor = new FilterProcessor();
     this.timelineContext = this.config.timeline;
@@ -756,7 +1497,8 @@ class VideoComposer {
         clipStartUs: 0,
         clipDurationUs: Infinity,
         compositionFps: 30
-      }
+      },
+      fonts: config.fonts ?? []
     };
   }
   createStreams(_instruction) {
@@ -795,6 +1537,9 @@ class VideoComposer {
       throw new Error(`Too many layers: ${request.layers.length} > ${this.config.maxLayers}`);
     }
     this.clearCanvas();
+    const frameDurationUs = 1e6 / this.config.fps;
+    const relativeFrame = Math.floor(request.timeUs / frameDurationUs);
+    this.layerRenderer.setCurrentFrame(relativeFrame);
     if (request.transition) {
       this.ctx.save();
       this.transitionProcessor.applyTransition(this.ctx, request.transition);
@@ -870,6 +1615,22 @@ class VideoComposer {
     });
     return frame;
   }
+  async loadFonts() {
+    if (!this.config.fonts || this.config.fonts.length === 0) {
+      return;
+    }
+    for (const font of this.config.fonts) {
+      try {
+        const fontFace = new FontFace(font.family, `url(${font.url})`);
+        await fontFace.load();
+        if ("fonts" in self) {
+          self.fonts.add(fontFace);
+        }
+      } catch (error) {
+        console.warn(`[VideoComposer] Failed to load font ${font.family}:`, error);
+      }
+    }
+  }
   updateConfig(config) {
     Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));
     if (config.width || config.height) {
@@ -884,6 +1645,9 @@ class VideoComposer {
     if (config.timeline) {
       this.timelineContext = config.timeline;
     }
+    if (config.fonts) {
+      this.loadFonts();
+    }
   }
   dispose() {
     this.filterProcessor.clearCache();
@@ -1001,15 +1765,11 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
       ...baseLayer,
       type: "text",
       text: payload.text,
-      fontFamily: payload.fontFamily,
-      fontSize: payload.fontSize,
-      fontWeight: payload.fontWeight,
-      color: payload.color,
-      strokeColor: payload.strokeColor,
-      strokeWidth: payload.strokeWidth,
-      lineHeight: payload.lineHeight,
-      textAlign: payload.align,
-      verticalAlign: "bottom"
+      localeCode: payload.localeCode,
+      fontConfig: payload.fontConfig,
+      animation: payload.animation,
+      wordTimings: payload.wordTimings,
+      letterCase: payload.letterCase
     };
   }
   if (layer.type === "image") {