@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { AbsoluteFill, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { DEFAULT_TIME_INTERPOLATE_OPTIONS, useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { convertToSeconds } from "../../../helpers/convertToSeconds.js";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { AnimatedLine } from "./shared";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var SportsTitle = function SportsTitle(_ref) {
+  var text = _ref.text;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        backdropHeightFactor: 0.6
+      },
+      portrait: {
+        backdropHeightFactor: 0.6
+      },
+      square: {
+        backdropHeightFactor: 0.4
+      }
+    }),
+    backdropHeightFactor = _useOrientationBased.backdropHeightFactor;
+  var _useOrientationBased2 = useOrientationBased({
+      portrait: {
+        maxFontSize: 160,
+        backdropTop: "45%",
+        titleTop: "45%"
+      },
+      landscape: {
+        maxFontSize: 160,
+        backdropTop: "50%",
+        titleTop: "50%"
+      },
+      square: {
+        maxFontSize: 160,
+        backdropTop: "50%",
+        titleTop: "50%"
+      }
+    }),
+    maxFontSize = _useOrientationBased2.maxFontSize,
+    backdropTop = _useOrientationBased2.backdropTop,
+    titleTop = _useOrientationBased2.titleTop;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height,
+    width = _useVideoConfig.width;
+  var _distributeTextToFit = distributeTextToFit(text, width * 0.8, height * backdropHeightFactor, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var backdropAnimationStart = convertToSeconds(0, 0);
+  var backdropAnimationEnd = convertToSeconds(1, 0);
+  var backdropHeight = useTimeInterpolate([backdropAnimationStart, backdropAnimationEnd], [0, 100 * backdropHeightFactor], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      color: "white",
+      fontSize: fontSize,
+      fontFamily: fontFamily,
+      fontWeight: 800
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "".concat(backdropHeight, "%"),
+      left: "50%",
+      top: backdropTop,
+      transform: "translate(-50%, -50%)",
+      backdropFilter: "blur(10.6px)",
+      WebkitBackdropFilter: "blur(10.6px)"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      top: titleTop,
+      transform: "translateY(-50%)",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 20
+    }
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement(AnimatedLine, {
+      key: index,
+      text: line,
+      delayInSeconds: 0.15 * index
+    });
+  })));
+};

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { Easing } from "remotion";
+import { useTheme } from "../../hooks/useTheme.js";
+import { convertToSeconds } from "../../../helpers/convertToSeconds.js";
+import { useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+var backgroundPadding = 60;
+export var INTERPOLATE_OPTIONS = {
+  extrapolateRight: "clamp",
+  extrapolateLeft: "clamp",
+  easing: Easing.bezier(0.42, 0.27, 0.14, 1.41)
+};
+export var AnimatedLine = function AnimatedLine(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    fontSize = _ref.fontSize,
+    delayInSeconds = _ref.delayInSeconds;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast;
+  var titleBackgroundAnimationStart = convertToSeconds(0, 18, delayInSeconds);
+  var titleBackgroundAnimationEnd = convertToSeconds(1, 10, delayInSeconds);
+  var titleBackgroundOpacity = useTimeInterpolate([titleBackgroundAnimationStart, titleBackgroundAnimationEnd], [0, 1]);
+  var titleBackgroundPosition = useTimeInterpolate([titleBackgroundAnimationStart, titleBackgroundAnimationEnd], [-150, 0], INTERPOLATE_OPTIONS);
+  var titleTextAnimationStart = convertToSeconds(0, 15, delayInSeconds);
+  var titleTextAnimationEnd = convertToSeconds(1, 10, delayInSeconds);
+  var titleTextOpacity = useTimeInterpolate([titleTextAnimationStart, titleTextAnimationEnd], [0, 1]);
+  var titleTextPosition = useTimeInterpolate([titleTextAnimationStart, titleTextAnimationEnd], [150, 0], INTERPOLATE_OPTIONS);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      height: "fit-content",
+      width: "fit-content",
+      padding: 0,
+      textAlign: "center",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      width: "calc(100% + ".concat(backgroundPadding, "px)"),
+      left: -backgroundPadding / 2,
+      height: "100%",
+      backgroundColor: primaryColor,
+      textAlign: "center",
+      transform: "translateX(".concat(titleBackgroundPosition, "%)"),
+      opacity: titleBackgroundOpacity
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      textAlign: "center",
+      lineHeight: 1.1,
+      textTransform: "uppercase",
+      transform: "translateX(".concat(titleTextPosition, "%)"),
+      opacity: titleTextOpacity,
+      color: primaryContrast,
+      fontSize: fontSize
+    }
+  }, children || text));
+};

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

