@zync/zync-screnplay-player 0.1.187

package/dist/screenplay/RemotionRenderer/theme/themes/pushpull/PushPullTitle.js

@@ -0,0 +1,98 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { AbsoluteFill, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { hexToRgbHtml } from "../../../helpers/hexToRgb.js";
+import { HangFromTop, PushUpAndSlide, RotateGrow, SlideAndPushByGrow } from "./designs/title";
+import { CameraMotionBlur } from "@remotion/motion-blur";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var effects = [PushUpAndSlide, SlideAndPushByGrow, RotateGrow, HangFromTop, PushUpAndSlide, SlideAndPushByGrow, RotateGrow, HangFromTop, PushUpAndSlide, SlideAndPushByGrow, RotateGrow, HangFromTop];
+var effectsTimings = [[0, 0.25, 0.75, 0.9], [0.7, 0.9, 1.25, 1.5], [1.25, 1.5], [2, 4.5], [2.5, 2.75, 3.25, 3.4], [3.2, 3.4, 3.75, 4.0], [3.75, 4.0], [4.0, 7.0], [5, 5.25, 5.75, 5.9], [5.7, 5.9, 6.35, 6.6], [6.25, 6.5], [6.0, 8.5]];
+export var PushPullTitleEffect = function PushPullTitleEffect(_ref) {
+  var text = _ref.text;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        top: 125,
+        right: 140,
+        width: 900,
+        maxFontSize: 200
+      },
+      landscape: {
+        top: 75,
+        right: 75,
+        width: 1550,
+        maxFontSize: 200
+      },
+      square: {
+        top: 75,
+        right: 75,
+        width: 700,
+        maxFontSize: 200
+      }
+    }),
+    top = _useOrientationBased.top,
+    right = _useOrientationBased.right,
+    width = _useOrientationBased.width,
+    maxFontSize = _useOrientationBased.maxFontSize;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height;
+  var _distributeTextToFit = distributeTextToFit(text, width, height, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var _useTheme = useTheme(),
+    primaryContrast = _useTheme.primaryContrast,
+    accentContrast = _useTheme.accentContrast;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "grid",
+      placeContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, lines.map(function (line, index) {
+    var Effect = effects[index];
+    var _effectsTimings$index = _slicedToArray(effectsTimings[index], 4),
+      from1 = _effectsTimings$index[0],
+      to1 = _effectsTimings$index[1],
+      from2 = _effectsTimings$index[2],
+      to2 = _effectsTimings$index[3];
+    return /*#__PURE__*/React.createElement(Effect, {
+      key: index,
+      from1: from1,
+      to1: to1,
+      from2: from2,
+      to2: to2
+    }, /*#__PURE__*/React.createElement("h1", {
+      key: index,
+      style: {
+        fontSize: fontSize,
+        fontWeight: 900,
+        color: primaryContrast,
+        textShadow: "4px 4px 0px ".concat(hexToRgbHtml(accentContrast, 0.5)),
+        fontFamily: fontFamily,
+        padding: 0,
+        margin: 0,
+        lineHeight: "".concat(fontSize * 2.75 / 4, "px"),
+        textWrap: "nowrap",
+        textTransform: "uppercase",
+        textAlign: "center"
+      }
+    }, line));
+  })));
+};
+export var PushPullTitle = function PushPullTitle(_ref2) {
+  var text = _ref2.text;
+  return /*#__PURE__*/React.createElement(CameraMotionBlur, {
+    shutterAngle: 180,
+    samples: 5
+  }, /*#__PURE__*/React.createElement(PushPullTitleEffect, {
+    text: text
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/pushpull/designs/sentence.js

@@ -0,0 +1,92 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+import React from "react";
+import { AbsoluteFill, Easing, useVideoConfig } from "remotion";
+import { useTimeInterpolate } from "../../../../hooks/useTimeInterpolate.js";
+export var SlideFromTop = function SlideFromTop(_ref) {
+  var children = _ref.children,
+    from = _ref.from,
+    to = _ref.to;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height;
+  var translateY = useTimeInterpolate([from, to], [-height * 2, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translateY(".concat(translateY, "px)")
+    })
+  });
+};
+export var SlideFromRight = function SlideFromRight(_ref2) {
+  var children = _ref2.children,
+    from = _ref2.from,
+    to = _ref2.to;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width;
+  var translateX = useTimeInterpolate([from, to], [width * 2, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translateX(".concat(translateX, "px)")
+    })
+  });
+};
+export var SlideFromLeft = function SlideFromLeft(_ref3) {
+  var children = _ref3.children,
+    from = _ref3.from,
+    to = _ref3.to;
+  var _useVideoConfig3 = useVideoConfig(),
+    width = _useVideoConfig3.width;
+  var translateX = useTimeInterpolate([from, to], [-width * 2, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translateX(".concat(translateX, "px)")
+    })
+  });
+};
+export var SlideFromBottom = function SlideFromBottom(_ref4) {
+  var children = _ref4.children,
+    from = _ref4.from,
+    to = _ref4.to;
+  var _useVideoConfig4 = useVideoConfig(),
+    height = _useVideoConfig4.height;
+  var translateY = useTimeInterpolate([from, to], [height * 2, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translateY(".concat(translateY, "px)")
+    })
+  });
+};
+export var PushToTop = function PushToTop(_ref5) {
+  var children = _ref5.children,
+    from = _ref5.from,
+    to = _ref5.to;
+  var translateY = useTimeInterpolate([from, to], [200, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translateY(".concat(translateY, "px)")
+    })
+  });
+};

