@zync/zync-screnplay-player 0.1.187

package/dist/screenplay/RemotionRenderer/components/layouts/BrollStudioBackdrop.js

@@ -0,0 +1,620 @@
+import React from "react";
+import { AbsoluteFill, Audio, OffthreadVideo, useVideoConfig, spring, useCurrentFrame } from "remotion";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { CHROME_PADDING } from "../../config.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import PausableImg from "../utils/PausableImg";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackground } from "../backgrounds/VirtualBackground";
+var Square = function Square(_ref) {
+  var children = _ref.children,
+    brollUrl = _ref.brollUrl,
+    brollSpringProgress = _ref.brollSpringProgress,
+    width = _ref.width,
+    height = _ref.height,
+    logoUrl = _ref.logoUrl,
+    logoLeft = _ref.logoLeft,
+    logoTop = _ref.logoTop,
+    frameColor = _ref.frameColor,
+    startVideoFrom = _ref.startVideoFrom,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref.sourceVideoOrientation,
+    videoUrl = _ref.videoUrl,
+    faceMetadata = _ref.faceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    showVirtual = _ref.showVirtual,
+    virtualBgUrl = _ref.virtualBgUrl;
+  // Calculate broll container dimensions with 2.5% left/right, 10% top/bottom margins
+  var brollContainerWidth = width * 0.95; // 95% of viewport (2.5% margin on each side)
+  var brollContainerHeight = height * 0.8; // 80% of viewport (10% margin on top/bottom)
+
+  // Assume 16:9 aspect ratio for broll video
+  var brollAspectRatio = 16 / 9;
+  var maxBrollWidth = Math.min(brollContainerWidth, brollContainerHeight * brollAspectRatio);
+  var finalBrollHeight = maxBrollWidth / brollAspectRatio;
+
+  // Start with full width, zero height, grow vertically from top with padding
+  var currentBrollHeight = finalBrollHeight * brollSpringProgress;
+  var brollTop = height * 0.1; // Align to top with 10% padding
+
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 1
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: virtualBgUrl,
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    muted: true,
+    style: {
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), brollUrl && brollSpringProgress > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      inset: "".concat(height * 0.1, "px ").concat(width * 0.05, "px"),
+      height: currentBrollHeight,
+      top: brollTop,
+      left: width * 0.025 + (brollContainerWidth - maxBrollWidth) / 2,
+      width: maxBrollWidth,
+      zIndex: 2,
+      opacity: 0.85 * brollSpringProgress,
+      borderRadius: "12px",
+      border: "16px solid rgba(255, 255, 255, 0.2)",
+      boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+      backdropFilter: "blur(1px)",
+      WebkitBackdropFilter: "blur(1px)"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      opacity: 0.9
+    },
+    muted: true
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: "linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%)",
+      mixBlendMode: "overlay"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 3
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    transparent: true,
+    muted: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    style: {
+      zIndex: 2
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      zIndex: 2,
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 4
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: logoLeft,
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var Portrait = function Portrait(_ref2) {
+  var children = _ref2.children,
+    brollUrl = _ref2.brollUrl,
+    brollSpringProgress = _ref2.brollSpringProgress,
+    width = _ref2.width,
+    height = _ref2.height,
+    logoUrl = _ref2.logoUrl,
+    logoLeft = _ref2.logoLeft,
+    logoTop = _ref2.logoTop,
+    frameColor = _ref2.frameColor,
+    startVideoFrom = _ref2.startVideoFrom,
+    noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    videoUrl = _ref2.videoUrl,
+    faceMetadata = _ref2.faceMetadata,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    showVirtual = _ref2.showVirtual,
+    virtualBgUrl = _ref2.virtualBgUrl;
+  // Calculate broll container dimensions with 2.5% left/right, 10% top/bottom margins
+  var brollContainerWidth = width * 0.95; // 95% of viewport (2.5% margin on each side)
+  var brollContainerHeight = height * 0.8; // 80% of viewport (10% margin on top/bottom)
+
+  // Assume 16:9 aspect ratio for broll video
+  var brollAspectRatio = 16 / 9;
+  var maxBrollWidth = Math.min(brollContainerWidth, brollContainerHeight * brollAspectRatio);
+  var finalBrollHeight = maxBrollWidth / brollAspectRatio;
+
+  // Start with full width, zero height, grow vertically from top with padding
+  var currentBrollHeight = finalBrollHeight * brollSpringProgress;
+  var brollTop = height * 0.1; // Align to top with 10% padding
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 1
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: virtualBgUrl,
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    transparent: false,
+    muted: true,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    style: {
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), brollUrl && brollSpringProgress > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "16px",
+      height: currentBrollHeight,
+      top: brollTop,
+      left: width * 0.025 + (brollContainerWidth - maxBrollWidth) / 2,
+      width: maxBrollWidth,
+      zIndex: 2,
+      opacity: 0.8 * brollSpringProgress,
+      border: "16px solid rgba(255, 255, 255, 0.25)",
+      boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4)",
+      backdropFilter: "blur(2px) brightness(1.1)",
+      WebkitBackdropFilter: "blur(2px) brightness(1.1)"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      opacity: 0.85
+    },
+    muted: true
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: "radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.1) 70%)",
+      mixBlendMode: "soft-light"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 3
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    transparent: true,
+    muted: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 4
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: logoLeft,
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var Landscape = function Landscape(_ref3) {
+  var children = _ref3.children,
+    brollUrl = _ref3.brollUrl,
+    brollSpringProgress = _ref3.brollSpringProgress,
+    width = _ref3.width,
+    height = _ref3.height,
+    logoUrl = _ref3.logoUrl,
+    logoLeft = _ref3.logoLeft,
+    logoTop = _ref3.logoTop,
+    frameColor = _ref3.frameColor,
+    startVideoFrom = _ref3.startVideoFrom,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref3.sourceVideoOrientation,
+    videoUrl = _ref3.videoUrl,
+    faceMetadata = _ref3.faceMetadata,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    showVirtual = _ref3.showVirtual,
+    virtualBgUrl = _ref3.virtualBgUrl;
+  // Calculate broll container dimensions with 2.5% left/right, 10% top/bottom margins
+  var brollContainerWidth = width * 0.95; // 95% of viewport (2.5% margin on each side)
+  var brollContainerHeight = height * 0.8; // 80% of viewport (10% margin on top/bottom)
+
+  // Assume 16:9 aspect ratio for broll video
+  var brollAspectRatio = 16 / 9;
+  var maxBrollWidth = Math.min(brollContainerWidth, brollContainerHeight * brollAspectRatio);
+  var finalBrollHeight = maxBrollWidth / brollAspectRatio;
+
+  // Start with full width, zero height, grow vertically from center
+  var currentBrollHeight = finalBrollHeight * brollSpringProgress;
+  var brollTop = height * 0.1 + (brollContainerHeight - currentBrollHeight) / 2;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 1
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: virtualBgUrl,
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    muted: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), brollUrl && brollSpringProgress > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      height: currentBrollHeight,
+      top: brollTop,
+      left: width * 0.025 + (brollContainerWidth - maxBrollWidth) / 2,
+      width: maxBrollWidth,
+      zIndex: 2,
+      opacity: 0.75 * brollSpringProgress,
+      border: "48px solid rgba(255, 255, 255, 0.3)",
+      boxShadow: "0 16px 60px rgba(0, 0, 0, 0.5)",
+      backdropFilter: "blur(30px) contrast(1.1)",
+      WebkitBackdropFilter: "blur(3px) contrast(1.1)"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      overflow: "hidden",
+      borderRadius: "20px",
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      opacity: 0.9
+    },
+    muted: true
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderRadius: "20px",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: "linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.15) 100%)",
+      mixBlendMode: "overlay"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 3
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    transparent: true,
+    muted: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 14
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: logoLeft,
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var BrollStudioBackdrop = function BrollStudioBackdrop(_ref4) {
+  var videoUrl = _ref4.videoUrl,
+    startVideoFrom = _ref4.startVideoFrom,
+    brollUrl = _ref4.brollUrl,
+    frameColor = _ref4.frameColor,
+    logoUrl = _ref4.logoUrl,
+    children = _ref4.children,
+    sourceVideoOrientation = _ref4.sourceVideoOrientation,
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    durationInFrames = _ref4.durationInFrames,
+    faceMetadata = _ref4.faceMetadata,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var durationInSeconds = durationInFrames / fps;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollStudioBackdropComponent: Portrait
+      },
+      landscape: {
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollStudioBackdropComponent: Landscape
+      },
+      square: {
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollStudioBackdropComponent: Square
+      }
+    }),
+    BrollStudioBackdropComponent = _useOrientationBased.BrollStudioBackdropComponent,
+    logoTop = _useOrientationBased.logoTop,
+    logoLeft = _useOrientationBased.logoLeft;
+
+  // Spring animation for broll entrance/exit - slow start, faster end
+  var entranceEndFrame = fps * 0.5; // 0.5 seconds for entrance
+  var exitStartFrame = durationInFrames - fps * 1.5; // 0.5 seconds before end for exit
+
+  var brollSpringProgress = 0;
+  if (frame <= entranceEndFrame) {
+    // Entrance animation - slow start, faster end
+    brollSpringProgress = spring({
+      frame: frame,
+      fps: fps,
+      config: {
+        damping: 100,
+        stiffness: 160,
+        mass: 1
+      }
+    });
+  } else if (frame >= exitStartFrame) {
+    // Exit animation - reverse spring
+    var exitFrame = frame - exitStartFrame;
+    var exitSpring = spring({
+      frame: exitFrame,
+      fps: fps,
+      config: {
+        damping: 300,
+        stiffness: 80,
+        mass: 4
+      }
+    });
+    brollSpringProgress = 1 - exitSpring;
+  } else {
+    // Middle section - fully visible
+    brollSpringProgress = 1;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), /*#__PURE__*/React.createElement(BrollStudioBackdropComponent, {
+    brollUrl: brollUrl,
+    brollSpringProgress: brollSpringProgress,
+    width: width,
+    height: height,
+    logoUrl: logoUrl,
+    frameColor: frameColor,
+    startVideoFrom: startVideoFrom,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    sourceVideoOrientation: sourceVideoOrientation,
+    logoLeft: logoLeft,
+    logoTop: logoTop,
+    videoUrl: videoUrl,
+    faceMetadata: faceMetadata,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    showVirtual: showVirtual,
+    virtualBgUrl: virtualBgUrl
+  }, children));
+};
+export { BrollStudioBackdrop };