@@ -0,0 +1,145 @@
+import React from "react";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { useTheme } from "../../hooks/useTheme.js";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var IndividualLine = function IndividualLine(_ref) {
+  var text = _ref.text,
+    translateY = _ref.translateY,
+    scaleY = _ref.scaleY,
+    fontSize = _ref.fontSize,
+    color = _ref.color,
+    backgroundColor = _ref.backgroundColor,
+    fontW = _ref.fontW;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      padding: "20px",
+      fontSize: fontSize,
+      fontFamily: fontFamily,
+      fontWeight: fontW,
+      color: color,
+      whiteSpace: "nowrap",
+      transform: "translateY(".concat(translateY, "px) scaleY(").concat(scaleY, ")"),
+      textAlign: "right",
+      display: "inline-block"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      zIndex: -1,
+      width: "100%",
+      height: "100%",
+      backgroundColor: backgroundColor
+    }
+  }), /*#__PURE__*/React.createElement("span", null, text));
+};
+export var SportsBounceNametag = function SportsBounceNametag(_ref2) {
+  var name = _ref2.name,
+    title = _ref2.title,
+    themeSettings = _ref2.themeSettings;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        alignItems: "start",
+        justifyContent: "center",
+        backdropHeightFactor: 0.3,
+        maxFontSize: 50,
+        nameFontSize: "63px",
+        titleFontSize: "39px"
+      },
+      portrait: {
+        alignItems: "start",
+        justifyContent: "start",
+        backdropHeightFactor: 0.6,
+        nameFontSize: "63px",
+        titleFontSize: "39px"
+      },
+      square: {
+        alignItems: "start",
+        justifyContent: "start",
+        backdropHeightFactor: 0.4,
+        nameFontSize: "63px",
+        titleFontSize: "39px"
+      }
+    }),
+    alignItems = _useOrientationBased.alignItems,
+    nameFontSize = _useOrientationBased.nameFontSize,
+    titleFontSize = _useOrientationBased.titleFontSize;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps;
+  var delayFrames = 0.1 * fps + 0.3 * fps;
+  var bounceDurationFrames = 25;
+  var stayVisibleFrames = 1.5 * fps;
+  var initialPosition = -300;
+  var translateY = spring({
+    frame: Math.max(0, frame - delayFrames),
+    fps: fps,
+    from: initialPosition,
+    to: 0,
+    stiffness: 5000,
+    damping: 1.5,
+    durationInFrames: bounceDurationFrames
+  });
+  var scaleY = interpolate(translateY, [-800, -200, 0], [1.5, 1.2, 1], {
+    extrapolateRight: "clamp"
+  });
+  var disappearingFrames = Math.max(0, frame - (delayFrames + bounceDurationFrames + stayVisibleFrames));
+  var shakeDurationFrames = 15;
+  var shakeMagnitude = disappearingFrames < shakeDurationFrames ? Math.sin(disappearingFrames * 0.5) * 40 : 0;
+  var translateYDisappearing = spring({
+    frame: Math.max(0, disappearingFrames - shakeDurationFrames),
+    fps: fps,
+    from: 0,
+    to: -400,
+    stiffness: 500,
+    damping: 20,
+    durationInFrames: 20
+  });
+  var scaleYDisappearing = interpolate(Math.max(0, disappearingFrames - shakeDurationFrames), [0, 10, 30], [1, 2, 0.5], {
+    extrapolate: "clamp"
+  });
+  var finalTranslateY = disappearingFrames > 0 ? translateYDisappearing + shakeMagnitude : translateY;
+  var finalScaleY = disappearingFrames > 0 ? scaleYDisappearing : scaleY;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var nameBackgroundColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryColor) || primaryColor;
+  var nameTextColor = getContrastColor(nameBackgroundColor);
+  var titleTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor;
+  var titleBackgroundColor = getContrastColor(titleTextColor);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: "23%",
+      left: "5%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: alignItems,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(IndividualLine, {
+    text: name,
+    fontSize: nameFontSize,
+    translateY: finalTranslateY / 2,
+    scaleY: finalScaleY,
+    fontW: "900",
+    color: nameTextColor,
+    backgroundColor: nameBackgroundColor
+  }), /*#__PURE__*/React.createElement(IndividualLine, {
+    text: title,
+    fontSize: titleFontSize,
+    translateY: -finalTranslateY / 2,
+    fontW: "600",
+    scaleY: finalScaleY,
+    color: titleTextColor,
+    backgroundColor: titleBackgroundColor
+  })));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/sportsbounce/SportsBounceSentence.js

