@zync/zync-screnplay-player 0.1.251 → 0.1.253

package/dist/screenplay/RemotionRenderer/assets/wordObjects/manifest.json

@@ -0,0 +1,67 @@
+{
+  "upstream": "https://github.com/microsoft/fluentui-emoji",
+  "commit": "1ffb34c752ecf5d402f04cfb4b392c77f57c54bc",
+  "license": "MIT",
+  "assets": {
+    "plane": {
+      "sourcePath": "assets/Airplane/3D/airplane_3d.png",
+      "sha256": "dda8d8e9ccaca71973f4ee75fcab085dcffbb89f3987a9d2cc5401f186268fa1",
+      "bytes": 39468
+    },
+    "clock": {
+      "sourcePath": "assets/Alarm clock/3D/alarm_clock_3d.png",
+      "sha256": "1aa6929e1baa440db535fd321868dc76ddd888bf3e4f4333d37800ff2ec41c74",
+      "bytes": 42751
+    },
+    "light_bulb": {
+      "sourcePath": "assets/Light bulb/3D/light_bulb_3d.png",
+      "sha256": "df7b09aa18301507e6fb8c279df66d9afa465b6fed3e63d2efa84dacebdbbf79",
+      "bytes": 22450
+    },
+    "money": {
+      "sourcePath": "assets/Money bag/3D/money_bag_3d.png",
+      "sha256": "cec19b9cf0beac5bbd27a07dcbe1e68c54b04112b4641165705ccb920f230292",
+      "bytes": 34132
+    },
+    "rocket": {
+      "sourcePath": "assets/Rocket/3D/rocket_3d.png",
+      "sha256": "4636925a1dfc76a45dc83c08b983699d39143a0978f794a4e2dfb6cbffdcd7ab",
+      "bytes": 36274
+    },
+    "target": {
+      "sourcePath": "assets/Bullseye/3D/bullseye_3d.png",
+      "sha256": "2b2a2d9eec76c5649b8207b050f9135ce666c9d94694e5577aade50c53768437",
+      "bytes": 42883
+    },
+    "phone": {
+      "sourcePath": "assets/Mobile phone/3D/mobile_phone_3d.png",
+      "sha256": "c72cf9f888cb74cb8852679184e0dac945ed0340839c98a86c653f51e1e3504d",
+      "bytes": 26886
+    },
+    "computer": {
+      "sourcePath": "assets/Laptop/3D/laptop_3d.png",
+      "sha256": "3b8a267f6c3d2721af925782bdbc11c4e1bc9ae806c5c875557b100393665aab",
+      "bytes": 29028
+    },
+    "book": {
+      "sourcePath": "assets/Books/3D/books_3d.png",
+      "sha256": "36f75eaa1e1a849fc950f43962b447c206d96244858468240a6a81beaa97f7be",
+      "bytes": 26332
+    },
+    "key": {
+      "sourcePath": "assets/Key/3D/key_3d.png",
+      "sha256": "ae59ce2b8dcfaa1afcdfe91bde7cc88cf06a8493686a6676706d1c891bb349eb",
+      "bytes": 22458
+    },
+    "globe": {
+      "sourcePath": "assets/Globe showing europe-africa/3D/globe_showing_europe-africa_3d.png",
+      "sha256": "a69baec3cc48ed5206d171f5f494e3ab06665277ec4a3acc7e6bf3962ee460ad",
+      "bytes": 42555
+    },
+    "chart": {
+      "sourcePath": "assets/Chart increasing/3D/chart_increasing_3d.png",
+      "sha256": "dd5e6b29aa4067c5a4d9e152119497832d70e094b380998e5f5b0c51abbb3a64",
+      "bytes": 42157
+    }
+  }
+}

package/dist/screenplay/RemotionRenderer/components/effects/CaptionWordObjectOverlay.js

