@zync/zync-screnplay-player 0.1.227 → 0.1.229

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

@@ -15,6 +15,7 @@ import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 import PausableImg from "../utils/PausableImg";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+import { HookThreeGlitchOverlay } from "./HookThreeGlitchOverlay";
 var _loadHeadlineFont = loadHeadlineFont(),
   headlineFontFamily = _loadHeadlineFont.fontFamily;
 var HOOK_STYLE_PRESETS = {
@@ -24,6 +25,9 @@ var HOOK_STYLE_PRESETS = {
   border_alarm: "border_alarm",
   split_reveal: "split_reveal"
 };
+var coerceBoolean = function coerceBoolean(value) {
+  return value === true || value === "true" || value === 1 || value === "1";
+};
 var normalizeWordForMatch = function normalizeWordForMatch(word) {
   return word.toLowerCase().replace(/^[^a-z0-9]+|[^a-z0-9]+$/gi, "");
 };
@@ -218,9 +222,8 @@ var HookHeadline = function HookHeadline(_ref3) {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   });
-  var glitchOffset = style === HOOK_STYLE_PRESETS.glitch_verdict ? (frame % 2 === 0 ? 1 : -1) * 4 : 0;
   var headlineColor = style === HOOK_STYLE_PRESETS.mono_shock ? "rgba(255, 255, 255, 0.98)" : primaryContrast || "#ffffff";
