@zync/zync-screnplay-player 0.1.187

package/dist/screenplay/RemotionRenderer/theme/themes/glitch/GlitchTitle.js

@@ -0,0 +1,142 @@
+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 { loadFont } from "@remotion/google-fonts/Kanit";
+import { SplitSentence } from "./components/SplitSentence";
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { DisplacedText } from "./components/DisplacedText";
+import React, { useMemo } from "react";
+import { createAnimationCycles, glitchXInterpolate } from "./helpers.js";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var GlitchTitle = function GlitchTitle(_ref) {
+  var text = _ref.text;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        maxFontSize: 150,
+        maxWidth: width * 0.65
+      },
+      landscape: {
+        maxFontSize: 210,
+        maxWidth: width
+      },
+      square: {
+        maxFontSize: 130,
+        maxWidth: width
+      }
+    }),
+    maxFontSize = _useOrientationBased.maxFontSize,
+    maxWidth = _useOrientationBased.maxWidth;
+  var _useTheme = useTheme(),
+    primaryContrast = _useTheme.primaryContrast;
+  var _distributeTextToFit = distributeTextToFit(text, maxWidth, height, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var frame = useCurrentFrame();
+  var titleParts = [{
+    top: 0,
+    height: 10,
+    offsetX: glitchXInterpolate(frame, -width * 2.5)
+  }, {
+    top: 10,
+    height: 45,
+    offsetX: glitchXInterpolate(frame, -width * 3)
+  }, {
+    top: 45,
+    height: 50,
+    offsetX: glitchXInterpolate(frame, width * 2.25)
+  }, {
+    top: 50,
+    height: 80,
+    offsetX: glitchXInterpolate(frame, width * 2.75)
+  }, {
+    top: 80,
+    height: 100,
+    offsetX: glitchXInterpolate(frame, -width * 4)
+  }];
+  var _useMemo = useMemo(createAnimationCycles, []),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    cycleTimings = _useMemo2[0],
+    cycles = _useMemo2[1];
+  var cycle = interpolate(frame, cycleTimings, cycles, {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var glitchy = cycle > 4 && cycle < 8;
+  var moreGlitchy = cycle >= 8 && cycle < 12;
+  var sentenceParts = [{
+    top: 0,
+    height: 15,
+    offsetX: glitchy ? 8 : moreGlitchy ? 12 : 0
+  }, {
+    top: 15,
+    height: 25,
+    offsetX: glitchy ? -8 : moreGlitchy ? -12 : 0
+  }, {
+    top: 25,
+    height: 50,
+    offsetX: 0
+  }, {
+    top: 50,
+    height: 75,
+    offsetX: glitchy ? 8 : moreGlitchy ? 12 : 0
+  }, {
+    top: 75,
+    height: 80,
+    offsetX: glitchy ? 24 : moreGlitchy ? 30 : 0
+  }, {
+    top: 80,
+    height: 100,
+    offsetX: glitchy ? 4 : moreGlitchy ? 8 : 0
+  }];
+  var colorsOffset = glitchy ? 8 : moreGlitchy ? 12 : 0;
+  var backdropOpacity = interpolate(frame, [0, 15], [0, 0.8], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "grid",
+      placeContent: "center",
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      textAlign: "center",
+      textTransform: "uppercase",
+      fontWeight: 900,
+      fontStyle: "italic",
+      color: primaryContrast,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: backdropOpacity,
+      backgroundColor: "black"
+    }
+  }), /*#__PURE__*/React.createElement(SplitSentence, {
+    parts: titleParts
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement(DisplacedText, {
+      key: index,
+      text: line,
+      offset: colorsOffset,
+      sentenceParts: sentenceParts,
+      style: {
+        textAlign: "center",
+        position: "relative",
+        margin: 0,
+        color: "#fff",
+        lineHeight: "".concat(fontSize / 8 * 6, "px")
+      }
+    }, line);
+  })));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/glitch/components/DisplacedText.js

