@remotion/promo-pages 4.0.495 → 4.0.497

package/dist/Homepage.js

@@ -2029,17 +2029,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -2360,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.497";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2838,6 +2827,45 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var borderSchema = {
+  "style.borderWidth": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Border width",
+    hiddenFromList: false
+  },
+  "style.borderStyle": {
+    type: "enum",
+    default: "none",
+    description: "Border style",
+    variants: {
+      none: {},
+      hidden: {},
+      solid: {},
+      dashed: {},
+      dotted: {},
+      double: {},
+      groove: {},
+      ridge: {},
+      inset: {},
+      outset: {}
+    }
+  },
+  "style.borderColor": {
+    type: "color",
+    default: undefined,
+    description: "Border color"
+  }
+};
+var backgroundSchema = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
 var textContentSchema = {
   children: {
     type: "text-content",
@@ -2865,20 +2893,13 @@ var premountSchema = {
     keyframable: false
   }
 };
-var premountStyleSchema = {
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
 var sequencePremountSchema = {
-  ...premountSchema,
-  ...premountStyleSchema
+  ...premountSchema
 };
 var sequenceStyleSchema = {
   ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema,
   ...sequencePremountSchema
 };
 var hiddenField = {
@@ -6214,38 +6235,53 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   });
 };
 var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
