npm - @remotion/promo-pages - Versions diffs - 4.0.493 → 4.0.495 - Mend

@remotion/promo-pages 4.0.493 → 4.0.495

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/Homepage.js +505 -362
package/dist/design.js +294 -227
package/dist/experts.js +291 -224
package/dist/homepage/Pricing.js +301 -234
package/dist/prompts/PromptsGallery.js +294 -227
package/dist/prompts/PromptsShow.js +318 -251
package/dist/prompts/PromptsSubmit.js +294 -227
package/dist/team.js +294 -227
package/dist/template-modal-content.js +296 -229
package/dist/templates.js +294 -227
package/package.json +13 -13

package/dist/Homepage.js CHANGED Viewed

@@ -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";
@@ -2359,7 +2360,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.493";
+var VERSION = "4.0.495";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2852,15 +2853,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 +2873,13 @@ var premountSchema = {
     type: "hidden"
   }
 };
-var sequencePremountSchema = premountSchema;
+var sequencePremountSchema = {
+  ...premountSchema,
+  ...premountStyleSchema
+};
 var sequenceStyleSchema = {
   ...transformSchema,
-  ...premountSchema
+  ...sequencePremountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -2956,9 +2964,6 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -3138,7 +3143,7 @@ var SequenceManagerProvider = ({ children }) => {
     })
   });
 };
