@remotion/promo-pages 4.0.494 → 4.0.496

package/dist/Homepage.js

@@ -911,7 +911,7 @@ var experts = [
   }
 ];
 // src/components/experts/ExpertsPage.tsx
-import { useMemo as useMemo40 } from "react";
+import { useMemo as useMemo41 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
@@ -945,9 +945,9 @@ import React9 from "react";
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
-  useContext as useContext17,
+  useContext as useContext18,
   useEffect as useEffect3,
-  useMemo as useMemo14,
+  useMemo as useMemo15,
   useRef as useRef6,
   useState as useState5
 } from "react";
@@ -966,13 +966,14 @@ import { useContext as useContext11 } from "react";
 import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
-import { createContext as createContext14 } from "react";
 import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-import React13, { createContext as createContext15 } from "react";
+import React13, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import React14, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
-import { useContext as useContext15, useRef as useRef5 } from "react";
+import { useContext as useContext15, useMemo as useMemo13 } from "react";
+import { createContext as createContext15 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
+import { useContext as useContext16, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
@@ -983,70 +984,70 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
-import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo17, useRef as useRef8 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo16, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
-import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 import {
   createContext as createContext17,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useRef as useRef10,
   useState as useState7
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
-import React17, { createContext as createContext18, useMemo as useMemo18 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext31 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { useContext as useContext19 } from "react";
+import { useContext as useContext20 } from "react";
 import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback13 } from "react";
 import React23, {
   forwardRef as forwardRef5,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo27,
+  useMemo as useMemo28,
   useRef as useRef19,
   useState as useState14
 } from "react";
-import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
 import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
-  useContext as useContext20,
+  useContext as useContext21,
   useEffect as useEffect7,
-  useMemo as useMemo21,
+  useMemo as useMemo22,
   useRef as useRef12,
   useState as useState10
 } from "react";
-import { useMemo as useMemo20, useRef as useRef11 } from "react";
+import { useMemo as useMemo21, useRef as useRef11 } from "react";
 import { jsx as jsx19, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef13 } from "react";
-import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo22, useState as useState11 } from "react";
-import { useContext as useContext22 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState11 } from "react";
+import { useContext as useContext23 } from "react";
 import {
   useCallback as useCallback12,
-  useContext as useContext26,
+  useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
-import { useContext as useContext25, useMemo as useMemo24 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef16 } from "react";
+import { useContext as useContext26, useMemo as useMemo25 } from "react";
 import React21, {
   useCallback as useCallback10,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useRef as useRef15,
   useState as useState12
 } from "react";
@@ -1055,15 +1056,15 @@ import React22 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext22, useContext as useContext27, useMemo as useMemo26 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef6,
-  useContext as useContext29,
+  useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef20
 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
@@ -1073,7 +1074,7 @@ import {
   useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useRef as useRef21,
   useState as useState15
 } from "react";
@@ -1082,19 +1083,19 @@ import {
   createContext as createContext23,
   forwardRef as forwardRef9,
   useCallback as useCallback16,
-  useContext as useContext31,
+  useContext as useContext32,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef22
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
-  useContext as useContext32,
+  useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef23,
   useState as useState16
 } from "react";
@@ -1103,7 +1104,7 @@ import { forwardRef as forwardRef11, useCallback as useCallback18, useState as u
 import { jsx as jsx27 } from "react/jsx-runtime";
 import {
   useCallback as useCallback19,
-  useContext as useContext33,
+  useContext as useContext34,
   useLayoutEffect as useLayoutEffect11,
   useRef as useRef24,
   useState as useState18
@@ -1116,59 +1117,59 @@ import React31 from "react";
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React32 from "react";
-import { useMemo as useMemo34 } from "react";
-import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
+import { useMemo as useMemo35 } from "react";
+import { createContext as createContext24, useContext as useContext35, useMemo as useMemo34 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import React34 from "react";
 import React35, { createContext as createContext25 } from "react";
-import React36, { useContext as useContext35 } from "react";
+import React36, { useContext as useContext36 } from "react";
 import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
-  useContext as useContext36,
+  useContext as useContext37,
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import React38, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
-  useContext as useContext37,
+  useContext as useContext38,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useRef as useRef27,
   useState as useState21
 } from "react";
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
-import React40, { useMemo as useMemo37 } from "react";
+import React40, { useMemo as useMemo38 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import React42, {
   forwardRef as forwardRef14,
-  useMemo as useMemo38
+  useMemo as useMemo39
 } from "react";
 import React41 from "react";
 import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 import React43 from "react";
-import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext40 } from "react";
 import {
   forwardRef as forwardRef15,
-  useContext as useContext38,
+  useContext as useContext39,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo39,
+  useMemo as useMemo40,
   useRef as useRef28
 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -2028,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,
@@ -2359,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.494";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2852,15 +2842,19 @@ var premountSchema = {
     description: "Premount For",
     min: 0,
     step: 1,
-    hiddenFromList: false
+    hiddenFromList: false,
+    keyframable: false
   },
   postmountFor: {
     type: "number",
     default: 0,
     min: 0,
     step: 1,
-    hiddenFromList: true
-  },
+    hiddenFromList: true,
+    keyframable: false
+  }
+};
+var premountStyleSchema = {
   styleWhilePremounted: {
     type: "hidden"
   },
@@ -2868,10 +2862,13 @@ var premountSchema = {
     type: "hidden"
   }
 };
-var sequencePremountSchema = premountSchema;
+var sequencePremountSchema = {
+  ...premountSchema,
+  ...premountStyleSchema
+};
 var sequenceStyleSchema = {
   ...transformSchema,
-  ...premountSchema
+  ...sequencePremountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -2956,9 +2953,6 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -3138,7 +3132,7 @@ var SequenceManagerProvider = ({ children }) => {
     })
   });
 };
