@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,136 @@
+import { AbsoluteFill, Easing, useVideoConfig } from "remotion";
+import { 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 { useTheme } from "../../hooks/useTheme.js";
+import React from "react";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var BigBoldTitle = function BigBoldTitle(_ref) {
+  var text = _ref.text;
+  // Calculate time-based values using convertToSeconds
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height,
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        backdropHeightFactor: 0.6
+      },
+      portrait: {
+        backdropHeightFactor: 0.3
+      },
+      square: {
+        backdropHeightFactor: 0.5
+      }
+    }),
+    backdropHeightFactor = _useOrientationBased.backdropHeightFactor;
+  var _distributeTextToFit = distributeTextToFit(text, width * 0.65, height * backdropHeightFactor * 1.3, 210),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var disappearStartTime = convertToSeconds(3, 0);
+  var disappearDuration = convertToSeconds(0.3, 0);
+  var startScaleTime = convertToSeconds(0, 0); // Start at 0 seconds
+  var endScaleTime = convertToSeconds(1, 0); // End at 0.5 seconds
+
+  // Adjust rectangleScale calculation to use an appropriate time range
+  var rectangleScale = useTimeInterpolate([startScaleTime, endScaleTime],
+  // Input range in seconds
+  [0, 2],
+  // Output range for width
+  {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var disappearScale = useTimeInterpolate([disappearStartTime, disappearStartTime + disappearDuration], [100, 110], {
+    easing: Easing["in"](Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var opacity = useTimeInterpolate([disappearStartTime, disappearStartTime + disappearDuration], [1, 0], {
+    easing: Easing["in"](Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var _useOrientationBased2 = useOrientationBased({
+      landscape: {
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "160px"
+      },
+      portrait: {
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "120px"
+      },
+      square: {
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "120px"
+      }
+    }),
+    alignItems = _useOrientationBased2.alignItems,
+    justifyContent = _useOrientationBased2.justifyContent;
+  var _useTheme = useTheme(),
+    primaryContrast = _useTheme.primaryContrast;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      // Center aligns items vertically
+      justifyContent: "center",
+      padding: CHROME_PADDING * 2.5,
+      transform: "scale(".concat(disappearScale, "%)")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "92%",
+      // Adjust height as needed
+      backgroundColor: "#000000b6",
+      // Adjust color as needed
+      transform: "scale(".concat(rectangleScale, ")"),
+      opacity: opacity
+    }
+  }), lines.map(function (line, lineIndex) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: lineIndex,
+      style: {
+        display: "flex",
+        marginRight: "30px",
+        marginBottom: fontSize === 131 ? "-45px" : "-30px",
+        flexDirection: "row",
+        justifyContent: "flex-start"
+      }
+    }, line.split(" ").map(function (word, wordIndex) {
+      // alert(lines);
+      var delayTime = convertToSeconds(0.2, lineIndex * 0.2 * 30 + 0.1 + wordIndex * 0.12 * 30 // Reduce these multipliers for smoother transitions
+      );
+      var scale = useTimeInterpolate([delayTime, delayTime + convertToSeconds(0.3, 0)], [0, 100], {
+        easing: Easing["in"](Easing.cubic),
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        key: wordIndex,
+        style: {
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          paddingLeft: "2rem",
+          fontWeight: "900",
+          textAlign: "center",
+          transform: "scale(".concat(scale, "%)"),
+          color: "white",
+          whiteSpace: "nowrap",
+          textTransform: "uppercase",
+          transformOrigin: "bottom",
+          opacity: opacity // Apply opacity for fade-out effect
+        }
+      }, word);
+    }));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionColor.js

@@ -0,0 +1,67 @@
+import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var CaptionColor = function CaptionColor(_ref) {
+  var transcripts = _ref.transcripts;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 100,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 110,
+        bottom: 110
+      },
+      square: {
+        fontSize: 100,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var containerWidth = width * 0.8;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.2, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: accentColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.2,
+        borderRadius: 10,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        padding: "0 30px",
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textShadow: "5px 3px 0px ".concat(accentContrast),
+        backgroundColor: accentContrast,
+        fontWeight: 700,
+        textWrap: "nowrap"
+      }
+    }, transcript.text));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionColorInverse.js

@@ -0,0 +1,67 @@
+import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var CaptionColorInverse = function CaptionColorInverse(_ref) {
+  var transcripts = _ref.transcripts;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 100,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 110,
+        bottom: 110
+      },
+      square: {
+        fontSize: 100,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var containerWidth = width * 0.8;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.2, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: accentContrast,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.2,
+        borderRadius: 10,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        padding: "0 30px",
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textShadow: "5px 3px 0px ".concat(accentColor),
+        backgroundColor: accentColor,
+        fontWeight: 700,
+        textWrap: "nowrap"
+      }
+    }, transcript.text));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionColorShadow.js