-var CACHE_SIZE = 5;
-var getActualTime = ({
-  loopBehavior,
-  durationFound,
-  timeInSec
-}) => {
-  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
-};
-var decodeImage = async ({
+var createImageDecoder = async ({
   resolvedSrc,
   signal,
   requestInit,
-  currentTime,
-  initialLoopBehavior
+  contentType
 }) => {
   if (typeof ImageDecoder === "undefined") {
     throw new Error("Your browser does not support the WebCodecs ImageDecoder API.");
   }
-  const res = await fetch(resolvedSrc, { ...requestInit, signal });
-  const { body } = res;
+  const response = await fetch(resolvedSrc, { ...requestInit, signal });
+  const { body } = response;
   if (!body) {
     throw new Error("Got no body");
   }
   const decoder = new ImageDecoder({
     data: body,
-    type: res.headers.get("Content-Type") || "image/gif"
+    type: contentType ?? response.headers.get("Content-Type") ?? "image/gif"
   });
-  await decoder.completed;
+  await Promise.all([decoder.completed, decoder.tracks.ready]);
   const { selectedTrack } = decoder.tracks;
   if (!selectedTrack) {
+    decoder.close();
     throw new Error("No selected track");
   }
+  return { decoder, selectedTrack };
+};
+var CACHE_SIZE = 5;
+var getActualTime = ({
+  loopBehavior,
+  durationFound,
+  timeInSec
+}) => {
+  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
+};
+var decodeImage = async ({
+  resolvedSrc,
+  signal,
+  requestInit,
+  currentTime,
+  initialLoopBehavior
+}) => {
+  const { decoder, selectedTrack } = await createImageDecoder({
+    resolvedSrc,
+    signal,
+    requestInit,
+    contentType: null
+  });
   const cache2 = [];
   let durationFound = null;
   const getFrameByIndex = async (frameIndex) => {
@@ -6351,6 +6387,13 @@ var decodeImage = async ({
     return closest;
   };
   return {
+    close: () => {
+      for (const item of cache2) {
+        item.frame?.close();
+        item.frame = null;
+      }
+      decoder.close();
+    },
     getFrame,
     frameCount: selectedTrack.frameCount
   };
@@ -6388,6 +6431,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...premountSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -6398,7 +6442,9 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var getCanvasPropsFromSequenceProps = (props) => {
   const canvasProps = {};
@@ -6450,6 +6496,15 @@ var AnimatedImageContent = forwardRef4(({
   const [initialLoopBehavior] = useState6(() => loopBehavior);
   useEffect5(() => {
     const controller = new AbortController;
+    let cancelled = false;
+    let continued = false;
+    const continueRenderOnce = () => {
+      if (continued) {
+        return;
+      }
+      continued = true;
+      continueRender2(decodeHandle);
+    };
     decodeImage({
       resolvedSrc,
       signal: controller.signal,
@@ -6457,22 +6512,31 @@ var AnimatedImageContent = forwardRef4(({
       currentTime: currentTimeRef.current,
       initialLoopBehavior
     }).then((d) => {
+      if (cancelled) {
+        d.close();
+        return;
+      }
       setImageDecoder(d);
-      continueRender2(decodeHandle);
+      continueRenderOnce();
     }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
       if (err.name === "AbortError") {
-        continueRender2(decodeHandle);
+        continueRenderOnce();
         return;
       }
       if (onError) {
         onError?.(err);
-        continueRender2(decodeHandle);
+        continueRenderOnce();
       } else {
         cancelRender(err);
       }
     });
     return () => {
+      cancelled = true;
       controller.abort();
+      continueRenderOnce();
     };
   }, [
     resolvedSrc,
@@ -6482,6 +6546,11 @@ var AnimatedImageContent = forwardRef4(({
     initialLoopBehavior,
     continueRender2
   ]);
+  useEffect5(() => {
+    return () => {
+      imageDecoder?.close();
+    };
+  }, [imageDecoder]);
   useLayoutEffect2(() => {
     if (!imageDecoder) {
       return;
@@ -6551,6 +6620,11 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   requestInit,
   effects = [],
   controls,
@@ -6562,6 +6636,24 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
   const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
@@ -6573,24 +6665,33 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style,
+    style: premountingStyle ?? undefined,
     requestInit,
     ...canvasProps
   };
-  return /* @__PURE__ */ jsx14(Sequence, {
-    layout: "none",
-    durationInFrames,
-    name: "<AnimatedImage>",
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    ...sequenceProps,
-    outlineRef: actualRef,
-    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
-      ...animatedImageProps,
-      ref: actualRef,
-      effects,
-      controls
+  return /* @__PURE__ */ jsx14(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx14(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      name: "<AnimatedImage>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
+      controls,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...sequenceProps,
+      outlineRef: actualRef,
+      children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
+        ...animatedImageProps,
+        ref: actualRef,
+        effects,
+        controls
+      })
     })
   });
 };
@@ -7306,13 +7407,17 @@ var makeSharedElementSourceNode = ({
 }) => {
   let connected = null;
   let disposed = false;
+  let currentAudioContext = audioContext;
   return {
+    setAudioContext: (newAudioContext) => {
+      currentAudioContext = newAudioContext;
+    },
     attemptToConnect: () => {
       if (disposed) {
         throw new Error("SharedElementSourceNode has been disposed");
       }
-      if (!connected && ref.current) {
-        const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
+      if (!connected && ref.current && currentAudioContext) {
+        const mediaElementSourceNode = currentAudioContext.createMediaElementSource(ref.current);
         connected = mediaElementSourceNode;
       }
     },
@@ -7640,19 +7745,22 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo22(() => {
+  const [refs] = useState10(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
         id: Math.random(),
         ref,
-        mediaElementSourceNode: audioContext ? makeSharedElementSourceNode({
+        mediaElementSourceNode: makeSharedElementSourceNode({
           audioContext,
           ref
-        }) : null
+        })
       };
     });
-  }, [audioContext, numberOfAudioTags]);
+  });
+  for (const { mediaElementSourceNode } of refs) {
+    mediaElementSourceNode?.setAudioContext(audioContext);
+  }
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
@@ -7720,7 +7828,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
-      throw new TypeError("Error occured in ");
+      throw new TypeError(`Unknown audio ref ${id}; refs: ${refs.map((r) => r.id).join(", ")}`);
     }
     cloned[index] = false;
     takenAudios.current = cloned;
@@ -7824,10 +7932,10 @@ var useSharedAudio = ({
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React20.createRef();
-    const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
-      audioContext: audioCtx.audioContext,
+    const mediaElementSourceNode = makeSharedElementSourceNode({
+      audioContext: audioCtx?.audioContext ?? null,
       ref: el
-    }) : null;
+    });
     return {
       el,
       id: Math.random(),
@@ -7842,6 +7950,7 @@ var useSharedAudio = ({
       }
     };
   });
+  elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
@@ -9699,7 +9808,9 @@ var solidSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var SolidInner = ({
   color,
@@ -9943,7 +10054,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -9997,7 +10108,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -10098,6 +10209,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -10149,14 +10261,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,
@@ -10252,7 +10364,9 @@ var htmlInCanvasSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -10274,6 +10388,7 @@ function truncateSrcForLabel(src) {
 }
 var canvasImageSchema = {
   ...baseSchema,
+  ...premountSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -10284,7 +10399,9 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -10608,6 +10725,10 @@ var CanvasImageInner = forwardRef10(({
   from,
   trimBefore,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   hidden,
   name,
   showInTimeline,
@@ -10625,39 +10746,65 @@ var CanvasImageInner = forwardRef10(({
   useImperativeHandle7(ref, () => {
     return actualRef.current;
   }, []);
-  return /* @__PURE__ */ jsx26(Sequence, {
-    layout: "none",
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    showInTimeline: showInTimeline ?? true,
-    name: name ?? "<CanvasImage>",
-    _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    _remotionInternalIsMedia: { type: "image", src },
-    _remotionInternalStack: stack,
-    outlineRef: outlineRef ?? actualRef,
-    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
-      ref: actualRef,
-      src,
-      width,
-      height,
-      fit,
-      effects,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
+  return /* @__PURE__ */ jsx26(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx26(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      showInTimeline: showInTimeline ?? true,
+      name: name ?? "<CanvasImage>",
+      _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
       controls,
-      className,
-      style,
-      id,
-      onError,
-      pauseWhenLoading,
-      maxRetries,
-      delayRenderRetries,
-      delayRenderTimeoutInMilliseconds,
-      refForOutline: outlineRef ?? null,
-      ...canvasProps
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalStack: stack,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      outlineRef: outlineRef ?? actualRef,
+      children: /* @__PURE__ */ jsx26(CanvasImageContent, {
+        ref: actualRef,
+        src,
+        width,
+        height,
+        fit,
+        effects,
+        controls,
+        className,
+        style: premountingStyle ?? undefined,
+        id,
+        onError,
+        pauseWhenLoading,
+        maxRetries,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        refForOutline: outlineRef ?? null,
+        ...canvasProps
+      })
     })
   });
 });
@@ -10874,6 +11021,11 @@ var NativeImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -10881,24 +11033,51 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  return /* @__PURE__ */ jsx28(Sequence, {
-    layout: "none",
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
-    _remotionInternalIsMedia: { type: "image", src },
-    name: name ?? "<Img>",
-    controls,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    outlineRef: refForOutline,
-    children: /* @__PURE__ */ jsx28(ImgContent, {
-      src,
-      refForOutline,
-      ...props2
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
+  return /* @__PURE__ */ jsx28(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx28(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
+      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Img>",
+      controls,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      outlineRef: refForOutline,
+      children: /* @__PURE__ */ jsx28(ImgContent, {
+        src,
+        refForOutline,
+        style: premountingStyle ?? undefined,
+        ...props2
+      })
     })
   });
 };
@@ -10911,7 +11090,10 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
-  ...transformSchema
+  ...premountSchema,
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -10967,6 +11149,10 @@ var ImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   width,
   height,
@@ -10993,6 +11179,10 @@ var ImgInner = ({
       trimBefore,
       durationInFrames,
       freeze,
+      premountFor,
+      postmountFor,
+      styleWhilePremounted,
+      styleWhilePostmounted,
       controls,
       width,
       height,
@@ -11036,6 +11226,10 @@ var ImgInner = ({
     trimBefore,
     durationInFrames,
     freeze,
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -11074,7 +11268,20 @@ var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema
 };
+var interactiveBackgroundElementSchema = {
+  ...interactiveElementSchema,
+  ...backgroundSchema
+};
+var interactiveBorderElementSchema = {
+  ...interactiveBackgroundElementSchema,
+  ...borderSchema
+};
 var interactiveTextElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...textSchema,
+  ...textContentSchema
+};
+var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
@@ -11153,6 +11360,8 @@ var Interactive = {
   baseSchema,
   transformSchema,
   textSchema,
+  backgroundSchema,
+  borderSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -11189,10 +11398,39 @@ var Interactive = {
   Small: makeInteractiveTextElement("small", "<Interactive.Small>"),
   Span: makeInteractiveTextElement("span", "<Interactive.Span>"),
   Strong: makeInteractiveTextElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveNonTextElement("svg", "<Interactive.Svg>"),
-  Text: makeInteractiveTextElement("text", "<Interactive.Text>"),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveBorderElementSchema),
+  Text: makeInteractiveElement("text", "<Interactive.Text>", interactiveSvgTextElementSchema),
   Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
+var getAnimatedImageDurationInSeconds = async ({
+  resolvedSrc,
+  signal,
+  requestInit,
+  contentType
+}) => {
+  const { decoder, selectedTrack } = await createImageDecoder({
+    resolvedSrc,
+    signal,
+    requestInit,
+    contentType
+  });
+  try {
+    const { image } = await decoder.decode({
+      frameIndex: selectedTrack.frameCount - 1,
+      completeFramesOnly: true
+    });
+    try {
+      if (image.duration === null) {
+        throw new Error("Could not determine animated image duration");
+      }
+      return (image.timestamp + image.duration) / 1e6;
+    } finally {
+      image.close();
+    }
+  } finally {
+    decoder.close();
+  }
+};
 var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -12420,6 +12658,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAnimatedImageDurationInSeconds,
   getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
@@ -12444,7 +12683,6 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
-  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12583,6 +12821,7 @@ var seriesSequenceSchema = {
   hidden: Interactive.sequenceSchema.hidden,
   showInTimeline: Interactive.sequenceSchema.showInTimeline,
   freeze: Interactive.baseSchema.freeze,
+  trimBefore: Interactive.sequenceSchema.trimBefore,
   layout: Interactive.sequenceSchema.layout
 };
 var SeriesSequenceInner = forwardRef14(({
@@ -18204,7 +18443,9 @@ var makeShapeSchema = (shapeFields) => {
       defaultValue: "#0b84ff",
       description: "Fill"
     }),
-    ...Internals.transformSchema
+    ...Internals.transformSchema,
+    ...Interactive.backgroundSchema,
+    ...Interactive.borderSchema
   };
 };
 var arrowSchema = makeShapeSchema({
@@ -30960,6 +31201,45 @@ var transformSchema2 = {
     hiddenFromList: false
   }
 };
+var borderSchema2 = {
+  "style.borderWidth": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Border width",
+    hiddenFromList: false
+  },
+  "style.borderStyle": {
+    type: "enum",
+    default: "none",
+    description: "Border style",
+    variants: {
+      none: {},
+      hidden: {},
+      solid: {},
+      dashed: {},
+      dotted: {},
+      double: {},
+      groove: {},
+      ridge: {},
+      inset: {},
+      outset: {}
+    }
+  },
+  "style.borderColor": {
+    type: "color",
+    default: undefined,
+    description: "Border color"
+  }
+};
+var backgroundSchema2 = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
 var premountSchema2 = {
   premountFor: {
     type: "number",
@@ -30979,20 +31259,13 @@ var premountSchema2 = {
     keyframable: false
   }
 };
-var premountStyleSchema2 = {
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
 var sequencePremountSchema2 = {
-  ...premountSchema2,
-  ...premountStyleSchema2
+  ...premountSchema2
 };
 var sequenceStyleSchema2 = {
   ...transformSchema2,
+  ...backgroundSchema2,
+  ...borderSchema2,
   ...sequencePremountSchema2
 };
 var hiddenField2 = {
@@ -36552,6 +36825,10 @@ async function* makeLoopingIterator({
     passStartInSeconds = loopStartInSeconds;
   }
 }
+var MINIMUM_AUDIO_BUFFERING_TIME_SECONDS = 0.1;
+var hasEnoughAudioToStartPlayback = (bufferedDuration) => {
+  return bufferedDuration >= MINIMUM_AUDIO_BUFFERING_TIME_SECONDS;
+};
 var anchorToContinuousTime = ({
   anchor,
   unloopedTimeInSeconds,
@@ -36734,7 +37011,7 @@ var audioIteratorManager = ({
           onDone();
           return;
         }
-        onScheduled(result.value.timelineTimestamp);
+        onScheduled(result.value.sourceDurationInSeconds);
         notifyNodeScheduled();
         onAudioChunk({
           buffer: result.value,
@@ -36816,24 +37093,32 @@ var audioIteratorManager = ({
     });
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
-    let chunksScheduled = 0;
+    let bufferedDuration = 0;
+    let hasUnblockedPlayback = false;
+    const unblockPlayback = () => {
+      if (hasUnblockedPlayback) {
+        return;
+      }
+      hasUnblockedPlayback = true;
+      delayHandle.unblock();
+    };
     proceedScheduling({
       iterator,
       nonce,
       getTargetTime,
       playbackRate,
       scheduleAudioNode,
-      onScheduled: () => {
-        chunksScheduled++;
-        if (chunksScheduled === 6) {
-          delayHandle.unblock();
+      onScheduled: (sourceDurationInSeconds) => {
+        bufferedDuration += sourceDurationInSeconds;
+        if (hasEnoughAudioToStartPlayback(bufferedDuration)) {
+          unblockPlayback();
         }
       },
       onDestroyed: () => {
-        delayHandle.unblock();
+        unblockPlayback();
       },
       onDone: () => {
-        delayHandle.unblock();
+        unblockPlayback();
       },
       logLevel,
       currentTime: sharedAudioContext.audioContext.currentTime,
@@ -40703,7 +40988,7 @@ var AudioForRendering2 = ({
     throw new TypeError("No `src` was passed to <Audio>.");
   }
   const { fps } = videoConfig;
-  const { delayRender: delayRender2, continueRender } = useDelayRender();
+  const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
   const [initialRequestInit] = useState210(requestInit);
   const sequenceContext = useContext312(Internals.SequenceContext);
@@ -40733,7 +41018,7 @@ var AudioForRendering2 = ({
     if (replaceWithHtml5Audio) {
       return;
     }
-    const newHandle = delayRender2(`Extracting audio for frame ${frame}`, {
+    const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -40825,7 +41110,7 @@ var AudioForRendering2 = ({
   }, [
     absoluteFrame,
     continueRender,
-    delayRender2,
+    delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     disallowFallbackToHtml5Audio,
@@ -41532,7 +41817,7 @@ var VideoForRendering2 = ({
     sequenceContext?.durationInFrames
   ]);
   const environment = useRemotionEnvironment();
-  const { delayRender: delayRender2, continueRender, cancelRender: cancelRender3 } = useDelayRender();
+  const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender();
   const canvasRef = useRef312(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState53(false);
   const [initialRequestInit] = useState53(requestInit);
@@ -41556,7 +41841,7 @@ var VideoForRendering2 = ({
     }
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
-    const newHandle = delayRender2(`Extracting frame at time ${timestamp} from ${src}`, {
+    const newHandle = delayRender(`Extracting frame at time ${timestamp} from ${src}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -41708,7 +41993,7 @@ var VideoForRendering2 = ({
   }, [
     absoluteFrame,
     continueRender,
-    delayRender2,
+    delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     environment.isClientSideRendering,
@@ -41827,7 +42112,6 @@ var videoSchema = {
   },
   ...Internals.baseSchema,
   ...Internals.premountSchema,
-  ...Internals.premountStyleSchema,
   volume: {
     type: "number",
     min: 0,
@@ -41848,7 +42132,9 @@ var videoSchema = {
   },
   muted: { type: "boolean", default: false, description: "Muted" },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals.transformSchema
+  ...Internals.transformSchema,
+  ...Interactive.backgroundSchema,
+  ...Interactive.borderSchema
 };
 var InnerVideo = ({
   src,
@@ -42601,8 +42887,8 @@ var Lottie = ({
   const containerRef = useRef53(null);
   const onAnimationLoadedRef = useRef53(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
-  const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
+  const { delayRender, continueRender } = useDelayRender();
+  const [handle] = useState44(() => delayRender("Waiting for Lottie animation to load"));
   useEffect45(() => {
     return () => {
       continueRender(handle);
@@ -42683,13 +42969,13 @@ var Lottie = ({
       if (currentHref && currentHref === img.href.baseVal) {
         return;
       }
-      const imgHandle = delayRender2(`Waiting for lottie image with src="${img.href.baseVal}" to load`);
+      const imgHandle = delayRender(`Waiting for lottie image with src="${img.href.baseVal}" to load`);
       img.addEventListener("load", () => {
         continueRender(imgHandle);
       }, { once: true });
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
-  }, [direction, frame, loop, playbackRate, delayRender2, continueRender]);
+  }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
   return /* @__PURE__ */ jsx70("div", {
     ref: containerRef,
     className: className2,
@@ -42704,7 +42990,7 @@ var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
-  const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const { isRendering } = useRemotionEnvironment();
   const src = useMemo60(() => {
     if (emoji === "melting") {
@@ -42718,7 +43004,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState46(() => delayRender2("Loading emojis!"));
+  const [handle] = useState46(() => delayRender("Loading emojis!"));
   useEffect46(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
@@ -43451,7 +43737,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.495";
+var VERSION2 = "4.0.497";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -44344,6 +44630,7 @@ function createScaffold({
   wrapper.style.inset = "0";
   wrapper.style.overflow = "hidden";
   wrapper.style.visibility = "hidden";
+  wrapper.style.filter = "opacity(0)";
   wrapper.style.pointerEvents = "none";
   wrapper.style.zIndex = "-9999";
   const div = document.createElement("div");
@@ -44361,6 +44648,14 @@ function createScaffold({
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
   const htmlInCanvasContext = useHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
+  const updateFallbackScaffoldVisibility = () => {
+    if (htmlInCanvasContext) {
+      return;
+    }
+    div.style.visibility = containsLayoutSubtreeCanvas(div) ? "visible" : "";
+  };
+  const fallbackScaffoldObserver = htmlInCanvasContext ? null : new MutationObserver(updateFallbackScaffoldVisibility);
+  fallbackScaffoldObserver?.observe(div, { childList: true, subtree: true });
   const errorHolder = { error: null };
   const root = ReactDOM6.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -44451,12 +44746,14 @@ function createScaffold({
       })
     }));
   });
+  updateFallbackScaffoldVisibility();
   return {
     delayRenderScope,
     div,
     errorHolder,
     htmlInCanvasContext,
     [Symbol.dispose]: () => {
+      fallbackScaffoldObserver?.disconnect();
       root.unmount();
       if (htmlInCanvasContext) {
         teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });
@@ -45073,6 +45370,67 @@ var hasScaleCssValue = (style2) => {
 var hasAnyTransformCssValue = (style2) => {
   return hasTransformCssValue(style2) || hasRotateCssValue(style2) || hasScaleCssValue(style2);
 };
+var parseScaleComponent = (component) => {
+  if (component.endsWith("%")) {
+    return Number(component.slice(0, -1)) / 100;
+  }
+  return Number(component);
+};
+var parseScale = (transform) => {
+  const match = /^scale\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const scaleValue = match[1].trim();
+  if (scaleValue === "") {
+    return null;
+  }
+  const components = scaleValue.split(/\s+/).map(parseScaleComponent);
+  if (components.length < 1 || components.length > 3 || components.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return {
+    x: components[0],
+    y: components[1] ?? components[0],
+    z: components[2] ?? 1
+  };
+};
+var parseAxisRotate = (transform) => {
+  const match = /^rotate\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const rotateValue = match[1].trim();
+  const keywordAxis = /^(x|y|z)\s+(.+)$/i.exec(rotateValue);
+  if (keywordAxis) {
+    const axisKeyword = keywordAxis[1].toLowerCase();
+    const angle = keywordAxis[2];
+    const rotateFunction = axisKeyword === "x" ? "rotateX" : axisKeyword === "y" ? "rotateY" : "rotate";
+    return `${rotateFunction}(${angle})`;
+  }
+  const vectorAxis = /^(\S+)\s+(\S+)\s+(\S+)\s+(.+)$/.exec(rotateValue);
+  if (!vectorAxis) {
+    return null;
+  }
+  const axisVector = vectorAxis.slice(1, 4).map(Number);
+  if (axisVector.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return `rotate3d(${axisVector.join(", ")}, ${vectorAxis[4]})`;
+};
+var makeDOMMatrix = (transform) => {
+  if (transform) {
+    const scale = parseScale(transform);
+    if (scale) {
+      return new DOMMatrix().scale(scale.x, scale.y, scale.z);
+    }
+    const axisRotate = parseAxisRotate(transform);
+    if (axisRotate) {
+      return new DOMMatrix(axisRotate);
+    }
+  }
+  return new DOMMatrix(transform);
+};
 var isValidColor = (color) => {
   try {
     const result = NoReactInternals.processColor(color);
@@ -45470,15 +45828,15 @@ var calculateTransforms = ({
     const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
       const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
-      const matrix = new DOMMatrix(toParse);
+      const matrix = makeDOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate: rotate2 } = parent.style;
       const additionalMatrices = [];
       if (hasApplicableTransformCssValue && rotate2 !== "" && rotate2 !== "none") {
-        additionalMatrices.push(new DOMMatrix(`rotate(${rotate2})`));
+        additionalMatrices.push(makeDOMMatrix(`rotate(${rotate2})`));
       }
       if (hasApplicableTransformCssValue && scale !== "" && scale !== "none") {
-        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+        additionalMatrices.push(makeDOMMatrix(`scale(${scale})`));
       }
       additionalMatrices.push(matrix);
       const cleanup = resetTransforms(hasApplicableTransformCssValue);