@remotion/promo-pages 4.0.490 → 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 {
@@ -2335,7 +2334,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.490";
+var VERSION = "4.0.491";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2948,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: {}
@@ -5561,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,
@@ -5624,6 +5624,7 @@ var RegularSequenceRefForwardingFunction = ({
     isInsideSeries,
     registeredFrozenFrame,
     startMediaFrom,
+    mediaFrameAtSequenceZero,
     frozenMediaFrame
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -7574,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) {
@@ -7643,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 {
@@ -7655,7 +7658,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
           audioMounted
         };
       }
-      return prevA;
+      return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
     });
     if (changed) {
       rerenderAudios();
@@ -7694,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
     ]
   });
@@ -8164,6 +8170,7 @@ var useMediaInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt,
+      mediaFrameAtSequenceZero: null,
       doesVolumeChange,
       loopDisplay,
       playbackRate,
@@ -9797,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 = ({
@@ -9822,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,
@@ -9834,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") {
@@ -9870,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
     });
@@ -9891,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
@@ -9919,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;
         }
@@ -9936,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);
@@ -9961,7 +10002,7 @@ var HtmlInCanvasContent = forwardRef9(({
     continueRender2,
     cancelRender2,
     resolvedPixelDensity,
-    isRendering
+    canRetryMissingPaintRecord
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -9969,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
     });
@@ -9981,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) {
@@ -10026,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,
@@ -12400,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, {
@@ -13058,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",
@@ -13113,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", {
@@ -13138,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", {
@@ -13173,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, {
@@ -13241,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
@@ -13272,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, {
@@ -13284,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, {
@@ -13299,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: [
@@ -13319,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,
@@ -13347,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", {
@@ -13403,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.",
@@ -13428,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", {
@@ -13462,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,",
@@ -17609,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";
@@ -17811,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,
@@ -17837,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}`,
@@ -20518,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";
@@ -20582,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";
@@ -20595,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";
@@ -20943,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),
@@ -21002,7 +21117,7 @@ var Outer = ({
     description: "rect",
     transformations: centerOriented
   });
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "relative",
     style: { width, height },
     children: [
@@ -26006,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,
@@ -26040,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,
@@ -26062,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,
@@ -26604,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;
 });
@@ -28540,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",
@@ -28554,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",
@@ -28576,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,
@@ -28594,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
 }) => {
@@ -28638,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: `
@@ -28695,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"
@@ -28726,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",
@@ -28750,7 +28865,7 @@ var FreePricing = () => {
   });
 };
 var EnterpriseLicense = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For advanced needs"
@@ -28783,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",
@@ -28801,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"
@@ -28828,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: [
@@ -28837,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,
@@ -28890,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"
@@ -28933,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", {
@@ -28954,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: [
                     "$",
@@ -28990,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", {
@@ -29010,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,
@@ -29018,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: [
                     "$",
@@ -29035,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"
@@ -29050,7 +29165,7 @@ var CompanyPricing = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-col items-end",
         children: [
           /* @__PURE__ */ jsx49(BottomInfo, {
@@ -29058,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: [
@@ -29084,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: [
@@ -29108,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;
@@ -29124,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",
@@ -29140,7 +29255,7 @@ var Pricing = ({
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs9("div", {
+        children: /* @__PURE__ */ jsxs11("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -29191,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",
@@ -29212,7 +29327,7 @@ var appPipeline = [
   {
     step: "03",
     title: "Preview and render",
-    description: /* @__PURE__ */ jsxs10(Fragment11, {
+    description: /* @__PURE__ */ jsxs12(Fragment12, {
       children: [
         "Use the",
         " ",
@@ -29263,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: [
@@ -29277,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", {
@@ -29291,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", {
@@ -29305,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", {
@@ -29316,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", {
@@ -29337,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", {
@@ -29368,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",
@@ -29413,7 +29528,7 @@ var PreviewIllustration = () => {
             ]
           })
         }),
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "mt-2 flex items-center gap-2",
           children: [
             /* @__PURE__ */ jsx54("div", {
@@ -29462,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"
@@ -29475,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", {
@@ -29506,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", {
@@ -29527,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;
@@ -29559,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: {
@@ -29614,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,
@@ -29647,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",
@@ -29658,7 +29773,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "4M+",
+            content: "5M+",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29689,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, {
@@ -29726,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, {
@@ -29744,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, {
@@ -29784,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",
@@ -29792,7 +29907,7 @@ var DiscordMembers = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs12("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -29841,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", {
@@ -29861,7 +29976,7 @@ var Contributors = () => {
             width: "65px"
           })
         }),
-        /* @__PURE__ */ jsxs12("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -29889,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, {
@@ -29906,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, {
@@ -29941,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";
@@ -29986,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";
@@ -29995,7 +30110,7 @@ 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 { 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";
 
@@ -31542,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,
@@ -31576,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,
@@ -31664,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",
@@ -33149,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,
@@ -33276,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,
@@ -34265,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,
@@ -36984,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 = {
@@ -37670,6 +37786,9 @@ class MediaPlayer {
           }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
+            if (videoTrack.codec === "prores") {
+              return { type: "cannot-decode-prores" };
+            }
             return { type: "cannot-decode" };
           }
           if (this.isDisposalError()) {
@@ -38379,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);
@@ -39686,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);
@@ -39937,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" };
   }
@@ -40088,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" };
     }
@@ -40173,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",
@@ -40317,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);
@@ -40487,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;
@@ -40693,6 +40850,17 @@ var Audio2 = Interactive.withSchema({
   schema: audioSchema,
   supportsEffects: false
 });
+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;
@@ -40941,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;
@@ -40951,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,
@@ -41248,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;
@@ -41771,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();
@@ -41796,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: [
@@ -41814,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;
@@ -41991,7 +42172,7 @@ var Card2 = ({
       borderRadius: 13,
       cursor: "grab"
     },
-    children: /* @__PURE__ */ jsxs16(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs18(AbsoluteFill, {
       style: {
         backgroundColor: color,
         borderRadius: 12
@@ -41999,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,
@@ -42019,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();
@@ -42034,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, {
@@ -42052,7 +42233,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
           })
         })
       }),
-      /* @__PURE__ */ jsxs17(AbsoluteFill, {
+      /* @__PURE__ */ jsxs19(AbsoluteFill, {
         style: {
           alignItems: "center",
           justifyContent: "center"
@@ -42341,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]}%)`;
@@ -42437,7 +42618,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     });
   }, []);
   const env = useRemotionEnvironment();
-  return /* @__PURE__ */ jsxs18(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs20(AbsoluteFill, {
     style: {
       justifyContent: "center",
       alignItems: "center",
@@ -42469,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,
@@ -42517,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;
@@ -42561,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,
@@ -42622,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",
@@ -42677,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",
@@ -42691,7 +42872,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
         paddingRight: 20
       },
       children: [
-        /* @__PURE__ */ jsxs21("div", {
+        /* @__PURE__ */ jsxs27("div", {
           style: {
             color: "#0b84f3",
             fontFamily: "GTPlanar",
@@ -42716,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();
@@ -42738,7 +42919,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
       opacity: progress
     };
   }, [progress, theme]);
-  return /* @__PURE__ */ jsxs25("div", {
+  return /* @__PURE__ */ jsxs28("div", {
     style: item,
     children: [
       number,
@@ -42769,7 +42950,7 @@ var TrendingRepos = ({ theme, trending }) => {
         paddingLeft: 20,
         paddingRight: 20
       },
-      children: /* @__PURE__ */ jsxs25("div", {
+      children: /* @__PURE__ */ jsxs28("div", {
         children: [
           /* @__PURE__ */ jsx81("div", {
             style: {
@@ -42902,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) => {
@@ -42963,7 +43144,7 @@ var HomepageVideoComp = ({
       c2.free();
     };
   }, []);
-  return /* @__PURE__ */ jsxs27(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs29(AbsoluteFill, {
     style: {
       backgroundColor: theme === "dark" ? "#222" : "#fafafa"
     },
@@ -43029,7 +43210,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.490";
+var VERSION2 = "4.0.491";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43585,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;
@@ -43592,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,
@@ -43633,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) {
@@ -43772,7 +44092,7 @@ function createScaffold({
   videoEnabled,
   defaultCodec,
   defaultOutName,
-  allowHtmlInCanvas,
+  useHtmlInCanvas,
   pixelDensity
 }) {
   if (!ReactDOM6.createRoot) {
@@ -43799,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) => {
@@ -44801,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;
 };
@@ -44851,7 +45180,8 @@ var getGlobalTransformOrigin = ({ transform }) => {
 };
 var calculateTransforms = ({
   element,
-  rootElement
+  rootElement,
+  transformStyleCache
 }) => {
   let parent = element;
   const transforms = [];
@@ -44861,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);
@@ -44887,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;
@@ -44904,7 +45243,7 @@ var calculateTransforms = ({
       const cleanup = resetTransforms(hasApplicableTransformCssValue);
       transforms.push({
         element: parent,
-        transformOrigin: computedStyle.transformOrigin,
+        transformOrigin: transformStyle.transformOrigin,
         boundingClientRect: null,
         matrices: additionalMatrices
       });
@@ -45496,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;
@@ -46650,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) {
@@ -46715,7 +47057,8 @@ var processNode = async ({
         internalState,
         scale,
         onlyBackgroundClipText: false,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        waitForRenderReady: () => Promise.resolve()
       });
       if (waitForPageResponsiveness !== null) {
         await waitForPageResponsiveness();
@@ -46816,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;
 };
@@ -47127,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;
@@ -47185,7 +47524,8 @@ var handleTextNode = async ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -47203,7 +47543,8 @@ var handleTextNode = async ({
     internalState,
     rootElement,
     scale,
-    waitForPageResponsiveness
+    waitForPageResponsiveness,
+    transformStyleCache
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -47218,7 +47559,8 @@ var walkOverNode = ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -47230,7 +47572,8 @@ var walkOverNode = ({
       internalState,
       rootElement,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   if (node instanceof Text) {
@@ -47243,7 +47586,8 @@ var walkOverNode = ({
       rootElement,
       onlyBackgroundClipText,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   throw new Error("Unknown node type");
@@ -47274,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) {
@@ -47293,7 +47638,8 @@ var compose = async ({
         rootElement: element,
         onlyBackgroundClipText,
         scale,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        transformStyleCache
       });
       if (val.type === "skip-children") {
         if (!skipToNextNonDescendant(treeWalker)) {
@@ -47326,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;
@@ -47583,7 +47933,6 @@ var internalRenderMediaOnWeb = async ({
   muted,
   scale,
   isProduction,
-  allowHtmlInCanvas,
   sampleRate
 }) => {
   let __stack2 = [];
@@ -47597,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}`);
       }
@@ -47651,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,
@@ -47668,7 +48018,7 @@ var internalRenderMediaOnWeb = async ({
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas,
+      useHtmlInCanvas,
       pixelDensity: scale
     }), 0);
     const {
@@ -47679,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,
@@ -47718,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;
@@ -47736,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");
         }
@@ -47802,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");
           }
@@ -47828,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;
@@ -47997,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;
@@ -48036,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: {
@@ -48049,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",
@@ -48078,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
@@ -48088,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: [
@@ -48111,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";
@@ -48124,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",
@@ -48280,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 = () => {
@@ -48310,7 +48634,7 @@ var DownloadNudge = () => {
       paddingRight: 24,
       paddingTop: 18
     },
-    children: /* @__PURE__ */ jsxs31("div", {
+    children: /* @__PURE__ */ jsxs36("div", {
       children: [
         /* @__PURE__ */ jsx99(Icon3, {}),
         /* @__PURE__ */ jsx99("div", {
@@ -48330,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 = () => {
@@ -48360,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: {
@@ -48425,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], {
@@ -48634,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", {
@@ -48866,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: {
@@ -48876,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, {
@@ -48920,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 = () => {
@@ -48956,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,
@@ -48969,7 +49293,7 @@ var ThemeNudge = () => {
             marginTop: 5
           },
           children: [
-            /* @__PURE__ */ jsxs38("a", {
+            /* @__PURE__ */ jsxs40("a", {
               href: "#",
               onClick: toggleTheme,
               className: "bluelink",
@@ -48991,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",
@@ -49059,7 +49383,7 @@ var Demo = () => {
   const onError = useCallback55(() => {
     setError(true);
   }, []);
-  return /* @__PURE__ */ jsxs39("div", {
+  return /* @__PURE__ */ jsxs41("div", {
     id: "demo",
     children: [
       /* @__PURE__ */ jsx115("br", {}),
@@ -49067,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, {
@@ -49166,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(() => {
@@ -49179,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", {
@@ -49196,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", {
@@ -49223,7 +49547,7 @@ var EvaluateRemotionSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs44("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx118("div", {
@@ -49237,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", {
@@ -49270,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: [
@@ -49297,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"
@@ -49305,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
@@ -49320,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)]",
@@ -49361,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,
@@ -49394,7 +49718,7 @@ var MakeVideosAgentically = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs44("div", {
+      /* @__PURE__ */ jsxs47("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx120("h2", {
@@ -49416,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)]",
@@ -49436,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,
@@ -49468,7 +49792,7 @@ var MakeVideosInteractively = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs46("div", {
+      /* @__PURE__ */ jsxs48("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx121("h2", {
@@ -49489,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)]",
@@ -49508,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,
@@ -49532,7 +49856,7 @@ var MakeVideosProgrammatically = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs47("div", {
+      /* @__PURE__ */ jsxs49("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx125("h2", {
@@ -49554,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);
@@ -49586,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, {
@@ -49641,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 = [
     {
@@ -49661,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",
@@ -49721,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",
@@ -49754,7 +50078,7 @@ var TrustedByBanner = () => {
       })
     }
   ];
-  return /* @__PURE__ */ jsxs49(Fragment20, {
+  return /* @__PURE__ */ jsxs51(Fragment21, {
     children: [
       /* @__PURE__ */ jsx128("h3", {
         className: "text-center mt-20 mb-10",
@@ -49920,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",
@@ -50027,7 +50351,7 @@ var BuiltWithRemotionShowcase = () => {
       setIsMuted(newMutedState);
     }
   };
-  return /* @__PURE__ */ jsxs50("div", {
+  return /* @__PURE__ */ jsxs53("div", {
     ref: containerRef,
     children: [
       /* @__PURE__ */ jsx131(SectionTitle, {
@@ -50046,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: [
@@ -50113,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", {
@@ -50131,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: [
@@ -50150,7 +50474,7 @@ var BuiltWithRemotionShowcase = () => {
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs50("div", {
+        children: /* @__PURE__ */ jsxs53("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -50174,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",
@@ -50186,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, {}),
@@ -50204,15 +50528,15 @@ var GithubButton = () => {
 };
 
 // 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", {
@@ -50275,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",
@@ -50286,7 +50610,7 @@ var WriteInReact = () => {
         },
         children: "Make videos programmatically."
       }),
-      /* @__PURE__ */ jsxs56("p", {
+      /* @__PURE__ */ jsxs57("p", {
         style: {
           textShadow: "0 5px 30px var(--background)"
         },
@@ -50308,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 }) => {
@@ -50317,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", {
@@ -50327,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, {