@@ -0,0 +1,66 @@
+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 { SplitSentence } from "./SplitSentence";
+var defaultOffsetStyles = function defaultOffsetStyles(offset) {
+  return {
+    transform: "translateX(".concat(offset, "px)")
+  };
+};
+var rightWarpOffsetStyles = function rightWarpOffsetStyles(offset, scale) {
+  return {
+    transform: "translateX(".concat(offset / 2, "px) scaleX(").concat(scale, ")"),
+    transformOrigin: "right"
+  };
+};
+var styleBy = {
+  "default": defaultOffsetStyles,
+  warpFromRight: rightWarpOffsetStyles
+};
+export var DisplacedText = function DisplacedText(_ref) {
+  var text = _ref.text,
+    offset = _ref.offset,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {
+      margin: 0,
+      textAlign: "left",
+      transform: "translateZ(0px)"
+    } : _ref$style,
+    sentenceParts = _ref.sentenceParts,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant;
+  return /*#__PURE__*/React.createElement(SplitSentence, {
+    parts: sentenceParts
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      textAlign: "center",
+      width: "100%",
+      isolation: "isolate",
+      letterSpacing: 10
+    })
+  }, /*#__PURE__*/React.createElement("p", {
+    style: style
+  }, text), /*#__PURE__*/React.createElement("p", {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      top: 0,
+      position: "absolute",
+      color: "rgb(255,0,0)",
+      width: "100%",
+      opacity: offset ? 1 : 0,
+      zIndex: -2
+    }, styleBy[variant](-offset, 1 + offset / 4 / 100 + 0.01))
+  }, text), /*#__PURE__*/React.createElement("p", {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      top: 0,
+      position: "absolute",
+      color: "rgb(0,255,255)",
+      width: "100%",
+      opacity: offset ? 1 : 0,
+      zIndex: -1
+    }, styleBy[variant](offset, 1 + offset / 4 / 100))
+  }, text)));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/glitch/components/GlitchAnimatedLine.js

@@ -0,0 +1,38 @@
+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 GlitchAnimatedLine = function GlitchAnimatedLine(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    fontSize = _ref.fontSize,
+    delayInSeconds = _ref.delayInSeconds;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast;
+  var titleTextAnimationStart = convertToSeconds(0, 0, delayInSeconds);
+  var titleTextAnimationEnd = convertToSeconds(0, 20, delayInSeconds);
+  var titleTextOpacity = useTimeInterpolate([titleTextAnimationStart, titleTextAnimationEnd], [0, 1]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      lineHeight: 1.1,
+      textTransform: "uppercase",
+      opacity: titleTextOpacity,
+      color: primaryContrast,
+      fontSize: fontSize,
+      background: primaryColor,
+      width: "fit-content",
+      paddingLeft: 20,
+      paddingRight: 20,
+      whiteSpace: "nowrap"
+    }
+  }, children || text);
+};

package/dist/screenplay/RemotionRenderer/theme/themes/glitch/components/SplitSentence.js

@@ -0,0 +1,80 @@
+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 } from "remotion";
+var defaultParts = [{
+  top: 0,
+  height: 10
+}, {
+  top: 10,
+  height: 45
+}, {
+  top: 45,
+  height: 60
+}, {
+  top: 60,
+  height: 70
+}, {
+  top: 70,
+  height: 90
+}, {
+  top: 90,
+  height: 100
+}];
+export var SplitSentence = function SplitSentence(_ref) {
+  var children = _ref.children,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$parts = _ref.parts,
+    parts = _ref$parts === void 0 ? defaultParts : _ref$parts;
+  var slices = parts.map(function (part, index, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread({
+        position: index === 0 ? "relative" : "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        clipPath: "inset(".concat(part.top, "% -10% ").concat(100 - part.height, "% -10%)"),
+        transform: "translateX(".concat(part.offsetX, "px) translateZ(0) ")
+      }, style),
+      key: index
+    }, children);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, slices);
+};
+export var SplitLayout = function SplitLayout(_ref2) {
+  var children = _ref2.children,
+    _ref2$style = _ref2.style,
+    style = _ref2$style === void 0 ? {} : _ref2$style,
+    _ref2$parts = _ref2.parts,
+    parts = _ref2$parts === void 0 ? defaultParts : _ref2$parts;
+  var slices = parts.map(function (part, index, i) {
+    var isOriginal = index === 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread({
+        position: isOriginal ? "relative" : "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        clipPath: "inset(".concat(part.top, "% -10% ").concat(100 - part.height, "% -10%)"),
+        transform: "translateX(".concat(part.offsetX, "px) translateZ(0) ")
+      }, style),
+      key: index
+    }, children);
+  });
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      position: "relative",
+      zIndex: 99999
+    }
+  }, slices);
+};

package/dist/screenplay/RemotionRenderer/theme/themes/glitch/helpers.js

