ugcinc-render 1.8.10 → 1.8.11

package/dist/index.d.mts

@@ -670,6 +670,36 @@ interface ScreenshotAnimationCompositionProps {
 }
 declare function ScreenshotAnimationComposition({ imageUrl, width, height, flashDurationMs, shrinkDurationMs, pauseDurationMs, dismissDurationMs, imageCornerRadius, thumbnailCornerRadius, borderWidth, borderColor, thumbnailScale, thumbnailPadding, bottomOffset, springDamping, springStiffness, springMass, backgroundColor, }: ScreenshotAnimationCompositionProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * ScreenshotAnimationV2
+ *
+ * Accurate iPhone screenshot animation based on real device measurements.
+ *
+ * Timeline:
+ * - 0-1000ms: Pause (show image)
+ * - 1000-1255ms: Phase 1 (flash & reveal, content shifts down 50%)
+ * - 1255ms+: Phase 2 (container shrinks, content morphs to thumbnail)
+ */
+interface ScreenshotAnimationV2Props {
+    /** The image URL being "screenshotted" */
+    imageUrl: string;
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Duration of pause before flash (ms) */
+    pauseDurationMs?: number;
+    /** Duration of flash phase (ms) */
+    flashDurationMs?: number;
+    /** Border corner radius (px) */
+    borderRadius?: number;
+    /** Border color */
+    borderColor?: string;
+    /** Background color (behind everything) */
+    backgroundColor?: string;
+}
+declare function ScreenshotAnimationV2({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationV2Props): react_jsx_runtime.JSX.Element;
+
 interface TextElementProps {
     segment: TextSegment;
     /** Optional scale for high-DPI rendering */
@@ -802,4 +832,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseEditorConfig, type BaseSegment, type BlendMode, BorderRadiusConfig, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimationComposition, type ScreenshotAnimationCompositionProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TextElement, type TextElementProps, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions };
+export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseEditorConfig, type BaseSegment, type BlendMode, BorderRadiusConfig, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimationComposition, type ScreenshotAnimationCompositionProps, ScreenshotAnimationV2, type ScreenshotAnimationV2Props, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TextElement, type TextElementProps, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions };

package/dist/index.d.ts

@@ -670,6 +670,36 @@ interface ScreenshotAnimationCompositionProps {
 }
 declare function ScreenshotAnimationComposition({ imageUrl, width, height, flashDurationMs, shrinkDurationMs, pauseDurationMs, dismissDurationMs, imageCornerRadius, thumbnailCornerRadius, borderWidth, borderColor, thumbnailScale, thumbnailPadding, bottomOffset, springDamping, springStiffness, springMass, backgroundColor, }: ScreenshotAnimationCompositionProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * ScreenshotAnimationV2
+ *
+ * Accurate iPhone screenshot animation based on real device measurements.
+ *
+ * Timeline:
+ * - 0-1000ms: Pause (show image)
+ * - 1000-1255ms: Phase 1 (flash & reveal, content shifts down 50%)
+ * - 1255ms+: Phase 2 (container shrinks, content morphs to thumbnail)
+ */
+interface ScreenshotAnimationV2Props {
+    /** The image URL being "screenshotted" */
+    imageUrl: string;
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Duration of pause before flash (ms) */
+    pauseDurationMs?: number;
+    /** Duration of flash phase (ms) */
+    flashDurationMs?: number;
+    /** Border corner radius (px) */
+    borderRadius?: number;
+    /** Border color */
+    borderColor?: string;
+    /** Background color (behind everything) */
+    backgroundColor?: string;
+}
+declare function ScreenshotAnimationV2({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationV2Props): react_jsx_runtime.JSX.Element;
+
 interface TextElementProps {
     segment: TextSegment;
     /** Optional scale for high-DPI rendering */
@@ -802,4 +832,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseEditorConfig, type BaseSegment, type BlendMode, BorderRadiusConfig, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimationComposition, type ScreenshotAnimationCompositionProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TextElement, type TextElementProps, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions };
+export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseEditorConfig, type BaseSegment, type BlendMode, BorderRadiusConfig, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimationComposition, type ScreenshotAnimationCompositionProps, ScreenshotAnimationV2, type ScreenshotAnimationV2Props, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TextElement, type TextElementProps, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions };

package/dist/index.js

@@ -50,6 +50,7 @@ __export(index_exports, {
   LEVEL_5_CONFIG: () => LEVEL_5_CONFIG,
   RenderRoot: () => RenderRoot,
   ScreenshotAnimationComposition: () => ScreenshotAnimationComposition,
+  ScreenshotAnimationV2: () => ScreenshotAnimationV2,
   TEXT_DEFAULTS: () => TEXT_DEFAULTS,
   TextElement: () => TextElement,
   VIDEO_DEFAULTS: () => VIDEO_DEFAULTS,
@@ -2400,6 +2401,425 @@ 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]
+  ]
+};
+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];
+}
+function ScreenshotAnimationV2({
+  imageUrl,
+  width = 1080,
+  height = 1920,
+  pauseDurationMs = 1e3,
+  flashDurationMs = 255,
+  borderRadius = 16,
+  borderColor = "rgba(80, 80, 80, 0.8)",
+  backgroundColor = "#000000"
+}) {
+  const frame = (0, import_remotion8.useCurrentFrame)();
+  const { fps } = (0, import_remotion8.useVideoConfig)();
+  const timeMs = frame / fps * 1e3;
+  const flashStartMs = pauseDurationMs;
+  const flashEndMs = flashStartMs + flashDurationMs;
+  const phase2StartMs = flashEndMs;
+  const animationTimeMs = Math.max(0, timeMs - flashStartMs);
+  const isPause = timeMs < flashStartMs;
+  const isFlashPhase = timeMs >= flashStartMs && timeMs < flashEndMs;
+  const isPhase2 = timeMs >= phase2StartMs;
+  let whiteOpacity = 0;
+  if (isPause) {
+    whiteOpacity = 0;
+  } else if (isFlashPhase) {
+    const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
+    whiteOpacity = (0, import_remotion8.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, 0.824], {
+      extrapolateRight: "clamp"
+    });
+  } else if (isPhase2) {
+    whiteOpacity = interpolateKeyframes(KEYFRAMES.whiteOpacity, animationTimeMs);
+  }
+  const containerTop = interpolateKeyframes(KEYFRAMES.ssBorderTop, animationTimeMs);
+  const containerTopInner = interpolateKeyframes(KEYFRAMES.ssBorderTopInner, animationTimeMs);
+  const containerLeft = interpolateKeyframes(KEYFRAMES.ssBorderLeft, animationTimeMs);
+  const containerRight = interpolateKeyframes(KEYFRAMES.ssBorderRight, animationTimeMs);
+  const containerBottom = 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 = interpolateKeyframes(KEYFRAMES.imgTop, animationTimeMs);
+  const imgClipRightPercent = interpolateKeyframes(KEYFRAMES.imgClipRight, animationTimeMs);
+  const imgClipBottomPercent = interpolateKeyframes(KEYFRAMES.imgClipBottom, animationTimeMs);
+  const thumbnailFilled = animationTimeMs >= 735;
+  const grayR = interpolateKeyframes(KEYFRAMES.grayFillR, animationTimeMs);
+  const grayG = interpolateKeyframes(KEYFRAMES.grayFillG, animationTimeMs);
+  const grayB = interpolateKeyframes(KEYFRAMES.grayFillB, animationTimeMs);
+  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 smallClipTop = imgTopPercent * height;
+  const smallClipLeft = contentX;
+  const smallClipRight = imgClipRightPercent * width;
+  const smallClipBottom = imgClipBottomPercent * height;
+  const smallClipWidth = smallClipRight - smallClipLeft;
+  const smallClipHeight = smallClipBottom - smallClipTop;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_remotion8.AbsoluteFill, { style: { backgroundColor }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion8.Img,
+      {
+        src: imageUrl,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width,
+          height,
+          objectFit: "cover"
+        }
+      }
+    ),
+    isPhase2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: containerX,
+          top: containerY,
+          width: containerW,
+          height: containerH,
+          borderRadius,
+          border: `${borderWidth}px solid ${borderColor}`,
+          boxSizing: "border-box",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: contentW,
+              height: contentH,
+              overflow: "hidden",
+              borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
+            },
+            children: [
+              !thumbnailFilled && grayGapHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: contentW,
+                    height: grayGapBottom - containerTopInner * height,
+                    backgroundColor: grayColor
+                  }
+                }
+              ),
+              !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: largeImgTop - containerTopInner * height,
+                    width: contentW,
+                    height: largeImgHeight,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_remotion8.Img,
+                    {
+                      src: imageUrl,
+                      style: {
+                        width: contentW,
+                        height: contentW * (height / width),
+                        // Maintain aspect ratio
+                        objectFit: "cover"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
+                    width: thumbnailFilled ? contentW : smallClipWidth,
+                    height: thumbnailFilled ? contentH : smallClipHeight,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_remotion8.Img,
+                    {
+                      src: imageUrl,
+                      style: {
+                        width: thumbnailFilled ? contentW : smallClipWidth,
+                        height: thumbnailFilled ? contentH : smallClipWidth * (height / width),
+                        objectFit: "cover"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    whiteOpacity > 1e-3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion8.AbsoluteFill,
+      {
+        style: {
+          backgroundColor: `rgba(255, 254, 255, ${whiteOpacity})`
+        }
+      }
+    )
+  ] });
+}
+
 // src/utils/fit.ts
 function calculateFitDimensions({
   sourceWidth,
@@ -2765,9 +3185,9 @@ function useResolvedPositions(elements, textValues) {
 }
 
 // src/Root.tsx
-var import_remotion8 = require("remotion");
+var import_remotion9 = require("remotion");
 var import_zod = require("zod");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -2835,6 +3255,26 @@ var defaultScreenshotAnimationProps = {
   // Background
   backgroundColor: "#000000"
 };
+var defaultScreenshotAnimationV2Props = {
+  imageUrl: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1080&h=1920&fit=crop",
+  width: 1080,
+  height: 1920,
+  pauseDurationMs: 1e3,
+  flashDurationMs: 255,
+  borderRadius: 16,
+  borderColor: "rgba(80, 80, 80, 0.8)",
+  backgroundColor: "#000000"
+};
+var screenshotAnimationV2Schema = import_zod.z.object({
+  imageUrl: import_zod.z.string().describe("URL of the image being screenshotted"),
+  width: import_zod.z.number().optional().default(1080).describe("Canvas width (px)"),
+  height: import_zod.z.number().optional().default(1920).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)"),
+  borderRadius: import_zod.z.number().optional().default(16).describe("Border corner radius (px)"),
+  borderColor: import_zod.z.string().optional().default("rgba(80, 80, 80, 0.8)").describe("Border color"),
+  backgroundColor: import_zod.z.string().optional().default("#000000").describe("Background color")
+});
 var screenshotAnimationSchema = import_zod.z.object({
   // Core
   imageUrl: import_zod.z.string().describe("URL of the image to screenshot"),
@@ -2866,6 +3306,7 @@ var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var AutoCaptionComp = AutoCaptionComposition;
 var ScreenshotAnimationComp = ScreenshotAnimationComposition;
+var ScreenshotAnimationV2Comp = ScreenshotAnimationV2;
 var calculateImageMetadata = async ({ props }) => {
   console.log("[calculateMetadata] Starting metadata calculation...");
   const canvasWidth = props.width ?? props.config?.width ?? 1080;
@@ -2916,9 +3357,9 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_remotion8.Composition,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion9.Composition,
       {
         id: "ImageEditorComposition",
         component: ImageComp,
@@ -2930,8 +3371,8 @@ var RenderRoot = () => {
         defaultProps: defaultImageProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_remotion8.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion9.Composition,
       {
         id: "VideoEditorComposition",
         component: VideoComp,
@@ -2942,8 +3383,8 @@ var RenderRoot = () => {
         defaultProps: defaultVideoProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_remotion8.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion9.Composition,
       {
         id: "AutoCaptionComposition",
         component: AutoCaptionComp,
@@ -2954,8 +3395,8 @@ var RenderRoot = () => {
         defaultProps: defaultAutoCaptionProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_remotion8.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion9.Composition,
       {
         id: "ScreenshotAnimationComposition",
         component: ScreenshotAnimationComp,
@@ -2966,6 +3407,19 @@ var RenderRoot = () => {
         height: 1920,
         defaultProps: defaultScreenshotAnimationProps
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion9.Composition,
+      {
+        id: "ScreenshotAnimationV2",
+        component: ScreenshotAnimationV2Comp,
+        schema: screenshotAnimationV2Schema,
+        durationInFrames: 90,
+        fps: 30,
+        width: 1080,
+        height: 1920,
+        defaultProps: defaultScreenshotAnimationV2Props
+      }
     )
   ] });
 };
@@ -2991,6 +3445,7 @@ var RenderRoot = () => {
   LEVEL_5_CONFIG,
   RenderRoot,
   ScreenshotAnimationComposition,
+  ScreenshotAnimationV2,
   TEXT_DEFAULTS,
   TextElement,
   VIDEO_DEFAULTS,

package/dist/index.mjs

@@ -1537,6 +1537,425 @@ 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]
+  ]
+};
+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];
+}
+function ScreenshotAnimationV2({
+  imageUrl,
+  width = 1080,
+  height = 1920,
+  pauseDurationMs = 1e3,
+  flashDurationMs = 255,
+  borderRadius = 16,
+  borderColor = "rgba(80, 80, 80, 0.8)",
+  backgroundColor = "#000000"
+}) {
+  const frame = useCurrentFrame6();
+  const { fps } = useVideoConfig6();
+  const timeMs = frame / fps * 1e3;
+  const flashStartMs = pauseDurationMs;
+  const flashEndMs = flashStartMs + flashDurationMs;
+  const phase2StartMs = flashEndMs;
+  const animationTimeMs = Math.max(0, timeMs - flashStartMs);
+  const isPause = timeMs < flashStartMs;
+  const isFlashPhase = timeMs >= flashStartMs && timeMs < flashEndMs;
+  const isPhase2 = timeMs >= phase2StartMs;
+  let whiteOpacity = 0;
+  if (isPause) {
+    whiteOpacity = 0;
+  } else if (isFlashPhase) {
+    const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
+    whiteOpacity = interpolate3(flashProgress, [0, 0.1, 1], [1, 1, 0.824], {
+      extrapolateRight: "clamp"
+    });
+  } else if (isPhase2) {
+    whiteOpacity = interpolateKeyframes(KEYFRAMES.whiteOpacity, animationTimeMs);
+  }
+  const containerTop = interpolateKeyframes(KEYFRAMES.ssBorderTop, animationTimeMs);
+  const containerTopInner = interpolateKeyframes(KEYFRAMES.ssBorderTopInner, animationTimeMs);
+  const containerLeft = interpolateKeyframes(KEYFRAMES.ssBorderLeft, animationTimeMs);
+  const containerRight = interpolateKeyframes(KEYFRAMES.ssBorderRight, animationTimeMs);
+  const containerBottom = 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 = interpolateKeyframes(KEYFRAMES.imgTop, animationTimeMs);
+  const imgClipRightPercent = interpolateKeyframes(KEYFRAMES.imgClipRight, animationTimeMs);
+  const imgClipBottomPercent = interpolateKeyframes(KEYFRAMES.imgClipBottom, animationTimeMs);
+  const thumbnailFilled = animationTimeMs >= 735;
+  const grayR = interpolateKeyframes(KEYFRAMES.grayFillR, animationTimeMs);
+  const grayG = interpolateKeyframes(KEYFRAMES.grayFillG, animationTimeMs);
+  const grayB = interpolateKeyframes(KEYFRAMES.grayFillB, animationTimeMs);
+  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 smallClipTop = imgTopPercent * height;
+  const smallClipLeft = contentX;
+  const smallClipRight = imgClipRightPercent * width;
+  const smallClipBottom = imgClipBottomPercent * height;
+  const smallClipWidth = smallClipRight - smallClipLeft;
+  const smallClipHeight = smallClipBottom - smallClipTop;
+  return /* @__PURE__ */ jsxs7(AbsoluteFill5, { style: { backgroundColor }, children: [
+    /* @__PURE__ */ jsx9(
+      Img4,
+      {
+        src: imageUrl,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width,
+          height,
+          objectFit: "cover"
+        }
+      }
+    ),
+    isPhase2 && /* @__PURE__ */ jsx9(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: containerX,
+          top: containerY,
+          width: containerW,
+          height: containerH,
+          borderRadius,
+          border: `${borderWidth}px solid ${borderColor}`,
+          boxSizing: "border-box",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: contentW,
+              height: contentH,
+              overflow: "hidden",
+              borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
+            },
+            children: [
+              !thumbnailFilled && grayGapHeight > 0 && /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: contentW,
+                    height: grayGapBottom - containerTopInner * height,
+                    backgroundColor: grayColor
+                  }
+                }
+              ),
+              !thumbnailFilled && /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: largeImgTop - containerTopInner * height,
+                    width: contentW,
+                    height: largeImgHeight,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx9(
+                    Img4,
+                    {
+                      src: imageUrl,
+                      style: {
+                        width: contentW,
+                        height: contentW * (height / width),
+                        // Maintain aspect ratio
+                        objectFit: "cover"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
+                    width: thumbnailFilled ? contentW : smallClipWidth,
+                    height: thumbnailFilled ? contentH : smallClipHeight,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx9(
+                    Img4,
+                    {
+                      src: imageUrl,
+                      style: {
+                        width: thumbnailFilled ? contentW : smallClipWidth,
+                        height: thumbnailFilled ? contentH : smallClipWidth * (height / width),
+                        objectFit: "cover"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    whiteOpacity > 1e-3 && /* @__PURE__ */ jsx9(
+      AbsoluteFill5,
+      {
+        style: {
+          backgroundColor: `rgba(255, 254, 255, ${whiteOpacity})`
+        }
+      }
+    )
+  ] });
+}
+
 // src/hooks/index.ts
 import { useEffect as useEffect2, useState as useState2, useMemo as useMemo7 } from "react";
 function useFontsLoaded() {
@@ -1621,7 +2040,7 @@ function useResolvedPositions(elements, textValues) {
 // src/Root.tsx
 import { Composition } from "remotion";
 import { z } from "zod";
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -1689,6 +2108,26 @@ var defaultScreenshotAnimationProps = {
   // Background
   backgroundColor: "#000000"
 };
+var defaultScreenshotAnimationV2Props = {
+  imageUrl: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1080&h=1920&fit=crop",
+  width: 1080,
+  height: 1920,
+  pauseDurationMs: 1e3,
+  flashDurationMs: 255,
+  borderRadius: 16,
+  borderColor: "rgba(80, 80, 80, 0.8)",
+  backgroundColor: "#000000"
+};
+var screenshotAnimationV2Schema = z.object({
+  imageUrl: z.string().describe("URL of the image being screenshotted"),
+  width: z.number().optional().default(1080).describe("Canvas width (px)"),
+  height: z.number().optional().default(1920).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)"),
+  borderRadius: z.number().optional().default(16).describe("Border corner radius (px)"),
+  borderColor: z.string().optional().default("rgba(80, 80, 80, 0.8)").describe("Border color"),
+  backgroundColor: z.string().optional().default("#000000").describe("Background color")
+});
 var screenshotAnimationSchema = z.object({
   // Core
   imageUrl: z.string().describe("URL of the image to screenshot"),
@@ -1720,6 +2159,7 @@ var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var AutoCaptionComp = AutoCaptionComposition;
 var ScreenshotAnimationComp = ScreenshotAnimationComposition;
+var ScreenshotAnimationV2Comp = ScreenshotAnimationV2;
 var calculateImageMetadata = async ({ props }) => {
   console.log("[calculateMetadata] Starting metadata calculation...");
   const canvasWidth = props.width ?? props.config?.width ?? 1080;
@@ -1770,8 +2210,8 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsx10(
       Composition,
       {
         id: "ImageEditorComposition",
@@ -1784,7 +2224,7 @@ var RenderRoot = () => {
         defaultProps: defaultImageProps
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Composition,
       {
         id: "VideoEditorComposition",
@@ -1796,7 +2236,7 @@ var RenderRoot = () => {
         defaultProps: defaultVideoProps
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Composition,
       {
         id: "AutoCaptionComposition",
@@ -1808,7 +2248,7 @@ var RenderRoot = () => {
         defaultProps: defaultAutoCaptionProps
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Composition,
       {
         id: "ScreenshotAnimationComposition",
@@ -1820,6 +2260,19 @@ var RenderRoot = () => {
         height: 1920,
         defaultProps: defaultScreenshotAnimationProps
       }
+    ),
+    /* @__PURE__ */ jsx10(
+      Composition,
+      {
+        id: "ScreenshotAnimationV2",
+        component: ScreenshotAnimationV2Comp,
+        schema: screenshotAnimationV2Schema,
+        durationInFrames: 90,
+        fps: 30,
+        width: 1080,
+        height: 1920,
+        defaultProps: defaultScreenshotAnimationV2Props
+      }
     )
   ] });
 };
@@ -1844,6 +2297,7 @@ export {
   LEVEL_5_CONFIG,
   RenderRoot,
   ScreenshotAnimationComposition,
+  ScreenshotAnimationV2,
   TEXT_DEFAULTS,
   TextElement,
   VIDEO_DEFAULTS,

package/package.json

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