@@ -0,0 +1,66 @@
+import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var CaptionColorShadow = function CaptionColorShadow(_ref) {
+  var transcripts = _ref.transcripts;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 100,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 110,
+        bottom: 110
+      },
+      square: {
+        fontSize: 100,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var containerWidth = width * 0.8;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.2, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: accentColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.2,
+        borderRadius: 10,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        padding: "0 30px",
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textShadow: "5px 3px 0px ".concat(accentContrast),
+        fontWeight: 700,
+        textWrap: "nowrap"
+      }
+    }, transcript.text));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionElegant.js

@@ -0,0 +1,134 @@
+import { AbsoluteFill, Sequence, interpolate, random, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont as loadRegularFont } from "@remotion/google-fonts/Montserrat";
+import { loadFont as loadCursiveFont } from "@remotion/google-fonts/Rochester";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadRegularFont = loadRegularFont(),
+  regularFontFamily = _loadRegularFont.fontFamily;
+var _loadCursiveFont = loadCursiveFont(),
+  cursiveFontFamily = _loadCursiveFont.fontFamily;
+var toNumber = function toNumber(value, fallback) {
+  var parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+};
+export var CaptionElegant = function CaptionElegant(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 65,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 90,
+        bottom: 110
+      },
+      square: {
+        fontSize: 64,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var containerWidth = width * 0.78;
+  var baseColor = color || "#ffffff";
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, transcriptIndex) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.72, fontSize * 1.5, fontSize),
+      textFontSize = _distributeTextToFit.fontSize;
+    var words = transcript.text.split(/\s+/).filter(Boolean);
+    var longestWordIndex = words.length > 0 ? words.reduce(function (acc, currentWord, index) {
+      var sanitizedLength = currentWord.replace(/[^A-Za-z0-9]/g, "").length || currentWord.length;
+      if (sanitizedLength > acc.length) {
+        return {
+          index: index,
+          length: sanitizedLength
+        };
+      }
+      return acc;
+    }, {
+      index: 0,
+      length: 0
+    }).index : -1;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: "".concat(transcriptIndex, "-").concat(transcript.from),
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: textFontSize / 4,
+        justifyContent: "center",
+        alignItems: "flex-end",
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: containerWidth,
+        margin: 0,
+        color: baseColor,
+        fontSize: textFontSize,
+        textAlign: "center",
+        fontFamily: regularFontFamily,
+        lineHeight: 1.08,
+        textTransform: "none"
+      }
+    }, words.map(function (word, wordIndex) {
+      var _transcript$punctuati;
+      var punctuation = (_transcript$punctuati = transcript.punctuations) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.find(function (item) {
+        return item.index === wordIndex;
+      });
+      var transcriptFrom = toNumber(transcript.from, 0);
+      var wordStart = toNumber(punctuation === null || punctuation === void 0 ? void 0 : punctuation.start, transcriptFrom);
+      var wordEnd = toNumber(punctuation === null || punctuation === void 0 ? void 0 : punctuation.end, wordStart);
+      var isActive = frame >= wordStart && frame <= wordEnd;
+      var isCursiveWord = wordIndex === longestWordIndex;
+      var appearProgress = spring({
+        frame: Math.max(0, frame - wordStart),
+        fps: fps,
+        config: {
+          damping: 18,
+          stiffness: 130,
+          mass: 0.6
+        }
+      });
+      var opacity = frame >= wordStart ? Math.min(1, appearProgress) : 0;
+      var translateY = interpolate(appearProgress, [0, 1], [18, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      var randomSeed = "caption-elegant-".concat(transcript.id || transcriptIndex, "-").concat(wordIndex);
+      var sizeVariance = 0.88 + random(randomSeed) * 0.45;
+      var sizeMultiplier = isCursiveWord ? 2.5 : 1;
+      return /*#__PURE__*/React.createElement("span", {
+        key: "".concat(randomSeed, "-").concat(word),
+        style: {
+          display: "inline-flex",
+          alignItems: "flex-end",
+          alignSelf: "baseline",
+          padding: "0 ".concat(textFontSize * 0.08, "px"),
+          fontSize: textFontSize * sizeVariance * sizeMultiplier,
+          fontFamily: isCursiveWord ? cursiveFontFamily : regularFontFamily,
+          fontWeight: isCursiveWord ? 500 : 800,
+          letterSpacing: isCursiveWord ? "0.01em" : "-0.01em",
+          lineHeight: 1,
+          verticalAlign: "bottom",
+          opacity: opacity,
+          transform: "translateY(".concat(translateY, "px)"),
+          color: baseColor,
+          textShadow: isCursiveWord ? "0 0 1px rgba(255,255,255,.85), 0 0 4px rgba(255,255,255,.55), 0 0 10px rgba(255,255,255,.25)" : "0 3px 0 rgba(0,0,0,.18)",
+          WebkitFontSmoothing: "antialiased",
+          MozOsxFontSmoothing: "grayscale",
+          transition: "font-family 0.2s ease, font-weight 0.2s ease",
+          whiteSpace: "pre"
+        }
+      }, word);
+    })));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionEmphasis.js

