@zync/zync-screnplay-player 0.1.187

package/dist/screenplay/RemotionRenderer/main/lib/layouts/TextWithVideoLayout.js

@@ -0,0 +1,52 @@
+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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import { Layout } from "./DefaultLayout.js";
+import { getVideoOrientation } from "../../../helpers/getVideoOrientation.js";
+export var variants = {
+  LEFT_TO_RIGHT: "LEFT_TO_RIGHT",
+  RIGHT_TO_LEFT: "RIGHT_TO_LEFT"
+};
+export var TextWithVideoLayout = /*#__PURE__*/function (_Layout) {
+  function TextWithVideoLayout(props) {
+    var _this;
+    _classCallCheck(this, TextWithVideoLayout);
+    _this = _callSuper(this, TextWithVideoLayout, [props]);
+    _this.getVideoProps(props);
+    _this.getLayoutVariant();
+    return _this;
+  }
+  _inherits(TextWithVideoLayout, _Layout);
+  return _createClass(TextWithVideoLayout, [{
+    key: "getLayoutVariant",
+    value: function getLayoutVariant() {
+      if (this.props.variant) {
+        return;
+      }
+      this.props.variant = [variants.LEFT_TO_RIGHT, variants.RIGHT_TO_LEFT][process.env.REACT_APP_DOMAIN ? 0 : Math.floor(Math.random() * 2)];
+    }
+  }, {
+    key: "getVideoProps",
+    value: function getVideoProps(props) {
+      var _props$data$sourceVid, _props$data$sourceVid2, _props$data$sourceVid3, _props$data;
+      var sourceVideoOrientation = getVideoOrientation((_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.aspectRatio);
+      this.props = {
+        videoUrl: (_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.videoUrl,
+        sourceVideoOrientation: sourceVideoOrientation,
+        videoZoom: ((_props$data$sourceVid3 = props.data.sourceVideo) === null || _props$data$sourceVid3 === void 0 ? void 0 : _props$data$sourceVid3.zoom) || 1,
+        text: props.data.text,
+        disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds
+      };
+    }
+  }]);
+}(Layout);

package/dist/screenplay/RemotionRenderer/main/screenplaySchema.js

@@ -0,0 +1,92 @@
+import z from "zod";
+var hexColorRegex = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
+
+// Supported values
+var themes = ["default"];
+var orientations = ["landscape", "portrait", "square"];
+var segmentTypes = ["segment", "effect", "caption", "audio"];
+var fps = [30, 60];
+var effectSchema = z.object({
+  type: z.string(),
+  data: {
+    sourceVideo: z.object({
+      videoUrl: z.string().url(),
+      start: z.number()
+    }).optional(),
+    offset: z.number(),
+    duration: z.number()
+  }
+});
+export var screenplaySchema = z.object({
+  input: z.object({
+    backgroundColor: z.string().regex(hexColorRegex),
+    primaryColor: z.string().regex(hexColorRegex),
+    accentColor: z.string().regex(hexColorRegex),
+    theme: z["enum"](themes)
+  }),
+  tracks: z.array(z.union([z.object({
+    type: "segments"
+  }), z.object({
+    type: "segmentx"
+  })])),
+  /* z.object({
+      type: "segment",
+      segments: z.array(
+        z.object({
+          layout: z.any(),
+          effects: z.array(effectSchema),
+        })
+      ),
+    })*/
+  /*z.object({
+        type: "effect",
+        segments: z.array(effectSchema),
+      }),
+      z.object({
+        type: z.enum(segmentTypes),
+        segments: z.array([
+          {
+            type: "caption",
+            segments: z.array(
+              z.object({
+                type: "caption_simple",
+                data: {
+                  transcript_text: z.array(
+                    z.object({
+                      text: z.string(),
+                      offset: z.number(),
+                      duration: z.number(),
+                    })
+                  ),
+                  duration: z.number().optional(),
+                  offset: z.number().optional(),
+                },
+              })
+            ),
+          },
+        ]),
+      }),
+      z.object({
+        type: "audio",
+        segments: z.array([
+          z.object({
+            type: z.string(),
+            data: {
+              sourceAudio: {
+                url: z.string().url(),
+                volume: z.number().min(0).max(1),
+                start: z.number(),
+              },
+              offset: z.number(),
+            },
+          }),
+        ]),
+      }),*/
+  output: z.object({
+    orientation: z["enum"](orientations),
+    fps: z.number().step(30).min(30).max(60),
+    callbackUrl: z.string().url().optional(),
+    callbackMetadata: z.any().optional()
+  })
+});
+var validate = function validate() {};

package/dist/screenplay/RemotionRenderer/registeredComponents.js

@@ -0,0 +1,91 @@
+import { SimpleFrame } from "./components/layouts/SimpleFrame";
+import { TextWithVideo } from "./components/layouts/TextWithVideo";
+import { BrollFullscreen } from "./components/effects/BrollFullscreen";
+import { PhraseRainbowEffect } from "./components/effects/PhraseRainbowEffect";
+import { Sentence } from "./components/effects/Sentence";
+import { CaptionSimple } from "./components/captions/CaptionSimple";
+import { Soundtrack } from "./tracks/Soundtrack";
+import { Nametag } from "./components/effects/Nametag";
+import { Title } from "./components/effects/Title";
+import { Watermark } from "./tracks/Watermark";
+import { Handoff } from "./components/layouts/Handoff";
+import { HandoffNametag } from "./components/effects/HandoffNametag";
+import { MotionStill } from "./components/layouts/MotionStill";
+import { Keyword } from "./components/layouts/Keyword";
+import { CaptionColor } from "./theme/themes/default/CaptionColor";
+import { CaptionColorInverse } from "./theme/themes/default/CaptionColorInverse";
+import { CaptionColorShadow } from "./theme/themes/default/CaptionColorShadow";
+import { CaptionPunctuated } from "./theme/themes/default/CaptionPunctuated";
+import { SimpleFrameBroll } from "./components/layouts/SimpleFrameBroll";
+import { SimpleFrameSentence } from "./components/layouts/SimpleFrameSentence";
+import { SimpleFrameZoomCut } from "./components/layouts/SimpleFrameZoomCut";
+import { BrollSplitScreen } from "./components/layouts/BrollSplitScreen";
+import { CaptionWordBoom } from "./theme/themes/default/CaptionWordBoom";
+import { CaptionWordBubble } from "./theme/themes/default/CaptionWordBubble";
+import { CaptionWordPopup } from "./theme/themes/default/CaptionWordPopup";
+import { CaptionEmphasis } from "./theme/themes/default/CaptionEmphasis";
+import { CaptionElegant } from "./theme/themes/default/CaptionElegant";
+import { BrollGreenScreen } from "./components/layouts/BrollGreenScreen";
+import { IntroVideo } from "./components/layouts/IntroVideo";
+import StretchText from "./components/utils/StretchText";
+import StretchTextDemo from "./components/utils/StretchTextDemo";
+import { KeyPointOverlayDepth } from "./components/layouts/KeyPointOverlayDepth";
+import { BrollStudioBackdrop } from "./components/layouts/BrollStudioBackdrop";
+import { MotionStillFullScreen } from "./components/layouts/MotionStillFullScreen";
+import { MotionStillStudioBackdrop } from "./components/layouts/MotionStillStudioBackdrop";
+import { MotionStillGreenScreen } from "./components/layouts/MotionStillGreenScreen";
+import { DynamicTriangle } from "./components/layouts/DynamicTriangle";
+import { KeywordStudioBackdrop } from "./components/layouts/KeywordStudioBackdrop";
+import { MotionStillGreenScreenV2 } from "./components/layouts/MotionStillGreenScreenV2";
+
+/** Update this so that Remotion knows which component to render when it is passed via screenplay. Ex. "title" will have rendered "Title" component
+ *  Here we are mapping directly types and component names. Types are snake_case and components PascalCase.
+ * */
+export var RegisteredComponents = {
+  // Layouts
+  SimpleFrame: SimpleFrame,
+  SimpleFrameBroll: SimpleFrameBroll,
+  SimpleFrameSentence: SimpleFrameSentence,
+  SimpleFrameZoomCut: SimpleFrameZoomCut,
+  TextWithVideo: TextWithVideo,
+  Handoff: Handoff,
+  MotionStill: MotionStill,
+  MotionStillFullScreen: MotionStillFullScreen,
+  MotionStillGreenScreen: MotionStillGreenScreenV2,
+  MotionStillStudioBackdrop: MotionStillStudioBackdrop,
+  KeywordStudioBackdrop: KeywordStudioBackdrop,
+  Keyword: Keyword,
+  BrollSplitScreen: BrollSplitScreen,
+  BrollGreenScreen: BrollGreenScreen,
+  BrollStudioBackdrop: BrollStudioBackdrop,
+  IntroVideo: IntroVideo,
+  StretchTextDemo: StretchTextDemo,
+  KeyPointOverlayDepth: KeyPointOverlayDepth,
+  DynamicTriangle: DynamicTriangle,
+  //effects
+  BrollFullscreen: BrollFullscreen,
+  PhraseRainbowEffect: PhraseRainbowEffect,
+  SentenceSimple: Sentence,
+  NametagFold: Nametag,
+  Nametag: Nametag,
+  Title: Title,
+  Sentence: Sentence,
+  Watermark: Watermark,
+  HandoffNametag: HandoffNametag,
+  //captions,
+  CaptionSimple: CaptionSimple,
+  Caption: CaptionSimple,
+  CaptionPunctuated: CaptionPunctuated,
+  CaptionWordBoom: CaptionWordBoom,
+  CaptionWordBubble: CaptionWordBubble,
+  CaptionWordPopup: CaptionWordPopup,
+  CaptionElegant: CaptionElegant,
+  CaptionColor: CaptionColor,
+  CaptionColorInverse: CaptionColorInverse,
+  CaptionColorShadow: CaptionColorShadow,
+  CaptionEmphasis: CaptionEmphasis,
+  //Audio
+  Soundtrack: Soundtrack,
+  //Utils
+  StretchText: StretchText
+};

package/dist/screenplay/RemotionRenderer/theme/config.js

@@ -0,0 +1,8 @@
+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); }
+var THEMES = {
+  basic: "basic"
+};
+var themeData = _defineProperty({}, THEMES.basic, {});

