@zync/zync-screnplay-player 0.1.187

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionWordBoom.js

@@ -0,0 +1,88 @@
+import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/TitanOne";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme";
+import { getBrighterColor } from "../../../helpers/hexToRgb";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var CaptionWordBoom = function CaptionWordBoom(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 55,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 55,
+        bottom: 110
+      },
+      square: {
+        fontSize: 55,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var containerWidth = width * 0.8;
+  var frame = useCurrentFrame();
+  var brighterColor = getBrighterColor(primaryColor, accentColor);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: fontSize / 1.75,
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textWrap: "nowrap",
+        lineHeight: 1,
+        fontWeight: 400,
+        color: "#fff"
+      }
+    }, transcript.text.split(" ").map(function (word, wordIndex) {
+      var _transcript$punctuati, _transcript$punctuati2;
+      var isPunctuated = frame >= Number(((_transcript$punctuati = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.start) || 0) && Number(frame <= ((_transcript$punctuati2 = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
+      return /*#__PURE__*/React.createElement("span", {
+        key: wordIndex,
+        style: {
+          color: isPunctuated ? color || accentColor : "white",
+          transform: "scaleX(".concat(isPunctuated ? 1.15 : 1, ") scaleY(").concat(isPunctuated ? 1.3 : 1, ")"),
+          transition: "transform 0.2s",
+          textShadow: "0px 0px 4px #000000, 0px 0px 4px #000000, 0px 0px 4px #000000, 0px 0px 10px #000000, 0px 0px 10px #000000"
+        }
+      }, word);
+    })));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionWordBubble.js

@@ -0,0 +1,91 @@
+import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme";
+import { getBrighterColor } from "../../../helpers/hexToRgb";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var CaptionWordBubble = function CaptionWordBubble(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 60,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 60,
+        bottom: 110
+      },
+      square: {
+        fontSize: 60,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var containerWidth = width * 0.8;
+  var frame = useCurrentFrame();
+  var brighterColor = getBrighterColor(primaryColor, accentColor);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        gap: textFontSize / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textWrap: "nowrap",
+        lineHeight: 1,
+        fontWeight: 900,
+        color: "#fff"
+      }
+    }, transcript.text.split(" ").map(function (word, wordIndex) {
+      var _transcript$punctuati, _transcript$punctuati2;
+      var isPunctuated = frame >= Number(((_transcript$punctuati = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.start) || 0) && Number(frame <= ((_transcript$punctuati2 = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
+      return /*#__PURE__*/React.createElement("span", {
+        key: wordIndex,
+        style: {
+          borderRadius: "10px",
+          padding: "0.5rem 0.75rem 0.5rem 0.75rem",
+          color: isPunctuated ? color || accentColor : "white",
+          background: isPunctuated ? accentContrast : "transparent",
+          transform: "scaleX(".concat(isPunctuated ? 1.15 : 1, ") scaleY(").concat(isPunctuated ? 1.3 : 1, ")"),
+          transition: "transform 0.2s",
+          textShadow: isPunctuated ? "" : "-3px 0 black, 0 3px black, 3px 0 black, 0 -3px black"
+        }
+      }, word);
+    })));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionWordPopup.js

@@ -0,0 +1,118 @@
+import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { loadFont as loadFont2 } from "@remotion/google-fonts/CherryBombOne";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme";
+import { getBrighterColor } from "../../../helpers/hexToRgb";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var _loadFont2 = loadFont2(),
+  fontFamilyBubble = _loadFont2.fontFamily;
+export var CaptionWordPopup = function CaptionWordPopup(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 60,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 60,
+        bottom: 110
+      },
+      square: {
+        fontSize: 60,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var containerWidth = width * 0.8;
+  var frame = useCurrentFrame();
+  var brighterColor = getBrighterColor(primaryColor, accentColor);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        gap: textFontSize / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textWrap: "nowrap",
+        lineHeight: 1,
+        fontWeight: 900,
+        color: "#fff"
+      }
+    }, transcript.text.split(" ").map(function (word, wordIndex) {
+      var _transcript$punctuati, _transcript$punctuati2;
+      var isPunctuated = frame >= Number(((_transcript$punctuati = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.start) || 0) && Number(frame <= ((_transcript$punctuati2 = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
+      return /*#__PURE__*/React.createElement("span", {
+        key: wordIndex,
+        style: {
+          position: "relative",
+          borderRadius: "10px",
+          color: isPunctuated ? color || accentColor : "white"
+        }
+      }, /*#__PURE__*/React.createElement("span", null, word.split("").map(function (_char, wordIndex) {
+        return /*#__PURE__*/React.createElement("span", {
+          style: {
+            position: "relative"
+          }
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            top: 0,
+            left: 0,
+            transition: "color 0.2s",
+            color: isPunctuated ? "white" : color || accentColor,
+            position: "absolute",
+            zIndex: -1,
+            transform: isPunctuated ? "scale(2.00)" : "scale(1.15)",
+            transformOrigin: isPunctuated ? "center center" : "top center",
+            fontFamily: isPunctuated ? fontFamilyBubble : fontFamily
+          }
+        }, _char), /*#__PURE__*/React.createElement("span", {
+          style: {
+            position: "absolute",
+            //width: "100%",
+            //height: "100%",
+            zIndex: -1,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)"
+          }
+        }), _char);
+      })));
+    })));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/DefaultCaption.js

@@ -0,0 +1,62 @@
+import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var DefaultCaption = function DefaultCaption(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 75,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 60,
+        bottom: 110
+      },
+      square: {
+        fontSize: 75,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var containerWidth = width * 0.8;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        color: color || "white",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textShadow: "3px 3px 3px #000",
+        fontWeight: 700,
+        textWrap: "nowrap"
+      }
+    }, transcript.text));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag/handoffNametagConfig.js