@@ -0,0 +1,122 @@
+import { AbsoluteFill, Sequence, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var Text = function Text(_ref) {
+  var transcript = _ref.transcript,
+    color = _ref.color,
+    accentColor = _ref.accentColor,
+    frame = _ref.frame;
+  return transcript.text.split(" ").map(function (word, wordIndex) {
+    var _transcript$punctuati, _transcript$punctuati2;
+    var isPunctuated = frame >= Number(((_transcript$punctuati = transcript.punctuations.find(function (p) {
+      return p.index === wordIndex;
+    })) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.start) || 0) && Number(frame <= ((_transcript$punctuati2 = transcript.punctuations.find(function (p) {
+      return p.index === wordIndex;
+    })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
+    var currentFrame = useCurrentFrame();
+    var _useVideoConfig = useVideoConfig(),
+      fps = _useVideoConfig.fps;
+    var scale = spring({
+      frame: currentFrame,
+      fps: fps,
+      from: 20,
+      // Start from above
+      to: 100,
+      // Move to its original position
+      stiffness: 200,
+      // Increase stiffness for a more pronounced bounce
+      damping: 80,
+      // Decrease damping to allow more bounce
+      durationInFrames: 15 // Duration for the bounce
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      key: wordIndex,
+      style: {
+        willChange: "transform",
+        transform: "scale(".concat(scale, "%)"),
+        position: "relative",
+        borderRadius: "10px",
+        color: isPunctuated ? color || accentColor : "white"
+      }
+    }, /*#__PURE__*/React.createElement("span", null, word.split("").map(function (_char) {
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          display: "inline-block",
+          position: "relative",
+          textShadow: "4px 4px 0 #000,\n                              -4px 4px 0 #000,\n                              4px -4px 0 #000,\n                              -4px -4px 0 #000,\n                              0px 4px 0 #000,\n                              0px -4px 0 #000,\n                              -4px 0px 0 #000,\n                              4px 0px 0 #000,\n                              8px 8px 0 #000,\n                              -8px 8px 0 #000,\n                              8px -8px 0 #000,\n                              -8px -8px 0 #000,\n                              0px 8px 0 #000,\n                              0px -8px 0 #000,\n                              -8px 0px 0 #000,\n                              8px 0px 0 #000,\n                              4px 8px 0 #000,\n                              -4px 8px 0 #000,\n                              4px -8px 0 #000, \n                              -4px -8px 0 #000,\n                              8px 4px 0 #000,\n                              -8px 4px 0 #000,  \n                              8px -4px 0 #000,\n                              -8px -4px 0 #000"
+        }
+      }, _char);
+    })));
+  });
+};
+export var CaptionEmphasis = function CaptionEmphasis(_ref2) {
+  var transcripts = _ref2.transcripts,
+    color = _ref2.color;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 90,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 80,
+        bottom: 110
+      },
+      square: {
+        fontSize: 60,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor;
+  var containerWidth = width * 0.5;
+  var frame = useCurrentFrame();
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.8, fontSize * 20, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: textFontSize / 3,
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translate(-50%, -50%)",
+        fontSize: textFontSize,
+        textAlign: "center",
+        fontFamily: fontFamily,
+        textWrap: "nowrap",
+        lineHeight: 1,
+        fontWeight: 900,
+        color: "#fff",
+        letterSpacing: textFontSize / 5
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      frame: frame,
+      transcript: transcript,
+      color: color,
+      accentColor: accentColor,
+      fontSize: fontSize
+    })));
+  }));
+};

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionPunctuated.js

@@ -0,0 +1,84 @@
+import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../hooks/useTheme";
+import { getBrighterColor } from "../../../helpers/hexToRgb";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+export var CaptionPunctuated = function CaptionPunctuated(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 75,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 60,
+        bottom: 110
+      },
+      square: {
+        fontSize: 75,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var containerWidth = width * 0.8;
+  var frame = useCurrentFrame();
+  var brighterColor = getBrighterColor(primaryColor, accentColor);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      lines = _distributeTextToFit.lines,
+      textFontSize = _distributeTextToFit.fontSize;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: fontSize / 4,
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        fontSize: textFontSize,
+        textTransform: "uppercase",
+        textAlign: "center",
+        fontFamily: fontFamily,
+        fontWeight: 700,
+        textWrap: "nowrap"
+      }
+    }, transcript.text.split(" ").map(function (word, wordIndex) {
+      var _transcript$punctuati, _transcript$punctuati2;
+      var isPunctuated = frame >= Number(((_transcript$punctuati = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.start) || 0) && Number(frame <= ((_transcript$punctuati2 = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
+      return /*#__PURE__*/React.createElement("span", {
+        key: wordIndex,
+        style: {
+          color: isPunctuated ? color || brighterColor : "white",
+          textShadow: "3px 3px 3px #000"
+        }
+      }, word);
+    })));
+  }));
+};