package/dist/screenplay/RemotionRenderer/theme/hooks/useTheme.js

@@ -0,0 +1,24 @@
+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 { useVideoConfig } from "remotion";
+export var useTheme = function useTheme() {
+  var _props$input, _props$input2, _props$input3, _props$input4;
+  var _useVideoConfig = useVideoConfig(),
+    videoConfigProps = _useVideoConfig.props;
+  var screenPlayProps = window.screenplayProps;
+  var props = _objectSpread(_objectSpread({}, screenPlayProps), videoConfigProps);
+  var primaryColor = props === null || props === void 0 ? void 0 : (_props$input = props.input) === null || _props$input === void 0 ? void 0 : _props$input.primaryColor;
+  var primaryContrast = props === null || props === void 0 ? void 0 : (_props$input2 = props.input) === null || _props$input2 === void 0 ? void 0 : _props$input2.primaryContrast;
+  var accentColor = props === null || props === void 0 ? void 0 : (_props$input3 = props.input) === null || _props$input3 === void 0 ? void 0 : _props$input3.accentColor;
+  var accentContrast = props === null || props === void 0 ? void 0 : (_props$input4 = props.input) === null || _props$input4 === void 0 ? void 0 : _props$input4.accentContrast;
+  return {
+    primaryColor: primaryColor,
+    primaryContrast: primaryContrast,
+    accentColor: accentColor,
+    accentContrast: accentContrast
+  };
+};