package/dist/screenplay/RemotionRenderer/theme/themes/pushpull/designs/title.js

@@ -0,0 +1,119 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+import { Easing, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { useTimeInterpolate } from "../../../../hooks/useTimeInterpolate.js";
+import React from "react";
+var Y_OFFSET = 115;
+var LINE_GROW_OFFSET = Y_OFFSET / 2;
+export var PushUpAndSlide = function PushUpAndSlide(_ref) {
+  var children = _ref.children,
+    from1 = _ref.from1,
+    to1 = _ref.to1,
+    from2 = _ref.from2,
+    to2 = _ref.to2;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var translateX = spring({
+    frame: frame,
+    fps: fps,
+    from: width * 2,
+    to: 0,
+    delay: from1 * fps,
+    duration: (to1 - from1) * fps,
+    config: {
+      stiffness: 200,
+      damping: 20,
+      mass: 0.75
+    }
+  });
+  var translateY = useTimeInterpolate([from2, to2], [Y_OFFSET, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translate(".concat(translateX, "px, ").concat(translateY, "px)")
+    })
+  });
+};
+export var SlideAndPushByGrow = function SlideAndPushByGrow(_ref2) {
+  var children = _ref2.children,
+    from1 = _ref2.from1,
+    to1 = _ref2.to1,
+    from2 = _ref2.from2,
+    to2 = _ref2.to2;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width,
+    height = _useVideoConfig2.height,
+    fps = _useVideoConfig2.fps;
+  var frame = useCurrentFrame();
+  var translateYIn = useTimeInterpolate([from1, to1], [height * 2, LINE_GROW_OFFSET], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var translateYGrow = useTimeInterpolate([from2, to2], [LINE_GROW_OFFSET, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "translateY( ".concat(translateYIn !== LINE_GROW_OFFSET ? translateYIn : translateYGrow, "px)")
+    })
+  });
+};
+export var RotateGrow = function RotateGrow(_ref3) {
+  var children = _ref3.children,
+    from1 = _ref3.from1,
+    to1 = _ref3.to1;
+  var rotateX = useTimeInterpolate([from1, to1], [90, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      transform: "rotateX(".concat(rotateX, "deg)")
+    })
+  });
+};
+export var HangFromTop = function HangFromTop(_ref4) {
+  var children = _ref4.children,
+    from1 = _ref4.from1,
+    to1 = _ref4.to1;
+  var frame = useCurrentFrame();
+  var _useVideoConfig3 = useVideoConfig(),
+    fps = _useVideoConfig3.fps;
+  var opacity = useTimeInterpolate([from1, from1 + 1 / 24], [0, 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+  var rotateX = spring({
+    frame: frame,
+    fps: fps,
+    from: 135,
+    to: 0,
+    delay: from1 * fps,
+    durationInFrames: to1 * fps - from1 * fps,
+    config: {
+      stiffness: 250,
+      damping: 30,
+      mass: 15
+    }
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    style: _objectSpread(_objectSpread({}, children.props.style), {}, {
+      opacity: opacity,
+      transformOrigin: "top center",
+      transform: "rotateX(".concat(rotateX, "deg)")
+    })
+  });
+};

package/dist/screenplay/RemotionRenderer/theme/themes/sports/Nametag.js

@@ -0,0 +1,122 @@
+import React from "react";
+import { AbsoluteFill, Easing } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { LottieAnimation } from "../../../components/effects/LottieAnimation";
+import { convertToSeconds } from "../../../helpers/convertToSeconds.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var SportsNametag = function SportsNametag(_ref) {
+  var name = _ref.name,
+    title = _ref.title,
+    themeSettings = _ref.themeSettings;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        containerBottomOffset: -75,
+        nameStyles: {
+          bottom: 185,
+          left: 140,
+          fontSize: 55
+        },
+        titleStyles: {
+          bottom: 130,
+          left: 140,
+          fontSize: 42
+        },
+        lottieAnimationPath: "https://storage.googleapis.com/zync-media/assets/lottie/sports/nametag/landscape.json"
+      },
+      portrait: {
+        containerBottomOffset: -310,
+        nameStyles: {
+          bottom: 175,
+          left: 100,
+          fontSize: 50
+        },
+        titleStyles: {
+          bottom: 135,
+          left: 100,
+          fontSize: 30
+        },
+        lottieAnimationPath: "https://storage.googleapis.com/zync-media/assets/lottie/sports/nametag/portrait.json"
+      },
+      square: {
+        containerBottomOffset: -120,
+        nameStyles: {
+          bottom: 170,
+          left: 100,
+          fontSize: 50
+        },
+        titleStyles: {
+          bottom: 132,
+          left: 100,
+          fontSize: 32
+        },
+        lottieAnimationPath: "https://storage.googleapis.com/zync-media/assets/lottie/sports/nametag/square.json"
+      }
+    }),
+    containerBottomOffset = _useOrientationBased.containerBottomOffset,
+    lottieAnimationPath = _useOrientationBased.lottieAnimationPath,
+    nameStyles = _useOrientationBased.nameStyles,
+    titleStyles = _useOrientationBased.titleStyles;
+  var nameAnimationStart = convertToSeconds(1, 4);
+  var nameAnimationEnd = convertToSeconds(1, 14);
+  var nameOpacity = useTimeInterpolate([nameAnimationStart, nameAnimationEnd], [0, 1]);
+  var nameOffset = useTimeInterpolate([nameAnimationStart, convertToSeconds(1, 9), nameAnimationEnd], [100, -15, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.ease)
+  });
+  var titleAnimationStart = convertToSeconds(1, 20);
+  var titleAnimationEnd = convertToSeconds(2, 8);
+  var titleOpacity = useTimeInterpolate([titleAnimationStart, titleAnimationEnd], [0, 1]);
+  var titleOffset = useTimeInterpolate([titleAnimationStart, convertToSeconds(2, 4), titleAnimationEnd], [-50, 10, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.ease)
+  });
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    accentContrast = _useTheme.accentContrast,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var titleBackgroundColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryColor) || accentColor;
+  var nameBackgroundAndTitleTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || primaryColor;
+  var titleTextColor = getContrastColor(nameBackgroundAndTitleTextColor);
+  var nameTextColor = getContrastColor(titleBackgroundColor);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      transform: "translateY(".concat(containerBottomOffset, "px)"),
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement(LottieAnimation, {
+    animationPath: lottieAnimationPath,
+    primaryColor: nameBackgroundAndTitleTextColor,
+    accentColor: titleBackgroundColor
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: nameStyles.bottom,
+      left: nameStyles.left,
+      fontSize: nameStyles.fontSize,
+      color: nameTextColor,
+      fontFamily: fontFamily,
+      fontStyle: "italic",
+      opacity: nameOpacity,
+      transform: "translateX(".concat(nameOffset, "%)"),
+      fontWeight: 800
+    }
+  }, name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: titleStyles.bottom,
+      left: titleStyles.left,
+      fontSize: titleStyles.fontSize,
+      color: titleTextColor,
+      fontFamily: fontFamily,
+      opacity: titleOpacity,
+      transform: "translateX(".concat(titleOffset, "%)"),
+      fontWeight: 400
+    }
+  }, title));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/sports/SportsCaption.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { AbsoluteFill, Easing, interpolate, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var FlyInOutText = function FlyInOutText(_ref) {
+  var transcript = _ref.transcript,
+    width = _ref.width,
+    fontSize = _ref.fontSize,
+    bottom = _ref.bottom;
+  var animationDuration = 5;
+  var frame = useCurrentFrame();
+  var flyInAnimationStart = 0;
+  var flyInAnimationEnd = animationDuration;
+  var flyInPosition = interpolate(frame, [flyInAnimationStart, flyInAnimationEnd], [-70, -50], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic)
+  });
+  var flyOutAnimationStart = Math.max(flyInAnimationEnd + 1, transcript.durationInFrames - animationDuration);
+  var flyOutAnimationEnd = Math.max(flyOutAnimationStart + 1, transcript.durationInFrames);
+  var flyOutPosition = interpolate(frame, [flyOutAnimationStart, flyOutAnimationEnd], [-50, -30], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.cubic)
+  });
+  var textPosition = frame < transcript.durationInFrames / 2 ? flyInPosition : flyOutPosition;
+  var textOpacity = interpolate(frame, [flyInAnimationStart, flyInAnimationEnd, flyOutAnimationStart, flyOutAnimationEnd], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return /*#__PURE__*/React.createElement("p", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: fontSize * 1.6,
+      position: "absolute",
+      bottom: bottom,
+      width: width,
+      margin: "0 auto",
+      left: "50%",
+      transform: "translateX(".concat(textPosition, "%)"),
+      opacity: textOpacity,
+      color: "white",
+      fontSize: fontSize,
+      textAlign: "center",
+      fontFamily: fontFamily,
+      textShadow: "2px 2px 1px #000",
+      fontWeight: 500,
+      textWrap: "nowrap",
+      letterSpacing: "2.5px"
+    }
+  }, transcript.text);
+};
+export var SportsCaption = function SportsCaption(_ref2) {
+  var transcripts = _ref2.transcripts;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 60,
+        bottom: 110
+      },
+      landscape: {
+        fontSize: 60,
+        bottom: 110
+      },
+      square: {
+        fontSize: 60,
+        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),
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement(FlyInOutText, {
+      transcript: transcript,
+      width: containerWidth,
+      fontSize: textFontSize,
+      bottom: bottom
+    }));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/sports/SportsSentence.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { CHROME_PADDING } from "../../../config.js";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { AnimatedLine } from "./shared";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var SportsSentence = function SportsSentence(_ref) {
+  var sentence = _ref.sentence;
+  var maxWidth = 800;
+  var maxHeight = 600;
+  var _distributeTextToFit = distributeTextToFit(sentence, maxWidth - 100, maxHeight - 100, 110),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        alignItems: "end",
+        justifyContent: "start",
+        paddingRight: CHROME_PADDING * 3,
+        padding: CHROME_PADDING * 2
+      },
+      portrait: {
+        alignItems: "end",
+        justifyContent: "start",
+        paddingRight: CHROME_PADDING * 3 + 60,
+        padding: CHROME_PADDING * 2 + 50
+      },
+      square: {
+        alignItems: "end",
+        justifyContent: "start",
+        paddingRight: CHROME_PADDING * 3,
+        padding: CHROME_PADDING * 2
+      }
+    }),
+    alignItems = _useOrientationBased.alignItems,
+    justifyContent = _useOrientationBased.justifyContent,
+    padding = _useOrientationBased.padding,
+    paddingRight = _useOrientationBased.paddingRight;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "flex",
+      alignItems: alignItems,
+      justifyContent: justifyContent,
+      padding: padding,
+      paddingRight: paddingRight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: maxWidth,
+      height: maxHeight,
+      borderRadius: "30px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "end",
+      justifyContent: "start",
+      gap: 20
+    }
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement(AnimatedLine, {
+      key: index,
+      index: index,
+      text: line,
+      fontSize: fontSize,
+      delayInSeconds: 0.15 * index
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: fontSize,
+        fontWeight: 800,
+        textTransform: "initial",
+        fontFamily: fontFamily
+      }
+    }, line));
+  })));
+};