@remotion/promo-pages 4.0.484 → 4.0.486

package/dist/Homepage.js

@@ -1091,8 +1091,8 @@ import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
   useContext as useContext32,
-  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo31,
   useRef as useRef23,
   useState as useState16
@@ -1100,7 +1100,7 @@ import {
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -1126,8 +1126,8 @@ import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
   useContext as useContext36,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect11,
+  useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
@@ -1136,13 +1136,13 @@ import React37, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
   useState as useState20
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React39, { useMemo as useMemo37 } from "react";
@@ -1159,9 +1159,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo39,
   useRef as useRef28
 } from "react";
@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.484";
+var VERSION = "4.0.486";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2741,6 +2741,12 @@ var textSchema = {
     default: undefined,
     description: "Color"
   },
+  "style.fontFamily": {
+    type: "font-family",
+    default: undefined,
+    description: "Font family",
+    keyframable: false
+  },
   "style.fontSize": {
     type: "number",
     default: undefined,
@@ -2806,6 +2812,14 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -5173,10 +5187,21 @@ var getNestedValue = (obj, key) => {
   }
   return current;
 };
-var readValuesFromProps = (props, keys) => {
+var getRuntimeValueForSchemaKey = ({
+  flatSchema,
+  key,
+  props
+}) => {
+  const value = getNestedValue(props, key);
+  if (flatSchema[key]?.type === "text-content" && typeof value !== "string") {
+    return;
+  }
+  return value;
+};
+var readValuesFromProps = (props, keys, flatSchema) => {
   const out = {};
   for (const key of keys) {
-    out[key] = getNestedValue(props, key);
+    out[key] = flatSchema ? getRuntimeValueForSchemaKey({ flatSchema, key, props }) : getNestedValue(props, key);
   }
   return out;
 };
@@ -5184,6 +5209,7 @@ var selectActiveKeys = (schema, values) => {
   return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
 };
 var mergeValues = ({
+  flatSchema,
   props,
   valuesDotNotation,
   schemaKeys,
@@ -5192,6 +5218,9 @@ var mergeValues = ({
   const merged = { ...props };
   for (const key of schemaKeys) {
     const value = valuesDotNotation[key];
+    if (flatSchema[key]?.type === "text-content" && value === undefined) {
+      continue;
+    }
     const parts = key.split(".");
     if (parts.length === 1) {
       merged[key] = value;
@@ -5209,7 +5238,8 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
-  deleteNestedKey(merged, propsToDelete);
+  const propsToDeleteWithoutTextContent = new Set([...propsToDelete].filter((key) => !(flatSchema[key]?.type === "text-content" && valuesDotNotation[key] === undefined)));
+  deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
 var stackToOverrideMap = {};
@@ -5256,8 +5286,12 @@ var withInteractivitySchema = ({
       return newOverrideId;
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
-    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
+      flatSchema,
+      key,
+      props
+    }));
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
     const controls = useMemo13(() => {
       return {
         schema: schemaWithSequenceName,
@@ -5285,6 +5319,7 @@ var withInteractivitySchema = ({
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
+      flatSchema,
       props,
       valuesDotNotation,
       schemaKeys: activeKeys,
@@ -7908,7 +7943,7 @@ var getTimelineDuration = ({
     trimAfter
   });
   if (parentSequenceDurationInFrames !== null) {
-    const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+    const cappedDuration = Math.min(parentSequenceDurationInFrames, mediaDuration);
     return Number(cappedDuration.toFixed(10));
   }
   return mediaDuration;
@@ -10042,6 +10077,18 @@ var loadImage = ({
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
+var waitForNextFrame = ({
+  onFrame
+}) => {
+  if (typeof requestAnimationFrame === "undefined") {
+    onFrame();
+    return () => {
+      return;
+    };
+  }
+  const frame = requestAnimationFrame(onFrame);
+  return () => cancelAnimationFrame(frame);
+};
 var CanvasImageContent = forwardRef10(({
   src,
   width,
@@ -10071,6 +10118,17 @@ var CanvasImageContent = forwardRef10(({
     overrideId: controls?.overrideId ?? null
   });
   const sequenceContext = useContext32(SequenceContext);
+  const pendingLoadDelayRef = useRef23(null);
+  const continuePendingLoadDelay = useCallback17(() => {
+    const pending = pendingLoadDelayRef.current;
+    if (!pending || pending.continued) {
+      return;
+    }
+    pending.continued = true;
+    pending.unblock();
+    continueRender2(pending.handle);
+    pendingLoadDelayRef.current = null;
+  }, [continueRender2]);
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
@@ -10088,7 +10146,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -10100,17 +10158,13 @@ var CanvasImageContent = forwardRef10(({
     };
     const controller = new AbortController;
     let cancelled = false;
-    let continued = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
-    const continueRenderOnce = () => {
-      if (continued) {
-        return;
-      }
-      continued = true;
-      unblock();
-      continueRender2(handle);
+    pendingLoadDelayRef.current = {
+      handle,
+      unblock,
+      continued: false
     };
     const attemptLoad = () => {
       loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
@@ -10118,13 +10172,9 @@ var CanvasImageContent = forwardRef10(({
           return;
         }
         setLoadedImage(image);
-      }).then(() => {
-        if (!cancelled) {
-          continueRenderOnce();
-        }
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continueRenderOnce();
+          continuePendingLoadDelay();
           return;
         }
         errorCount++;
@@ -10138,7 +10188,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continueRenderOnce();
+          continuePendingLoadDelay();
         } else {
           cancelRender2(err);
         }
@@ -10151,12 +10201,12 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continueRenderOnce();
+      continuePendingLoadDelay();
     };
   }, [
     actualSrc,
     cancelRender2,
-    continueRender2,
+    continuePendingLoadDelay,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
@@ -10167,13 +10217,16 @@ var CanvasImageContent = forwardRef10(({
     sequenceContext?.postmounting,
     sequenceContext?.premounting
   ]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
     const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
     let cancelled = false;
     let continued = false;
+    let cancelWaitForNextFrame = () => {
+      return;
+    };
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -10208,7 +10261,15 @@ var CanvasImageContent = forwardRef10(({
       height: canvasHeight
     }).then((completed) => {
       if (completed && !cancelled) {
-        continueRenderOnce();
+        cancelWaitForNextFrame = waitForNextFrame({
+          onFrame: () => {
+            if (cancelled) {
+              return;
+            }
+            continueRenderOnce();
+            continuePendingLoadDelay();
+          }
+        });
       }
     }).catch((err) => {
       if (cancelled) {
@@ -10217,12 +10278,14 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
+        continuePendingLoadDelay();
       } else {
         cancelRender2(err);
       }
     });
     return () => {
       cancelled = true;
+      cancelWaitForNextFrame();
       continueRenderOnce();
     };
   }, [
@@ -10230,6 +10293,7 @@ var CanvasImageContent = forwardRef10(({
     cancelRender2,
     chainState,
     continueRender2,
+    continuePendingLoadDelay,
     delayRender2,
     fit,
     height,
@@ -10439,7 +10503,7 @@ var ImgContent = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -10706,7 +10770,8 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
-  ...textSchema
+  ...textSchema,
+  ...textContentSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -11334,7 +11399,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -11391,7 +11456,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -11495,7 +11560,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -11670,7 +11735,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11713,7 +11778,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11730,7 +11795,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -12511,7 +12576,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -12555,7 +12620,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12645,7 +12710,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect12(() => {
+    useLayoutEffect13(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -13259,6 +13324,9 @@ var ExpertsPageContent = ({ Link }) => {
     })
   });
 };
+// src/components/homepage/Pricing.tsx
+import { useMemo as useMemo53 } from "react";
+
 // ../design/dist/esm/index.mjs
 import * as React23 from "react";
 import * as React8 from "react";
@@ -14605,7 +14673,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect22, useMemo as useMemo43, useState as useState21 } from "react";
+import React32, { useEffect as useEffect21, useMemo as useMemo43, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -16711,6 +16779,94 @@ var getBoundingBox = (d) => {
   const unarced = removeATSHVQInstructions(normalizeInstructions(parsed));
   return getBoundingBoxFromInstructions(unarced);
 };
+var translateSegments = (segments, x, y) => {
+  return segments.map((segment) => {
+    if (segment.type === "a" || segment.type === "c" || segment.type === "v" || segment.type === "s" || segment.type === "h" || segment.type === "l" || segment.type === "m" || segment.type === "q" || segment.type === "t") {
+      return segment;
+    }
+    if (segment.type === "V") {
+      return {
+        type: "V",
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "H") {
+      return {
+        type: "H",
+        x: segment.x + x
+      };
+    }
+    if (segment.type === "A") {
+      return {
+        type: "A",
+        rx: segment.rx,
+        ry: segment.ry,
+        largeArcFlag: segment.largeArcFlag,
+        sweepFlag: segment.sweepFlag,
+        xAxisRotation: segment.xAxisRotation,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "Z") {
+      return segment;
+    }
+    if (segment.type === "C") {
+      return {
+        type: "C",
+        cp1x: segment.cp1x + x,
+        cp1y: segment.cp1y + y,
+        cp2x: segment.cp2x + x,
+        cp2y: segment.cp2y + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "Q") {
+      return {
+        type: "Q",
+        cpx: segment.cpx + x,
+        cpy: segment.cpy + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "S") {
+      return {
+        type: "S",
+        cpx: segment.cpx + x,
+        cpy: segment.cpy + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "T") {
+      return {
+        type: "T",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "L") {
+      return {
+        type: "L",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "M") {
+      return {
+        type: "M",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    throw new Error(`Unknown segment type: ${segment.type}`);
+  });
+};
+var translatePath = (path, x, y) => {
+  return serializeInstructions(translateSegments(parsePath(path), x, y));
+};
 var mod = (x, m) => {
   return (x % m + m) % m;
 };
@@ -17272,94 +17428,6 @@ var getLength = (path) => {
   const constructucted = construct(path);
   return constructucted.totalLength;
 };
-var translateSegments = (segments, x, y) => {
-  return segments.map((segment) => {
-    if (segment.type === "a" || segment.type === "c" || segment.type === "v" || segment.type === "s" || segment.type === "h" || segment.type === "l" || segment.type === "m" || segment.type === "q" || segment.type === "t") {
-      return segment;
-    }
-    if (segment.type === "V") {
-      return {
-        type: "V",
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "H") {
-      return {
-        type: "H",
-        x: segment.x + x
-      };
-    }
-    if (segment.type === "A") {
-      return {
-        type: "A",
-        rx: segment.rx,
-        ry: segment.ry,
-        largeArcFlag: segment.largeArcFlag,
-        sweepFlag: segment.sweepFlag,
-        xAxisRotation: segment.xAxisRotation,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "Z") {
-      return segment;
-    }
-    if (segment.type === "C") {
-      return {
-        type: "C",
-        cp1x: segment.cp1x + x,
-        cp1y: segment.cp1y + y,
-        cp2x: segment.cp2x + x,
-        cp2y: segment.cp2y + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "Q") {
-      return {
-        type: "Q",
-        cpx: segment.cpx + x,
-        cpy: segment.cpy + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "S") {
-      return {
-        type: "S",
-        cpx: segment.cpx + x,
-        cpy: segment.cpy + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "T") {
-      return {
-        type: "T",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "L") {
-      return {
-        type: "L",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "M") {
-      return {
-        type: "M",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    throw new Error(`Unknown segment type: ${segment.type}`);
-  });
-};
-var translatePath = (path, x, y) => {
-  return serializeInstructions(translateSegments(parsePath(path), x, y));
-};
 var resetPath = (d) => {
   const box = getBoundingBox(d);
   return translatePath(d, -box.x1, -box.y1);
@@ -20295,7 +20363,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef31 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef31 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -20550,7 +20618,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo43(() => new EventTarget, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -20697,7 +20765,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect22(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -20818,7 +20886,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef31([]);
-  useEffect23(() => {
+  useEffect22(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {
@@ -28884,7 +28952,10 @@ var CompanyPricing = () => {
 
 // src/components/homepage/Pricing.tsx
 import { jsx as jsx50, jsxs as jsxs9 } from "react/jsx-runtime";
-var Pricing = () => {
+var Pricing = ({ faqHref = "/docs/pricing#faq" }) => {
+  const faqLinkTarget = useMemo53(() => {
+    return faqHref.startsWith("http") ? "_blank" : undefined;
+  }, [faqHref]);
   return /* @__PURE__ */ jsxs9("div", {
     style: {
       display: "flex",
@@ -28909,9 +28980,9 @@ var Pricing = () => {
             "See our",
             " ",
             /* @__PURE__ */ jsx50("a", {
-              target: "_blank",
+              target: faqLinkTarget,
               className: "bluelink",
-              href: "https://remotion.pro/faq",
+              href: faqHref,
               children: "FAQ"
             }),
             " ",
@@ -29282,7 +29353,7 @@ var AutomationsSection = () => {
 var AutomationsSection_default = AutomationsSection;
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect40 } from "react";
 import { jsx as jsx56, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -29308,7 +29379,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect41(() => {
+  useEffect40(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -29449,7 +29520,7 @@ var PagesOfDocs = () => {
     className: "flex-col",
     children: [
       /* @__PURE__ */ jsxs12("div", {
-        style: { display: "flex", alignItems: "center" },
+        style: { display: "flex", alignItems: "center", gap: 8 },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
             content: /* @__PURE__ */ jsx57("svg", {
@@ -29463,12 +29534,11 @@ var PagesOfDocs = () => {
                 fill: "var(--text-color)"
               })
             }),
-            width: "40px"
+            width: "32px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
             content: "1000",
-            width: "85px",
-            maxWidth: "100px",
+            width: "112px",
             fontSize: "2.5rem",
             fontWeight: "bold"
           })
@@ -29522,7 +29592,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "51K",
+            content: "52K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29700,16 +29770,16 @@ var CommunityStats_default = CommunityStats;
 import { createContext as createContext32 } from "react";
 import { jsx as jsx59, jsxs as jsxs14, Fragment as Fragment12 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment23 } from "react/jsx-runtime";
-import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
-import { useContext as useContext46, useLayoutEffect as useLayoutEffect17 } from "react";
+import React57 from "react";
+import { useContext as useContext210, useEffect as useEffect41, useState as useState38 } from "react";
+import { useContext as useContext46, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext47, useEffect as useEffect52, useRef as useRef47 } from "react";
 import { useEffect as useEffect310, useRef as useRef212 } from "react";
-import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo53, useRef as useRef48, useState as useState39 } from "react";
-import { useEffect as useEffect43, useRef as useRef310 } from "react";
+import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo54, useRef as useRef48, useState as useState39 } from "react";
+import { useEffect as useEffect42, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
@@ -29741,7 +29811,7 @@ import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52
 import React54, { useCallback as useCallback310, useMemo as useMemo310, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo54, useState as useState82 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo55, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
 import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
@@ -31646,8 +31716,8 @@ var calculateOuter = ({
     overflow: overflowVisible ? "visible" : "hidden"
   };
 };
-var PlayerEventEmitterContext = React56.createContext(undefined);
-var ThumbnailEmitterContext = React56.createContext(undefined);
+var PlayerEventEmitterContext = React57.createContext(undefined);
+var ThumbnailEmitterContext = React57.createContext(undefined);
 
 class PlayerEmitter {
   listeners = {
@@ -31765,7 +31835,7 @@ var useBufferStateEmitter = (emitter) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -31786,7 +31856,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect42(() => {
+  useEffect41(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -31975,7 +32045,7 @@ var usePlayer = () => {
   const isBuffering = useCallback39(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo53(() => {
+  const returnValue = useMemo54(() => {
     return {
       frameBack,
       frameForward,
@@ -32161,7 +32231,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef310(getIsBackgrounded());
-  useEffect43(() => {
+  useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -32952,7 +33022,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo54(() => {
+  const actualStyle = useMemo55(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -33019,7 +33089,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo54(() => {
+  const playbackPopup = useMemo55(() => {
     return {
       position: "absolute",
       right: 0,
@@ -34937,8 +35007,8 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback55,
-  useEffect as useEffect58,
-  useMemo as useMemo67,
+  useEffect as useEffect57,
+  useMemo as useMemo68,
   useRef as useRef59,
   useState as useState56
 } from "react";
@@ -35689,15 +35759,15 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React57, { useContext as useContext48, useMemo as useMemo55 } from "react";
+import React58, { useContext as useContext48, useMemo as useMemo56 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
-var Context = React57.createContext(undefined);
+var Context = React58.createContext(undefined);
 var ColorModeProvider = ({
   children,
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo55(() => {
+  const value = useMemo56(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx60(Context.Provider, {
@@ -35715,14 +35785,14 @@ function useColorMode() {
 
 // ../media/dist/esm/index.mjs
 import { useMemo as useMemo312, useState as useState311 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo57, useRef as useRef50, useState as useState40 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState40 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import {
   AudioBufferSink,
   InputDisposedError
 } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext50, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext50, useLayoutEffect as useLayoutEffect19 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
 import React211 from "react";
@@ -35752,7 +35822,7 @@ import { jsx as jsx412 } from "react/jsx-runtime";
 import {
   useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
-  useMemo as useMemo56,
+  useMemo as useMemo57,
   useRef as useRef312,
   useState as useState53
 } from "react";
@@ -35834,13 +35904,13 @@ var getTimeInSeconds = ({
   if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
     throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
   }
-  const loopDuration = loop ? Internals.calculateMediaDuration({
+  const loopDurationInFrames = loop ? Internals.calculateMediaDuration({
     trimAfter,
     mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
     playbackRate: 1,
     trimBefore
-  }) / fps : Infinity;
-  const timeInSeconds = unloopedTimeInSeconds * playbackRate % loopDuration;
+  }) : Infinity;
+  const timeInSeconds = loop ? unloopedTimeInSeconds * playbackRate * fps % loopDurationInFrames / fps : unloopedTimeInSeconds * playbackRate;
   if ((trimAfter ?? null) !== null && !loop) {
     const time = (trimAfter - (trimBefore ?? 0)) / fps;
     if (timeInSeconds >= time) {
@@ -36736,6 +36806,43 @@ var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
 var BUFFER_SIZE = 3;
+var releaseCanvas = Symbol("releaseCanvas");
+var releaseStableFrame = (frame) => {
+  frame?.[releaseCanvas]?.();
+};
+var makeStableFramePool = () => {
+  const availableCanvases = [];
+  const makeStableFrame = (frame) => {
+    const { canvas } = frame;
+    const stableCanvas = availableCanvases.pop() ?? new OffscreenCanvas(canvas.width, canvas.height);
+    if (stableCanvas.width !== canvas.width) {
+      stableCanvas.width = canvas.width;
+    }
+    if (stableCanvas.height !== canvas.height) {
+      stableCanvas.height = canvas.height;
+    }
+    const context = stableCanvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not create canvas context");
+    }
+    context.drawImage(canvas, 0, 0);
+    let released = false;
+    const stableFrame = {
+      canvas: stableCanvas,
+      duration: frame.duration,
+      timestamp: frame.timestamp,
+      [releaseCanvas]: () => {
+        if (released) {
+          return;
+        }
+        released = true;
+        availableCanvases.push(stableCanvas);
+      }
+    };
+    return stableFrame;
+  };
+  return { makeStableFrame };
+};
 var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   const iterator = videoSink.canvases(startTimestamp);
   const buffer = [];
@@ -36743,8 +36850,9 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   let reachedEnd = false;
   let closed = false;
   let inFlight = null;
-  const closeFrame = (frame) => {
-    frame.close?.();
+  const stableFramePool = makeStableFramePool();
+  const takeFrame = (frame) => {
+    return stableFramePool.makeStableFrame(frame);
   };
   const fillNext = () => {
     if (chaining || reachedEnd || closed)
@@ -36755,17 +36863,18 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
     const slot = { promise: iterator.next(), resolved: null };
     buffer.push(slot);
     inFlight = slot.promise.then((result) => {
-      slot.resolved = result;
       chaining = false;
       inFlight = null;
       if (result.done) {
+        slot.resolved = result;
         reachedEnd = true;
         return;
       }
       if (closed) {
-        closeFrame(result.value);
+        slot.resolved = { done: true, value: undefined };
         return;
       }
+      slot.resolved = { ...result, value: takeFrame(result.value) };
       fillNext();
     }, () => {
       chaining = false;
@@ -36793,7 +36902,7 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
             return next2.resolved.done ? null : next2.resolved.value;
           }
           const result = await next2.promise;
-          return result.done ? null : result.value;
+          return result.done ? null : takeFrame(result.value);
         }
       };
     }
@@ -36807,7 +36916,10 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
       type: "pending",
       wait: async () => {
         const result = await slot.promise;
-        return result.done ? null : result.value;
+        if (slot.resolved) {
+          return slot.resolved.done ? null : slot.resolved.value;
+        }
+        return result.done ? null : takeFrame(result.value);
       }
     };
   };
@@ -36815,7 +36927,7 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
     closed = true;
     for (const slot of buffer) {
       if (slot.resolved && !slot.resolved.done) {
-        closeFrame(slot.resolved.value);
+        releaseStableFrame(slot.resolved.value);
       }
     }
     buffer.length = 0;
@@ -36858,6 +36970,12 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   const initialFrame = firstAwait && firstAwait.type === "ready" ? firstAwait.frame : await firstAwait.wait();
   let lastReturnedFrame = initialFrame;
   let peekedFrame = null;
+  const setLastReturnedFrame = (frame) => {
+    if (lastReturnedFrame !== frame) {
+      releaseStableFrame(lastReturnedFrame);
+    }
+    lastReturnedFrame = frame;
+  };
   const peek = async () => {
     if (peekedFrame) {
       return peekedFrame;
@@ -36873,7 +36991,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   const getNextOrNullIfNotAvailable = () => {
     if (peekedFrame) {
       const frame = peekedFrame;
-      lastReturnedFrame = frame;
+      setLastReturnedFrame(frame);
       const retValue = {
         type: "got-frame-or-end",
         frame
@@ -36888,7 +37006,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         waitPromise: async () => {
           const res = await next.wait();
           if (res) {
-            lastReturnedFrame = res;
+            setLastReturnedFrame(res);
           } else {
             iteratorEnded = true;
           }
@@ -36897,7 +37015,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       };
     }
     if (next.frame) {
-      lastReturnedFrame = next.frame;
+      setLastReturnedFrame(next.frame);
     } else {
       iteratorEnded = true;
     }
@@ -36908,15 +37026,21 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   };
   const destroy = () => {
     destroyed = true;
+    releaseStableFrame(lastReturnedFrame);
+    if (peekedFrame !== lastReturnedFrame) {
+      releaseStableFrame(peekedFrame);
+    }
     lastReturnedFrame = null;
+    peekedFrame = null;
     iterator.closeIterator().catch(() => {
       return;
     });
   };
   const tryToSatisfySeek = async (time) => {
+    const timestamp = roundTo4Digits(time);
     if (lastReturnedFrame) {
       const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
-      if (roundTo4Digits(time) < frameTimestamp) {
+      if (timestamp < frameTimestamp) {
         const lastFrameWasInitialFrame = lastReturnedFrame === initialFrame;
         const firstFrameDoesSatisfy = lastFrameWasInitialFrame && roundTo4Digits(time) >= roundTo4Digits(timeToSeek);
         if (firstFrameDoesSatisfy) {
@@ -36938,7 +37062,6 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         }
       }
       const frameEndTimestamp = roundTo4Digits(lastReturnedFrame.timestamp + lastFrameDuration);
-      const timestamp = roundTo4Digits(time);
       if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
         return {
           type: "satisfied",
@@ -36982,7 +37105,6 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         }
         const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
         const frameEndTimestamp = roundTo4Digits(frame.frame.timestamp + frame.frame.duration);
-        const timestamp = roundTo4Digits(time);
         if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
           return {
             type: "satisfied",
@@ -37036,7 +37158,7 @@ var videoIteratorManager = async ({
     }
   }
   const canvasSink = new CanvasSink(videoTrack, {
-    poolSize: 2,
+    poolSize: 3,
     fit: "contain",
     alpha: true
   });
@@ -37727,7 +37849,7 @@ var useCommonEffects = ({
   label: label3
 }) => {
   const sharedAudioContext = useContext50(Internals.SharedAudioContext);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
       return;
@@ -37744,7 +37866,7 @@ var useCommonEffects = ({
     frame,
     mediaPlayerRef
   ]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     if (!sharedAudioContext)
       return;
     const { remove } = sharedAudioContext.audioSyncAnchorEmitter.subscribe((event) => {
@@ -37756,90 +37878,90 @@ var useCommonEffects = ({
       remove();
     };
   }, [sharedAudioContext, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
   }, [trimBefore, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
   }, [trimAfter, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
     mediaPlayer.setMuted(effectiveMuted);
   }, [effectiveMuted, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setVolume(userPreferredVolume);
   }, [userPreferredVolume, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
   }, [playbackRate, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate, currentTimeRef.current);
   }, [globalPlaybackRate, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setLoop(loop, currentTimeRef.current);
   }, [loop, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setSequenceDurationInFrames(durationInFrames, currentTimeRef.current);
   }, [durationInFrames, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer) {
       return;
     }
     mediaPlayer.setIsPremounting(isPremounting);
   }, [isPremounting, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer) {
       return;
     }
     mediaPlayer.setIsPostmounting(isPostmounting);
   }, [isPostmounting, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setFps(fps, currentTimeRef.current);
   }, [fps, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setSequenceOffset(sequenceOffset, currentTimeRef.current);
   }, [sequenceOffset, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
@@ -37953,7 +38075,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect44(() => {
+  useEffect43(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -38143,7 +38265,7 @@ var AudioForPreview2 = ({
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo57(() => {
+  const showShow = useMemo58(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -40449,6 +40571,8 @@ var VideoForPreviewAssertedShowing = ({
   const effectChainState = useEffectChainState2();
   const effectsRef = useRef213(effects);
   effectsRef.current = effects;
+  const onErrorRef = useRef213(onError);
+  onErrorRef.current = onError;
   const effectChainStateRef = useRef213(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext49(SequenceContext22);
@@ -40553,7 +40677,7 @@ var VideoForPreviewAssertedShowing = ({
         }
         const handleError = (error2, fallbackMessage) => {
           const [action, errorToUse] = callOnErrorAndResolve({
-            onError,
+            onError: onErrorRef.current,
             error: error2,
             disallowFallback: disallowFallbackToOffthreadVideo,
             isClientSideRendering: false,
@@ -40588,7 +40712,7 @@ var VideoForPreviewAssertedShowing = ({
         }
       }).catch((error2) => {
         const [action, errorToUse] = callOnErrorAndResolve({
-          onError,
+          onError: onErrorRef.current,
           error: error2,
           disallowFallback: disallowFallbackToOffthreadVideo,
           isClientSideRendering: false,
@@ -40603,7 +40727,7 @@ var VideoForPreviewAssertedShowing = ({
     } catch (error2) {
       const [action, errorToUse] = callOnErrorAndResolve({
         error: error2,
-        onError,
+        onError: onErrorRef.current,
         disallowFallback: disallowFallbackToOffthreadVideo,
         isClientSideRendering: false,
         clientSideError: error2
@@ -40634,7 +40758,6 @@ var VideoForPreviewAssertedShowing = ({
     preloadedSrc,
     sharedAudioContext,
     videoConfig.fps,
-    onError,
     credentials,
     initialRequestInit,
     setMediaDurationInSeconds
@@ -40792,7 +40915,7 @@ var VideoForRendering2 = ({
   const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const sequenceContext = useContext53(Internals.SequenceContext);
-  const id = useMemo56(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo57(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -41005,10 +41128,10 @@ var VideoForRendering2 = ({
     initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo56(() => {
+  const classNameValue = useMemo57(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
-  const styleWithObjectFit = useMemo56(() => {
+  const styleWithObjectFit = useMemo57(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -41362,13 +41485,13 @@ var Video = Interactive.withSchema({
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback47, useEffect as useEffect50, useMemo as useMemo60, useState as useState48 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo61, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
   useCallback as useCallback46,
-  useEffect as useEffect49,
+  useEffect as useEffect48,
   useRef as useRef56,
   useState as useState47
 } from "react";
@@ -41736,14 +41859,14 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 import {
   forwardRef as forwardRef38,
   useCallback as useCallback45,
-  useEffect as useEffect48,
+  useEffect as useEffect47,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef55
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect46, useRef as useRef53, useState as useState44 } from "react";
+import { useEffect as useEffect45, useRef as useRef53, useState as useState44 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -41819,14 +41942,14 @@ var Lottie = ({
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
-  useEffect46(() => {
+  useEffect45(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect46(() => {
+  useEffect45(() => {
     if (!containerRef.current) {
       return;
     }
@@ -41871,17 +41994,17 @@ var Lottie = ({
     renderer,
     continueRender
   ]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (!animationRef.current) {
       return;
     }
@@ -41914,14 +42037,14 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect47, useMemo as useMemo58, useState as useState46 } from "react";
+import { useEffect as useEffect46, useMemo as useMemo59, useState as useState46 } from "react";
 import { jsx as jsx71 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
   const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
-  const src = useMemo58(() => {
+  const src = useMemo59(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -41934,7 +42057,7 @@ var DisplayedEmoji = ({ emoji }) => {
     throw new Error("Unknown emoji");
   }, [emoji]);
   const [handle] = useState46(() => delayRender2("Loading emojis!"));
-  useEffect47(() => {
+  useEffect46(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
         duration: getLottieMetadata(json)?.durationInSeconds,
@@ -41945,7 +42068,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender2(err);
     });
   }, [handle, src, continueRender, cancelRender2]);
-  useEffect47(() => {
+  useEffect46(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -42041,7 +42164,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -42058,7 +42181,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -42348,7 +42471,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/TrendingRepos.tsx
-import { useMemo as useMemo59 } from "react";
+import { useMemo as useMemo60 } from "react";
 import { jsx as jsx81, jsxs as jsxs25 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
@@ -42361,7 +42484,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo59(() => {
+  const item = useMemo60(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -42473,7 +42596,7 @@ var Cards = ({
   const positions = useRef56(getInitialPositions());
   const shouldBePositions = useRef56(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -42568,7 +42691,7 @@ var HomepageVideoComp = ({
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo60(() => {
+  const emoji = useMemo61(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -42577,7 +42700,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo60(() => {
+  const audioSrc = useMemo61(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -42586,7 +42709,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect50(() => {
+  useEffect49(() => {
     const a2 = prefetch(fireAudio);
     const b2 = prefetch(partyHornAudio);
     const c2 = prefetch(sadAudio);
@@ -42662,7 +42785,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.484";
+var VERSION2 = "4.0.486";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -46157,12 +46280,12 @@ var getPrecomposeRectForMask = (element) => {
 };
 var handleMask = ({
   gradientInfo,
-  rect,
+  maskRect,
   precomposeRect,
   tempContext,
   scale
 }) => {
-  const rectToFill = new DOMRect((rect.left - precomposeRect.left) * scale, (rect.top - precomposeRect.top) * scale, rect.width * scale, rect.height * scale);
+  const rectToFill = new DOMRect((maskRect.left - precomposeRect.left) * scale, (maskRect.top - precomposeRect.top) * scale, maskRect.width * scale, maskRect.height * scale);
   const gradient = createCanvasGradient({
     ctx: tempContext,
     rect: rectToFill,
@@ -46283,7 +46406,7 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         handleMask({
           gradientInfo: precompositing.needsMaskImage,
-          rect,
+          maskRect: dimensions,
           precomposeRect,
           tempContext,
           scale
@@ -46405,14 +46528,17 @@ var currentColorValues = new Set(["currentcolor", "currentColor"]);
 var getDefaultTextDecorationThickness = (fontSizePx) => {
   return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
 };
+var getTextDecorationStyle = (style2) => {
+  if (style2 === "double" || style2 === "dotted" || style2 === "dashed" || style2 === "wavy") {
+    return style2;
+  }
+  return "solid";
+};
 var parseTextDecoration = ({
   onlyBackgroundClipText,
   style: style2
 }) => {
-  const textDecorationStyle = style2.getPropertyValue("text-decoration-style");
-  if (textDecorationStyle && textDecorationStyle !== "solid") {
-    return null;
-  }
+  const textDecorationStyle = getTextDecorationStyle(style2.getPropertyValue("text-decoration-style").trim());
   const textDecorationLine = style2.getPropertyValue("text-decoration-line");
   const lineParts = textDecorationLine.split(/\s+/);
   const lines2 = textDecorationLines.filter((line) => lineParts.includes(line));
@@ -46429,7 +46555,8 @@ var parseTextDecoration = ({
   return {
     lines: lines2,
     color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style2.color : textDecorationColor,
-    thickness
+    thickness,
+    style: textDecorationStyle
   };
 };
 var getTextDecorations = ({
@@ -46476,6 +46603,54 @@ var getTextDecorationY = ({
   }
   return y - actualAscent * 0.35;
 };
+var getTextDecorationLineDashPattern = (style2, thickness) => {
+  if (style2 === "dashed") {
+    return [thickness * 2, thickness];
+  }
+  if (style2 === "dotted") {
+    return [thickness, thickness];
+  }
+  return [];
+};
+var drawWavyTextDecorationLine = ({
+  contextToDraw,
+  endX,
+  lineY,
+  startX,
+  thickness
+}) => {
+  const step = Math.max(2, thickness);
+  const amplitude = step;
+  const halfWavelength = step * 2;
+  const wavelength = halfWavelength * 2;
+  const phaseStartX = Math.floor(startX / wavelength) * wavelength;
+  contextToDraw.save();
+  contextToDraw.beginPath();
+  contextToDraw.rect(startX, lineY - amplitude - thickness, endX - startX, (amplitude + thickness) * 2);
+  contextToDraw.clip();
+  contextToDraw.beginPath();
+  contextToDraw.moveTo(phaseStartX, lineY);
+  let x = phaseStartX;
+  let direction = 1;
+  while (x < endX) {
+    contextToDraw.quadraticCurveTo(x + halfWavelength / 2, lineY + direction * amplitude * 2, x + halfWavelength, lineY);
+    x += halfWavelength;
+    direction = -direction;
+  }
+  contextToDraw.stroke();
+  contextToDraw.restore();
+};
+var strokeTextDecorationLine = ({
+  contextToDraw,
+  endX,
+  lineY,
+  startX
+}) => {
+  contextToDraw.beginPath();
+  contextToDraw.moveTo(startX, lineY);
+  contextToDraw.lineTo(endX, lineY);
+  contextToDraw.stroke();
+};
 var drawTextDecoration = ({
   contextToDraw,
   fontSizePx,
@@ -46506,10 +46681,42 @@ var drawTextDecoration = ({
         thickness: textDecoration.thickness,
         fontSizePx
       });
-      contextToDraw.beginPath();
-      contextToDraw.moveTo(startX, lineY);
-      contextToDraw.lineTo(endX, lineY);
-      contextToDraw.stroke();
+      if (textDecoration.style === "wavy") {
+        contextToDraw.setLineDash([]);
+        drawWavyTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY,
+          startX,
+          thickness: textDecoration.thickness
+        });
+        continue;
+      }
+      if (textDecoration.style === "double") {
+        contextToDraw.setLineDash([]);
+        strokeTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY: lineY - textDecoration.thickness,
+          startX
+        });
+        strokeTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY: lineY + textDecoration.thickness,
+          startX
+        });
+        contextToDraw.setLineDash([]);
+        continue;
+      }
+      contextToDraw.setLineDash(getTextDecorationLineDashPattern(textDecoration.style, textDecoration.thickness));
+      strokeTextDecorationLine({
+        contextToDraw,
+        endX,
+        lineY,
+        startX
+      });
+      contextToDraw.setLineDash([]);
     }
   }
   contextToDraw.restore();
@@ -47431,7 +47638,7 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React69, { useCallback as useCallback48 } from "react";
+import React70, { useCallback as useCallback48 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -47537,7 +47744,7 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo61 } from "react";
+import { useMemo as useMemo64 } from "react";
 import { jsx as jsx97, jsxs as jsxs30, Fragment as Fragment15 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
@@ -47545,7 +47752,7 @@ var className2 = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
 var translated3 = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
 var Spinner2 = ({ size: size4, duration }) => {
-  const style2 = useMemo61(() => {
+  const style2 = useMemo64(() => {
     return {
       width: size4,
       height: size4
@@ -47629,7 +47836,7 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError, playerRef }) => {
-  const [state, setState] = React69.useState({
+  const [state, setState] = React70.useState({
     type: "idle"
   });
   const triggerRender = useCallback48(async () => {
@@ -47807,13 +48014,13 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback50, useEffect as useEffect53, useMemo as useMemo66, useRef as useRef57, useState as useState51 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect51, useMemo as useMemo67, useRef as useRef57, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback49, useEffect as useEffect51, useMemo as useMemo64, useState as useState50 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect50, useMemo as useMemo66, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
-  const observer = useMemo64(() => {
+  const observer = useMemo66(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -47834,7 +48041,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect51(() => {
+  useEffect50(() => {
     updateSize();
     if (!observer) {
       return;
@@ -47890,7 +48097,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState51(false);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -47941,7 +48148,7 @@ var PlayerSeekBar2 = ({
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
   const [frame, setFrame] = useState51(0);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -47954,7 +48161,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48015,7 +48222,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect53(() => {
+  useEffect51(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -48027,7 +48234,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo66(() => {
+  const knobStyle = useMemo67(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -48041,7 +48248,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo66(() => {
+  const fillStyle = useMemo67(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -48050,7 +48257,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo66(() => {
+  const active = useMemo67(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -48085,7 +48292,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback51, useEffect as useEffect55, useRef as useRef58, useState as useState54 } from "react";
+import { useCallback as useCallback51, useEffect as useEffect53, useRef as useRef58, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx105 } from "react/jsx-runtime";
@@ -48146,7 +48353,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef58(null);
-  useEffect55(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48159,7 +48366,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect55(() => {
+  useEffect53(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -48204,7 +48411,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React73, { useCallback as useCallback53, useEffect as useEffect56 } from "react";
+import React75, { useCallback as useCallback53, useEffect as useEffect55 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -48221,8 +48428,8 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React73.useState(true);
-  useEffect56(() => {
+  const [playing, setPlaying] = React75.useState(true);
+  useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48259,7 +48466,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React75, { useEffect as useEffect57 } from "react";
+import React76, { useEffect as useEffect56 } from "react";
 import { jsx as jsx109 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -48267,8 +48474,8 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React75.useState(0);
-  useEffect57(() => {
+  const [time, setTime] = React76.useState(0);
+  useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48346,7 +48553,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React76 from "react";
+import React77 from "react";
 import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
@@ -48369,7 +48576,7 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React76.useCallback((e) => {
+  const toggleTheme = React77.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
@@ -48440,7 +48647,7 @@ var Demo = () => {
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
   const [error2, setError] = useState56(false);
-  useEffect58(() => {
+  useEffect57(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -48448,7 +48655,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect58(() => {
+  useEffect57(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -48464,7 +48671,7 @@ var Demo = () => {
   const updateCardOrder = useCallback55((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo67(() => {
+  const props = useMemo68(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -48551,7 +48758,7 @@ var Demo = () => {
 };
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect59, useState as useState57 } from "react";
+import { useEffect as useEffect58, useState as useState57 } from "react";
 
 // src/components/homepage/layout/Button.tsx
 import { jsx as jsx117 } from "react/jsx-runtime";
@@ -48596,7 +48803,7 @@ var BlueButton = (props) => {
 import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState57([]);
-  useEffect59(() => {
+  useEffect58(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -48693,7 +48900,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect60, useState as useState58 } from "react";
+import { useEffect as useEffect59, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -48709,7 +48916,7 @@ var icon3 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState58("/img/compose.webm");
-  useEffect60(() => {
+  useEffect59(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -48856,7 +49063,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect61, useRef as useRef60, useState as useState60 } from "react";
+import { useEffect as useEffect60, useRef as useRef60, useState as useState60 } from "react";
 import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -48865,7 +49072,7 @@ var icon4 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef60(null);
   const [vid, setVid] = useState60("/img/editing-vp9-chrome.webm");
-  useEffect61(() => {
+  useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -48979,7 +49186,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect63, useRef as useRef61, useState as useState61 } from "react";
+import { useEffect as useEffect61, useRef as useRef61, useState as useState61 } from "react";
 import { jsx as jsx125, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon5 = {
   height: 16,
@@ -48989,12 +49196,12 @@ var RealMP4Videos = () => {
   const ref = useRef61(null);
   const videoRef = useRef61(null);
   const [vid, setVid] = useState61("/img/render-progress.webm");
-  useEffect63(() => {
+  useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect63(() => {
+  useEffect61(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -49244,16 +49451,16 @@ import { useRef as useRef66, useState as useState66 } from "react";
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef41, useEffect as useEffect66, useImperativeHandle as useImperativeHandle15, useRef as useRef65 } from "react";
+import { forwardRef as forwardRef41, useEffect as useEffect65, useImperativeHandle as useImperativeHandle15, useRef as useRef65 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef40, useCallback as useCallback57, useEffect as useEffect65, useRef as useRef63, useState as useState64 } from "react";
+import { forwardRef as forwardRef40, useCallback as useCallback57, useEffect as useEffect63, useRef as useRef63, useState as useState64 } from "react";
 import { jsx as jsx128 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef63(null);
-  useEffect65(() => {
+  useEffect63(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -49282,12 +49489,12 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect65(() => {
+  useEffect63(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect65(() => {
+  useEffect63(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -49330,7 +49537,7 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect65(() => {
+  useEffect63(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -49357,7 +49564,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef65(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle15(ref, () => videoRef.current, []);
-  useEffect66(() => {
+  useEffect65(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -50988,7 +51195,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx167("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "51k"
+        children: "52k"
       })
     ]
   });