feat: Active word sliding

Author: dmtrKovalenko

src/codecs/active-word.ts

@@ -206,6 +206,124 @@ export function interpolateBackgroundPosition(
   return activePos;
 }
 
+/**
+ * Slide transition state to track continuous background animation
+ */
+export type SlideTransitionState = {
+  // Position we're animating FROM (captured when word changed)
+  fromPos: { x: number; y: number; width: number };
+  // Which word we're animating to
+  toWordIndex: number;
+  // Animation progress (within the word) when we started this transition
+  startProgress: number;
+};
+
+/**
+ * Calculate slide animation position with continuous interpolation.
+ * This function tracks the transition state and smoothly animates the background
+ * from the previous word position to the current active word position.
+ * 
+ * @param activePos - Current active word position (target)
+ * @param activeWordIndex - Index of the current active word
+ * @param animationProgress - Progress through the current word (0-1)
+ * @param transitionState - Current transition state
+ * @param prevActivePos - Position of the PREVIOUS active word (needed when word changes)
+ * @param slideDuration - Duration of slide as fraction of word duration (default 0.3 = 30%)
+ * @returns Interpolated position for the background
+ */
+export function calculateSlidePosition(
+  activePos: { x: number; y: number; width: number },
+  activeWordIndex: number,
+  animationProgress: number,
+  transitionState: SlideTransitionState | null,
+  prevActivePos: { x: number; y: number; width: number } | null,
+  slideDuration: number = 0.3
+): {
+  position: { x: number; y: number; width: number };
+  newTransitionState: SlideTransitionState | null;
+} {
+  // No active word - return as-is
+  if (activeWordIndex < 0) {
+    return { position: activePos, newTransitionState: null };
+  }
+
+  // First word or no previous state - snap to position, no animation
+  if (!transitionState) {
+    const newState: SlideTransitionState = {
+      fromPos: { ...activePos },
+      toWordIndex: activeWordIndex,
+      startProgress: 0,
+    };
+    return { position: activePos, newTransitionState: newState };
+  }
+
+  // Word has changed - start a new transition
+  if (transitionState.toWordIndex !== activeWordIndex) {
+    // Use the previous active position as our starting point
+    // If we don't have it, use where we currently are based on old transition
+    let fromPos: { x: number; y: number; width: number };
+    
+    if (prevActivePos) {
+      // We have the previous word's position - start from there
+      fromPos = { ...prevActivePos };
+    } else {
+      // Fallback: calculate where we were in the old transition
+      // This uses the old fromPos as an approximation
+      fromPos = { ...transitionState.fromPos };
+    }
+
+    const newState: SlideTransitionState = {
+      fromPos,
+      toWordIndex: activeWordIndex,
+      startProgress: animationProgress,
+    };
+
+    // Calculate position for this frame
+    const position = interpolateSlideProgress(
+      newState.fromPos,
+      activePos,
+      newState.startProgress,
+      animationProgress,
+      slideDuration
+    );
+
+    return { position, newTransitionState: newState };
+  }
+
+  // Same word - continue the transition
+  const position = interpolateSlideProgress(
+    transitionState.fromPos,
+    activePos,
+    transitionState.startProgress,
+    animationProgress,
+    slideDuration
+  );
+
+  return { position, newTransitionState: transitionState };
+}
+
+/**
+ * Interpolate between two positions based on animation progress.
+ */
+function interpolateSlideProgress(
+  fromPos: { x: number; y: number; width: number },
+  toPos: { x: number; y: number; width: number },
+  startProgress: number,
+  currentProgress: number,
+  slideDuration: number
+): { x: number; y: number; width: number } {
+  // Calculate how far through the transition we are
+  const elapsed = currentProgress - startProgress;
+  const t = Math.min(1, Math.max(0, elapsed / slideDuration));
+  const easedT = easeOutCubic(t);
+
+  return {
+    x: fromPos.x + (toPos.x - fromPos.x) * easedT,
+    y: fromPos.y + (toPos.y - fromPos.y) * easedT,
+    width: fromPos.width + (toPos.width - fromPos.width) * easedT,
+  };
+}
+
 export function calculateScaledBackground(
   bgWidth: number,
   fontSizePx: number,

src/codecs/subtitle-renderer.ts

@@ -20,6 +20,8 @@ import {
   calculateActualWidth,
   interpolateBackgroundPosition,
   calculateScaledBackground,
+  calculateSlidePosition,
+  SlideTransitionState,
 } from "./active-word";
 
 // Word animation data for export
@@ -90,6 +92,8 @@ export type RendererContext = {
   // For smooth background animation
   prevWordPosition?: { x: number; y: number; width: number };
   animatedBgRect?: Konva.Rect;
+  // For slide animation
+  slideTransitionState?: SlideTransitionState | null;
 };
 
 // monkeypatch Konva for offscreen canvas usage
@@ -352,8 +356,9 @@ function updateWordAnimationLayer(
 
   ctx.wordGroup.destroyChildren();
 
+  // Pop scale is only used when enablePop is enabled AND slide is not enabled
   let popScale = 1;
-  if (wordAnim.showPop && activePos) {
+  if (wordAnim.enablePop && !wordAnim.enableSlide && activePos) {
     popScale = calculatePopScale(animationProgress, wordAnim.pop.scale);
   }
 
@@ -382,15 +387,46 @@ function updateWordAnimationLayer(
     ctx.wordGroup.add(wordText);
   }
 
-  // for background calculate interpolated position (render after non-active words)
-  if (activePos && wordAnim.showBackground) {
-    const isNewWord = ctx.lastActiveWordIndex !== activeWordIndex;
-    const bgPos = interpolateBackgroundPosition(
-      activePos,
-      ctx.prevWordPosition,
-      animationProgress,
-      isNewWord
-    );
+  // Calculate background position - use slide animation if enabled, otherwise use old interpolation
+  if (activePos && wordAnim.enableBackground) {
+    let bgPos: { x: number; y: number; width: number };
+    
+    if (wordAnim.enableSlide) {
+      // Use new slide animation with proper transition tracking
+      const { position, newTransitionState } = calculateSlidePosition(
+        activePos,
+        activeWordIndex,
+        animationProgress,
+        ctx.slideTransitionState ?? null,
+        ctx.prevWordPosition ?? null,
+        0.3, // 30% slide duration
+      );
+      bgPos = position;
+      ctx.slideTransitionState = newTransitionState;
+      
+      // Update previous word position for next word change
+      ctx.prevWordPosition = {
+        x: activePos.x,
+        y: activePos.y,
+        width: activePos.width,
+      };
+    } else {
+      // Use old interpolation method
+      const isNewWord = ctx.lastActiveWordIndex !== activeWordIndex;
+      bgPos = interpolateBackgroundPosition(
+        activePos,
+        ctx.prevWordPosition,
+        animationProgress,
+        isNewWord
+      );
+      
+      // Update previous word position for old method
+      ctx.prevWordPosition = {
+        x: activePos.x,
+        y: activePos.y,
+        width: activePos.width,
+      };
+    }
 
     const bgPadX = wordAnim.background.paddingX;
     const bgPadY = wordAnim.background.paddingY;
@@ -412,12 +448,6 @@ function updateWordAnimationLayer(
       cornerRadius: wordAnim.background.borderRadius,
     });
     ctx.wordGroup.add(bgRect);
-
-    ctx.prevWordPosition = {
-      x: activePos.x,
-      y: activePos.y,
-      width: activePos.width,
-    };
   }
 
   // Render active word last (on top)
@@ -429,13 +459,14 @@ function updateWordAnimationLayer(
     let offsetY = 0;
 
     // Font effect: change text color and/or font weight (fallback to main style)
-    if (wordAnim.showFont) {
+    if (wordAnim.enableFont) {
       fillColor = wordAnim.font.color ?? ctx.style.color;
       fontWeight = wordAnim.font.fontWeight ?? ctx.style.fontWeight;
     }
 
     // Pop effect: scale animation (only for active word)
-    if (wordAnim.showPop) {
+    // Only apply if slide is not enabled (they are mutually exclusive)
+    if (wordAnim.enablePop && !wordAnim.enableSlide) {
       scale = popScale;
       // Offset to scale from center of the word
       offsetX = (activePos.width * (scale - 1)) / 2;

src/screens/editor/EditorCanvas.tsx

@@ -25,6 +25,8 @@ import {
   calculateActualWidth,
   interpolateBackgroundPosition,
   calculateScaledBackground,
+  calculateSlidePosition,
+  SlideTransitionState,
 } from "../../codecs/active-word";
 
 type EditorCanvasProps = {
@@ -122,6 +124,9 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
     width: number;
   } | null>(null);
 
+  // Slide transition state for smooth background animation
+  const slideTransitionRef = React.useRef<SlideTransitionState | null>(null);
+
   const animationProgress = React.useMemo(() => {
     if (!wordChunks || activeWordIndex < 0) return 0;
     return calculateAnimationProgress(wordChunks, activeWordIndex, player.ts);
@@ -346,30 +351,60 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
       activeWordIndex >= 0
         ? wordPositions.find((p) => p.index === activeWordIndex)
         : null;
+    
+    // Pop scale is only used when enablePop is enabled AND slide is not enabled
     const popScale =
-      wordAnim.showPop && activePos
+      wordAnim.enablePop && !wordAnim.enableSlide && activePos
         ? calculatePopScale(animationProgress, wordAnim.pop.scale)
         : 1;
 
-    const prevWord = prevActiveWordRef.current;
-    const isNewWord = prevWord !== null && prevWord.index !== activeWordIndex;
-    const bgPos =
-      activePos && wordAnim.showBackground
-        ? interpolateBackgroundPosition(
-            activePos,
-            prevWord,
-            animationProgress,
-            isNewWord,
-          )
-        : { x: 0, y: 0, width: 0 };
-
-    if (activePos && wordAnim.showBackground) {
-      prevActiveWordRef.current = {
-        index: activeWordIndex,
-        x: activePos.x,
-        y: activePos.y,
-        width: activePos.width,
-      };
+    // Calculate background position - use slide animation if enabled, otherwise use old interpolation
+    let bgPos = { x: 0, y: 0, width: 0 };
+    
+    if (activePos && wordAnim.enableBackground) {
+      if (wordAnim.enableSlide) {
+        // Get previous word position for slide animation
+        const prevWord = prevActiveWordRef.current;
+        const prevActivePos = prevWord ? { x: prevWord.x, y: prevWord.y, width: prevWord.width } : null;
+        
+        // Use new slide animation with proper transition tracking
+        const { position, newTransitionState } = calculateSlidePosition(
+          activePos,
+          activeWordIndex,
+          animationProgress,
+          slideTransitionRef.current,
+          prevActivePos,
+          0.3, // 30% slide duration
+        );
+        bgPos = position;
+        slideTransitionRef.current = newTransitionState;
+        
+        // Update previous word reference for next word change
+        prevActiveWordRef.current = {
+          index: activeWordIndex,
+          x: activePos.x,
+          y: activePos.y,
+          width: activePos.width,
+        };
+      } else {
+        // Use old interpolation method
+        const prevWord = prevActiveWordRef.current;
+        const isNewWord = prevWord !== null && prevWord.index !== activeWordIndex;
+        bgPos = interpolateBackgroundPosition(
+          activePos,
+          prevWord,
+          animationProgress,
+          isNewWord,
+        );
+        
+        // Update previous word reference for old method
+        prevActiveWordRef.current = {
+          index: activeWordIndex,
+          x: activePos.x,
+          y: activePos.y,
+          width: activePos.width,
+        };
+      }
     }
 
     const bgPadX = wordAnim.background.paddingX;
@@ -427,7 +462,7 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
           })}
 
         {/* Render active word background and text last (on top) */}
-        {activePos && wordAnim.showBackground && (
+        {activePos && wordAnim.enableBackground && (
           <Rect
             x={bgPos.x - bgPadX - scaledBg.offsetX}
             y={bgPos.y - bgPadY - scaledBg.offsetY}
@@ -452,13 +487,14 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
             let offsetY = 0;
 
             // Font effect: change text color and/or font weight (fallback to main style)
-            if (wordAnim.showFont) {
+            if (wordAnim.enableFont) {
               fillColor = wordAnim.font.color ?? subtitleStyle.color;
               fontWeight = wordAnim.font.fontWeight ?? subtitleStyle.fontWeight;
             }
 
             // Pop effect: scale animation (reuse pre-calculated popScale)
-            if (wordAnim.showPop) {
+            // Only apply if slide is not enabled (they are mutually exclusive)
+            if (wordAnim.enablePop && !wordAnim.enableSlide) {
               scale = popScale;
               // Offset to scale from center of the word
               offsetX = (activePos.width * (scale - 1)) / 2;