package/dist/screenplay/RemotionRenderer/theme/hooks/useThemedComponents.js

@@ -0,0 +1,101 @@
+import { useVideoConfig } from "remotion";
+import { Title as DefaultTitle } from "../themes/default/Title";
+import { Nametag as DefaultNametag } from "../themes/default/Nametag";
+import { Sentence as DefaultSentence } from "../themes/default/Sentence";
+import { HandoffNametag as DefaultHandoffNametag } from "../themes/default/HandoffNametag";
+import { GlitchTitle } from "../themes/glitch/GlitchTitle";
+import { Title as GlassTitle } from "../themes/glassmorphism/Title";
+import { Nametag as GlassNametag } from "../themes/glassmorphism/Nametag";
+import { Sentence as GlassSentence } from "../themes/glassmorphism/Sentence";
+import { SportsNametag } from "../themes/sports/Nametag";
+import { SportsTitle } from "../themes/sports/Title";
+import { DefaultCaption } from "../themes/default/DefaultCaption";
+import { SportsSentence } from "../themes/sports/SportsSentence";
+import { BigBoldNametag } from "../themes/bigbold/BigBoldNameTag";
+import { BigBoldSentence } from "../themes/bigbold/BigBoldSentence";
+import { BigBoldTitle } from "../themes/bigbold/BigBoldTitle";
+import { SportsBounceNametag } from "../themes/sportsbounce/Nametag";
+import { SportsBounceSentence } from "../themes/sportsbounce/SportsBounceSentence";
+import { SportsBounceTitle } from "../themes/sportsbounce/Title";
+import { PushPullNametag } from "../themes/pushpull/PushPullNametag";
+import { PushPullSentence } from "../themes/pushpull/PushPullSentence";
+import { PushPullTitle } from "../themes/pushpull/PushPullTitle";
+import { GlitchNametag } from "../themes/glitch/GlitchNametag";
+import { GlitchSentence } from "../themes/glitch/GlitchSentence";
+import { NoneNametag } from "../themes/none/Nametag";
+import { NoneTitle } from "../themes/none/Title";
+import { KeyPointOverlayDepth } from "../../components/layouts/KeyPointOverlayDepth";
+
+/** Always update this when adding a new theme and/or components. */
+var themedComponents = {
+  "default": {
+    Title: DefaultTitle,
+    Nametag: DefaultNametag,
+    Sentence: DefaultSentence,
+    Caption: DefaultCaption,
+    HandoffNametag: DefaultHandoffNametag
+  },
+  glitch: {
+    Title: GlitchTitle,
+    Nametag: GlitchNametag,
+    Sentence: GlitchSentence
+  },
+  glassmorphism: {
+    Title: GlassTitle,
+    Nametag: GlassNametag,
+    Sentence: GlassSentence
+  },
+  sports: {
+    Nametag: SportsNametag,
+    Title: SportsTitle,
+    Sentence: SportsSentence
+  },
+  sportsbounce: {
+    Nametag: SportsBounceNametag,
+    Title: SportsBounceTitle,
+    Sentence: SportsBounceSentence
+  },
+  bigbold: {
+    Nametag: BigBoldNametag,
+    Title: BigBoldTitle,
+    Sentence: BigBoldSentence
+  },
+  pushpull: {
+    Nametag: PushPullNametag,
+    Sentence: PushPullSentence,
+    Title: PushPullTitle
+  },
+  none: {
+    Nametag: NoneNametag,
+    Title: NoneTitle
+  },
+  depth: {
+    Sentence: KeyPointOverlayDepth
+  }
+};
+export var useThemedComponents = function useThemedComponents(componentName, overrideTheme) {
+  var _useVideoConfig = useVideoConfig(),
+    _useVideoConfig$props = _useVideoConfig.props.output,
+    _useVideoConfig$props2 = _useVideoConfig$props === void 0 ? {
+      theme: window.screenplayProps.output.theme
+    } : _useVideoConfig$props,
+    _useVideoConfig$props3 = _useVideoConfig$props2.theme,
+    theme = _useVideoConfig$props3 === void 0 ? "default" : _useVideoConfig$props3;
+  var getThemedComponent = function getThemedComponent() {
+    if (!componentName) {
+      throw new Error("You must specify componentName prop, got ".concat(componentName));
+    }
+    if (!themedComponents["default"][componentName]) {
+      throw new Error("Component is not implemented, possible components ".concat(Object.keys(themedComponents["default"]).join(", "), ", got ").concat(componentName));
+    }
+    if (!themedComponents[theme]) {
+      throw new Error("Invalid theme. Supported themes [".concat(Object.keys(themedComponents).join(", "), "], got ").concat(theme));
+    }
+    try {
+      return themedComponents[overrideTheme || theme][componentName] || themedComponents["default"][componentName];
+    } catch (error) {
+      return themedComponents["default"][componentName] || null;
+    }
+  };
+  return getThemedComponent(componentName);
+};

