ugcinc-render 1.8.19 → 1.8.21

package/dist/index.d.mts

@@ -641,6 +641,8 @@ interface ScreenshotAnimationProps {
     pauseDurationMs?: number;
     /** Duration of flash phase (ms) */
     flashDurationMs?: number;
+    /** Duration to hold at end after animation completes (ms) */
+    holdDurationMs?: number;
     /** Border corner radius (px) */
     borderRadius?: number;
     /** Border color */
@@ -648,7 +650,7 @@ interface ScreenshotAnimationProps {
     /** Background color (behind everything) */
     backgroundColor?: string;
 }
-declare function ScreenshotAnimation({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationProps): react_jsx_runtime.JSX.Element;
+declare function ScreenshotAnimation({ imageUrl, width, height, pauseDurationMs, flashDurationMs, holdDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationProps): react_jsx_runtime.JSX.Element;
 
 interface TextElementProps {
     segment: TextSegment;

package/dist/index.d.ts

@@ -641,6 +641,8 @@ interface ScreenshotAnimationProps {
     pauseDurationMs?: number;
     /** Duration of flash phase (ms) */
     flashDurationMs?: number;
+    /** Duration to hold at end after animation completes (ms) */
+    holdDurationMs?: number;
     /** Border corner radius (px) */
     borderRadius?: number;
     /** Border color */
@@ -648,7 +650,7 @@ interface ScreenshotAnimationProps {
     /** Background color (behind everything) */
     backgroundColor?: string;
 }
-declare function ScreenshotAnimation({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationProps): react_jsx_runtime.JSX.Element;
+declare function ScreenshotAnimation({ imageUrl, width, height, pauseDurationMs, flashDurationMs, holdDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationProps): react_jsx_runtime.JSX.Element;
 
 interface TextElementProps {
     segment: TextSegment;

package/dist/index.js

@@ -2248,37 +2248,179 @@ function AutoCaptionCompositionWithVideo({
 
 // src/compositions/ScreenshotAnimation.tsx
 var import_remotion7 = require("remotion");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var PHASE2_ANIMATION_DURATION = 960;
-var START = {
-  ssBorderTop: 0.0276,
-  ssBorderTopInner: 0.035,
-  ssBorderRight: 0.9883,
-  ssBorderLeft: 0,
-  ssBorderBottom: 1,
-  imgTop: 0.5125,
-  imgClipRight: 0.2076,
-  imgClipBottom: 0.7103,
-  whiteOpacity: 0.862
+
+// src/data/screenshot.ts
+var screenshotMovementData = {
+  "ssBorderTop": {
+    "0": 0.0276,
+    "80": 0.2392,
+    "160": 0.3898,
+    "240": 0.497,
+    "320": 0.5732,
+    "400": 0.6275,
+    "480": 0.6661,
+    "560": 0.6936,
+    "640": 0.7131,
+    "720": 0.727,
+    "800": 0.7369,
+    "880": 0.744,
+    "960": 0.749
+  },
+  "ssBorderTopInner": {
+    "0": 0.035,
+    "80": 0.2458,
+    "160": 0.3959,
+    "240": 0.5028,
+    "320": 0.5788,
+    "400": 0.633,
+    "480": 0.6715,
+    "560": 0.699,
+    "640": 0.7185,
+    "720": 0.7324,
+    "800": 0.7423,
+    "880": 0.7493,
+    "960": 0.7543
+  },
+  "ssBorderRight": {
+    "0": 0.9883,
+    "80": 0.7926,
+    "160": 0.6532,
+    "240": 0.5538,
+    "320": 0.4829,
+    "400": 0.4324,
+    "480": 0.3964,
+    "560": 0.3707,
+    "640": 0.3525,
+    "720": 0.3394,
+    "800": 0.3301,
+    "880": 0.3235,
+    "960": 0.3188
+  },
+  "ssBorderLeft": {
+    "0": 0,
+    "80": 0.0197,
+    "160": 0.0393,
+    "240": 0.0537,
+    "320": 0.0642,
+    "400": 0.0719,
+    "480": 0.0776,
+    "560": 0.0817,
+    "640": 0.0848,
+    "720": 0.087,
+    "800": 0.0886,
+    "880": 0.0898,
+    "960": 0.0907
+  },
+  "ssBorderBottom": {
+    "0": 1,
+    "80": 0.9911,
+    "160": 0.9828,
+    "240": 0.9766,
+    "320": 0.9719,
+    "400": 0.9683,
+    "480": 0.9656,
+    "560": 0.9636,
+    "640": 0.9621,
+    "720": 0.961,
+    "800": 0.9601,
+    "880": 0.9595,
+    "960": 0.959
+  },
+  "imgTop": {
+    "0": 0.5125,
+    "80": 0.5833,
+    "160": 0.6336,
+    "240": 0.6693,
+    "320": 0.6946,
+    "400": 0.7126,
+    "480": 0.7254,
+    "560": 0.7345,
+    "640": 0.7409,
+    "720": 0.7455,
+    "800": 0.7488,
+    "880": 0.7511,
+    "960": 0.7527
+  },
+  "imgClipRight": {
+    "0": 0.2076,
+    "80": 0.2348,
+    "160": 0.2548,
+    "240": 0.2696,
+    "320": 0.2804,
+    "400": 0.2884,
+    "480": 0.2943,
+    "560": 0.2987,
+    "640": 0.3019,
+    "720": 0.3042,
+    "800": 0.3059,
+    "880": 0.3072,
+    "960": 0.3082
+  },
+  "imgClipBottom": {
+    "0": 0.7103,
+    "80": 0.7833,
+    "160": 0.8347,
+    "240": 0.8709,
+    "320": 0.8964,
+    "400": 0.9143,
+    "480": 0.927,
+    "560": 0.9358,
+    "640": 0.9421,
+    "720": 0.9465,
+    "800": 0.9496,
+    "880": 0.9518,
+    "960": 0.9533
+  }
 };
-var END = {
-  ssBorderTop: 0.749,
-  ssBorderTopInner: 0.7543,
-  ssBorderRight: 0.3188,
-  ssBorderLeft: 0.0907,
-  ssBorderBottom: 0.959,
-  imgTop: 0.7527,
-  imgClipRight: 0.3082,
-  imgClipBottom: 0.9533,
-  whiteOpacity: 0.1687
+var whiteOverlayOpacityData = {
+  "0": 0.862,
+  "80": 0.7829,
+  "160": 0.7077,
+  "240": 0.6365,
+  "320": 0.5691,
+  "400": 0.5056,
+  "480": 0.446,
+  "560": 0.3903,
+  "640": 0.3384,
+  "720": 0.2903,
+  "800": 0.246,
+  "880": 0.2054,
+  "960": 0.1687,
+  "1160": 0.093,
+  "1360": 0.0402,
+  "1760": 0
 };
-var WHITE_FADE_DURATION = 960;
-var GRAY_START = { r: 255, g: 255, b: 255 };
-var GRAY_END = { r: 174, g: 169, b: 171 };
+
+// src/compositions/ScreenshotAnimation.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function interpolateKeyframes(timeMs, data) {
+  const times = Object.keys(data).map(Number).sort((a, b) => a - b);
+  if (timeMs <= times[0]) {
+    return data[times[0].toString()];
+  }
+  if (timeMs >= times[times.length - 1]) {
+    return data[times[times.length - 1].toString()];
+  }
+  let lowerTime = times[0];
+  let upperTime = times[times.length - 1];
+  for (let i = 0; i < times.length - 1; i++) {
+    if (timeMs >= times[i] && timeMs <= times[i + 1]) {
+      lowerTime = times[i];
+      upperTime = times[i + 1];
+      break;
+    }
+  }
+  const lowerValue = data[lowerTime.toString()];
+  const upperValue = data[upperTime.toString()];
+  const progress = (timeMs - lowerTime) / (upperTime - lowerTime);
+  return lowerValue + (upperValue - lowerValue) * progress;
+}
 var CORNER_RADIUS_START_TIME = 400;
 var CORNER_RADIUS_DURATION = 180;
+var GRAY_START = { r: 255, g: 255, b: 255 };
+var GRAY_END = { r: 174, g: 169, b: 171 };
+var MOVEMENT_DURATION = 960;
 var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
-var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
 function smoothInterpolate(timeMs, startTime, duration, startValue, endValue, easingFn = easeOutQuart) {
   if (timeMs <= startTime) return startValue;
   if (timeMs >= startTime + duration) return endValue;
@@ -2292,6 +2434,7 @@ function ScreenshotAnimation({
   height = 2622,
   pauseDurationMs = 1e3,
   flashDurationMs = 255,
+  holdDurationMs = 500,
   borderRadius = 35,
   borderColor = "rgba(254, 255, 255, 1)",
   backgroundColor = "#000000"
@@ -2311,26 +2454,20 @@ function ScreenshotAnimation({
   if (isPause) {
     whiteOpacity = 0;
   } else if (isFlashPhase) {
+    const startOpacity = interpolateKeyframes(0, whiteOverlayOpacityData);
     const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
-    whiteOpacity = (0, import_remotion7.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
+    whiteOpacity = (0, import_remotion7.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, startOpacity], {
       extrapolateRight: "clamp"
     });
   } else if (isPhase2) {
-    whiteOpacity = smoothInterpolate(
-      phase2TimeMs,
-      0,
-      WHITE_FADE_DURATION,
-      START.whiteOpacity,
-      END.whiteOpacity,
-      easeOutExpo
-    );
+    whiteOpacity = interpolateKeyframes(phase2TimeMs, whiteOverlayOpacityData);
   }
   let containerTop;
   let containerTopInner;
   let containerLeft;
   let containerRight;
   let containerBottom;
-  const borderWidthPercent = START.ssBorderTopInner - START.ssBorderTop;
+  const borderWidthPercent = interpolateKeyframes(0, screenshotMovementData.ssBorderTopInner) - interpolateKeyframes(0, screenshotMovementData.ssBorderTop);
   if (isFlashPhase) {
     containerTop = 0;
     containerTopInner = borderWidthPercent;
@@ -2338,11 +2475,11 @@ function ScreenshotAnimation({
     containerRight = 1;
     containerBottom = 1;
   } else {
-    containerTop = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderTop, END.ssBorderTop, easeOutQuart);
-    containerTopInner = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderTopInner, END.ssBorderTopInner, easeOutQuart);
-    containerLeft = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderLeft, END.ssBorderLeft, easeOutQuart);
-    containerRight = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderRight, END.ssBorderRight, easeOutQuart);
-    containerBottom = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderBottom, END.ssBorderBottom, easeOutQuart);
+    containerTop = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderTop);
+    containerTopInner = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderTopInner);
+    containerLeft = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderLeft);
+    containerRight = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderRight);
+    containerBottom = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderBottom);
   }
   const borderWidth = (containerTopInner - containerTop) * height;
   const containerX = containerLeft * width;
@@ -2366,17 +2503,17 @@ function ScreenshotAnimation({
   let imgClipRightPercent;
   let imgClipBottomPercent;
   if (isFlashPhase) {
-    imgTopPercent = START.imgTop;
-    imgClipRightPercent = START.imgClipRight;
-    imgClipBottomPercent = START.imgClipBottom;
+    imgTopPercent = interpolateKeyframes(0, screenshotMovementData.imgTop);
+    imgClipRightPercent = interpolateKeyframes(0, screenshotMovementData.imgClipRight);
+    imgClipBottomPercent = interpolateKeyframes(0, screenshotMovementData.imgClipBottom);
   } else {
-    imgTopPercent = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.imgTop, END.imgTop, easeOutQuart);
-    imgClipRightPercent = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.imgClipRight, END.imgClipRight, easeOutQuart);
-    imgClipBottomPercent = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.imgClipBottom, END.imgClipBottom, easeOutQuart);
+    imgTopPercent = interpolateKeyframes(phase2TimeMs, screenshotMovementData.imgTop);
+    imgClipRightPercent = interpolateKeyframes(phase2TimeMs, screenshotMovementData.imgClipRight);
+    imgClipBottomPercent = interpolateKeyframes(phase2TimeMs, screenshotMovementData.imgClipBottom);
   }
   const showSmallClip = isPhase2;
-  const thumbnailFilled = phase2TimeMs >= PHASE2_ANIMATION_DURATION;
-  const grayProgress = Math.min(1, phase2TimeMs / PHASE2_ANIMATION_DURATION);
+  const thumbnailFilled = phase2TimeMs >= MOVEMENT_DURATION;
+  const grayProgress = Math.min(1, phase2TimeMs / MOVEMENT_DURATION);
   const easedGrayProgress = easeOutQuart(grayProgress);
   const grayR = GRAY_START.r + (GRAY_END.r - GRAY_START.r) * easedGrayProgress;
   const grayG = GRAY_START.g + (GRAY_END.g - GRAY_START.g) * easedGrayProgress;
@@ -2933,6 +3070,7 @@ var defaultScreenshotAnimationProps = {
   height: 2622,
   pauseDurationMs: 1e3,
   flashDurationMs: 255,
+  holdDurationMs: 500,
   borderRadius: 35,
   borderColor: "rgba(254, 255, 255, 1)",
   backgroundColor: "#000000"
@@ -2943,6 +3081,7 @@ var screenshotAnimationSchema = import_zod.z.object({
   height: import_zod.z.number().optional().default(2622).describe("Canvas height (px)"),
   pauseDurationMs: import_zod.z.number().optional().default(1e3).describe("Pause before flash (ms)"),
   flashDurationMs: import_zod.z.number().optional().default(255).describe("Flash phase duration (ms)"),
+  holdDurationMs: import_zod.z.number().optional().default(500).describe("Hold at end after animation (ms)"),
   borderRadius: import_zod.z.number().optional().default(35).describe("Border corner radius (px)"),
   borderColor: import_zod.z.string().optional().default("rgba(254, 255, 255, 1)").describe("Border color"),
   backgroundColor: import_zod.z.string().optional().default("#000000").describe("Background color")

package/dist/index.mjs

@@ -1385,37 +1385,179 @@ function AutoCaptionCompositionWithVideo({
 
 // src/compositions/ScreenshotAnimation.tsx
 import { AbsoluteFill as AbsoluteFill4, Img as Img3, interpolate as interpolate2, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5 } from "remotion";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var PHASE2_ANIMATION_DURATION = 960;
-var START = {
-  ssBorderTop: 0.0276,
-  ssBorderTopInner: 0.035,
-  ssBorderRight: 0.9883,
-  ssBorderLeft: 0,
-  ssBorderBottom: 1,
-  imgTop: 0.5125,
-  imgClipRight: 0.2076,
-  imgClipBottom: 0.7103,
-  whiteOpacity: 0.862
+
+// src/data/screenshot.ts
+var screenshotMovementData = {
+  "ssBorderTop": {
+    "0": 0.0276,
+    "80": 0.2392,
+    "160": 0.3898,
+    "240": 0.497,
+    "320": 0.5732,
+    "400": 0.6275,
+    "480": 0.6661,
+    "560": 0.6936,
+    "640": 0.7131,
+    "720": 0.727,
+    "800": 0.7369,
+    "880": 0.744,
+    "960": 0.749
+  },
+  "ssBorderTopInner": {
+    "0": 0.035,
+    "80": 0.2458,
+    "160": 0.3959,
+    "240": 0.5028,
+    "320": 0.5788,
+    "400": 0.633,
+    "480": 0.6715,
+    "560": 0.699,
+    "640": 0.7185,
+    "720": 0.7324,
+    "800": 0.7423,
+    "880": 0.7493,
+    "960": 0.7543
+  },
+  "ssBorderRight": {
+    "0": 0.9883,
+    "80": 0.7926,
+    "160": 0.6532,
+    "240": 0.5538,
+    "320": 0.4829,
+    "400": 0.4324,
+    "480": 0.3964,
+    "560": 0.3707,
+    "640": 0.3525,
+    "720": 0.3394,
+    "800": 0.3301,
+    "880": 0.3235,
+    "960": 0.3188
+  },
+  "ssBorderLeft": {
+    "0": 0,
+    "80": 0.0197,
+    "160": 0.0393,
+    "240": 0.0537,
+    "320": 0.0642,
+    "400": 0.0719,
+    "480": 0.0776,
+    "560": 0.0817,
+    "640": 0.0848,
+    "720": 0.087,
+    "800": 0.0886,
+    "880": 0.0898,
+    "960": 0.0907
+  },
+  "ssBorderBottom": {
+    "0": 1,
+    "80": 0.9911,
+    "160": 0.9828,
+    "240": 0.9766,
+    "320": 0.9719,
+    "400": 0.9683,
+    "480": 0.9656,
+    "560": 0.9636,
+    "640": 0.9621,
+    "720": 0.961,
+    "800": 0.9601,
+    "880": 0.9595,
+    "960": 0.959
+  },
+  "imgTop": {
+    "0": 0.5125,
+    "80": 0.5833,
+    "160": 0.6336,
+    "240": 0.6693,
+    "320": 0.6946,
+    "400": 0.7126,
+    "480": 0.7254,
+    "560": 0.7345,
+    "640": 0.7409,
+    "720": 0.7455,
+    "800": 0.7488,
+    "880": 0.7511,
+    "960": 0.7527
+  },
+  "imgClipRight": {
+    "0": 0.2076,
+    "80": 0.2348,
+    "160": 0.2548,
+    "240": 0.2696,
+    "320": 0.2804,
+    "400": 0.2884,
+    "480": 0.2943,
+    "560": 0.2987,
+    "640": 0.3019,
+    "720": 0.3042,
+    "800": 0.3059,
+    "880": 0.3072,
+    "960": 0.3082
+  },
+  "imgClipBottom": {
+    "0": 0.7103,
+    "80": 0.7833,
+    "160": 0.8347,
+    "240": 0.8709,
+    "320": 0.8964,
+    "400": 0.9143,
+    "480": 0.927,
+    "560": 0.9358,
+    "640": 0.9421,
+    "720": 0.9465,
+    "800": 0.9496,
+    "880": 0.9518,
+    "960": 0.9533
+  }
 };
-var END = {
-  ssBorderTop: 0.749,
-  ssBorderTopInner: 0.7543,
-  ssBorderRight: 0.3188,
-  ssBorderLeft: 0.0907,
-  ssBorderBottom: 0.959,
-  imgTop: 0.7527,
-  imgClipRight: 0.3082,
-  imgClipBottom: 0.9533,
-  whiteOpacity: 0.1687
+var whiteOverlayOpacityData = {
+  "0": 0.862,
+  "80": 0.7829,
+  "160": 0.7077,
+  "240": 0.6365,
+  "320": 0.5691,
+  "400": 0.5056,
+  "480": 0.446,
+  "560": 0.3903,
+  "640": 0.3384,
+  "720": 0.2903,
+  "800": 0.246,
+  "880": 0.2054,
+  "960": 0.1687,
+  "1160": 0.093,
+  "1360": 0.0402,
+  "1760": 0
 };
-var WHITE_FADE_DURATION = 960;
-var GRAY_START = { r: 255, g: 255, b: 255 };
-var GRAY_END = { r: 174, g: 169, b: 171 };
+
+// src/compositions/ScreenshotAnimation.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function interpolateKeyframes(timeMs, data) {
+  const times = Object.keys(data).map(Number).sort((a, b) => a - b);
+  if (timeMs <= times[0]) {
+    return data[times[0].toString()];
+  }
+  if (timeMs >= times[times.length - 1]) {
+    return data[times[times.length - 1].toString()];
+  }
+  let lowerTime = times[0];
+  let upperTime = times[times.length - 1];
+  for (let i = 0; i < times.length - 1; i++) {
+    if (timeMs >= times[i] && timeMs <= times[i + 1]) {
+      lowerTime = times[i];
+      upperTime = times[i + 1];
+      break;
+    }
+  }
+  const lowerValue = data[lowerTime.toString()];
+  const upperValue = data[upperTime.toString()];
+  const progress = (timeMs - lowerTime) / (upperTime - lowerTime);
+  return lowerValue + (upperValue - lowerValue) * progress;
+}
 var CORNER_RADIUS_START_TIME = 400;
 var CORNER_RADIUS_DURATION = 180;
+var GRAY_START = { r: 255, g: 255, b: 255 };
+var GRAY_END = { r: 174, g: 169, b: 171 };
+var MOVEMENT_DURATION = 960;
 var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
-var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
 function smoothInterpolate(timeMs, startTime, duration, startValue, endValue, easingFn = easeOutQuart) {
   if (timeMs <= startTime) return startValue;
   if (timeMs >= startTime + duration) return endValue;
@@ -1429,6 +1571,7 @@ function ScreenshotAnimation({
   height = 2622,
   pauseDurationMs = 1e3,
   flashDurationMs = 255,
+  holdDurationMs = 500,
   borderRadius = 35,
   borderColor = "rgba(254, 255, 255, 1)",
   backgroundColor = "#000000"
@@ -1448,26 +1591,20 @@ function ScreenshotAnimation({
   if (isPause) {
     whiteOpacity = 0;
   } else if (isFlashPhase) {
+    const startOpacity = interpolateKeyframes(0, whiteOverlayOpacityData);
     const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
-    whiteOpacity = interpolate2(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
+    whiteOpacity = interpolate2(flashProgress, [0, 0.1, 1], [1, 1, startOpacity], {
       extrapolateRight: "clamp"
     });
   } else if (isPhase2) {
-    whiteOpacity = smoothInterpolate(
-      phase2TimeMs,
-      0,
-      WHITE_FADE_DURATION,
-      START.whiteOpacity,
-      END.whiteOpacity,
-      easeOutExpo
-    );
+    whiteOpacity = interpolateKeyframes(phase2TimeMs, whiteOverlayOpacityData);
   }
   let containerTop;
   let containerTopInner;
   let containerLeft;
   let containerRight;
   let containerBottom;
-  const borderWidthPercent = START.ssBorderTopInner - START.ssBorderTop;
+  const borderWidthPercent = interpolateKeyframes(0, screenshotMovementData.ssBorderTopInner) - interpolateKeyframes(0, screenshotMovementData.ssBorderTop);
   if (isFlashPhase) {
     containerTop = 0;
     containerTopInner = borderWidthPercent;
@@ -1475,11 +1612,11 @@ function ScreenshotAnimation({
     containerRight = 1;
     containerBottom = 1;
   } else {
-    containerTop = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderTop, END.ssBorderTop, easeOutQuart);
-    containerTopInner = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderTopInner, END.ssBorderTopInner, easeOutQuart);
-    containerLeft = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderLeft, END.ssBorderLeft, easeOutQuart);
-    containerRight = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderRight, END.ssBorderRight, easeOutQuart);
-    containerBottom = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.ssBorderBottom, END.ssBorderBottom, easeOutQuart);
+    containerTop = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderTop);
+    containerTopInner = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderTopInner);
+    containerLeft = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderLeft);
+    containerRight = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderRight);
+    containerBottom = interpolateKeyframes(phase2TimeMs, screenshotMovementData.ssBorderBottom);
   }
   const borderWidth = (containerTopInner - containerTop) * height;
   const containerX = containerLeft * width;
@@ -1503,17 +1640,17 @@ function ScreenshotAnimation({
   let imgClipRightPercent;
   let imgClipBottomPercent;
   if (isFlashPhase) {
-    imgTopPercent = START.imgTop;
-    imgClipRightPercent = START.imgClipRight;
-    imgClipBottomPercent = START.imgClipBottom;
+    imgTopPercent = interpolateKeyframes(0, screenshotMovementData.imgTop);
+    imgClipRightPercent = interpolateKeyframes(0, screenshotMovementData.imgClipRight);
+    imgClipBottomPercent = interpolateKeyframes(0, screenshotMovementData.imgClipBottom);
   } else {
-    imgTopPercent = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.imgTop, END.imgTop, easeOutQuart);
-    imgClipRightPercent = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.imgClipRight, END.imgClipRight, easeOutQuart);
-    imgClipBottomPercent = smoothInterpolate(phase2TimeMs, 0, PHASE2_ANIMATION_DURATION, START.imgClipBottom, END.imgClipBottom, easeOutQuart);
+    imgTopPercent = interpolateKeyframes(phase2TimeMs, screenshotMovementData.imgTop);
+    imgClipRightPercent = interpolateKeyframes(phase2TimeMs, screenshotMovementData.imgClipRight);
+    imgClipBottomPercent = interpolateKeyframes(phase2TimeMs, screenshotMovementData.imgClipBottom);
   }
   const showSmallClip = isPhase2;
-  const thumbnailFilled = phase2TimeMs >= PHASE2_ANIMATION_DURATION;
-  const grayProgress = Math.min(1, phase2TimeMs / PHASE2_ANIMATION_DURATION);
+  const thumbnailFilled = phase2TimeMs >= MOVEMENT_DURATION;
+  const grayProgress = Math.min(1, phase2TimeMs / MOVEMENT_DURATION);
   const easedGrayProgress = easeOutQuart(grayProgress);
   const grayR = GRAY_START.r + (GRAY_END.r - GRAY_START.r) * easedGrayProgress;
   const grayG = GRAY_START.g + (GRAY_END.g - GRAY_START.g) * easedGrayProgress;
@@ -1787,6 +1924,7 @@ var defaultScreenshotAnimationProps = {
   height: 2622,
   pauseDurationMs: 1e3,
   flashDurationMs: 255,
+  holdDurationMs: 500,
   borderRadius: 35,
   borderColor: "rgba(254, 255, 255, 1)",
   backgroundColor: "#000000"
@@ -1797,6 +1935,7 @@ var screenshotAnimationSchema = z.object({
   height: z.number().optional().default(2622).describe("Canvas height (px)"),
   pauseDurationMs: z.number().optional().default(1e3).describe("Pause before flash (ms)"),
   flashDurationMs: z.number().optional().default(255).describe("Flash phase duration (ms)"),
+  holdDurationMs: z.number().optional().default(500).describe("Hold at end after animation (ms)"),
   borderRadius: z.number().optional().default(35).describe("Border corner radius (px)"),
   borderColor: z.string().optional().default("rgba(254, 255, 255, 1)").describe("Border color"),
   backgroundColor: z.string().optional().default("#000000").describe("Background color")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.19",
+  "version": "1.8.21",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",