@remotion/promo-pages 4.0.489 → 4.0.491

package/dist/Homepage.js

@@ -1153,13 +1153,12 @@ import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React39, { useMemo as useMemo37 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import {
-  Children,
+import React41, {
   forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
 import React40 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 import React42 from "react";
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
@@ -2049,26 +2048,20 @@ var continueRenderInternal = ({
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
-    if (h === handle) {
-      if (environment.isRendering && scope !== undefined) {
-        if (!scope.remotion_delayRenderTimeouts[handle]) {
-          return false;
-        }
-        const { label: label2, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
-        clearTimeout(timeout);
-        const message = [
-          label2 ? `"${label2}"` : "A handle",
-          DELAY_RENDER_CLEAR_TOKEN,
-          `${Date.now() - startTime}ms`
-        ].filter(truthy).join(" ");
-        Log.verbose({ logLevel, tag: "delayRender()" }, message);
-        delete scope.remotion_delayRenderTimeouts[handle];
-      }
-      return false;
-    }
-    return true;
-  });
+  const handleExists = scope.remotion_delayRenderHandles.includes(handle);
+  const timeoutEntry = scope.remotion_delayRenderTimeouts[handle];
+  if (handleExists && environment.isRendering && timeoutEntry) {
+    const { label: label2, startTime, timeout } = timeoutEntry;
+    clearTimeout(timeout);
+    const message = [
+      label2 ? `"${label2}"` : "A handle",
+      DELAY_RENDER_CLEAR_TOKEN,
+      `${Date.now() - startTime}ms`
+    ].filter(truthy).join(" ");
+    Log.verbose({ logLevel, tag: "delayRender()" }, message);
+    delete scope.remotion_delayRenderTimeouts[handle];
+  }
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => h !== handle);
   if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
@@ -2341,7 +2334,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.489";
+var VERSION = "4.0.491";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2722,7 +2715,8 @@ var transformSchema = {
     max: 100,
     step: 0.01,
     default: 1,
-    description: "Scale"
+    description: "Scale",
+    defaultKeyframeOutput: "perceptual-scale"
   },
   "style.rotate": {
     type: "rotation-css",
@@ -2953,7 +2947,7 @@ var SequenceManagerRefContext = React11.createContext({
   current: []
 });
 var makeSequencePropsSubscriptionKey = (key) => {
-  return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
+  return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
 var VisualModePropStatusesContext = React11.createContext({
   propStatuses: {}
@@ -3526,8 +3520,20 @@ var serializeStringInterpolationValue = ({
   }
   return values.slice(0, dimensions).map((value, index) => `${stringifyNumber(value)}${units[index]}`).join(" ");
 };
+var toSignedArea = (scale) => {
+  if (scale === 0) {
+    return 0;
+  }
+  return Math.sign(scale) * scale * scale;
+};
+var fromSignedArea = (area) => {
+  if (area === 0) {
+    return 0;
+  }
+  return Math.sign(area) * Math.sqrt(Math.abs(area));
+};
 function interpolateFunction(input, inputRange, outputRange, options) {
-  const { extrapolateLeft, extrapolateRight, easing } = options;
+  const { extrapolateLeft, extrapolateRight, easing, output } = options;
   let result = input;
   const [inputMin, inputMax] = inputRange;
   const [outputMin, outputMax] = outputRange;
@@ -3558,7 +3564,13 @@ function interpolateFunction(input, inputRange, outputRange, options) {
   }
   result = (result - inputMin) / (inputMax - inputMin);
   result = easing(result);
-  result = result * (outputMax - outputMin) + outputMin;
+  if (output === "perceptual-scale") {
+    const signedAreaMin = toSignedArea(outputMin);
+    const signedAreaMax = toSignedArea(outputMax);
+    result = fromSignedArea(result * (signedAreaMax - signedAreaMin) + signedAreaMin);
+  } else {
+    result = result * (outputMax - outputMin) + outputMin;
+  }
   return result;
 }
 function findRange(input, inputRange) {
@@ -3571,6 +3583,9 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var resolveOutputOption = (output) => {
+  return output ?? "linear";
+};
 var shouldExtendRightForEasing = (easing) => {
   return easing.remotionShouldExtendRight === true;
 };
@@ -3592,12 +3607,14 @@ var interpolateSegment = ({
   outputRange,
   easing,
   extrapolateLeft,
-  extrapolateRight
+  extrapolateRight,
+  output
 }) => {
   return interpolateFunction(input, inputRange, outputRange, {
     easing,
     extrapolateLeft,
-    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight,
+    output
   });
 };
 var interpolateNumber = ({
@@ -3606,6 +3623,7 @@ var interpolateNumber = ({
   outputRange,
   options
 }) => {
+  const output = resolveOutputOption(options?.output);
   if (inputRange.length === 1) {
     return outputRange[0];
   }
@@ -3630,7 +3648,8 @@ var interpolateNumber = ({
     outputRange: [outputRange[range], outputRange[range + 1]],
     easing,
     extrapolateLeft,
-    extrapolateRight
+    extrapolateRight,
+    output
   });
   for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
     const previousEasing = resolveEasingForSegment({
@@ -3650,7 +3669,8 @@ var interpolateNumber = ({
       outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
       easing: previousEasing,
       extrapolateLeft,
-      extrapolateRight: "extend"
+      extrapolateRight: "extend",
+      output
     });
     result += continuedSegmentValue - outputRange[segmentIndex + 1];
   }
@@ -3698,14 +3718,18 @@ var interpolateString = ({
       }
     }
   }
-  return serializeStringInterpolationValue({
-    kind,
-    values: [0, 0, 0].map((_, axis) => interpolateNumber({
+  const values = [0, 0, 0];
+  for (let axis = 0;axis < dimensions; axis++) {
+    values[axis] = interpolateNumber({
       input,
       inputRange,
       outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
       options
-    })),
+    });
+  }
+  return serializeStringInterpolationValue({
+    kind,
+    values,
     units,
     dimensions
   });
@@ -3789,6 +3813,12 @@ function assertValidInterpolatePosterizeOption(posterize) {
     throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
   }
 }
+function assertValidInterpolateOutputOption(output) {
+  if (output === undefined || output === "linear" || output === "perceptual-scale") {
+    return;
+  }
+  throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -3806,6 +3836,7 @@ function interpolate(input, inputRange, outputRange, options) {
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption(options?.posterize);
+  assertValidInterpolateOutputOption(options?.output);
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
@@ -4750,6 +4781,7 @@ var interpolateKeyframedStatus = ({
       easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
+      output: status.output,
       posterize: status.posterize
     });
   } catch {
@@ -4990,7 +5022,7 @@ var getFlatSchemaWithAllKeys = (schema) => {
   const out = {};
   const addKey = (key, field) => {
     if (key in out) {
-      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+      return;
     }
     out[key] = field;
   };
@@ -5528,6 +5560,7 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.data.src,
           getStack: () => stackRef.current,
           startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
+          mediaFrameAtSequenceZero,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
@@ -5591,6 +5624,7 @@ var RegularSequenceRefForwardingFunction = ({
     isInsideSeries,
     registeredFrozenFrame,
     startMediaFrom,
+    mediaFrameAtSequenceZero,
     frozenMediaFrame
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -7541,7 +7575,9 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         return;
       }
       if (data === undefined) {
-        current.src = EMPTY_AUDIO;
+        if (current.src !== EMPTY_AUDIO) {
+          current.src = EMPTY_AUDIO;
+        }
         return;
       }
       if (!data) {
@@ -7610,7 +7646,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       if (prevA.id === id) {
         const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
-          return prevA;
+          return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
         }
         changed = true;
         return {
@@ -7622,7 +7658,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
           audioMounted
         };
       }
-      return prevA;
+      return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
     });
     if (changed) {
       rerenderAudios();
@@ -7661,16 +7697,19 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
+  const sharedAudioTagElements = useMemo21(() => {
+    return refs.map(({ id, ref }) => {
+      return /* @__PURE__ */ jsx19("audio", {
+        ref,
+        preload: "metadata",
+        src: EMPTY_AUDIO
+      }, id);
+    });
+  }, [refs]);
   return /* @__PURE__ */ jsxs22(SharedAudioTagsContext.Provider, {
     value: audioTagsValue,
     children: [
-      refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx19("audio", {
-          ref,
-          preload: "metadata",
-          src: EMPTY_AUDIO
-        }, id);
-      }),
+      sharedAudioTagElements,
       children
     ]
   });
@@ -8131,6 +8170,7 @@ var useMediaInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt,
+      mediaFrameAtSequenceZero: null,
       doesVolumeChange,
       loopDisplay,
       playbackRate,
@@ -9764,16 +9804,16 @@ var isMissingPaintRecordError = (error2) => {
   return error2 instanceof DOMException && error2.name === "InvalidStateError";
 };
 var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
-var resizeOffscreenCanvas = ({
-  offscreen,
+var resizePaintTarget = ({
+  target,
   width,
   height
 }) => {
-  if (offscreen.width !== width) {
-    offscreen.width = width;
+  if (target.width !== width) {
+    target.width = width;
   }
-  if (offscreen.height !== height) {
-    offscreen.height = height;
+  if (target.height !== height) {
+    target.height = height;
   }
 };
 var defaultOnPaint = ({
@@ -9789,7 +9829,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext23(false);
+var HtmlInCanvasAncestorContext = createContext23(null);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -9801,20 +9841,22 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext31(HtmlInCanvasAncestorContext);
+  const ancestor = useContext31(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const { isRendering } = useRemotionEnvironment();
+  const { isClientSideRendering, isRendering } = useRemotionEnvironment();
+  const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
+  const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
   const canvas2dRef = useRef22(null);
-  const offscreenRef = useRef22(null);
+  const paintTargetRef = useRef22(null);
   const divRef = useRef22(null);
-  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
+  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? "direct" : "offscreen"}`;
   const setLayoutCanvasRef = useCallback16((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
@@ -9837,17 +9879,19 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef22(false);
   const onInitCleanupRef = useRef22(null);
   const unmountedRef = useRef22(false);
+  const ancestorRef = useRef22(ancestor);
+  ancestorRef.current = ancestor;
   const onPaintCb = useCallback16(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
     }
-    const offscreen = offscreenRef.current;
-    if (!offscreen) {
-      throw new Error("HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)");
+    const paintTarget = paintTargetRef.current;
+    if (!paintTarget) {
+      throw new Error("HtmlInCanvas: paint target is not ready because the canvas is remounting");
     }
-    resizeOffscreenCanvas({
-      offscreen,
+    resizePaintTarget({
+      target: paintTarget,
       width: canvasWidth,
       height: canvasHeight
     });
@@ -9858,22 +9902,30 @@ var HtmlInCanvasContent = forwardRef9(({
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        let initImage = null;
-        try {
-          initImage = placeholderCanvas.captureElementImage(element);
-        } catch (error2) {
-          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
-            throw new Error(missingPaintRecordMessage);
-          } else {
+        const currentOnInit = onInitRef.current;
+        if (!currentOnInit) {
+          initializedRef.current = true;
+        } else {
+          let initImage;
+          try {
+            initImage = placeholderCanvas.captureElementImage(element);
+          } catch (error2) {
+            if (isMissingPaintRecordError(error2) && canRetryMissingPaintRecord) {
+              continueRender2(handle);
+              return;
+            }
+            if (isMissingPaintRecordError(error2)) {
+              throw new Error(missingPaintRecordMessage);
+            }
             throw error2;
           }
-        }
-        if (initImage) {
           initializedRef.current = true;
-          const currentOnInit = onInitRef.current;
-          if (currentOnInit) {
+          try {
+            if (paintTarget instanceof HTMLCanvasElement) {
+              throw new Error("HtmlInCanvas: onInit requires an OffscreenCanvas paint target");
+            }
             const cleanup = await currentOnInit({
-              canvas: offscreen,
+              canvas: paintTarget,
               element,
               elementImage: initImage,
               pixelDensity: resolvedPixelDensity
@@ -9886,15 +9938,16 @@ var HtmlInCanvasContent = forwardRef9(({
             } else {
               onInitCleanupRef.current = cleanup;
             }
+          } finally {
+            initImage.close();
           }
         }
       }
-      const handler = onPaintRef.current ?? defaultOnPaint;
       let elImage;
       try {
         elImage = placeholderCanvas.captureElementImage(element);
       } catch (error2) {
-        if (isMissingPaintRecordError(error2) && !isRendering) {
+        if (isMissingPaintRecordError(error2) && canRetryMissingPaintRecord) {
           continueRender2(handle);
           return;
         }
@@ -9903,20 +9956,41 @@ var HtmlInCanvasContent = forwardRef9(({
         }
         throw error2;
       }
-      await handler({
-        canvas: offscreen,
-        element,
-        elementImage: elImage,
-        pixelDensity: resolvedPixelDensity
-      });
-      await runEffectChain({
-        state: chainState.get(canvasWidth, canvasHeight),
-        source: offscreen,
-        effects: effectsRef.current,
-        output: offscreen,
-        width: canvasWidth,
-        height: canvasHeight
-      });
+      try {
+        const currentOnPaint = onPaintRef.current;
+        if (currentOnPaint) {
+          if (paintTarget instanceof HTMLCanvasElement) {
+            throw new Error("HtmlInCanvas: onPaint requires an OffscreenCanvas paint target");
+          }
+          const paintResult = currentOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+          if (paintResult) {
+            await paintResult;
+          }
+        } else {
+          defaultOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+        }
+        await runEffectChain({
+          state: chainState.get(canvasWidth, canvasHeight),
+          source: paintTarget,
+          effects: effectsRef.current,
+          output: paintTarget,
+          width: canvasWidth,
+          height: canvasHeight
+        });
+      } finally {
+        elImage.close();
+      }
+      ancestorRef.current?.requestParentPaint();
       continueRender2(handle);
     } catch (error2) {
       cancelRender2(error2);
@@ -9928,7 +10002,7 @@ var HtmlInCanvasContent = forwardRef9(({
     continueRender2,
     cancelRender2,
     resolvedPixelDensity,
-    isRendering
+    canRetryMissingPaintRecord
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -9936,10 +10010,10 @@ var HtmlInCanvasContent = forwardRef9(({
       throw new Error("Canvas not found");
     }
     placeholder.layoutSubtree = true;
-    const offscreen = placeholder.transferControlToOffscreen();
-    offscreenRef.current = offscreen;
-    resizeOffscreenCanvas({
-      offscreen,
+    const paintTarget = usesDirectLayoutCanvas ? placeholder : placeholder.transferControlToOffscreen();
+    paintTargetRef.current = paintTarget;
+    resizePaintTarget({
+      target: paintTarget,
       width: canvasWidth,
       height: canvasHeight
     });
@@ -9948,13 +10022,19 @@ var HtmlInCanvasContent = forwardRef9(({
     placeholder.addEventListener("paint", onPaintCb);
     return () => {
       placeholder.removeEventListener("paint", onPaintCb);
-      offscreenRef.current = null;
+      paintTargetRef.current = null;
       initializedRef.current = false;
       unmountedRef.current = true;
       onInitCleanupRef.current?.();
       onInitCleanupRef.current = null;
     };
-  }, [onPaintCb, cancelRender2, canvasWidth, canvasHeight]);
+  }, [
+    onPaintCb,
+    cancelRender2,
+    canvasWidth,
+    canvasHeight,
+    usesDirectLayoutCanvas
+  ]);
   const onPaintChangedRef = useRef22(false);
   useLayoutEffect9(() => {
     if (!onPaintChangedRef.current) {
@@ -9993,11 +10073,15 @@ var HtmlInCanvasContent = forwardRef9(({
       ...style ?? {}
     };
   }, [height, style, width]);
-  if (isInsideAncestorHtmlInCanvas) {
-    throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
-  }
+  const ancestorValue = useMemo30(() => {
+    return {
+      requestParentPaint: () => {
+        canvas2dRef.current?.requestPaint?.();
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsx25(HtmlInCanvasAncestorContext.Provider, {
-    value: true,
+    value: ancestorValue,
     children: /* @__PURE__ */ jsx25("canvas", {
       ref: setLayoutCanvasRef,
       width: canvasWidth,
@@ -10869,6 +10953,22 @@ var Img = withInteractivitySchema({
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
+var sourcePathToIdentityPrefix = (packageName) => {
+  if (packageName === "remotion") {
+    return "dev.remotion.remotion";
+  }
+  if (packageName.startsWith("@remotion/")) {
+    const normalizedPackageName = packageName.slice("@remotion/".length).replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    return `dev.remotion.${normalizedPackageName}`;
+  }
+  throw new Error(`Unsupported Remotion package name: ${packageName}`);
+};
+var makeRemotionComponentIdentity = ({
+  packageName,
+  componentName
+}) => {
+  return `${sourcePathToIdentityPrefix(packageName)}.${componentName}`;
+};
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
@@ -10882,6 +10982,11 @@ var setRef = (ref, value) => {
     ref.current = value;
   }
 };
+var withSchema = (options) => {
+  const Wrapped = withInteractivitySchema(options);
+  addSequenceStackTraces(Wrapped);
+  return Wrapped;
+};
 var makeInteractiveElement = (tag, displayName) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
@@ -10921,15 +11026,17 @@ var makeInteractiveElement = (tag, displayName) => {
     });
   });
   Inner.displayName = displayName;
-  const Wrapped = withInteractivitySchema({
+  const Wrapped = withSchema({
     Component: Inner,
     componentName: displayName,
-    componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
+    componentIdentity: makeRemotionComponentIdentity({
+      packageName: "remotion",
+      componentName: displayName.slice(1, -1)
+    }),
     schema: interactiveElementSchema,
     supportsEffects: false
   });
   Wrapped.displayName = displayName;
-  addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
 var Interactive = {
@@ -10938,7 +11045,8 @@ var Interactive = {
   textSchema,
   premountSchema,
   sequenceSchema,
-  withSchema: withInteractivitySchema,
+  withSchema,
+  _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
   A: makeInteractiveElement("a", "<Interactive.A>"),
   Article: makeInteractiveElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
@@ -12343,66 +12451,130 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+var seriesSequenceSchema = {
+  durationInFrames: Interactive.baseSchema.durationInFrames,
+  name: Interactive.sequenceSchema.name,
+  hidden: Interactive.sequenceSchema.hidden,
+  showInTimeline: Interactive.sequenceSchema.showInTimeline,
+  freeze: Interactive.baseSchema.freeze,
+  layout: Interactive.sequenceSchema.layout
+};
+var SeriesSequenceInner = forwardRef14(({
+  offset = 0,
+  className = "",
+  stack = null,
+  _remotionInternalRender = null,
+  ...props2
+}, ref) => {
   useRequireToBeInsideSeries();
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props2, offset, className: className || undefined, stack }, ref);
+  }
   return /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
-    children
+    children: props2.children
   });
-};
-var SeriesSequence = forwardRef14(SeriesSequenceRefForwardingFunction);
+});
+var SeriesSequence = Interactive.withSchema({
+  Component: SeriesSequenceInner,
+  componentName: "<Series.Sequence>",
+  componentIdentity: "dev.remotion.remotion.Series.Sequence",
+  schema: seriesSequenceSchema,
+  supportsEffects: false
+});
 var SequenceWithoutSchemaWithRef = SequenceWithoutSchema;
+var validateSeriesSequenceProps = ({
+  durationInFrames,
+  offset: offsetProp,
+  index,
+  childrenLength
+}) => {
+  const debugInfo = `index = ${index}, duration = ${durationInFrames}`;
+  if (index !== childrenLength - 1 || durationInFrames !== Infinity) {
+    validateDurationInFrames(durationInFrames, {
+      component: `of a <Series.Sequence /> component`,
+      allowFloats: true
+    });
+  }
+  const offset = offsetProp ?? 0;
+  if (Number.isNaN(offset)) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+  }
+  if (!Number.isFinite(offset)) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+  }
+  if (offset % 1 !== 0) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+  }
+  return offset;
+};
 var SeriesInner = (props2) => {
   const childrenValue = useMemo38(() => {
-    let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
-    return Children.map(flattenedChildren, (child, i) => {
+    const renderChildren = (i, startFrame) => {
+      if (i === flattenedChildren.length) {
+        return null;
+      }
+      const child = flattenedChildren[i];
       const castedChild = child;
       if (typeof castedChild === "string") {
         if (castedChild.trim() === "") {
-          return null;
+          return renderChildren(i + 1, startFrame);
         }
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
       }
       if (castedChild.type !== SeriesSequence) {
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
       }
-      const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-      const durationInFramesProp = castedChild.props.durationInFrames;
-      const {
-        durationInFrames,
-        children: _children,
-        from,
-        name,
-        ...passedProps
-      } = castedChild.props;
-      if (i !== flattenedChildren.length - 1 || durationInFramesProp !== Infinity) {
-        validateDurationInFrames(durationInFramesProp, {
-          component: `of a <Series.Sequence /> component`,
-          allowFloats: true
-        });
-      }
-      const offset = castedChild.props.offset ?? 0;
-      if (Number.isNaN(offset)) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-      }
-      if (!Number.isFinite(offset)) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      if (offset % 1 !== 0) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      const currentStartFrame = startFrame + offset;
-      startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
-        ref: castedChild.ref,
-        name: name || "<Series.Sequence>",
-        _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
-        from: currentStartFrame,
-        durationInFrames: durationInFramesProp,
-        ...passedProps,
-        children: child
+      const castedElement = castedChild;
+      validateSeriesSequenceProps({
+        durationInFrames: castedElement.props.durationInFrames,
+        offset: castedElement.props.offset,
+        index: i,
+        childrenLength: flattenedChildren.length
       });
-    });
+      return React41.cloneElement(castedElement, {
+        _remotionInternalRender: (resolvedProps, ref) => {
+          const durationInFramesProp = resolvedProps.durationInFrames;
+          const {
+            durationInFrames: _durationInFrames,
+            children: sequenceChildren,
+            offset: offsetProp,
+            controls,
+            stack,
+            from: _from,
+            name,
+            ...passedProps
+          } = resolvedProps;
+          const offset = validateSeriesSequenceProps({
+            durationInFrames: durationInFramesProp,
+            offset: offsetProp,
+            index: i,
+            childrenLength: flattenedChildren.length
+          });
+          const currentStartFrame = startFrame + offset;
+          const nextStartFrame = startFrame + durationInFramesProp + offset;
+          return /* @__PURE__ */ jsxs3(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
+                ref,
+                name: name || "<Series.Sequence>",
+                _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
+                _remotionInternalStack: stack ?? undefined,
+                controls: controls ?? undefined,
+                from: currentStartFrame,
+                durationInFrames: durationInFramesProp,
+                ...passedProps,
+                children: /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
+                  children: sequenceChildren
+                })
+              }),
+              renderChildren(i + 1, nextStartFrame)
+            ]
+          });
+        }
+      });
+    };
+    return renderChildren(0, 0);
   }, [props2.children]);
   return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
     children: /* @__PURE__ */ jsx37(Sequence, {
@@ -13001,7 +13173,7 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // src/components/team/TeamCards.tsx
-import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 var LinkedInLogo = () => {
   return /* @__PURE__ */ jsx40("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -13056,14 +13228,14 @@ var TeamMemberCard = ({
   github,
   email
 }) => {
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
     children: [
       /* @__PURE__ */ jsx40("img", {
         src: image,
         className: "w-[250px] h-[250px] rounded-xl border-effect"
       }),
-      /* @__PURE__ */ jsxs3("div", {
+      /* @__PURE__ */ jsxs4("div", {
         className: "flex flex-col border-effect px-4 py-3 bg-pane",
         children: [
           /* @__PURE__ */ jsx40("h2", {
@@ -13081,7 +13253,7 @@ var TeamMemberCard = ({
           /* @__PURE__ */ jsx40("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs3("div", {
+          /* @__PURE__ */ jsxs4("div", {
             className: "gap-3 flex flex-row",
             children: [
               /* @__PURE__ */ jsx40("a", {
@@ -13116,7 +13288,7 @@ var TeamMemberCard = ({
   });
 };
 var TeamCardsLayout = () => {
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     className: "flex flex-col gap-12 md:gap-4",
     children: [
       /* @__PURE__ */ jsx40(TeamMemberCard, {
@@ -13184,7 +13356,7 @@ var PersonalWebsite = () => {
 };
 
 // src/components/experts/ExpertsPage.tsx
-import { jsx as jsx43, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 var arrowIcon = {
   height: 16,
   marginLeft: 10
@@ -13215,7 +13387,7 @@ var wrapperStyle = {
   paddingBottom: 100
 };
 var ExpertCard = ({ expert, Link }) => {
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
     children: [
       /* @__PURE__ */ jsx43(Link, {
@@ -13227,7 +13399,7 @@ var ExpertCard = ({ expert, Link }) => {
           className: "w-[250px] h-[250px] rounded-xl border-effect object-cover"
         })
       }),
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs6("div", {
         className: "flex flex-col border-effect px-4 py-3 bg-pane flex-1",
         children: [
           /* @__PURE__ */ jsx43(Link, {
@@ -13242,10 +13414,10 @@ var ExpertCard = ({ expert, Link }) => {
             className: "mt-2 mb-3 leading-normal font-brand",
             children: expert.description
           }),
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs6("div", {
             className: "leading-6 mb-4",
             children: [
-              /* @__PURE__ */ jsxs4(Link, {
+              /* @__PURE__ */ jsxs6(Link, {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: `/experts/${expert.slug}`,
                 children: [
@@ -13262,10 +13434,10 @@ var ExpertCard = ({ expert, Link }) => {
                   })
                 ]
               }),
-              expert.videocall ? /* @__PURE__ */ jsxs4(Fragment, {
+              expert.videocall ? /* @__PURE__ */ jsxs6(Fragment2, {
                 children: [
                   /* @__PURE__ */ jsx43("br", {}),
-                  /* @__PURE__ */ jsxs4("a", {
+                  /* @__PURE__ */ jsxs6("a", {
                     className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                     target: "_blank",
                     href: expert.videocall,
@@ -13290,7 +13462,7 @@ var ExpertCard = ({ expert, Link }) => {
           /* @__PURE__ */ jsx43("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs6("div", {
             className: "gap-3 flex flex-row flex-wrap",
             children: [
               expert.website ? /* @__PURE__ */ jsx43("a", {
@@ -13346,14 +13518,14 @@ var ExpertsPageContent = ({ Link }) => {
   }, []);
   return /* @__PURE__ */ jsx43("div", {
     className: "relative bg-[var(--background)]",
-    children: /* @__PURE__ */ jsxs4("div", {
+    children: /* @__PURE__ */ jsxs6("div", {
       style: wrapperStyle,
       children: [
         /* @__PURE__ */ jsx43("h1", {
           className: "experts-pagetitle",
           children: "Find a Remotion Expert"
         }),
-        /* @__PURE__ */ jsxs4("p", {
+        /* @__PURE__ */ jsxs6("p", {
           className: "experts-tagline",
           children: [
             "Get help by booking a call or hiring these freelancers to work on your Remotion project.",
@@ -13371,16 +13543,16 @@ var ExpertsPageContent = ({ Link }) => {
             })
           })
         }),
-        /* @__PURE__ */ jsxs4("div", {
+        /* @__PURE__ */ jsxs6("div", {
           style: infoCard,
           children: [
-            /* @__PURE__ */ jsxs4("svg", {
+            /* @__PURE__ */ jsxs6("svg", {
               viewBox: "0 0 661 512",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               style: cardIcon,
               children: [
-                /* @__PURE__ */ jsxs4("g", {
+                /* @__PURE__ */ jsxs6("g", {
                   clipPath: "url(#clip0_1_2)",
                   children: [
                     /* @__PURE__ */ jsx43("path", {
@@ -13405,7 +13577,7 @@ var ExpertsPageContent = ({ Link }) => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs4("div", {
+            /* @__PURE__ */ jsxs6("div", {
               style: { flex: 1 },
               children: [
                 "Remotion Experts are independent freelancers with proven Remotion expertise and portfolios. However,",
@@ -17552,7 +17724,7 @@ var PathInternals = {
 // ../shapes/dist/esm/index.mjs
 import React3, { useCallback as useCallback26, useMemo as useMemo42, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx44, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { jsx as jsx45 } from "react/jsx-runtime";
@@ -17754,7 +17926,7 @@ var RenderSvg = ({
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
   const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
-  const svg = /* @__PURE__ */ jsxs5("svg", {
+  const svg = /* @__PURE__ */ jsxs7("svg", {
     ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
@@ -17780,7 +17952,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs5(React3.Fragment, {
+          return /* @__PURE__ */ jsxs7(React3.Fragment, {
             children: [
               /* @__PURE__ */ jsx44("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -17970,7 +18142,6 @@ var Arrow = Interactive.withSchema({
   schema: arrowSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Arrow);
 var shortenVector = (vector, radius) => {
   const [x, y] = vector;
   const currentLength = Math.sqrt(x * x + y * y);
@@ -18395,7 +18566,6 @@ var Callout = Interactive.withSchema({
   schema: calloutSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Callout);
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -18458,7 +18628,6 @@ var Circle = Interactive.withSchema({
   schema: circleSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Circle);
 var makeEllipse = ({ rx, ry }) => {
   const instructions = [
     {
@@ -18516,7 +18685,6 @@ var Ellipse = Interactive.withSchema({
   schema: ellipseSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Ellipse);
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -18655,7 +18823,6 @@ var Heart = Interactive.withSchema({
   schema: heartSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Heart);
 var getCoord = ({
   counterClockwise,
   actualProgress,
@@ -18810,7 +18977,6 @@ var Pie = Interactive.withSchema({
   schema: pieSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Pie);
 function polygon({
   points,
   radius,
@@ -18910,7 +19076,6 @@ var Polygon = Interactive.withSchema({
   schema: polygonSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Polygon);
 var makeRect = ({
   width,
   height,
@@ -18977,7 +19142,6 @@ var Rect = Interactive.withSchema({
   schema: rectSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Rect);
 var KAPPA = 0.5522847498307936;
 var CAP_HANDLE = 4 / 3;
 var curve = ({
@@ -19189,7 +19353,6 @@ var Spark = Interactive.withSchema({
   schema: sparkSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Spark);
 var star = ({
   centerX,
   centerY,
@@ -19300,7 +19463,6 @@ var Star = Interactive.withSchema({
   schema: starSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Star);
 var makeTriangle = ({
   length: length2,
   direction = "right",
@@ -19407,7 +19569,6 @@ var Triangle = Interactive.withSchema({
   schema: triangleSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Triangle);
 
 // ../svg-3d-engine/dist/esm/index.mjs
 function truthy2(value) {
@@ -20472,8 +20633,8 @@ var extrudeAndTransformElement = (options) => {
 };
 
 // ../design/dist/esm/index.mjs
-import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
-import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx212, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs8 } from "react/jsx-runtime";
 import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef31 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -20536,7 +20697,7 @@ import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs42 } from "react/jsx-
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
 import * as React372 from "react";
-import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
 import * as React38 from "react";
@@ -20549,7 +20710,7 @@ import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
 import * as React422 from "react";
-import * as React41 from "react";
+import * as React412 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -20897,7 +21058,7 @@ var useMousePosition = (ref) => {
   return angle;
 };
 var Faces = ({ elements, ...svgProps }) => {
-  return /* @__PURE__ */ jsx212(Fragment3, {
+  return /* @__PURE__ */ jsx212(Fragment32, {
     children: elements.map(({ points, color, crispEdges }, idx) => {
       return /* @__PURE__ */ jsx212("path", {
         d: threeDIntoSvgPath(points),
@@ -20956,7 +21117,7 @@ var Outer = ({
     description: "rect",
     transformations: centerOriented
   });
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "relative",
     style: { width, height },
     children: [
@@ -25960,7 +26121,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
+var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -25994,7 +26155,7 @@ var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref)
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
 var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
-  children: /* @__PURE__ */ jsxs52(Content2, {
+  children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
     position,
@@ -26016,7 +26177,7 @@ var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__P
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -26558,7 +26719,7 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
 var useReactId2 = React422[" useId ".trim().toString()] || (() => {
   return;
 });
@@ -28494,7 +28655,7 @@ function cn2(...inputs) {
 }
 
 // src/components/homepage/PricingBulletPoint.tsx
-import { jsx as jsx48, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs9 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
@@ -28508,7 +28669,7 @@ var greyCircle = {
   backgroundColor: "var(--footer-border)"
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
-  const checkmarkSVG = /* @__PURE__ */ jsxs7("svg", {
+  const checkmarkSVG = /* @__PURE__ */ jsxs9("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
@@ -28530,13 +28691,13 @@ var PricingBulletPoint = ({ text, checked, children }) => {
       })
     ]
   });
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     style: container3,
     children: [
       checked ? checkmarkSVG : /* @__PURE__ */ jsx48("div", {
         style: greyCircle
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "fontbrand text-lg\t",
         children: [
           text,
@@ -28548,7 +28709,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import { jsx as jsx49, jsxs as jsxs8, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs10, Fragment as Fragment11 } from "react/jsx-runtime";
 var Container = ({
   children
 }) => {
@@ -28592,7 +28753,7 @@ var icon = {
 };
 var PricingSlider = ({ value, onChange, min: min2, max: max2, step = 1, "aria-label": ariaLabel }) => {
   const percentage = (value - min2) / (max2 - min2) * 100;
-  return /* @__PURE__ */ jsxs8(Fragment9, {
+  return /* @__PURE__ */ jsxs10(Fragment11, {
     children: [
       /* @__PURE__ */ jsx49("style", {
         children: `
@@ -28649,7 +28810,7 @@ var textUnitWrapper = {
   flexDirection: "column"
 };
 var FreePricing = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For individuals and companies of up to 3 people"
@@ -28680,7 +28841,7 @@ var FreePricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs8("a", {
+          children: /* @__PURE__ */ jsxs10("a", {
             target: "_blank",
             href: "https://www.remotion.dev/docs",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
@@ -28704,7 +28865,7 @@ var FreePricing = () => {
   });
 };
 var EnterpriseLicense = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For advanced needs"
@@ -28737,7 +28898,7 @@ var EnterpriseLicense = () => {
         checked: true
       }),
       /* @__PURE__ */ jsx49(PricingBulletPoint, {
-        text: /* @__PURE__ */ jsxs8("span", {
+        text: /* @__PURE__ */ jsxs10("span", {
           children: [
             /* @__PURE__ */ jsx49("a", {
               href: "https://www.remotion.dev/editor-starter",
@@ -28755,7 +28916,7 @@ var EnterpriseLicense = () => {
       }),
       /* @__PURE__ */ jsx49("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           style: {
             ...textUnitWrapper,
             alignItems: "flex-end"
@@ -28782,7 +28943,7 @@ var EnterpriseLicense = () => {
 var SEAT_PRICE = 25;
 var RENDER_UNIT_PRICE = 10;
 var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: "flex flex-row gap-3 cursor-pointer select-none items-center",
     onClick: () => onChange(!checked),
     children: [
@@ -28791,10 +28952,10 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
         onToggle: () => onChange(!checked),
         "aria-label": title
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-col",
         children: [
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs10("div", {
             className: "fontbrand font-bold text-lg flex flex-row items-center gap-1",
             children: [
               title,
@@ -28844,7 +29005,7 @@ var CompanyPricing = () => {
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
   const showEnterpriseMessage = totalPrice >= 500;
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For collaborations and companies of 4+ people"
@@ -28887,14 +29048,14 @@ var CompanyPricing = () => {
           transition: automatorsSelected ? "grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms" : "opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms"
         },
         inert: !automatorsSelected,
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           className: "overflow-hidden",
           children: [
             /* @__PURE__ */ jsx49("p", {
               className: "text-sm text-muted fontbrand pt-3 pb-1",
               children: "Intended for companies launching applications and systems; such as video editors, prompt-to-video apps, embedding the Remotion Player, or any other automated video creation. A $100/mo Minimum Spend applies. Developers working on automation projects do not require a Seat."
             }),
-            /* @__PURE__ */ jsxs8("div", {
+            /* @__PURE__ */ jsxs10("div", {
               className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1",
               children: [
                 /* @__PURE__ */ jsx49("div", {
@@ -28908,14 +29069,14 @@ var CompanyPricing = () => {
                     "aria-label": "Number of renders"
                   })
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right tabular-nums",
                   children: [
                     new Intl.NumberFormat("en-US").format(cloudRenders),
                     " Renders"
                   ]
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums",
                   children: [
                     "$",
@@ -28944,14 +29105,14 @@ var CompanyPricing = () => {
           transition: creatorsSelected ? "grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms" : "opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms"
         },
         inert: !creatorsSelected,
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           className: "overflow-hidden",
           children: [
             /* @__PURE__ */ jsx49("p", {
               className: "text-sm text-muted fontbrand pt-3 pb-1",
               children: "Intended for low volume video creations through coding and prompting, and building motion design systems in a local environment. Get 1 Seat per user."
             }),
-            /* @__PURE__ */ jsxs8("div", {
+            /* @__PURE__ */ jsxs10("div", {
               className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1",
               children: [
                 /* @__PURE__ */ jsx49("div", {
@@ -28964,7 +29125,7 @@ var CompanyPricing = () => {
                     "aria-label": "Number of seats"
                   })
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center tabular-nums",
                   children: [
                     devSeatCount,
@@ -28972,7 +29133,7 @@ var CompanyPricing = () => {
                     devSeatCount === 1 ? "Seat" : "Seats"
                   ]
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums",
                   children: [
                     "$",
@@ -28989,14 +29150,14 @@ var CompanyPricing = () => {
       /* @__PURE__ */ jsx49("div", {
         style: { height: 14 }
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-row items-baseline justify-end gap-2",
         children: [
           /* @__PURE__ */ jsx49("div", {
             className: "fontbrand text-muted text-sm",
             children: "Total"
           }),
-          /* @__PURE__ */ jsxs8(PriceTag, {
+          /* @__PURE__ */ jsxs10(PriceTag, {
             children: [
               totalPriceString,
               "/month"
@@ -29004,7 +29165,7 @@ var CompanyPricing = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-col items-end",
         children: [
           /* @__PURE__ */ jsx49(BottomInfo, {
@@ -29012,7 +29173,7 @@ var CompanyPricing = () => {
             className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity mt-1",
             children: "The minimum is $100 per month for Remotion for Automators"
           }),
-          /* @__PURE__ */ jsxs8(BottomInfo, {
+          /* @__PURE__ */ jsxs10(BottomInfo, {
             "data-visible": showEnterpriseMessage,
             className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity mt-1",
             children: [
@@ -29038,7 +29199,7 @@ var CompanyPricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs8("a", {
+          children: /* @__PURE__ */ jsxs10("a", {
             href: "https://remotion.pro/dashboard",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
             children: [
@@ -29062,12 +29223,12 @@ var CompanyPricing = () => {
 };
 
 // src/components/homepage/Pricing.tsx
-import { jsx as jsx50, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs11 } from "react/jsx-runtime";
 var Pricing = ({
   faqHref = "/docs/license/faq",
   faqLabel = "License FAQ",
   licenseHref = "https://github.com/remotion-dev/remotion/blob/main/LICENSE.md",
-  termsHref = "https://www.remotion.pro/terms"
+  termsHref = "/docs/license/terms"
 }) => {
   const faqLinkTarget = useMemo53(() => {
     return faqHref.startsWith("http") ? "_blank" : undefined;
@@ -29078,7 +29239,7 @@ var Pricing = ({
   const termsLinkTarget = useMemo53(() => {
     return termsHref.startsWith("http") ? "_blank" : undefined;
   }, [termsHref]);
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -29094,7 +29255,7 @@ var Pricing = ({
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs9("div", {
+        children: /* @__PURE__ */ jsxs11("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -29145,7 +29306,7 @@ var SectionTitle = ({
 };
 
 // src/components/homepage/AutomationsSection.tsx
-import { jsx as jsx54, jsxs as jsxs10, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs12, Fragment as Fragment12 } from "react/jsx-runtime";
 var appPipeline = [
   {
     step: "01",
@@ -29166,7 +29327,7 @@ var appPipeline = [
   {
     step: "03",
     title: "Preview and render",
-    description: /* @__PURE__ */ jsxs10(Fragment11, {
+    description: /* @__PURE__ */ jsxs12(Fragment12, {
       children: [
         "Use the",
         " ",
@@ -29217,7 +29378,7 @@ var Arrow3 = () => /* @__PURE__ */ jsx54("svg", {
   })
 });
 var InlineLink = ({ href, children }) => {
-  return /* @__PURE__ */ jsxs10("a", {
+  return /* @__PURE__ */ jsxs12("a", {
     href,
     className: "mt-3 inline-flex flex-row items-center font-brand text-base font-semibold text-text no-underline sm:text-sm",
     children: [
@@ -29231,10 +29392,10 @@ var StudioIllustration = () => {
   return /* @__PURE__ */ jsx54("div", {
     className: illustrationFrame,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       className: "relative w-full max-w-[220px] rounded-md bg-pane px-4 py-6 fontbrand",
       children: [
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "absolute bottom-5 left-1/2 top-3 flex -translate-x-1/2 flex-col items-center",
           children: [
             /* @__PURE__ */ jsx54("div", {
@@ -29245,10 +29406,10 @@ var StudioIllustration = () => {
             })
           ]
         }),
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "space-y-4",
           children: [
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs12("div", {
               className: "grid grid-cols-[28px_1fr] items-center gap-3",
               children: [
                 /* @__PURE__ */ jsx54("div", {
@@ -29259,7 +29420,7 @@ var StudioIllustration = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs12("div", {
               className: "grid grid-cols-[28px_1fr] items-center gap-3",
               children: [
                 /* @__PURE__ */ jsx54("div", {
@@ -29270,7 +29431,7 @@ var StudioIllustration = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs12("div", {
               className: "grid grid-cols-[28px_1fr] items-center gap-3",
               children: [
                 /* @__PURE__ */ jsx54("div", {
@@ -29291,7 +29452,7 @@ var PropsIllustration = () => {
   return /* @__PURE__ */ jsx54("div", {
     className: illustrationFrame,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       className: "flex h-[124px] w-full max-w-[240px] flex-col justify-center whitespace-nowrap rounded-md bg-pane p-4 text-left font-mono text-base leading-6 text-text sm:text-sm sm:leading-5",
       children: [
         /* @__PURE__ */ jsx54("div", {
@@ -29322,12 +29483,12 @@ var PreviewIllustration = () => {
   return /* @__PURE__ */ jsx54("div", {
     className: illustrationFrame,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       className: "w-full max-w-[240px] rounded-md border border-solid border-muted bg-card-bg p-2 fontbrand",
       children: [
         /* @__PURE__ */ jsx54("div", {
           className: "relative flex h-[92px] items-center justify-center rounded-sm border border-solid border-muted bg-pane text-brand",
-          children: /* @__PURE__ */ jsxs10("svg", {
+          children: /* @__PURE__ */ jsxs12("svg", {
             className: "h-14 w-14 text-brand",
             viewBox: "-11.5 -10.23174 23 20.46348",
             fill: "none",
@@ -29367,7 +29528,7 @@ var PreviewIllustration = () => {
             ]
           })
         }),
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "mt-2 flex items-center gap-2",
           children: [
             /* @__PURE__ */ jsx54("div", {
@@ -29416,7 +29577,7 @@ var PipelineIllustration = ({ kind }) => {
   return /* @__PURE__ */ jsx54(RenderIllustration, {});
 };
 var AutomationsSection = () => {
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     children: [
       /* @__PURE__ */ jsx54(SectionTitle, {
         children: "Create video apps and automations"
@@ -29429,13 +29590,13 @@ var AutomationsSection = () => {
         className: "py-4",
         children: /* @__PURE__ */ jsx54("dl", {
           className: "grid grid-cols-1 justify-items-stretch gap-5 lg:grid-cols-3 lg:justify-items-center lg:gap-0",
-          children: appPipeline.map((item) => /* @__PURE__ */ jsxs10("div", {
+          children: appPipeline.map((item) => /* @__PURE__ */ jsxs12("div", {
             className: "flex w-full flex-col rounded-lg border border-solid border-text/10 bg-card-bg px-4 py-5 text-left sm:px-5 lg:max-w-[300px] lg:rounded-none lg:border-y-0 lg:border-r-0 lg:border-l lg:bg-transparent lg:px-6 lg:py-0 lg:first:border-l-0",
             children: [
               /* @__PURE__ */ jsx54(PipelineIllustration, {
                 kind: item.illustration
               }),
-              /* @__PURE__ */ jsxs10("div", {
+              /* @__PURE__ */ jsxs12("div", {
                 className: "mb-2 flex items-center gap-2.5",
                 children: [
                   /* @__PURE__ */ jsx54("div", {
@@ -29460,7 +29621,7 @@ var AutomationsSection = () => {
           }, item.step))
         })
       }),
-      /* @__PURE__ */ jsxs10("div", {
+      /* @__PURE__ */ jsxs12("div", {
         className: "mt-8 flex flex-wrap justify-center gap-x-5 gap-y-2 fontbrand text-base text-muted sm:text-sm",
         children: [
           /* @__PURE__ */ jsx54("span", {
@@ -29481,7 +29642,7 @@ var AutomationsSection_default = AutomationsSection;
 
 // src/components/homepage/BackgroundAnimation.tsx
 import { useEffect as useEffect40 } from "react";
-import { jsx as jsx56, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
 var ry = 0.45;
@@ -29513,7 +29674,7 @@ var BackgroundAnimation = () => {
   }, [css]);
   return /* @__PURE__ */ jsx56("div", {
     className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none",
-    children: /* @__PURE__ */ jsxs11("svg", {
+    children: /* @__PURE__ */ jsxs13("svg", {
       className: "translate-y-[-30%] lg:translate-y-[-50%]",
       viewBox: "0 0 1 1",
       style: {
@@ -29568,7 +29729,7 @@ var BackgroundAnimation = () => {
 };
 
 // src/components/homepage/CommunityStatsItems.tsx
-import { jsx as jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs14 } from "react/jsx-runtime";
 var StatItemContent = ({
   content,
   width,
@@ -29601,10 +29762,10 @@ var Pill = ({ children, className }) => {
   });
 };
 var InstallsPerMonth = () => {
-  return /* @__PURE__ */ jsxs12(Pill, {
+  return /* @__PURE__ */ jsxs14(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -29612,7 +29773,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "4M+",
+            content: "5M+",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29643,10 +29804,10 @@ var InstallsPerMonth = () => {
   });
 };
 var PagesOfDocs = () => {
-  return /* @__PURE__ */ jsxs12(Pill, {
+  return /* @__PURE__ */ jsxs14(Pill, {
     className: "flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: { display: "flex", alignItems: "center", gap: 8 },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
@@ -29680,7 +29841,7 @@ var PagesOfDocs = () => {
     ]
   });
 };
-var TemplatesAndExamples = () => /* @__PURE__ */ jsxs12(Pill, {
+var TemplatesAndExamples = () => /* @__PURE__ */ jsxs14(Pill, {
   className: "w-[30%] flex items-center flex-row",
   children: [
     /* @__PURE__ */ jsx57(StatItemContent, {
@@ -29698,10 +29859,10 @@ var TemplatesAndExamples = () => /* @__PURE__ */ jsxs12(Pill, {
   ]
 });
 var GitHubStars = () => {
-  return /* @__PURE__ */ jsxs12(Pill, {
+  return /* @__PURE__ */ jsxs14(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
@@ -29719,7 +29880,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "52K",
+            content: "53K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29738,7 +29899,7 @@ var GitHubStars = () => {
 var DiscordMembers = () => {
   return /* @__PURE__ */ jsx57(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs12("div", {
+    children: /* @__PURE__ */ jsxs14("div", {
       style: {
         width: "80%",
         display: "flex",
@@ -29746,7 +29907,7 @@ var DiscordMembers = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs12("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -29795,7 +29956,7 @@ var DiscordMembers = () => {
 var Contributors = () => {
   return /* @__PURE__ */ jsx57(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs12("div", {
+    children: /* @__PURE__ */ jsxs14("div", {
       style: { display: "flex", justifyContent: "center" },
       children: [
         /* @__PURE__ */ jsx57("div", {
@@ -29815,7 +29976,7 @@ var Contributors = () => {
             width: "65px"
           })
         }),
-        /* @__PURE__ */ jsxs12("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -29843,14 +30004,14 @@ var Contributors = () => {
 };
 
 // src/components/homepage/CommunityStats.tsx
-import { jsx as jsx58, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs15 } from "react/jsx-runtime";
 var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx58("a", {
   target: "_blank",
   href,
   className: "no-underline text-inherit contents",
   children
 });
-var CommunityStats = () => /* @__PURE__ */ jsxs13("div", {
+var CommunityStats = () => /* @__PURE__ */ jsxs15("div", {
   className: "m-auto max-w-[700px] text-center",
   children: [
     /* @__PURE__ */ jsx58(SectionTitle, {
@@ -29860,7 +30021,7 @@ var CommunityStats = () => /* @__PURE__ */ jsxs13("div", {
       className: "fontbrand text-center mb-10 -mt-4",
       children: "Join a thriving community of developers."
     }),
-    /* @__PURE__ */ jsxs13("div", {
+    /* @__PURE__ */ jsxs15("div", {
       className: "flex flex-wrap justify-between gap-4 w-full items-center",
       children: [
         /* @__PURE__ */ jsx58(SectionLink, {
@@ -29895,8 +30056,8 @@ var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
 import { createContext as createContext32 } from "react";
-import { jsx as jsx59, jsxs as jsxs14 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment13 } from "react/jsx-runtime";
 import React57 from "react";
 import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect18 } from "react";
@@ -29914,7 +30075,7 @@ import {
   useImperativeHandle as useImperativeHandle22,
   useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo142,
-  useRef as useRef112,
+  useRef as useRef122,
   useState as useState132
 } from "react";
 import React102, {
@@ -29940,7 +30101,7 @@ import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
 import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo55, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
-import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs52 } from "react/jsx-runtime";
 import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
 import { jsx as jsx104, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
@@ -29949,8 +30110,8 @@ import { useMemo as useMemo82 } from "react";
 import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx-runtime";
 import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
-import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
-import { useCallback as useCallback112, useMemo as useMemo132, useState as useState122 } from "react";
+import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment33 } from "react/jsx-runtime";
+import { useCallback as useCallback112, useMemo as useMemo132, useRef as useRef112, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
 
 // ../core/dist/esm/no-react.mjs
@@ -30204,8 +30365,20 @@ var serializeStringInterpolationValue2 = ({
   }
   return values.slice(0, dimensions).map((value, index2) => `${stringifyNumber2(value)}${units[index2]}`).join(" ");
 };
+var toSignedArea2 = (scale) => {
+  if (scale === 0) {
+    return 0;
+  }
+  return Math.sign(scale) * scale * scale;
+};
+var fromSignedArea2 = (area) => {
+  if (area === 0) {
+    return 0;
+  }
+  return Math.sign(area) * Math.sqrt(Math.abs(area));
+};
 function interpolateFunction2(input, inputRange, outputRange, options2) {
-  const { extrapolateLeft, extrapolateRight, easing } = options2;
+  const { extrapolateLeft, extrapolateRight, easing, output } = options2;
   let result = input;
   const [inputMin, inputMax] = inputRange;
   const [outputMin, outputMax] = outputRange;
@@ -30236,7 +30409,13 @@ function interpolateFunction2(input, inputRange, outputRange, options2) {
   }
   result = (result - inputMin) / (inputMax - inputMin);
   result = easing(result);
-  result = result * (outputMax - outputMin) + outputMin;
+  if (output === "perceptual-scale") {
+    const signedAreaMin = toSignedArea2(outputMin);
+    const signedAreaMax = toSignedArea2(outputMax);
+    result = fromSignedArea2(result * (signedAreaMax - signedAreaMin) + signedAreaMin);
+  } else {
+    result = result * (outputMax - outputMin) + outputMin;
+  }
   return result;
 }
 function findRange2(input, inputRange) {
@@ -30249,6 +30428,9 @@ function findRange2(input, inputRange) {
   return i - 1;
 }
 var defaultEasing2 = (num) => num;
+var resolveOutputOption2 = (output) => {
+  return output ?? "linear";
+};
 var shouldExtendRightForEasing2 = (easing) => {
   return easing.remotionShouldExtendRight === true;
 };
@@ -30270,12 +30452,14 @@ var interpolateSegment2 = ({
   outputRange,
   easing,
   extrapolateLeft,
-  extrapolateRight
+  extrapolateRight,
+  output
 }) => {
   return interpolateFunction2(input, inputRange, outputRange, {
     easing,
     extrapolateLeft,
-    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing2(easing) ? "extend" : extrapolateRight
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing2(easing) ? "extend" : extrapolateRight,
+    output
   });
 };
 var interpolateNumber2 = ({
@@ -30284,6 +30468,7 @@ var interpolateNumber2 = ({
   outputRange,
   options: options2
 }) => {
+  const output = resolveOutputOption2(options2?.output);
   if (inputRange.length === 1) {
     return outputRange[0];
   }
@@ -30308,7 +30493,8 @@ var interpolateNumber2 = ({
     outputRange: [outputRange[range], outputRange[range + 1]],
     easing,
     extrapolateLeft,
-    extrapolateRight
+    extrapolateRight,
+    output
   });
   for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
     const previousEasing = resolveEasingForSegment2({
@@ -30328,7 +30514,8 @@ var interpolateNumber2 = ({
       outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
       easing: previousEasing,
       extrapolateLeft,
-      extrapolateRight: "extend"
+      extrapolateRight: "extend",
+      output
     });
     result += continuedSegmentValue - outputRange[segmentIndex + 1];
   }
@@ -30376,14 +30563,18 @@ var interpolateString2 = ({
       }
     }
   }
-  return serializeStringInterpolationValue2({
-    kind,
-    values: [0, 0, 0].map((_, axis) => interpolateNumber2({
+  const values = [0, 0, 0];
+  for (let axis = 0;axis < dimensions; axis++) {
+    values[axis] = interpolateNumber2({
       input,
       inputRange,
       outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
       options: options2
-    })),
+    });
+  }
+  return serializeStringInterpolationValue2({
+    kind,
+    values,
     units,
     dimensions
   });
@@ -30467,6 +30658,12 @@ function assertValidInterpolatePosterizeOption2(posterize) {
     throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
   }
 }
+function assertValidInterpolateOutputOption2(output) {
+  if (output === undefined || output === "linear" || output === "perceptual-scale") {
+    return;
+  }
+  throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
+}
 function interpolate3(input, inputRange, outputRange, options2) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -30484,6 +30681,7 @@ function interpolate3(input, inputRange, outputRange, options2) {
   checkValidInputRange2(inputRange);
   assertValidInterpolateEasingOption2(options2?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption2(options2?.posterize);
+  assertValidInterpolateOutputOption2(options2?.output);
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
@@ -30616,7 +30814,8 @@ var transformSchema2 = {
     max: 100,
     step: 0.01,
     default: 1,
-    description: "Scale"
+    description: "Scale",
+    defaultKeyframeOutput: "perceptual-scale"
   },
   "style.rotate": {
     type: "rotation-css",
@@ -31410,7 +31609,7 @@ import {
   useImperativeHandle as useImperativeHandle42,
   useLayoutEffect as useLayoutEffect42,
   useMemo as useMemo172,
-  useRef as useRef132,
+  useRef as useRef142,
   useState as useState142
 } from "react";
 import React133, {
@@ -31419,7 +31618,7 @@ import React133, {
   useCallback as useCallback122,
   useImperativeHandle as useImperativeHandle32,
   useMemo as useMemo162,
-  useRef as useRef122
+  useRef as useRef132
 } from "react";
 import { useContext as useContext62, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
@@ -31458,7 +31657,7 @@ var PlayIcon = () => {
   });
 };
 var PauseIcon = () => {
-  return /* @__PURE__ */ jsxs14("svg", {
+  return /* @__PURE__ */ jsxs16("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
@@ -31492,7 +31691,7 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth2 / 2;
   const middleInset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 / 2;
   const inset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 * 2;
-  return /* @__PURE__ */ jsxs14("svg", {
+  return /* @__PURE__ */ jsxs16("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
@@ -31580,7 +31779,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment12, {
+  return /* @__PURE__ */ jsxs24(Fragment13, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -33065,7 +33264,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
     };
   }, [hovered, isFocused]);
-  return /* @__PURE__ */ jsxs53("div", {
+  return /* @__PURE__ */ jsxs52("div", {
     onPointerEnter: onMouseEnter,
     onPointerLeave: onMouseLeave,
     tabIndex: 0,
@@ -33192,13 +33391,13 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   }, [setIsComponentVisible]);
   return /* @__PURE__ */ jsx94("div", {
     ref,
-    children: /* @__PURE__ */ jsxs53("button", {
+    children: /* @__PURE__ */ jsxs52("button", {
       type: "button",
       "aria-label": "Change playback rate",
       style: button,
       onClick,
       children: [
-        /* @__PURE__ */ jsxs53("div", {
+        /* @__PURE__ */ jsxs52("div", {
           style: label2,
           children: [
             playbackRate,
@@ -34181,7 +34380,7 @@ var PlayerUI = ({
     showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs92(Fragment32, {
+  const content = /* @__PURE__ */ jsxs92(Fragment33, {
     children: [
       /* @__PURE__ */ jsxs92("div", {
         style: outer,
@@ -34369,7 +34568,9 @@ var SharedPlayerContexts = ({
       mediaVolume
     };
   }, [playerMuted, mediaVolume]);
-  const shouldCreateAudioContext = audioEnabled && !playerMuted && mediaVolume > 0;
+  const audioContextWasCreated = useRef112(false);
+  const shouldCreateAudioContext = audioContextWasCreated.current || audioEnabled && !playerMuted && mediaVolume > 0;
+  audioContextWasCreated.current = shouldCreateAudioContext;
   const setMediaVolumeAndPersist = useCallback112((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
@@ -34623,9 +34824,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState132(false);
   const [rootId] = useState132("player-comp");
-  const rootRef = useRef112(null);
-  const audioAndVideoTags = useRef112([]);
-  const imperativePlaying = useRef112(false);
+  const rootRef = useRef122(null);
+  const audioAndVideoTags = useRef122([]);
+  const imperativePlaying = useRef122(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState132(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -34826,7 +35027,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef122(null);
+  const container4 = useRef132(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -34952,7 +35153,7 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState142(() => String(random(null)));
-  const rootRef = useRef132(null);
+  const rootRef = useRef142(null);
   const timelineState = useMemo172(() => {
     const value = {
       playing: false,
@@ -35803,11 +36004,11 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useMemo as useMemo312, useState as useState312 } from "react";
 import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState41 } from "react";
-import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import {
   AudioBufferSink,
   InputDisposedError
 } from "mediabunny";
+import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext50, useLayoutEffect as useLayoutEffect19 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
@@ -36649,6 +36850,120 @@ var getDurationOrCompute = async (input) => {
     skipLiveWait: true
   }) ?? input.computeDuration(undefined, { skipLiveWait: true });
 };
+var normalizeMediaHeaders = (headers) => {
+  if (!headers) {
+    return;
+  }
+  const entries = [];
+  if (headers instanceof Headers) {
+    headers.forEach((value, key) => {
+      entries.push([key.toLowerCase(), value]);
+    });
+  } else if (Array.isArray(headers)) {
+    for (const [key, value] of headers) {
+      entries.push([key.toLowerCase(), value]);
+    }
+  } else {
+    for (const [key, value] of Object.entries(headers)) {
+      entries.push([key.toLowerCase(), value]);
+    }
+  }
+  entries.sort(([a2], [b2]) => a2 < b2 ? -1 : a2 > b2 ? 1 : 0);
+  return entries;
+};
+var normalizeMediaRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return;
+  }
+  const headers = normalizeMediaHeaders(requestInit.headers);
+  const normalized = {
+    ...requestInit.cache === undefined ? null : { cache: requestInit.cache },
+    ...requestInit.credentials === undefined ? null : { credentials: requestInit.credentials },
+    ...headers === undefined ? null : { headers },
+    ...requestInit.integrity === undefined ? null : { integrity: requestInit.integrity },
+    ...requestInit.mode === undefined ? null : { mode: requestInit.mode },
+    ...requestInit.redirect === undefined ? null : { redirect: requestInit.redirect },
+    ...requestInit.referrer === undefined ? null : { referrer: requestInit.referrer },
+    ...requestInit.referrerPolicy === undefined ? null : { referrerPolicy: requestInit.referrerPolicy }
+  };
+  return Object.keys(normalized).length === 0 ? undefined : normalized;
+};
+var getMediaRequestInitFingerprint = (requestInit) => {
+  const normalized = normalizeMediaRequestInit(requestInit);
+  if (!normalized) {
+    return null;
+  }
+  return [
+    normalized.cache ?? null,
+    normalized.credentials ?? null,
+    normalized.integrity ?? null,
+    normalized.mode ?? null,
+    normalized.redirect ?? null,
+    normalized.referrer ?? null,
+    normalized.referrerPolicy ?? null,
+    normalized.headers ?? null
+  ];
+};
+var resolveRequestInit = ({
+  credentials,
+  requestInit
+}) => {
+  if (credentials === undefined) {
+    return normalizeMediaRequestInit(requestInit);
+  }
+  return normalizeMediaRequestInit({
+    credentials,
+    ...requestInit
+  });
+};
+var sharedInputs = {};
+var getSharedInputCacheKey = ({
+  src,
+  credentials,
+  requestInit
+}) => JSON.stringify([
+  src,
+  credentials ?? null,
+  getMediaRequestInitFingerprint(requestInit)
+]);
+var acquireSharedInput = ({
+  src,
+  credentials,
+  requestInit
+}) => {
+  const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
+  const cacheKey = getSharedInputCacheKey({
+    src,
+    credentials,
+    requestInit: normalizedRequestInit
+  });
+  const existing = sharedInputs[cacheKey];
+  if (existing) {
+    existing.refCount++;
+    return { input: existing.input, cacheKey };
+  }
+  const resolvedRequestInit = resolveRequestInit({
+    credentials,
+    requestInit: normalizedRequestInit
+  });
+  const input = new Input2({
+    source: new UrlSource(src, resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined),
+    formats: ALL_FORMATS
+  });
+  sharedInputs[cacheKey] = { input, refCount: 1 };
+  return { input, cacheKey };
+};
+var releaseSharedInput = (cacheKey) => {
+  const entry = sharedInputs[cacheKey];
+  if (!entry) {
+    return;
+  }
+  entry.refCount--;
+  if (entry.refCount <= 0) {
+    delete sharedInputs[cacheKey];
+    entry.input.dispose();
+  }
+};
 var resolveAudioTrack = async ({
   videoTrack,
   audioTracks,
@@ -36761,72 +37076,6 @@ class PremountAwareDelayPlayback {
     };
   }
 }
-var normalizeMediaHeaders = (headers) => {
-  if (!headers) {
-    return;
-  }
-  const entries = [];
-  if (headers instanceof Headers) {
-    headers.forEach((value, key) => {
-      entries.push([key.toLowerCase(), value]);
-    });
-  } else if (Array.isArray(headers)) {
-    for (const [key, value] of headers) {
-      entries.push([key.toLowerCase(), value]);
-    }
-  } else {
-    for (const [key, value] of Object.entries(headers)) {
-      entries.push([key.toLowerCase(), value]);
-    }
-  }
-  entries.sort(([a2], [b2]) => a2 < b2 ? -1 : a2 > b2 ? 1 : 0);
-  return entries;
-};
-var normalizeMediaRequestInit = (requestInit) => {
-  if (!requestInit) {
-    return;
-  }
-  const headers = normalizeMediaHeaders(requestInit.headers);
-  const normalized = {
-    ...requestInit.cache === undefined ? null : { cache: requestInit.cache },
-    ...requestInit.credentials === undefined ? null : { credentials: requestInit.credentials },
-    ...headers === undefined ? null : { headers },
-    ...requestInit.integrity === undefined ? null : { integrity: requestInit.integrity },
-    ...requestInit.mode === undefined ? null : { mode: requestInit.mode },
-    ...requestInit.redirect === undefined ? null : { redirect: requestInit.redirect },
-    ...requestInit.referrer === undefined ? null : { referrer: requestInit.referrer },
-    ...requestInit.referrerPolicy === undefined ? null : { referrerPolicy: requestInit.referrerPolicy }
-  };
-  return Object.keys(normalized).length === 0 ? undefined : normalized;
-};
-var getMediaRequestInitFingerprint = (requestInit) => {
-  const normalized = normalizeMediaRequestInit(requestInit);
-  if (!normalized) {
-    return null;
-  }
-  return [
-    normalized.cache ?? null,
-    normalized.credentials ?? null,
-    normalized.integrity ?? null,
-    normalized.mode ?? null,
-    normalized.redirect ?? null,
-    normalized.referrer ?? null,
-    normalized.referrerPolicy ?? null,
-    normalized.headers ?? null
-  ];
-};
-var resolveRequestInit = ({
-  credentials,
-  requestInit
-}) => {
-  if (credentials === undefined) {
-    return normalizeMediaRequestInit(requestInit);
-  }
-  return normalizeMediaRequestInit({
-    credentials,
-    ...requestInit
-  });
-};
 var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
@@ -36850,6 +37099,7 @@ var makeStableFramePool = () => {
     if (!context) {
       throw new Error("Could not create canvas context");
     }
+    context.clearRect(0, 0, stableCanvas.width, stableCanvas.height);
     context.drawImage(canvas, 0, 0);
     let released = false;
     const stableFrame = {
@@ -37432,13 +37682,13 @@ class MediaPlayer {
     this.onVideoFrameCallback = onVideoFrameCallback;
     this.playing = playing;
     this.sequenceOffset = sequenceOffset;
-    const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
-    this.input = new Input2({
-      source: new UrlSource(this.src, resolvedRequestInit ? {
-        requestInit: resolvedRequestInit
-      } : undefined),
-      formats: ALL_FORMATS
+    const { input, cacheKey } = acquireSharedInput({
+      src: this.src,
+      credentials,
+      requestInit
     });
+    this.input = input;
+    this.inputCacheKey = cacheKey;
     this.tagType = tagType;
     this.getEffects = getEffects;
     this.getEffectChainState = getEffectChainState;
@@ -37456,8 +37706,10 @@ class MediaPlayer {
     }
   }
   input;
+  inputCacheKey;
+  disposed = false;
   isDisposalError() {
-    return this.input.disposed === true;
+    return this.disposed || this.input.disposed === true;
   }
   initialize(startTimeUnresolved, initialMuted) {
     const promise = this._initialize(startTimeUnresolved, initialMuted);
@@ -37492,7 +37744,7 @@ class MediaPlayer {
     try {
       const _ = __using(__stack, this.delayPlaybackHandleIfNotPremounting(), 0);
       try {
-        if (this.input.disposed) {
+        if (this.isDisposalError()) {
           return { type: "disposed" };
         }
         try {
@@ -37513,7 +37765,7 @@ class MediaPlayer {
           this.input.getPrimaryVideoTrack(),
           this.input.getAudioTracks()
         ]);
-        if (this.input.disposed) {
+        if (this.isDisposalError()) {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
@@ -37534,9 +37786,12 @@ class MediaPlayer {
           }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
+            if (videoTrack.codec === "prores") {
+              return { type: "cannot-decode-prores" };
+            }
             return { type: "cannot-decode" };
           }
-          if (this.input.disposed) {
+          if (this.isDisposalError()) {
             return { type: "disposed" };
           }
           this.videoIteratorManager = await videoIteratorManager({
@@ -37569,7 +37824,7 @@ class MediaPlayer {
           if (!canDecode) {
             return { type: "cannot-decode" };
           }
-          if (this.input.disposed) {
+          if (this.isDisposalError()) {
             return { type: "disposed" };
           }
           this.audioIteratorManager = audioIteratorManager({
@@ -37788,6 +38043,10 @@ class MediaPlayer {
     }
   }
   async dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
     if (this.initializationPromise) {
       try {
         await this.initializationPromise;
@@ -37796,7 +38055,7 @@ class MediaPlayer {
     this.nonceManager.createAsyncOperation();
     this.videoIteratorManager?.destroy();
     this.audioIteratorManager?.destroyIterator();
-    this.input.dispose();
+    releaseSharedInput(this.inputCacheKey);
   }
   getTargetTime = (mediaTimestamp, currentTime) => {
     if (!this.sharedAudioContext) {
@@ -38239,6 +38498,9 @@ var AudioForPreviewAssertedShowing = ({
           handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          throw new Error(`Encountered ProRes media for ${preloadedSrc}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+        }
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
@@ -39546,6 +39808,9 @@ var getSinks = async (src, logLevel, credentials, requestInit) => {
     }
     const canDecode = await videoTrack.canDecode();
     if (!canDecode) {
+      if (videoTrack.codec === "prores") {
+        return "cannot-decode-prores";
+      }
       return "cannot-decode";
     }
     const sampleSink = new VideoSampleSink(videoTrack);
@@ -39797,6 +40062,12 @@ var extractFrameInternal = async ({
   if (video === "cannot-decode") {
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
+  if (video === "cannot-decode-prores") {
+    return {
+      type: "cannot-decode-prores",
+      durationInSeconds: mediaDurationInSeconds
+    };
+  }
   if (video === "unknown-container-format") {
     return { type: "unknown-container-format" };
   }
@@ -39948,6 +40219,12 @@ var extractFrameAndAudio = async ({
         durationInSeconds: video.durationInSeconds
       };
     }
+    if (video?.type === "cannot-decode-prores") {
+      return {
+        type: "cannot-decode-prores",
+        durationInSeconds: video.durationInSeconds
+      };
+    }
     if (video?.type === "unknown-container-format") {
       return { type: "unknown-container-format" };
     }
@@ -40033,6 +40310,15 @@ var addBroadcastChannelListener = () => {
           window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          const cannotDecodeProresResponse = {
+            type: "response-cannot-decode-prores",
+            id: data.id,
+            durationInSeconds: result.durationInSeconds
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeProresResponse);
+          return;
+        }
         if (result.type === "cannot-decode-alpha") {
           const cannotDecodeAlphaResponse = {
             type: "response-cannot-decode-alpha",
@@ -40177,6 +40463,14 @@ var extractFrameViaBroadcastChannel = async ({
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
         return;
       }
+      if (data.type === "response-cannot-decode-prores") {
+        resolve({
+          type: "cannot-decode-prores",
+          durationInSeconds: data.durationInSeconds
+        });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
       if (data.type === "response-network-error") {
         resolve({ type: "network-error" });
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
@@ -40347,6 +40641,9 @@ var AudioForRendering2 = ({
       if (result.type === "cannot-decode-alpha") {
         throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
       }
+      if (result.type === "cannot-decode-prores") {
+        throw new Error(`Encountered ProRes media for ${src}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+      }
       if (result.type === "network-error") {
         handleError(new Error(`Network error fetching ${src}.`), new Error(`Cannot render audio "${src}": Network error while fetching the audio (possibly CORS).`), `Network error fetching ${src}, falling back to <Html5Audio>`);
         return;
@@ -40553,7 +40850,17 @@ var Audio2 = Interactive.withSchema({
   schema: audioSchema,
   supportsEffects: false
 });
-Internals.addSequenceStackTraces(Audio2);
+var PRORES_DOCS_URL = "https://www.remotion.dev/docs/videos/prores";
+var proresDecoderNotEnabledMessage = (src) => {
+  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}. ` + `(This is required to decode a ProRes source for both preview and rendering — it is unrelated to exporting a video as ProRes.)`;
+};
+
+class ProResDecoderNotEnabledError extends Error {
+  constructor(src) {
+    super(proresDecoderNotEnabledMessage(src));
+    this.name = "ProResDecoderNotEnabledError";
+  }
+}
 var cache2 = new Map;
 var cacheVideoFrame = (src, sourceCanvas) => {
   const { width, height } = sourceCanvas;
@@ -40802,6 +41109,9 @@ var VideoForPreviewAssertedShowing = ({
           handleError(new Error(`Cannot decode ${preloadedSrc}.`), `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          throw new ProResDecoderNotEnabledError(preloadedSrc);
+        }
         if (result.type === "no-tracks") {
           handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
@@ -40812,6 +41122,10 @@ var VideoForPreviewAssertedShowing = ({
           hasDrawnRealFrameRef.current = true;
         }
       }).catch((error2) => {
+        if (error2 instanceof ProResDecoderNotEnabledError) {
+          onErrorRef.current?.(error2);
+          throw error2;
+        }
         const [action, errorToUse] = callOnErrorAndResolve({
           onError: onErrorRef.current,
           error: error2,
@@ -41109,6 +41423,12 @@ var VideoForRendering2 = ({
         handleError(new Error(`Cannot decode ${src}.`), new Error(`Cannot render video "${src}": The video could not be decoded by the browser.`), `Cannot decode ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
       }
+      if (result.type === "cannot-decode-prores") {
+        const proresError = new ProResDecoderNotEnabledError(src);
+        onError?.(proresError);
+        cancelRender3(proresError);
+        return;
+      }
       if (result.type === "cannot-decode-alpha") {
         handleError(new Error(`Cannot decode alpha component for ${src}.`), new Error(`Cannot render video "${src}": The alpha channel could not be decoded by the browser.`), `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
@@ -41583,7 +41903,6 @@ var Video = Interactive.withSchema({
   schema: videoSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
 import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo61, useState as useState48 } from "react";
@@ -41633,7 +41952,7 @@ var getIndexFromPosition = (clientX, clientY) => {
 
 // src/components/homepage/Demo/Switcher.tsx
 import { useCallback as useCallback41 } from "react";
-import { jsx as jsx66, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs17 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
   const onPointerDown = useCallback41((e) => {
     e.stopPropagation();
@@ -41658,7 +41977,7 @@ var Switcher = ({ type, theme, onTap }) => {
       alignItems: "center",
       display: "flex"
     },
-    children: /* @__PURE__ */ jsxs15("svg", {
+    children: /* @__PURE__ */ jsxs17("svg", {
       style: { height: switcherSize / 2 },
       viewBox: "0 0 320 512",
       children: [
@@ -41676,7 +41995,7 @@ var Switcher = ({ type, theme, onTap }) => {
 };
 
 // src/components/homepage/Demo/Card.tsx
-import { jsx as jsx68, jsxs as jsxs16, Fragment as Fragment13 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs18, Fragment as Fragment14 } from "react/jsx-runtime";
 var arePositionsEqual = (a2, b2) => {
   return a2.every((pos, i) => {
     return pos.x === b2[i].x && pos.y === b2[i].y;
@@ -41853,7 +42172,7 @@ var Card2 = ({
       borderRadius: 13,
       cursor: "grab"
     },
-    children: /* @__PURE__ */ jsxs16(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs18(AbsoluteFill, {
       style: {
         backgroundColor: color,
         borderRadius: 12
@@ -41861,7 +42180,7 @@ var Card2 = ({
       className: "transition-opacity duration-200",
       children: [
         content,
-        withSwitcher ? /* @__PURE__ */ jsxs16(Fragment13, {
+        withSwitcher ? /* @__PURE__ */ jsxs18(Fragment14, {
           children: [
             /* @__PURE__ */ jsx68(Switcher, {
               onTap: onClickLeft,
@@ -41881,7 +42200,7 @@ var Card2 = ({
 };
 
 // src/components/homepage/Demo/CurrentCountry.tsx
-import { jsx as jsx69, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs19 } from "react/jsx-runtime";
 var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -41896,7 +42215,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
     frame,
     delay: 10
   });
-  return /* @__PURE__ */ jsxs17(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs19(AbsoluteFill, {
     style: { overflow: "hidden" },
     children: [
       /* @__PURE__ */ jsx69(AbsoluteFill, {
@@ -41914,7 +42233,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
           })
         })
       }),
-      /* @__PURE__ */ jsxs17(AbsoluteFill, {
+      /* @__PURE__ */ jsxs19(AbsoluteFill, {
         style: {
           alignItems: "center",
           justifyContent: "center"
@@ -42203,7 +42522,7 @@ var DisplayedEmoji = ({ emoji }) => {
 };
 
 // src/components/homepage/Demo/EmojiCard.tsx
-import { jsx as jsx75, jsxs as jsxs18, Fragment as Fragment14 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs20, Fragment as Fragment15 } from "react/jsx-runtime";
 var applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
   ref1.style.transform = `translateX(${transforms[0]}%)`;
   ref2.style.transform = `translateX(${transforms[1]}%)`;
@@ -42299,7 +42618,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     });
   }, []);
   const env = useRemotionEnvironment();
-  return /* @__PURE__ */ jsxs18(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs20(AbsoluteFill, {
     style: {
       justifyContent: "center",
       alignItems: "center",
@@ -42331,7 +42650,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           children: /* @__PURE__ */ jsx75(DisplayedEmoji, {
             emoji: emojiIndex
           })
-        }) : /* @__PURE__ */ jsxs18(Fragment14, {
+        }) : /* @__PURE__ */ jsxs20(Fragment15, {
           children: [
             /* @__PURE__ */ jsx75("div", {
               ref: ref1,
@@ -42379,7 +42698,7 @@ var Minus = ({ leftOffset, minusSignOpacity }) => {
 };
 
 // src/components/homepage/Demo/DigitWheel.tsx
-import { jsx as jsx78, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs21 } from "react/jsx-runtime";
 var DURATION = 25;
 var items = 10;
 var NUM_WIDTH = 36;
@@ -42423,7 +42742,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
   const rotation = progresses.map((p, i) => {
     return p * offsets[i];
   }).reduce((a2, b2) => a2 + b2, 0) + rotations[0];
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs21("div", {
     style: {
       position: "relative",
       width: NUM_WIDTH,
@@ -42484,14 +42803,14 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
 };
 
 // src/components/homepage/Demo/TemperatureNumber.tsx
-import { jsx as jsx79, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs25 } from "react/jsx-runtime";
 var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
   const temperatureInFahrenheit = temperatureInCelsius * 9 / 5 + 32;
   const celsiusDegree = Math.abs(temperatureInCelsius);
   const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
   const paddedCelsiusDegree = String(celsiusDegree).padStart(fahrenheitDegree.toFixed(0).length, "0").split("");
   const paddedFahrenheitDegree = fahrenheitDegree.toFixed(0).padStart(paddedCelsiusDegree.length, "0").split("");
-  return /* @__PURE__ */ jsxs20("div", {
+  return /* @__PURE__ */ jsxs25("div", {
     style: {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -42539,13 +42858,13 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/Temperature.tsx
-import { jsx as jsx80, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
 var Temperature = ({ theme, city, temperatureInCelsius }) => {
   if (temperatureInCelsius === null) {
     return null;
   }
   return /* @__PURE__ */ jsx80(AbsoluteFill, {
-    children: /* @__PURE__ */ jsxs21(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs27(AbsoluteFill, {
       style: {
         alignItems: "center",
         justifyContent: "center",
@@ -42553,7 +42872,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
         paddingRight: 20
       },
       children: [
-        /* @__PURE__ */ jsxs21("div", {
+        /* @__PURE__ */ jsxs27("div", {
           style: {
             color: "#0b84f3",
             fontFamily: "GTPlanar",
@@ -42578,7 +42897,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 
 // src/components/homepage/Demo/TrendingRepos.tsx
 import { useMemo as useMemo60 } from "react";
-import { jsx as jsx81, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -42600,7 +42919,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
       opacity: progress
     };
   }, [progress, theme]);
-  return /* @__PURE__ */ jsxs25("div", {
+  return /* @__PURE__ */ jsxs28("div", {
     style: item,
     children: [
       number,
@@ -42631,7 +42950,7 @@ var TrendingRepos = ({ theme, trending }) => {
         paddingLeft: 20,
         paddingRight: 20
       },
-      children: /* @__PURE__ */ jsxs25("div", {
+      children: /* @__PURE__ */ jsxs28("div", {
         children: [
           /* @__PURE__ */ jsx81("div", {
             style: {
@@ -42764,7 +43083,7 @@ var Cards = ({
 };
 
 // src/components/homepage/Demo/Comp.tsx
-import { jsx as jsx87, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs29 } from "react/jsx-runtime";
 var getDataAndProps = async () => {
   const location = await fetch("https://utils.remotion.dev/location").then((res) => res.json());
   const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`).then((res) => res.json()).then((data) => {
@@ -42825,7 +43144,7 @@ var HomepageVideoComp = ({
       c2.free();
     };
   }, []);
-  return /* @__PURE__ */ jsxs27(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs29(AbsoluteFill, {
     style: {
       backgroundColor: theme === "dark" ? "#222" : "#fafafa"
     },
@@ -42891,7 +43210,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.489";
+var VERSION2 = "4.0.491";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43447,6 +43766,8 @@ var createAudioSampleSource = ({
   });
   return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
 };
+var nestedHtmlInCanvasSupport = null;
+var forceDisableHtmlInCanvasForTesting = false;
 var supportsNativeHtmlInCanvas = () => {
   if (typeof document === "undefined") {
     return false;
@@ -43454,6 +43775,121 @@ var supportsNativeHtmlInCanvas = () => {
   const ctx = document.createElement("canvas").getContext("2d");
   return typeof ctx?.drawElementImage === "function";
 };
+var runNestedHtmlInCanvasProbe = () => {
+  if (!supportsNativeHtmlInCanvas() || !document.body) {
+    return Promise.resolve(false);
+  }
+  const outer = document.createElement("canvas");
+  const inner2 = document.createElement("canvas");
+  const outerTarget = document.createElement("div");
+  const innerTarget = document.createElement("div");
+  const outerCtx = outer.getContext("2d");
+  const innerCtx = inner2.getContext("2d");
+  if (!outerCtx || !innerCtx || typeof outer.requestPaint !== "function" || typeof inner2.requestPaint !== "function") {
+    return Promise.resolve(false);
+  }
+  outer.layoutSubtree = true;
+  inner2.layoutSubtree = true;
+  outer.width = 4;
+  outer.height = 4;
+  inner2.width = 4;
+  inner2.height = 4;
+  Object.assign(outer.style, {
+    display: "block",
+    height: "4px",
+    left: "0",
+    pointerEvents: "none",
+    position: "fixed",
+    top: "0",
+    visibility: "visible",
+    width: "4px",
+    zIndex: "2147483647"
+  });
+  Object.assign(inner2.style, {
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  Object.assign(outerTarget.style, {
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  Object.assign(innerTarget.style, {
+    backgroundColor: "rgb(255, 0, 0)",
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  inner2.appendChild(innerTarget);
+  outerTarget.appendChild(inner2);
+  outer.appendChild(outerTarget);
+  document.body.appendChild(outer);
+  return new Promise((resolve) => {
+    let innerPainted = false;
+    let settled = false;
+    let timeout = null;
+    const settle = (supported) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      if (timeout !== null) {
+        window.clearTimeout(timeout);
+      }
+      outer.remove();
+      resolve(supported);
+    };
+    timeout = window.setTimeout(() => settle(false), 1000);
+    inner2.addEventListener("paint", () => {
+      try {
+        innerCtx.reset();
+        const transform = innerCtx.drawElementImage(innerTarget, 0, 0, 4, 4);
+        innerTarget.style.transform = transform.toString();
+        innerPainted = true;
+        requestAnimationFrame(() => outer.requestPaint());
+      } catch {
+        settle(false);
+      }
+    });
+    outer.addEventListener("paint", () => {
+      if (!innerPainted) {
+        return;
+      }
+      try {
+        outerCtx.reset();
+        if (typeof outer.captureElementImage !== "function") {
+          settle(false);
+          return;
+        }
+        const elementImage = outer.captureElementImage(outerTarget);
+        const transform = outerCtx.drawElementImage(elementImage, 0, 0, 4, 4);
+        elementImage.close();
+        outerTarget.style.transform = transform.toString();
+        const pixel = outerCtx.getImageData(2, 2, 1, 1).data;
+        settle(pixel[0] > 200 && pixel[1] < 20 && pixel[2] < 20 && pixel[3] > 200);
+      } catch {
+        settle(false);
+      }
+    });
+    inner2.requestPaint();
+  });
+};
+var supportsNestedHtmlInCanvas = () => {
+  if (forceDisableHtmlInCanvasForTesting) {
+    return Promise.resolve(false);
+  }
+  if (!nestedHtmlInCanvasSupport) {
+    nestedHtmlInCanvasSupport = runNestedHtmlInCanvasProbe();
+  }
+  return nestedHtmlInCanvasSupport;
+};
+var countLayoutSubtreeCanvases = (element) => {
+  return Array.from(element.querySelectorAll("canvas")).filter((canvas) => canvas.layoutSubtree === true).length;
+};
+var containsLayoutSubtreeCanvas = (element) => {
+  return countLayoutSubtreeCanvases(element) > 0;
+};
 var setupHtmlInCanvas = ({
   wrapper,
   div,
@@ -43495,14 +43931,36 @@ var drawWithHtmlInCanvas = async ({
   htmlInCanvasContext,
   element,
   scaledWidth,
-  scaledHeight
+  scaledHeight,
+  waitForRenderReady,
+  useElementImage
 }) => {
   const { ctx, layoutCanvas } = htmlInCanvasContext;
+  if (layoutCanvas.width !== scaledWidth || layoutCanvas.height !== scaledHeight) {
+    layoutCanvas.width = scaledWidth;
+    layoutCanvas.height = scaledHeight;
+  }
   await waitForPaint(layoutCanvas);
-  layoutCanvas.width = scaledWidth;
-  layoutCanvas.height = scaledHeight;
+  const nestedPaintCycles = useElementImage ? countLayoutSubtreeCanvases(element) * 2 + 1 : 0;
+  for (let i = 0;i < nestedPaintCycles; i++) {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    await waitForRenderReady();
+    await waitForPaint(layoutCanvas);
+  }
   ctx.reset();
-  ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  if (useElementImage) {
+    if (typeof layoutCanvas.captureElementImage !== "function") {
+      throw new Error("canvas.captureElementImage() is unavailable");
+    }
+    const elementImage = layoutCanvas.captureElementImage(element);
+    try {
+      ctx.drawElementImage(elementImage, 0, 0, scaledWidth, scaledHeight);
+    } finally {
+      elementImage.close();
+    }
+  } else {
+    ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  }
   const offscreen = new OffscreenCanvas(scaledWidth, scaledHeight);
   const offCtx = offscreen.getContext("2d");
   if (!offCtx) {
@@ -43634,7 +44092,7 @@ function createScaffold({
   videoEnabled,
   defaultCodec,
   defaultOutName,
-  allowHtmlInCanvas,
+  useHtmlInCanvas,
   pixelDensity
 }) {
   if (!ReactDOM6.createRoot) {
@@ -43661,7 +44119,7 @@ function createScaffold({
   const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
-  const htmlInCanvasContext = allowHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
+  const htmlInCanvasContext = useHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
   const errorHolder = { error: null };
   const root = ReactDOM6.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -44663,6 +45121,15 @@ var filterRequiresPrecompositing = (filter) => {
   }
   return null;
 };
+var snapshotTransformStyle = (computedStyle) => {
+  return {
+    display: computedStyle.display,
+    rotate: computedStyle.rotate,
+    scale: computedStyle.scale,
+    transform: computedStyle.transform,
+    transformOrigin: computedStyle.transformOrigin
+  };
+};
 var isReplacedElement = (element) => {
   return element instanceof HTMLImageElement || element instanceof HTMLVideoElement || element instanceof HTMLCanvasElement || element instanceof HTMLIFrameElement || element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLObjectElement || element instanceof HTMLEmbedElement;
 };
@@ -44713,7 +45180,8 @@ var getGlobalTransformOrigin = ({ transform }) => {
 };
 var calculateTransforms = ({
   element,
-  rootElement
+  rootElement,
+  transformStyleCache
 }) => {
   let parent = element;
   const transforms = [];
@@ -44723,10 +45191,19 @@ var calculateTransforms = ({
   let maskImageInfo = null;
   let filterForPrecompositing = null;
   while (parent) {
+    const cachedTransformStyle = transformStyleCache.get(parent);
+    const shouldReadComputedStyle = parent === element || cachedTransformStyle === undefined;
     const originalTransition = parent.style.transition;
     parent.style.transition = "none";
-    const computedStyle = getComputedStyle(parent);
+    const computedStyle = shouldReadComputedStyle ? getComputedStyle(parent) : null;
+    const transformStyle = computedStyle === null ? cachedTransformStyle : snapshotTransformStyle(computedStyle);
+    if (computedStyle !== null) {
+      transformStyleCache.set(parent, transformStyle);
+    }
     if (parent === element) {
+      if (computedStyle === null) {
+        throw new Error("Element computed style not found");
+      }
       elementComputedStyle = computedStyle;
       opacity2 = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
@@ -44749,9 +45226,9 @@ var calculateTransforms = ({
         }
       });
     }
-    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle, element: parent }) && hasAnyTransformCssValue(computedStyle);
+    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
-      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
+      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate: rotate2 } = parent.style;
@@ -44766,7 +45243,7 @@ var calculateTransforms = ({
       const cleanup = resetTransforms(hasApplicableTransformCssValue);
       transforms.push({
         element: parent,
-        transformOrigin: computedStyle.transformOrigin,
+        transformOrigin: transformStyle.transformOrigin,
         boundingClientRect: null,
         matrices: additionalMatrices
       });
@@ -45358,7 +45835,8 @@ var drawBackground = async ({
         internalState,
         scale,
         onlyBackgroundClipText: true,
-        waitForPageResponsiveness: null
+        waitForPageResponsiveness: null,
+        waitForRenderReady: () => Promise.resolve()
       });
       onlyBackgroundClipText.setTransform(new DOMMatrix().scale(scale, scale));
       element.style.backgroundClip = originalBackgroundClip;
@@ -46512,13 +46990,15 @@ var processNode = async ({
   internalState,
   rootElement,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   let __stack = [];
   try {
     const transforms = __using2(__stack, calculateTransforms({
       element,
-      rootElement
+      rootElement,
+      transformStyleCache
     }), 0);
     const { opacity: opacity2, computedStyle, totalMatrix, dimensions, precompositing } = transforms;
     if (opacity2 === 0) {
@@ -46577,7 +47057,8 @@ var processNode = async ({
         internalState,
         scale,
         onlyBackgroundClipText: false,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        waitForRenderReady: () => Promise.resolve()
       });
       if (waitForPageResponsiveness !== null) {
         await waitForPageResponsiveness();
@@ -46678,29 +47159,25 @@ var applyTextTransform = (text, transform) => {
   }
   return text;
 };
+var wordSegmenter = new Intl.Segmenter("en", { granularity: "word" });
 var findWords = (span) => {
   const originalText = span.textContent;
-  const segmenter = new Intl.Segmenter("en", { granularity: "word" });
-  const segments = segmenter.segment(span.textContent);
-  const words = Array.from(segments).map((s) => s.segment);
+  const segments = Array.from(wordSegmenter.segment(originalText));
   const tokens = [];
-  for (let i = 0;i < words.length; i++) {
-    const wordsBefore = words.slice(0, i);
-    const wordsAfter = words.slice(i + 1);
-    const word = words[i];
-    const wordsBeforeText = wordsBefore.join("");
-    const wordsAfterText = wordsAfter.join("");
+  for (const { index: index2, segment } of segments) {
+    const wordsBeforeText = originalText.slice(0, index2);
+    const wordsAfterText = originalText.slice(index2 + segment.length);
     const beforeNode = document.createTextNode(wordsBeforeText);
     const afterNode = document.createTextNode(wordsAfterText);
     const interstitialNode = document.createElement("span");
-    interstitialNode.textContent = word;
+    interstitialNode.textContent = segment;
     span.textContent = "";
     span.appendChild(beforeNode);
     span.appendChild(interstitialNode);
     span.appendChild(afterNode);
     const rect = interstitialNode.getBoundingClientRect();
     span.textContent = originalText;
-    tokens.push({ text: word, rect });
+    tokens.push({ text: segment, rect });
   }
   return tokens;
 };
@@ -46989,10 +47466,10 @@ var drawText = ({
     const ctm = contextToDraw.getTransform();
     const blurScale = Math.hypot(ctm.a, ctm.b);
     const { strokeFirst } = parsePaintOrder(paintOrder);
+    const measurements = contextToDraw.measureText(originalText);
+    const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+    const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
     for (const token of tokens) {
-      const measurements = contextToDraw.measureText(originalText);
-      const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
-      const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
       const leading = token.rect.height - fontHeight;
       const halfLeading = leading / 2;
       const x = (isRTL2 ? token.rect.right : token.rect.left) - parentRect.x;
@@ -47047,7 +47524,8 @@ var handleTextNode = async ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -47065,7 +47543,8 @@ var handleTextNode = async ({
     internalState,
     rootElement,
     scale,
-    waitForPageResponsiveness
+    waitForPageResponsiveness,
+    transformStyleCache
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -47080,7 +47559,8 @@ var walkOverNode = ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -47092,7 +47572,8 @@ var walkOverNode = ({
       internalState,
       rootElement,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   if (node instanceof Text) {
@@ -47105,7 +47586,8 @@ var walkOverNode = ({
       rootElement,
       onlyBackgroundClipText,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   throw new Error("Unknown node type");
@@ -47136,6 +47618,7 @@ var compose = async ({
   let __stack = [];
   try {
     const treeWalker = document.createTreeWalker(element, onlyBackgroundClipText ? NodeFilter.SHOW_TEXT : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+    const transformStyleCache = new WeakMap;
     if (onlyBackgroundClipText) {
       treeWalker.nextNode();
       if (!treeWalker.currentNode) {
@@ -47155,7 +47638,8 @@ var compose = async ({
         rootElement: element,
         onlyBackgroundClipText,
         scale,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        transformStyleCache
       });
       if (val.type === "skip-children") {
         if (!skipToNextNonDescendant(treeWalker)) {
@@ -47188,17 +47672,21 @@ var createLayer = async ({
   cutout,
   htmlInCanvasContext,
   onHtmlInCanvasLayerOutcome,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  waitForRenderReady
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
   if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
+    const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
     try {
       const offCtx = await drawWithHtmlInCanvas({
         htmlInCanvasContext,
         element,
         scaledWidth,
-        scaledHeight
+        scaledHeight,
+        waitForRenderReady,
+        useElementImage: hasNestedHtmlInCanvas
       });
       onHtmlInCanvasLayerOutcome({ native: true });
       return offCtx;
@@ -47445,7 +47933,6 @@ var internalRenderMediaOnWeb = async ({
   muted,
   scale,
   isProduction,
-  allowHtmlInCanvas,
   sampleRate
 }) => {
   let __stack2 = [];
@@ -47459,7 +47946,7 @@ var internalRenderMediaOnWeb = async ({
       }
       htmlInCanvasLayerOutcomeReported = true;
       if (outcome.native) {
-        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://github.com/WICG/html-in-canvas");
+        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://remotion.dev/docs/client-side-rendering/html-in-canvas");
       } else if (outcome.shouldWarn) {
         Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
       }
@@ -47513,6 +48000,7 @@ var internalRenderMediaOnWeb = async ({
     if (signal?.aborted) {
       return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
     }
+    const useHtmlInCanvas = await supportsNestedHtmlInCanvas();
     const scaffold = __using2(__stack2, createScaffold({
       width: resolved.width,
       height: resolved.height,
@@ -47530,7 +48018,7 @@ var internalRenderMediaOnWeb = async ({
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas,
+      useHtmlInCanvas,
       pixelDensity: scale
     }), 0);
     const {
@@ -47541,27 +48029,6 @@ var internalRenderMediaOnWeb = async ({
       errorHolder,
       htmlInCanvasContext
     } = scaffold;
-    if (allowHtmlInCanvas && !htmlInCanvasContext) {
-      if (!supportsNativeHtmlInCanvas()) {
-        onHtmlInCanvasLayerOutcome({
-          native: false,
-          reason: "This browser does not expose CanvasRenderingContext2D.prototype.drawElementImage. In Chromium, enable chrome://flags/#canvas-draw-element and use a version that ships the API.",
-          shouldWarn: false
-        });
-      } else {
-        onHtmlInCanvasLayerOutcome({
-          native: false,
-          reason: "drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.",
-          shouldWarn: true
-        });
-      }
-    } else if (!allowHtmlInCanvas) {
-      onHtmlInCanvasLayerOutcome({
-        native: false,
-        reason: "allowHtmlInCanvas is false; using the built-in DOM composer.",
-        shouldWarn: false
-      });
-    }
     const internalState = __using2(__stack2, makeInternalState(), 0);
     const pageResponsivenessController = createPageResponsivenessController({
       intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
@@ -47580,6 +48047,17 @@ var internalRenderMediaOnWeb = async ({
       fps: resolved.fps,
       logLevel
     }), 0);
+    const waitForRenderReady = async () => {
+      await waitForReady({
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+        scope: delayRenderScope,
+        signal,
+        apiName: "renderMediaOnWeb",
+        internalState,
+        keepalive
+      });
+      checkForError(errorHolder);
+    };
     const artifactsHandler = handleArtifacts();
     const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
     const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
@@ -47598,15 +48076,7 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        await waitForReady({
-          timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-          scope: delayRenderScope,
-          signal,
-          apiName: "renderMediaOnWeb",
-          internalState,
-          keepalive
-        });
-        checkForError(errorHolder);
+        await waitForRenderReady();
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
@@ -47664,15 +48134,7 @@ var internalRenderMediaOnWeb = async ({
             throw new Error("renderMediaOnWeb() was cancelled");
           }
           timeUpdater.current?.update(frame);
-          await waitForReady({
-            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-            scope: delayRenderScope,
-            signal,
-            apiName: "renderMediaOnWeb",
-            keepalive,
-            internalState
-          });
-          checkForError(errorHolder);
+          await waitForRenderReady();
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
@@ -47690,7 +48152,8 @@ var internalRenderMediaOnWeb = async ({
               cutout: new DOMRect(0, 0, resolved.width, resolved.height),
               htmlInCanvasContext,
               onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
-              waitForPageResponsiveness
+              waitForPageResponsiveness,
+              waitForRenderReady
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
@@ -47859,7 +48322,6 @@ var renderMediaOnWeb = (options2) => {
     muted: options2.muted ?? false,
     scale: options2.scale ?? 1,
     isProduction: options2.isProduction ?? true,
-    allowHtmlInCanvas: options2.allowHtmlInCanvas ?? false,
     sampleRate: options2.sampleRate ?? 48000
   }));
   return onlyOneRenderAtATimeQueue.ref;
@@ -47898,7 +48360,7 @@ var DemoErrorIcon = () => {
 };
 
 // src/components/homepage/Demo/DoneCheckmark.tsx
-import { jsx as jsx91, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs30 } from "react/jsx-runtime";
 var DoneCheckmark = () => {
   return /* @__PURE__ */ jsx91("div", {
     style: {
@@ -47911,7 +48373,7 @@ var DoneCheckmark = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsxs28("svg", {
+    children: /* @__PURE__ */ jsxs30("svg", {
       viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -47940,7 +48402,7 @@ var DoneCheckmark = () => {
 };
 
 // src/components/homepage/Demo/Progress.tsx
-import { jsx as jsx95, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs31 } from "react/jsx-runtime";
 var Progress = ({ progress }) => {
   const inner2 = makeCircle({
     radius: 10
@@ -47950,7 +48412,7 @@ var Progress = ({ progress }) => {
     closePath: false,
     radius: 10
   });
-  return /* @__PURE__ */ jsxs29("svg", {
+  return /* @__PURE__ */ jsxs31("svg", {
     viewBox: `0 0 ${inner2.width} ${inner2.height}`,
     style: { overflow: "visible", height: 22 },
     children: [
@@ -47973,7 +48435,7 @@ var Progress = ({ progress }) => {
 
 // src/components/homepage/Demo/Spinner.tsx
 import { useMemo as useMemo64 } from "react";
-import { jsx as jsx97, jsxs as jsxs30, Fragment as Fragment15 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs34, Fragment as Fragment16 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
 var className2 = "__remotion_spinner_line";
@@ -47986,7 +48448,7 @@ var Spinner2 = ({ size: size4, duration }) => {
       height: size4
     };
   }, [size4]);
-  return /* @__PURE__ */ jsxs30(Fragment15, {
+  return /* @__PURE__ */ jsxs34(Fragment16, {
     children: [
       /* @__PURE__ */ jsx97("style", {
         type: "text/css",
@@ -48142,7 +48604,7 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
 };
 
 // src/components/homepage/Demo/DownloadNudge.tsx
-import { jsx as jsx99, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
 var origWidth = 77;
 var scale = 0.4;
 var Icon3 = () => {
@@ -48172,7 +48634,7 @@ var DownloadNudge = () => {
       paddingRight: 24,
       paddingTop: 18
     },
-    children: /* @__PURE__ */ jsxs31("div", {
+    children: /* @__PURE__ */ jsxs36("div", {
       children: [
         /* @__PURE__ */ jsx99(Icon3, {}),
         /* @__PURE__ */ jsx99("div", {
@@ -48192,7 +48654,7 @@ var DownloadNudge = () => {
 };
 
 // src/components/homepage/Demo/DragAndDropNudge.tsx
-import { jsx as jsx100, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs37 } from "react/jsx-runtime";
 var origWidth2 = 37;
 var scale2 = 0.4;
 var Icon5 = () => {
@@ -48222,7 +48684,7 @@ var DragAndDropNudge = () => {
       marginTop: 18
     },
     className: "ml-4 lg:-ml-5",
-    children: /* @__PURE__ */ jsxs34("div", {
+    children: /* @__PURE__ */ jsxs37("div", {
       children: [
         /* @__PURE__ */ jsx100("div", {
           style: {
@@ -48287,7 +48749,7 @@ var useElementSize2 = (ref) => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { jsx as jsx101, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs38 } from "react/jsx-runtime";
 var getFrameFromX2 = (clientX, durationInFrames, width2) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width2], [0, durationInFrames - 1], {
@@ -48496,12 +48958,12 @@ var PlayerSeekBar2 = ({
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs36("div", {
+  return /* @__PURE__ */ jsxs38("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle3,
     children: [
-      /* @__PURE__ */ jsxs36("div", {
+      /* @__PURE__ */ jsxs38("div", {
         style: barBackground2,
         children: [
           /* @__PURE__ */ jsx101("div", {
@@ -48728,7 +49190,7 @@ var TimeDisplay = ({ fps, playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayerControls.tsx
-import { jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs39 } from "react/jsx-runtime";
 var Separator2 = () => {
   return /* @__PURE__ */ jsx110("div", {
     style: {
@@ -48738,7 +49200,7 @@ var Separator2 = () => {
   });
 };
 var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
-  return /* @__PURE__ */ jsxs37("div", {
+  return /* @__PURE__ */ jsxs39("div", {
     className: "flex flex-row items-center bg-pane",
     children: [
       /* @__PURE__ */ jsx110(PlayPauseButton, {
@@ -48782,7 +49244,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 
 // src/components/homepage/Demo/ThemeNudge.tsx
 import React77 from "react";
-import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
 var Icon6 = () => {
@@ -48818,9 +49280,9 @@ var ThemeNudge = () => {
       position: "absolute"
     },
     className: "lg:top-3 lg:-right-6 right-0 top-0",
-    children: /* @__PURE__ */ jsxs38("div", {
+    children: /* @__PURE__ */ jsxs40("div", {
       children: [
-        /* @__PURE__ */ jsxs38("div", {
+        /* @__PURE__ */ jsxs40("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -48831,7 +49293,7 @@ var ThemeNudge = () => {
             marginTop: 5
           },
           children: [
-            /* @__PURE__ */ jsxs38("a", {
+            /* @__PURE__ */ jsxs40("a", {
               href: "#",
               onClick: toggleTheme,
               className: "bluelink",
@@ -48853,7 +49315,7 @@ var ThemeNudge = () => {
 };
 
 // src/components/homepage/Demo/index.tsx
-import { jsx as jsx115, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs41 } from "react/jsx-runtime";
 var style3 = {
   width: "100%",
   aspectRatio: "640 / 360",
@@ -48921,7 +49383,7 @@ var Demo = () => {
   const onError = useCallback55(() => {
     setError(true);
   }, []);
-  return /* @__PURE__ */ jsxs39("div", {
+  return /* @__PURE__ */ jsxs41("div", {
     id: "demo",
     children: [
       /* @__PURE__ */ jsx115("br", {}),
@@ -48929,17 +49391,17 @@ var Demo = () => {
       /* @__PURE__ */ jsx115(SectionTitle, {
         children: "Interactive demo"
       }),
-      /* @__PURE__ */ jsxs39("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "max-w-[760px] mx-auto",
         children: [
-          /* @__PURE__ */ jsxs39("div", {
+          /* @__PURE__ */ jsxs41("div", {
             className: "h-[105px] relative",
             children: [
               /* @__PURE__ */ jsx115(DragAndDropNudge, {}),
               /* @__PURE__ */ jsx115(ThemeNudge, {})
             ]
           }),
-          /* @__PURE__ */ jsxs39("div", {
+          /* @__PURE__ */ jsxs41("div", {
             style: playerWrapper,
             children: [
               /* @__PURE__ */ jsx115(Player, {
@@ -49028,7 +49490,7 @@ var BlueButton = (props) => {
 };
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState57([]);
   useEffect58(() => {
@@ -49041,10 +49503,10 @@ var EvaluateRemotionSection = () => {
     }
     setDailyAvatars(selectedAvatars);
   }, []);
-  return /* @__PURE__ */ jsxs40("div", {
+  return /* @__PURE__ */ jsxs44("div", {
     className: "flex flex-col lg:flex-row gap-2",
     children: [
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs44("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx118("div", {
@@ -49058,7 +49520,7 @@ var EvaluateRemotionSection = () => {
           /* @__PURE__ */ jsx118("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs44("div", {
             className: "flex flex-row flex-wrap gap-2",
             children: [
               /* @__PURE__ */ jsx118("a", {
@@ -49085,7 +49547,7 @@ var EvaluateRemotionSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs44("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx118("div", {
@@ -49099,7 +49561,7 @@ var EvaluateRemotionSection = () => {
           /* @__PURE__ */ jsx118("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs44("div", {
             className: "flex flex-row justify-between",
             children: [
               /* @__PURE__ */ jsx118("a", {
@@ -49132,13 +49594,13 @@ import { useEffect as useEffect59, useRef as useRef60 } from "react";
 
 // src/components/homepage/MakeVideosLinks.tsx
 import React80 from "react";
-import { jsx as jsx119, jsxs as jsxs41, Fragment as Fragment16 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs46, Fragment as Fragment17 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var MakeVideosLinkItem = ({ href, label: label3 }) => {
-  return /* @__PURE__ */ jsxs41("a", {
+  return /* @__PURE__ */ jsxs46("a", {
     className: "no-underline text-[var(--subtitle)] font-brand font-medium text-sm inline-flex flex-row items-center",
     href,
     children: [
@@ -49159,7 +49621,7 @@ var MakeVideosLinks = ({ links }) => {
   if (links.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs41(Fragment16, {
+  return /* @__PURE__ */ jsxs46(Fragment17, {
     children: [
       /* @__PURE__ */ jsx119("div", {
         className: "h-4"
@@ -49167,7 +49629,7 @@ var MakeVideosLinks = ({ links }) => {
       /* @__PURE__ */ jsx119("div", {
         className: "leading-6",
         children: links.map((link) => {
-          return /* @__PURE__ */ jsxs41(React80.Fragment, {
+          return /* @__PURE__ */ jsxs46(React80.Fragment, {
             children: [
               /* @__PURE__ */ jsx119(MakeVideosLinkItem, {
                 ...link
@@ -49182,9 +49644,9 @@ var MakeVideosLinks = ({ links }) => {
 };
 
 // src/components/homepage/MakeVideosAgentically.tsx
-import { jsx as jsx120, jsxs as jsxs44, Fragment as Fragment17 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs47, Fragment as Fragment18 } from "react/jsx-runtime";
 var MakeVideosAgentically = ({
-  title = /* @__PURE__ */ jsxs44(Fragment17, {
+  title = /* @__PURE__ */ jsxs47(Fragment18, {
     children: [
       /* @__PURE__ */ jsx120("span", {
         className: "text-[var(--subtitle)]",
@@ -49223,13 +49685,13 @@ var MakeVideosAgentically = ({
     observer.observe(current);
     return () => observer.unobserve(current);
   }, []);
-  return /* @__PURE__ */ jsxs44("div", {
+  return /* @__PURE__ */ jsxs47("div", {
     ref,
     className: "flex min-w-0 basis-0 flex-col flex-1",
     children: [
       /* @__PURE__ */ jsx120("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs44("video", {
+        children: showVideo ? /* @__PURE__ */ jsxs47("video", {
           ref: videoRef,
           muted: true,
           autoPlay: true,
@@ -49256,7 +49718,7 @@ var MakeVideosAgentically = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs44("div", {
+      /* @__PURE__ */ jsxs47("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx120("h2", {
@@ -49278,9 +49740,9 @@ var MakeVideosAgentically = ({
 
 // src/components/homepage/MakeVideosInteractively.tsx
 import { useRef as useRef61 } from "react";
-import { jsx as jsx121, jsxs as jsxs46, Fragment as Fragment18 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs48, Fragment as Fragment19 } from "react/jsx-runtime";
 var MakeVideosInteractively = ({
-  title = /* @__PURE__ */ jsxs46(Fragment18, {
+  title = /* @__PURE__ */ jsxs48(Fragment19, {
     children: [
       /* @__PURE__ */ jsx121("span", {
         className: "text-[var(--subtitle)]",
@@ -49298,13 +49760,13 @@ var MakeVideosInteractively = ({
   fallbackVideoSrc = "/img/editing-safari.mp4"
 }) => {
   const ref = useRef61(null);
-  return /* @__PURE__ */ jsxs46("div", {
+  return /* @__PURE__ */ jsxs48("div", {
     ref,
     className: "flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1",
     children: [
       /* @__PURE__ */ jsx121("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs46("video", {
+        children: showVideo ? /* @__PURE__ */ jsxs48("video", {
           autoPlay: true,
           muted: true,
           playsInline: true,
@@ -49330,7 +49792,7 @@ var MakeVideosInteractively = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs46("div", {
+      /* @__PURE__ */ jsxs48("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx121("h2", {
@@ -49351,9 +49813,9 @@ var MakeVideosInteractively = ({
 };
 
 // src/components/homepage/MakeVideosProgrammatically.tsx
-import { jsx as jsx125, jsxs as jsxs47, Fragment as Fragment19 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs49, Fragment as Fragment20 } from "react/jsx-runtime";
 var MakeVideosProgrammatically = ({
-  title = /* @__PURE__ */ jsxs47(Fragment19, {
+  title = /* @__PURE__ */ jsxs49(Fragment20, {
     children: [
       /* @__PURE__ */ jsx125("span", {
         className: "text-[var(--subtitle)]",
@@ -49370,12 +49832,12 @@ var MakeVideosProgrammatically = ({
   videoSrc = "/img/what-is-remotion.webm",
   fallbackVideoSrc = "/img/what-is-remotion.mp4"
 }) => {
-  return /* @__PURE__ */ jsxs47("div", {
+  return /* @__PURE__ */ jsxs49("div", {
     className: "flex min-w-0 basis-0 flex-col flex-1",
     children: [
       /* @__PURE__ */ jsx125("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs47("video", {
+        children: showVideo ? /* @__PURE__ */ jsxs49("video", {
           muted: true,
           autoPlay: true,
           playsInline: true,
@@ -49394,7 +49856,7 @@ var MakeVideosProgrammatically = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs47("div", {
+      /* @__PURE__ */ jsxs49("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx125("h2", {
@@ -49416,7 +49878,7 @@ var MakeVideosProgrammatically = ({
 
 // src/components/homepage/NewsletterButton.tsx
 import { useCallback as useCallback56, useState as useState58 } from "react";
-import { jsx as jsx127, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs50 } from "react/jsx-runtime";
 var NewsletterButton = () => {
   const [email, setEmail] = useState58("");
   const [submitting, setSubmitting] = useState58(false);
@@ -49448,26 +49910,26 @@ var NewsletterButton = () => {
       className: "flex flex-col",
       children: /* @__PURE__ */ jsx127("div", {
         className: "w-full",
-        children: /* @__PURE__ */ jsxs48("div", {
+        children: /* @__PURE__ */ jsxs50("div", {
           className: "flex flex-col flex-1",
           children: [
             /* @__PURE__ */ jsx127(SectionTitle, {
               children: "Newsletter"
             }),
-            /* @__PURE__ */ jsxs48("form", {
+            /* @__PURE__ */ jsxs50("form", {
               onSubmit: handleSubmit,
               style: {
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ jsxs48("div", {
+                /* @__PURE__ */ jsxs50("div", {
                   className: "fontbrand text-center mb-10 -mt-4",
                   children: [
                     "Read about new features and noteworthy updates we have made on Remotion once in a while.",
                     " "
                   ]
                 }),
-                /* @__PURE__ */ jsxs48("div", {
+                /* @__PURE__ */ jsxs50("div", {
                   className: "flex flex-col md:flex-row gap-2 justify-center",
                   children: [
                     /* @__PURE__ */ jsx127(Input, {
@@ -49503,7 +49965,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/TrustedByBanner.tsx
-import { jsx as jsx128, jsxs as jsxs49, Fragment as Fragment20 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs51, Fragment as Fragment21 } from "react/jsx-runtime";
 var TrustedByBanner = () => {
   const logos = [
     {
@@ -49523,7 +49985,7 @@ var TrustedByBanner = () => {
     {
       id: "logo2",
       url: "https://www.musixmatch.com/",
-      light: /* @__PURE__ */ jsxs49("svg", {
+      light: /* @__PURE__ */ jsxs51("svg", {
         height: "40",
         viewBox: "0 0 229 48",
         fill: "none",
@@ -49583,7 +50045,7 @@ var TrustedByBanner = () => {
     {
       id: "logo3",
       url: "https://www.wistia.com/",
-      light: /* @__PURE__ */ jsxs49("svg", {
+      light: /* @__PURE__ */ jsxs51("svg", {
         height: "30",
         viewBox: "0 0 165 36",
         fill: "none",
@@ -49616,7 +50078,7 @@ var TrustedByBanner = () => {
       })
     }
   ];
-  return /* @__PURE__ */ jsxs49(Fragment20, {
+  return /* @__PURE__ */ jsxs51(Fragment21, {
     children: [
       /* @__PURE__ */ jsx128("h3", {
         className: "text-center mt-20 mb-10",
@@ -49782,7 +50244,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
 var MuxVideo = forwardRef41(MuxVideoForward);
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { jsx as jsx131, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs53 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
   "Captions",
@@ -49889,7 +50351,7 @@ var BuiltWithRemotionShowcase = () => {
       setIsMuted(newMutedState);
     }
   };
-  return /* @__PURE__ */ jsxs50("div", {
+  return /* @__PURE__ */ jsxs53("div", {
     ref: containerRef,
     children: [
       /* @__PURE__ */ jsx131(SectionTitle, {
@@ -49908,10 +50370,10 @@ var BuiltWithRemotionShowcase = () => {
       /* @__PURE__ */ jsx131("div", {
         className: "card flex p-0 overflow-hidden",
         "data-nosnippet": true,
-        children: /* @__PURE__ */ jsxs50("div", {
+        children: /* @__PURE__ */ jsxs53("div", {
           className: "flex-1 grid grid-cols-1 lg:grid-cols-2",
           children: [
-            /* @__PURE__ */ jsxs50("div", {
+            /* @__PURE__ */ jsxs53("div", {
               className: "w-full aspect-video lg:aspect-square relative overflow-hidden bg-[#eee] cursor-pointer",
               onClick: handlePlayPause,
               children: [
@@ -49975,7 +50437,7 @@ var BuiltWithRemotionShowcase = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs50("div", {
+            /* @__PURE__ */ jsxs53("div", {
               className: "p-6 lg:p-10 flex min-w-0 flex-col justify-center",
               children: [
                 /* @__PURE__ */ jsx131("div", {
@@ -49993,7 +50455,7 @@ var BuiltWithRemotionShowcase = () => {
                 /* @__PURE__ */ jsx131("div", {
                   className: "h-5"
                 }),
-                /* @__PURE__ */ jsxs50("a", {
+                /* @__PURE__ */ jsxs53("a", {
                   className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                   href: videoApps[activeTab].link,
                   children: [
@@ -50012,7 +50474,7 @@ var BuiltWithRemotionShowcase = () => {
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs50("div", {
+        children: /* @__PURE__ */ jsxs53("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -50036,7 +50498,7 @@ var BuiltWithRemotionShowcase = () => {
 import { useState as useState61 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
-import { jsx as jsx134, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs55 } from "react/jsx-runtime";
 var GithubIcon = () => {
   return /* @__PURE__ */ jsx134("svg", {
     viewBox: "0 0 496 512",
@@ -50048,7 +50510,7 @@ var GithubIcon = () => {
   });
 };
 var GithubButton = () => {
-  return /* @__PURE__ */ jsxs51("div", {
+  return /* @__PURE__ */ jsxs55("div", {
     className: "flex flex-row items-center text-base",
     children: [
       /* @__PURE__ */ jsx134(GithubIcon, {}),
@@ -50059,22 +50521,22 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx134("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "52k"
+        children: "53k"
       })
     ]
   });
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { jsx as jsx136, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs56 } from "react/jsx-runtime";
 var GetStarted = () => {
   const [clicked, setClicked] = useState61(null);
-  return /* @__PURE__ */ jsxs54("div", {
+  return /* @__PURE__ */ jsxs56("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [
       /* @__PURE__ */ jsx136("div", {
         className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsxs54("div", {
+        children: /* @__PURE__ */ jsxs56("div", {
           className: "flex flex-row w-full relative",
           children: [
             clicked ? /* @__PURE__ */ jsx136("div", {
@@ -50137,9 +50599,9 @@ var GetStarted = () => {
 };
 
 // src/components/homepage/WriteInReact.tsx
-import { jsx as jsx137, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx137, jsxs as jsxs57 } from "react/jsx-runtime";
 var WriteInReact = () => {
-  return /* @__PURE__ */ jsxs56("div", {
+  return /* @__PURE__ */ jsxs57("div", {
     children: [
       /* @__PURE__ */ jsx137("h1", {
         className: "text-4xl sm:text-5xl lg:text-[5em] text-center fontbrand font-black leading-none text-balance",
@@ -50148,7 +50610,7 @@ var WriteInReact = () => {
         },
         children: "Make videos programmatically."
       }),
-      /* @__PURE__ */ jsxs56("p", {
+      /* @__PURE__ */ jsxs57("p", {
         style: {
           textShadow: "0 5px 30px var(--background)"
         },
@@ -50170,7 +50632,7 @@ var WriteInReact = () => {
 };
 
 // src/components/Homepage.tsx
-import { jsx as jsx138, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs58 } from "react/jsx-runtime";
 "use client";
 var makeVideosRowClassName = "mt-4 md:mt-6 flex flex-col lg:flex-row gap-10";
 var NewLanding = ({ colorMode, setColorMode }) => {
@@ -50179,7 +50641,7 @@ var NewLanding = ({ colorMode, setColorMode }) => {
     setColorMode,
     children: /* @__PURE__ */ jsx138("div", {
       className: "w-full relative",
-      children: /* @__PURE__ */ jsxs57("div", {
+      children: /* @__PURE__ */ jsxs58("div", {
         style: { overflow: "hidden" },
         children: [
           /* @__PURE__ */ jsx138("div", {
@@ -50189,12 +50651,12 @@ var NewLanding = ({ colorMode, setColorMode }) => {
           /* @__PURE__ */ jsx138("br", {}),
           /* @__PURE__ */ jsx138("br", {}),
           /* @__PURE__ */ jsx138("br", {}),
-          /* @__PURE__ */ jsxs57("div", {
+          /* @__PURE__ */ jsxs58("div", {
             className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative",
             children: [
               /* @__PURE__ */ jsx138(WriteInReact, {}),
               /* @__PURE__ */ jsx138("br", {}),
-              /* @__PURE__ */ jsxs57("div", {
+              /* @__PURE__ */ jsxs58("div", {
                 className: makeVideosRowClassName,
                 children: [
                   /* @__PURE__ */ jsx138(MakeVideosAgentically, {