@subvo/renderer 1.0.0 → 1.2.0

package/dist/renderer.d.ts

@@ -17,6 +17,8 @@ type RenderLine = {
     id: string;
     startMs: number;
     endMs: number;
+    mode?: RenderMode;
+    breakHints?: string[];
     words: RenderWord[];
 };
 type RenderWord = {
@@ -24,6 +26,7 @@ type RenderWord = {
     text: string;
     startMs: number;
     endMs: number;
+    emphasis?: number;
 };
 type RenderLayoutHints = {
     maxWordsPerLine?: number;
@@ -36,6 +39,7 @@ type RenderMetadata = {
 };
 type RenderPosition = "bottom_safe" | "center";
 type RenderPreset = "fire" | "clean" | "luxury" | "pop" | "ghost";
+type RenderMode = "phrase_highlight" | "progressive_build";
 type RenderStyle = {
     fontFamily: string;
     fontSize: number;

package/dist/renderer.esm.js

@@ -1,64 +1,185 @@
 // src/layout.ts
+var MAX_ROW_WIDTH_RATIO = 0.72;
+var ONE_ROW_COMFORT_RATIO = 0.66;
+var CLOSING_PUNCTUATION_RE = /["')\]}”’]+$/;
+var STRONG_BOUNDARY_RE = /[.?!:;]$/;
+var SOFT_BOUNDARY_RE = /[,]$/;
+var SOFT_BREAK_WORDS = /* @__PURE__ */ new Set([
+  "and",
+  "because",
+  "but",
+  "now",
+  "ok",
+  "okay",
+  "so",
+  "then",
+  "well"
+]);
 function computeLayout(ctx, renderJob) {
-  const { style } = renderJob;
+  const { style, playRes } = renderJob;
   ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
   ctx.textBaseline = "alphabetic";
   return renderJob.lines.map((line) => {
-    const rows = chunkWords(line.words, style.maxWordsPerLine);
+    const rows = resolveRows(
+      ctx,
+      line.words,
+      line.breakHints,
+      style.maxWordsPerLine,
+      playRes.width
+    );
     return {
       line,
-      rows: rows.map((words) => {
-        let rowWidth = 0;
-        const measuredWords = words.map((word, index) => {
-          const text = index < words.length - 1 ? `${word.text} ` : word.text;
-          const metrics = ctx.measureText(text);
-          const width = metrics.width;
-          rowWidth += width;
-          return {
-            word,
-            text,
-            width
-          };
-        });
-        return {
-          words: measuredWords,
-          width: rowWidth
-        };
-      })
+      rows: rows.map((words) => buildLayoutRow(ctx, words))
     };
   });
 }
-function chunkWords(words, maxPerLine) {
-  if (maxPerLine <= 0) return [words];
-  const rows = [];
-  let current = [];
-  for (const word of words) {
-    current.push(word);
-    if (current.length >= maxPerLine) {
-      rows.push(current);
-      current = [];
+function resolveRows(ctx, words, breakHints, maxWordsPerLine, playWidth) {
+  if (words.length <= 1) {
+    return [words];
+  }
+  const measuredWords = words.map((word) => ({
+    word,
+    width: ctx.measureText(word.text).width
+  }));
+  const spaceWidth = ctx.measureText(" ").width;
+  const hintSet = new Set((breakHints != null ? breakHints : []).map((hint) => String(hint)));
+  const maxRowWidth = playWidth * MAX_ROW_WIDTH_RATIO;
+  const totalWidth = measureRowWidth(measuredWords, spaceWidth);
+  const candidates = [];
+  candidates.push({
+    rows: [measuredWords],
+    score: scoreSingleRowCandidate(
+      [measuredWords],
+      totalWidth,
+      maxRowWidth,
+      hintSet,
+      maxWordsPerLine
+    )
+  });
+  for (let index = 1; index < measuredWords.length; index += 1) {
+    const first = measuredWords.slice(0, index);
+    const second = measuredWords.slice(index);
+    candidates.push({
+      rows: [first, second],
+      score: scoreTwoRowCandidate(
+        [first, second],
+        hintSet,
+        maxRowWidth,
+        maxWordsPerLine,
+        spaceWidth
+      )
+    });
+  }
+  candidates.sort((left, right) => left.score - right.score);
+  return candidates[0].rows.map((row) => row.map((entry) => entry.word));
+}
+function scoreSingleRowCandidate(rows, totalWidth, maxRowWidth, hintSet, maxWordsPerLine) {
+  var _a, _b;
+  let score = 0;
+  score += overflowPenalty(totalWidth, maxRowWidth) * 6;
+  if (totalWidth > maxRowWidth * ONE_ROW_COMFORT_RATIO) {
+    score += (totalWidth - maxRowWidth * ONE_ROW_COMFORT_RATIO) * 0.12;
+  }
+  const wordCount = (_b = (_a = rows[0]) == null ? void 0 : _a.length) != null ? _b : 0;
+  if (wordCount > Math.max(4, maxWordsPerLine + 1)) {
+    score += (wordCount - Math.max(4, maxWordsPerLine + 1)) * 40;
+  }
+  if (hintSet.size > 0) {
+    score += 60;
+  }
+  return score;
+}
+function scoreTwoRowCandidate(rows, hintSet, maxRowWidth, maxWordsPerLine, spaceWidth) {
+  var _a, _b;
+  const [first, second] = rows;
+  const firstWidth = measureRowWidth(first, spaceWidth);
+  const secondWidth = measureRowWidth(second, spaceWidth);
+  let score = 0;
+  score += overflowPenalty(firstWidth, maxRowWidth) * 8;
+  score += overflowPenalty(secondWidth, maxRowWidth) * 8;
+  score += Math.abs(firstWidth - secondWidth) * 0.18;
+  score += Math.abs(first.length - second.length) * 16;
+  if (first.length === 1 || second.length === 1) {
+    score += 320;
+  } else {
+    if (first.length === 2) score += 45;
+    if (second.length === 2) score += 45;
+  }
+  const preferredWordsPerRow = Math.max(3, maxWordsPerLine);
+  if (first.length > preferredWordsPerRow + 2) {
+    score += (first.length - (preferredWordsPerRow + 2)) * 25;
+  }
+  if (second.length > preferredWordsPerRow + 2) {
+    score += (second.length - (preferredWordsPerRow + 2)) * 25;
+  }
+  const nextRowFirstWord = (_a = second[0]) == null ? void 0 : _a.word;
+  if (nextRowFirstWord) {
+    if (hintSet.has(String(nextRowFirstWord.id))) {
+      score -= 70;
+    } else if (hintSet.size > 0) {
+      score += 20;
     }
   }
-  if (current.length > 0) {
-    rows.push(current);
+  const boundaryWord = (_b = first[first.length - 1]) == null ? void 0 : _b.word;
+  if (boundaryWord) {
+    score -= boundaryBonus(boundaryWord.text);
+  }
+  if (nextRowFirstWord) {
+    score -= softBreakWordBonus(nextRowFirstWord.text);
+  }
+  return score;
+}
+function overflowPenalty(width, maxWidth) {
+  return Math.max(0, width - maxWidth);
+}
+function boundaryBonus(text) {
+  const normalized = normalizeBoundaryToken(text);
+  if (!normalized) {
+    return 0;
+  }
+  if (STRONG_BOUNDARY_RE.test(normalized)) {
+    return 55;
+  }
+  if (SOFT_BOUNDARY_RE.test(normalized)) {
+    return 35;
   }
-  return rows;
+  return 0;
+}
+function softBreakWordBonus(text) {
+  return SOFT_BREAK_WORDS.has(normalizeWord(text)) ? 18 : 0;
+}
+function normalizeBoundaryToken(text) {
+  return text.replace(CLOSING_PUNCTUATION_RE, "");
+}
+function normalizeWord(text) {
+  return normalizeBoundaryToken(text).replace(/^[^\w]+|[^\w]+$/g, "").toLowerCase();
+}
+function measureRowWidth(words, spaceWidth) {
+  const wordWidth = words.reduce((total, entry) => total + entry.width, 0);
+  return wordWidth + Math.max(0, words.length - 1) * spaceWidth;
+}
+function buildLayoutRow(ctx, words) {
+  let rowWidth = 0;
+  const measuredWords = words.map((word, index) => {
+    const text = index < words.length - 1 ? `${word.text} ` : word.text;
+    const width = ctx.measureText(text).width;
+    rowWidth += width;
+    return {
+      word,
+      text,
+      width
+    };
+  });
+  return {
+    words: measuredWords,
+    width: rowWidth
+  };
 }
 
 // src/effects.ts
 function clamp(value, min = 0, max = 1) {
   return Math.min(max, Math.max(min, value));
 }
-function computeFadeAlpha(style, line, timeMs) {
-  let alpha = 1;
-  if (style.fadeInMs > 0) {
-    alpha = Math.min(alpha, (timeMs - line.startMs) / style.fadeInMs);
-  }
-  if (style.fadeOutMs > 0) {
-    alpha = Math.min(alpha, (line.endMs - timeMs) / style.fadeOutMs);
-  }
-  return clamp(alpha);
-}
 function computeWordProgress(word, timeMs) {
   const duration = word.endMs - word.startMs;
   if (duration <= 0) return 0;
@@ -69,24 +190,29 @@ function computePulseScale(style, progress) {
 }
 
 // src/drawText.ts
-function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor) {
-  const invScale = 1 / scaleFactor;
+function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor, emphasis = 0) {
+  const emphasisBoost = emphasis > 0.6 ? Math.min(1, (emphasis - 0.6) / 0.4) : 0;
+  const effectiveScale = scaleFactor * (1 + emphasisBoost * 0.06);
+  const invScale = 1 / effectiveScale;
+  const strokeWidth = style.outlineWidth + emphasisBoost * 1.2;
+  const baseBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
+  const emphasisBlur = style.fontSize * 0.12 * emphasisBoost * invScale;
   ctx.save();
   ctx.translate(x, y);
   ctx.translate(0, -ascent);
-  ctx.scale(scaleFactor, scaleFactor);
+  ctx.scale(effectiveScale, effectiveScale);
   ctx.translate(0, ascent);
   ctx.fillStyle = fillColor;
-  if (style.outlineWidth > 0) {
-    ctx.lineWidth = style.outlineWidth * invScale;
+  if (strokeWidth > 0) {
+    ctx.lineWidth = strokeWidth * invScale;
     ctx.strokeStyle = style.outlineColor;
     ctx.strokeText(text, 0, 0);
   }
-  if (style.shadow || style.glowIntensity > 0) {
-    ctx.shadowColor = style.outlineColor;
+  if (style.shadow || style.glowIntensity > 0 || emphasisBoost > 0) {
+    ctx.shadowColor = emphasisBoost > 0 ? fillColor : style.outlineColor;
     ctx.shadowOffsetX = style.shadow ? style.shadowDepth * invScale : 0;
     ctx.shadowOffsetY = style.shadow ? style.shadowDepth * invScale : 0;
-    ctx.shadowBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
+    ctx.shadowBlur = baseBlur + emphasisBlur;
   } else {
     ctx.shadowColor = "transparent";
     ctx.shadowBlur = 0;
@@ -98,47 +224,93 @@ function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor) {
 }
 
 // src/renderFrame.ts
+var DEFAULT_TRANSITION_MS = 150;
+var MIN_TRANSITION_MS = 120;
+var MAX_TRANSITION_MS = 180;
 function renderFrame(ctx, renderJob, timeMs) {
   const { playRes, style } = renderJob;
   const layout = computeLayout(ctx, renderJob);
-  const active = layout.find(
-    (line) => timeMs >= line.line.startMs && timeMs <= line.line.endMs
-  );
-  if (!active) return;
+  const transitionMs = resolveTransitionMs(style);
+  const visibleLines = layout.map((entry) => ({
+    entry,
+    alpha: computeLineAlpha(entry.line, timeMs, transitionMs)
+  })).filter((entry) => entry.alpha > 0);
+  if (!visibleLines.length) return;
   const transform = ctx.getTransform();
   const canvasWidth = ctx.canvas.width / (transform.a || 1);
   const canvasHeight = ctx.canvas.height / (transform.d || 1);
   const scale = Math.max(canvasWidth / playRes.width, canvasHeight / playRes.height);
   const offsetX = (canvasWidth - playRes.width * scale) / 2;
   const offsetY = (canvasHeight - playRes.height * scale) / 2;
-  const alpha = computeFadeAlpha(style, active.line, timeMs);
   ctx.save();
   ctx.translate(offsetX, offsetY);
   ctx.scale(scale, scale);
-  ctx.globalAlpha = alpha;
   ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
   ctx.textBaseline = "alphabetic";
   const metrics = ctx.measureText("Mg");
   const ascent = metrics.actualBoundingBoxAscent;
   const centerX = playRes.width / 2;
   let y = style.position === "center" ? playRes.height / 2 + style.offsetY : playRes.height * 0.92 + style.offsetY;
-  for (const row of active.rows) {
-    let x = centerX - row.width / 2;
-    for (const { word, text, width } of row.words) {
-      const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
-      const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-      const scaleFactor = computePulseScale(style, progress);
-      const fillColor = activeWord ? style.highlightColor : style.baseColor;
-      drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor);
-      x += width;
+  for (const { entry, alpha } of visibleLines) {
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    let lineY = y;
+    for (const row of entry.rows) {
+      let x = centerX - row.width / 2;
+      for (const { word, text, width } of row.words) {
+        const visibleWord = isWordVisible(entry.line, word, timeMs);
+        if (visibleWord) {
+          const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
+          const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
+          const scaleFactor = computePulseScale(style, progress);
+          const fillColor = activeWord ? style.highlightColor : style.baseColor;
+          drawWord(
+            ctx,
+            text,
+            x,
+            lineY,
+            style,
+            scaleFactor,
+            ascent,
+            fillColor,
+            word.emphasis
+          );
+        }
+        x += width;
+      }
+      lineY += style.fontSize * style.lineSpacing;
     }
-    y += style.fontSize * style.lineSpacing;
+    ctx.restore();
   }
   ctx.restore();
 }
+function resolveTransitionMs(style) {
+  return clamp(
+    Math.max(DEFAULT_TRANSITION_MS, style.fadeInMs, style.fadeOutMs),
+    MIN_TRANSITION_MS,
+    MAX_TRANSITION_MS
+  );
+}
+function computeLineAlpha(line, timeMs, transitionMs) {
+  const padding = transitionMs / 2;
+  const visibleStart = line.startMs - padding;
+  const visibleEnd = line.endMs + padding;
+  if (timeMs < visibleStart || timeMs > visibleEnd) {
+    return 0;
+  }
+  const fadeIn = clamp((timeMs - visibleStart) / transitionMs);
+  const fadeOut = clamp((visibleEnd - timeMs) / transitionMs);
+  return Math.min(fadeIn, fadeOut);
+}
+function isWordVisible(line, word, timeMs) {
+  if (line.mode !== "progressive_build") {
+    return true;
+  }
+  return timeMs >= word.startMs;
+}
 
 // src/index.ts
-var injectedVersion = "1.0.0".length > 0 ? "1.0.0" : "dev";
+var injectedVersion = "1.2.0".length > 0 ? "1.2.0" : "dev";
 var VERSION = injectedVersion;
 export {
   VERSION,

package/dist/renderer.iife.js

@@ -26,66 +26,187 @@ var SubvoRenderer = (() => {
   });
 
   // src/layout.ts
+  var MAX_ROW_WIDTH_RATIO = 0.72;
+  var ONE_ROW_COMFORT_RATIO = 0.66;
+  var CLOSING_PUNCTUATION_RE = /["')\]}”’]+$/;
+  var STRONG_BOUNDARY_RE = /[.?!:;]$/;
+  var SOFT_BOUNDARY_RE = /[,]$/;
+  var SOFT_BREAK_WORDS = /* @__PURE__ */ new Set([
+    "and",
+    "because",
+    "but",
+    "now",
+    "ok",
+    "okay",
+    "so",
+    "then",
+    "well"
+  ]);
   function computeLayout(ctx, renderJob) {
-    const { style } = renderJob;
+    const { style, playRes } = renderJob;
     ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
     ctx.textBaseline = "alphabetic";
     return renderJob.lines.map((line) => {
-      const rows = chunkWords(line.words, style.maxWordsPerLine);
+      const rows = resolveRows(
+        ctx,
+        line.words,
+        line.breakHints,
+        style.maxWordsPerLine,
+        playRes.width
+      );
       return {
         line,
-        rows: rows.map((words) => {
-          let rowWidth = 0;
-          const measuredWords = words.map((word, index) => {
-            const text = index < words.length - 1 ? `${word.text} ` : word.text;
-            const metrics = ctx.measureText(text);
-            const width = metrics.width;
-            rowWidth += width;
-            return {
-              word,
-              text,
-              width
-            };
-          });
-          return {
-            words: measuredWords,
-            width: rowWidth
-          };
-        })
+        rows: rows.map((words) => buildLayoutRow(ctx, words))
       };
     });
   }
-  function chunkWords(words, maxPerLine) {
-    if (maxPerLine <= 0) return [words];
-    const rows = [];
-    let current = [];
-    for (const word of words) {
-      current.push(word);
-      if (current.length >= maxPerLine) {
-        rows.push(current);
-        current = [];
+  function resolveRows(ctx, words, breakHints, maxWordsPerLine, playWidth) {
+    if (words.length <= 1) {
+      return [words];
+    }
+    const measuredWords = words.map((word) => ({
+      word,
+      width: ctx.measureText(word.text).width
+    }));
+    const spaceWidth = ctx.measureText(" ").width;
+    const hintSet = new Set((breakHints != null ? breakHints : []).map((hint) => String(hint)));
+    const maxRowWidth = playWidth * MAX_ROW_WIDTH_RATIO;
+    const totalWidth = measureRowWidth(measuredWords, spaceWidth);
+    const candidates = [];
+    candidates.push({
+      rows: [measuredWords],
+      score: scoreSingleRowCandidate(
+        [measuredWords],
+        totalWidth,
+        maxRowWidth,
+        hintSet,
+        maxWordsPerLine
+      )
+    });
+    for (let index = 1; index < measuredWords.length; index += 1) {
+      const first = measuredWords.slice(0, index);
+      const second = measuredWords.slice(index);
+      candidates.push({
+        rows: [first, second],
+        score: scoreTwoRowCandidate(
+          [first, second],
+          hintSet,
+          maxRowWidth,
+          maxWordsPerLine,
+          spaceWidth
+        )
+      });
+    }
+    candidates.sort((left, right) => left.score - right.score);
+    return candidates[0].rows.map((row) => row.map((entry) => entry.word));
+  }
+  function scoreSingleRowCandidate(rows, totalWidth, maxRowWidth, hintSet, maxWordsPerLine) {
+    var _a, _b;
+    let score = 0;
+    score += overflowPenalty(totalWidth, maxRowWidth) * 6;
+    if (totalWidth > maxRowWidth * ONE_ROW_COMFORT_RATIO) {
+      score += (totalWidth - maxRowWidth * ONE_ROW_COMFORT_RATIO) * 0.12;
+    }
+    const wordCount = (_b = (_a = rows[0]) == null ? void 0 : _a.length) != null ? _b : 0;
+    if (wordCount > Math.max(4, maxWordsPerLine + 1)) {
+      score += (wordCount - Math.max(4, maxWordsPerLine + 1)) * 40;
+    }
+    if (hintSet.size > 0) {
+      score += 60;
+    }
+    return score;
+  }
+  function scoreTwoRowCandidate(rows, hintSet, maxRowWidth, maxWordsPerLine, spaceWidth) {
+    var _a, _b;
+    const [first, second] = rows;
+    const firstWidth = measureRowWidth(first, spaceWidth);
+    const secondWidth = measureRowWidth(second, spaceWidth);
+    let score = 0;
+    score += overflowPenalty(firstWidth, maxRowWidth) * 8;
+    score += overflowPenalty(secondWidth, maxRowWidth) * 8;
+    score += Math.abs(firstWidth - secondWidth) * 0.18;
+    score += Math.abs(first.length - second.length) * 16;
+    if (first.length === 1 || second.length === 1) {
+      score += 320;
+    } else {
+      if (first.length === 2) score += 45;
+      if (second.length === 2) score += 45;
+    }
+    const preferredWordsPerRow = Math.max(3, maxWordsPerLine);
+    if (first.length > preferredWordsPerRow + 2) {
+      score += (first.length - (preferredWordsPerRow + 2)) * 25;
+    }
+    if (second.length > preferredWordsPerRow + 2) {
+      score += (second.length - (preferredWordsPerRow + 2)) * 25;
+    }
+    const nextRowFirstWord = (_a = second[0]) == null ? void 0 : _a.word;
+    if (nextRowFirstWord) {
+      if (hintSet.has(String(nextRowFirstWord.id))) {
+        score -= 70;
+      } else if (hintSet.size > 0) {
+        score += 20;
       }
     }
-    if (current.length > 0) {
-      rows.push(current);
+    const boundaryWord = (_b = first[first.length - 1]) == null ? void 0 : _b.word;
+    if (boundaryWord) {
+      score -= boundaryBonus(boundaryWord.text);
+    }
+    if (nextRowFirstWord) {
+      score -= softBreakWordBonus(nextRowFirstWord.text);
+    }
+    return score;
+  }
+  function overflowPenalty(width, maxWidth) {
+    return Math.max(0, width - maxWidth);
+  }
+  function boundaryBonus(text) {
+    const normalized = normalizeBoundaryToken(text);
+    if (!normalized) {
+      return 0;
+    }
+    if (STRONG_BOUNDARY_RE.test(normalized)) {
+      return 55;
+    }
+    if (SOFT_BOUNDARY_RE.test(normalized)) {
+      return 35;
     }
-    return rows;
+    return 0;
+  }
+  function softBreakWordBonus(text) {
+    return SOFT_BREAK_WORDS.has(normalizeWord(text)) ? 18 : 0;
+  }
+  function normalizeBoundaryToken(text) {
+    return text.replace(CLOSING_PUNCTUATION_RE, "");
+  }
+  function normalizeWord(text) {
+    return normalizeBoundaryToken(text).replace(/^[^\w]+|[^\w]+$/g, "").toLowerCase();
+  }
+  function measureRowWidth(words, spaceWidth) {
+    const wordWidth = words.reduce((total, entry) => total + entry.width, 0);
+    return wordWidth + Math.max(0, words.length - 1) * spaceWidth;
+  }
+  function buildLayoutRow(ctx, words) {
+    let rowWidth = 0;
+    const measuredWords = words.map((word, index) => {
+      const text = index < words.length - 1 ? `${word.text} ` : word.text;
+      const width = ctx.measureText(text).width;
+      rowWidth += width;
+      return {
+        word,
+        text,
+        width
+      };
+    });
+    return {
+      words: measuredWords,
+      width: rowWidth
+    };
   }
 
   // src/effects.ts
   function clamp(value, min = 0, max = 1) {
     return Math.min(max, Math.max(min, value));
   }
-  function computeFadeAlpha(style, line, timeMs) {
-    let alpha = 1;
-    if (style.fadeInMs > 0) {
-      alpha = Math.min(alpha, (timeMs - line.startMs) / style.fadeInMs);
-    }
-    if (style.fadeOutMs > 0) {
-      alpha = Math.min(alpha, (line.endMs - timeMs) / style.fadeOutMs);
-    }
-    return clamp(alpha);
-  }
   function computeWordProgress(word, timeMs) {
     const duration = word.endMs - word.startMs;
     if (duration <= 0) return 0;
@@ -96,24 +217,29 @@ var SubvoRenderer = (() => {
   }
 
   // src/drawText.ts
-  function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor) {
-    const invScale = 1 / scaleFactor;
+  function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor, emphasis = 0) {
+    const emphasisBoost = emphasis > 0.6 ? Math.min(1, (emphasis - 0.6) / 0.4) : 0;
+    const effectiveScale = scaleFactor * (1 + emphasisBoost * 0.06);
+    const invScale = 1 / effectiveScale;
+    const strokeWidth = style.outlineWidth + emphasisBoost * 1.2;
+    const baseBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
+    const emphasisBlur = style.fontSize * 0.12 * emphasisBoost * invScale;
     ctx.save();
     ctx.translate(x, y);
     ctx.translate(0, -ascent);
-    ctx.scale(scaleFactor, scaleFactor);
+    ctx.scale(effectiveScale, effectiveScale);
     ctx.translate(0, ascent);
     ctx.fillStyle = fillColor;
-    if (style.outlineWidth > 0) {
-      ctx.lineWidth = style.outlineWidth * invScale;
+    if (strokeWidth > 0) {
+      ctx.lineWidth = strokeWidth * invScale;
       ctx.strokeStyle = style.outlineColor;
       ctx.strokeText(text, 0, 0);
     }
-    if (style.shadow || style.glowIntensity > 0) {
-      ctx.shadowColor = style.outlineColor;
+    if (style.shadow || style.glowIntensity > 0 || emphasisBoost > 0) {
+      ctx.shadowColor = emphasisBoost > 0 ? fillColor : style.outlineColor;
       ctx.shadowOffsetX = style.shadow ? style.shadowDepth * invScale : 0;
       ctx.shadowOffsetY = style.shadow ? style.shadowDepth * invScale : 0;
-      ctx.shadowBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
+      ctx.shadowBlur = baseBlur + emphasisBlur;
     } else {
       ctx.shadowColor = "transparent";
       ctx.shadowBlur = 0;
@@ -125,47 +251,93 @@ var SubvoRenderer = (() => {
   }
 
   // src/renderFrame.ts
+  var DEFAULT_TRANSITION_MS = 150;
+  var MIN_TRANSITION_MS = 120;
+  var MAX_TRANSITION_MS = 180;
   function renderFrame(ctx, renderJob, timeMs) {
     const { playRes, style } = renderJob;
     const layout = computeLayout(ctx, renderJob);
-    const active = layout.find(
-      (line) => timeMs >= line.line.startMs && timeMs <= line.line.endMs
-    );
-    if (!active) return;
+    const transitionMs = resolveTransitionMs(style);
+    const visibleLines = layout.map((entry) => ({
+      entry,
+      alpha: computeLineAlpha(entry.line, timeMs, transitionMs)
+    })).filter((entry) => entry.alpha > 0);
+    if (!visibleLines.length) return;
     const transform = ctx.getTransform();
     const canvasWidth = ctx.canvas.width / (transform.a || 1);
     const canvasHeight = ctx.canvas.height / (transform.d || 1);
     const scale = Math.max(canvasWidth / playRes.width, canvasHeight / playRes.height);
     const offsetX = (canvasWidth - playRes.width * scale) / 2;
     const offsetY = (canvasHeight - playRes.height * scale) / 2;
-    const alpha = computeFadeAlpha(style, active.line, timeMs);
     ctx.save();
     ctx.translate(offsetX, offsetY);
     ctx.scale(scale, scale);
-    ctx.globalAlpha = alpha;
     ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
     ctx.textBaseline = "alphabetic";
     const metrics = ctx.measureText("Mg");
     const ascent = metrics.actualBoundingBoxAscent;
     const centerX = playRes.width / 2;
     let y = style.position === "center" ? playRes.height / 2 + style.offsetY : playRes.height * 0.92 + style.offsetY;
-    for (const row of active.rows) {
-      let x = centerX - row.width / 2;
-      for (const { word, text, width } of row.words) {
-        const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
-        const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-        const scaleFactor = computePulseScale(style, progress);
-        const fillColor = activeWord ? style.highlightColor : style.baseColor;
-        drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor);
-        x += width;
+    for (const { entry, alpha } of visibleLines) {
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      let lineY = y;
+      for (const row of entry.rows) {
+        let x = centerX - row.width / 2;
+        for (const { word, text, width } of row.words) {
+          const visibleWord = isWordVisible(entry.line, word, timeMs);
+          if (visibleWord) {
+            const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
+            const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
+            const scaleFactor = computePulseScale(style, progress);
+            const fillColor = activeWord ? style.highlightColor : style.baseColor;
+            drawWord(
+              ctx,
+              text,
+              x,
+              lineY,
+              style,
+              scaleFactor,
+              ascent,
+              fillColor,
+              word.emphasis
+            );
+          }
+          x += width;
+        }
+        lineY += style.fontSize * style.lineSpacing;
       }
-      y += style.fontSize * style.lineSpacing;
+      ctx.restore();
     }
     ctx.restore();
   }
+  function resolveTransitionMs(style) {
+    return clamp(
+      Math.max(DEFAULT_TRANSITION_MS, style.fadeInMs, style.fadeOutMs),
+      MIN_TRANSITION_MS,
+      MAX_TRANSITION_MS
+    );
+  }
+  function computeLineAlpha(line, timeMs, transitionMs) {
+    const padding = transitionMs / 2;
+    const visibleStart = line.startMs - padding;
+    const visibleEnd = line.endMs + padding;
+    if (timeMs < visibleStart || timeMs > visibleEnd) {
+      return 0;
+    }
+    const fadeIn = clamp((timeMs - visibleStart) / transitionMs);
+    const fadeOut = clamp((visibleEnd - timeMs) / transitionMs);
+    return Math.min(fadeIn, fadeOut);
+  }
+  function isWordVisible(line, word, timeMs) {
+    if (line.mode !== "progressive_build") {
+      return true;
+    }
+    return timeMs >= word.startMs;
+  }
 
   // src/index.ts
-  var injectedVersion = "1.0.0".length > 0 ? "1.0.0" : "dev";
+  var injectedVersion = "1.2.0".length > 0 ? "1.2.0" : "dev";
   var VERSION = injectedVersion;
   return __toCommonJS(src_exports);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subvo/renderer",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/renderer.esm.js",
   "module": "./dist/renderer.esm.js",
@@ -15,11 +15,11 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup"
+  },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.7.0"
-  },
-  "scripts": {
-    "build": "tsup"
   }
-}
+}