package/dist/screenplay/RemotionRenderer/theme/themes/bigbold/BigBoldNameTag.js

@@ -0,0 +1,147 @@
+import { Easing, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { convertToSeconds } from "../../../helpers/convertToSeconds.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import React from "react";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var BigBoldNametag = function BigBoldNametag(_ref) {
+  var name = _ref.name,
+    title = _ref.title,
+    themeSettings = _ref.themeSettings;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps,
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        bottom: "52%",
+        left: "6%",
+        top: undefined,
+        maxWidth: width * 0.8,
+        nameFontSize: width * 0.12,
+        titleFontSize: width * 0.1
+      },
+      landscape: {
+        top: undefined,
+        left: "4.5%",
+        bottom: "65%",
+        maxWidth: width * 0.42,
+        nameFontSize: width * 0.07,
+        titleFontSize: width * 0.05
+      },
+      square: {
+        bottom: "64%",
+        left: "4%",
+        top: undefined,
+        maxWidth: width * 0.8,
+        nameFontSize: width * 0.11,
+        titleFontSize: width * 0.08
+      }
+    }),
+    top = _useOrientationBased.top,
+    left = _useOrientationBased.left,
+    bottom = _useOrientationBased.bottom,
+    maxWidth = _useOrientationBased.maxWidth,
+    nameFontSize = _useOrientationBased.nameFontSize,
+    titleFontSize = _useOrientationBased.titleFontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var nameScale = spring({
+    frame: frame,
+    fps: fps,
+    from: 0,
+    // Start from above
+    to: 100,
+    // Move to its original position
+    stiffness: 300,
+    // Increase stiffness for a more pronounced bounce
+    damping: 20,
+    // Decrease damping to allow more bounce
+    durationInFrames: 15 // Duration for the bounce
+  });
+  var nameEndTime = convertToSeconds(5 / fps, 0);
+  var titleScale = spring({
+    frame: frame - nameEndTime * fps,
+    fps: fps,
+    from: 0,
+    // Start from above
+    to: 50,
+    // Move to its original position
+    stiffness: 300,
+    // Increase stiffness for a more pronounced bounce
+    damping: 500,
+    // Decrease damping to allow more bounce
+    durationInFrames: 15 // Duration for the bounce
+  });
+  var titleScaleEndTime = nameEndTime + convertToSeconds(25 / fps, 0);
+  var disappearPos = useTimeInterpolate([titleScaleEndTime + 1, titleScaleEndTime + 1.5], [0, 2000], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+  var nameTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryColor) || primaryColor;
+  var nameShadowColor = getContrastColor(nameTextColor);
+  var titleTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor;
+  var titleShadowColor = getContrastColor(titleTextColor);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      left: left,
+      bottom: bottom,
+      top: top,
+      fontFamily: fontFamily,
+      fontWeight: "900"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "fit-content",
+      fontSize: nameFontSize,
+      position: "relative",
+      isolation: "isolate"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      fontFamily: fontFamily,
+      top: 50,
+      fontWeight: "900"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textShadow: "5px 5px ".concat(nameShadowColor),
+      rotationPoint: "0% 100%",
+      left: "10",
+      position: "relative",
+      color: nameTextColor,
+      fontSize: nameFontSize,
+      width: maxWidth,
+      whiteSpace: "wrap",
+      transformOrigin: "left",
+      transform: "translateX(".concat(disappearPos, "px) scale(").concat(nameScale, "%)")
+    }
+  }, name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      top: -50,
+      left: 20,
+      textShadow: "5px 5px ".concat(titleShadowColor),
+      whiteSpace: "wrap",
+      width: maxWidth + 350,
+      color: titleTextColor,
+      fontSize: titleFontSize,
+      transformOrigin: "left",
+      transform: "translateX(".concat(-disappearPos, "px) scale(").concat(titleScale, "%)")
+    }
+  }, title)));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/bigbold/BigBoldSentence.js

