@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,108 @@
+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 { loadFont } from "@remotion/google-fonts/Poppins";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { AbsoluteFill, Easing, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { CHROME_PADDING } from "../../../config.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { defaultGlassmorphismStyles } from "./config.js";
+import { useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+import { FloatAnimation } from "./animations.js";
+import React from "react";
+var borderRadius = 16;
+var color = "#fff";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var Revealer = function Revealer(_ref) {
+  var children = _ref.children,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height;
+  var transitionIn = useTimeInterpolate([0.5 * index, 1 + index * 0.5], [-height / 2, 0], {
+    easing: Easing.out(Easing.quad),
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translateY(".concat(transitionIn, "px)")
+    }
+  }, children);
+};
+export var Title = function Title(_ref2) {
+  var text = _ref2.text;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        top: CHROME_PADDING,
+        right: CHROME_PADDING * 2,
+        width: 700
+      },
+      landscape: {
+        top: CHROME_PADDING,
+        right: CHROME_PADDING * 2,
+        width: 1550
+      },
+      square: {
+        top: CHROME_PADDING,
+        right: CHROME_PADDING * 2,
+        width: 700
+      }
+    }),
+    top = _useOrientationBased.top,
+    right = _useOrientationBased.right,
+    width = _useOrientationBased.width;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor;
+  var _useOrientationBased2 = useOrientationBased({
+      portrait: {
+        maxFontSize: 60
+      },
+      landscape: {
+        maxFontSize: 40
+      },
+      square: {
+        maxFontSize: 40
+      }
+    }),
+    maxFontSize = _useOrientationBased2.maxFontSize;
+  var _useVideoConfig2 = useVideoConfig(),
+    height = _useVideoConfig2.height;
+  var _distributeTextToFit = distributeTextToFit(text, width, height, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: top,
+      right: right,
+      width: width
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "right",
+      fontFamily: fontFamily,
+      color: color
+    }
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement(Revealer, {
+      key: index,
+      index: index
+    }, /*#__PURE__*/React.createElement(FloatAnimation, null, /*#__PURE__*/React.createElement("h1", {
+      style: _objectSpread(_objectSpread({}, defaultGlassmorphismStyles), {}, {
+        animationDelay: "".concat(index * 1000, "ms"),
+        fontSize: fontSize,
+        color: primaryColor,
+        borderRadius: borderRadius,
+        width: "fit-content",
+        padding: CHROME_PADDING / 2,
+        marginLeft: "auto"
+      })
+    }, line)));
+  }))));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/glassmorphism/animations.js

@@ -0,0 +1,30 @@
+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 { useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
+var ANIMATION_TIME = 5;
+var Floater = function Floater(_ref) {
+  var children = _ref.children;
+  var translateY = useTimeInterpolate([0, ANIMATION_TIME * 0.25, ANIMATION_TIME * 0.5, ANIMATION_TIME * 0.75, ANIMATION_TIME, ANIMATION_TIME * 1.25, ANIMATION_TIME * 1.5, ANIMATION_TIME * 1.75, ANIMATION_TIME * 2, ANIMATION_TIME * 2.25, ANIMATION_TIME * 2.5, ANIMATION_TIME * 2.75, ANIMATION_TIME * 3], [-5, 0, 10, 0, -5, 0, 10, 0, -5, 0, 10, 0, -5], {
+    extrapolateRight: "wrap",
+    extrapolateLeft: "wrap"
+  });
+  return React.Children.map(children, function (child, index) {
+    if (index === 0) {
+      return React.cloneElement(child, {
+        style: _objectSpread(_objectSpread({}, child.props.style), {}, {
+          transform: "translateY(".concat(translateY, "px)")
+        })
+      });
+    } else {
+      return child;
+    }
+  });
+};
+export var FloatAnimation = function FloatAnimation(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Floater, null, children);
+};

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

@@ -0,0 +1,9 @@
+export var defaultGlassmorphismStyles = {
+  background: "rgba(255, 255, 255, 0.2)",
+  boxShadow: "0 4px 30px rgba(0, 0, 0, 0.4)",
+  backdropFilter: "blur(10.6px)",
+  WebkitBackdropFilter: "blur(10.6px)",
+  border: "2px solid rgba(255, 255, 255, 0.13)",
+  transform: "translateZ(0)",
+  backfaceVisibility: "hidden"
+};

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

