@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,618 @@
+import React from "react";
+import { AbsoluteFill, OffthreadVideo, Audio, useVideoConfig, useCurrentFrame, Easing, interpolate } from "remotion";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { useTheme } from "../../theme/hooks/useTheme";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var DynamicTriangle = function DynamicTriangle(_ref) {
+  var children = _ref.children,
+    videoUrl = _ref.videoUrl,
+    startVideoFrom = _ref.startVideoFrom,
+    durationInFrames = _ref.durationInFrames,
+    muted = _ref.muted,
+    frameColor = _ref.frameColor,
+    _ref$disableTransitio = _ref.disableTransitionSounds,
+    disableTransitionSounds = _ref$disableTransitio === void 0 ? false : _ref$disableTransitio,
+    _ref$triangleSize = _ref.triangleSize,
+    defaultTriangleSize = _ref$triangleSize === void 0 ? 600 : _ref$triangleSize,
+    _ref$triangleColor = _ref.triangleColor,
+    triangleColor = _ref$triangleColor === void 0 ? "#00FF7F" : _ref$triangleColor,
+    _ref$triangleBorderWi = _ref.triangleBorderWidth,
+    defaultTriangleBorderWidth = _ref$triangleBorderWi === void 0 ? 60 : _ref$triangleBorderWi,
+    _ref$borderRadius = _ref.borderRadius,
+    defaultBorderRadius = _ref$borderRadius === void 0 ? 80 : _ref$borderRadius,
+    sentenceText = _ref.sentenceText,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    faceMetadata = _ref.faceMetadata;
+  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 _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast,
+    primaryContrast = _useTheme.primaryContrast;
+
+  // Get orientation-specific configurations
+  var orientationConfig = useOrientationBased({
+    landscape: {
+      triangleSize: defaultTriangleSize,
+      triangleBorderWidth: defaultTriangleBorderWidth,
+      borderRadius: defaultBorderRadius,
+      startRotation: 165,
+      endRotation: 290,
+      maskStartScale: 10,
+      maskEndScale: 2.5,
+      // Orientation-specific easing configuration
+      easings: {
+        enter: {
+          rotation: Easing.inOut(Easing.quad),
+          position: Easing.inOut(Easing.ease),
+          mask: Easing.inOut(Easing.cubic),
+          video: Easing.inOut(Easing.cubic)
+        },
+        exit: {
+          rotation: Easing.out(Easing.cubic),
+          position: Easing.out(Easing.cubic),
+          mask: Easing.out(Easing.cubic),
+          // Square: make video slightly faster than triangle on exit
+          video: Easing.out(Easing.exp)
+        }
+      },
+      // Exit lead for video vs. triangle (seconds)
+      videoExitLeadSeconds: 0,
+      // Exit duration for video easing window (seconds)
+      videoExitDurationSeconds: 1.5,
+      // X positions for animation
+      xStartPos: width / 8 * 3 + 150,
+      xEndPos: width / 4 * 3 + 250,
+      // Y positions for animation (static in landscape)
+      yStartPos: height / 2.25,
+      yEndPos: height / 2.25,
+      // Video offset
+      videoOffsetStart: 0,
+      videoOffsetEnd: 48,
+      videoOffsetExit: -80,
+      videoOffsetYStart: 0,
+      videoOffsetYEnd: 0,
+      videoOffsetYExit: 0,
+      textContainerWidth: width / 2 - 250,
+      textContainerHeight: height
+    },
+    square: {
+      triangleSize: 450,
+      triangleBorderWidth: 50,
+      borderRadius: 70,
+      startRotation: 0,
+      endRotation: 195,
+      maskStartScale: 8,
+      maskEndScale: 2.2,
+      // Orientation-specific easing configuration
+      easings: {
+        enter: {
+          rotation: Easing.inOut(Easing.quad),
+          position: Easing.inOut(Easing.ease),
+          mask: Easing.inOut(Easing.cubic),
+          video: Easing.inOut(Easing.cubic)
+        },
+        exit: {
+          rotation: Easing.out(Easing.cubic),
+          position: Easing.out(Easing.cubic),
+          mask: Easing.out(Easing.cubic),
+          // Square: keep video slightly faster but smoother than triangle
+          video: Easing.out(Easing.cubic)
+        }
+      },
+      // Make video exit start slightly earlier than triangle
+      videoExitLeadSeconds: 0.05,
+      // Make video exit complete faster than triangle
+      videoExitDurationSeconds: 1.2,
+      // X positions - center to bottom-right
+      xStartPos: width / 2,
+      xEndPos: width - 300,
+      // Y positions - center to bottom
+      yStartPos: height / 2,
+      yEndPos: height - 150,
+      // Video offset
+      videoOffsetStart: 0,
+      videoOffsetEnd: 30,
+      videoOffsetExit: 0,
+      videoOffsetYStart: 0,
+      videoOffsetYEnd: 40,
+      videoOffsetYExit: 0,
+      textContainerWidth: width - 200,
+      textContainerHeight: height * 0.35
+    },
+    portrait: {
+      triangleSize: 650,
+      triangleBorderWidth: 45,
+      borderRadius: 65,
+      startRotation: 10,
+      endRotation: 195,
+      maskStartScale: 10,
+      maskEndScale: 2.8,
+      // Orientation-specific easing configuration
+      easings: {
+        enter: {
+          rotation: Easing.inOut(Easing.quad),
+          position: Easing.inOut(Easing.ease),
+          mask: Easing.inOut(Easing.cubic),
+          video: Easing.inOut(Easing.cubic)
+        },
+        exit: {
+          rotation: Easing.out(Easing.cubic),
+          position: Easing.out(Easing.cubic),
+          mask: Easing.out(Easing.cubic),
+          video: Easing.out(Easing.cubic)
+        }
+      },
+      // Make video exit start slightly earlier than triangle
+      videoExitLeadSeconds: 0.1,
+      // Make video exit complete faster than triangle
+      videoExitDurationSeconds: 0.9,
+      // X positions - stay centered
+      xStartPos: width / 2,
+      xEndPos: width / 2,
+      // Y positions - top to bottom
+      yStartPos: 400,
+      yEndPos: height - 200,
+      // Video offset
+      videoOffsetStart: 0,
+      videoOffsetEnd: 0,
+      videoOffsetExit: 0,
+      videoOffsetYStart: 0,
+      videoOffsetYEnd: 40,
+      videoOffsetYExit: 0,
+      textContainerWidth: width - 200,
+      textContainerHeight: height * 0.4
+    }
+  });
+
+  // Extract values from orientation config
+  var triangleSize = orientationConfig.triangleSize,
+    triangleBorderWidth = orientationConfig.triangleBorderWidth,
+    borderRadius = orientationConfig.borderRadius,
+    startRotation = orientationConfig.startRotation,
+    endRotation = orientationConfig.endRotation,
+    maskStartScale = orientationConfig.maskStartScale,
+    maskEndScale = orientationConfig.maskEndScale,
+    easings = orientationConfig.easings,
+    videoExitLeadSeconds = orientationConfig.videoExitLeadSeconds,
+    videoExitDurationSeconds = orientationConfig.videoExitDurationSeconds,
+    xStartPos = orientationConfig.xStartPos,
+    xEndPos = orientationConfig.xEndPos,
+    yStartPos = orientationConfig.yStartPos,
+    yEndPos = orientationConfig.yEndPos,
+    videoOffsetStart = orientationConfig.videoOffsetStart,
+    videoOffsetEnd = orientationConfig.videoOffsetEnd,
+    videoOffsetExit = orientationConfig.videoOffsetExit,
+    videoOffsetYStart = orientationConfig.videoOffsetYStart,
+    videoOffsetYEnd = orientationConfig.videoOffsetYEnd,
+    videoOffsetYExit = orientationConfig.videoOffsetYExit,
+    textContainerWidth = orientationConfig.textContainerWidth,
+    textContainerHeight = orientationConfig.textContainerHeight;
+  var maskAnimationDuration = 1.5;
+  var enterAnimationDuration = 1.25;
+  var hasFiniteDuration = Number.isFinite(durationInFrames);
+  var durationInSeconds = hasFiniteDuration && durationInFrames > 0 ? durationInFrames / fps : null;
+  var canAnimateExit = typeof durationInSeconds === "number" && durationInSeconds - maskAnimationDuration >= enterAnimationDuration;
+
+  // Calculate exit animation start time to match maskAnimationDuration
+  var exitStartTime = canAnimateExit ? durationInSeconds - maskAnimationDuration : null;
+  var exitStartFrame = typeof exitStartTime === "number" ? exitStartTime * fps : null;
+  var isExiting = Boolean(canAnimateExit && exitStartFrame !== null && frame >= exitStartFrame);
+
+  // Video-specific exit start with optional lead (square/portrait)
+  var potentialVideoExitStart = exitStartTime && typeof videoExitLeadSeconds === "number" ? exitStartTime - videoExitLeadSeconds : exitStartTime;
+  var videoExitStartTime = canAnimateExit && typeof potentialVideoExitStart === "number" ? Math.max(0, potentialVideoExitStart) : null;
+  var potentialVideoExitEnd = canAnimateExit && typeof videoExitDurationSeconds === "number" && typeof videoExitStartTime === "number" && typeof durationInSeconds === "number" ? Math.min(videoExitStartTime + videoExitDurationSeconds, durationInSeconds) : durationInSeconds;
+  var canAnimateVideoExit = canAnimateExit && typeof videoExitStartTime === "number" && typeof potentialVideoExitEnd === "number" && potentialVideoExitEnd > videoExitStartTime;
+  var videoExitEndTime = canAnimateVideoExit ? potentialVideoExitEnd : null;
+  var videoExitStartFrame = canAnimateVideoExit && typeof videoExitStartTime === "number" ? videoExitStartTime * fps : null;
+  var isExitingVideo = Boolean(canAnimateVideoExit && videoExitStartFrame !== null && frame >= videoExitStartFrame);
+
+  // Calculate rotation with interpolation for smoothness (including exit)
+  var rotation = useTimeInterpolate(canAnimateExit && typeof durationInSeconds === "number" ? [0, enterAnimationDuration, exitStartTime, durationInSeconds] : [0, enterAnimationDuration], canAnimateExit && typeof durationInSeconds === "number" ? [startRotation, endRotation, endRotation, startRotation + 10] // Magic 10 to avoid rotation glitches
+  : [startRotation, endRotation], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: isExiting ? easings.exit.rotation : easings.enter.rotation
+  });
+
+  // Calculate X position with easing (including exit)
+  var xPosition = useTimeInterpolate(canAnimateExit && typeof durationInSeconds === "number" ? [0, enterAnimationDuration, exitStartTime, durationInSeconds] : [0, enterAnimationDuration], canAnimateExit && typeof durationInSeconds === "number" ? [xStartPos, xEndPos, xEndPos, xStartPos] : [xStartPos, xEndPos], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: isExiting ? easings.exit.position : easings.enter.position
+  });
+
+  // Calculate Y position with easing (including exit) - now animated for portrait/square
+  var yPosition = useTimeInterpolate(canAnimateExit && typeof durationInSeconds === "number" ? [0, enterAnimationDuration, exitStartTime, durationInSeconds] : [0, enterAnimationDuration], canAnimateExit && typeof durationInSeconds === "number" ? [yStartPos, yEndPos, yEndPos, yStartPos] : [yStartPos, yEndPos], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: isExiting ? easings.exit.position : easings.enter.position
+  });
+
+  // Calculate position with easing for video component only (including exit)
+  var xPositionVideo = useTimeInterpolate(canAnimateVideoExit && typeof videoExitStartTime === "number" && typeof videoExitEndTime === "number" ? [0.8, enterAnimationDuration, videoExitStartTime, videoExitEndTime] : [0.8, enterAnimationDuration], canAnimateVideoExit && typeof videoExitStartTime === "number" && typeof videoExitEndTime === "number" ? [videoOffsetStart, videoOffsetEnd, videoOffsetEnd, videoOffsetExit] : [videoOffsetStart, videoOffsetEnd], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: isExitingVideo ? easings.exit.video : easings.enter.video
+  });
+
+  // Calculate position with easing for video component only (including exit)
+  var yPositionVideo = useTimeInterpolate(canAnimateVideoExit && typeof videoExitStartTime === "number" && typeof videoExitEndTime === "number" ? [0.8, enterAnimationDuration, videoExitStartTime, videoExitEndTime] : [0.8, enterAnimationDuration], canAnimateVideoExit && typeof videoExitStartTime === "number" && typeof videoExitEndTime === "number" ? [videoOffsetYStart, videoOffsetYEnd, videoOffsetYEnd, videoOffsetYExit] : [videoOffsetYStart, videoOffsetYEnd], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: isExitingVideo ? easings.exit.video : easings.enter.video
+  });
+
+  // Mask scale interpolation for animated reveal/hide effect (including exit)
+  var maskScale = useTimeInterpolate(canAnimateExit && typeof durationInSeconds === "number" ? [0, maskAnimationDuration, exitStartTime, durationInSeconds] : [0, maskAnimationDuration], canAnimateExit && typeof durationInSeconds === "number" ? [maskStartScale, maskEndScale, maskEndScale, maskStartScale] : [maskStartScale, maskEndScale], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: isExiting ? easings.exit.mask : easings.enter.mask
+  });
+
+  // Calculate the triangle path points with animated scale
+  // For very large scales, cap the actual size to prevent calculation issues
+  // but still allow the visual effect by ensuring the triangle covers the viewport
+  var effectiveScale = Math.min(maskScale, 10); // Cap at 10x for calculations
+  var scaledTriangleSize = triangleSize * effectiveScale;
+  var triangleHalfSize = scaledTriangleSize / 2;
+  var triangleHeight = scaledTriangleSize * Math.sqrt(3) / 2;
+
+  // If scale is very large, we want the triangle to cover the entire viewport
+  var isFullCoverage = maskScale > 5;
+
+  // Calculate super rounded corner positions for a smooth rounded triangle
+  // Use a much larger default radius for very rounded corners like in the example
+  // For very large scales, maintain proportional radius
+  var radius = Math.min(borderRadius || 80, scaledTriangleSize * 0.35) * effectiveScale; // Scale radius with effective scale
+
+  // Triangle vertices
+  var topX = width / 2;
+  var topY = height / 2 - triangleHeight / 2;
+  var leftX = width / 2 - triangleHalfSize;
+  var leftY = height / 2 + triangleHeight / 2;
+  var rightX = width / 2 + triangleHalfSize;
+  var rightY = height / 2 + triangleHeight / 2;
+
+  // For super rounded corners, we'll create arcs between shortened edges
+  // Calculate how much to shorten each edge based on the radius
+  var insetRatio = radius / (scaledTriangleSize * 0.5);
+
+  // Calculate points along each edge, inset by the radius
+  // These will be where our straight edges end and curves begin
+
+  // Top vertex to right vertex edge
+  var topRightStartX = topX + (rightX - topX) * insetRatio;
+  var topRightStartY = topY + (rightY - topY) * insetRatio;
+  var topRightEndX = rightX - (rightX - topX) * insetRatio;
+  var topRightEndY = rightY - (rightY - topY) * insetRatio;
+
+  // Right vertex to left vertex edge
+  var rightLeftStartX = rightX + (leftX - rightX) * insetRatio;
+  var rightLeftStartY = rightY + (leftY - rightY) * insetRatio;
+  var rightLeftEndX = leftX - (leftX - rightX) * insetRatio;
+  var rightLeftEndY = leftY - (leftY - rightY) * insetRatio;
+
+  // Left vertex to top vertex edge
+  var leftTopStartX = leftX + (topX - leftX) * insetRatio;
+  var leftTopStartY = leftY + (topY - leftY) * insetRatio;
+  var leftTopEndX = topX - (topX - leftX) * insetRatio;
+  var leftTopEndY = topY - (topY - leftY) * insetRatio;
+
+  // Create SVG path using quadratic bezier curves with vertices as control points
+  // This creates smooth, circular-like corners
+  // For very large scales, create a path that covers the entire viewport
+  var trianglePath = isFullCoverage && maskScale > 10 ? "M 0,0 L ".concat(width, ",0 L ").concat(width, ",").concat(height, " L 0,").concat(height, " Z") // Full rectangle for extreme scales
+  : "\n      M ".concat(leftTopEndX, ", ").concat(leftTopEndY, "\n      Q ").concat(topX, ", ").concat(topY, " ").concat(topRightStartX, ", ").concat(topRightStartY, "\n      L ").concat(topRightEndX, ", ").concat(topRightEndY, "\n      Q ").concat(rightX, ", ").concat(rightY, " ").concat(rightLeftStartX, ", ").concat(rightLeftStartY, "\n      L ").concat(rightLeftEndX, ", ").concat(rightLeftEndY, "\n      Q ").concat(leftX, ", ").concat(leftY, " ").concat(leftTopStartX, ", ").concat(leftTopStartY, "\n      Z\n    ");
+
+  // Create multiple stacked triangles for the layered border effect
+  // We'll create 3 layers with different sizes and opacities
+  var stackedTriangles = [];
+  var numberOfLayers = 3;
+  for (var i = 0; i < numberOfLayers; i++) {
+    // Each layer gets progressively larger and scales with mask
+    var layerScale = 1 + triangleBorderWidth * (i + 1) / triangleSize;
+    var layerTriangleSize = triangleSize * layerScale * effectiveScale; // Apply effective scale
+    var layerTriangleHalfSize = layerTriangleSize / 2;
+    var layerTriangleHeight = layerTriangleSize * Math.sqrt(3) / 2;
+
+    // Layer triangle vertices
+    var layerTopX = width / 2;
+    var layerTopY = height / 2 - layerTriangleHeight / 2;
+    var layerLeftX = width / 2 - layerTriangleHalfSize;
+    var layerLeftY = height / 2 + layerTriangleHeight / 2;
+    var layerRightX = width / 2 + layerTriangleHalfSize;
+    var layerRightY = height / 2 + layerTriangleHeight / 2;
+
+    // Calculate rounded corners for this layer
+    var layerRadius = radius * layerScale; // Radius already includes effective scale
+    var layerInsetRatio = layerRadius / (layerTriangleSize * 0.5);
+
+    // Layer triangle path points
+    var layerTopRightStartX = layerTopX + (layerRightX - layerTopX) * layerInsetRatio;
+    var layerTopRightStartY = layerTopY + (layerRightY - layerTopY) * layerInsetRatio;
+    var layerTopRightEndX = layerRightX - (layerRightX - layerTopX) * layerInsetRatio;
+    var layerTopRightEndY = layerRightY - (layerRightY - layerTopY) * layerInsetRatio;
+    var layerRightLeftStartX = layerRightX + (layerLeftX - layerRightX) * layerInsetRatio;
+    var layerRightLeftStartY = layerRightY + (layerLeftY - layerRightY) * layerInsetRatio;
+    var layerRightLeftEndX = layerLeftX - (layerLeftX - layerRightX) * layerInsetRatio;
+    var layerRightLeftEndY = layerLeftY - (layerLeftY - layerRightY) * layerInsetRatio;
+    var layerLeftTopStartX = layerLeftX + (layerTopX - layerLeftX) * layerInsetRatio;
+    var layerLeftTopStartY = layerLeftY + (layerTopY - layerLeftY) * layerInsetRatio;
+    var layerLeftTopEndX = layerTopX - (layerTopX - layerLeftX) * layerInsetRatio;
+    var layerLeftTopEndY = layerTopY - (layerTopY - layerLeftY) * layerInsetRatio;
+
+    // Create the layer triangle path
+    var layerPath = "\n      M ".concat(layerLeftTopEndX, ", ").concat(layerLeftTopEndY, "\n      Q ").concat(layerTopX, ", ").concat(layerTopY, " ").concat(layerTopRightStartX, ", ").concat(layerTopRightStartY, "\n      L ").concat(layerTopRightEndX, ", ").concat(layerTopRightEndY, "\n      Q ").concat(layerRightX, ", ").concat(layerRightY, " ").concat(layerRightLeftStartX, ", ").concat(layerRightLeftStartY, "\n      L ").concat(layerRightLeftEndX, ", ").concat(layerRightLeftEndY, "\n      Q ").concat(layerLeftX, ", ").concat(layerLeftY, " ").concat(layerLeftTopStartX, ", ").concat(layerLeftTopStartY, "\n      Z\n    ");
+
+    // Calculate opacity - outer layers are more transparent
+    var opacity = 0.6 - i * 0.2; // Results in 0.6, 0.4, 0.2 for 3 layers
+
+    stackedTriangles.push({
+      path: layerPath,
+      opacity: opacity,
+      index: i
+    });
+  }
+  var _distributeTextToFit = distributeTextToFit(sentenceText, textContainerWidth, textContainerHeight, 120),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  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(AbsoluteFill, {
+    style: {
+      zIndex: -1
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    style: {
+      width: width,
+      height: height,
+      objectFit: "cover",
+      position: "relative"
+    },
+    src: "https://storage.googleapis.com/ai-recorder-media-assets/media/production/dynamic_triangle_background.mp4"
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, null, function () {
+    // Exit animation starts 1.5 seconds (45 frames at 30fps) before the end
+    var textExitStartFrame = hasFiniteDuration ? durationInFrames - 80 : null;
+    var textExitEndFrame = hasFiniteDuration ? durationInFrames - 60 : null;
+    var canAnimateTextExit = typeof textExitStartFrame === "number" && typeof textExitEndFrame === "number" && textExitStartFrame >= 0 && textExitEndFrame > textExitStartFrame;
+
+    // Calculate exit animation values
+    var exitOpacity = canAnimateTextExit ? interpolate(frame, [0, textExitStartFrame, textExitEndFrame], [1, 1, 0], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing["in"](Easing.cubic)
+    }) : 1;
+    var exitTranslateY = canAnimateTextExit ? interpolate(frame, [0, textExitStartFrame, textExitEndFrame], [0, 0, -fontSize], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing["in"](Easing.cubic)
+    }) : 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        paddingLeft: "100px",
+        paddingTop: "100px",
+        opacity: exitOpacity,
+        transform: "translateY(".concat(exitTranslateY, "px)"),
+        zIndex: 1
+      }
+    }, lines.map(function (line, lineIndex) {
+      // Split the line into words for individual animation
+      var words = line.split(" ");
+
+      // Calculate total words before this line for delay calculation
+      var wordsBeforeThisLine = 0;
+      for (var _i = 0; _i < lineIndex; _i++) {
+        wordsBeforeThisLine += lines[_i].split(" ").length;
+      }
+      return /*#__PURE__*/React.createElement("p", {
+        key: lineIndex,
+        style: {
+          fontFamily: fontFamily,
+          fontStyle: "italic",
+          fontSize: fontSize,
+          fontWeight: 600,
+          margin: 0,
+          color: "#ffffff",
+          lineHeight: "1",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "0.3em",
+          zIndex: 1,
+          position: "relative"
+        }
+      }, words.map(function (word, wordIndex) {
+        // Animation starts at frame 45 (1.5 seconds at 30fps)
+        var animationStartFrame = 45;
+        // Delay between words (3 frames = 0.1 seconds at 30fps)
+        var wordDelay = 3;
+        // Duration of each word animation (15 frames = 0.5 seconds at 30fps)
+        var animationDuration = 15;
+
+        // Calculate this word's global index
+        var globalWordIndex = wordsBeforeThisLine + wordIndex;
+
+        // Calculate when this specific word starts animating
+        var wordStartFrame = animationStartFrame + globalWordIndex * wordDelay;
+        var wordEndFrame = wordStartFrame + animationDuration;
+        var canAnimateWord = !hasFiniteDuration || durationInFrames > wordEndFrame;
+
+        // Calculate interpolation values
+        var opacity = canAnimateWord ? interpolate(frame, [wordStartFrame, wordEndFrame], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: Easing.out(Easing.cubic)
+        }) : 1;
+        var translateY = canAnimateWord ? interpolate(frame, [wordStartFrame, wordEndFrame], [50, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: Easing.out(Easing.cubic)
+        }) : 0;
+        return /*#__PURE__*/React.createElement("span", {
+          key: wordIndex,
+          style: {
+            opacity: opacity,
+            transform: "translateY(".concat(translateY, "%)"),
+            display: "inline-block"
+          }
+        }, word);
+      }));
+    }));
+  }()), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      clipPath: "url(#triangleClip)",
+      display: "flex",
+      justifyContent: "end",
+      alignItems: "end"
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    containerWidth: (100 - xPositionVideo) / 100 * width,
+    containerHeight: (100 - yPositionVideo) / 100 * height,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      transformOrigin: "center center",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      width: "".concat(100 - xPositionVideo, "%"),
+      height: "".concat(100 - yPositionVideo, "%"),
+      objectFit: "cover",
+      transformOrigin: "center center",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      pointerEvents: "none",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "triangleClip"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: trianglePath,
+    transform: "\n                  translate(".concat(xPosition, ", ").concat(yPosition, ")\n                  rotate(-").concat(rotation, " )\n                  translate(-").concat(width / 2, ", -").concat(height / 2, ")\n                ")
+  })), stackedTriangles.map(function (layer, index) {
+    // For each layer, create a mask that shows this layer but cuts out the previous (smaller) layer
+    var prevPath = index === 0 ? trianglePath : stackedTriangles[index - 1].path;
+    return /*#__PURE__*/React.createElement("mask", {
+      key: "mask-".concat(index),
+      id: "layerMask-".concat(index)
+    }, /*#__PURE__*/React.createElement("rect", {
+      width: width,
+      height: height,
+      fill: "black"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: layer.path,
+      fill: "white",
+      transform: "\n                      translate(".concat(xPosition, ", ").concat(yPosition, ")\n                      rotate(-").concat(rotation, ")\n                      translate(-").concat(width / 2, ", -").concat(height / 2, ")\n                    ")
+    }), /*#__PURE__*/React.createElement("path", {
+      d: prevPath,
+      fill: "black",
+      transform: "\n                      translate(".concat(xPosition, ", ").concat(yPosition, ")\n                      rotate(-").concat(rotation, ")\n                      translate(-").concat(width / 2, ", -").concat(height / 2, ")\n                    ")
+    }));
+  })), stackedTriangles.map(function (layer, index) {
+    return /*#__PURE__*/React.createElement("rect", {
+      key: "layer-".concat(index),
+      width: width,
+      height: height,
+      fill: accentColor,
+      fillOpacity: layer.opacity,
+      mask: "url(#layerMask-".concat(index, ")")
+    });
+  })), noBackgroundVideoUrl && (showVirtual || (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.facePop) || (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundDim) || (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur)) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      clipPath: "url(#triangleClip)",
+      overflow: "hidden",
+      pointerEvents: "none",
+      display: "flex",
+      justifyContent: "end",
+      alignItems: "end",
+      objectFit: "cover",
+      transformOrigin: "center center"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 0
+  })), showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    left: "".concat(xPositionVideo, "%"),
+    top: "".concat(yPositionVideo, "%"),
+    width: "".concat(100 - xPositionVideo, "%"),
+    height: "".concat(100 - yPositionVideo, "%"),
+    zIndex: 0,
+    zoom: 1.02
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    containerWidth: (100 - xPositionVideo) / 100 * width,
+    containerHeight: (100 - yPositionVideo) / 100 * height,
+    style: {
+      zIndex: 5,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      transformOrigin: "center center",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      zIndex: 5,
+      width: "".concat(100 - xPositionVideo, "%"),
+      height: "".concat(100 - yPositionVideo, "%"),
+      objectFit: "cover",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 14
+    }
+  }, children)));
+};