@@ -0,0 +1,32 @@
+// Creates timings (input values) and cycles (output values) for interpolation. Makes repated animations easier. One sample is a one frame
+import { Easing, interpolate } from "remotion";
+export var createAnimationCycles = function createAnimationCycles() {
+  var samples = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 300;
+  var inputFrames = new Array(samples).fill(0).map(function (_, i) {
+    return i + 1;
+  });
+  var outputValues = [];
+  var cycle = 1;
+  inputFrames.forEach(function (_, i) {
+    if (cycle < 60) {
+      outputValues.push(cycle);
+      cycle++;
+    } else if (cycle === 60) {
+      outputValues.push(cycle);
+      cycle = 1;
+    }
+  });
+  return [inputFrames, outputValues];
+};
+export var glitchXInterpolate = function glitchXInterpolate(frame, startingXOffset) {
+  var randomize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var START_FRAME = delay;
+  var END_FRAME = 20 + delay;
+  return interpolate(frame, [START_FRAME, END_FRAME], [startingXOffset, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.bezier(Math.random() / 4, Math.random() / 4, Math.random() / 4, randomize ? 1 + Math.random() / 2 : 1.05)
+  });
+};
+var useAnimationCycle = function useAnimationCycle() {};

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

@@ -0,0 +1,3 @@
+export var NoneNametag = function NoneNametag() {
+  return null;
+};

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

@@ -0,0 +1,3 @@
+export var NoneTitle = function NoneTitle() {
+  return null;
+};

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

@@ -0,0 +1,165 @@
+import React from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { useTheme } from "../../hooks/useTheme.js";
+import { hexToRgbHtml } from "../../../helpers/hexToRgb.js";
+import { CameraMotionBlur } from "@remotion/motion-blur";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var PushPullNametagEffect = function PushPullNametagEffect(_ref) {
+  var name = _ref.name,
+    title = _ref.title,
+    themeSettings = _ref.themeSettings;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    fps = _useVideoConfig.fps;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        bottom: 440,
+        left: 100,
+        top: undefined,
+        maxWidth: width - 200,
+        maxNameFontSize: 110,
+        titleFontSize: 70
+      },
+      landscape: {
+        top: undefined,
+        left: 100,
+        bottom: 225,
+        maxWidth: width - 200,
+        maxNameFontSize: 120,
+        titleFontSize: 75
+      },
+      square: {
+        bottom: 240,
+        left: 100,
+        top: undefined,
+        maxWidth: width - 200,
+        maxNameFontSize: 120,
+        titleFontSize: 75
+      }
+    }),
+    top = _useOrientationBased.top,
+    left = _useOrientationBased.left,
+    bottom = _useOrientationBased.bottom,
+    maxWidth = _useOrientationBased.maxWidth,
+    maxNameFontSize = _useOrientationBased.maxNameFontSize,
+    titleFontSize = _useOrientationBased.titleFontSize;
+  var _distributeTextToFit = distributeTextToFit(name, maxWidth - 100, 300, maxNameFontSize),
+    nameFontSize = _distributeTextToFit.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var nameLines = name.split(" ");
+  var frame = useCurrentFrame();
+  var userNameAnimationData = nameLines.map(function (line, index) {
+    return {
+      text: line,
+      linePosition: spring({
+        frame: frame,
+        fps: fps,
+        from: 1000,
+        to: 0,
+        delay: index * 5,
+        config: {
+          stiffness: 3300,
+          damping: 120,
+          mass: 2
+        },
+        durationInFrames: fps / 2
+      })
+    };
+  });
+  var userTitlePosition = spring({
+    frame: frame,
+    fps: fps,
+    from: -200,
+    to: 0,
+    delay: fps,
+    config: {
+      stiffness: 1250,
+      damping: 28,
+      mass: 0.25
+    },
+    durationInFrames: fps / 2
+  });
+  var nameTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryColor) || primaryColor;
+  var titleTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      gap: 10,
+      left: left,
+      bottom: bottom,
+      top: top,
+      fontFamily: fontFamily
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "fit-content",
+      textTransform: "uppercase",
+      position: "relative",
+      isolation: "isolate"
+    }
+  }, userNameAnimationData.map(function (_ref2, index) {
+    var text = _ref2.text,
+      linePosition = _ref2.linePosition;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        color: nameTextColor,
+        textShadow: "4px 4px 0px ".concat(hexToRgbHtml(getContrastColor(nameTextColor), 0.5)),
+        fontWeight: 900,
+        fontSize: nameFontSize,
+        lineHeight: "".concat(nameFontSize * 4 / 5, "px"),
+        transform: "translateY(".concat(linePosition, "%)")
+      }
+    }, text);
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      width: "fit-content",
+      maxWidth: maxWidth,
+      isolation: "isolate",
+      opacity: title ? 1 : 0,
+      transform: "translateX(".concat(userTitlePosition, "%)")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      backgroundColor: "white",
+      borderRadius: 10,
+      width: "100%",
+      bottom: 0,
+      zIndex: -1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: titleFontSize,
+      color: titleTextColor,
+      fontWeight: 900,
+      textShadow: "4px 4px 0px ".concat(hexToRgbHtml(getContrastColor(titleTextColor), 0.5)),
+      lineHeight: "".concat(titleFontSize * 3 / 4, "px")
+    }
+  }, title)));
+};
+export var PushPullNametag = function PushPullNametag(_ref3) {
+  var name = _ref3.name,
+    title = _ref3.title,
+    themeSettings = _ref3.themeSettings;
+  return /*#__PURE__*/React.createElement(CameraMotionBlur, {
+    shutterAngle: 180,
+    samples: 5
+  }, /*#__PURE__*/React.createElement(PushPullNametagEffect, {
+    name: name,
+    title: title,
+    themeSettings: themeSettings
+  }));
+};

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