@@ -0,0 +1,252 @@
+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 { interpolate, 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 { SplitSentence } from "./components/SplitSentence";
+import { createAnimationCycles, glitchXInterpolate } from "./helpers.js";
+import { DisplacedText } from "./components/DisplacedText";
+import React, { useMemo } from "react";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var getValue = function getValue(x) {
+  if (x < 1) {
+    return 0;
+  }
+  if (x === 1) return 0;
+  if (x === 2) return 2;
+  if (x === 3) return 3;
+  if (x === 4) return 4;
+  if (x === 5) return 3;
+  if (x === 6) return 2;
+  if (x === 7) return 1;
+  if (x === 8) return 0;
+
+  // 9 or more
+  return 0;
+};
+var GlitchNametagEffect = function GlitchNametagEffect(_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,
+        maxTitleFontSize: 70
+      },
+      landscape: {
+        top: undefined,
+        left: 100,
+        bottom: 225,
+        maxWidth: width - 200,
+        maxNameFontSize: 120,
+        maxTitleFontSize: 75
+      },
+      square: {
+        bottom: 240,
+        left: 100,
+        top: undefined,
+        maxWidth: width - 200,
+        maxNameFontSize: 120,
+        maxTitleFontSize: 75
+      }
+    }),
+    top = _useOrientationBased.top,
+    left = _useOrientationBased.left,
+    bottom = _useOrientationBased.bottom,
+    maxWidth = _useOrientationBased.maxWidth,
+    maxNameFontSize = _useOrientationBased.maxNameFontSize,
+    maxTitleFontSize = _useOrientationBased.maxTitleFontSize;
+  var _distributeTextToFit = distributeTextToFit(name, maxWidth - 100, 300, maxNameFontSize),
+    nameFontSize = _distributeTextToFit.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    accentColor = _useTheme.accentColor;
+  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 userNameParts = [{
+    top: 0,
+    height: 10,
+    offsetX: glitchXInterpolate(frame, -width * 3.5, true)
+  }, {
+    top: 10,
+    height: 45,
+    offsetX: glitchXInterpolate(frame, -width * 4, true)
+  }, {
+    top: 45,
+    height: 50,
+    offsetX: glitchXInterpolate(frame, width * 3.25, true)
+  }, {
+    top: 50,
+    height: 80,
+    offsetX: glitchXInterpolate(frame, width * 3.75, true)
+  }, {
+    top: 80,
+    height: 100,
+    offsetX: glitchXInterpolate(frame, -width * 5, true)
+  }];
+  var randomize = true;
+  var delay = 45;
+  var userTitleParts = [{
+    top: 0,
+    height: 10,
+    offsetX: glitchXInterpolate(frame, -width * 1.5, randomize, delay)
+  }, {
+    top: 10,
+    height: 45,
+    offsetX: glitchXInterpolate(frame, -width * 1.5, randomize, delay)
+  }, {
+    top: 45,
+    height: 50,
+    offsetX: glitchXInterpolate(frame, width * 1.25, randomize, delay)
+  }, {
+    top: 50,
+    height: 80,
+    offsetX: glitchXInterpolate(frame, width * 1.75, randomize, delay)
+  }, {
+    top: 80,
+    height: 100,
+    offsetX: glitchXInterpolate(frame, -width * 2, randomize, delay)
+  }];
+  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 sentenceDisplacementOffset = getValue(cycle);
+  var sentenceParts = [{
+    top: 0,
+    height: 15,
+    offsetX: 0
+  }, {
+    top: 15,
+    height: 25,
+    offsetX: 0
+  }, {
+    top: 25,
+    height: 50,
+    offsetX: 0
+  }, {
+    top: 50,
+    height: 75,
+    offsetX: 0
+  }, {
+    top: 75,
+    height: 80,
+    offsetX: 0
+  }, {
+    top: 80,
+    height: 100,
+    offsetX: 0
+  }];
+  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",
+      left: left,
+      bottom: bottom,
+      top: top,
+      fontFamily: fontFamily,
+      fontStyle: "italic"
+    }
+  }, /*#__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,
+        fontWeight: 900,
+        fontSize: nameFontSize,
+        lineHeight: "".concat(nameFontSize * 4 / 5, "px"),
+        textShadow: "4px 4px 0px ".concat(hexToRgbHtml(getContrastColor(nameTextColor), 0.5))
+      }
+    }, /*#__PURE__*/React.createElement(SplitSentence, {
+      parts: userNameParts
+    }, /*#__PURE__*/React.createElement(DisplacedText, {
+      sentenceParts: sentenceParts,
+      offset: sentenceDisplacementOffset,
+      text: text,
+      variant: "warpFromRight"
+    })));
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      width: "fit-content",
+      maxWidth: maxWidth,
+      isolation: "isolate",
+      opacity: title ? 1 : 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: maxTitleFontSize,
+      color: titleTextColor,
+      fontWeight: 900,
+      textShadow: "4px 4px 0px ".concat(hexToRgbHtml(getContrastColor(titleTextColor), 0.5)),
+      lineHeight: "".concat(maxTitleFontSize * 4 / 5, "px")
+    }
+  }, /*#__PURE__*/React.createElement(SplitSentence, {
+    parts: userTitleParts
+  }, /*#__PURE__*/React.createElement(DisplacedText, {
+    sentenceParts: sentenceParts,
+    offset: sentenceDisplacementOffset,
+    text: title,
+    variant: "warpFromRight"
+  })))));
+};
+export var GlitchNametag = function GlitchNametag(_ref3) {
+  var name = _ref3.name,
+    title = _ref3.title,
+    themeSettings = _ref3.themeSettings;
+  return /*#__PURE__*/React.createElement(GlitchNametagEffect, {
+    name: name,
+    title: title,
+    themeSettings: themeSettings
+  });
+};

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