@@ -0,0 +1,275 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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, Img, Sequence, continueRender, delayRender, useCurrentFrame, useCurrentScale, useVideoConfig } from "remotion";
+import { getWordObjectArtwork } from "../../helpers/emojiCatalog.js";
+import { loadWordObjectArtwork } from "../../helpers/loadWordObjectArtwork.js";
+import { isEnabledWordObject } from "../../helpers/captionWordObjects.js";
+import { getWordObjectMotion, placeCaptionWordObject, projectFaceRects } from "../../helpers/captionWordObjectGeometry.js";
+import { cleanFacemetadata } from "../../helpers/cleanFacemetadata.js";
+import { calculateFaceCenteredTranslation } from "../utils/FaceCenteredVideo";
+var WordObject = function WordObject(_ref) {
+  var _props$output;
+  var event = _ref.event,
+    renderSource = _ref.renderSource,
+    geometry = _ref.geometry,
+    fontFamily = _ref.fontFamily,
+    color = _ref.color;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    props = _useVideoConfig.props;
+  var playerScale = useCurrentScale();
+  var lineRef = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var measurementRootRef = React.useRef(null);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    measurement = _React$useState2[0],
+    setMeasurement = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    artwork = _React$useState4[0],
+    setArtwork = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    imageFailed = _React$useState6[0],
+    setImageFailed = _React$useState6[1];
+  var source = event.punctuation.__wordObjectImageUrl || getWordObjectArtwork(event.punctuation.wordObject.assetId);
+  React.useEffect(function () {
+    var handle = delayRender("Load caption emoji");
+    var cancelled = false;
+    setArtwork(null);
+    setImageFailed(false);
+    loadWordObjectArtwork(source).then(function (result) {
+      if (!cancelled) setArtwork(result);
+      // Allow React to commit the loaded image before releasing this frame.
+      requestAnimationFrame(function () {
+        return continueRender(handle);
+      });
+    });
+    return function () {
+      cancelled = true;
+      continueRender(handle);
+    };
+  }, [source]);
+  var orientation = (props === null || props === void 0 ? void 0 : (_props$output = props.output) === null || _props$output === void 0 ? void 0 : _props$output.orientation) || (width === height ? "square" : "portrait");
+  React.useEffect(function () {
+    var _document$fonts;
+    var handle = delayRender("Measure caption word object source");
+    var cancelled = false;
+    var measure = function measure() {
+      var _faceMetadata$metadat, _faceMetadata$metadat2, _faceMetadata$metadat3, _faceMetadata$metadat4;
+      if (cancelled) return;
+      var line = lineRef.current;
+      var word = line === null || line === void 0 ? void 0 : line.querySelector("[data-word-index=\"".concat(event.punctuation.index, "\"]"));
+      var root = rootRef.current;
+      if (!line || !word || !root) {
+        setMeasurement({
+          placement: null
+        });
+        continueRender(handle);
+        return;
+      }
+      var rootRect = root.getBoundingClientRect();
+      var convert = function convert(rect) {
+        return {
+          left: (rect.left - rootRect.left) / playerScale,
+          top: (rect.top - rootRect.top) / playerScale,
+          right: (rect.right - rootRect.left) / playerScale,
+          bottom: (rect.bottom - rootRect.top) / playerScale
+        };
+      };
+      var anchor = convert(word.getBoundingClientRect());
+      var faceMetadata = cleanFacemetadata(geometry === null || geometry === void 0 ? void 0 : geometry.faceMetadata);
+      var videoProperties = faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat = faceMetadata.metadata) === null || _faceMetadata$metadat === void 0 ? void 0 : _faceMetadata$metadat.videoProperties;
+      var rawBoxes = ((faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat2 = faceMetadata.metadata) === null || _faceMetadata$metadat2 === void 0 ? void 0 : _faceMetadata$metadat2.frames) || []).map(function (f) {
+        var _f$face_data;
+        return (_f$face_data = f.face_data) === null || _f$face_data === void 0 ? void 0 : _f$face_data.face_bbox;
+      }).filter(Boolean);
+      var averageBox = faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat3 = faceMetadata.metadata) === null || _faceMetadata$metadat3 === void 0 ? void 0 : (_faceMetadata$metadat4 = _faceMetadata$metadat3.averageFaceData) === null || _faceMetadata$metadat4 === void 0 ? void 0 : _faceMetadata$metadat4.face_bbox;
+      if (averageBox) rawBoxes.push(averageBox);
+      var translation = faceMetadata ? calculateFaceCenteredTranslation({
+        faceMetadata: faceMetadata,
+        containerWidth: width,
+        containerHeight: height,
+        currentFrame: 0,
+        useAveragePosition: true,
+        centerHorizontally: false,
+        orientation: orientation
+      }) : null;
+      var sameSize = (videoProperties === null || videoProperties === void 0 ? void 0 : videoProperties.width) === width && (videoProperties === null || videoProperties === void 0 ? void 0 : videoProperties.height) === height;
+      var projection = sameSize ? {
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+        originX: 0,
+        originY: 0
+      } : translation === null || translation === void 0 ? void 0 : translation.projection;
+      var faceRects = projectFaceRects({
+        boxes: rawBoxes,
+        hasFaceMetadata: (geometry === null || geometry === void 0 ? void 0 : geometry.faceMetadata) != null,
+        projection: projection,
+        width: width,
+        height: height,
+        videoZoom: geometry === null || geometry === void 0 ? void 0 : geometry.videoZoom,
+        framePadding: geometry === null || geometry === void 0 ? void 0 : geometry.framePadding
+      });
+      var wordRects = _toConsumableArray(measurementRootRef.current.querySelectorAll("[data-word-index]")).map(function (node) {
+        return convert(node.getBoundingClientRect());
+      });
+      // Measure the active-word envelope of every phrase in this segment so an
+      // object that outlives its source phrase also clears subsequent captions.
+      var captionTop = Math.min.apply(Math, _toConsumableArray(wordRects.map(function (r) {
+        return r.top;
+      })));
+      var placement = placeCaptionWordObject({
+        width: width,
+        height: height,
+        anchor: anchor,
+        captionTop: captionTop,
+        faceRects: faceRects
+      });
+      setMeasurement({
+        placement: placement,
+        anchor: anchor,
+        sourceStyle: window.getComputedStyle(word)
+      });
+      continueRender(handle);
+    };
+    Promise.resolve((_document$fonts = document.fonts) === null || _document$fonts === void 0 ? void 0 : _document$fonts.ready).then(measure)["catch"](function () {
+      if (!cancelled) setMeasurement({
+        placement: null
+      });
+      continueRender(handle);
+    });
+    return function () {
+      cancelled = true;
+      continueRender(handle);
+    };
+  }, [event, geometry, width, height, orientation, playerScale]);
+  var placement = measurement === null || measurement === void 0 ? void 0 : measurement.placement;
+  var motion = getWordObjectMotion({
+    frame: frame,
+    fps: fps,
+    durationInFrames: event.durationInFrames,
+    assetId: event.punctuation.wordObject.assetId
+  });
+  var scale = width / 1080;
+  var wordX = placement ? placement.startX + (placement.x - placement.startX) * motion.rise : 0;
+  var wordY = placement ? placement.startY + (placement.y - placement.startY) * motion.rise : 0;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    ref: rootRef,
+    style: {
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    ref: measurementRootRef,
+    style: {
+      visibility: "hidden"
+    },
+    "aria-hidden": "true"
+  }, renderSource(event.transcript, event.punctuation.index, event.punctuation.start, lineRef), event.sourceTranscripts.filter(function (transcript) {
+    return transcript !== event.transcript;
+  }).map(function (transcript, index) {
+    var _transcript$punctuati, _transcript$punctuati2, _transcript$punctuati3;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, renderSource(transcript, 0, (_transcript$punctuati = (_transcript$punctuati2 = transcript.punctuations) === null || _transcript$punctuati2 === void 0 ? void 0 : (_transcript$punctuati3 = _transcript$punctuati2[0]) === null || _transcript$punctuati3 === void 0 ? void 0 : _transcript$punctuati3.start) !== null && _transcript$punctuati !== void 0 ? _transcript$punctuati : transcript.from, {
+      current: null
+    }));
+  })), placement && artwork && !imageFailed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-word-object-copy": true,
+    style: {
+      position: "absolute",
+      left: wordX,
+      top: wordY,
+      transform: "translate(-50%, -50%) ".concat(measurement.sourceStyle.transform === "none" ? "" : measurement.sourceStyle.transform),
+      opacity: motion.wordOpacity,
+      fontFamily: fontFamily,
+      fontSize: measurement.sourceStyle.fontSize,
+      fontWeight: measurement.sourceStyle.fontWeight,
+      lineHeight: measurement.sourceStyle.lineHeight,
+      padding: measurement.sourceStyle.padding,
+      backgroundColor: measurement.sourceStyle.backgroundColor,
+      borderRadius: measurement.sourceStyle.borderRadius,
+      textTransform: "uppercase",
+      whiteSpace: "nowrap",
+      color: color || measurement.sourceStyle.color,
+      textShadow: measurement.sourceStyle.textShadow
+    }
+  }, event.word), /*#__PURE__*/React.createElement(Img, {
+    "data-word-object": event.punctuation.wordObject.assetId,
+    src: artwork,
+    maxRetries: 0,
+    onError: function onError() {
+      return setImageFailed(true);
+    },
+    style: {
+      position: "absolute",
+      left: placement.x,
+      top: placement.y + motion.hover * scale,
+      width: placement.size,
+      height: placement.size,
+      objectFit: "contain",
+      opacity: motion.opacity,
+      transform: "translate(-50%, -50%) rotate(".concat(motion.rotation, "deg) scale(").concat(motion.scale, ")"),
+      filter: motion.glow ? "drop-shadow(0 0 ".concat(12 * scale, "px rgba(255,220,90,").concat(motion.glow, "))") : "drop-shadow(0 ".concat(3 * scale, "px ").concat(4 * scale, "px rgba(0,0,0,0.35))")
+    }
+  })) : null);
+};
+export var CaptionWordObjectOverlay = function CaptionWordObjectOverlay(_ref2) {
+  var transcripts = _ref2.transcripts,
+    renderSource = _ref2.renderSource,
+    geometry = _ref2.geometry,
+    fontFamily = _ref2.fontFamily,
+    color = _ref2.color;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width,
+    height = _useVideoConfig2.height,
+    fps = _useVideoConfig2.fps;
+  var events = React.useMemo(function () {
+    return transcripts.flatMap(function (transcript) {
+      return (transcript.punctuations || []).filter(function (p) {
+        return isEnabledWordObject(p.wordObject) && !p.__wordObjectSuppressed && !p.__wordObjectOnsetClipped && !p.__wordObjectImageUnavailable && Number.isInteger(p.__wordObjectDurationInFrames) && p.__wordObjectDurationInFrames > 0 && Number.isFinite(p.start);
+      }).map(function (punctuation) {
+        return {
+          transcript: transcript,
+          punctuation: punctuation,
+          word: transcript.text.split(" ")[punctuation.index],
+          durationInFrames: punctuation.__wordObjectDurationInFrames,
+          sourceTranscripts: transcripts
+        };
+      });
+    });
+  }, [transcripts, fps]);
+  if (width > height) return null;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 20,
+      pointerEvents: "none"
+    }
+  }, events.map(function (event, index) {
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: event.punctuation.start,
+      durationInFrames: event.durationInFrames
+    }, /*#__PURE__*/React.createElement(WordObject, {
+      event: event,
+      renderSource: renderSource,
+      geometry: geometry,
+      fontFamily: fontFamily,
+      color: color
+    }));
+  }));
+};