-var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContext = createContext14(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: true,
@@ -3157,7 +3151,61 @@ var useRequireToBeInsideSeries = () => {
     throw new Error("This component must be inside a <Series /> component.");
   }
 };
+var PremountContext = createContext15({
+  premountFramesRemaining: 0
+});
 var ENABLE_V5_BREAKING_CHANGES = false;
+var usePremounting = ({
+  from,
+  durationInFrames,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  hideWhilePremounted
+}) => {
+  const parentPremountContext = useContext15(PremountContext);
+  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
+  const environment = useRemotionEnvironment();
+  const { fps } = useVideoConfig();
+  const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? premountFor ?? fps : premountFor ?? 0;
+  const effectivePostmountFor = postmountFor ?? 0;
+  const endThreshold = Math.ceil(from + durationInFrames - 1);
+  const premountingActive = !environment.isRendering && frame < from && frame >= from - effectivePremountFor;
+  const postmountingActive = !environment.isRendering && frame > endThreshold && frame <= endThreshold + effectivePostmountFor;
+  const isPremountingOrPostmounting = premountingActive || postmountingActive;
+  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
+  const premountingStyle = useMemo13(() => {
+    if (!isPremountingOrPostmounting) {
+      return style;
+    }
+    return {
+      ...style,
+      ...hideWhilePremounted === "opacity" ? { opacity: 0 } : { display: "none" },
+      pointerEvents: "none",
+      ...premountingActive ? styleWhilePremounted : {},
+      ...postmountingActive ? styleWhilePostmounted : {}
+    };
+  }, [
+    isPremountingOrPostmounting,
+    hideWhilePremounted,
+    postmountingActive,
+    premountingActive,
+    style,
+    styleWhilePostmounted,
+    styleWhilePremounted
+  ]);
+  return {
+    effectivePremountFor,
+    effectivePostmountFor,
+    premountingActive,
+    postmountingActive,
+    isPremountingOrPostmounting,
+    freezeFrame,
+    premountingStyle
+  };
+};
 var deleteNestedKey = (obj, keysToRemove) => {
   for (const key of keysToRemove) {
     const parts = key.split(".");
@@ -4981,10 +5029,10 @@ var useMemoizedEffects = ({
   overrideId
 }) => {
   const previousRef = useRef5(null);
-  const { propStatuses } = useContext15(VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const { propStatuses } = useContext16(VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext16(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
-  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
+  const { overrideIdToNodePathMappings } = useContext16(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const resolved = effects.map((descriptor, index) => {
@@ -5328,9 +5376,9 @@ var withInteractivitySchema = ({
         ref
       });
     }
-    const { propStatuses } = useContext16(VisualModePropStatusesContext);
-    const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = useContext17(VisualModePropStatusesContext);
+    const { getDragOverrides } = useContext17(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext17(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props.controls) {
       return React14.createElement(Component, {
@@ -5357,8 +5405,8 @@ var withInteractivitySchema = ({
       key,
       props
     }));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
-    const controls = useMemo13(() => {
+    const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
+    const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -5368,7 +5416,7 @@ var withInteractivitySchema = ({
         componentName
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -5426,7 +5474,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext17(SequenceContext);
+  const parentSequence = useContext18(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -5477,13 +5525,13 @@ var RegularSequenceRefForwardingFunction = ({
   const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
   const wrapperRefForOutline = useRef6(null);
   const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
-  const premounting = useMemo14(() => {
+  const premounting = useMemo15(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo14(() => {
+  const postmounting = useMemo15(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
@@ -5491,7 +5539,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
   const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
-  const contextValue = useMemo14(() => {
+  const contextValue = useMemo15(() => {
     return {
       absoluteFrom,
       cumulatedFrom,
@@ -5522,12 +5570,12 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const timelineClipName = useMemo14(() => {
+  const timelineClipName = useMemo15(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
-  const isInsideSeries = useContext17(IsInsideSeriesContext);
+  const isInsideSeries = useContext18(IsInsideSeriesContext);
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
@@ -5675,7 +5723,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo14(() => {
+  const defaultStyle = useMemo15(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -5701,8 +5749,6 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext17(PremountContext);
-  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
   }
@@ -5716,34 +5762,30 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePostmounted,
     ...otherProps
   } = props;
-  const endThreshold = Math.ceil(from + durationInFrames - 1);
-  const premountingActive = frame < from && frame >= from - premountFor;
-  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
-  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo14(() => {
-    return {
-      ...passedStyle,
-      opacity: premountingActive || postmountingActive ? 0 : passedStyle?.opacity,
-      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
-      ...premountingActive ? styleWhilePremounted : {},
-      ...postmountingActive ? styleWhilePostmounted : {}
-    };
-  }, [
-    passedStyle,
-    premountingActive,
+  const {
+    freezeFrame,
+    isPremountingOrPostmounting,
     postmountingActive,
-    styleWhilePremounted,
-    styleWhilePostmounted
-  ]);
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
+    from,
+    durationInFrames,
+    premountFor,
+    postmountFor,
+    style: passedStyle ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
   return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
-    active: isFreezingActive,
+    active: isPremountingOrPostmounting,
     children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
-      style,
+      style: premountingStyle ?? undefined,
       _remotionInternalPremountDisplay: premountFor,
       _remotionInternalPostmountDisplay: postmountFor,
       _remotionInternalIsPremounting: premountingActive,
@@ -6079,7 +6121,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo15(() => ({
+  return useMemo16(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -6095,7 +6137,7 @@ var useEffectChainState = () => {
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo16(() => {
+  const sourceCanvas = useMemo17(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -6652,7 +6694,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo17(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -6666,7 +6708,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext18(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext19(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState8(() => {
@@ -6781,14 +6823,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo18(() => {
+  const loopDisplay = useMemo19(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo18(() => {
+  const loopContext = useMemo19(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -6857,7 +6899,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext19(PreloadContext);
+  const preloads2 = useContext20(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -7160,7 +7202,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo19(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -7299,7 +7341,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo20(() => {
+  const context = useMemo21(() => {
     if (env.isRendering) {
       return null;
     }
@@ -7433,9 +7475,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   });
   const audioContextIsPlayingEventually = useRef12(false);
   const isResuming = useRef12(null);
-  const audioSyncAnchor = useMemo21(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef12([]);
-  const audioSyncAnchorEmitter = useMemo21(() => {
+  const audioSyncAnchorEmitter = useMemo22(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -7455,7 +7497,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo21(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -7547,7 +7589,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     audioContextIsPlayingEventually.current = false;
     return ctxAndGain.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo21(() => {
+  const audioContextValue = useMemo22(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       getAudioContextState: () => ctxAndGain?.getState() ?? null,
@@ -7584,10 +7626,10 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext20(SharedAudioContext);
+  const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo21(() => {
+  const refs = useMemo22(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -7726,7 +7768,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo21(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -7741,7 +7783,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo21(() => {
+  const sharedAudioTagElements = useMemo22(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -7764,8 +7806,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext20(SharedAudioContext);
-  const tagsCtx = useContext20(SharedAudioTagsContext);
+  const audioCtx = useContext21(SharedAudioContext);
+  const tagsCtx = useContext21(SharedAudioTagsContext);
   const [elem] = useState10(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -7944,7 +7986,7 @@ var useVolume = ({
   const audioStuffRef = useRef14(null);
   const currentVolumeRef = useRef14(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext21(SharedAudioContext);
+  const sharedAudioContext = useContext22(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -8009,7 +8051,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
@@ -8098,7 +8140,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const [initialVolume] = useState11(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -8108,7 +8150,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo22(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -8129,7 +8171,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo22(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -8170,9 +8212,9 @@ var useMediaInTimeline = ({
   documentationLink,
   refForOutline
 }) => {
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -8337,13 +8379,13 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo23(() => {
+  return useMemo24(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
 var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext24(LogLevelContext);
+  const { logLevel, mountTime } = useContext25(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx20(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -8369,10 +8411,10 @@ var useIsPlayerBuffering = (bufferManager) => {
   return isBuffering;
 };
 var useBufferState = () => {
-  const buffer = useContext25(BufferingContextReact);
+  const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo24(() => ({
+  return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -8480,7 +8522,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo25(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -8854,7 +8896,7 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext26(BufferingContextReact);
+  const buffering = useContext27(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef18(null);
@@ -9149,16 +9191,16 @@ var SetMediaVolumeContext = createContext22({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext27(MediaVolumeContext);
-  const { setMediaVolume } = useContext27(SetMediaVolumeContext);
-  return useMemo26(() => {
+  const { mediaVolume } = useContext28(MediaVolumeContext);
+  const { setMediaVolume } = useContext28(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
-  const { playerMuted } = useContext27(MediaVolumeContext);
-  const { setPlayerMuted } = useContext27(SetMediaVolumeContext);
-  return useMemo26(() => {
+  const { playerMuted } = useContext28(MediaVolumeContext);
+  const { setPlayerMuted } = useContext28(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -9212,7 +9254,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -9225,7 +9267,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo27(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -9242,7 +9284,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo27(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9372,10 +9414,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext29(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const sequenceContext = useContext30(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo28(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9482,7 +9524,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const audioTagsContext = useContext31(SharedAudioTagsContext);
   const propsWithFreeze = props;
   const {
     startFrom,
@@ -9506,7 +9548,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (typeof freeze !== "undefined") {
     throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
   }
-  const { durations, setDurations } = useContext30(DurationsContext);
+  const { durations, setDurations } = useContext31(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -9668,7 +9710,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo29(() => {
+  const sourceCanvas = useMemo30(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9736,7 +9778,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo29(() => {
+  const canvasStyle = useMemo30(() => {
     return {
       width,
       height,
@@ -9885,12 +9927,12 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const ancestor = useContext31(HtmlInCanvasAncestorContext);
+  const ancestor = useContext32(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 { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -9944,7 +9986,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) {
@@ -10045,6 +10087,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -10096,28 +10139,28 @@ 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]);
-  const innerStyle = useMemo30(() => {
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
+  const innerStyle = useMemo31(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo30(() => {
+  const canvasStyle = useMemo31(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  const ancestorValue = useMemo30(() => {
+  const ancestorValue = useMemo31(() => {
     return {
       requestParentPaint: () => {
         canvas2dRef.current?.requestPaint?.();
@@ -10331,7 +10374,7 @@ var CanvasImageContent = forwardRef10(({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const sequenceContext = useContext32(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const pendingLoadDelayRef = useRef23(null);
   const [isLoadPending, setIsLoadPending] = useState16(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
@@ -10348,7 +10391,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo31(() => {
+  const sourceCanvas = useMemo32(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10670,7 +10713,7 @@ var ImgContent = ({
   const imageRef = useRef24(null);
   const errors = useRef24({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const [isLoading, setIsLoading] = useState18(false);
   const _propsValid = true;
   if (!_propsValid) {
@@ -11019,7 +11062,10 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema,
+  ...transformSchema
+};
+var interactiveTextElementSchema = {
+  ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
 };
@@ -11035,7 +11081,7 @@ var withSchema = (options) => {
   addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
-var makeInteractiveElement = (tag, displayName) => {
+var makeInteractiveElement = (tag, displayName, schema) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
       durationInFrames,
@@ -11081,12 +11127,18 @@ var makeInteractiveElement = (tag, displayName) => {
       packageName: "remotion",
       componentName: displayName.slice(1, -1)
     }),
-    schema: interactiveElementSchema,
+    schema,
     supportsEffects: false
   });
   Wrapped.displayName = displayName;
   return Wrapped;
 };
+var makeInteractiveTextElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
+};
+var makeInteractiveNonTextElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+};
 var Interactive = {
   baseSchema,
   transformSchema,
@@ -11095,41 +11147,41 @@ var Interactive = {
   sequenceSchema,
   withSchema,
   _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
-  A: makeInteractiveElement("a", "<Interactive.A>"),
-  Article: makeInteractiveElement("article", "<Interactive.Article>"),
-  Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
-  Button: makeInteractiveElement("button", "<Interactive.Button>"),
-  Circle: makeInteractiveElement("circle", "<Interactive.Circle>"),
-  Code: makeInteractiveElement("code", "<Interactive.Code>"),
-  Div: makeInteractiveElement("div", "<Interactive.Div>"),
-  Ellipse: makeInteractiveElement("ellipse", "<Interactive.Ellipse>"),
-  Em: makeInteractiveElement("em", "<Interactive.Em>"),
-  Footer: makeInteractiveElement("footer", "<Interactive.Footer>"),
-  G: makeInteractiveElement("g", "<Interactive.G>"),
-  H1: makeInteractiveElement("h1", "<Interactive.H1>"),
-  H2: makeInteractiveElement("h2", "<Interactive.H2>"),
-  H3: makeInteractiveElement("h3", "<Interactive.H3>"),
-  H4: makeInteractiveElement("h4", "<Interactive.H4>"),
-  H5: makeInteractiveElement("h5", "<Interactive.H5>"),
-  H6: makeInteractiveElement("h6", "<Interactive.H6>"),
-  Header: makeInteractiveElement("header", "<Interactive.Header>"),
-  Label: makeInteractiveElement("label", "<Interactive.Label>"),
-  Li: makeInteractiveElement("li", "<Interactive.Li>"),
-  Line: makeInteractiveElement("line", "<Interactive.Line>"),
-  Main: makeInteractiveElement("main", "<Interactive.Main>"),
-  Nav: makeInteractiveElement("nav", "<Interactive.Nav>"),
-  Ol: makeInteractiveElement("ol", "<Interactive.Ol>"),
-  P: makeInteractiveElement("p", "<Interactive.P>"),
-  Path: makeInteractiveElement("path", "<Interactive.Path>"),
-  Pre: makeInteractiveElement("pre", "<Interactive.Pre>"),
-  Rect: makeInteractiveElement("rect", "<Interactive.Rect>"),
-  Section: makeInteractiveElement("section", "<Interactive.Section>"),
-  Small: makeInteractiveElement("small", "<Interactive.Small>"),
-  Span: makeInteractiveElement("span", "<Interactive.Span>"),
-  Strong: makeInteractiveElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveElement("svg", "<Interactive.Svg>"),
-  Text: makeInteractiveElement("text", "<Interactive.Text>"),
-  Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
+  A: makeInteractiveTextElement("a", "<Interactive.A>"),
+  Article: makeInteractiveTextElement("article", "<Interactive.Article>"),
+  Aside: makeInteractiveTextElement("aside", "<Interactive.Aside>"),
+  Button: makeInteractiveTextElement("button", "<Interactive.Button>"),
+  Circle: makeInteractiveNonTextElement("circle", "<Interactive.Circle>"),
+  Code: makeInteractiveTextElement("code", "<Interactive.Code>"),
+  Div: makeInteractiveTextElement("div", "<Interactive.Div>"),
+  Ellipse: makeInteractiveNonTextElement("ellipse", "<Interactive.Ellipse>"),
+  Em: makeInteractiveTextElement("em", "<Interactive.Em>"),
+  Footer: makeInteractiveTextElement("footer", "<Interactive.Footer>"),
+  G: makeInteractiveNonTextElement("g", "<Interactive.G>"),
+  H1: makeInteractiveTextElement("h1", "<Interactive.H1>"),
+  H2: makeInteractiveTextElement("h2", "<Interactive.H2>"),
+  H3: makeInteractiveTextElement("h3", "<Interactive.H3>"),
+  H4: makeInteractiveTextElement("h4", "<Interactive.H4>"),
+  H5: makeInteractiveTextElement("h5", "<Interactive.H5>"),
+  H6: makeInteractiveTextElement("h6", "<Interactive.H6>"),
+  Header: makeInteractiveTextElement("header", "<Interactive.Header>"),
+  Label: makeInteractiveTextElement("label", "<Interactive.Label>"),
+  Li: makeInteractiveTextElement("li", "<Interactive.Li>"),
+  Line: makeInteractiveNonTextElement("line", "<Interactive.Line>"),
+  Main: makeInteractiveTextElement("main", "<Interactive.Main>"),
+  Nav: makeInteractiveTextElement("nav", "<Interactive.Nav>"),
+  Ol: makeInteractiveTextElement("ol", "<Interactive.Ol>"),
+  P: makeInteractiveTextElement("p", "<Interactive.P>"),
+  Path: makeInteractiveNonTextElement("path", "<Interactive.Path>"),
+  Pre: makeInteractiveTextElement("pre", "<Interactive.Pre>"),
+  Rect: makeInteractiveNonTextElement("rect", "<Interactive.Rect>"),
+  Section: makeInteractiveTextElement("section", "<Interactive.Section>"),
+  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>"),
+  Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
 var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
@@ -11186,7 +11238,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo32(() => {
+  const compositionManagerSetters = useMemo33(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -11202,7 +11254,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo32(() => {
+  const compositionManagerContextValue = useMemo33(() => {
     return {
       compositions,
       folders,
@@ -11300,7 +11352,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -11310,7 +11362,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -11324,7 +11376,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
@@ -11340,13 +11392,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo34(() => {
+  const nonceContext = useMemo35(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo34(() => {
+  const logging = useMemo35(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
@@ -11647,13 +11699,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext36(SequenceContext);
+  const sequenceContext = useContext37(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext37(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo35(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -11708,14 +11760,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo35(() => {
+  const currentTime = useMemo36(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo35(() => {
+  const actualSrc = useMemo36(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -11803,7 +11855,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo35(() => {
+  const className = useMemo36(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback22((img) => {
@@ -11867,12 +11919,12 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext37(SharedAudioContext);
+  const context = useContext38(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef27(null);
-  const sharedSource = useMemo36(() => {
+  const sharedSource = useMemo37(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -11924,7 +11976,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext37(SequenceContext);
+  const parentSequence = useContext38(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -12075,7 +12127,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo36(() => {
+  const actualStyle = useMemo37(() => {
     return {
       ...style
     };
@@ -12271,7 +12323,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React40.useContext(BufferingContextReact);
   const logLevelContext = React40.useContext(LogLevelContext);
-  return useMemo37(() => ({
+  return useMemo38(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -12382,6 +12434,7 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
+  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12395,6 +12448,7 @@ var Internals = {
   truthy,
   SequenceContext,
   PremountContext,
+  usePremounting,
   useRemotionContexts,
   RemotionContextProvider,
   CSSUtils: exports_default_css,
@@ -12570,7 +12624,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo38(() => {
+  const childrenValue = useMemo39(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -12899,14 +12953,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef28(null);
-  const sequenceContext = useContext38(SequenceContext);
+  const sequenceContext = useContext39(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext38(RenderAssetManager);
-  const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
+  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -13117,7 +13171,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext39(DurationsContext);
+  const { durations, setDurations } = useContext40(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -13573,7 +13627,7 @@ var ExpertCard = ({ expert, Link }) => {
   });
 };
 var ExpertsPageContent = ({ Link }) => {
-  const expertsInRandomOrder = useMemo40(() => {
+  const expertsInRandomOrder = useMemo41(() => {
     if (typeof window === "undefined") {
       return [];
     }
@@ -13671,7 +13725,7 @@ var ExpertsPageContent = ({ Link }) => {
   });
 };
 // src/components/homepage/Pricing.tsx
-import { useMemo as useMemo53 } from "react";
+import { useMemo as useMemo54 } from "react";
 
 // ../design/dist/esm/index.mjs
 import * as React24 from "react";
@@ -15019,7 +15073,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo44, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -17785,7 +17839,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React3, { useCallback as useCallback26, useMemo as useMemo42, useRef as useRef29 } from "react";
+import React3, { useCallback as useCallback26, useMemo as useMemo43, useRef as useRef29 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -17967,13 +18021,13 @@ var RenderSvg = ({
   stack,
   ...props
 }) => {
-  const actualStyle = useMemo42(() => {
+  const actualStyle = useMemo43(() => {
     return {
       overflow: "visible",
       ...style ?? {}
     };
   }, [style]);
-  const actualPathStyle = useMemo42(() => {
+  const actualPathStyle = useMemo43(() => {
     return {
       transformBox: "fill-box",
       ...pathStyle ?? {}
@@ -20952,7 +21006,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo43(() => new EventTarget, []);
+  const eventTarget = useMemo44(() => new EventTarget, []);
   useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
@@ -27399,7 +27453,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React53, { useCallback as useCallback38, useMemo as useMemo52 } from "react";
+import React53, { useCallback as useCallback38, useMemo as useMemo53 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -29056,14 +29110,14 @@ var CompanyPricing = () => {
   }, []);
   const creatorsPrice = creatorsSelected ? devSeatCount * SEAT_PRICE : 0;
   const automatorsPrice = automatorsSelected ? Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE : 0;
-  const totalPrice = useMemo52(() => {
+  const totalPrice = useMemo53(() => {
     const basePrice = creatorsPrice + automatorsPrice;
     if (automatorsSelected) {
       return Math.max(100, basePrice);
     }
     return basePrice;
   }, [creatorsPrice, automatorsPrice, automatorsSelected]);
-  const totalPriceString = useMemo52(() => {
+  const totalPriceString = useMemo53(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
@@ -29293,13 +29347,13 @@ var Pricing = ({
   licenseHref = "https://github.com/remotion-dev/remotion/blob/main/LICENSE.md",
   termsHref = "/docs/license/terms"
 }) => {
-  const faqLinkTarget = useMemo53(() => {
+  const faqLinkTarget = useMemo54(() => {
     return faqHref.startsWith("http") ? "_blank" : undefined;
   }, [faqHref]);
-  const licenseLinkTarget = useMemo53(() => {
+  const licenseLinkTarget = useMemo54(() => {
     return licenseHref.startsWith("http") ? "_blank" : undefined;
   }, [licenseHref]);
-  const termsLinkTarget = useMemo53(() => {
+  const termsLinkTarget = useMemo54(() => {
     return termsHref.startsWith("http") ? "_blank" : undefined;
   }, [termsHref]);
   return /* @__PURE__ */ jsxs11("div", {
@@ -30123,13 +30177,13 @@ 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";
+import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext47, useEffect as useEffect52, useRef as useRef47 } from "react";
+import { useContext as useContext42, useEffect as useEffect52, useRef as useRef47 } from "react";
 import { useEffect as useEffect310, useRef as useRef212 } from "react";
-import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo54, useRef as useRef48, useState as useState310 } from "react";
+import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo55, useRef as useRef48, useState as useState310 } from "react";
 import { useEffect as useEffect42, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -30158,11 +30212,11 @@ import React410, { useEffect as useEffect72 } from "react";
 import { jsx as jsx55 } from "react/jsx-runtime";
 import { useCallback as useCallback72, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
-import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52, useState as useState62 } from "react";
+import { useCallback as useCallback42, useMemo as useMemo42, useRef as useRef52, useState as useState62 } from "react";
 import React54, { useCallback as useCallback310, useMemo as useMemo310, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo55, useState as useState82 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo56, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 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";
@@ -30903,15 +30957,19 @@ var premountSchema2 = {
     description: "Premount For",
     min: 0,
     step: 1,
-    hiddenFromList: false
+    hiddenFromList: false,
+    keyframable: false
   },
   postmountFor: {
     type: "number",
     default: 0,
     min: 0,
     step: 1,
-    hiddenFromList: true
-  },
+    hiddenFromList: true,
+    keyframable: false
+  }
+};
+var premountStyleSchema2 = {
   styleWhilePremounted: {
     type: "hidden"
   },
@@ -30919,9 +30977,13 @@ var premountSchema2 = {
     type: "hidden"
   }
 };
+var sequencePremountSchema2 = {
+  ...premountSchema2,
+  ...premountStyleSchema2
+};
 var sequenceStyleSchema2 = {
   ...transformSchema2,
-  ...premountSchema2
+  ...sequencePremountSchema2
 };
 var hiddenField2 = {
   type: "boolean",
@@ -32134,7 +32196,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext46(Internals.BufferingContextReact);
+  const bufferManager = useContext47(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -32348,7 +32410,7 @@ var usePlayer = () => {
   const isBuffering = useCallback39(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo54(() => {
+  const returnValue = useMemo55(() => {
     return {
       frameBack,
       frameForward,
@@ -32592,11 +32654,11 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext42(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef47(0);
-  const context = useContext47(Internals.BufferingContextReact);
+  const context = useContext42(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -33194,7 +33256,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }
     setPlayerMuted((mute) => !mute);
   }, [isVolume0, setPlayerMuted, setMediaVolume]);
-  const parentDivStyle = useMemo410(() => {
+  const parentDivStyle = useMemo42(() => {
     return {
       display: "inline-flex",
       background: "none",
@@ -33205,7 +33267,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       ...displayVerticalVolumeSlider && { position: "relative" }
     };
   }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo410(() => {
+  const volumeContainer = useMemo42(() => {
     return {
       display: "inline",
       width: ICON_SIZE2,
@@ -33230,10 +33292,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       children: isMutedOrZero ? /* @__PURE__ */ jsx84(VolumeOffIcon, {}) : /* @__PURE__ */ jsx84(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo410(() => {
+  const muteButton = useMemo42(() => {
     return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
   }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo410(() => {
+  const volumeSlider = useMemo42(() => {
     return (focused || hover) && !playerMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
@@ -33321,7 +33383,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo55(() => {
+  const actualStyle = useMemo56(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -33388,7 +33450,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo55(() => {
+  const playbackPopup = useMemo56(() => {
     return {
       position: "absolute",
       right: 0,
@@ -35289,7 +35351,7 @@ var Thumbnail = forward2(ThumbnailFn);
 import {
   useCallback as useCallback55,
   useEffect as useEffect57,
-  useMemo as useMemo68,
+  useMemo as useMemo69,
   useRef as useRef59,
   useState as useState56
 } from "react";
@@ -36040,7 +36102,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React58, { useContext as useContext48, useMemo as useMemo56 } from "react";
+import React58, { useContext as useContext48, useMemo as useMemo57 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var Context = React58.createContext(undefined);
 var ColorModeProvider = ({
@@ -36048,7 +36110,7 @@ var ColorModeProvider = ({
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo56(() => {
+  const value = useMemo57(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx60(Context.Provider, {
@@ -36066,14 +36128,14 @@ function useColorMode() {
 
 // ../media/dist/esm/index.mjs
 import { useMemo as useMemo312, useState as useState312 } from "react";
-import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState41 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo59, useRef as useRef50, useState as useState41 } from "react";
 import {
   AudioBufferSink,
   InputDisposedError
 } from "mediabunny";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext50, useLayoutEffect as useLayoutEffect19 } from "react";
+import { useContext as useContext49, useLayoutEffect as useLayoutEffect19 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
@@ -36092,10 +36154,10 @@ import { jsx as jsx316 } from "react/jsx-runtime";
 import React63, { useMemo as useMemo63, useState as useState63 } from "react";
 import {
   useCallback as useCallback40,
-  useContext as useContext49,
+  useContext as useContext410,
   useEffect as useEffect212,
   useLayoutEffect as useLayoutEffect34,
-  useMemo as useMemo412,
+  useMemo as useMemo410,
   useRef as useRef213,
   useState as useState43
 } from "react";
@@ -36103,7 +36165,7 @@ import { jsx as jsx412 } from "react/jsx-runtime";
 import {
   useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
-  useMemo as useMemo57,
+  useMemo as useMemo58,
   useRef as useRef312,
   useState as useState53
 } from "react";
@@ -38250,7 +38312,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext50(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext49(Internals.SharedAudioContext);
   useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -38403,7 +38465,8 @@ var AudioForPreviewAssertedShowing = ({
   onError,
   credentials,
   requestInit,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  style: style2
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
@@ -38633,6 +38696,7 @@ var AudioForPreviewAssertedShowing = ({
       name,
       loop,
       showInTimeline,
+      style: style2 ?? undefined,
       stack: stack ?? undefined,
       toneFrequency,
       audioStreamIndex,
@@ -38663,14 +38727,15 @@ var AudioForPreview2 = ({
   onError,
   credentials,
   requestInit,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  style: style2
 }) => {
   const preloadedSrc = usePreload2(src);
   const defaultLogLevel = Internals.useLogLevel();
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo58(() => {
+  const showShow = useMemo59(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -38717,7 +38782,8 @@ var AudioForPreview2 = ({
     credentials,
     requestInit,
     fallbackHtml5AudioProps,
-    setMediaDurationInSeconds
+    setMediaDurationInSeconds,
+    style: style2
   });
 };
 var makeAudioCache = () => {
@@ -40627,7 +40693,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);
@@ -40657,7 +40723,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
     });
@@ -40749,7 +40815,7 @@ var AudioForRendering2 = ({
   }, [
     absoluteFrame,
     continueRender,
-    delayRender2,
+    delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     disallowFallbackToHtml5Audio,
@@ -40810,6 +40876,7 @@ var audioSchema = {
     keyframable: false
   },
   ...Internals.baseSchema,
+  ...Internals.premountSchema,
   volume: {
     type: "number",
     min: 0,
@@ -40840,6 +40907,9 @@ var AudioInner = (props) => {
     durationInFrames,
     freeze,
     hidden,
+    style: style2,
+    premountFor,
+    postmountFor,
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment();
@@ -40882,6 +40952,24 @@ var AudioInner = (props) => {
     type: "audio",
     data: basicInfo
   }), [basicInfo]);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = Internals.usePremounting({
+    from: from ?? 0,
+    durationInFrames: basicInfo.duration,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style2 ?? null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "display-none"
+  });
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -40889,26 +40977,36 @@ var AudioInner = (props) => {
   if (sequenceDurationInFrames === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx316(Sequence, {
-    layout: "none",
-    from: from ?? 0,
-    durationInFrames: basicInfo.duration,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalIsMedia: isMedia,
-    name: name ?? "<Audio>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/audio" : undefined,
-    controls,
-    _remotionInternalLoopDisplay: loopDisplay,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    children: environment.isRendering ? /* @__PURE__ */ jsx316(AudioForRendering2, {
-      ...otherProps
-    }) : /* @__PURE__ */ jsx316(AudioForPreview2, {
-      name,
-      ...otherProps,
-      stack: stack ?? null,
-      setMediaDurationInSeconds
+  return /* @__PURE__ */ jsx316(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx316(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: basicInfo.duration,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalIsMedia: isMedia,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Audio>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/audio" : undefined,
+      controls,
+      _remotionInternalLoopDisplay: loopDisplay,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      children: environment.isRendering ? /* @__PURE__ */ jsx316(AudioForRendering2, {
+        ...otherProps,
+        style: premountingStyle ?? undefined
+      }) : /* @__PURE__ */ jsx316(AudioForPreview2, {
+        name,
+        ...otherProps,
+        style: premountingStyle,
+        stack: stack ?? null,
+        setMediaDurationInSeconds
+      })
     })
   });
 };
@@ -41042,7 +41140,7 @@ var VideoForPreviewAssertedShowing = ({
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
   const [playing] = Timeline2.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
-  const sharedAudioContext = useContext49(SharedAudioContext22);
+  const sharedAudioContext = useContext410(SharedAudioContext22);
   const buffer = useBufferState();
   const canvasRefCallback = useCallback40((canvas) => {
     canvasRef.current = canvas;
@@ -41070,7 +41168,7 @@ var VideoForPreviewAssertedShowing = ({
   onErrorRef.current = onError;
   const effectChainStateRef = useRef213(effectChainState);
   effectChainStateRef.current = effectChainState;
-  const parentSequence = useContext49(SequenceContext22);
+  const parentSequence = useContext410(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = (parentSequence?.absoluteFrom ?? 0) / videoConfig.fps;
@@ -41078,7 +41176,7 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef213(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext49(Internals.BufferingContextReact);
+  const buffering = useContext410(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -41265,7 +41363,7 @@ var VideoForPreviewAssertedShowing = ({
     setMediaDurationInSeconds
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo412(() => {
+  const classNameValue = useMemo410(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
   useCommonEffects({
@@ -41312,7 +41410,7 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.redrawVideoEffects().catch(() => {});
   }, [effects, mediaPlayerReady, mediaPlayerRef]);
-  const actualStyle = useMemo412(() => {
+  const actualStyle = useMemo410(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -41352,7 +41450,7 @@ var VideoForPreview2 = (props) => {
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo412(() => {
+  const showShow = useMemo410(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate: props.playbackRate,
@@ -41417,14 +41515,14 @@ var VideoForRendering2 = ({
   const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const sequenceContext = useContext53(Internals.SequenceContext);
-  const id = useMemo57(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo58(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
     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);
@@ -41448,7 +41546,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
     });
@@ -41600,7 +41698,7 @@ var VideoForRendering2 = ({
   }, [
     absoluteFrame,
     continueRender,
-    delayRender2,
+    delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     environment.isClientSideRendering,
@@ -41636,10 +41734,10 @@ var VideoForRendering2 = ({
     initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo57(() => {
+  const classNameValue = useMemo58(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
-  const styleWithObjectFit = useMemo57(() => {
+  const styleWithObjectFit = useMemo58(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -41718,6 +41816,8 @@ var videoSchema = {
     keyframable: false
   },
   ...Internals.baseSchema,
+  ...Internals.premountSchema,
+  ...Internals.premountStyleSchema,
   volume: {
     type: "number",
     min: 0,
@@ -41888,6 +41988,10 @@ var VideoInner = ({
   from,
   freeze,
   hidden,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   ...props
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
@@ -41943,57 +42047,83 @@ var VideoInner = ({
   });
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects ?? []);
   const refForOutline = React63.useRef(null);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = Internals.usePremounting({
+    from: from ?? 0,
+    durationInFrames: videoSequenceDuration ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style2 ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
   if (sequenceDurationInFrames === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx65(Sequence, {
-    layout: "none",
-    from: from ?? 0,
-    durationInFrames: videoSequenceDuration,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalIsMedia: isMedia,
-    name: name ?? "<Video>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/video" : undefined,
-    controls,
-    _remotionInternalLoopDisplay: loopDisplay,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    outlineRef: refForOutline,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    children: /* @__PURE__ */ jsx65(InnerVideo, {
-      ...props,
-      audioStreamIndex: audioStreamIndex ?? 0,
-      className: className2,
-      delayRenderRetries: delayRenderRetries ?? null,
-      delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
-      disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
-      fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
-      logLevel: logLevel ?? fallbackLogLevel,
-      loop: loop ?? false,
-      loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
-      muted: muted ?? false,
-      onVideoFrame,
-      playbackRate: playbackRate ?? 1,
-      showInTimeline: showInTimeline ?? true,
-      src,
-      style: style2 ?? {},
-      trimAfter,
-      trimBefore,
-      volume: volume ?? 1,
-      toneFrequency: toneFrequency ?? 1,
-      stack,
-      debugOverlay: debugOverlay ?? false,
-      headless: headless ?? false,
-      onError,
-      credentials,
-      requestInit,
+  return /* @__PURE__ */ jsx65(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx65(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: videoSequenceDuration,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalIsMedia: isMedia,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Video>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/video" : undefined,
       controls,
-      objectFit: objectFit ?? "contain",
-      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
-      effects: memoizedEffects,
-      setMediaDurationInSeconds,
-      refForOutline
+      _remotionInternalLoopDisplay: loopDisplay,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      outlineRef: refForOutline,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      children: /* @__PURE__ */ jsx65(InnerVideo, {
+        ...props,
+        audioStreamIndex: audioStreamIndex ?? 0,
+        className: className2,
+        delayRenderRetries: delayRenderRetries ?? null,
+        delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+        disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
+        fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
+        logLevel: logLevel ?? fallbackLogLevel,
+        loop: loop ?? false,
+        loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+        muted: muted ?? false,
+        onVideoFrame,
+        playbackRate: playbackRate ?? 1,
+        showInTimeline: showInTimeline ?? true,
+        src,
+        style: premountingStyle ?? {},
+        trimAfter,
+        trimBefore,
+        volume: volume ?? 1,
+        toneFrequency: toneFrequency ?? 1,
+        stack,
+        debugOverlay: debugOverlay ?? false,
+        headless: headless ?? false,
+        onError,
+        credentials,
+        requestInit,
+        controls,
+        objectFit: objectFit ?? "contain",
+        _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
+        effects: memoizedEffects,
+        setMediaDurationInSeconds,
+        refForOutline
+      })
     })
   });
 };
@@ -42006,7 +42136,7 @@ var Video = Interactive.withSchema({
 });
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo61, useState as useState48 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo64, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
@@ -42461,8 +42591,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);
@@ -42543,13 +42673,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,
@@ -42558,15 +42688,15 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect46, useMemo as useMemo59, useState as useState46 } from "react";
+import { useEffect as useEffect46, useMemo as useMemo60, useState as useState46 } from "react";
 import { jsx as jsx71 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
-  const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const { isRendering } = useRemotionEnvironment();
-  const src = useMemo59(() => {
+  const src = useMemo60(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -42578,7 +42708,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({
@@ -42997,7 +43127,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/TrendingRepos.tsx
-import { useMemo as useMemo60 } from "react";
+import { useMemo as useMemo61 } from "react";
 import { jsx as jsx81, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
@@ -43010,7 +43140,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo60(() => {
+  const item = useMemo61(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -43217,7 +43347,7 @@ var HomepageVideoComp = ({
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo61(() => {
+  const emoji = useMemo64(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -43226,7 +43356,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo61(() => {
+  const audioSrc = useMemo64(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -43311,7 +43441,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.494";
+var VERSION2 = "4.0.496";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -44204,6 +44334,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");
@@ -44221,6 +44352,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) => {
@@ -44311,12 +44450,14 @@ function createScaffold({
       })
     }));
   });
+  updateFallbackScaffoldVisibility();
   return {
     delayRenderScope,
     div,
     errorHolder,
     htmlInCanvasContext,
     [Symbol.dispose]: () => {
+      fallbackScaffoldObserver?.disconnect();
       root.unmount();
       if (htmlInCanvasContext) {
         teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });
@@ -48535,7 +48676,7 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo64 } from "react";
+import { useMemo as useMemo66 } from "react";
 import { jsx as jsx97, jsxs as jsxs34, Fragment as Fragment16 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
@@ -48543,7 +48684,7 @@ var className2 = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
 var translated3 = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
 var Spinner2 = ({ size: size4, duration }) => {
-  const style2 = useMemo64(() => {
+  const style2 = useMemo66(() => {
     return {
       width: size4,
       height: size4
@@ -48805,13 +48946,13 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback50, useEffect as useEffect51, useMemo as useMemo67, useRef as useRef57, useState as useState51 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect51, useMemo as useMemo68, useRef as useRef57, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback49, useEffect as useEffect50, useMemo as useMemo66, useState as useState50 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect50, useMemo as useMemo67, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
-  const observer = useMemo66(() => {
+  const observer = useMemo67(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -49025,7 +49166,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo67(() => {
+  const knobStyle = useMemo68(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -49039,7 +49180,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo67(() => {
+  const fillStyle = useMemo68(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -49048,7 +49189,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo67(() => {
+  const active = useMemo68(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -49462,7 +49603,7 @@ var Demo = () => {
   const updateCardOrder = useCallback55((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo68(() => {
+  const props = useMemo69(() => {
     return {
       theme: colorMode,
       onToggle: () => {