@zync/zync-screnplay-player 0.1.245 → 0.1.247

package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js

@@ -8,9 +8,9 @@ import React, { useEffect, useState } from 'react';
 import { delayRender, continueRender, cancelRender } from 'remotion';
 import { Lottie } from '@remotion/lottie';
 
-/**
- * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
- * Lottie expects: [r, g, b, a] where each component is 0‑1.
+/**
+ * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
+ * Lottie expects: [r, g, b, a] where each component is 0‑1.
  */
 var hexToRGBA = function hexToRGBA(hex) {
   var clean = hex.replace('#', '');
@@ -25,9 +25,9 @@ var hexToRGBA = function hexToRGBA(hex) {
   ];
 };
 
-/**
- * Recursively walks through shape objects and overrides any fill (fl) or
- * stroke (st) color with the provided RGBA array.
+/**
+ * Recursively walks through shape objects and overrides any fill (fl) or
+ * stroke (st) color with the provided RGBA array.
  */
 var _applyColor = function applyColor(shapes, rgba) {
   shapes === null || shapes === void 0 ? void 0 : shapes.forEach(function (shape) {
@@ -40,11 +40,11 @@ var _applyColor = function applyColor(shapes, rgba) {
   });
 };
 
-/**
- * Traverses all layers (top‑level + asset layers) and applies the primary
- * color to every fill / stroke it encounters. This is useful for Lottie files
- * that were exported with a single static color (e.g. white) and do not use
- * layer naming conventions like "PrimaryColor".
+/**
+ * Traverses all layers (top‑level + asset layers) and applies the primary
+ * color to every fill / stroke it encounters. This is useful for Lottie files
+ * that were exported with a single static color (e.g. white) and do not use
+ * layer naming conventions like "PrimaryColor".
  */
 var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   var _data$assets;
@@ -60,16 +60,16 @@ var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   });
 };
 
-/**
- * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
- * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
- * and fill colors with the supplied `primaryColor`.
- *
- * Props:
- *  • animationPath – URL or local path to the json file.
- *  • primaryColor  – HEX string, defaults to "#ffffff".
- *  • autoplay      – boolean, whether to start playing immediately.
- *  • loop          – boolean, whether to loop the animation.
+/**
+ * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
+ * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
+ * and fill colors with the supplied `primaryColor`.
+ *
+ * Props:
+ *  • animationPath – URL or local path to the json file.
+ *  • primaryColor  – HEX string, defaults to "#ffffff".
+ *  • autoplay      – boolean, whether to start playing immediately.
+ *  • loop          – boolean, whether to loop the animation.
  */
 export var LottieAnimationGlobal = function LottieAnimationGlobal(_ref) {
   var animationPath = _ref.animationPath,

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

@@ -73,14 +73,7 @@ var Square = function Square(_ref) {
       left: mainVideoLeftTransition,
       zIndex: 2
     }
-  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
-    url: virtualBgUrl,
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 2
-  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     faceMetadata: faceMetadata,
@@ -88,6 +81,8 @@ var Square = function Square(_ref) {
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
     centerHorizontally: true,
+    translateY: 100,
+    anchorToBottom: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     pauseWhenBuffering: true,
@@ -111,7 +106,14 @@ var Square = function Square(_ref) {
       left: mainVideoLeftTransition,
       zIndex: 0
     }
-  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 0
+  }) : faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: videoUrl,
     transparent: false,