package/dist/screenplay/RemotionRenderer/components/effects/Sentence.js

@@ -1,12 +1,16 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
 import { useThemedComponents } from "../../theme/hooks/useThemedComponents.js";
 import { useVideoConfig } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
 import { KeyPointOverlayDepth } from "../layouts/KeyPointOverlayDepth";
+import { getHeadingColors } from "../../helpers/headingColors.js";
 export var Sentence = function Sentence(_ref) {
   var sentence = _ref.sentence,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    headingTextColor = _ref.headingTextColor,
+    headingBackgroundColor = _ref.headingBackgroundColor;
   var Sentence = useThemedComponents("Sentence", theme);
   var _useVideoConfig = useVideoConfig(),
     width = _useVideoConfig.width,
@@ -40,11 +44,14 @@ export var Sentence = function Sentence(_ref) {
   var _distributeTextToFit = distributeTextToFit(sentence, maxWidth - sentencePadding * 2, maxHeight - sentencePadding * 2, maxFontSize),
     lines = _distributeTextToFit.lines,
     fontSize = _distributeTextToFit.fontSize;
-  return /*#__PURE__*/React.createElement(Sentence, {
+  return /*#__PURE__*/React.createElement(Sentence, _extends({
     sentence: sentence,
     lines: lines,
     fontSize: fontSize,
     maxHeight: maxHeight,
     maxWidth: maxWidth
-  });
+  }, getHeadingColors({
+    headingTextColor: headingTextColor,
+    headingBackgroundColor: headingBackgroundColor
+  })));
 };

package/dist/screenplay/RemotionRenderer/components/layouts/Keyword.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
 import { FONT_FAMILIES } from "../../fontRegistry.js";
 import React from "react";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
@@ -50,11 +50,9 @@ var Logo = function Logo(_ref) {
 var Word = function Word(_ref2) {
   var word = _ref2.word,
     index = _ref2.index;
-  var _React$useMemo = React.useMemo(function () {
-      return distributeTextToFit(word, 300, 120, 50);
-    }, [word]),
-    fontSize = _React$useMemo.fontSize,
-    lines = _React$useMemo.lines;
+  var _distributeTextToFit = distributeTextToFit(word, 300, 120, 50),
+    fontSize = _distributeTextToFit.fontSize,
+    lines = _distributeTextToFit.lines;
   var frame = useCurrentFrame();
   var timings = [0, 90];
   var options = {};
@@ -357,7 +355,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       height: "100%",
       mixBlendMode: "screen"
     },
-    src: staticFile("plexus1-1080.mp4"),
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
     startFrom: 120
   }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
     words: words
@@ -438,7 +436,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       height: "100%",
       mixBlendMode: "screen"
     },
