ugcinc-render 1.8.14 → 1.8.15

package/dist/index.js

@@ -2404,233 +2404,49 @@ function ScreenshotAnimationComposition({
 // src/compositions/ScreenshotAnimationV2.tsx
 var import_remotion8 = require("remotion");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var KEYFRAMES = {
-  // Screenshot container outer bounds (including border)
-  ssBorderTop: [
-    [255, 0.0623],
-    [295, 0.2017],
-    [335, 0.3443],
-    [375, 0.508],
-    [415, 0.584],
-    [455, 0.6367],
-    [495, 0.7023],
-    [535, 0.7065],
-    [575, 0.7255],
-    [615, 0.7329],
-    [655, 0.7371],
-    [695, 0.7413],
-    [735, 0.7434],
-    [835, 0.7434],
-    [935, 0.7455],
-    [1135, 0.7455]
-  ],
-  ssBorderTopInner: [
-    [255, 0.0697],
-    [295, 0.208],
-    [335, 0.3517],
-    [375, 0.5132],
-    [415, 0.5882],
-    [455, 0.642],
-    [495, 0.7076],
-    [535, 0.7138],
-    [575, 0.7308],
-    [615, 0.7381],
-    [655, 0.7423],
-    [695, 0.7466],
-    [735, 0.7487],
-    [835, 0.7497],
-    [935, 0.7497],
-    [1135, 0.7508]
-  ],
-  ssBorderRight: [
-    [255, 0.9584],
-    [295, 0.8245],
-    [335, 0.6951],
-    [375, 0.5404],
-    [415, 0.4734],
-    [455, 0.4226],
-    [495, 0.3742],
-    [535, 0.3557],
-    [575, 0.3418],
-    [615, 0.3349],
-    [655, 0.3279],
-    [695, 0.3257],
-    [735, 0.3257],
-    [835, 0.321],
-    [935, 0.321],
-    [1135, 0.321]
-  ],
-  ssBorderLeft: [
-    [255, 0],
-    [295, 0.0115],
-    [335, 0.0323],
-    [375, 0.0554],
-    [415, 0.067],
-    [455, 0.0739],
-    [495, 0.0808],
-    [535, 0.0831],
-    [575, 0.0877],
-    [615, 0.0877],
-    [655, 0.0901],
-    [695, 0.0901],
-    [735, 0.0901],
-    [835, 0.0901],
-    [935, 0.0901],
-    [1135, 0.0901]
-  ],
-  ssBorderBottom: [
-    [255, 1],
-    [295, 0.9947],
-    [335, 0.9842],
-    [375, 0.9747],
-    [415, 0.9683],
-    [455, 0.9662],
-    [495, 0.9757],
-    [535, 0.962],
-    [575, 0.9599],
-    [615, 0.9588],
-    [655, 0.9588],
-    [695, 0.9588],
-    [735, 0.9588],
-    [835, 0.9588],
-    [935, 0.9588],
-    [1135, 0.9588]
-  ],
-  // Inner content positions
-  imgTop: [
-    [255, 0.5248],
-    [295, 0.5702],
-    [335, 0.6178],
-    [375, 0.6726],
-    [415, 0.6969],
-    [455, 0.7138],
-    [495, 0.7455],
-    [535, 0.7381],
-    [575, 0.7434],
-    [615, 0.7466],
-    [655, 0.7487],
-    [695, 0.7508]
-    // After 735ms, imgTop matches container inner top (content fills container)
-  ],
-  imgClipRight: [
-    [255, 0.2125],
-    [295, 0.2286],
-    [335, 0.2494],
-    [375, 0.2725],
-    [415, 0.2817],
-    [455, 0.291],
-    [495, 0.2979],
-    [535, 0.3002],
-    [575, 0.3025],
-    [615, 0.3025],
-    [655, 0.3002],
-    [695, 0.3095]
-    // After 735ms, clip fills container width
-  ],
-  imgClipBottom: [
-    [255, 0.7233],
-    [295, 0.7698],
-    [335, 0.8184],
-    [375, 0.8722],
-    [415, 0.8975],
-    [455, 0.9145],
-    [495, 0.9504],
-    [535, 0.9472],
-    [575, 0.944],
-    [615, 0.9472],
-    [655, 0.9483],
-    [695, 0.9504]
-    // After 735ms, clip fills container height
-  ],
-  // White overlay opacity (derived from black RGBA: value/255)
-  whiteOpacity: [
-    [255, 0.824],
-    [295, 0.773],
-    [335, 0.722],
-    [375, 0.639],
-    [415, 0.58],
-    [455, 0.522],
-    [495, 0.427],
-    [535, 0.376],
-    [575, 0.345],
-    [615, 0.267],
-    [655, 0.245],
-    [695, 0.165],
-    [735, 0.106],
-    [835, 0.065],
-    [935, 0.039],
-    [1135, 0.014]
-  ],
-  // Gray fill color (RGB values for gap above shifted content)
-  grayFillR: [
-    [255, 241],
-    [295, 237],
-    [335, 231],
-    [375, 224],
-    [415, 219],
-    [455, 213],
-    [495, 205],
-    [535, 200],
-    [575, 191],
-    [615, 188],
-    [655, 188],
-    [695, 174]
-  ],
-  grayFillG: [
-    [255, 239],
-    [295, 234],
-    [335, 228],
-    [375, 221],
-    [415, 217],
-    [455, 210],
-    [495, 203],
-    [535, 197],
-    [575, 189],
-    [615, 187],
-    [655, 187],
-    [695, 169]
-  ],
-  grayFillB: [
-    [255, 242],
-    [295, 237],
-    [335, 231],
-    [375, 224],
-    [415, 220],
-    [455, 216],
-    [495, 206],
-    [535, 200],
-    [575, 192],
-    [615, 190],
-    [655, 190],
-    [695, 171]
-  ],
-  // Inner content bottom corner radius (0 = square, 1 = fully rounded)
-  innerCornerRadius: [
-    [655, 0],
-    [695, 0.15],
-    [735, 0.5],
-    [835, 1]
-  ]
+var CONTAINER_ANIMATION_DURATION = 480;
+var CONTAINER_SETTLE_DURATION = 200;
+var START = {
+  ssBorderTop: 0,
+  ssBorderTopInner: 5e-3,
+  // Small border width
+  ssBorderRight: 1,
+  ssBorderLeft: 0,
+  ssBorderBottom: 1,
+  imgTop: 0.5,
+  // 50% down
+  imgClipRight: 0.21,
+  imgClipBottom: 0.72,
+  whiteOpacity: 0.824
 };
-function interpolateKeyframes(keyframes, timeMs, defaultValue) {
-  if (keyframes.length === 0) {
-    return defaultValue ?? 0;
-  }
-  if (timeMs <= keyframes[0][0]) {
-    return keyframes[0][1];
-  }
-  if (timeMs >= keyframes[keyframes.length - 1][0]) {
-    return keyframes[keyframes.length - 1][1];
-  }
-  for (let i = 0; i < keyframes.length - 1; i++) {
-    const [t1, v1] = keyframes[i];
-    const [t2, v2] = keyframes[i + 1];
-    if (timeMs >= t1 && timeMs <= t2) {
-      const progress = (timeMs - t1) / (t2 - t1);
-      return v1 + (v2 - v1) * progress;
-    }
-  }
-  return keyframes[keyframes.length - 1][1];
+var END = {
+  ssBorderTop: 0.7455,
+  ssBorderTopInner: 0.7508,
+  ssBorderRight: 0.321,
+  ssBorderLeft: 0.0901,
+  ssBorderBottom: 0.9588,
+  imgTop: 0.7508,
+  // Matches container inner top
+  imgClipRight: 0.321,
+  // Matches container right (fills width)
+  imgClipBottom: 0.9588,
+  // Matches container bottom (fills height)
+  whiteOpacity: 0
+};
+var CLIP_FILL_TIME = 480;
+var WHITE_FADE_DURATION = 880;
+var GRAY_START = { r: 255, g: 255, b: 255 };
+var GRAY_END = { r: 174, g: 169, b: 171 };
+var CORNER_RADIUS_START_TIME = 400;
+var CORNER_RADIUS_DURATION = 180;
+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;
+  const progress = (timeMs - startTime) / duration;
+  const easedProgress = easingFn(progress);
+  return startValue + (endValue - startValue) * easedProgress;
 }
 function ScreenshotAnimationV2({
   imageUrl,
@@ -2648,7 +2464,7 @@ function ScreenshotAnimationV2({
   const flashStartMs = pauseDurationMs;
   const flashEndMs = flashStartMs + flashDurationMs;
   const phase2StartMs = flashEndMs;
-  const animationTimeMs = Math.max(0, timeMs - flashStartMs);
+  const phase2TimeMs = Math.max(0, timeMs - phase2StartMs);
   const isPause = timeMs < flashStartMs;
   const isFlashPhase = timeMs >= flashStartMs && timeMs < flashEndMs;
   const isPhase2 = timeMs >= phase2StartMs;
@@ -2658,48 +2474,79 @@ function ScreenshotAnimationV2({
     whiteOpacity = 0;
   } else if (isFlashPhase) {
     const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
-    whiteOpacity = (0, import_remotion8.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, 0.824], {
+    whiteOpacity = (0, import_remotion8.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
       extrapolateRight: "clamp"
     });
   } else if (isPhase2) {
-    whiteOpacity = interpolateKeyframes(KEYFRAMES.whiteOpacity, animationTimeMs);
+    whiteOpacity = smoothInterpolate(
+      phase2TimeMs,
+      0,
+      WHITE_FADE_DURATION,
+      START.whiteOpacity,
+      END.whiteOpacity,
+      easeOutExpo
+    );
+  }
+  let containerTop;
+  let containerTopInner;
+  let containerLeft;
+  let containerRight;
+  let containerBottom;
+  if (isFlashPhase) {
+    containerTop = 0;
+    containerTopInner = 5e-3;
+    containerLeft = 0;
+    containerRight = 1;
+    containerBottom = 1;
+  } else {
+    const totalDuration = CONTAINER_ANIMATION_DURATION + CONTAINER_SETTLE_DURATION;
+    containerTop = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderTop, END.ssBorderTop, easeOutQuart);
+    containerTopInner = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderTopInner, END.ssBorderTopInner, easeOutQuart);
+    containerLeft = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderLeft, END.ssBorderLeft, easeOutQuart);
+    containerRight = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderRight, END.ssBorderRight, easeOutQuart);
+    containerBottom = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderBottom, END.ssBorderBottom, easeOutQuart);
   }
-  const containerTop = isFlashPhase ? 0 : interpolateKeyframes(KEYFRAMES.ssBorderTop, animationTimeMs);
-  const containerTopInner = isFlashPhase ? 5e-3 : interpolateKeyframes(KEYFRAMES.ssBorderTopInner, animationTimeMs);
-  const containerLeft = isFlashPhase ? 0 : interpolateKeyframes(KEYFRAMES.ssBorderLeft, animationTimeMs);
-  const containerRight = isFlashPhase ? 1 : interpolateKeyframes(KEYFRAMES.ssBorderRight, animationTimeMs);
-  const containerBottom = isFlashPhase ? 1 : interpolateKeyframes(KEYFRAMES.ssBorderBottom, animationTimeMs);
   const borderWidth = (containerTopInner - containerTop) * height;
   const containerX = containerLeft * width;
   const containerY = containerTop * height;
   const containerW = (containerRight - containerLeft) * width;
   const containerH = (containerBottom - containerTop) * height;
-  const contentX = containerX + borderWidth;
-  const contentY = containerY + borderWidth;
   const contentW = containerW - borderWidth * 2;
   const contentH = containerH - borderWidth * 2;
-  const imgTopPercent = isFlashPhase ? 0.5 : interpolateKeyframes(KEYFRAMES.imgTop, animationTimeMs);
-  const imgClipRightPercent = interpolateKeyframes(KEYFRAMES.imgClipRight, animationTimeMs);
-  const imgClipBottomPercent = interpolateKeyframes(KEYFRAMES.imgClipBottom, animationTimeMs);
+  let imgTopPercent;
+  let imgClipRightPercent;
+  let imgClipBottomPercent;
+  if (isFlashPhase) {
+    imgTopPercent = 0.5;
+    imgClipRightPercent = START.imgClipRight;
+    imgClipBottomPercent = START.imgClipBottom;
+  } else {
+    imgTopPercent = smoothInterpolate(phase2TimeMs, 0, CLIP_FILL_TIME, START.imgTop, END.imgTop, easeOutQuart);
+    imgClipRightPercent = smoothInterpolate(phase2TimeMs, 0, CLIP_FILL_TIME, START.imgClipRight, END.imgClipRight, easeOutQuart);
+    imgClipBottomPercent = smoothInterpolate(phase2TimeMs, 0, CLIP_FILL_TIME, START.imgClipBottom, END.imgClipBottom, easeOutQuart);
+  }
   const showSmallClip = isPhase2;
-  const thumbnailFilled = animationTimeMs >= 735;
-  const grayR = interpolateKeyframes(KEYFRAMES.grayFillR, animationTimeMs);
-  const grayG = interpolateKeyframes(KEYFRAMES.grayFillG, animationTimeMs);
-  const grayB = interpolateKeyframes(KEYFRAMES.grayFillB, animationTimeMs);
+  const thumbnailFilled = phase2TimeMs >= CLIP_FILL_TIME;
+  const grayProgress = Math.min(1, phase2TimeMs / CLIP_FILL_TIME);
+  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;
+  const grayB = GRAY_START.b + (GRAY_END.b - GRAY_START.b) * easedGrayProgress;
   const grayColor = `rgb(${Math.round(grayR)}, ${Math.round(grayG)}, ${Math.round(grayB)})`;
-  const innerCornerProgress = interpolateKeyframes(KEYFRAMES.innerCornerRadius, animationTimeMs);
-  const innerBorderRadius = borderRadius * innerCornerProgress;
-  const grayGapTop = contentY;
-  const grayGapBottom = imgTopPercent * height;
-  const grayGapHeight = Math.max(0, grayGapBottom - grayGapTop);
-  const largeImgTop = imgTopPercent * height;
-  const largeImgLeft = contentX;
-  const largeImgWidth = contentW;
-  const largeImgHeight = height;
+  const cornerProgress = smoothInterpolate(
+    phase2TimeMs,
+    CORNER_RADIUS_START_TIME,
+    CORNER_RADIUS_DURATION,
+    0,
+    1,
+    easeOutQuart
+  );
+  const innerBorderRadius = (borderRadius - borderWidth) * cornerProgress;
+  const grayGapHeight = Math.max(0, (imgTopPercent - containerTopInner) * height);
   const smallClipTop = imgTopPercent * height;
-  const smallClipLeft = contentX;
   const smallClipRight = imgClipRightPercent * width;
   const smallClipBottom = imgClipBottomPercent * height;
+  const smallClipLeft = containerLeft * width + borderWidth;
   const smallClipWidth = smallClipRight - smallClipLeft;
   const smallClipHeight = smallClipBottom - smallClipTop;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_remotion8.AbsoluteFill, { style: { backgroundColor }, children: [
@@ -2754,7 +2601,7 @@ function ScreenshotAnimationV2({
                       left: 0,
                       top: 0,
                       width: contentW,
-                      height: grayGapBottom - containerTopInner * height,
+                      height: Math.max(0, (imgTopPercent - containerTopInner) * height),
                       backgroundColor: grayColor
                     }
                   }
@@ -2765,9 +2612,9 @@ function ScreenshotAnimationV2({
                     style: {
                       position: "absolute",
                       left: 0,
-                      top: largeImgTop - containerTopInner * height,
+                      top: (imgTopPercent - containerTopInner) * height,
                       width: contentW,
-                      height: largeImgHeight,
+                      height,
                       overflow: "hidden"
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -2777,7 +2624,6 @@ function ScreenshotAnimationV2({
                         style: {
                           width: contentW,
                           height: contentW * (height / width),
-                          // Maintain aspect ratio
                           objectFit: "cover"
                         }
                       }
@@ -2790,7 +2636,7 @@ function ScreenshotAnimationV2({
                     style: {
                       position: "absolute",
                       left: 0,
-                      top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
+                      top: thumbnailFilled ? 0 : (imgTopPercent - containerTopInner) * height,
                       width: thumbnailFilled ? contentW : smallClipWidth,
                       height: thumbnailFilled ? contentH : smallClipHeight,
                       overflow: "hidden"

package/dist/index.mjs

@@ -1540,233 +1540,49 @@ function ScreenshotAnimationComposition({
 // src/compositions/ScreenshotAnimationV2.tsx
 import { AbsoluteFill as AbsoluteFill5, Img as Img4, interpolate as interpolate3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6 } from "remotion";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var KEYFRAMES = {
-  // Screenshot container outer bounds (including border)
-  ssBorderTop: [
-    [255, 0.0623],
-    [295, 0.2017],
-    [335, 0.3443],
-    [375, 0.508],
-    [415, 0.584],
-    [455, 0.6367],
-    [495, 0.7023],
-    [535, 0.7065],
-    [575, 0.7255],
-    [615, 0.7329],
-    [655, 0.7371],
-    [695, 0.7413],
-    [735, 0.7434],
-    [835, 0.7434],
-    [935, 0.7455],
-    [1135, 0.7455]
-  ],
-  ssBorderTopInner: [
-    [255, 0.0697],
-    [295, 0.208],
-    [335, 0.3517],
-    [375, 0.5132],
-    [415, 0.5882],
-    [455, 0.642],
-    [495, 0.7076],
-    [535, 0.7138],
-    [575, 0.7308],
-    [615, 0.7381],
-    [655, 0.7423],
-    [695, 0.7466],
-    [735, 0.7487],
-    [835, 0.7497],
-    [935, 0.7497],
-    [1135, 0.7508]
-  ],
-  ssBorderRight: [
-    [255, 0.9584],
-    [295, 0.8245],
-    [335, 0.6951],
-    [375, 0.5404],
-    [415, 0.4734],
-    [455, 0.4226],
-    [495, 0.3742],
-    [535, 0.3557],
-    [575, 0.3418],
-    [615, 0.3349],
-    [655, 0.3279],
-    [695, 0.3257],
-    [735, 0.3257],
-    [835, 0.321],
-    [935, 0.321],
-    [1135, 0.321]
-  ],
-  ssBorderLeft: [
-    [255, 0],
-    [295, 0.0115],
-    [335, 0.0323],
-    [375, 0.0554],
-    [415, 0.067],
-    [455, 0.0739],
-    [495, 0.0808],
-    [535, 0.0831],
-    [575, 0.0877],
-    [615, 0.0877],
-    [655, 0.0901],
-    [695, 0.0901],
-    [735, 0.0901],
-    [835, 0.0901],
-    [935, 0.0901],
-    [1135, 0.0901]
-  ],
-  ssBorderBottom: [
-    [255, 1],
-    [295, 0.9947],
-    [335, 0.9842],
-    [375, 0.9747],
-    [415, 0.9683],
-    [455, 0.9662],
-    [495, 0.9757],
-    [535, 0.962],
-    [575, 0.9599],
-    [615, 0.9588],
-    [655, 0.9588],
-    [695, 0.9588],
-    [735, 0.9588],
-    [835, 0.9588],
-    [935, 0.9588],
-    [1135, 0.9588]
-  ],
-  // Inner content positions
-  imgTop: [
-    [255, 0.5248],
-    [295, 0.5702],
-    [335, 0.6178],
-    [375, 0.6726],
-    [415, 0.6969],
-    [455, 0.7138],
-    [495, 0.7455],
-    [535, 0.7381],
-    [575, 0.7434],
-    [615, 0.7466],
-    [655, 0.7487],
-    [695, 0.7508]
-    // After 735ms, imgTop matches container inner top (content fills container)
-  ],
-  imgClipRight: [
-    [255, 0.2125],
-    [295, 0.2286],
-    [335, 0.2494],
-    [375, 0.2725],
-    [415, 0.2817],
-    [455, 0.291],
-    [495, 0.2979],
-    [535, 0.3002],
-    [575, 0.3025],
-    [615, 0.3025],
-    [655, 0.3002],
-    [695, 0.3095]
-    // After 735ms, clip fills container width
-  ],
-  imgClipBottom: [
-    [255, 0.7233],
-    [295, 0.7698],
-    [335, 0.8184],
-    [375, 0.8722],
-    [415, 0.8975],
-    [455, 0.9145],
-    [495, 0.9504],
-    [535, 0.9472],
-    [575, 0.944],
-    [615, 0.9472],
-    [655, 0.9483],
-    [695, 0.9504]
-    // After 735ms, clip fills container height
-  ],
-  // White overlay opacity (derived from black RGBA: value/255)
-  whiteOpacity: [
-    [255, 0.824],
-    [295, 0.773],
-    [335, 0.722],
-    [375, 0.639],
-    [415, 0.58],
-    [455, 0.522],
-    [495, 0.427],
-    [535, 0.376],
-    [575, 0.345],
-    [615, 0.267],
-    [655, 0.245],
-    [695, 0.165],
-    [735, 0.106],
-    [835, 0.065],
-    [935, 0.039],
-    [1135, 0.014]
-  ],
-  // Gray fill color (RGB values for gap above shifted content)
-  grayFillR: [
-    [255, 241],
-    [295, 237],
-    [335, 231],
-    [375, 224],
-    [415, 219],
-    [455, 213],
-    [495, 205],
-    [535, 200],
-    [575, 191],
-    [615, 188],
-    [655, 188],
-    [695, 174]
-  ],
-  grayFillG: [
-    [255, 239],
-    [295, 234],
-    [335, 228],
-    [375, 221],
-    [415, 217],
-    [455, 210],
-    [495, 203],
-    [535, 197],
-    [575, 189],
-    [615, 187],
-    [655, 187],
-    [695, 169]
-  ],
-  grayFillB: [
-    [255, 242],
-    [295, 237],
-    [335, 231],
-    [375, 224],
-    [415, 220],
-    [455, 216],
-    [495, 206],
-    [535, 200],
-    [575, 192],
-    [615, 190],
-    [655, 190],
-    [695, 171]
-  ],
-  // Inner content bottom corner radius (0 = square, 1 = fully rounded)
-  innerCornerRadius: [
-    [655, 0],
-    [695, 0.15],
-    [735, 0.5],
-    [835, 1]
-  ]
+var CONTAINER_ANIMATION_DURATION = 480;
+var CONTAINER_SETTLE_DURATION = 200;
+var START = {
+  ssBorderTop: 0,
+  ssBorderTopInner: 5e-3,
+  // Small border width
+  ssBorderRight: 1,
+  ssBorderLeft: 0,
+  ssBorderBottom: 1,
+  imgTop: 0.5,
+  // 50% down
+  imgClipRight: 0.21,
+  imgClipBottom: 0.72,
+  whiteOpacity: 0.824
 };
-function interpolateKeyframes(keyframes, timeMs, defaultValue) {
-  if (keyframes.length === 0) {
-    return defaultValue ?? 0;
-  }
-  if (timeMs <= keyframes[0][0]) {
-    return keyframes[0][1];
-  }
-  if (timeMs >= keyframes[keyframes.length - 1][0]) {
-    return keyframes[keyframes.length - 1][1];
-  }
-  for (let i = 0; i < keyframes.length - 1; i++) {
-    const [t1, v1] = keyframes[i];
-    const [t2, v2] = keyframes[i + 1];
-    if (timeMs >= t1 && timeMs <= t2) {
-      const progress = (timeMs - t1) / (t2 - t1);
-      return v1 + (v2 - v1) * progress;
-    }
-  }
-  return keyframes[keyframes.length - 1][1];
+var END = {
+  ssBorderTop: 0.7455,
+  ssBorderTopInner: 0.7508,
+  ssBorderRight: 0.321,
+  ssBorderLeft: 0.0901,
+  ssBorderBottom: 0.9588,
+  imgTop: 0.7508,
+  // Matches container inner top
+  imgClipRight: 0.321,
+  // Matches container right (fills width)
+  imgClipBottom: 0.9588,
+  // Matches container bottom (fills height)
+  whiteOpacity: 0
+};
+var CLIP_FILL_TIME = 480;
+var WHITE_FADE_DURATION = 880;
+var GRAY_START = { r: 255, g: 255, b: 255 };
+var GRAY_END = { r: 174, g: 169, b: 171 };
+var CORNER_RADIUS_START_TIME = 400;
+var CORNER_RADIUS_DURATION = 180;
+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;
+  const progress = (timeMs - startTime) / duration;
+  const easedProgress = easingFn(progress);
+  return startValue + (endValue - startValue) * easedProgress;
 }
 function ScreenshotAnimationV2({
   imageUrl,
@@ -1784,7 +1600,7 @@ function ScreenshotAnimationV2({
   const flashStartMs = pauseDurationMs;
   const flashEndMs = flashStartMs + flashDurationMs;
   const phase2StartMs = flashEndMs;
-  const animationTimeMs = Math.max(0, timeMs - flashStartMs);
+  const phase2TimeMs = Math.max(0, timeMs - phase2StartMs);
   const isPause = timeMs < flashStartMs;
   const isFlashPhase = timeMs >= flashStartMs && timeMs < flashEndMs;
   const isPhase2 = timeMs >= phase2StartMs;
@@ -1794,48 +1610,79 @@ function ScreenshotAnimationV2({
     whiteOpacity = 0;
   } else if (isFlashPhase) {
     const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
-    whiteOpacity = interpolate3(flashProgress, [0, 0.1, 1], [1, 1, 0.824], {
+    whiteOpacity = interpolate3(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
       extrapolateRight: "clamp"
     });
   } else if (isPhase2) {
-    whiteOpacity = interpolateKeyframes(KEYFRAMES.whiteOpacity, animationTimeMs);
+    whiteOpacity = smoothInterpolate(
+      phase2TimeMs,
+      0,
+      WHITE_FADE_DURATION,
+      START.whiteOpacity,
+      END.whiteOpacity,
+      easeOutExpo
+    );
+  }
+  let containerTop;
+  let containerTopInner;
+  let containerLeft;
+  let containerRight;
+  let containerBottom;
+  if (isFlashPhase) {
+    containerTop = 0;
+    containerTopInner = 5e-3;
+    containerLeft = 0;
+    containerRight = 1;
+    containerBottom = 1;
+  } else {
+    const totalDuration = CONTAINER_ANIMATION_DURATION + CONTAINER_SETTLE_DURATION;
+    containerTop = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderTop, END.ssBorderTop, easeOutQuart);
+    containerTopInner = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderTopInner, END.ssBorderTopInner, easeOutQuart);
+    containerLeft = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderLeft, END.ssBorderLeft, easeOutQuart);
+    containerRight = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderRight, END.ssBorderRight, easeOutQuart);
+    containerBottom = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderBottom, END.ssBorderBottom, easeOutQuart);
   }
-  const containerTop = isFlashPhase ? 0 : interpolateKeyframes(KEYFRAMES.ssBorderTop, animationTimeMs);
-  const containerTopInner = isFlashPhase ? 5e-3 : interpolateKeyframes(KEYFRAMES.ssBorderTopInner, animationTimeMs);
-  const containerLeft = isFlashPhase ? 0 : interpolateKeyframes(KEYFRAMES.ssBorderLeft, animationTimeMs);
-  const containerRight = isFlashPhase ? 1 : interpolateKeyframes(KEYFRAMES.ssBorderRight, animationTimeMs);
-  const containerBottom = isFlashPhase ? 1 : interpolateKeyframes(KEYFRAMES.ssBorderBottom, animationTimeMs);
   const borderWidth = (containerTopInner - containerTop) * height;
   const containerX = containerLeft * width;
   const containerY = containerTop * height;
   const containerW = (containerRight - containerLeft) * width;
   const containerH = (containerBottom - containerTop) * height;
-  const contentX = containerX + borderWidth;
-  const contentY = containerY + borderWidth;
   const contentW = containerW - borderWidth * 2;
   const contentH = containerH - borderWidth * 2;
-  const imgTopPercent = isFlashPhase ? 0.5 : interpolateKeyframes(KEYFRAMES.imgTop, animationTimeMs);
-  const imgClipRightPercent = interpolateKeyframes(KEYFRAMES.imgClipRight, animationTimeMs);
-  const imgClipBottomPercent = interpolateKeyframes(KEYFRAMES.imgClipBottom, animationTimeMs);
+  let imgTopPercent;
+  let imgClipRightPercent;
+  let imgClipBottomPercent;
+  if (isFlashPhase) {
+    imgTopPercent = 0.5;
+    imgClipRightPercent = START.imgClipRight;
+    imgClipBottomPercent = START.imgClipBottom;
+  } else {
+    imgTopPercent = smoothInterpolate(phase2TimeMs, 0, CLIP_FILL_TIME, START.imgTop, END.imgTop, easeOutQuart);
+    imgClipRightPercent = smoothInterpolate(phase2TimeMs, 0, CLIP_FILL_TIME, START.imgClipRight, END.imgClipRight, easeOutQuart);
+    imgClipBottomPercent = smoothInterpolate(phase2TimeMs, 0, CLIP_FILL_TIME, START.imgClipBottom, END.imgClipBottom, easeOutQuart);
+  }
   const showSmallClip = isPhase2;
-  const thumbnailFilled = animationTimeMs >= 735;
-  const grayR = interpolateKeyframes(KEYFRAMES.grayFillR, animationTimeMs);
-  const grayG = interpolateKeyframes(KEYFRAMES.grayFillG, animationTimeMs);
-  const grayB = interpolateKeyframes(KEYFRAMES.grayFillB, animationTimeMs);
+  const thumbnailFilled = phase2TimeMs >= CLIP_FILL_TIME;
+  const grayProgress = Math.min(1, phase2TimeMs / CLIP_FILL_TIME);
+  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;
+  const grayB = GRAY_START.b + (GRAY_END.b - GRAY_START.b) * easedGrayProgress;
   const grayColor = `rgb(${Math.round(grayR)}, ${Math.round(grayG)}, ${Math.round(grayB)})`;
-  const innerCornerProgress = interpolateKeyframes(KEYFRAMES.innerCornerRadius, animationTimeMs);
-  const innerBorderRadius = borderRadius * innerCornerProgress;
-  const grayGapTop = contentY;
-  const grayGapBottom = imgTopPercent * height;
-  const grayGapHeight = Math.max(0, grayGapBottom - grayGapTop);
-  const largeImgTop = imgTopPercent * height;
-  const largeImgLeft = contentX;
-  const largeImgWidth = contentW;
-  const largeImgHeight = height;
+  const cornerProgress = smoothInterpolate(
+    phase2TimeMs,
+    CORNER_RADIUS_START_TIME,
+    CORNER_RADIUS_DURATION,
+    0,
+    1,
+    easeOutQuart
+  );
+  const innerBorderRadius = (borderRadius - borderWidth) * cornerProgress;
+  const grayGapHeight = Math.max(0, (imgTopPercent - containerTopInner) * height);
   const smallClipTop = imgTopPercent * height;
-  const smallClipLeft = contentX;
   const smallClipRight = imgClipRightPercent * width;
   const smallClipBottom = imgClipBottomPercent * height;
+  const smallClipLeft = containerLeft * width + borderWidth;
   const smallClipWidth = smallClipRight - smallClipLeft;
   const smallClipHeight = smallClipBottom - smallClipTop;
   return /* @__PURE__ */ jsxs7(AbsoluteFill5, { style: { backgroundColor }, children: [
@@ -1890,7 +1737,7 @@ function ScreenshotAnimationV2({
                       left: 0,
                       top: 0,
                       width: contentW,
-                      height: grayGapBottom - containerTopInner * height,
+                      height: Math.max(0, (imgTopPercent - containerTopInner) * height),
                       backgroundColor: grayColor
                     }
                   }
@@ -1901,9 +1748,9 @@ function ScreenshotAnimationV2({
                     style: {
                       position: "absolute",
                       left: 0,
-                      top: largeImgTop - containerTopInner * height,
+                      top: (imgTopPercent - containerTopInner) * height,
                       width: contentW,
-                      height: largeImgHeight,
+                      height,
                       overflow: "hidden"
                     },
                     children: /* @__PURE__ */ jsx9(
@@ -1913,7 +1760,6 @@ function ScreenshotAnimationV2({
                         style: {
                           width: contentW,
                           height: contentW * (height / width),
-                          // Maintain aspect ratio
                           objectFit: "cover"
                         }
                       }
@@ -1926,7 +1772,7 @@ function ScreenshotAnimationV2({
                     style: {
                       position: "absolute",
                       left: 0,
-                      top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
+                      top: thumbnailFilled ? 0 : (imgTopPercent - containerTopInner) * height,
                       width: thumbnailFilled ? contentW : smallClipWidth,
                       height: thumbnailFilled ? contentH : smallClipHeight,
                       overflow: "hidden"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.14",
+  "version": "1.8.15",
   "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",