-var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContext = createContext14(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: true,
@@ -3157,7 +3162,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 +5040,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 +5387,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 +5416,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 +5427,7 @@ var withInteractivitySchema = ({
         componentName
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -5426,7 +5485,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 +5536,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 +5550,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 +5581,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 +5734,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo14(() => {
+  const defaultStyle = useMemo15(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -5701,8 +5760,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 +5773,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 : 1,
-      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 +6132,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 +6148,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;
     }
@@ -6302,6 +6355,13 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
     return null;
@@ -6369,7 +6429,7 @@ var AnimatedImageContent = forwardRef4(({
   const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const currentTime = frame / playbackRate / fps;
+  const currentTime = getCurrentTime({ frame, playbackRate, fps });
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
   const requestInitKey = serializeRequestInit(requestInit);
@@ -6497,8 +6557,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -6521,7 +6579,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -6647,7 +6705,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo17(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -6661,7 +6719,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(() => {
@@ -6776,14 +6834,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
@@ -6852,7 +6910,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]) {
@@ -7155,7 +7213,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo19(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -7294,7 +7352,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;
     }
@@ -7428,9 +7486,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));
@@ -7450,7 +7508,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo21(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -7542,7 +7600,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,
@@ -7579,10 +7637,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 {
@@ -7721,7 +7779,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo21(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -7736,7 +7794,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo21(() => {
+  const sharedAudioTagElements = useMemo22(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -7759,8 +7817,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 });
@@ -7939,7 +7997,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");
   }
@@ -8004,7 +8062,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
@@ -8093,7 +8151,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,
@@ -8103,7 +8161,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo22(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -8124,7 +8182,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo22(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -8165,9 +8223,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({
@@ -8332,13 +8390,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,
@@ -8364,10 +8422,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");
@@ -8475,7 +8533,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo25(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -8849,7 +8907,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);
@@ -9144,16 +9202,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]);
 };
@@ -9207,7 +9265,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,
@@ -9220,7 +9278,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo27(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -9237,7 +9295,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,
@@ -9367,10 +9425,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,
@@ -9477,7 +9535,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,
@@ -9501,7 +9559,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.`);
   }
@@ -9663,7 +9721,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo29(() => {
+  const sourceCanvas = useMemo30(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9731,7 +9789,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo29(() => {
+  const canvasStyle = useMemo30(() => {
     return {
       width,
       height,
@@ -9880,7 +9938,7 @@ 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);
@@ -10099,20 +10157,20 @@ var HtmlInCanvasContent = forwardRef9(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2, canvasSizeKey]);
-  const innerStyle = useMemo30(() => {
+  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?.();
@@ -10149,8 +10207,6 @@ var HtmlInCanvasInner = forwardRef9(({
   name,
   ...sequenceProps
 }, ref) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef22(null);
   const setCanvasRef = useCallback16((node) => {
@@ -10162,7 +10218,7 @@ var HtmlInCanvasInner = forwardRef9(({
     }
   }, [ref]);
   return /* @__PURE__ */ jsx25(Sequence, {
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
     controls,
@@ -10328,7 +10384,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);
@@ -10345,7 +10401,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo31(() => {
+  const sourceCanvas = useMemo32(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10667,7 +10723,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) {
@@ -11016,7 +11072,10 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema,
+  ...transformSchema
+};
+var interactiveTextElementSchema = {
+  ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
 };
@@ -11032,7 +11091,7 @@ var withSchema = (options) => {
   addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
-var makeInteractiveElement = (tag, displayName) => {
+var makeInteractiveElement = (tag, displayName, schema) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
       durationInFrames,
@@ -11078,12 +11137,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,
@@ -11092,41 +11157,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 = ({
@@ -11183,7 +11248,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo32(() => {
+  const compositionManagerSetters = useMemo33(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -11199,7 +11264,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo32(() => {
+  const compositionManagerContextValue = useMemo33(() => {
     return {
       compositions,
       folders,
@@ -11297,7 +11362,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -11307,7 +11372,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -11321,7 +11386,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
@@ -11337,13 +11402,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, {
@@ -11644,13 +11709,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,
@@ -11705,14 +11770,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,
@@ -11800,7 +11865,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) => {
@@ -11864,12 +11929,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;
     }
@@ -11921,7 +11986,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()));
@@ -12072,7 +12137,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo36(() => {
+  const actualStyle = useMemo37(() => {
     return {
       ...style
     };
@@ -12268,7 +12333,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,
@@ -12379,6 +12444,7 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
+  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12392,6 +12458,7 @@ var Internals = {
   truthy,
   SequenceContext,
   PremountContext,
+  usePremounting,
   useRemotionContexts,
   RemotionContextProvider,
   CSSUtils: exports_default_css,
@@ -12567,7 +12634,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) {
@@ -12896,14 +12963,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,
@@ -13114,7 +13181,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");
   }
@@ -13570,7 +13637,7 @@ var ExpertCard = ({ expert, Link }) => {
   });
 };
 var ExpertsPageContent = ({ Link }) => {
-  const expertsInRandomOrder = useMemo40(() => {
+  const expertsInRandomOrder = useMemo41(() => {
     if (typeof window === "undefined") {
       return [];
     }
@@ -13668,7 +13735,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";
@@ -15016,7 +15083,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 = ({
@@ -17782,7 +17849,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";
@@ -17964,13 +18031,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 ?? {}
@@ -20949,7 +21016,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"));
@@ -27396,7 +27463,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 = "-";
@@ -29053,14 +29120,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;
@@ -29290,13 +29357,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", {
@@ -30120,13 +30187,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 {
@@ -30155,11 +30222,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";
@@ -30900,15 +30967,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"
   },
@@ -30916,9 +30987,13 @@ var premountSchema2 = {
     type: "hidden"
   }
 };
+var sequencePremountSchema2 = {
+  ...premountSchema2,
+  ...premountStyleSchema2
+};
 var sequenceStyleSchema2 = {
   ...transformSchema2,
-  ...premountSchema2
+  ...sequencePremountSchema2
 };
 var hiddenField2 = {
   type: "boolean",
@@ -32131,7 +32206,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext46(Internals.BufferingContextReact);
+  const bufferManager = useContext47(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -32345,7 +32420,7 @@ var usePlayer = () => {
   const isBuffering = useCallback39(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo54(() => {
+  const returnValue = useMemo55(() => {
     return {
       frameBack,
       frameForward,
@@ -32589,11 +32664,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.");
   }
@@ -33191,7 +33266,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }
     setPlayerMuted((mute) => !mute);
   }, [isVolume0, setPlayerMuted, setMediaVolume]);
-  const parentDivStyle = useMemo410(() => {
+  const parentDivStyle = useMemo42(() => {
     return {
       display: "inline-flex",
       background: "none",
@@ -33202,7 +33277,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       ...displayVerticalVolumeSlider && { position: "relative" }
     };
   }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo410(() => {
+  const volumeContainer = useMemo42(() => {
     return {
       display: "inline",
       width: ICON_SIZE2,
@@ -33227,10 +33302,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,
@@ -33318,7 +33393,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"
@@ -33385,7 +33460,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo55(() => {
+  const playbackPopup = useMemo56(() => {
     return {
       position: "absolute",
       right: 0,
@@ -35286,7 +35361,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";
@@ -36037,7 +36112,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 = ({
@@ -36045,7 +36120,7 @@ var ColorModeProvider = ({
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo56(() => {
+  const value = useMemo57(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx60(Context.Provider, {
@@ -36063,14 +36138,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";
@@ -36089,10 +36164,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";
@@ -36100,7 +36175,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";
@@ -38247,7 +38322,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext50(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext49(Internals.SharedAudioContext);
   useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -38400,7 +38475,8 @@ var AudioForPreviewAssertedShowing = ({
   onError,
   credentials,
   requestInit,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  style: style2
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
@@ -38630,6 +38706,7 @@ var AudioForPreviewAssertedShowing = ({
       name,
       loop,
       showInTimeline,
+      style: style2 ?? undefined,
       stack: stack ?? undefined,
       toneFrequency,
       audioStreamIndex,
@@ -38660,14 +38737,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,
@@ -38714,7 +38792,8 @@ var AudioForPreview2 = ({
     credentials,
     requestInit,
     fallbackHtml5AudioProps,
-    setMediaDurationInSeconds
+    setMediaDurationInSeconds,
+    style: style2
   });
 };
 var makeAudioCache = () => {
@@ -40807,6 +40886,7 @@ var audioSchema = {
     keyframable: false
   },
   ...Internals.baseSchema,
+  ...Internals.premountSchema,
   volume: {
     type: "number",
     min: 0,
@@ -40837,6 +40917,9 @@ var AudioInner = (props) => {
     durationInFrames,
     freeze,
     hidden,
+    style: style2,
+    premountFor,
+    postmountFor,
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment();
@@ -40879,6 +40962,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.`);
   }
@@ -40886,26 +40987,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
+      })
     })
   });
 };
@@ -40936,7 +41047,7 @@ var getVideoSequenceDuration = ({
 };
 var PRORES_DOCS_URL = "https://www.remotion.dev/docs/videos/prores";
 var proresDecoderNotEnabledMessage = (src) => {
-  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}. ` + `(This is required to decode a ProRes source for both preview and rendering — it is unrelated to exporting a video as ProRes.)`;
+  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}.`;
 };
 class ProResDecoderNotEnabledError extends Error {
@@ -41039,7 +41150,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;
@@ -41067,7 +41178,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;
@@ -41075,7 +41186,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>");
   }
@@ -41262,7 +41373,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({
@@ -41309,7 +41420,7 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.redrawVideoEffects().catch(() => {});
   }, [effects, mediaPlayerReady, mediaPlayerRef]);
-  const actualStyle = useMemo412(() => {
+  const actualStyle = useMemo410(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -41349,7 +41460,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,
@@ -41414,7 +41525,7 @@ 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,
@@ -41633,10 +41744,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
@@ -41715,6 +41826,8 @@ var videoSchema = {
     keyframable: false
   },
   ...Internals.baseSchema,
+  ...Internals.premountSchema,
+  ...Internals.premountStyleSchema,
   volume: {
     type: "number",
     min: 0,
@@ -41885,6 +41998,10 @@ var VideoInner = ({
   from,
   freeze,
   hidden,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   ...props
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
@@ -41940,57 +42057,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
+      })
     })
   });
 };
@@ -42003,7 +42146,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 {
@@ -42555,7 +42698,7 @@ 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);
@@ -42563,7 +42706,7 @@ var DisplayedEmoji = ({ emoji }) => {
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
   const { delayRender: delayRender2, 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";
     }
@@ -42994,7 +43137,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();
@@ -43007,7 +43150,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo60(() => {
+  const item = useMemo61(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -43214,7 +43357,7 @@ var HomepageVideoComp = ({
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo61(() => {
+  const emoji = useMemo64(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -43223,7 +43366,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo61(() => {
+  const audioSrc = useMemo64(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -43308,7 +43451,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.493";
+var VERSION2 = "4.0.495";
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -48532,7 +48675,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;
@@ -48540,7 +48683,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
@@ -48802,13 +48945,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;
     }
@@ -49022,7 +49165,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo67(() => {
+  const knobStyle = useMemo68(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -49036,7 +49179,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)",
@@ -49045,7 +49188,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)",
@@ -49459,7 +49602,7 @@ var Demo = () => {
   const updateCardOrder = useCallback55((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo68(() => {
+  const props = useMemo69(() => {
     return {
       theme: colorMode,
       onToggle: () => {