-    src: staticFile("plexus1-1080.mp4"),
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
     startFrom: 120
   }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
     words: words
@@ -498,7 +496,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       height: "100%",
       mixBlendMode: "screen"
     },
-    src: staticFile("plexus1-1080.mp4"),
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
     startFrom: 120
   }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
     words: words

package/dist/screenplay/RemotionRenderer/components/layouts/KeywordStudioBackdrop.js

@@ -5,7 +5,7 @@ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Sym
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 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; }
 import React from "react";
-import { AbsoluteFill, Audio, OffthreadVideo, staticFile, useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
+import { AbsoluteFill, Audio, OffthreadVideo, useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
 import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { CHROME_PADDING } from "../../config.js";
@@ -67,11 +67,9 @@ var Word = function Word(_ref2) {
     maxWidth = _ref3.maxWidth,
     maxHeight = _ref3.maxHeight,
     maxFontSize = _ref3.maxFontSize;
-  var _React$useMemo = React.useMemo(function () {
-      return distributeTextToFit(word, maxWidth !== null && maxWidth !== void 0 ? maxWidth : 350, maxHeight !== null && maxHeight !== void 0 ? maxHeight : 120, maxFontSize !== null && maxFontSize !== void 0 ? maxFontSize : 54);
-    }, [word, maxWidth, maxHeight, maxFontSize]),
-    lines = _React$useMemo.lines,
-    fontSize = _React$useMemo.fontSize;
+  var _distributeTextToFit = distributeTextToFit(word, maxWidth !== null && maxWidth !== void 0 ? maxWidth : 350, maxHeight !== null && maxHeight !== void 0 ? maxHeight : 120, maxFontSize !== null && maxFontSize !== void 0 ? maxFontSize : 54),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
   var frame = useCurrentFrame();
   var _useVideoConfig = useVideoConfig(),
     fps = _useVideoConfig.fps;
@@ -546,7 +544,7 @@ var BackdropFrame = function BackdropFrame(_ref5) {
       mixBlendMode: "screen",
       opacity: 0.35 // softer integration
     },
-    src: staticFile("plexus1-1080.mp4"),
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
     startFrom: 120,
     muted: true
   }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {

package/dist/screenplay/RemotionRenderer/components/layouts/SimpleFrameSentence.js

@@ -12,6 +12,8 @@ export var SimpleFrameSentence = function SimpleFrameSentence(props) {
   }
   return /*#__PURE__*/React.createElement(SimpleFrame, props, /*#__PURE__*/React.createElement(Sentence, {
     theme: props.theme,
-    sentence: props.sentenceText
+    sentence: props.sentenceText,
+    headingTextColor: props.headingTextColor,
+    headingBackgroundColor: props.headingBackgroundColor
   }), props.children);
 };

package/dist/screenplay/RemotionRenderer/components/utils/FaceCenteredVideo.js

@@ -194,6 +194,14 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
   return {
     transform: transform,
     transformOrigin: transformOrigin,
+    // Exact numeric projection for overlays sharing this video's coordinate system.
+    projection: {
+      scale: scale,
+      translateX: (finalTranslateX + horizontalOffset) * scale,
+      translateY: finalTranslateY * scale,
+      originX: faceX,
+      originY: anchorToBottom ? sourceHeight : faceY
+    },
     debugInfo: {
       frameIndex: useAveragePosition ? "AVERAGE" : frameIndex,
       relativeFaceX: relativeFaceX.toFixed(3),
@@ -569,4 +577,5 @@ export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
     }
   }, "Error: ", debugInfo.error)));
 };