@@ -0,0 +1,59 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
+  return {
+    portrait: {
+      targetImageHeights: [130, 230, 200, 170, 200, 170, 170, 170, 170, 170],
+      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [770, 160, 160, 160, 110, 0, 0, 0, 0, 0]), "second-right", [770, 160, 160, 160, 110, 0, 0, 0, 0, 0]),
+      opacity: [0.1, 0.5, 0.7, 1, 1, 1, 1, 1, 1, 0],
+      targetImageWidths: [60, 60, 170, 170, 170, 170, 170, 170, 170, 170],
+      rotation: [180, 180, 180, 360, 360, 360, 360, 360, 360, 360],
+      targetTextOpacity: [1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+      textContainerWidth: width - 15 - 170 - 20,
+      textContainerHeight: 170,
+      lineJustifyContent: _defineProperty(_defineProperty({}, "first-left", "flex-start"), "second-right", "flex-end"),
+      fullNameMaxFontSize: 42,
+      titleMaxFontSize: 30,
+      targetContainerTops: _defineProperty(_defineProperty({}, "first-left", [700, 700, 700, 700, 700, 700, 700, 700, 700, 700]), "second-right", [1050, 1050, 1050, 1050, 1050, 1050, 1050, 1050, 1050, 1050]),
+      containerLeft: _defineProperty(_defineProperty({}, "first-left", 70), "second-right", -120),
+      containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
+      containerAlignItems: _defineProperty(_defineProperty({}, "first-left", "center"), "second-right", "center")
+    },
+    landscape: {
+      targetImageHeights: [130, 230, 200, 170, 200, 170, 170, 170],
+      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [-770, -160, -160, -160, -110, 0, 0, 0]), "second-right", [-770, -160, -160, -160, -110, 0, 0, 0]),
+      opacity: [0.1, 0.5, 0.7, 1, 1, 1, 1, 0],
+      targetImageWidths: [60, 60, 170, 170, 170, 170, 170, 170],
+      rotation: [180, 180, 180, 360, 360, 360, 360, 360],
+      targetTextOpacity: [1, 1, 1, 1, 1, 1, 1, 0],
+      textContainerWidth: width / 2 - 15 - 170 - 20,
+      textContainerHeight: 170,
+      lineJustifyContent: _defineProperty(_defineProperty({}, "first-left", "flex-start"), "second-right", "flex-end"),
+      fullNameMaxFontSize: 42,
+      titleMaxFontSize: 30,
+      targetContainerTops: _defineProperty(_defineProperty({}, "first-left", [600, 600, 600, 600, 600, 600, 600, 600]), "second-right", [600, 600, 600, 600, 600, 600, 600, 600]),
+      containerLeft: _defineProperty(_defineProperty({}, "first-left", 75), "second-right", -75),
+      containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
+      containerAlignItems: _defineProperty(_defineProperty({}, "first-left", "center"), "second-right", "center")
+    },
+    square: {
+      targetImageHeights: [130, 180, 150, 120, 150, 120, 120, 120],
+      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [-770, -160, -160, -160, -110, 0, 0, 0]), "second-right", [-770, -160, -160, -160, -110, 0, 0, 0]),
+      opacity: [0.1, 0.5, 0.7, 1, 1, 1, 1, 0],
+      targetImageWidths: [60, 60, 120, 120, 120, 120, 120, 120],
+      rotation: [180, 180, 180, 360, 360, 360, 360, 360],
+      targetTextOpacity: [1, 1, 1, 1, 1, 1, 1, 0],
+      textContainerWidth: width / 2 - 15 - 170 - 20 - 20,
+      textContainerHeight: 170,
+      lineJustifyContent: _defineProperty(_defineProperty({}, "first-left", "flex-start"), "second-right", "flex-end"),
+      fullNameMaxFontSize: 36,
+      titleMaxFontSize: 24,
+      targetContainerTops: _defineProperty(_defineProperty({}, "first-left", [750, 750, 750, 750, 750, 750, 750, 750]), "second-right", [750, 750, 750, 750, 750, 750, 750, 750]),
+      containerLeft: _defineProperty(_defineProperty({}, "first-left", 50), "second-right", 580),
+      containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
+      containerAlignItems: _defineProperty(_defineProperty({}, "first-left", "center"), "second-right", "center")
+    }
+  };
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag.js