@@ -0,0 +1,148 @@
+import React from "react";
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { timeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+
+// Load custom font
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var IndividualLine = function IndividualLine(_ref) {
+  var text = _ref.text,
+    translateY = _ref.translateY,
+    scaleY = _ref.scaleY,
+    fontSize = _ref.fontSize,
+    color = _ref.color;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      width: "fit-content",
+      height: "fit-content",
+      transform: "translateY(".concat(translateY, "px) scaleY(").concat(scaleY, ")"),
+      padding: "20px 50px",
+      backgroundColor: "#013654",
+      // Background applied here
+      textAlign: "center",
+      whiteSpace: "nowrap",
+      lineHeight: 1.2 // Line spacing for text
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: color,
+      // Text color
+      fontSize: fontSize,
+      fontFamily: fontFamily,
+      fontWeight: 600
+    }
+  }, text));
+};
+var NoBlurComponent = function NoBlurComponent(_ref2) {
+  var sentence = _ref2.sentence;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps,
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  var _useTheme = useTheme(),
+    primaryContrast = _useTheme.primaryContrast;
+
+  // Orientation-based layout settings
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        alignItems: "end",
+        backdropHeightFactor: 0.3,
+        maxFontSize: 50,
+        right: "5%"
+      },
+      portrait: {
+        alignItems: "end",
+        backdropHeightFactor: 0.4,
+        maxFontSize: 50,
+        right: 125
+      },
+      square: {
+        alignItems: "end",
+        backdropHeightFactor: 0.4,
+        maxFontSize: 50,
+        right: "5%"
+      }
+    }),
+    alignItems = _useOrientationBased.alignItems,
+    backdropHeightFactor = _useOrientationBased.backdropHeightFactor,
+    maxFontSize = _useOrientationBased.maxFontSize,
+    right = _useOrientationBased.right;
+
+  // Distribute text to fit the backdrop
+  var _distributeTextToFit = distributeTextToFit(sentence, width * backdropHeightFactor, height * backdropHeightFactor, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "6%",
+      right: right,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: alignItems
+    }
+  }, lines.map(function (line, index) {
+    var delayFrames = 0.1 * fps + index * 0.3 * fps;
+    var bounceDurationFrames = 15;
+    var stayVisibleFrames = 1.5 * fps;
+    var translateY = spring({
+      frame: Math.max(0, frame - delayFrames),
+      fps: fps,
+      from: index * 100 - 100,
+      to: index * 98,
+      stiffness: 200,
+      durationInFrames: bounceDurationFrames,
+      damping: 15
+    });
+    var scaleY = spring({
+      frame: Math.max(0, frame - delayFrames),
+      fps: fps,
+      from: 0,
+      to: 1,
+      stiffness: 3000,
+      damping: 10,
+      durationInFrames: bounceDurationFrames
+    });
+    var disappearingFrames = Math.max(0, frame - (delayFrames + bounceDurationFrames + stayVisibleFrames));
+    var shakeDurationFrames = 15;
+    var shakeMagnitude = disappearingFrames < shakeDurationFrames ? Math.sin(disappearingFrames * 1) * 40 : 0;
+    var translateYDisappearing = spring({
+      frame: Math.max(0, disappearingFrames - shakeDurationFrames),
+      fps: fps,
+      from: index * 100,
+      to: index * 100 - 500,
+      stiffness: 500,
+      damping: 20,
+      durationInFrames: 10
+    });
+    var scaleYDisappearing = timeInterpolate([0, 5, 15],
+    // Input time range (seconds)
+    [1, 1, 0],
+    // Output scale values
+    {
+      extrapolate: "clamp"
+    }, fps, frame);
+    var finalTranslateY = disappearingFrames > 0 ? translateYDisappearing + shakeMagnitude : translateY;
+    var finalScaleY = disappearingFrames > 0 ? scaleYDisappearing : scaleY;
+    return /*#__PURE__*/React.createElement(IndividualLine, {
+      key: index,
+      text: line,
+      fontSize: fontSize,
+      translateY: finalTranslateY,
+      scaleY: finalScaleY,
+      color: primaryContrast
+    });
+  })));
+};
+export var SportsBounceSentence = function SportsBounceSentence(_ref3) {
+  var sentence = _ref3.sentence;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(NoBlurComponent, {
+    sentence: sentence
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/sportsbounce/Title.js

@@ -0,0 +1,160 @@
+import React from "react";
+import { AbsoluteFill, Easing, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { timeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { CameraMotionBlur } from "@remotion/motion-blur";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme.js";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var NoBlurSportsBounceTitle = function NoBlurSportsBounceTitle(_ref) {
+  var text = _ref.text;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        backdropHeightFactor: 0.6
+      },
+      portrait: {
+        backdropHeightFactor: 0.4
+      },
+      square: {
+        backdropHeightFactor: 0.4
+      }
+    }),
+    backdropHeightFactor = _useOrientationBased.backdropHeightFactor;
+  var _useOrientationBased2 = useOrientationBased({
+      portrait: {
+        maxFontSize: 160
+      },
+      landscape: {
+        maxFontSize: 160
+      },
+      square: {
+        maxFontSize: 160
+      }
+    }),
+    maxFontSize = _useOrientationBased2.maxFontSize;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height,
+    width = _useVideoConfig.width;
+  var _distributeTextToFit = distributeTextToFit(text, width * 0.8, height * backdropHeightFactor, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast;
+
+  //PushPullTitle Effect Bounce
+  var frame = useCurrentFrame();
+  var _useVideoConfig2 = useVideoConfig(),
+    fps = _useVideoConfig2.fps;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      color: "white",
+      fontSize: fontSize,
+      fontFamily: fontFamily,
+      fontWeight: 800
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      top: "50%",
+      transform: "translateY(-50%)",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, lines.map(function (line, index) {
+    var delayTimeInSeconds = (lines.length - index + 1) * 0.2;
+    var delayTimeInFrames = delayTimeInSeconds * fps;
+    var animationStartFrame = frame - 50 + delayTimeInFrames;
+
+    // Main spring for rotation
+    var titleRotation = spring({
+      frame: animationStartFrame,
+      fps: fps,
+      from: 30,
+      to: 0,
+      stiffness: 2000,
+      damping: 3,
+      mass: 4,
+      durationInFrames: 15
+    });
+
+    // Main spring for scale
+    var titleScale = spring({
+      frame: animationStartFrame,
+      fps: fps,
+      from: 0,
+      to: 100,
+      stiffness: 2500,
+      // High stiffness for quick response
+      damping: 8,
+      // Moderate damping for bounce effect
+      mass: 0.8,
+      durationInFrames: 15 // Adjust mass for oscillation
+    });
+    var finalTitleScale = titleScale;
+    var perspectiveDelayInFrames = 0.9 * fps;
+    var perspectiveStartFrame = animationStartFrame - perspectiveDelayInFrames - delayTimeInFrames;
+
+    // Spring for the title perspective (skewX)
+    var titlePerspective = spring({
+      frame: perspectiveStartFrame,
+      fps: fps,
+      from: 0,
+      to: 30,
+      stiffness: 3000,
+      damping: 5,
+      mass: 1
+    });
+    var perspectiveTime = (perspectiveDelayInFrames + 50) / fps;
+    var titlePerspectiveX = timeInterpolate([perspectiveTime, perspectiveTime + 0.2], [0, 300], {
+      easing: Easing.out(Easing.cubic),
+      extrapolateRight: "clamp",
+      extrapolateLeft: "clamp"
+    }, fps, frame);
+    var titleDisappearStartFrame = perspectiveStartFrame - 10;
+    var disappearStartTime = (frame + titleDisappearStartFrame) / fps;
+    var titleDisappear = timeInterpolate([disappearStartTime, disappearStartTime + 0.2], [3000, 0], {
+      easing: Easing.out(Easing.cubic),
+      extrapolateRight: "clamp",
+      extrapolateLeft: "clamp"
+    }, fps, frame);
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        position: "relative",
+        height: "fit-content",
+        width: "fit-content",
+        padding: "0 50px 0 50px",
+        textAlign: "center",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        backgroundColor: primaryColor,
+        padding: "0 50px 0 50px",
+        textAlign: "center",
+        lineHeight: 1.4,
+        textTransform: "uppercase",
+        transform: index % 2 === 0 ? "rotate(".concat(-titleRotation, "deg) scale(").concat(finalTitleScale, "%) skewX(").concat(titlePerspective, "deg) translateX(").concat(titleDisappear - titlePerspectiveX, "px)") : "rotate(".concat(titleRotation, "deg) scale(").concat(finalTitleScale, "%) skewX(").concat(-titlePerspective, "deg) translateX(").concat(-titleDisappear + titlePerspectiveX, "px)"),
+        color: primaryContrast,
+        fontSize: fontSize
+      }
+    }, line));
+  })));
+};
+export var SportsBounceTitle = function SportsBounceTitle(_ref2) {
+  var text = _ref2.text;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(CameraMotionBlur, {
+    shutterAngle: 360,
+    samples: 5
+  }, /*#__PURE__*/React.createElement(NoBlurSportsBounceTitle, {
+    text: text
+  })));
+};