+export { calculateFaceCenteredTranslation };
 export default FaceCenteredVideo;

package/dist/screenplay/RemotionRenderer/helpers/captionWordObjectGeometry.js

@@ -0,0 +1,143 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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; }
+var intersects = function intersects(a, b) {
+  return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
+};
+export var projectFaceRects = function projectFaceRects(_ref) {
+  var boxes = _ref.boxes,
+    projection = _ref.projection,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$hasFaceMetadata = _ref.hasFaceMetadata,
+    hasFaceMetadata = _ref$hasFaceMetadata === void 0 ? false : _ref$hasFaceMetadata,
+    _ref$videoZoom = _ref.videoZoom,
+    videoZoom = _ref$videoZoom === void 0 ? 1 : _ref$videoZoom,
+    _ref$framePadding = _ref.framePadding,
+    framePadding = _ref$framePadding === void 0 ? 0 : _ref$framePadding;
+  // Missing face metadata must not hide otherwise valid caption objects.
+  if (!(boxes !== null && boxes !== void 0 && boxes.length) && !hasFaceMetadata) return [];
+  if (!projection || !(boxes !== null && boxes !== void 0 && boxes.length) || ![projection.scale, projection.translateX, projection.translateY, projection.originX, projection.originY, videoZoom, framePadding].every(Number.isFinite) || projection.scale <= 0) return [{
+    left: 0,
+    top: 0,
+    right: width,
+    bottom: height * 2 / 3
+  }];
+  var scale = projection.scale,
+    translateX = projection.translateX,
+    translateY = projection.translateY,
+    originX = projection.originX,
+    originY = projection.originY;
+  var rects = [];
+  var _iterator = _createForOfIteratorHelper(boxes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var box = _step.value;
+      if (!Array.isArray(box) || box.length < 4 || !box.every(Number.isFinite) || box[2] <= 0 || box[3] <= 0) continue;
+      // Union across the video's full zoom ramp; metadata coordinates use the same
+      // transform origin and translation as FaceCenteredVideo.
+      for (var _i = 0, _arr = [1, Math.max(1, videoZoom)]; _i < _arr.length; _i++) {
+        var zoom = _arr[_i];
+        var x = originX + (box[0] - originX) * scale + translateX;
+        var y = originY + (box[1] - originY) * scale + translateY;
+        var padding = 24 * width / 1080 + framePadding;
+        rects.push({
+          left: width / 2 + (x - width / 2) * zoom - padding,
+          top: height / 2 + (y - height / 2) * zoom - padding,
+          right: width / 2 + (x + box[2] * scale - width / 2) * zoom + padding,
+          bottom: height / 2 + (y + box[3] * scale - height / 2) * zoom + padding
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return rects.length ? rects : [{
+    left: 0,
+    top: 0,
+    right: width,
+    bottom: height * 2 / 3
+  }];
+};
+export var placeCaptionWordObject = function placeCaptionWordObject(_ref2) {
+  var width = _ref2.width,
+    height = _ref2.height,
+    anchor = _ref2.anchor,
+    captionTop = _ref2.captionTop,
+    faceRects = _ref2.faceRects;
+  var scale = width / 1080;
+  var gap = 24 * scale;
+  var leftLimit = width * 0.06;
+  var rightLimit = width * 0.85;
+  var startX = (anchor.left + anchor.right) / 2;
+  var startY = (anchor.top + anchor.bottom) / 2;
+  if (![width, height, captionTop, startX, startY].every(Number.isFinite)) return null;
+  var protectedRects = faceRects || [];
+  var _loop = function _loop() {
+      // Includes rotation, entry overshoot, hover and shadow.
+      var halfEnvelope = size * 0.62 + 12 * scale;
+      var x = Math.max(leftLimit + halfEnvelope, Math.min(rightLimit - halfEnvelope, startX));
+      var y = captionTop - gap - halfEnvelope;
+      var envelope = {
+        left: x - halfEnvelope,
+        top: y - halfEnvelope,
+        right: x + halfEnvelope,
+        bottom: y + halfEnvelope
+      };
+      var wordFlight = {
+        left: Math.min(anchor.left, x - size / 2),
+        right: Math.max(anchor.right, x + size / 2),
+        top: Math.min(anchor.top, y - size / 2),
+        bottom: Math.max(anchor.bottom, y + size / 2)
+      };
+      if (envelope.top < 0 || envelope.bottom > height || envelope.left < leftLimit || envelope.right > rightLimit || protectedRects.some(function (face) {
+        return intersects(envelope, face) || intersects(wordFlight, face);
+      })) return 0; // continue
+      return {
+        v: {
+          x: x,
+          y: y,
+          size: size,
+          startX: startX,
+          startY: startY,
+          envelope: envelope
+        }
+      };
+    },
+    _ret;
+  for (var size = 128 * scale; size >= 80 * scale - 0.01; size -= 8 * scale) {
+    _ret = _loop();
+    if (_ret === 0) continue;
+    if (_ret) return _ret.v;
+  }
+  return null;
+};
+export var getWordObjectMotion = function getWordObjectMotion(_ref3) {
+  var frame = _ref3.frame,
+    fps = _ref3.fps,
+    durationInFrames = _ref3.durationInFrames,
+    assetId = _ref3.assetId;
+  var motionAsset = {
+    "fluent3d_v1:2708-fe0f": "plane",
+    "fluent3d_v1:23f0": "clock",
+    "fluent3d_v1:1f4a1": "light_bulb"
+  }[assetId] || assetId;
+  var seconds = frame / fps;
+  var rise = Math.max(0, Math.min(1, seconds / 0.35));
+  var easedRise = 1 - Math.pow(1 - rise, 3);
+  var exit = Math.max(0, Math.min(1, (durationInFrames - frame) / (0.3 * fps)));
+  var opacity = Math.min(1, Math.max(0, (seconds - 0.05) / 0.3)) * exit;
+  var hoverStrength = Math.max(0, Math.min(1, (seconds - 0.35) / 0.15));
+  return {
+    rise: easedRise,
+    wordOpacity: 1 - rise,
+    opacity: opacity,
+    scale: (0.55 + 0.45 * rise + Math.sin(Math.PI * rise) * 0.12) * (0.8 + 0.2 * exit),
+    hover: Math.sin(seconds * 3) * 6 * hoverStrength,
+    rotation: Math.sin(seconds * 2.5) * (motionAsset === "plane" ? 6 : motionAsset === "clock" ? 5 : 3) * hoverStrength,
+    glow: motionAsset === "light_bulb" ? (0.5 + Math.sin(seconds * 4) * 0.2) * opacity : 0
+  };
+};