-  var headlineTextShadow = style === HOOK_STYLE_PRESETS.glitch_verdict ? "3px 0 rgba(255, 40, 95, 0.9), -3px 0 rgba(0, 240, 255, 0.9), 0 10px 40px rgba(0, 0, 0, 0.55)" : style === HOOK_STYLE_PRESETS.mono_shock ? "0 3px 0 rgba(0, 0, 0, 0.48), 0 14px 36px rgba(0, 0, 0, 0.62)" : "0 12px 36px rgba(0, 0, 0, 0.45)";
+  var headlineTextShadow = style === HOOK_STYLE_PRESETS.mono_shock ? "0 3px 0 rgba(0, 0, 0, 0.48), 0 14px 36px rgba(0, 0, 0, 0.62)" : "0 12px 36px rgba(0, 0, 0, 0.45)";
   var containerStyle = style === HOOK_STYLE_PRESETS.mono_shock ? {
     display: "inline-flex",
     flexDirection: "column",
@@ -234,7 +237,7 @@ var HookHeadline = function HookHeadline(_ref3) {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       opacity: reveal * outroOpacity,
-      transform: "translate3d(".concat(glitchOffset, "px, ").concat((1 - reveal) * 24, "px, 0) scale(").concat(0.94 + reveal * 0.06, ")"),
+      transform: "translate3d(0, ".concat((1 - reveal) * 24, "px, 0) scale(").concat(0.94 + reveal * 0.06, ")"),
       willChange: "transform, opacity",
       maxWidth: maxWidth
     }
@@ -430,7 +433,13 @@ export var HookVideo = function HookVideo(_ref5) {
     hookDurationSeconds = _ref5$hookDurationSec === void 0 ? 1.6 : _ref5$hookDurationSec,
     hookAccentText = _ref5.hookAccentText,
     _ref5$disableHookSoun = _ref5.disableHookSounds,
-    disableHookSounds = _ref5$disableHookSoun === void 0 ? false : _ref5$disableHookSoun;
+    disableHookSounds = _ref5$disableHookSoun === void 0 ? false : _ref5$disableHookSoun,
+    _ref5$hookExitEffectE = _ref5.hookExitEffectEnabled,
+    hookExitEffectEnabled = _ref5$hookExitEffectE === void 0 ? false : _ref5$hookExitEffectE,
+    _ref5$hookThreeGlitch = _ref5.hookThreeGlitchEffectEnabled,
+    hookThreeGlitchEffectEnabled = _ref5$hookThreeGlitch === void 0 ? false : _ref5$hookThreeGlitch,
+    _ref5$disableHookThre = _ref5.disableHookThreeGlitchEffect,
+    disableHookThreeGlitchEffect = _ref5$disableHookThre === void 0 ? false : _ref5$disableHookThre;
   var frame = useCurrentFrame();
   var _useVideoConfig = useVideoConfig(),
     outputWidth = _useVideoConfig.width,
@@ -456,6 +465,7 @@ export var HookVideo = function HookVideo(_ref5) {
     primaryColor = _useTheme.primaryColor,
     primaryContrast = _useTheme.primaryContrast;
   var style = Object.values(HOOK_STYLE_PRESETS).includes(hookStyle) ? hookStyle : HOOK_STYLE_PRESETS.punch_zoom;
+  var titleStyle = style === HOOK_STYLE_PRESETS.glitch_verdict ? HOOK_STYLE_PRESETS.mono_shock : style;
   var baseZoom = videoZoom || 1;
   var _getHookTiming = getHookTiming({
       durationInFrames: durationInFrames,
@@ -467,28 +477,28 @@ export var HookVideo = function HookVideo(_ref5) {
     shortSegment = _getHookTiming.shortSegment;
   var preset = useOrientationBased({
     landscape: {
-      textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.38 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.46 : width * 0.58,
-      textBoxHeight: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.38 : height * 0.54,
-      maxFontSize: style === HOOK_STYLE_PRESETS.glitch_verdict ? 138 : 148,
-      top: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.17 : height * 0.19,
-      left: style === HOOK_STYLE_PRESETS.split_reveal ? CHROME_PADDING * 2.2 : style === HOOK_STYLE_PRESETS.mono_shock || style === HOOK_STYLE_PRESETS.glitch_verdict ? CHROME_PADDING * 2.1 : width * 0.21,
-      align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
+      textBoxWidth: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? width * 0.38 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? width * 0.46 : width * 0.58,
+      textBoxHeight: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.38 : height * 0.54,
+      maxFontSize: 148,
+      top: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.17 : height * 0.19,
+      left: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? CHROME_PADDING * 2.2 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? CHROME_PADDING * 2.1 : width * 0.21,
+      align: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
     },
     portrait: {
-      textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.78 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.76 : width * 0.84,
-      textBoxHeight: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.28 : height * 0.36,
-      maxFontSize: style === HOOK_STYLE_PRESETS.glitch_verdict ? 118 : 126,
-      top: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : height * 0.16,
-      left: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? width * 0.08 : CHROME_PADDING * 1.8,
-      align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
+      textBoxWidth: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? width * 0.78 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? width * 0.76 : width * 0.84,
+      textBoxHeight: titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.28 : height * 0.36,
+      maxFontSize: 126,
+      top: titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : height * 0.16,
+      left: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? width * 0.08 : CHROME_PADDING * 1.8,
+      align: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
     },
     square: {
-      textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.46 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.52 : width * 0.72,
-      textBoxHeight: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.32 : height * 0.42,
+      textBoxWidth: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? width * 0.46 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? width * 0.52 : width * 0.72,
+      textBoxHeight: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.32 : height * 0.42,
       maxFontSize: 116,
-      top: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.16 : height * 0.18,
-      left: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? width * 0.14 : CHROME_PADDING * 1.8,
-      align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
+      top: titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.16 : height * 0.18,
+      left: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? width * 0.14 : CHROME_PADDING * 1.8,
+      align: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
     }
   }, orientationOverride);
   var monoOverlayHoldFrames = style === HOOK_STYLE_PRESETS.mono_shock ? Math.round(fps * 0.55) : 0;
@@ -535,6 +545,9 @@ export var HookVideo = function HookVideo(_ref5) {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   }) : 0;
+  var threeGlitchDurationInFrames = Math.max(12, Math.min(24, Math.round(fps * 0.55), durationInFrames));
+  var threeGlitchStartFrame = Math.max(0, effectiveHookFrames - Math.round(threeGlitchDurationInFrames * 0.62));
+  var showThreeGlitch = !shortSegment && !coerceBoolean(disableHookThreeGlitchEffect) && (style === HOOK_STYLE_PRESETS.glitch_verdict || coerceBoolean(hookThreeGlitchEffectEnabled));
   var _getVideoTreatment = getVideoTreatment({
       frame: frame,
       style: style,
@@ -775,7 +788,15 @@ export var HookVideo = function HookVideo(_ref5) {
       objectFit: "cover",
       opacity: frame % 2 === 0 ? 0.35 : 0.12
     }
-  })) : null, flashOpacity > 0 ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+  })) : null, showThreeGlitch ? /*#__PURE__*/React.createElement(HookThreeGlitchOverlay, {
+    width: contentWidth,
+    height: contentHeight,
+    startFrame: threeGlitchStartFrame,
+    durationInFrames: threeGlitchDurationInFrames,
+    accentColor: accentColor,
+    intensity: style === HOOK_STYLE_PRESETS.glitch_verdict ? 1 : 0.72,
+    zIndex: 19
+  }) : null, flashOpacity > 0 ? /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       zIndex: 18,
       opacity: flashOpacity,
@@ -807,7 +828,7 @@ export var HookVideo = function HookVideo(_ref5) {
     accentColor: accentColor,
     accentContrast: accentContrast,
     primaryContrast: primaryContrast,
-    style: style,
+    style: titleStyle,
     frame: frame,
     fps: fps,
     hookFrames: effectiveHookFrames
@@ -834,7 +855,7 @@ export var HookVideo = function HookVideo(_ref5) {
   })) : null)), playHookSounds ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Audio, {
     src: staticFile("swoosh.mp3"),
     volume: 0.28
-  }), !shortSegment ? /*#__PURE__*/React.createElement(Sequence, {
+  }), !shortSegment && !hookExitEffectEnabled ? /*#__PURE__*/React.createElement(Sequence, {
     from: effectiveHookFrames
   }, /*#__PURE__*/React.createElement(Audio, {
     src: staticFile("ding-short.mp3"),

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

@@ -8,34 +8,34 @@ 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-/**
- * Face-Centered Video Component
- *
- * A reusable component that wraps OffthreadVideo to ensure the video is always
- * centered on a person's face within a flexible container.
- *
- * The video maintains its source dimensions and is positioned using translateX/translateY
- * to center the face within the container, regardless of container size.
+/**
+ * Face-Centered Video Component
+ *
+ * A reusable component that wraps OffthreadVideo to ensure the video is always
+ * centered on a person's face within a flexible container.
+ *
+ * The video maintains its source dimensions and is positioned using translateX/translateY
+ * to center the face within the container, regardless of container size.
  */
 
 import React from "react";
 import { OffthreadVideo, useCurrentFrame } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 
-/**
- * Calculate face-centered translation for flexible container
- * @param {Object} params - Configuration object
- * @param {Object} params.faceMetadata - Face detection metadata
- * @param {number} params.containerWidth - Container width in pixels
- * @param {number} params.containerHeight - Container height in pixels
- * @param {number} params.currentFrame - Current frame number (optional)
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
- * @param {boolean} params.useAveragePosition - Whether to use average face position
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally
- * @param {number} params.translateX - Additional translateX offset
- * @param {number} params.translateY - Additional translateY offset
- * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
- * @returns {Object} Transform styles and debug info
+/**
+ * Calculate face-centered translation for flexible container
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.containerWidth - Container width in pixels
+ * @param {number} params.containerHeight - Container height in pixels
+ * @param {number} params.currentFrame - Current frame number (optional)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} params.useAveragePosition - Whether to use average face position
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally
+ * @param {number} params.translateX - Additional translateX offset
+ * @param {number} params.translateY - Additional translateY offset
+ * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
+ * @returns {Object} Transform styles and debug info
  */
 var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation(_ref) {
   var _faceMetadata$metadat, _faceMetadata$metadat2;
@@ -214,8 +214,8 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
   };
 };
 
-/**
- * Get face data for a specific frame with optional interpolation
+/**
+ * Get face data for a specific frame with optional interpolation
  */
 function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
   var _prevFrame, _nextFrame;
@@ -274,8 +274,8 @@ function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
   return ((_prevFrame = prevFrame) === null || _prevFrame === void 0 ? void 0 : _prevFrame.data) || ((_nextFrame = nextFrame) === null || _nextFrame === void 0 ? void 0 : _nextFrame.data) || null;
 }
 
-/**
- * Calculate average face position from all frames with face data
+/**
+ * Calculate average face position from all frames with face data
  */
 function getAverageFaceData(frames) {
   if (!frames || frames.length === 0) return null;
@@ -310,14 +310,14 @@ function getAverageFaceData(frames) {
   };
 }
 
-/**
- * Calculate the negative space offset when face-centering a video
- *
- * @param {Object} faceMetadata - Face detection metadata object
- * @param {number} containerWidth - Container width in pixels
- * @param {number} containerHeight - Container height in pixels
- * @param {number} scale - Scale factor applied to the video
- * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
+/**
+ * Calculate the negative space offset when face-centering a video
+ *
+ * @param {Object} faceMetadata - Face detection metadata object
+ * @param {number} containerWidth - Container width in pixels
+ * @param {number} containerHeight - Container height in pixels
+ * @param {number} scale - Scale factor applied to the video
+ * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
  */
 export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(faceMetadata, containerWidth, containerHeight) {
   var _faceMetadata$metadat4, _faceMetadata$metadat5;
@@ -415,22 +415,22 @@ export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(
   };
 };
 
-/**
- * FaceCenteredVideo Component
- * @param {Object} props - Component props
- * @param {string} props.src - Video source URL
- * @param {Object} props.faceMetadata - Face detection metadata
- * @param {number} props.containerWidth - Container width in pixels (required)
- * @param {number} props.containerHeight - Container height in pixels (required)
- * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
- * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
- * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
- * @param {number} props.translateX - Additional translateX offset (optional)
- * @param {number} props.translateY - Additional translateY offset (optional)
- * @param {boolean} props.showDebugInfo - Whether to show debug information
- * @param {Object} props.style - Additional styles to apply to video
- * @param {string} props.className - CSS class name
- * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
+/**
+ * FaceCenteredVideo Component
+ * @param {Object} props - Component props
+ * @param {string} props.src - Video source URL
+ * @param {Object} props.faceMetadata - Face detection metadata
+ * @param {number} props.containerWidth - Container width in pixels (required)
+ * @param {number} props.containerHeight - Container height in pixels (required)
+ * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @param {number} props.translateX - Additional translateX offset (optional)
+ * @param {number} props.translateY - Additional translateY offset (optional)
+ * @param {boolean} props.showDebugInfo - Whether to show debug information
+ * @param {Object} props.style - Additional styles to apply to video
+ * @param {string} props.className - CSS class name
+ * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
  */
 export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
   var _faceMetadata$metadat7, _faceMetadata$metadat8, _faceMetadata$metadat9, _faceMetadata$metadat10;

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

@@ -15,10 +15,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useEffect, useState } from "react";
 import { Img, delayRender, continueRender } from "remotion";
 