@@ -0,0 +1,156 @@
+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, { useMemo } from "react";
+import { AbsoluteFill, Img, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { CHROME_PADDING } from "../../../config.js";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { createAnimationCycles, glitchXInterpolate } from "./helpers.js";
+import { SplitSentence } from "./components/SplitSentence";
+import { GlitchAnimatedLine } from "./components/GlitchAnimatedLine";
+import { DisplacedText } from "./components/DisplacedText";
+import PausableImg from "../../../components/utils/PausableImg";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var GlitchSentence = function GlitchSentence(_ref) {
+  var sentence = _ref.sentence;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height,
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        paddingRight: CHROME_PADDING * 6,
+        padding: CHROME_PADDING * 2,
+        maxWidth: width * 0.45,
+        maxFontSize: 115
+      },
+      portrait: {
+        paddingRight: CHROME_PADDING * 3 + 60,
+        padding: CHROME_PADDING * 2 + 50,
+        maxWidth: width * 0.8,
+        maxFontSize: 75
+      },
+      square: {
+        paddingRight: CHROME_PADDING * 3,
+        padding: CHROME_PADDING * 2,
+        maxWidth: width * 0.8,
+        maxFontSize: 90
+      }
+    }),
+    padding = _useOrientationBased.padding,
+    paddingRight = _useOrientationBased.paddingRight,
+    maxWidth = _useOrientationBased.maxWidth,
+    maxFontSize = _useOrientationBased.maxFontSize;
+  var maxHeight = height;
+  var _distributeTextToFit = distributeTextToFit(sentence, maxWidth - 110, maxHeight - 100, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var frame = useCurrentFrame();
+  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 glitchyBackgroundOneOpacity = cycle > 4 && cycle < 8 ? 1 : 0;
+  var glitchyBackgroundTwoOpacity = cycle >= 8 && cycle < 12 ? 1 : 0;
+  var colorOffset = cycle >= 4 && cycle < 8 || cycle >= 12 && cycle < 16 ? 8 : 0;
+  var randomize = true;
+  var delay = 0;
+  var titleParts = [{
+    top: 0,
+    height: 10,
+    offsetX: glitchXInterpolate(frame, -width * 2.5, randomize, delay)
+  }, {
+    top: 10,
+    height: 45,
+    offsetX: glitchXInterpolate(frame, -width * 3, randomize, delay)
+  }, {
+    top: 45,
+    height: 50,
+    offsetX: glitchXInterpolate(frame, width * 2.25, randomize, delay)
+  }, {
+    top: 50,
+    height: 80,
+    offsetX: glitchXInterpolate(frame, width * 2.75, randomize, delay)
+  }, {
+    top: 80,
+    height: 100,
+    offsetX: glitchXInterpolate(frame, -width * 4, randomize, delay)
+  }];
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "flex",
+      padding: padding,
+      paddingRight: paddingRight,
+      justifyContent: "end",
+      alignItems: "end",
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: maxWidth,
+      height: maxHeight,
+      borderRadius: "30px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "end",
+      justifyContent: "center",
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(SplitSentence, {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "end",
+      alignItems: "end"
+    },
+    parts: titleParts
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement(GlitchAnimatedLine, {
+      key: index,
+      text: line,
+      delayInSeconds: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: fontSize,
+        fontWeight: 900,
+        textTransform: "uppercase",
+        fontStyle: "italic",
+        fontFamily: fontFamily
+      }
+    }, /*#__PURE__*/React.createElement(DisplacedText, {
+      text: line,
+      offset: colorOffset
+    })));
+  }))), /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 62000,
+    src: "https://cdn.zync.ai/assets/static/glitch1.png",
+    style: {
+      position: "absolute",
+      right: 0,
+      width: width,
+      height: height,
+      opacity: glitchyBackgroundOneOpacity,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 63000,
+    src: "https://cdn.zync.ai/assets/static/glitch2.png",
+    style: {
+      position: "absolute",
+      right: 0,
+      width: width,
+      height: height,
+      opacity: glitchyBackgroundTwoOpacity,
+      zIndex: 1
+    }
+  }));
+};