ugcinc-render 1.8.15 → 1.8.16

package/dist/index.d.mts

@@ -621,57 +621,7 @@ declare function AutoCaptionComposition({ videoUrl, captions, style, }: AutoCapt
 declare function AutoCaptionCompositionWithVideo({ videoUrl, captions, style, }: AutoCaptionCompositionProps): react_jsx_runtime.JSX.Element;
 
 /**
- * ScreenshotAnimationComposition
- *
- * Simulates an iPhone screenshot animation:
- * 1. Flash - Screen flashes white
- * 2. Shrink - Content scales down to a thumbnail
- * 3. Slide - Thumbnail moves to bottom-left corner
- * 4. Pause - Thumbnail sits briefly
- * 5. Dismiss - Thumbnail slides off-screen to the left
- */
-interface ScreenshotAnimationCompositionProps {
-    /** The image URL to show being "screenshotted" */
-    imageUrl: string;
-    /** Canvas width */
-    width?: number;
-    /** Canvas height */
-    height?: number;
-    /** Duration of the white flash (ms) */
-    flashDurationMs?: number;
-    /** Duration of the shrink animation (ms) */
-    shrinkDurationMs?: number;
-    /** Duration the thumbnail pauses before dismissing (ms) */
-    pauseDurationMs?: number;
-    /** Duration of the dismiss slide animation (ms) */
-    dismissDurationMs?: number;
-    /** Border radius of the image at full size (px) */
-    imageCornerRadius?: number;
-    /** Border radius of the thumbnail (px) */
-    thumbnailCornerRadius?: number;
-    /** Border width around the screenshot (px) */
-    borderWidth?: number;
-    /** Border color (hex or rgba) */
-    borderColor?: string;
-    /** Scale of the thumbnail (0-1, e.g., 0.15 = 15% of original) */
-    thumbnailScale?: number;
-    /** Padding from screen edge (px) */
-    thumbnailPadding?: number;
-    /** Extra offset from bottom for home indicator (px) */
-    bottomOffset?: number;
-    /** Spring damping (higher = less bounce) */
-    springDamping?: number;
-    /** Spring stiffness (higher = faster) */
-    springStiffness?: number;
-    /** Spring mass (higher = more momentum) */
-    springMass?: number;
-    /** Background color behind the animation */
-    backgroundColor?: string;
-}
-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
+ * ScreenshotAnimation
  *
  * Accurate iPhone screenshot animation based on real device measurements.
  *
@@ -680,7 +630,7 @@ declare function ScreenshotAnimationComposition({ imageUrl, width, height, flash
  * - 1000-1255ms: Phase 1 (flash & reveal, content shifts down 50%)
  * - 1255ms+: Phase 2 (container shrinks, content morphs to thumbnail)
  */
-interface ScreenshotAnimationV2Props {
+interface ScreenshotAnimationProps {
     /** The image URL being "screenshotted" */
     imageUrl: string;
     /** Canvas width in pixels */
@@ -698,7 +648,7 @@ interface ScreenshotAnimationV2Props {
     /** Background color (behind everything) */
     backgroundColor?: string;
 }
-declare function ScreenshotAnimationV2({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationV2Props): react_jsx_runtime.JSX.Element;
+declare function ScreenshotAnimation({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationProps): react_jsx_runtime.JSX.Element;
 
 interface TextElementProps {
     segment: TextSegment;
@@ -832,4 +782,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, 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 };
+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, ScreenshotAnimation, type ScreenshotAnimationProps, 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

@@ -621,57 +621,7 @@ declare function AutoCaptionComposition({ videoUrl, captions, style, }: AutoCapt
 declare function AutoCaptionCompositionWithVideo({ videoUrl, captions, style, }: AutoCaptionCompositionProps): react_jsx_runtime.JSX.Element;
 
 /**
- * ScreenshotAnimationComposition
- *
- * Simulates an iPhone screenshot animation:
- * 1. Flash - Screen flashes white
- * 2. Shrink - Content scales down to a thumbnail
- * 3. Slide - Thumbnail moves to bottom-left corner
- * 4. Pause - Thumbnail sits briefly
- * 5. Dismiss - Thumbnail slides off-screen to the left
- */
-interface ScreenshotAnimationCompositionProps {
-    /** The image URL to show being "screenshotted" */
-    imageUrl: string;
-    /** Canvas width */
-    width?: number;
-    /** Canvas height */
-    height?: number;
-    /** Duration of the white flash (ms) */
-    flashDurationMs?: number;
-    /** Duration of the shrink animation (ms) */
-    shrinkDurationMs?: number;
-    /** Duration the thumbnail pauses before dismissing (ms) */
-    pauseDurationMs?: number;
-    /** Duration of the dismiss slide animation (ms) */
-    dismissDurationMs?: number;
-    /** Border radius of the image at full size (px) */
-    imageCornerRadius?: number;
-    /** Border radius of the thumbnail (px) */
-    thumbnailCornerRadius?: number;
-    /** Border width around the screenshot (px) */
-    borderWidth?: number;
-    /** Border color (hex or rgba) */
-    borderColor?: string;
-    /** Scale of the thumbnail (0-1, e.g., 0.15 = 15% of original) */
-    thumbnailScale?: number;
-    /** Padding from screen edge (px) */
-    thumbnailPadding?: number;
-    /** Extra offset from bottom for home indicator (px) */
-    bottomOffset?: number;
-    /** Spring damping (higher = less bounce) */
-    springDamping?: number;
-    /** Spring stiffness (higher = faster) */
-    springStiffness?: number;
-    /** Spring mass (higher = more momentum) */
-    springMass?: number;
-    /** Background color behind the animation */
-    backgroundColor?: string;
-}
-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
+ * ScreenshotAnimation
  *
  * Accurate iPhone screenshot animation based on real device measurements.
  *
@@ -680,7 +630,7 @@ declare function ScreenshotAnimationComposition({ imageUrl, width, height, flash
  * - 1000-1255ms: Phase 1 (flash & reveal, content shifts down 50%)
  * - 1255ms+: Phase 2 (container shrinks, content morphs to thumbnail)
  */
-interface ScreenshotAnimationV2Props {
+interface ScreenshotAnimationProps {
     /** The image URL being "screenshotted" */
     imageUrl: string;
     /** Canvas width in pixels */
@@ -698,7 +648,7 @@ interface ScreenshotAnimationV2Props {
     /** Background color (behind everything) */
     backgroundColor?: string;
 }
-declare function ScreenshotAnimationV2({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationV2Props): react_jsx_runtime.JSX.Element;
+declare function ScreenshotAnimation({ imageUrl, width, height, pauseDurationMs, flashDurationMs, borderRadius, borderColor, backgroundColor, }: ScreenshotAnimationProps): react_jsx_runtime.JSX.Element;
 
 interface TextElementProps {
     segment: TextSegment;
@@ -832,4 +782,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, 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 };
+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, ScreenshotAnimation, type ScreenshotAnimationProps, 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

@@ -49,8 +49,7 @@ __export(index_exports, {
   LEVEL_4_CONFIG: () => LEVEL_4_CONFIG,
   LEVEL_5_CONFIG: () => LEVEL_5_CONFIG,
   RenderRoot: () => RenderRoot,
-  ScreenshotAnimationComposition: () => ScreenshotAnimationComposition,
-  ScreenshotAnimationV2: () => ScreenshotAnimationV2,
+  ScreenshotAnimation: () => ScreenshotAnimation,
   TEXT_DEFAULTS: () => TEXT_DEFAULTS,
   TextElement: () => TextElement,
   VIDEO_DEFAULTS: () => VIDEO_DEFAULTS,
@@ -2247,190 +2246,31 @@ function AutoCaptionCompositionWithVideo({
   ] });
 }
 
-// src/compositions/ScreenshotAnimationComposition.tsx
+// src/compositions/ScreenshotAnimation.tsx
 var import_remotion7 = require("remotion");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function ScreenshotAnimationComposition({
-  imageUrl,
-  width = 1080,
-  height = 1920,
-  // Timing defaults
-  flashDurationMs = 100,
-  shrinkDurationMs = 300,
-  pauseDurationMs = 800,
-  dismissDurationMs = 250,
-  // Image styling
-  imageCornerRadius = 0,
-  thumbnailCornerRadius = 24,
-  // Border
-  borderWidth = 0,
-  borderColor = "rgba(255, 255, 255, 0.3)",
-  // Thumbnail positioning
-  thumbnailScale = 0.15,
-  thumbnailPadding = 20,
-  bottomOffset = 80,
-  // Spring physics
-  springDamping = 15,
-  springStiffness = 120,
-  springMass = 0.8,
-  // Background
-  backgroundColor = "#000000"
-}) {
-  const frame = (0, import_remotion7.useCurrentFrame)();
-  const { fps } = (0, import_remotion7.useVideoConfig)();
-  const flashDuration = Math.round(fps * (flashDurationMs / 1e3));
-  const shrinkDuration = Math.round(fps * (shrinkDurationMs / 1e3));
-  const pauseDuration = Math.round(fps * (pauseDurationMs / 1e3));
-  const dismissDuration = Math.round(fps * (dismissDurationMs / 1e3));
-  const flashStart = 0;
-  const flashEnd = flashDuration;
-  const shrinkStart = flashEnd;
-  const shrinkEnd = shrinkStart + shrinkDuration;
-  const pauseEnd = shrinkEnd + pauseDuration;
-  const flashOpacity = (0, import_remotion7.interpolate)(
-    frame,
-    [flashStart, flashEnd],
-    [1, 0],
-    { extrapolateRight: "clamp" }
-  );
-  const shrinkProgress = (0, import_remotion7.spring)({
-    frame: frame - shrinkStart,
-    fps,
-    config: {
-      damping: springDamping,
-      stiffness: springStiffness,
-      mass: springMass
-    },
-    durationInFrames: shrinkDuration
-  });
-  const scale = (0, import_remotion7.interpolate)(
-    shrinkProgress,
-    [0, 1],
-    [1, thumbnailScale],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const thumbnailWidth = width * thumbnailScale;
-  const thumbnailHeight = height * thumbnailScale;
-  const finalX = thumbnailPadding + thumbnailWidth / 2 - width / 2;
-  const finalY = height / 2 - thumbnailHeight / 2 - thumbnailPadding - bottomOffset;
-  const translateX = (0, import_remotion7.interpolate)(
-    shrinkProgress,
-    [0, 1],
-    [0, finalX],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const translateY = (0, import_remotion7.interpolate)(
-    shrinkProgress,
-    [0, 1],
-    [0, finalY],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const dismissProgress = (0, import_remotion7.interpolate)(
-    frame,
-    [pauseEnd, pauseEnd + dismissDuration],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const dismissX = (0, import_remotion7.interpolate)(
-    dismissProgress,
-    [0, 1],
-    [0, -thumbnailWidth - thumbnailPadding - 50],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const currentBorderRadius = (0, import_remotion7.interpolate)(
-    shrinkProgress,
-    [0, 1],
-    [imageCornerRadius, thumbnailCornerRadius],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const shadowOpacity = (0, import_remotion7.interpolate)(
-    shrinkProgress,
-    [0, 0.5, 1],
-    [0, 0.3, 0.5],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const currentBorderWidth = (0, import_remotion7.interpolate)(
-    shrinkProgress,
-    [0, 0.3, 1],
-    [0, borderWidth, borderWidth],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_remotion7.AbsoluteFill, { style: { backgroundColor }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: "50%",
-          top: "50%",
-          width,
-          height,
-          marginLeft: -width / 2,
-          marginTop: -height / 2,
-          transform: `translate(${translateX + dismissX}px, ${translateY}px) scale(${scale})`,
-          transformOrigin: "center center",
-          borderRadius: currentBorderRadius,
-          overflow: "hidden",
-          boxShadow: `0 10px 60px rgba(0, 0, 0, ${shadowOpacity})`,
-          border: currentBorderWidth > 0 ? `${currentBorderWidth}px solid ${borderColor}` : "none",
-          boxSizing: "border-box"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_remotion7.Img,
-          {
-            src: imageUrl,
-            style: {
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              borderRadius: currentBorderRadius > 0 ? currentBorderRadius - currentBorderWidth : 0
-            }
-          }
-        )
-      }
-    ),
-    frame < flashEnd && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_remotion7.AbsoluteFill,
-      {
-        style: {
-          backgroundColor: "#fff",
-          opacity: flashOpacity
-        }
-      }
-    )
-  ] });
-}
-
-// src/compositions/ScreenshotAnimationV2.tsx
-var import_remotion8 = require("remotion");
-var import_jsx_runtime9 = require("react/jsx-runtime");
 var CONTAINER_ANIMATION_DURATION = 480;
-var CONTAINER_SETTLE_DURATION = 200;
+var CONTAINER_SETTLE_DURATION = 400;
 var START = {
-  ssBorderTop: 0,
-  ssBorderTopInner: 5e-3,
-  // Small border width
-  ssBorderRight: 1,
+  ssBorderTop: 0.0276,
+  ssBorderTopInner: 0.035,
+  ssBorderRight: 0.9883,
   ssBorderLeft: 0,
   ssBorderBottom: 1,
-  imgTop: 0.5,
-  // 50% down
-  imgClipRight: 0.21,
-  imgClipBottom: 0.72,
+  imgTop: 0.5125,
+  imgClipRight: 0.2076,
+  imgClipBottom: 0.7103,
   whiteOpacity: 0.824
 };
 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)
+  ssBorderTop: 0.761,
+  ssBorderTopInner: 0.7663,
+  ssBorderRight: 0.3074,
+  ssBorderLeft: 0.093,
+  ssBorderBottom: 0.9576,
+  imgTop: 0.7566,
+  imgClipRight: 0.3107,
+  imgClipBottom: 0.9569,
   whiteOpacity: 0
 };
 var CLIP_FILL_TIME = 480;
@@ -2448,7 +2288,7 @@ function smoothInterpolate(timeMs, startTime, duration, startValue, endValue, ea
   const easedProgress = easingFn(progress);
   return startValue + (endValue - startValue) * easedProgress;
 }
-function ScreenshotAnimationV2({
+function ScreenshotAnimation({
   imageUrl,
   width = 1202,
   height = 2618,
@@ -2458,8 +2298,8 @@ function ScreenshotAnimationV2({
   borderColor = "rgba(254, 255, 255, 1)",
   backgroundColor = "#000000"
 }) {
-  const frame = (0, import_remotion8.useCurrentFrame)();
-  const { fps } = (0, import_remotion8.useVideoConfig)();
+  const frame = (0, import_remotion7.useCurrentFrame)();
+  const { fps } = (0, import_remotion7.useVideoConfig)();
   const timeMs = frame / fps * 1e3;
   const flashStartMs = pauseDurationMs;
   const flashEndMs = flashStartMs + flashDurationMs;
@@ -2474,7 +2314,7 @@ function ScreenshotAnimationV2({
     whiteOpacity = 0;
   } else if (isFlashPhase) {
     const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
-    whiteOpacity = (0, import_remotion8.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
+    whiteOpacity = (0, import_remotion7.interpolate)(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
       extrapolateRight: "clamp"
     });
   } else if (isPhase2) {
@@ -2493,11 +2333,11 @@ function ScreenshotAnimationV2({
   let containerRight;
   let containerBottom;
   if (isFlashPhase) {
-    containerTop = 0;
-    containerTopInner = 5e-3;
-    containerLeft = 0;
-    containerRight = 1;
-    containerBottom = 1;
+    containerTop = START.ssBorderTop;
+    containerTopInner = START.ssBorderTopInner;
+    containerLeft = START.ssBorderLeft;
+    containerRight = START.ssBorderRight;
+    containerBottom = START.ssBorderBottom;
   } else {
     const totalDuration = CONTAINER_ANIMATION_DURATION + CONTAINER_SETTLE_DURATION;
     containerTop = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderTop, END.ssBorderTop, easeOutQuart);
@@ -2517,7 +2357,7 @@ function ScreenshotAnimationV2({
   let imgClipRightPercent;
   let imgClipBottomPercent;
   if (isFlashPhase) {
-    imgTopPercent = 0.5;
+    imgTopPercent = START.imgTop;
     imgClipRightPercent = START.imgClipRight;
     imgClipBottomPercent = START.imgClipBottom;
   } else {
@@ -2542,16 +2382,15 @@ function ScreenshotAnimationV2({
     easeOutQuart
   );
   const innerBorderRadius = (borderRadius - borderWidth) * cornerProgress;
-  const grayGapHeight = Math.max(0, (imgTopPercent - containerTopInner) * height);
   const smallClipTop = imgTopPercent * height;
   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: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_remotion8.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_remotion7.AbsoluteFill, { style: { backgroundColor }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_remotion7.Img,
       {
         src: imageUrl,
         style: {
@@ -2564,7 +2403,7 @@ function ScreenshotAnimationV2({
         }
       }
     ),
-    showContainer && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    showContainer && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         style: {
@@ -2579,7 +2418,7 @@ function ScreenshotAnimationV2({
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               style: {
@@ -2593,7 +2432,7 @@ function ScreenshotAnimationV2({
                 borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
               },
               children: [
-                !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     style: {
@@ -2606,7 +2445,7 @@ function ScreenshotAnimationV2({
                     }
                   }
                 ),
-                !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     style: {
@@ -2617,8 +2456,8 @@ function ScreenshotAnimationV2({
                       height,
                       overflow: "hidden"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      import_remotion8.Img,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_remotion7.Img,
                       {
                         src: imageUrl,
                         style: {
@@ -2630,7 +2469,7 @@ function ScreenshotAnimationV2({
                     )
                   }
                 ),
-                showSmallClip && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                showSmallClip && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     style: {
@@ -2641,8 +2480,8 @@ function ScreenshotAnimationV2({
                       height: thumbnailFilled ? contentH : smallClipHeight,
                       overflow: "hidden"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      import_remotion8.Img,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_remotion7.Img,
                       {
                         src: imageUrl,
                         style: {
@@ -2657,7 +2496,7 @@ function ScreenshotAnimationV2({
               ]
             }
           ),
-          whiteOpacity > 1e-3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          whiteOpacity > 1e-3 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               style: {
@@ -3043,9 +2882,9 @@ function useResolvedPositions(elements, textValues) {
 }
 
 // src/Root.tsx
-var import_remotion9 = require("remotion");
+var import_remotion8 = require("remotion");
 var import_zod = require("zod");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -3088,32 +2927,6 @@ var defaultAutoCaptionProps = {
   }
 };
 var defaultScreenshotAnimationProps = {
-  imageUrl: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1080&h=1920&fit=crop",
-  width: 1080,
-  height: 1920,
-  // Timing
-  flashDurationMs: 100,
-  shrinkDurationMs: 300,
-  pauseDurationMs: 800,
-  dismissDurationMs: 250,
-  // Image styling
-  imageCornerRadius: 0,
-  thumbnailCornerRadius: 24,
-  // Border
-  borderWidth: 0,
-  borderColor: "rgba(255, 255, 255, 0.3)",
-  // Thumbnail positioning
-  thumbnailScale: 0.15,
-  thumbnailPadding: 20,
-  bottomOffset: 80,
-  // Spring physics
-  springDamping: 15,
-  springStiffness: 120,
-  springMass: 0.8,
-  // Background
-  backgroundColor: "#000000"
-};
-var defaultScreenshotAnimationV2Props = {
   imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3163-RY0CFNrbnSnqZpaJzi9VdslzfYLLKf.png",
   width: 1202,
   height: 2618,
@@ -3123,7 +2936,7 @@ var defaultScreenshotAnimationV2Props = {
   borderColor: "rgba(254, 255, 255, 1)",
   backgroundColor: "#000000"
 };
-var screenshotAnimationV2Schema = import_zod.z.object({
+var screenshotAnimationSchema = import_zod.z.object({
   imageUrl: import_zod.z.string().describe("URL of the image being screenshotted"),
   width: import_zod.z.number().optional().default(1202).describe("Canvas width (px)"),
   height: import_zod.z.number().optional().default(2618).describe("Canvas height (px)"),
@@ -3133,38 +2946,10 @@ var screenshotAnimationV2Schema = import_zod.z.object({
   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")
 });
-var screenshotAnimationSchema = import_zod.z.object({
-  // Core
-  imageUrl: import_zod.z.string().describe("URL of the image to screenshot"),
-  width: import_zod.z.number().optional().default(1080).describe("Canvas width (px)"),
-  height: import_zod.z.number().optional().default(1920).describe("Canvas height (px)"),
-  // Timing
-  flashDurationMs: import_zod.z.number().optional().default(100).describe("Flash duration (ms)"),
-  shrinkDurationMs: import_zod.z.number().optional().default(300).describe("Shrink animation duration (ms)"),
-  pauseDurationMs: import_zod.z.number().optional().default(800).describe("Pause before dismiss (ms)"),
-  dismissDurationMs: import_zod.z.number().optional().default(250).describe("Dismiss slide duration (ms)"),
-  // Image styling
-  imageCornerRadius: import_zod.z.number().optional().default(0).describe("Corner radius at full size (px)"),
-  thumbnailCornerRadius: import_zod.z.number().optional().default(24).describe("Corner radius of thumbnail (px)"),
-  // Border
-  borderWidth: import_zod.z.number().optional().default(0).describe("Border width (px)"),
-  borderColor: import_zod.z.string().optional().default("rgba(255, 255, 255, 0.3)").describe("Border color"),
-  // Thumbnail positioning
-  thumbnailScale: import_zod.z.number().optional().default(0.15).describe("Thumbnail scale (0-1)"),
-  thumbnailPadding: import_zod.z.number().optional().default(20).describe("Padding from edge (px)"),
-  bottomOffset: import_zod.z.number().optional().default(80).describe("Extra bottom offset (px)"),
-  // Spring physics
-  springDamping: import_zod.z.number().optional().default(15).describe("Spring damping (higher = less bounce)"),
-  springStiffness: import_zod.z.number().optional().default(120).describe("Spring stiffness (higher = faster)"),
-  springMass: import_zod.z.number().optional().default(0.8).describe("Spring mass"),
-  // Background
-  backgroundColor: import_zod.z.string().optional().default("#000000").describe("Background color")
-});
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var AutoCaptionComp = AutoCaptionComposition;
-var ScreenshotAnimationComp = ScreenshotAnimationComposition;
-var ScreenshotAnimationV2Comp = ScreenshotAnimationV2;
+var ScreenshotAnimationComp = ScreenshotAnimation;
 var calculateImageMetadata = async ({ props }) => {
   console.log("[calculateMetadata] Starting metadata calculation...");
   const canvasWidth = props.width ?? props.config?.width ?? 1080;
@@ -3215,9 +3000,9 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_remotion9.Composition,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion8.Composition,
       {
         id: "ImageEditorComposition",
         component: ImageComp,
@@ -3229,8 +3014,8 @@ var RenderRoot = () => {
         defaultProps: defaultImageProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_remotion9.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion8.Composition,
       {
         id: "VideoEditorComposition",
         component: VideoComp,
@@ -3241,8 +3026,8 @@ var RenderRoot = () => {
         defaultProps: defaultVideoProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_remotion9.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion8.Composition,
       {
         id: "AutoCaptionComposition",
         component: AutoCaptionComp,
@@ -3253,30 +3038,17 @@ var RenderRoot = () => {
         defaultProps: defaultAutoCaptionProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_remotion9.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion8.Composition,
       {
         id: "ScreenshotAnimationComposition",
         component: ScreenshotAnimationComp,
         schema: screenshotAnimationSchema,
-        durationInFrames: 60,
-        fps: 30,
-        width: 1080,
-        height: 1920,
-        defaultProps: defaultScreenshotAnimationProps
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_remotion9.Composition,
-      {
-        id: "ScreenshotAnimationV2",
-        component: ScreenshotAnimationV2Comp,
-        schema: screenshotAnimationV2Schema,
         durationInFrames: 90,
         fps: 30,
         width: 1202,
         height: 2618,
-        defaultProps: defaultScreenshotAnimationV2Props
+        defaultProps: defaultScreenshotAnimationProps
       }
     )
   ] });
@@ -3302,8 +3074,7 @@ var RenderRoot = () => {
   LEVEL_4_CONFIG,
   LEVEL_5_CONFIG,
   RenderRoot,
-  ScreenshotAnimationComposition,
-  ScreenshotAnimationV2,
+  ScreenshotAnimation,
   TEXT_DEFAULTS,
   TextElement,
   VIDEO_DEFAULTS,

package/dist/index.mjs

@@ -1383,190 +1383,31 @@ function AutoCaptionCompositionWithVideo({
   ] });
 }
 
-// src/compositions/ScreenshotAnimationComposition.tsx
-import { AbsoluteFill as AbsoluteFill4, Img as Img3, interpolate as interpolate2, spring, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5 } from "remotion";
+// 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";
-function ScreenshotAnimationComposition({
-  imageUrl,
-  width = 1080,
-  height = 1920,
-  // Timing defaults
-  flashDurationMs = 100,
-  shrinkDurationMs = 300,
-  pauseDurationMs = 800,
-  dismissDurationMs = 250,
-  // Image styling
-  imageCornerRadius = 0,
-  thumbnailCornerRadius = 24,
-  // Border
-  borderWidth = 0,
-  borderColor = "rgba(255, 255, 255, 0.3)",
-  // Thumbnail positioning
-  thumbnailScale = 0.15,
-  thumbnailPadding = 20,
-  bottomOffset = 80,
-  // Spring physics
-  springDamping = 15,
-  springStiffness = 120,
-  springMass = 0.8,
-  // Background
-  backgroundColor = "#000000"
-}) {
-  const frame = useCurrentFrame5();
-  const { fps } = useVideoConfig5();
-  const flashDuration = Math.round(fps * (flashDurationMs / 1e3));
-  const shrinkDuration = Math.round(fps * (shrinkDurationMs / 1e3));
-  const pauseDuration = Math.round(fps * (pauseDurationMs / 1e3));
-  const dismissDuration = Math.round(fps * (dismissDurationMs / 1e3));
-  const flashStart = 0;
-  const flashEnd = flashDuration;
-  const shrinkStart = flashEnd;
-  const shrinkEnd = shrinkStart + shrinkDuration;
-  const pauseEnd = shrinkEnd + pauseDuration;
-  const flashOpacity = interpolate2(
-    frame,
-    [flashStart, flashEnd],
-    [1, 0],
-    { extrapolateRight: "clamp" }
-  );
-  const shrinkProgress = spring({
-    frame: frame - shrinkStart,
-    fps,
-    config: {
-      damping: springDamping,
-      stiffness: springStiffness,
-      mass: springMass
-    },
-    durationInFrames: shrinkDuration
-  });
-  const scale = interpolate2(
-    shrinkProgress,
-    [0, 1],
-    [1, thumbnailScale],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const thumbnailWidth = width * thumbnailScale;
-  const thumbnailHeight = height * thumbnailScale;
-  const finalX = thumbnailPadding + thumbnailWidth / 2 - width / 2;
-  const finalY = height / 2 - thumbnailHeight / 2 - thumbnailPadding - bottomOffset;
-  const translateX = interpolate2(
-    shrinkProgress,
-    [0, 1],
-    [0, finalX],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const translateY = interpolate2(
-    shrinkProgress,
-    [0, 1],
-    [0, finalY],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const dismissProgress = interpolate2(
-    frame,
-    [pauseEnd, pauseEnd + dismissDuration],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const dismissX = interpolate2(
-    dismissProgress,
-    [0, 1],
-    [0, -thumbnailWidth - thumbnailPadding - 50],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const currentBorderRadius = interpolate2(
-    shrinkProgress,
-    [0, 1],
-    [imageCornerRadius, thumbnailCornerRadius],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const shadowOpacity = interpolate2(
-    shrinkProgress,
-    [0, 0.5, 1],
-    [0, 0.3, 0.5],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const currentBorderWidth = interpolate2(
-    shrinkProgress,
-    [0, 0.3, 1],
-    [0, borderWidth, borderWidth],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  return /* @__PURE__ */ jsxs6(AbsoluteFill4, { style: { backgroundColor }, children: [
-    /* @__PURE__ */ jsx8(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: "50%",
-          top: "50%",
-          width,
-          height,
-          marginLeft: -width / 2,
-          marginTop: -height / 2,
-          transform: `translate(${translateX + dismissX}px, ${translateY}px) scale(${scale})`,
-          transformOrigin: "center center",
-          borderRadius: currentBorderRadius,
-          overflow: "hidden",
-          boxShadow: `0 10px 60px rgba(0, 0, 0, ${shadowOpacity})`,
-          border: currentBorderWidth > 0 ? `${currentBorderWidth}px solid ${borderColor}` : "none",
-          boxSizing: "border-box"
-        },
-        children: /* @__PURE__ */ jsx8(
-          Img3,
-          {
-            src: imageUrl,
-            style: {
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              borderRadius: currentBorderRadius > 0 ? currentBorderRadius - currentBorderWidth : 0
-            }
-          }
-        )
-      }
-    ),
-    frame < flashEnd && /* @__PURE__ */ jsx8(
-      AbsoluteFill4,
-      {
-        style: {
-          backgroundColor: "#fff",
-          opacity: flashOpacity
-        }
-      }
-    )
-  ] });
-}
-
-// 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 CONTAINER_ANIMATION_DURATION = 480;
-var CONTAINER_SETTLE_DURATION = 200;
+var CONTAINER_SETTLE_DURATION = 400;
 var START = {
-  ssBorderTop: 0,
-  ssBorderTopInner: 5e-3,
-  // Small border width
-  ssBorderRight: 1,
+  ssBorderTop: 0.0276,
+  ssBorderTopInner: 0.035,
+  ssBorderRight: 0.9883,
   ssBorderLeft: 0,
   ssBorderBottom: 1,
-  imgTop: 0.5,
-  // 50% down
-  imgClipRight: 0.21,
-  imgClipBottom: 0.72,
+  imgTop: 0.5125,
+  imgClipRight: 0.2076,
+  imgClipBottom: 0.7103,
   whiteOpacity: 0.824
 };
 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)
+  ssBorderTop: 0.761,
+  ssBorderTopInner: 0.7663,
+  ssBorderRight: 0.3074,
+  ssBorderLeft: 0.093,
+  ssBorderBottom: 0.9576,
+  imgTop: 0.7566,
+  imgClipRight: 0.3107,
+  imgClipBottom: 0.9569,
   whiteOpacity: 0
 };
 var CLIP_FILL_TIME = 480;
@@ -1584,7 +1425,7 @@ function smoothInterpolate(timeMs, startTime, duration, startValue, endValue, ea
   const easedProgress = easingFn(progress);
   return startValue + (endValue - startValue) * easedProgress;
 }
-function ScreenshotAnimationV2({
+function ScreenshotAnimation({
   imageUrl,
   width = 1202,
   height = 2618,
@@ -1594,8 +1435,8 @@ function ScreenshotAnimationV2({
   borderColor = "rgba(254, 255, 255, 1)",
   backgroundColor = "#000000"
 }) {
-  const frame = useCurrentFrame6();
-  const { fps } = useVideoConfig6();
+  const frame = useCurrentFrame5();
+  const { fps } = useVideoConfig5();
   const timeMs = frame / fps * 1e3;
   const flashStartMs = pauseDurationMs;
   const flashEndMs = flashStartMs + flashDurationMs;
@@ -1610,7 +1451,7 @@ function ScreenshotAnimationV2({
     whiteOpacity = 0;
   } else if (isFlashPhase) {
     const flashProgress = (timeMs - flashStartMs) / flashDurationMs;
-    whiteOpacity = interpolate3(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
+    whiteOpacity = interpolate2(flashProgress, [0, 0.1, 1], [1, 1, START.whiteOpacity], {
       extrapolateRight: "clamp"
     });
   } else if (isPhase2) {
@@ -1629,11 +1470,11 @@ function ScreenshotAnimationV2({
   let containerRight;
   let containerBottom;
   if (isFlashPhase) {
-    containerTop = 0;
-    containerTopInner = 5e-3;
-    containerLeft = 0;
-    containerRight = 1;
-    containerBottom = 1;
+    containerTop = START.ssBorderTop;
+    containerTopInner = START.ssBorderTopInner;
+    containerLeft = START.ssBorderLeft;
+    containerRight = START.ssBorderRight;
+    containerBottom = START.ssBorderBottom;
   } else {
     const totalDuration = CONTAINER_ANIMATION_DURATION + CONTAINER_SETTLE_DURATION;
     containerTop = smoothInterpolate(phase2TimeMs, 0, totalDuration, START.ssBorderTop, END.ssBorderTop, easeOutQuart);
@@ -1653,7 +1494,7 @@ function ScreenshotAnimationV2({
   let imgClipRightPercent;
   let imgClipBottomPercent;
   if (isFlashPhase) {
-    imgTopPercent = 0.5;
+    imgTopPercent = START.imgTop;
     imgClipRightPercent = START.imgClipRight;
     imgClipBottomPercent = START.imgClipBottom;
   } else {
@@ -1678,16 +1519,15 @@ function ScreenshotAnimationV2({
     easeOutQuart
   );
   const innerBorderRadius = (borderRadius - borderWidth) * cornerProgress;
-  const grayGapHeight = Math.max(0, (imgTopPercent - containerTopInner) * height);
   const smallClipTop = imgTopPercent * height;
   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: [
-    /* @__PURE__ */ jsx9(
-      Img4,
+  return /* @__PURE__ */ jsxs6(AbsoluteFill4, { style: { backgroundColor }, children: [
+    /* @__PURE__ */ jsx8(
+      Img3,
       {
         src: imageUrl,
         style: {
@@ -1700,7 +1540,7 @@ function ScreenshotAnimationV2({
         }
       }
     ),
-    showContainer && /* @__PURE__ */ jsxs7(
+    showContainer && /* @__PURE__ */ jsxs6(
       "div",
       {
         style: {
@@ -1715,7 +1555,7 @@ function ScreenshotAnimationV2({
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -1729,7 +1569,7 @@ function ScreenshotAnimationV2({
                 borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
               },
               children: [
-                !thumbnailFilled && /* @__PURE__ */ jsx9(
+                !thumbnailFilled && /* @__PURE__ */ jsx8(
                   "div",
                   {
                     style: {
@@ -1742,7 +1582,7 @@ function ScreenshotAnimationV2({
                     }
                   }
                 ),
-                !thumbnailFilled && /* @__PURE__ */ jsx9(
+                !thumbnailFilled && /* @__PURE__ */ jsx8(
                   "div",
                   {
                     style: {
@@ -1753,8 +1593,8 @@ function ScreenshotAnimationV2({
                       height,
                       overflow: "hidden"
                     },
-                    children: /* @__PURE__ */ jsx9(
-                      Img4,
+                    children: /* @__PURE__ */ jsx8(
+                      Img3,
                       {
                         src: imageUrl,
                         style: {
@@ -1766,7 +1606,7 @@ function ScreenshotAnimationV2({
                     )
                   }
                 ),
-                showSmallClip && /* @__PURE__ */ jsx9(
+                showSmallClip && /* @__PURE__ */ jsx8(
                   "div",
                   {
                     style: {
@@ -1777,8 +1617,8 @@ function ScreenshotAnimationV2({
                       height: thumbnailFilled ? contentH : smallClipHeight,
                       overflow: "hidden"
                     },
-                    children: /* @__PURE__ */ jsx9(
-                      Img4,
+                    children: /* @__PURE__ */ jsx8(
+                      Img3,
                       {
                         src: imageUrl,
                         style: {
@@ -1793,7 +1633,7 @@ function ScreenshotAnimationV2({
               ]
             }
           ),
-          whiteOpacity > 1e-3 && /* @__PURE__ */ jsx9(
+          whiteOpacity > 1e-3 && /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -1898,7 +1738,7 @@ function useResolvedPositions(elements, textValues) {
 // src/Root.tsx
 import { Composition } from "remotion";
 import { z } from "zod";
-import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -1941,32 +1781,6 @@ var defaultAutoCaptionProps = {
   }
 };
 var defaultScreenshotAnimationProps = {
-  imageUrl: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1080&h=1920&fit=crop",
-  width: 1080,
-  height: 1920,
-  // Timing
-  flashDurationMs: 100,
-  shrinkDurationMs: 300,
-  pauseDurationMs: 800,
-  dismissDurationMs: 250,
-  // Image styling
-  imageCornerRadius: 0,
-  thumbnailCornerRadius: 24,
-  // Border
-  borderWidth: 0,
-  borderColor: "rgba(255, 255, 255, 0.3)",
-  // Thumbnail positioning
-  thumbnailScale: 0.15,
-  thumbnailPadding: 20,
-  bottomOffset: 80,
-  // Spring physics
-  springDamping: 15,
-  springStiffness: 120,
-  springMass: 0.8,
-  // Background
-  backgroundColor: "#000000"
-};
-var defaultScreenshotAnimationV2Props = {
   imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3163-RY0CFNrbnSnqZpaJzi9VdslzfYLLKf.png",
   width: 1202,
   height: 2618,
@@ -1976,7 +1790,7 @@ var defaultScreenshotAnimationV2Props = {
   borderColor: "rgba(254, 255, 255, 1)",
   backgroundColor: "#000000"
 };
-var screenshotAnimationV2Schema = z.object({
+var screenshotAnimationSchema = z.object({
   imageUrl: z.string().describe("URL of the image being screenshotted"),
   width: z.number().optional().default(1202).describe("Canvas width (px)"),
   height: z.number().optional().default(2618).describe("Canvas height (px)"),
@@ -1986,38 +1800,10 @@ var screenshotAnimationV2Schema = z.object({
   borderColor: z.string().optional().default("rgba(254, 255, 255, 1)").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"),
-  width: z.number().optional().default(1080).describe("Canvas width (px)"),
-  height: z.number().optional().default(1920).describe("Canvas height (px)"),
-  // Timing
-  flashDurationMs: z.number().optional().default(100).describe("Flash duration (ms)"),
-  shrinkDurationMs: z.number().optional().default(300).describe("Shrink animation duration (ms)"),
-  pauseDurationMs: z.number().optional().default(800).describe("Pause before dismiss (ms)"),
-  dismissDurationMs: z.number().optional().default(250).describe("Dismiss slide duration (ms)"),
-  // Image styling
-  imageCornerRadius: z.number().optional().default(0).describe("Corner radius at full size (px)"),
-  thumbnailCornerRadius: z.number().optional().default(24).describe("Corner radius of thumbnail (px)"),
-  // Border
-  borderWidth: z.number().optional().default(0).describe("Border width (px)"),
-  borderColor: z.string().optional().default("rgba(255, 255, 255, 0.3)").describe("Border color"),
-  // Thumbnail positioning
-  thumbnailScale: z.number().optional().default(0.15).describe("Thumbnail scale (0-1)"),
-  thumbnailPadding: z.number().optional().default(20).describe("Padding from edge (px)"),
-  bottomOffset: z.number().optional().default(80).describe("Extra bottom offset (px)"),
-  // Spring physics
-  springDamping: z.number().optional().default(15).describe("Spring damping (higher = less bounce)"),
-  springStiffness: z.number().optional().default(120).describe("Spring stiffness (higher = faster)"),
-  springMass: z.number().optional().default(0.8).describe("Spring mass"),
-  // Background
-  backgroundColor: z.string().optional().default("#000000").describe("Background color")
-});
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var AutoCaptionComp = AutoCaptionComposition;
-var ScreenshotAnimationComp = ScreenshotAnimationComposition;
-var ScreenshotAnimationV2Comp = ScreenshotAnimationV2;
+var ScreenshotAnimationComp = ScreenshotAnimation;
 var calculateImageMetadata = async ({ props }) => {
   console.log("[calculateMetadata] Starting metadata calculation...");
   const canvasWidth = props.width ?? props.config?.width ?? 1080;
@@ -2068,8 +1854,8 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx9(
       Composition,
       {
         id: "ImageEditorComposition",
@@ -2082,7 +1868,7 @@ var RenderRoot = () => {
         defaultProps: defaultImageProps
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9(
       Composition,
       {
         id: "VideoEditorComposition",
@@ -2094,7 +1880,7 @@ var RenderRoot = () => {
         defaultProps: defaultVideoProps
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9(
       Composition,
       {
         id: "AutoCaptionComposition",
@@ -2106,30 +1892,17 @@ var RenderRoot = () => {
         defaultProps: defaultAutoCaptionProps
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9(
       Composition,
       {
         id: "ScreenshotAnimationComposition",
         component: ScreenshotAnimationComp,
         schema: screenshotAnimationSchema,
-        durationInFrames: 60,
-        fps: 30,
-        width: 1080,
-        height: 1920,
-        defaultProps: defaultScreenshotAnimationProps
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      Composition,
-      {
-        id: "ScreenshotAnimationV2",
-        component: ScreenshotAnimationV2Comp,
-        schema: screenshotAnimationV2Schema,
         durationInFrames: 90,
         fps: 30,
         width: 1202,
         height: 2618,
-        defaultProps: defaultScreenshotAnimationV2Props
+        defaultProps: defaultScreenshotAnimationProps
       }
     )
   ] });
@@ -2154,8 +1927,7 @@ export {
   LEVEL_4_CONFIG,
   LEVEL_5_CONFIG,
   RenderRoot,
-  ScreenshotAnimationComposition,
-  ScreenshotAnimationV2,
+  ScreenshotAnimation,
   TEXT_DEFAULTS,
   TextElement,
   VIDEO_DEFAULTS,

package/package.json

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