package/dist/screenplay/RemotionRenderer/tracks/AudioTrack.js

@@ -0,0 +1,23 @@
+var _excluded = ["component"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { RegisteredComponents } from "../registeredComponents.js";
+import { Sequence } from "remotion";
+import React from "react";
+export var AudioTrack = function AudioTrack(_ref) {
+  var track = _ref.track;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, track.map(function (_ref2, index) {
+    var component = _ref2.component,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+    var ComponentToRender = RegisteredComponents[component];
+    if (!ComponentToRender) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Sequence, {
+      name: "Audio - " + component,
+      key: index,
+      from: otherProps.from,
+      durationInFrames: otherProps.durationInFrames
+    }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps));
+  }));
+};

package/dist/screenplay/RemotionRenderer/tracks/CaptionsVideoTrack.js

@@ -0,0 +1,23 @@
+var _excluded = ["component"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { RegisteredComponents } from "../registeredComponents.js";
+import { Sequence } from "remotion";
+import React from "react";
+export var CaptionsVideoTrack = function CaptionsVideoTrack(_ref) {
+  var track = _ref.track;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, track.map(function (_ref2, index) {
+    var component = _ref2.component,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+    var ComponentToRender = RegisteredComponents[component];
+    if (!ComponentToRender) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Sequence, {
+      name: "Captions",
+      key: index,
+      from: otherProps.from,
+      durationInFrames: otherProps.durationInFrames
+    }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps));
+  }));
+};