@@ -0,0 +1,173 @@
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Roboto";
+import { calculateInputRangeInPhases, DEFAULT_TIME_INTERPOLATE_OPTIONS, useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { getHandoffNametagConfig } from "./HandoffNametag/handoffNametagConfig.js";
+import React from "react";
+import PausableImg from "../../../components/utils/PausableImg";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var HandoffNametag = function HandoffNametag(_ref) {
+  var pictureUrl = _ref.pictureUrl,
+    fullName = _ref.fullName,
+    title = _ref.title,
+    alignment = _ref.alignment,
+    duration = _ref.duration;
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps,
+    width = _useVideoConfig.width;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast;
+  var frame = useCurrentFrame();
+  var _useOrientationBased = useOrientationBased(getHandoffNametagConfig(width)),
+    targetImageHeights = _useOrientationBased.targetImageHeights,
+    opacity = _useOrientationBased.opacity,
+    targetImageWidths = _useOrientationBased.targetImageWidths,
+    rotation = _useOrientationBased.rotation,
+    textContainerWidth = _useOrientationBased.textContainerWidth,
+    textContainerHeight = _useOrientationBased.textContainerHeight,
+    fullNameMaxFontSize = _useOrientationBased.fullNameMaxFontSize,
+    titleMaxFontSize = _useOrientationBased.titleMaxFontSize,
+    targetImageTranslateY = _useOrientationBased.targetImageTranslateY,
+    containerLeft = _useOrientationBased.containerLeft,
+    targetContainerTops = _useOrientationBased.targetContainerTops,
+    containerFlexDirection = _useOrientationBased.containerFlexDirection,
+    orientation = _useOrientationBased.orientation,
+    containerAlignItems = _useOrientationBased.containerAlignItems,
+    lineJustifyContent = _useOrientationBased.lineJustifyContent;
+  var isPortrait = orientation === "portrait";
+  var isSquare = orientation === "square";
+  var phaseDurationsInSeconds = isPortrait ? [0.1, 0.05, 0.05, 0.05, 0.05, 3.75, 0.4, duration - 3.75, 0.25] : [0.1, 0.05, 0.05, 0.05, 0.05, duration, 0.25];
+  var inputRangeInSeconds = calculateInputRangeInPhases(phaseDurationsInSeconds, 0);
+  var imageHeight = useTimeInterpolate(inputRangeInSeconds, targetImageHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var imageTranslateY = useTimeInterpolate(inputRangeInSeconds, targetImageTranslateY[alignment], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var imageOpacity = useTimeInterpolate(inputRangeInSeconds, opacity, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var imageWidths = useTimeInterpolate(inputRangeInSeconds, targetImageWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var imageRotation = useTimeInterpolate(inputRangeInSeconds, rotation, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var containerTop = useTimeInterpolate(inputRangeInSeconds, targetContainerTops[alignment], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var maxTimeInFrames = 0.2 * fps;
+  var splitFullName = fullName.split(" ");
+  var fullNameDelayBetweenWords = maxTimeInFrames / splitFullName.length;
+  var _distributeTextToFit = distributeTextToFit(fullName, textContainerWidth, textContainerHeight / 2, fullNameMaxFontSize),
+    fullNameLines = _distributeTextToFit.lines,
+    fullNameFontSize = _distributeTextToFit.fontSize;
+  var splitTitle = title !== null && title !== void 0 && title.length ? title.split(" ") : null;
+  var titleDelayBetweenWords = splitTitle ? maxTimeInFrames / splitTitle.length : 0;
+  var _distributeTextToFit2 = distributeTextToFit(title || "", textContainerWidth, textContainerHeight / 2, titleMaxFontSize),
+    titleLines = _distributeTextToFit2.lines,
+    titleFontSize = _distributeTextToFit2.fontSize;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      flexDirection: containerFlexDirection[alignment],
+      left: containerLeft[alignment],
+      top: containerTop,
+      height: "min-content",
+      alignItems: containerAlignItems[alignment],
+      gap: isSquare ? "5px" : "20px",
+      opacity: imageOpacity,
+      width: isSquare ? "min-content" : "100%"
+    }
+  }, pictureUrl && /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: imageHeight,
+      width: imageWidths,
+      backgroundColor: primaryColor,
+      borderRadius: "9999px",
+      opacity: imageOpacity,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      maxHeight: imageHeight,
+      maxWidth: imageWidths,
+      overflow: "hidden",
+      border: "10px solid ".concat(primaryColor),
+      transform: "translateY(".concat(imageTranslateY, "px)")
+    }
+  }, frame >= 4 && /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 62000,
+    src: pictureUrl,
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      transform: "rotate(".concat(imageRotation, "deg)")
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: fontFamily,
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "".concat(fullNameFontSize, "px"),
+      fontWeight: 900,
+      color: primaryContrast,
+      display: "flex",
+      textTransform: "uppercase",
+      flexDirection: "column"
+    }
+  }, fullNameLines.map(function (line) {
+    var index = 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: "10px",
+        justifyContent: lineJustifyContent[alignment]
+      }
+    }, line.split(" ").map(function (word) {
+      var delay = Math.min(index * fullNameDelayBetweenWords, maxTimeInFrames);
+      index++;
+      var opacity = interpolate(frame - delay, [0, 15], [0, 1], {
+        easing: Easing["in"](Easing.ease),
+        extrapolateRight: "clamp"
+      });
+      var translateY = interpolate(frame - delay, [0, 15], [-50, 0], {
+        easing: Easing["in"](Easing.ease),
+        extrapolateRight: "clamp"
+      });
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          opacity: opacity,
+          transform: "translateY(".concat(translateY, "px)")
+        }
+      }, word);
+    }));
+  })), splitTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "".concat(titleFontSize, "px"),
+      fontWeight: 900,
+      color: primaryColor,
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, titleLines.map(function (line) {
+    var index = 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: "10px",
+        justifyContent: lineJustifyContent[alignment]
+      }
+    }, line.split(" ").map(function (word) {
+      var delay = Math.min(index * titleDelayBetweenWords, maxTimeInFrames);
+      var opacity = interpolate(frame - delay, [0, 15], [0, 1], {
+        easing: Easing["in"](Easing.ease),
+        extrapolateRight: "clamp"
+      });
+      var translateY = interpolate(frame - delay, [0, 15], [50, 0], {
+        easing: Easing["in"](Easing.ease),
+        extrapolateRight: "clamp"
+      });
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          opacity: opacity,
+          transform: "translateY(".concat(translateY, "px)")
+        }
+      }, word);
+    }));
+  }))));
+};