@@ -0,0 +1,138 @@
+import { AbsoluteFill, Easing, useCurrentFrame, useVideoConfig } from "remotion";
+import { timeInterpolate, useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { convertToSeconds } from "../../../helpers/convertToSeconds.js";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { CHROME_PADDING } from "../../../config.js";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import React from "react";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var BigBoldSentence = function BigBoldSentence(_ref) {
+  var sentence = _ref.sentence;
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+
+  // Calculate time-based values using convertToSeconds
+  var disappearStartTime = convertToSeconds(3.5, 0);
+  var disappearDuration = convertToSeconds(1, 0);
+  var startScaleTime = convertToSeconds(0, 0); // Start at 0 seconds
+  var endScaleTime = convertToSeconds(0.5, 0); // End at 0.5 seconds
+
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width,
+    height = _useVideoConfig2.height;
+
+  // Adjust rectangleWidth calculation to use an appropriate time range
+  var rectangleWidth = useTimeInterpolate([startScaleTime, endScaleTime],
+  // Input range in seconds
+  [0, width],
+  // Output range for width
+  {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var disappearScale = useTimeInterpolate([disappearStartTime, disappearStartTime + disappearDuration], [1, 1.5], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var opacity = useTimeInterpolate([disappearStartTime, disappearStartTime + disappearDuration], [1, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        alignItems: "end",
+        justifyContent: "center",
+        maxFontSize: 120,
+        size: {
+          width: width * 0.45,
+          height: height * 0.95
+        }
+      },
+      portrait: {
+        alignItems: "end",
+        justifyContent: "start",
+        maxFontSize: 120,
+        size: {
+          width: width * 0.7,
+          height: height * 0.8
+        }
+      },
+      square: {
+        size: {
+          width: width * 0.68,
+          height: height * 0.9
+        },
+        maxFontSize: 120,
+        alignItems: "end",
+        justifyContent: "start"
+      }
+    }),
+    alignItems = _useOrientationBased.alignItems,
+    justifyContent = _useOrientationBased.justifyContent,
+    size = _useOrientationBased.size,
+    maxFontSize = _useOrientationBased.maxFontSize;
+  var _distributeTextToFit = distributeTextToFit(sentence, size.width, size.height, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "flex",
+      alignItems: alignItems,
+      justifyContent: justifyContent,
+      marginTop: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      width: rectangleWidth,
+      height: height,
+      // Adjust height as needed
+      backgroundColor: "#00000066",
+      // Adjust color as needed
+      transformOrigin: "center",
+      transform: "scale(".concat(disappearScale, ")"),
+      opacity: opacity
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: CHROME_PADDING * 2
+    }
+  }, lines.map(function (line, lineIndex) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: lineIndex,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "flex-end"
+      }
+    }, line.split(" ").map(function (word, wordIndex) {
+      // alert(lines);
+      var delayTime = convertToSeconds(0.6, lineIndex * 0.1 * 24 + wordIndex * 0.1 * 24);
+      var scale = timeInterpolate([delayTime, delayTime + convertToSeconds(1, 0)], [4000, 1], {
+        easing: Easing.out(Easing.cubic),
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      }, fps, frame);
+      return /*#__PURE__*/React.createElement("div", {
+        key: wordIndex,
+        style: {
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          paddingRight: "30px",
+          fontWeight: "700",
+          textAlign: "right",
+          transform: "translateY(".concat(scale, "%)"),
+          color: "#fff",
+          whiteSpace: "nowrap",
+          opacity: opacity // Apply opacity for fade-out effect
+        }
+      }, word);
+    }));
+  })));
+};