package/dist/screenplay/RemotionRenderer/tracks/DynamicVideoComposition.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { LayoutVideoTrack } from "./LayoutVideoTrack";
+import { EffectsVideoTrack } from "./EffectsVideoTrack";
+import { CaptionsVideoTrack } from "./CaptionsVideoTrack";
+import { AudioTrack } from "./AudioTrack";
+var DynamicVideoCompositionComponent = function DynamicVideoCompositionComponent(props) {
+  var layoutVideoTrack = (props === null || props === void 0 ? void 0 : props.layoutVideoTrack) || [];
+  var effectsVideoTrack = (props === null || props === void 0 ? void 0 : props.effectsVideoTrack) || [];
+  var captionsVideoTrack = (props === null || props === void 0 ? void 0 : props.captionsVideoTrack) || [];
+  var audioTrack = (props === null || props === void 0 ? void 0 : props.audioTrack) || [];
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: props.output.backgroundColor
+    }
+  }, /*#__PURE__*/React.createElement(LayoutVideoTrack, {
+    track: layoutVideoTrack
+  }), /*#__PURE__*/React.createElement(EffectsVideoTrack, {
+    track: effectsVideoTrack
+  }), /*#__PURE__*/React.createElement(CaptionsVideoTrack, {
+    track: captionsVideoTrack
+  }), /*#__PURE__*/React.createElement(AudioTrack, {
+    track: audioTrack
+  }));
+};
+export var DynamicVideoComposition = function DynamicVideoComposition(props) {
+  if (props) {
+    window.screenplayProps = props;
+  }
+  return /*#__PURE__*/React.createElement(DynamicVideoCompositionComponent, props);
+};