@remotion/promo-pages 4.0.443 → 4.0.445

package/dist/Homepage.js

@@ -733,6 +733,33 @@ var experts = [
         "I specialize in building complex Remotion applications integrated with AI services like Gemini (for video analysis and highlights) and Deepgram (for automated captions). I also focus on high-performance canvas interactions using Fabric.js and cost-effective AI workflows."
       ]
     })
+  },
+  {
+    slug: "hai-nguyen",
+    name: "Hai Nguyen",
+    image: "/img/freelancers/hai.jpg",
+    website: "https://haingt.dev",
+    x: "haingt_dev",
+    github: "haingt-dev",
+    linkedin: "in/haingt-dev/",
+    email: "hai@haingt.dev",
+    videocall: null,
+    since: new Date("2026-04-02").getTime(),
+    description: /* @__PURE__ */ jsxs("div", {
+      children: [
+        "Built a full",
+        " ",
+        /* @__PURE__ */ jsx("a", {
+          target: "_blank",
+          href: "https://github.com/haingt-dev/Bookie/tree/master/projects/ai-book-video",
+          children: "AI video production pipeline"
+        }),
+        " ",
+        "using Remotion 4.0 — orchestrating self-hosted TTS (viXTTS), Gemini API image generation, SRT-driven subtitle timing, and Ken Burns motion presets. The pipeline produces complete book-to-video content in about an hour (1-person operation) with editorial design overlays, cross-dissolve transitions, and audio spectrum visualization. GPU-accelerated rendering on Linux.",
+        /* @__PURE__ */ jsx("br", {}),
+        "Available for AI-powered video pipelines, multi-API media orchestration, and Remotion integrations with existing backend infrastructure."
+      ]
+    })
   }
 ];
 // src/components/experts/ExpertsPage.tsx