@@ -120,6 +122,8 @@ var Square = function Square(_ref) {
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
     centerHorizontally: true,
+    translateY: 100,
+    anchorToBottom: true,
     muted: true,
     style: {
       zIndex: 0,
@@ -162,6 +166,8 @@ var Square = function Square(_ref) {
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: true,
+    translateY: 100,
+    anchorToBottom: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     transparent: true,
     muted: true
@@ -182,14 +188,12 @@ var Square = function Square(_ref) {
     muted: true,
     transparent: true,
     style: {
-      position: "relative",
-      top: "50%",
       objectFit: "cover",
-      width: mainVideoWidthTransition,
-      height: mainVideoHeightTransition,
+      height: "100%",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
       borderRadius: "30px",
-      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
-      transform: "translateY(-50%)"
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -282,15 +286,7 @@ var Portrait = function Portrait(_ref2) {
       left: mainVideoLeftTransition,
       zIndex: 2
     }
-  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
-    url: virtualBgUrl,
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    borderRadius: "20px",
-    zIndex: 2
-  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     faceMetadata: faceMetadata,
@@ -298,6 +294,8 @@ var Portrait = function Portrait(_ref2) {
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
     centerHorizontally: false,
+    translateY: 100,
+    anchorToBottom: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     pauseWhenBuffering: true,
@@ -323,7 +321,15 @@ var Portrait = function Portrait(_ref2) {
       transform: "scale(1)",
       zIndex: 0
     }
-  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: "20px",
+    zIndex: 0
+  }) : faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: videoUrl,
     faceMetadata: faceMetadata,
@@ -331,6 +337,8 @@ var Portrait = function Portrait(_ref2) {
     containerHeight: mainVideoHeightTransition,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     useAveragePosition: true,
+    translateY: 100,
+    anchorToBottom: true,
     muted: true,
     transparent: false,
     style: {
@@ -375,6 +383,8 @@ var Portrait = function Portrait(_ref2) {
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: false,
+    translateY: 100,
+    anchorToBottom: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     transparent: true,
     muted: true
@@ -397,14 +407,12 @@ var Portrait = function Portrait(_ref2) {
     muted: true,
     transparent: true,
     style: {
-      position: "relative",
-      width: mainVideoWidthTransition,
-      height: mainVideoHeightTransition,
-      top: "50%",
       objectFit: "cover",
+      height: "100%",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
       borderRadius: "30px",
-      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
-      transform: "translateY(-50%)"
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -491,21 +499,15 @@ var Landscape = function Landscape(_ref3) {
       left: mainVideoLeftTransition,
       zIndex: 2
     }
-  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
-    url: virtualBgUrl,
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    borderRadius: "20px",
-    zIndex: 2
-  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     faceMetadata: faceMetadata,
     containerWidth: mainVideoWidthTransition,
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
+    translateY: 100,
+    anchorToBottom: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     pauseWhenBuffering: true,
@@ -543,6 +545,8 @@ var Landscape = function Landscape(_ref3) {
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: false,
+    translateY: 100,
+    anchorToBottom: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     transparent: true,
     muted: true
@@ -564,14 +568,12 @@ var Landscape = function Landscape(_ref3) {
     muted: true,
     transparent: true,
     style: {
-      position: "relative",
-      top: "50%",
       height: "100%",
       objectFit: "cover",
       width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
       borderRadius: "30px",
-      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
-      transform: "translateY(-50%)"
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
-import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
-import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { FONT_FAMILIES } from '../../fontRegistry.js';
 import { useOrientationBased } from '../../hooks/useOrientationBased.js';
 import { useTheme } from '../../theme/hooks/useTheme.js';
 import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
@@ -11,10 +10,8 @@ import { CHROME_PADDING } from '../../config.js';
 import { useVirtualBackground } from '../../hooks/useVirtualBackground';
 import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
 import { useSafeZoneInsets } from '../utils/SafeZones';
-var _loadHeadlineFont = loadHeadlineFont(),
-  headlineFontFamily = _loadHeadlineFont.fontFamily;
-var _loadBodyFont = loadBodyFont(),
-  bodyFontFamily = _loadBodyFont.fontFamily;
+var headlineFontFamily = FONT_FAMILIES.OSWALD;
+var bodyFontFamily = FONT_FAMILIES.POPPINS;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== 'string' || !color.startsWith('#')) {
     return color;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
-import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
-import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { FONT_FAMILIES } from '../../fontRegistry.js';
 import { useOrientationBased } from '../../hooks/useOrientationBased.js';
 import { useTheme } from '../../theme/hooks/useTheme.js';
 import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
@@ -10,10 +9,8 @@ import { BlurOverlay } from '../utils/BlurOverlay';
 import { CHROME_PADDING } from '../../config.js';
 import { useVirtualBackground } from '../../hooks/useVirtualBackground';
 import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
-var _loadHeadlineFont = loadHeadlineFont(),
-  headlineFontFamily = _loadHeadlineFont.fontFamily;
-var _loadBodyFont = loadBodyFont(),
-  bodyFontFamily = _loadBodyFont.fontFamily;
+var headlineFontFamily = FONT_FAMILIES.OSWALD;
+var bodyFontFamily = FONT_FAMILIES.POPPINS;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== 'string' || !color.startsWith('#')) {
     return color;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
-import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
-import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { FONT_FAMILIES } from '../../fontRegistry.js';
 import { useOrientationBased } from '../../hooks/useOrientationBased.js';
 import { useTheme } from '../../theme/hooks/useTheme.js';
 import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
@@ -10,10 +9,8 @@ import { BlurOverlay } from '../utils/BlurOverlay';
 import { CHROME_PADDING } from '../../config.js';
 import { useVirtualBackground } from '../../hooks/useVirtualBackground';
 import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
-var _loadHeadlineFont = loadHeadlineFont(),
-  headlineFontFamily = _loadHeadlineFont.fontFamily;
-var _loadBodyFont = loadBodyFont(),
-  bodyFontFamily = _loadBodyFont.fontFamily;
+var headlineFontFamily = FONT_FAMILIES.OSWALD;
+var bodyFontFamily = FONT_FAMILIES.POPPINS;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== 'string' || !color.startsWith('#')) {
     return color;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
-import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
-import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { FONT_FAMILIES } from '../../fontRegistry.js';
 import { useOrientationBased } from '../../hooks/useOrientationBased.js';
 import { useTheme } from '../../theme/hooks/useTheme.js';
 import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
@@ -10,10 +9,8 @@ import { BlurOverlay } from '../utils/BlurOverlay';
 import { CHROME_PADDING } from '../../config.js';
 import { useVirtualBackground } from '../../hooks/useVirtualBackground';
 import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
-var _loadHeadlineFont = loadHeadlineFont(),
-  headlineFontFamily = _loadHeadlineFont.fontFamily;
-var _loadBodyFont = loadBodyFont(),
-  bodyFontFamily = _loadBodyFont.fontFamily;
+var headlineFontFamily = FONT_FAMILIES.OSWALD;
+var bodyFontFamily = FONT_FAMILIES.POPPINS;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== 'string' || !color.startsWith('#')) {
     return color;

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

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
-import { loadFont } from "@remotion/google-fonts/Poppins";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { useTheme } from "../../theme/hooks/useTheme.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
@@ -15,8 +15,7 @@ import { BlurOverlay } from "../utils/BlurOverlay";
 import { CHROME_PADDING } from "../../config.js";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.POPPINS;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== "string" || !color.startsWith("#")) {
     return color;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
-import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
-import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { FONT_FAMILIES } from '../../fontRegistry.js';
 import { useOrientationBased } from '../../hooks/useOrientationBased.js';
 import { useTheme } from '../../theme/hooks/useTheme.js';
 import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
@@ -10,10 +9,8 @@ import { BlurOverlay } from '../utils/BlurOverlay';
 import { CHROME_PADDING } from '../../config.js';
 import { useVirtualBackground } from '../../hooks/useVirtualBackground';
 import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
-var _loadHeadlineFont = loadHeadlineFont(),
-  headlineFontFamily = _loadHeadlineFont.fontFamily;
-var _loadBodyFont = loadBodyFont(),
-  bodyFontFamily = _loadBodyFont.fontFamily;
+var headlineFontFamily = FONT_FAMILIES.OSWALD;
+var bodyFontFamily = FONT_FAMILIES.POPPINS;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== 'string' || !color.startsWith('#')) {
     return color;

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

@@ -3,14 +3,13 @@ import { AbsoluteFill, OffthreadVideo, Audio, useVideoConfig, useCurrentFrame, E
 import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers";
-import { loadFont } from "@remotion/google-fonts/Kanit";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useTheme } from "../../theme/hooks/useTheme";
 import { BlurOverlay } from "../utils/BlurOverlay";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
 import FaceCenteredVideo from "../utils/FaceCenteredVideo";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.KANIT;
 export var DynamicTriangle = function DynamicTriangle(_ref) {
   var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var children = _ref.children,

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

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, Audio, Img, OffthreadVideo, Sequence, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
-import { loadFont as loadHeadlineFont } from "@remotion/google-fonts/Oswald";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { CHROME_PADDING } from "../../config.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
@@ -15,8 +15,7 @@ import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 import PausableImg from "../utils/PausableImg";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
-var _loadHeadlineFont = loadHeadlineFont(),
-  headlineFontFamily = _loadHeadlineFont.fontFamily;
+var headlineFontFamily = FONT_FAMILIES.OSWALD;
 var HOOK_STYLE_PRESETS = {
   punch_zoom: "punch_zoom",
   mono_shock: "mono_shock",

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

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from "react";
 import { AbsoluteFill, Audio, Img, useVideoConfig, spring, useCurrentFrame, useVideoConfig as useVideoConfigForFps, OffthreadVideo } from "remotion";
 import { LottieAnimationGlobal } from "../LottieAnimationGlobal";
-import { loadFont } from "@remotion/google-fonts/Oswald";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { CHROME_PADDING } from "../../config.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
@@ -17,8 +17,7 @@ import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 import { BlurOverlay } from "../utils/BlurOverlay";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.OSWALD;
 var Landscape = function Landscape(_ref) {
   var children = _ref.children,
     videoUrl = _ref.videoUrl,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { AbsoluteFill, Audio, OffthreadVideo, useVideoConfig, spring, useCurrentFrame, interpolate } from "remotion";
 import StretchText from "../utils/StretchText";
-import { loadFont } from "@remotion/google-fonts/Poppins";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased";
 import { useTheme } from "../../theme/hooks/useTheme";
 import { getBrighterColor } from "../../helpers/hexToRgb";
@@ -9,8 +9,7 @@ import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 import { BlurOverlay } from "../utils/BlurOverlay";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackground } from "../backgrounds/VirtualBackground";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.POPPINS;
 var KeyPointOverlayDepthComponent = function KeyPointOverlayDepthComponent(_ref) {
   var children = _ref.children,
     startVideoFrom = _ref.startVideoFrom,

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

@@ -4,7 +4,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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, useCurrentFrame, useVideoConfig } from "remotion";
-import { loadFont } from "@remotion/google-fonts/Poppins";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import React from "react";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { useTheme } from "../../theme/hooks/useTheme.js";
@@ -18,8 +18,7 @@ import PausableImg from "../utils/PausableImg";
 import { BlurOverlay } from "../utils/BlurOverlay";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.POPPINS;
 var landscapeClipPath = "polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%)";
 var portraitClipPath = "polygon(0 0, 100% 0, 100% 90%, 0% 100%)";
 var squareClipPath = "polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%)";

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

@@ -6,7 +6,7 @@ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(
 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, useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
-import { loadFont } from "@remotion/google-fonts/Poppins";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { CHROME_PADDING } from "../../config.js";
 import FaceCenteredVideo from "../utils/FaceCenteredVideo";
@@ -47,8 +47,7 @@ var seededShuffle = function seededShuffle(arr, key) {
   }
   return a;
 };
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.POPPINS;
 
 // Reuse the rotating words treatment from Keyword.jsx, but with
 // spring-in + continuous sine/cos drift and better fitting.

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

@@ -6,7 +6,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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, useCurrentFrame, useVideoConfig } from "remotion";
-import { loadFont } from "@remotion/google-fonts/Poppins";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import React from "react";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { useTheme } from "../../theme/hooks/useTheme.js";
@@ -19,8 +19,7 @@ import { BlurOverlay } from "../utils/BlurOverlay";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackground } from "../backgrounds/VirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.POPPINS;
 var landscapeClipPath = "polygon(100% 0%, 100% 100%, 7% 100%, 0 20%, 7% 0)";
 var portraitClipPath = "polygon(100% 0, 100% 95%, 10% 100%, 0 95%, 0% 0%)";
 var squareClipPath = "polygon(94% 0, 100% 14%, 89% 100%, 0% 100%, 0% 0%)";

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

@@ -5,7 +5,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, Audio, Easing, OffthreadVideo, useVideoConfig } from "remotion";
-import { loadFont } from "@remotion/google-fonts/Poppins";
+import { FONT_FAMILIES } from "../../fontRegistry.js";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
 import { useTheme } from "../../theme/hooks/useTheme.js";
@@ -17,8 +17,7 @@ import PausableImg from "../utils/PausableImg";
 import { BlurOverlay } from "../utils/BlurOverlay";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
-var _loadFont = loadFont(),
-  fontFamily = _loadFont.fontFamily;
+var fontFamily = FONT_FAMILIES.POPPINS;
 var adjustTimings = function adjustTimings(timings, adjustment) {
   return timings.map(function (timing) {
     return timing + adjustment;