-/**
- * PausableImg component that extends Remotion's Img with fetch validation.
- * It delays rendering until the image source can be successfully fetched.
- * If there's an error fetching the image, it renders nothing.
+/**
+ * PausableImg component that extends Remotion's Img with fetch validation.
+ * It delays rendering until the image source can be successfully fetched.
+ * If there's an error fetching the image, it renders nothing.
  */
 export var PausableImg = /*#__PURE__*/React.memo(function (_ref) {
   var src = _ref.src,

package/dist/screenplay/RemotionRenderer/components/utils/README.md

@@ -1,80 +1,80 @@
-# StretchText Component
-
-A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
-
-## Usage
-
-```jsx
-import StretchText from './StretchText';
-
-// Basic usage
-<StretchText text="Hello World" />
-
-// With custom styling
-<StretchText 
-  text="Contribution" 
-  color="#1a73e8" 
-  fontFamily="Arial" 
-  maxFontSize={200}
-  minFontSize={10}
-  style={{ fontWeight: 'bold' }}
-/>
-
-// With text stroke
-<StretchText 
-  text="Outlined Text" 
-  color="transparent"
-  textStrokeColor="white"
-  textStrokeWidth="2px"
-  style={{ fontWeight: 'bold' }}
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | string | required | The text to display |
-| `color` | string | '#000000' | Text color |
-| `fontFamily` | string | 'Arial' | Font family |
-| `maxFontSize` | number | 100 | Maximum font size in pixels |
-| `minFontSize` | number | 10 | Minimum font size in pixels |
-| `textStrokeColor` | string | undefined | Color of the text stroke |
-| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
-| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
-| `style` | object | {} | Additional style properties |
-
-## Examples
-
-The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
-
-- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
-- The text will always be contained within the parent container and will not overflow.
-- The component recalculates the font size when the window is resized.
-
-## Demo
-
-You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
-
-The demo shows several words of different lengths rendered in containers of the same width:
-
-- "Contribution" (longer word, smaller font)
-- "Work" (shorter word, larger font)
-- "Hello" (medium length word, medium font)
-- "Supercalifragilisticexpialidocious" (very long word, very small font)
-
-Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
-
-## Implementation Details
-
-The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
-
-The component uses SVG for rendering text, which provides several advantages:
-- Proper text-stroke rendering in headless mode
-- Better control over text positioning and alignment
-- Consistent rendering across different browsers and environments
-- Support for advanced SVG features like filters for text shadows
-
-For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
-
-The component also includes a resize listener to recalculate the font size when the window size changes.
+# StretchText Component
+
+A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
+
+## Usage
+
+```jsx
+import StretchText from './StretchText';
+
+// Basic usage
+<StretchText text="Hello World" />
+
+// With custom styling
+<StretchText 
+  text="Contribution" 
+  color="#1a73e8" 
+  fontFamily="Arial" 
+  maxFontSize={200}
+  minFontSize={10}
+  style={{ fontWeight: 'bold' }}
+/>
+
+// With text stroke
+<StretchText 
+  text="Outlined Text" 
+  color="transparent"
+  textStrokeColor="white"
+  textStrokeWidth="2px"
+  style={{ fontWeight: 'bold' }}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | string | required | The text to display |
+| `color` | string | '#000000' | Text color |
+| `fontFamily` | string | 'Arial' | Font family |
+| `maxFontSize` | number | 100 | Maximum font size in pixels |
+| `minFontSize` | number | 10 | Minimum font size in pixels |
+| `textStrokeColor` | string | undefined | Color of the text stroke |
+| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
+| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
+| `style` | object | {} | Additional style properties |
+
+## Examples
+
+The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
+
+- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
+- The text will always be contained within the parent container and will not overflow.
+- The component recalculates the font size when the window is resized.
+
+## Demo
+
+You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
+
+The demo shows several words of different lengths rendered in containers of the same width:
+
+- "Contribution" (longer word, smaller font)
+- "Work" (shorter word, larger font)
+- "Hello" (medium length word, medium font)
+- "Supercalifragilisticexpialidocious" (very long word, very small font)
+
+Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
+
+## Implementation Details
+
+The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
+
+The component uses SVG for rendering text, which provides several advantages:
+- Proper text-stroke rendering in headless mode
+- Better control over text positioning and alignment
+- Consistent rendering across different browsers and environments
+- Support for advanced SVG features like filters for text shadows
+
+For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
+
+The component also includes a resize listener to recalculate the font size when the window size changes.

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

@@ -2,9 +2,9 @@ import React from "react";
 import { AbsoluteFill } from "remotion";
 import StretchText from "./StretchText";
 
-/**
- * Demo component to showcase the StretchText component
- * Shows how different words stretch to the same width with different font sizes
+/**
+ * Demo component to showcase the StretchText component
+ * Shows how different words stretch to the same width with different font sizes
  */
 var StretchTextDemo = function StretchTextDemo() {
   var containerStyle = {

package/dist/screenplay/RemotionRenderer/development.js

@@ -51,7 +51,7 @@ var renderer = new RemotionRenderer({
           },
           hookText: "Send a personal thank you note",
           hookAccentText: "thank you note",
-          hookStyle: "mono_shock",
+          hookStyle: "glitch_verdict",
           hookDurationSeconds: 14.805,
           paddingLeft: 8.72,
           paddingRight: 39.366822,

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

@@ -1,11 +1,11 @@
-/**
- * Converts seconds and a portion of frames to a numeric value of seconds.
- *
- * @param {number} seconds - The number of full seconds.
- * @param {number} nthFrame - The current frame within the second.
- * @param {number} delayInSeconds - Optional delay that adds up to the calculation
- * @param {number} frameRate - The frame rate (frames per second).
- * @return {number} The total time in seconds (with decimals for frames).
+/**
+ * Converts seconds and a portion of frames to a numeric value of seconds.
+ *
+ * @param {number} seconds - The number of full seconds.
+ * @param {number} nthFrame - The current frame within the second.
+ * @param {number} delayInSeconds - Optional delay that adds up to the calculation
+ * @param {number} frameRate - The frame rate (frames per second).
+ * @return {number} The total time in seconds (with decimals for frames).
  */
 export var convertToSeconds = function convertToSeconds(seconds, nthFrame) {
   var delayInSeconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;

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

@@ -4,10 +4,10 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof 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; }
 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; }
-/**
- * Calculate video styles based on face detection metadata
- * This helper adjusts video positioning and transform origin to center faces in the viewport
- * when zooming, accounting for objectFit: "cover" behavior
+/**
+ * Calculate video styles based on face detection metadata
+ * This helper adjusts video positioning and transform origin to center faces in the viewport
+ * when zooming, accounting for objectFit: "cover" behavior
  */
 export var getFaceBasedVideoStyles = function getFaceBasedVideoStyles(_ref) {
   var faceMetadata = _ref.faceMetadata,