@@ -0,0 +1,94 @@
+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 { AbsoluteFill } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { CHROME_PADDING } from "../../../config.js";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { PushToTop, SlideFromBottom, SlideFromLeft, SlideFromRight, SlideFromTop } from "./designs/sentence";
+import { hexToRgbHtml } from "../../../helpers/hexToRgb.js";
+import { useTheme } from "../../hooks/useTheme.js";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var effects = [SlideFromTop, SlideFromRight, SlideFromBottom, SlideFromLeft, SlideFromTop, SlideFromRight, SlideFromBottom, SlideFromLeft, SlideFromTop, SlideFromRight];
+var effectsTimings = [[0, 0.25], [0.25, 0.5], [0.5, 0.75], [0.75, 1], [1, 1.25], [1.25, 1.5], [1.5, 1.75], [1.75, 2.0], [2.0, 2.25], [2.25, 2.5]];
+var SentenceEffect = function SentenceEffect(_ref) {
+  var lines = _ref.lines,
+    maxWidth = _ref.maxWidth,
+    maxHeight = _ref.maxHeight;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        alignItems: "end",
+        justifyContent: "start ",
+        padding: CHROME_PADDING * 2
+      },
+      portrait: {
+        alignItems: "end",
+        justifyContent: "start",
+        padding: CHROME_PADDING * 2 + 60
+      },
+      square: {
+        alignItems: "end",
+        justifyContent: "start",
+        padding: CHROME_PADDING * 2
+      }
+    }),
+    alignItems = _useOrientationBased.alignItems,
+    justifyContent = _useOrientationBased.justifyContent,
+    padding = _useOrientationBased.padding,
+    marginRight = _useOrientationBased.marginRight;
+  var _useTheme = useTheme(),
+    accentContrast = _useTheme.accentContrast,
+    primaryContrast = _useTheme.primaryContrast;
+  return /*#__PURE__*/React.createElement(PushToTop, {
+    from: 0.5,
+    to: 0.75
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "flex",
+      alignItems: "end",
+      justifyContent: "center",
+      textAlign: "right",
+      paddingRight: CHROME_PADDING * 4
+    }
+  }, lines.map(function (line, index) {
+    var Effect = effects[index];
+    var _effectsTimings$index = _slicedToArray(effectsTimings[index], 2),
+      from = _effectsTimings$index[0],
+      to = _effectsTimings$index[1];
+    return /*#__PURE__*/React.createElement(Effect, {
+      key: index,
+      from: from,
+      to: to
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        animationDelay: "".concat(index * 1000, "ms"),
+        color: primaryContrast,
+        textShadow: "4px 4px 0px ".concat(hexToRgbHtml(accentContrast, 0.5)),
+        fontWeight: 700,
+        fontSize: 115,
+        textTransform: "uppercase",
+        lineHeight: "100px",
+        margin: 0,
+        fontFamily: fontFamily,
+        textWrap: "nowrap"
+      }
+    }, line));
+  })));
+};
+export var PushPullSentence = function PushPullSentence(_ref2) {
+  var maxWidth = _ref2.maxWidth,
+    maxHeight = _ref2.maxHeight,
+    lines = _ref2.lines,
+    fontSize = _ref2.fontSize;
+  return /*#__PURE__*/React.createElement(SentenceEffect, {
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    lines: lines,
+    fontSize: fontSize
+  });
+};