@@ -740,28 +767,30 @@ import { useMemo as useMemo36 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
-import { Suspense, useContext as useContext9, useEffect as useEffect2 } from "react";
+import { Suspense, useCallback as useCallback4, useContext as useContext9, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 import { createContext as createContext2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 import { createContext as createContext3 } from "react";
-import { createContext as createContext5, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
-import { createContext as createContext4, useCallback, useContext, useMemo, useRef } from "react";
+import React2 from "react";
+import { createContext as createContext4 } from "react";
+import { createContext as createContext6, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
+import { createContext as createContext5, useCallback, useContext, useMemo, useRef } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-import { createContext as createContext6, useContext as useContext3 } from "react";
+import { createContext as createContext7, useContext as useContext3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 import { forwardRef, useMemo as useMemo3 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-import { createContext as createContext8, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
-import React3, { createContext as createContext7, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
+import React4, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo4 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 import { useContext as useContext4, useState } from "react";
-import React4 from "react";
-import { createContext as createContext10, useCallback as useCallback3, useContext as useContext7 } from "react";
-import { createContext as createContext9 } from "react";
-import * as React5 from "react";
-import React6, { useMemo as useMemo6, useRef as useRef2 } from "react";
+import React5 from "react";
+import { createContext as createContext11, useCallback as useCallback3, useContext as useContext7 } from "react";
+import { createContext as createContext10 } from "react";
+import * as React6 from "react";
+import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import {
@@ -772,10 +801,10 @@ import {
   useState as useState4
 } from "react";
 import { useContext as useContext14, useMemo as useMemo11 } from "react";
-import { createContext as createContext11 } from "react";
+import { createContext as createContext12 } from "react";
 import { useContext as useContext10, useMemo as useMemo9 } from "react";
 import {
-  createContext as createContext12,
+  createContext as createContext13,
   useLayoutEffect,
   useMemo as useMemo8,
   useRef as useRef3,
@@ -786,8 +815,8 @@ import { useContext as useContext11 } from "react";
 import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
-import { createContext as createContext13 } from "react";
-import React10, { useCallback as useCallback4, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import { createContext as createContext14 } from "react";
+import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import {
@@ -798,13 +827,13 @@ import {
   useRef as useRef6,
   useState as useState5
 } from "react";
-import React12, { useCallback as useCallback5, useImperativeHandle, useRef as useRef5 } from "react";
+import React13, { useCallback as useCallback6, useImperativeHandle, useRef as useRef5 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { useContext as useContext16, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
 import {
-  createContext as createContext14,
-  useCallback as useCallback6,
+  createContext as createContext15,
+  useCallback as useCallback7,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo14,
@@ -812,15 +841,15 @@ import {
   useState as useState6
 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext28 } from "react";
-import React13, { createContext as createContext15, useMemo as useMemo15 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback12, useContext as useContext28 } from "react";
+import React14, { createContext as createContext16, useMemo as useMemo15 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { useContext as useContext17 } from "react";
-import { createContext as createContext16, useEffect as useEffect5, useState as useState8 } from "react";
+import { createContext as createContext17, useEffect as useEffect5, useState as useState8 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { createContext as createContext17, useMemo as useMemo16, useReducer } from "react";
+import { createContext as createContext18, useMemo as useMemo16, useReducer } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import React19, {
+import React20, {
   forwardRef as forwardRef4,
   useContext as useContext26,
   useEffect as useEffect12,
@@ -830,10 +859,10 @@ import React19, {
   useState as useState13
 } from "react";
 import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useRef as useRef10 } from "react";
-import React16, {
-  createContext as createContext18,
+import React17, {
+  createContext as createContext19,
   createRef as createRef2,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useContext as useContext18,
   useMemo as useMemo18,
   useRef as useRef8,
@@ -845,16 +874,16 @@ import { useRef as useRef9 } from "react";
 import { useContext as useContext21, useEffect as useEffect6, useMemo as useMemo19, useState as useState10 } from "react";
 import { useContext as useContext20 } from "react";
 import {
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext24,
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef14
 } from "react";
-import { useCallback as useCallback9, useMemo as useMemo22, useRef as useRef12 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo22, useRef as useRef12 } from "react";
 import { useContext as useContext23, useMemo as useMemo21 } from "react";
-import React17, {
-  useCallback as useCallback8,
+import React18, {
+  useCallback as useCallback9,
   useContext as useContext22,
   useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
@@ -863,11 +892,11 @@ import React17, {
   useState as useState11
 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import React18 from "react";
+import React19 from "react";
 import { useEffect as useEffect8, useState as useState12 } from "react";
 import { useEffect as useEffect9, useRef as useRef13 } from "react";
 import { useEffect as useEffect11 } from "react";
-import { createContext as createContext19, useContext as useContext25, useMemo as useMemo23 } from "react";
+import { createContext as createContext20, useContext as useContext25, useMemo as useMemo23 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
@@ -880,40 +909,40 @@ import {
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback13, useState as useState14 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useContext as useContext30,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef17,
   useState as useState16
 } from "react";
-import React23, { forwardRef as forwardRef8, useMemo as useMemo27 } from "react";
+import React24, { forwardRef as forwardRef8, useMemo as useMemo27 } from "react";
 import { useContext as useContext29, useMemo as useMemo26, useState as useState15 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React25 from "react";
+import React26 from "react";
 import {
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo28,
   useRef as useRef18,
   useState as useState17
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
-import React26 from "react";
+import React27 from "react";
 import { useMemo as useMemo30 } from "react";
-import { createContext as createContext20, useContext as useContext31, useMemo as useMemo29 } from "react";
+import { createContext as createContext21, useContext as useContext31, useMemo as useMemo29 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React28 from "react";
-import React29, { createContext as createContext21 } from "react";
+import React29 from "react";
+import React30, { createContext as createContext22 } from "react";
 import { useContext as useContext32 } from "react";
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback17 } from "react";
 import {
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext33,
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
@@ -921,7 +950,7 @@ import {
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React31, {
+import React32, {
   forwardRef as forwardRef9,
   useContext as useContext34,
   useEffect as useEffect16,
@@ -933,15 +962,15 @@ import React31, {
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React33, { useMemo as useMemo33 } from "react";
+import React34, { useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef10, useMemo as useMemo34 } from "react";
-import React34 from "react";
-import React35, { createContext as createContext22 } from "react";
+import React35 from "react";
+import React36, { createContext as createContext23 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React37 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
+import React38 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback18, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef11,
   useContext as useContext35,
@@ -985,13 +1014,38 @@ var CanUseRemotionHooksProvider = ({ children }) => {
     children
   });
 };
-var CompositionManager = createContext3({
+var CompositionRenderErrorContext = createContext3({
+  setError: () => {},
+  clearError: () => {}
+});
+
+class CompositionErrorBoundary extends React2.Component {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  componentDidUpdate(_prevProps) {
+    if (!this.state.hasError) {
+      this.props.onClear();
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+var CompositionManager = createContext4({
   compositions: [],
   folders: [],
   currentCompositionMetadata: null,
   canvasContent: null
 });
-var CompositionSetters = createContext3({
+var CompositionSetters = createContext4({
   registerComposition: () => {
     return;
   },
@@ -1009,7 +1063,7 @@ var CompositionSetters = createContext3({
   },
   onlyRenderComposition: null
 });
-var NonceContext = createContext4({
+var NonceContext = createContext5({
   getNonce: () => 0
 });
 var fastRefreshNonce = 0;
@@ -1048,7 +1102,7 @@ function truthy(value) {
 }
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
 var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
-var FolderContext = createContext5({
+var FolderContext = createContext6({
   folderName: null,
   parentName: null
 });
@@ -1132,7 +1186,7 @@ var serializeThenDeserializeInStudio = (props) => {
   }
   return props;
 };
-var IsPlayerContext = createContext6(false);
+var IsPlayerContext = createContext7(false);
 var IsPlayerContextProvider = ({
   children
 }) => {
@@ -1371,15 +1425,15 @@ var getInputProps = () => {
   const parsed = deserializeJSONWithSpecialTypes(param);
   return parsed;
 };
-var EditorPropsContext = createContext7({
+var EditorPropsContext = createContext8({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
   }
 });
-var timeValueRef = React3.createRef();
+var timeValueRef = React4.createRef();
 var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React3.useState({});
+  const [props, setProps] = React4.useState({});
   const updateProps = useCallback2(({
     defaultProps,
     id,
@@ -1400,7 +1454,7 @@ var EditorPropsProvider = ({ children }) => {
     children
   });
 };
-var RemotionEnvironmentContext = React4.createContext(null);
+var RemotionEnvironmentContext = React5.createContext(null);
 var useRemotionEnvironment = () => {
   const context = useContext4(RemotionEnvironmentContext);
   const [env] = useState(() => getRemotionEnvironment());
@@ -1458,7 +1512,7 @@ function validateFps(fps, location, isGif) {
     throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
   }
 }
-var ResolveCompositionContext = createContext8(null);
+var ResolveCompositionContext = createContext9(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
@@ -1720,25 +1774,25 @@ var continueRenderInternal = ({
     scope.remotion_renderReady = true;
   }
 };
-var LogLevelContext = createContext9({
+var LogLevelContext = createContext10({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React5.useContext(LogLevelContext);
+  const { logLevel } = React6.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React5.useContext(LogLevelContext);
+  const { mountTime } = React6.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
   return mountTime;
 };
-var DelayRenderContextType = createContext10(null);
+var DelayRenderContextType = createContext11(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
   const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
@@ -1789,7 +1843,7 @@ var useLazyComponent = ({
       }
       const Wrapper = (props) => {
         const Comp = componentRef.current;
-        return React6.createElement(Comp, props);
+        return React7.createElement(Comp, props);
       };
       return Wrapper;
     }
@@ -1797,7 +1851,7 @@ var useLazyComponent = ({
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React6.lazy(compProps.lazyComponent);
+      return React7.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.lazyComponent]);
@@ -1933,16 +1987,27 @@ var InnerComposition = ({
     unregisterComposition
   ]);
   const resolved = useResolvedVideoConfig(id);
+  const { setError, clearError } = useContext9(CompositionRenderErrorContext);
+  const onError = useCallback4((error2) => {
+    setError(error2);
+  }, [setError]);
+  const onClear = useCallback4(() => {
+    clearError();
+  }, [clearError]);
   if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
     return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx7(Suspense, {
-        fallback: /* @__PURE__ */ jsx7(Loading, {}),
-        children: /* @__PURE__ */ jsx7(Comp, {
-          ...resolved.result.props ?? {}
+      children: /* @__PURE__ */ jsx7(CompositionErrorBoundary, {
+        onError,
+        onClear,
+        children: /* @__PURE__ */ jsx7(Suspense, {
+          fallback: /* @__PURE__ */ jsx7(Loading, {}),
+          children: /* @__PURE__ */ jsx7(Comp, {
+            ...resolved.result.props ?? {}
+          })
         })
       })
     }), portalNode());
@@ -1977,7 +2042,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.443";
+var VERSION = "4.0.445";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2005,7 +2070,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   set();
 };
-var SequenceContext = createContext11(null);
+var SequenceContext = createContext12(null);
 var exports_timeline_position_state = {};
 __export2(exports_timeline_position_state, {
   useTimelineSetFrame: () => useTimelineSetFrame,
@@ -2049,7 +2114,7 @@ var random = (seed, dummy) => {
   }
   throw new Error("random() argument must be a number or a string");
 };
-var SetTimelineContext = createContext12({
+var SetTimelineContext = createContext13({
   setFrame: () => {
     throw new Error("default");
   },
@@ -2057,8 +2122,8 @@ var SetTimelineContext = createContext12({
     throw new Error("default");
   }
 });
-var TimelineContext = createContext12(null);
-var AbsoluteTimeContext = createContext12(null);
+var TimelineContext = createContext13(null);
+var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
   const imperativePlaying = useRef3(false);
@@ -2318,11 +2383,11 @@ var Freeze = ({
     })
   });
 };
-var PremountContext = createContext13({
+var PremountContext = createContext14({
   premountFramesRemaining: 0,
   playing: false
 });
-var SequenceManager = React10.createContext({
+var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -2331,13 +2396,13 @@ var SequenceManager = React10.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React10.createContext({
+var SequenceVisibilityToggleContext = React11.createContext({
   hidden: {},
   setHidden: () => {
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React10.createContext({
+var VisualModeOverridesContext = React11.createContext({
   dragOverrides: {},
   setDragOverrides: () => {
     throw new Error("VisualModeOverridesContext not initialized");
@@ -2358,7 +2423,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState3({});
-  const setDragOverrides = useCallback4((sequenceId, key, value) => {
+  const setDragOverrides = useCallback5((sequenceId, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
       [sequenceId]: {
@@ -2367,7 +2432,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       }
     }));
   }, []);
-  const clearDragOverrides = useCallback4((sequenceId) => {
+  const clearDragOverrides = useCallback5((sequenceId) => {
     setControlOverrides((prev) => {
       if (!prev[sequenceId]) {
         return prev;
@@ -2377,7 +2442,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       return next;
     });
   }, []);
-  const setCodeValues = useCallback4((sequenceId, values) => {
+  const setCodeValues = useCallback5((sequenceId, values) => {
     setCodeValuesMapState((prev) => {
       if (prev[sequenceId] === values) {
         return prev;
@@ -2393,12 +2458,12 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       return { ...prev, [sequenceId]: values };
     });
   }, []);
-  const registerSequence = useCallback4((seq) => {
+  const registerSequence = useCallback5((seq) => {
     setSequences((seqs) => {
       return [...seqs, seq];
     });
   }, []);
-  const unregisterSequence = useCallback4((seq) => {
+  const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
   const sequenceContext = useMemo12(() => {
@@ -2732,7 +2797,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef5(null);
-  const draw = useCallback5((imageData) => {
+  const draw = useCallback6((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -2777,7 +2842,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
     style
   });
 };
-var Canvas = React12.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React13.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -3060,7 +3125,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext14({
+var RenderAssetManager = createContext15({
   registerRenderAsset: () => {
     return;
   },
@@ -3072,7 +3137,7 @@ var RenderAssetManager = createContext14({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState6([]);
   const renderAssetsRef = useRef7([]);
-  const registerRenderAsset = useCallback6((renderAsset) => {
+  const registerRenderAsset = useCallback7((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -3089,7 +3154,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback6((id) => {
+  const unregisterRenderAsset = useCallback7((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -3198,9 +3263,9 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext15(null);
+var LoopContext = createContext16(null);
 var useLoop = () => {
-  return React13.useContext(LoopContext);
+  return React14.useContext(LoopContext);
 };
 var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
@@ -3261,7 +3326,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext16({});
+var PreloadContext = createContext17({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -3582,7 +3647,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext17({
+var DurationsContext = createContext18({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -3768,7 +3833,7 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext18(null);
+var SharedAudioContext = createContext19(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
   const audios = useRef8([]);
   const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
@@ -3851,7 +3916,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
+  const effectToUse = React17.useInsertionEffect ?? React17.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -3862,7 +3927,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     };
   }, [refs]);
   const takenAudios = useRef8(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback7(() => {
+  const rerenderAudios = useCallback8(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -3883,7 +3948,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       });
     });
   }, [refs]);
-  const registerAudio = useCallback7((options) => {
+  const registerAudio = useCallback8((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -3912,7 +3977,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback7((id) => {
+  const unregisterAudio = useCallback8((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -3923,7 +3988,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback7(({
+  const updateAudio = useCallback8(({
     aud,
     audioId,
     id,
@@ -3959,7 +4024,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
   }, [rerenderAudios]);
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const playAllAudios = useCallback7(() => {
+  const playAllAudios = useCallback8(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -4023,7 +4088,7 @@ var useSharedAudio = ({
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React16.createRef();
+    const el = React17.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -4042,7 +4107,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
+  const effectToUse = React17.useInsertionEffect ?? React17.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4266,6 +4331,24 @@ var getAssetDisplayName = (filename) => {
   const splitted = filename.split("/").map((s) => s.split("\\")).flat(1);
   return splitted[splitted.length - 1];
 };
+var getTimelineDuration = ({
+  compositionDurationInFrames,
+  playbackRate,
+  trimBefore,
+  trimAfter,
+  parentSequenceDurationInFrames
+}) => {
+  const mediaDuration = calculateMediaDuration({
+    mediaDurationInFrames: compositionDurationInFrames * playbackRate + (trimBefore ?? 0),
+    playbackRate,
+    trimBefore,
+    trimAfter
+  });
+  if (parentSequenceDurationInFrames !== null) {
+    return Math.floor(Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration));
+  }
+  return mediaDuration;
+};
 var evaluateVolume = ({
   frame,
   volume,
@@ -4314,13 +4397,13 @@ var useBasicMediaInTimeline = ({
   const parentSequence = useContext21(SequenceContext);
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
-  const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
+  const duration = getTimelineDuration({
+    compositionDurationInFrames: videoConfig.durationInFrames,
     playbackRate,
     trimBefore,
-    trimAfter
+    trimAfter,
+    parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null
   });
-  const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
   const volumes = useMemo19(() => {
     if (typeof volume === "number") {
       return volume;
@@ -4523,7 +4606,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef11(false);
-  const addBlock = useCallback8((block) => {
+  const addBlock = useCallback9((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -4544,7 +4627,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback8((callback) => {
+  const listenForBuffering = useCallback9((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -4552,7 +4635,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback8((callback) => {
+  const listenForResume = useCallback9((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -4594,7 +4677,7 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React17.createContext(null);
+var BufferingContextReact = React18.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext22(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
@@ -4654,7 +4737,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef12(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback9((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback10((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -4733,7 +4816,7 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React18.useRef({
+  const lastUpdate = React19.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -5142,7 +5225,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef14({});
-  const onVariableFpsVideoDetected = useCallback10(() => {
+  const onVariableFpsVideoDetected = useCallback11(() => {
     if (!src) {
       return;
     }
@@ -5406,11 +5489,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext19({
+var MediaVolumeContext = createContext20({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext19({
+var SetMediaVolumeContext = createContext20({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -5573,7 +5656,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -5771,7 +5854,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback11((e) => {
+  const onError = useCallback12((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -5785,7 +5868,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback11((src, durationInSeconds) => {
+  const onDuration = useCallback12((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -5875,11 +5958,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback12((e) => {
+  const didLoad = useCallback13((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback12((e) => {
+  const didGetError = useCallback13((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -6024,7 +6107,7 @@ var wrapInSchema = (Component, schema) => {
   const Wrapped = forwardRef8((props2, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-      return React23.createElement(Component, {
+      return React24.createElement(Component, {
         ...props2,
         controls: null,
         ref
@@ -6039,7 +6122,7 @@ var wrapInSchema = (Component, schema) => {
     }, schemaKeys.map((key) => getNestedValue(props2, key)));
     const { controls, values } = useSchema(schema, schemaInput);
     const mergedProps = mergeValues(props2, values, schemaKeys);
-    return React23.createElement(Component, {
+    return React24.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -6124,7 +6207,7 @@ var ImgInner = ({
     controls: controls ?? null
   });
   const actualSrc = usePreload(src);
-  const retryIn = useCallback13((timeout) => {
+  const retryIn = useCallback14((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -6142,7 +6225,7 @@ var ImgInner = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback13((e) => {
+  const didGetError = useCallback14((e) => {
     if (!errors.current) {
       return;
     }
@@ -6246,7 +6329,7 @@ var ImgInner = ({
 };
 var Img = wrapInSchema(ImgInner, imgSchema);
 addSequenceStackTraces(Img);
-var compositionsRef = React25.createRef();
+var compositionsRef = React26.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -6258,14 +6341,14 @@ var CompositionManagerProvider = ({
   const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
   const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
-  const updateCompositions = useCallback14((updateComps) => {
+  const updateCompositions = useCallback15((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback14((comp) => {
+  const registerComposition = useCallback15((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -6273,12 +6356,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback14((id) => {
+  const unregisterComposition = useCallback15((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback14((name, parent, nonce) => {
+  const registerFolder = useCallback15((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -6290,7 +6373,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback14((name, parent) => {
+  const unregisterFolder = useCallback15((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -6394,7 +6477,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React26.createContext(null);
+var MaxMediaCacheSizeContext = React27.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -6412,7 +6495,7 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext20(null);
+var MediaEnabledContext = createContext21(null);
 var useVideoEnabled = () => {
   const context = useContext31(MediaEnabledContext);
   if (!context) {
@@ -6659,7 +6742,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React28.createContext(() => {});
+var SequenceStackTracesUpdateContext = React29.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -6685,8 +6768,8 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React29.createContext(null);
-var PreviewSizeContext = createContext21({
+var CurrentScaleContext = React30.createContext(null);
+var PreviewSizeContext = createContext22({
   setSize: () => {
     return;
   },
@@ -6897,7 +6980,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback15(() => {
+  const onErr = useCallback16(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -6907,7 +6990,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo31(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback15((img) => {
+  const onImageFrame = useCallback16((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -6952,6 +7035,15 @@ var useEmitVideoFrame = ({
     };
   }, [onVideoFrame, ref]);
 };
+
+class MediaPlaybackError extends Error {
+  src;
+  constructor({ message, src }) {
+    super(message);
+    this.name = "MediaPlaybackError";
+    this.src = src;
+  }
+}
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const context = useContext34(SharedAudioContext);
   if (!context) {
@@ -6967,7 +7059,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
+  const effectToUse = React32.useInsertionEffect ?? React32.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -7094,18 +7186,30 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       if (current.error) {
         console.error("Error occurred in video", current?.error);
         if (onError) {
-          const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+          const err = new MediaPlaybackError({
+            message: `Code ${current.error.code}: ${current.error.message}`,
+            src
+          });
           onError(err);
           return;
         }
-        throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+        throw new MediaPlaybackError({
+          message: `The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`,
+          src
+        });
       } else {
         if (onError) {
-          const err = new Error(`The browser threw an error while playing the video ${src}`);
+          const err = new MediaPlaybackError({
+            message: `The browser threw an error while playing the video ${src}`,
+            src
+          });
           onError(err);
           return;
         }
-        throw new Error("The browser threw an error while playing the video");
+        throw new MediaPlaybackError({
+          message: "The browser threw an error while playing the video",
+          src
+        });
       }
     };
     current.addEventListener("error", errorHandler, { once: true });
@@ -7184,7 +7288,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback16(() => {
+  const onDuration = useCallback17(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -7326,18 +7430,18 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React33.useContext(CompositionManager);
-  const timelineContext = React33.useContext(TimelineContext);
-  const setTimelineContext = React33.useContext(SetTimelineContext);
-  const sequenceContext = React33.useContext(SequenceContext);
-  const nonceContext = React33.useContext(NonceContext);
-  const canUseRemotionHooksContext = React33.useContext(CanUseRemotionHooks);
-  const preloadContext = React33.useContext(PreloadContext);
-  const resolveCompositionContext = React33.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React33.useContext(RenderAssetManager);
-  const sequenceManagerContext = React33.useContext(SequenceManager);
-  const bufferManagerContext = React33.useContext(BufferingContextReact);
-  const logLevelContext = React33.useContext(LogLevelContext);
+  const compositionManagerCtx = React34.useContext(CompositionManager);
+  const timelineContext = React34.useContext(TimelineContext);
+  const setTimelineContext = React34.useContext(SetTimelineContext);
+  const sequenceContext = React34.useContext(SequenceContext);
+  const nonceContext = React34.useContext(NonceContext);
+  const canUseRemotionHooksContext = React34.useContext(CanUseRemotionHooks);
+  const preloadContext = React34.useContext(PreloadContext);
+  const resolveCompositionContext = React34.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React34.useContext(RenderAssetManager);
+  const sequenceManagerContext = React34.useContext(SequenceManager);
+  const bufferManagerContext = React34.useContext(BufferingContextReact);
+  const logLevelContext = React34.useContext(LogLevelContext);
   return useMemo33(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -7510,7 +7614,8 @@ var Internals = {
   TimelineContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
-  getEffectiveVisualModeValue
+  getEffectiveVisualModeValue,
+  CompositionRenderErrorContext
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -7539,16 +7644,16 @@ var validateFrame = ({
   }
 };
 var flattenChildren = (children) => {
-  const childrenArray = React34.Children.toArray(children);
+  const childrenArray = React35.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React34.Fragment) {
+    if (child.type === React35.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext22(false);
+var IsInsideSeriesContext = createContext23(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
     value: true,
@@ -7562,7 +7667,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React35.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React36.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -8226,9 +8331,15 @@ var VideoForRenderingForwardFunction = ({
         if (onError) {
           return;
         }
-        throw new Error(`The browser threw an error while playing the video ${props2.src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+        throw new MediaPlaybackError({
+          message: `The browser threw an error while playing the video ${props2.src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`,
+          src: props2.src
+        });
       } else {
-        throw new Error("The browser threw an error");
+        throw new MediaPlaybackError({
+          message: "The browser threw an error",
+          src: props2.src
+        });
       }
     };
     current.addEventListener("error", errorHandler, { once: true });
@@ -8324,10 +8435,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback17((src, durationInSeconds) => {
+  const onDuration = useCallback18((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback17(() => {}, []);
+  const onVideoFrame = useCallback18(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -8842,7 +8953,7 @@ var ExpertsPageContent = ({ Link }) => {
   });
 };
 // ../design/dist/esm/index.mjs
-import { useCallback as useCallback18, useRef as useRef22, useState as useState22 } from "react";
+import { useCallback as useCallback19, useRef as useRef22, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -10184,7 +10295,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React7, { useEffect as useEffect18, useMemo as useMemo39, useState as useState20 } from "react";
+import React8, { useEffect as useEffect18, useMemo as useMemo39, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12950,7 +13061,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React2, { useMemo as useMemo38 } from "react";
+import React3, { useMemo as useMemo38 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -13019,7 +13130,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs5(React2.Fragment, {
+          return /* @__PURE__ */ jsxs5(React3.Fragment, {
             children: [
               /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -14542,20 +14653,20 @@ import React9 from "react";
 import * as React62 from "react";
 import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React72 from "react";
-import * as React8 from "react";
+import * as React82 from "react";
 import { Fragment as Fragment3, jsx as jsx132 } from "react/jsx-runtime";
 import { jsx as jsx142 } from "react/jsx-runtime";
-import * as React102 from "react";
+import * as React10 from "react";
 import { jsx as jsx152 } from "react/jsx-runtime";
-import * as React14 from "react";
-import * as React11 from "react";
+import * as React142 from "react";
+import * as React112 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React122 from "react";
+import * as React12 from "react";
 import * as React132 from "react";
 import { jsx as jsx172 } from "react/jsx-runtime";
 import * as React15 from "react";
-import * as React162 from "react";
+import * as React16 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React182 from "react";
 import * as React172 from "react";
@@ -14563,25 +14674,25 @@ import * as React22 from "react";
 import * as React192 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
 import * as ReactDOM2 from "react-dom";
-import * as React20 from "react";
+import * as React202 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React21 from "react";
 import { jsx as jsx202 } from "react/jsx-runtime";
-import * as React232 from "react";
+import * as React23 from "react";
 import ReactDOM3 from "react-dom";
 import { jsx as jsx213 } from "react/jsx-runtime";
-import * as React24 from "react";
-import * as React252 from "react";
+import * as React242 from "react";
+import * as React25 from "react";
 import * as React262 from "react";
 import { jsx as jsx223 } from "react/jsx-runtime";
-import * as React332 from "react";
+import * as React33 from "react";
 import * as React292 from "react";
 import { useState as useState112 } from "react";
-import * as React27 from "react";
-import * as React282 from "react";
-import * as React32 from "react";
-import * as React312 from "react";
-import * as React30 from "react";
+import * as React272 from "react";
+import * as React28 from "react";
+import * as React322 from "react";
+import * as React31 from "react";
+import * as React302 from "react";
 import { Fragment as Fragment62, jsx as jsx232, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
@@ -14589,12 +14700,12 @@ import * as React352 from "react";
 import { jsx as jsx242, jsxs as jsxs52 } from "react/jsx-runtime";
 import { jsx as jsx252 } from "react/jsx-runtime";
 import * as React48 from "react";
-import * as React36 from "react";
+import * as React362 from "react";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React46 from "react";
 import React39 from "react";
-import * as React372 from "react";
-import * as React38 from "react";
+import * as React37 from "react";
+import * as React382 from "react";
 import { Fragment as Fragment222, jsx as jsx272 } from "react/jsx-runtime";
 import { jsx as jsx282 } from "react/jsx-runtime";
 import React210 from "react";
@@ -14636,7 +14747,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React7.useState({
+  const [state, setState] = React8.useState({
     progress: 0,
     isActive: false
   });
@@ -14648,7 +14759,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -14723,8 +14834,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React7.useState(0);
-  React7.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React8.useState(0);
+  React8.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -14955,7 +15066,7 @@ var Button = ({
   const [dimensions, setDimensions] = useState22(null);
   const ref = useRef22(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback18((e) => {
+  const onPointerEnter = useCallback19((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -15278,43 +15389,43 @@ function composeRefs(...refs) {
 function useComposedRefs(...refs) {
   return React72.useCallback(composeRefs(...refs), refs);
 }
-var Slot = React8.forwardRef((props, forwardedRef) => {
+var Slot = React82.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React8.Children.toArray(children);
+  const childrenArray = React82.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React8.Children.count(newElement) > 1)
-          return React8.Children.only(null);
-        return React8.isValidElement(newElement) ? newElement.props.children : null;
+        if (React82.Children.count(newElement) > 1)
+          return React82.Children.only(null);
+        return React82.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children: React82.isValidElement(newElement) ? React82.cloneElement(newElement, undefined, newChildren) : null });
   }
   return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot.displayName = "Slot";
-var SlotClone = React8.forwardRef((props, forwardedRef) => {
+var SlotClone = React82.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React8.isValidElement(children)) {
+  if (React82.isValidElement(children)) {
     const childrenRef = getElementRef(children);
-    return React8.cloneElement(children, {
+    return React82.cloneElement(children, {
       ...mergeProps(slotProps, children.props),
       ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
+  return React82.Children.count(children) > 1 ? React82.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
   return /* @__PURE__ */ jsx132(Fragment3, { children });
 };
 function isSlottable(child) {
-  return React8.isValidElement(child) && child.type === Slottable;
+  return React82.isValidElement(child) && child.type === Slottable;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -15404,9 +15515,9 @@ function createCollection(name) {
     createCollectionScope
   ];
 }
-var DirectionContext = React102.createContext(undefined);
+var DirectionContext = React10.createContext(undefined);
 function useDirection(localDir) {
-  const globalDir = React102.useContext(DirectionContext);
+  const globalDir = React10.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 var NODES = [
@@ -15428,7 +15539,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React11.forwardRef((props, forwardedRef) => {
+  const Node2 = React112.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
@@ -15444,11 +15555,11 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React122.useRef(callback);
-  React122.useEffect(() => {
+  const callbackRef = React12.useRef(callback);
+  React12.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React122.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React12.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
@@ -15467,12 +15578,12 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React14.createContext({
+var DismissableLayerContext = React142.createContext({
   layers: /* @__PURE__ */ new Set,
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set,
   branches: /* @__PURE__ */ new Set
 });
-var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
+var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
   const {
     disableOutsidePointerEvents = false,
     onEscapeKeyDown,
@@ -15482,10 +15593,10 @@ var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
     onDismiss,
     ...layerProps
   } = props;
-  const context = React14.useContext(DismissableLayerContext);
-  const [node, setNode] = React14.useState(null);
+  const context = React142.useContext(DismissableLayerContext);
+  const [node, setNode] = React142.useState(null);
   const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-  const [, force] = React14.useState({});
+  const [, force] = React142.useState({});
   const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
   const layers = Array.from(context.layers);
   const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
@@ -15523,7 +15634,7 @@ var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React14.useEffect(() => {
+  React142.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -15541,7 +15652,7 @@ var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React14.useEffect(() => {
+  React142.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -15550,7 +15661,7 @@ var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
       dispatchUpdate();
     };
   }, [node, context]);
-  React14.useEffect(() => {
+  React142.useEffect(() => {
     const handleUpdate = () => force({});
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -15569,11 +15680,11 @@ var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
-  const context = React14.useContext(DismissableLayerContext);
-  const ref = React14.useRef(null);
+var DismissableLayerBranch = React142.forwardRef((props, forwardedRef) => {
+  const context = React142.useContext(DismissableLayerContext);
+  const ref = React142.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React14.useEffect(() => {
+  React142.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -15587,9 +15698,9 @@ var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React14.useRef(false);
-  const handleClickRef = React14.useRef(() => {});
-  React14.useEffect(() => {
+  const isPointerInsideReactTreeRef = React142.useRef(false);
+  const handleClickRef = React142.useRef(() => {});
+  React142.useEffect(() => {
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
@@ -15624,8 +15735,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React14.useRef(false);
-  React14.useEffect(() => {
+  const isFocusInsideReactTreeRef = React142.useRef(false);
+  React142.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -15683,7 +15794,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React162.forwardRef((props, forwardedRef) => {
+var FocusScope = React16.forwardRef((props, forwardedRef) => {
   const {
     loop = false,
     trapped = false,
@@ -15691,12 +15802,12 @@ var FocusScope = React162.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container22, setContainer] = React162.useState(null);
+  const [container22, setContainer] = React16.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React162.useRef(null);
+  const lastFocusedElementRef = React16.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
-  const focusScope = React162.useRef({
+  const focusScope = React16.useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -15705,7 +15816,7 @@ var FocusScope = React162.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React162.useEffect(() => {
+  React16.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
         if (focusScope.paused || !container22)
@@ -15747,7 +15858,7 @@ var FocusScope = React162.forwardRef((props, forwardedRef) => {
       };
     }
   }, [trapped, container22, focusScope.paused]);
-  React162.useEffect(() => {
+  React16.useEffect(() => {
     if (container22) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
@@ -15778,7 +15889,7 @@ var FocusScope = React162.forwardRef((props, forwardedRef) => {
       };
     }
   }, [container22, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React162.useCallback((event) => {
+  const handleKeyDown = React16.useCallback((event) => {
     if (!loop && !trapped)
       return;
     if (focusScope.paused)
@@ -17693,7 +17804,7 @@ var arrow3 = (options, deps) => ({
   options: [options, deps]
 });
 var NAME = "Arrow";
-var Arrow = React20.forwardRef((props, forwardedRef) => {
+var Arrow = React202.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsx192(Primitive.svg, {
     ...arrowProps,
@@ -17974,9 +18085,9 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow2 = PopperArrow;
 var PORTAL_NAME = "Portal";
-var Portal = React232.forwardRef((props, forwardedRef) => {
+var Portal = React23.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React232.useState(false);
+  const [mounted, setMounted] = React23.useState(false);
   useLayoutEffect22(() => setMounted(true), []);
   const container22 = containerProp || mounted && globalThis?.document?.body;
   return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx213(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
@@ -17991,7 +18102,7 @@ function useControllableState({
   const isControlled = prop !== undefined;
   const value = isControlled ? prop : uncontrolledProp;
   const handleChange = useCallbackRef(onChange);
-  const setValue = React24.useCallback((nextValue) => {
+  const setValue = React242.useCallback((nextValue) => {
     if (isControlled) {
       const setter = nextValue;
       const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
@@ -18007,11 +18118,11 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const uncontrolledState = React24.useState(defaultProp);
+  const uncontrolledState = React242.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React24.useRef(value);
+  const prevValueRef = React242.useRef(value);
   const handleChange = useCallbackRef(onChange);
-  React24.useEffect(() => {
+  React242.useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
       prevValueRef.current = value;
@@ -18020,8 +18131,8 @@ function useUncontrolledState({
   return uncontrolledState;
 }
 function usePrevious(value) {
-  const ref = React252.useRef({ value, previous: value });
-  return React252.useMemo(() => {
+  const ref = React25.useRef({ value, previous: value });
+  return React25.useMemo(() => {
     if (ref.current.value !== value) {
       ref.current.previous = ref.current.value;
       ref.current.value = value;
@@ -18238,7 +18349,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React27.useLayoutEffect : React27.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React272.useLayoutEffect : React272.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -18360,7 +18471,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React282.createElement(Target, __assign({}, rest));
+  return React28.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -18450,7 +18561,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React30.useEffect(function() {
+    React302.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -18555,7 +18666,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React312.useEffect(function() {
+  React31.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -18570,10 +18681,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React312.useMemo(function() {
+  var gap = React31.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -18700,16 +18811,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React32.useRef([]);
-  var touchStartRef = React32.useRef([0, 0]);
-  var activeAxis = React32.useRef();
-  var id = React32.useState(idCounter++)[0];
-  var Style2 = React32.useState(styleSingleton)[0];
-  var lastProps = React32.useRef(props);
-  React32.useEffect(function() {
+  var shouldPreventQueue = React322.useRef([]);
+  var touchStartRef = React322.useRef([0, 0]);
+  var activeAxis = React322.useRef();
+  var id = React322.useState(idCounter++)[0];
+  var Style2 = React322.useState(styleSingleton)[0];
+  var lastProps = React322.useRef(props);
+  React322.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React32.useEffect(function() {
+  React322.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -18725,7 +18836,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React32.useCallback(function(event, parent) {
+  var shouldCancelEvent = React322.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -18761,7 +18872,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React32.useCallback(function(_event) {
+  var shouldPrevent = React322.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -18788,7 +18899,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React32.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React322.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -18797,17 +18908,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React32.useCallback(function(event) {
+  var scrollTouchStart = React322.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = undefined;
   }, []);
-  var scrollWheel = React32.useCallback(function(event) {
+  var scrollWheel = React322.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React32.useCallback(function(event) {
+  var scrollTouchMove = React322.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React32.useEffect(function() {
+  React322.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -18827,7 +18938,7 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var { removeScrollBar, inert } = props;
-  return React32.createElement(React32.Fragment, null, inert ? React32.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React32.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
+  return React322.createElement(React322.Fragment, null, inert ? React322.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React322.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
 }
 function getOutermostShadowParent(node) {
   var shadowParent = null;
@@ -18841,8 +18952,8 @@ function getOutermostShadowParent(node) {
   return shadowParent;
 }
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
-var ReactRemoveScroll = React332.forwardRef(function(props, ref) {
-  return React332.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React33.forwardRef(function(props, ref) {
+  return React33.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -19952,19 +20063,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React36.createContext(defaultContext);
+    const BaseContext = React362.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React36.useMemo(() => context, Object.values(context));
+      const value = React362.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx262(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React36.useContext(Context);
+      const context = React362.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -19975,11 +20086,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React36.createContext(defaultContext);
+      return React362.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React36.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React362.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -20000,7 +20111,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React36.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React362.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -20038,26 +20149,26 @@ function composeRefs2(...refs) {
   };
 }
 function useComposedRefs2(...refs) {
-  return React372.useCallback(composeRefs2(...refs), refs);
+  return React37.useCallback(composeRefs2(...refs), refs);
 }
 function createSlot(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React38.forwardRef((props, forwardedRef) => {
+  const Slot2 = React382.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React38.Children.toArray(children);
+    const childrenArray = React382.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable2);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React38.Children.count(newElement) > 1)
-            return React38.Children.only(null);
-          return React38.isValidElement(newElement) ? newElement.props.children : null;
+          if (React382.Children.count(newElement) > 1)
+            return React382.Children.only(null);
+          return React382.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx272(SlotClone2, { ...slotProps, ref: forwardedRef, children: React38.isValidElement(newElement) ? React38.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx272(SlotClone2, { ...slotProps, ref: forwardedRef, children: React382.isValidElement(newElement) ? React382.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx272(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
@@ -20065,24 +20176,24 @@ function createSlot(ownerName) {
   return Slot2;
 }
 function createSlotClone(ownerName) {
-  const SlotClone2 = React38.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React382.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React38.isValidElement(children)) {
+    if (React382.isValidElement(children)) {
       const childrenRef = getElementRef2(children);
       const props2 = mergeProps2(slotProps, children.props);
-      if (children.type !== React38.Fragment) {
+      if (children.type !== React382.Fragment) {
         props2.ref = forwardedRef ? composeRefs2(forwardedRef, childrenRef) : childrenRef;
       }
-      return React38.cloneElement(children, props2);
+      return React382.cloneElement(children, props2);
     }
-    return React38.Children.count(children) > 1 ? React38.Children.only(null) : null;
+    return React382.Children.count(children) > 1 ? React382.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function isSlottable2(child) {
-  return React38.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React382.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps2(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -21093,7 +21204,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React53, { useCallback as useCallback30, useMemo as useMemo48 } from "react";
+import React53, { useCallback as useCallback31, useMemo as useMemo48 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -22765,7 +22876,7 @@ var CompanyPricing = () => {
   const [automatorsSelected, setAutomatorsSelected] = React53.useState(true);
   const [devSeatCount, setDevSeatCount] = React53.useState(3);
   const [cloudRenders, setCloudRenders] = React53.useState(1e4);
-  const formatPrice = useCallback30((price) => {
+  const formatPrice = useCallback31((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -23496,13 +23607,13 @@ import React55 from "react";
 import { useContext as useContext210, useEffect as useEffect40, useState as useState40 } from "react";
 import { useContext as useContext43, useLayoutEffect as useLayoutEffect16 } from "react";
 import { jsx as jsx312 } from "react/jsx-runtime";
-import { useCallback as useCallback31, useRef as useRef38 } from "react";
+import { useCallback as useCallback32, useRef as useRef38 } from "react";
 import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useContext as useContext44, useEffect as useEffect52, useRef as useRef52 } from "react";
 import { useEffect as useEffect310, useRef as useRef39 } from "react";
 import { useCallback as useCallback210, useContext as useContext38, useMemo as useMemo49, useRef as useRef210, useState as useState310 } from "react";
 import { useEffect as useEffect42, useRef as useRef42 } from "react";
-import { useCallback as useCallback32, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
   useEffect as useEffect132,
@@ -23512,7 +23623,7 @@ import {
   useRef as useRef122,
   useState as useState132
 } from "react";
-import React103, {
+import React102, {
   Suspense as Suspense2,
   forwardRef as forwardRef31,
   useCallback as useCallback112,
@@ -25390,7 +25501,7 @@ var useElementSize = (ref, options2) => {
       });
     });
   }, [options2.shouldApplyCssTransforms]);
-  const updateSize = useCallback32(() => {
+  const updateSize = useCallback33(() => {
     if (!ref.current) {
       return;
     }
@@ -26567,7 +26678,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
   }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
-var reactVersion = React103.version.split(".")[0];
+var reactVersion = React102.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -27049,13 +27160,13 @@ var PlayerUI = ({
   });
 };
 var PlayerUI_default = forwardRef31(PlayerUI);
-var DEFAULT_VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
+var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
     return;
   }
   try {
-    window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
+    window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
   } catch (e) {
     Internals.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
@@ -27065,7 +27176,7 @@ var getPreferredVolume = (volumePersistenceKey) => {
     return 1;
   }
   try {
-    const val = window.localStorage.getItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY);
+    const val = window.localStorage.getItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY);
     return val ? Number(val) : 1;
   } catch {
     return 1;
@@ -27761,7 +27872,7 @@ var Thumbnail = forward2(ThumbnailFn);
 
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback46,
+  useCallback as useCallback47,
   useEffect as useEffect56,
   useMemo as useMemo61,
   useRef as useRef50,
@@ -33778,19 +33889,19 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo57, useState as useState48 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect48, useMemo as useMemo57, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
-  useCallback as useCallback37,
+  useCallback as useCallback38,
   useEffect as useEffect47,
   useRef as useRef47,
   useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
-import { useCallback as useCallback35, useRef as useRef43 } from "react";
+import { useCallback as useCallback36, useRef as useRef43 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -33824,10 +33935,10 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback33 } from "react";
+import { useCallback as useCallback34 } from "react";
 import { jsx as jsx60, jsxs as jsxs15 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback33((e) => {
+  const onPointerDown = useCallback34((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
@@ -33890,7 +34001,7 @@ var Card2 = ({
   const refToUse = refsToUse[index2];
   const stopPrevious = useRef43([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback35((except) => {
+  const applyPositions = useCallback36((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -33963,7 +34074,7 @@ var Card2 = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback35((e) => {
+  const onPointerDown = useCallback36((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -34024,7 +34135,7 @@ var Card2 = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index2, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback35((e) => {
+  const onPointerUp = useCallback36((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index2);
@@ -34151,7 +34262,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 // src/components/homepage/Demo/EmojiCard.tsx
 import {
   forwardRef as forwardRef33,
-  useCallback as useCallback36,
+  useCallback as useCallback37,
   useEffect as useEffect46,
   useImperativeHandle as useImperativeHandle12,
   useRef as useRef46
@@ -34435,7 +34546,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
   const ref2 = useRef46(null);
   const ref3 = useRef46(null);
   const transforms = useRef46([-100, 0, 100]);
-  const onLeft = useCallback36(() => {
+  const onLeft = useCallback37(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -34446,7 +34557,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback36(() => {
+  const onRight = useCallback37(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -34906,11 +35017,11 @@ var Cards = ({
     };
   }, [onToggle]);
   const ref = useRef47(null);
-  const onLeft = useCallback37(() => {
+  const onLeft = useCallback38(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback37(() => {
+  const onRight = useCallback38(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
@@ -34980,7 +35091,7 @@ var HomepageVideoComp = ({
   onClickRight
 }) => {
   const [rerenders, setRerenders] = useState48(0);
-  const onUpdate = useCallback38((newIndices) => {
+  const onUpdate = useCallback39((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
@@ -35078,7 +35189,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.443";
+var VERSION2 = "4.0.445";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -38855,6 +38966,14 @@ var internalRenderMediaOnWeb = async ({
     if (videoEnabled && codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
       return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container4}`));
     }
+    if (transparent) {
+      if (container4 !== "webm" && container4 !== "mkv") {
+        return Promise.reject(new Error(`Transparent videos are only supported with the "webm" and "mkv" containers, but you specified "${container4}". Change the \`container\` option to "webm" or "mkv".`));
+      }
+      if (codec && codec !== "vp8" && codec !== "vp9") {
+        return Promise.reject(new Error(`Transparent videos are only supported with the "vp8" and "vp9" codecs, but you specified "${codec}". Change the \`videoCodec\` option to "vp8" or "vp9", or remove it to use the default.`));
+      }
+    }
     const resolvedAudioBitrate = typeof audioBitrate === "number" ? audioBitrate : getQualityForWebRendererQuality(audioBitrate);
     let finalAudioCodec = null;
     if (!muted) {
@@ -39188,7 +39307,7 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React69, { useCallback as useCallback39 } from "react";
+import React69, { useCallback as useCallback40 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -39389,7 +39508,7 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
   const [state, setState] = React69.useState({
     type: "idle"
   });
-  const triggerRender = useCallback39(async () => {
+  const triggerRender = useCallback40(async () => {
     if (renderData === null) {
       return;
     }
@@ -39564,10 +39683,10 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo60, useRef as useRef48, useState as useState51 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect50, useMemo as useMemo60, useRef as useRef48, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback40, useEffect as useEffect49, useMemo as useMemo59, useState as useState50 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect49, useMemo as useMemo59, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
   const observer = useMemo59(() => {
@@ -39581,7 +39700,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback40(() => {
+  const updateSize = useCallback41(() => {
     if (ref === null) {
       return;
     }
@@ -39733,7 +39852,7 @@ var PlayerSeekBar2 = ({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
-  const onPointerDown = useCallback41((e) => {
+  const onPointerDown = useCallback43((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -39747,7 +39866,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback41((e) => {
+  const onPointerMove = useCallback43((e) => {
     if (!size4) {
       throw new Error("Player has no size");
     }
@@ -39758,7 +39877,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size4.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size4]);
-  const onPointerUp = useCallback41(() => {
+  const onPointerUp = useCallback43(() => {
     setDragging({
       dragging: false
     });
@@ -39842,7 +39961,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback43, useEffect as useEffect51, useRef as useRef49, useState as useState54 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect51, useRef as useRef49, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -39923,7 +40042,7 @@ var PlayerVolume = ({ playerRef }) => {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback43(() => {
+  const onClick = useCallback45(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -39961,7 +40080,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React73, { useCallback as useCallback45, useEffect as useEffect53 } from "react";
+import React73, { useCallback as useCallback46, useEffect as useEffect53 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -39997,7 +40116,7 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback45(() => {
+  const onToggle = useCallback46(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
@@ -40217,7 +40336,7 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback46((newCardOrder) => {
+  const updateCardOrder = useCallback47((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
   const props = useMemo61(() => {
@@ -40239,7 +40358,7 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback46(() => {
+  const onError = useCallback47(() => {
     setError(true);
   }, []);
   return /* @__PURE__ */ jsxs39("div", {
@@ -40354,7 +40473,7 @@ import { forwardRef as forwardRef36, useEffect as useEffect58, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef35, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState57 } from "react";
+import { forwardRef as forwardRef35, useCallback as useCallback48, useEffect as useEffect57, useRef as useRef51, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef51(null);
@@ -40376,8 +40495,8 @@ var VideoPlayerWithControls = forwardRef35(({ playbackId, poster, currentTime, o
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef51(null);
   const [playerInitTime] = useState57(Date.now());
-  const videoError = useCallback47((event) => onError(event), [onError]);
-  const onImageLoad = useCallback47((event) => {
+  const videoError = useCallback48((event) => onError(event), [onError]);
+  const onImageLoad = useCallback48((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -40751,13 +40870,13 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback48, useState as useState60 } from "react";
+import { useCallback as useCallback49, useState as useState60 } from "react";
 import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
 var NewsletterButton = () => {
   const [email, setEmail] = useState60("");
   const [submitting, setSubmitting] = useState60(false);
   const [subscribed, setSubscribed] = useState60(false);
-  const handleSubmit = useCallback48(async (e) => {
+  const handleSubmit = useCallback49(async (e) => {
     try {
       setSubmitting(true);
       e.preventDefault();