@subvo/renderer 1.2.1 → 1.2.3

package/dist/renderer.d.ts

@@ -18,6 +18,7 @@ type RenderLine = {
     startMs: number;
     endMs: number;
     mode?: RenderMode;
+    motion?: RenderMotion;
     breakHints?: string[];
     words: RenderWord[];
 };
@@ -39,7 +40,13 @@ type RenderMetadata = {
 };
 type RenderPosition = "top_safe" | "center" | "bottom_safe";
 type RenderPreset = "fire" | "clean" | "luxury" | "pop" | "ghost";
-type RenderMode = "phrase_highlight" | "progressive_build";
+type RenderMode = "karaoke" | "phrase_highlight" | "static" | "progressive_build";
+type RenderMotion = {
+    policy?: string;
+    resolvedMode?: RenderMode;
+    reason?: string;
+    metrics?: Record<string, unknown>;
+};
 type RenderStyle = {
     fontFamily: string;
     fontSize: number;
@@ -70,4 +77,4 @@ declare function renderFrame(ctx: CanvasRenderingContext2D, renderJob: RenderJob
 
 declare const VERSION: string;
 
-export { type RenderJob, type RenderLayoutHints, type RenderLine, type RenderMetadata, type RenderPosition, type RenderPreset, type RenderStyle, type RenderWord, type SchemaVersion, VERSION, renderFrame };
+export { type RenderJob, type RenderLayoutHints, type RenderLine, type RenderMetadata, type RenderMotion, type RenderPosition, type RenderPreset, type RenderStyle, type RenderWord, type SchemaVersion, VERSION, renderFrame };

package/dist/renderer.esm.js

@@ -345,10 +345,11 @@ var DEFAULT_TRANSITION_MS = 150;
 var MIN_TRANSITION_MS = 120;
 var MAX_TRANSITION_MS = 180;
 var TOP_UNSAFE_RATIO = 0.14;
-var BOTTOM_UNSAFE_RATIO = 0.22;
+var BOTTOM_UNSAFE_RATIO = 0.24;
 var TOP_SAFE_ANCHOR_RATIO = 0.22;
 var CENTER_ANCHOR_RATIO = 0.5;
-var BOTTOM_SAFE_ANCHOR_RATIO = 0.7;
+var BOTTOM_SAFE_ANCHOR_RATIO = 0.68;
+var PHRASE_HIGHLIGHT_MS = 180;
 function renderFrame(ctx, renderJob, timeMs) {
   var _a;
   const { playRes, style } = renderJob;
@@ -394,14 +395,15 @@ function renderFrame(ctx, renderJob, timeMs) {
       let x = centerX - row.width / 2;
       const rowY = baselineY + rowIndex * lineStep;
       for (const { word, text, width } of row.words) {
+        const motionMode = resolveLineMotionMode(entry.line);
         const visibleWord = isWordVisible(entry.line, word, timeMs);
         if (visibleWord) {
-          const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
-          const emphasis = (_a = word.emphasis) != null ? _a : 0;
-          const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-          const impactProgress = activeWord ? computeImpactProgress(word, timeMs) : 0;
-          const pulseScale = computePulseScale(style, progress);
-          const bounceScale = shouldBounceWord(style, emphasis) ? computeImpactScale(impactProgress) : 1;
+          const activeWord = isWordActive(entry.line, word, timeMs, motionMode);
+          const emphasis = motionMode === "static" ? 0 : (_a = word.emphasis) != null ? _a : 0;
+          const progress = activeWord ? computeMotionProgress(entry.line, word, timeMs, motionMode) : 0;
+          const impactProgress = activeWord && motionMode === "karaoke" ? computeImpactProgress(word, timeMs) : 0;
+          const pulseScale = motionMode === "static" ? 1 : computePulseScale(style, progress);
+          const bounceScale = shouldBounceWord(style, emphasis, motionMode) ? computeImpactScale(impactProgress) : 1;
           const scaleFactor = pulseScale * bounceScale;
           drawWord(
             ctx,
@@ -431,9 +433,8 @@ function resolveTransitionMs(style) {
   );
 }
 function computeLineAlpha(line, timeMs, transitionMs) {
-  const padding = transitionMs / 2;
-  const visibleStart = line.startMs - padding;
-  const visibleEnd = line.endMs + padding;
+  const visibleStart = line.startMs;
+  const visibleEnd = line.endMs;
   if (timeMs < visibleStart || timeMs > visibleEnd) {
     return 0;
   }
@@ -447,7 +448,36 @@ function isWordVisible(line, word, timeMs) {
   }
   return timeMs >= word.startMs;
 }
-function shouldBounceWord(style, emphasis) {
+function resolveLineMotionMode(line) {
+  var _a;
+  const motionMode = (_a = line.motion) == null ? void 0 : _a.resolvedMode;
+  if (motionMode === "karaoke" || motionMode === "phrase_highlight" || motionMode === "static") {
+    return motionMode;
+  }
+  if (line.mode === "static" || line.mode === "karaoke" || line.mode === "progressive_build") {
+    return line.mode;
+  }
+  return "phrase_highlight";
+}
+function isWordActive(line, word, timeMs, motionMode) {
+  if (motionMode === "static") {
+    return false;
+  }
+  if (motionMode === "phrase_highlight") {
+    return timeMs >= line.startMs && timeMs <= line.startMs + PHRASE_HIGHLIGHT_MS;
+  }
+  return timeMs >= word.startMs && timeMs <= word.endMs;
+}
+function computeMotionProgress(line, word, timeMs, motionMode) {
+  if (motionMode === "phrase_highlight") {
+    return clamp((timeMs - line.startMs) / PHRASE_HIGHLIGHT_MS);
+  }
+  return computeWordProgress(word, timeMs);
+}
+function shouldBounceWord(style, emphasis, motionMode) {
+  if (motionMode !== "karaoke") {
+    return false;
+  }
   if (style.preset === "ghost") {
     return false;
   }
@@ -481,7 +511,7 @@ function clampBaselineY(baselineY, rowCount, ascent, descent, lineStep, safeTop,
 }
 
 // src/index.ts
-var injectedVersion = "1.2.1".length > 0 ? "1.2.1" : "dev";
+var injectedVersion = "1.2.2".length > 0 ? "1.2.2" : "dev";
 var VERSION = injectedVersion;
 export {
   VERSION,

package/dist/renderer.iife.js

@@ -372,10 +372,11 @@ var SubvoRenderer = (() => {
   var MIN_TRANSITION_MS = 120;
   var MAX_TRANSITION_MS = 180;
   var TOP_UNSAFE_RATIO = 0.14;
-  var BOTTOM_UNSAFE_RATIO = 0.22;
+  var BOTTOM_UNSAFE_RATIO = 0.24;
   var TOP_SAFE_ANCHOR_RATIO = 0.22;
   var CENTER_ANCHOR_RATIO = 0.5;
-  var BOTTOM_SAFE_ANCHOR_RATIO = 0.7;
+  var BOTTOM_SAFE_ANCHOR_RATIO = 0.68;
+  var PHRASE_HIGHLIGHT_MS = 180;
   function renderFrame(ctx, renderJob, timeMs) {
     var _a;
     const { playRes, style } = renderJob;
@@ -421,14 +422,15 @@ var SubvoRenderer = (() => {
         let x = centerX - row.width / 2;
         const rowY = baselineY + rowIndex * lineStep;
         for (const { word, text, width } of row.words) {
+          const motionMode = resolveLineMotionMode(entry.line);
           const visibleWord = isWordVisible(entry.line, word, timeMs);
           if (visibleWord) {
-            const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
-            const emphasis = (_a = word.emphasis) != null ? _a : 0;
-            const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-            const impactProgress = activeWord ? computeImpactProgress(word, timeMs) : 0;
-            const pulseScale = computePulseScale(style, progress);
-            const bounceScale = shouldBounceWord(style, emphasis) ? computeImpactScale(impactProgress) : 1;
+            const activeWord = isWordActive(entry.line, word, timeMs, motionMode);
+            const emphasis = motionMode === "static" ? 0 : (_a = word.emphasis) != null ? _a : 0;
+            const progress = activeWord ? computeMotionProgress(entry.line, word, timeMs, motionMode) : 0;
+            const impactProgress = activeWord && motionMode === "karaoke" ? computeImpactProgress(word, timeMs) : 0;
+            const pulseScale = motionMode === "static" ? 1 : computePulseScale(style, progress);
+            const bounceScale = shouldBounceWord(style, emphasis, motionMode) ? computeImpactScale(impactProgress) : 1;
             const scaleFactor = pulseScale * bounceScale;
             drawWord(
               ctx,
@@ -458,9 +460,8 @@ var SubvoRenderer = (() => {
     );
   }
   function computeLineAlpha(line, timeMs, transitionMs) {
-    const padding = transitionMs / 2;
-    const visibleStart = line.startMs - padding;
-    const visibleEnd = line.endMs + padding;
+    const visibleStart = line.startMs;
+    const visibleEnd = line.endMs;
     if (timeMs < visibleStart || timeMs > visibleEnd) {
       return 0;
     }
@@ -474,7 +475,36 @@ var SubvoRenderer = (() => {
     }
     return timeMs >= word.startMs;
   }
-  function shouldBounceWord(style, emphasis) {
+  function resolveLineMotionMode(line) {
+    var _a;
+    const motionMode = (_a = line.motion) == null ? void 0 : _a.resolvedMode;
+    if (motionMode === "karaoke" || motionMode === "phrase_highlight" || motionMode === "static") {
+      return motionMode;
+    }
+    if (line.mode === "static" || line.mode === "karaoke" || line.mode === "progressive_build") {
+      return line.mode;
+    }
+    return "phrase_highlight";
+  }
+  function isWordActive(line, word, timeMs, motionMode) {
+    if (motionMode === "static") {
+      return false;
+    }
+    if (motionMode === "phrase_highlight") {
+      return timeMs >= line.startMs && timeMs <= line.startMs + PHRASE_HIGHLIGHT_MS;
+    }
+    return timeMs >= word.startMs && timeMs <= word.endMs;
+  }
+  function computeMotionProgress(line, word, timeMs, motionMode) {
+    if (motionMode === "phrase_highlight") {
+      return clamp((timeMs - line.startMs) / PHRASE_HIGHLIGHT_MS);
+    }
+    return computeWordProgress(word, timeMs);
+  }
+  function shouldBounceWord(style, emphasis, motionMode) {
+    if (motionMode !== "karaoke") {
+      return false;
+    }
     if (style.preset === "ghost") {
       return false;
     }
@@ -508,7 +538,7 @@ var SubvoRenderer = (() => {
   }
 
   // src/index.ts
-  var injectedVersion = "1.2.1".length > 0 ? "1.2.1" : "dev";
+  var injectedVersion = "1.2.2".length > 0 ? "1.2.2" : "dev";
   var VERSION = injectedVersion;
   return __toCommonJS(src_exports);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subvo/renderer",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
   "main": "./dist/renderer.esm.js",
   "module": "./dist/renderer.esm.js",