@remotion/promo-pages 4.0.493 → 4.0.495

package/dist/design.js

@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo42, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -4175,9 +4175,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";
@@ -4196,13 +4196,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 {
@@ -4213,70 +4214,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 jsxs2 } 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";
@@ -4285,15 +4286,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 jsx22 } from "react/jsx-runtime";
@@ -4303,7 +4304,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";
@@ -4312,19 +4313,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";
@@ -4333,7 +4334,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
@@ -4346,59 +4347,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";
@@ -5589,7 +5590,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.493";
+var VERSION = "4.0.495";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6082,15 +6083,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"
   },
@@ -6098,10 +6103,13 @@ var premountSchema = {
     type: "hidden"
   }
 };
-var sequencePremountSchema = premountSchema;
+var sequencePremountSchema = {
+  ...premountSchema,
+  ...premountStyleSchema
+};
 var sequenceStyleSchema = {
   ...transformSchema,
-  ...premountSchema
+  ...sequencePremountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -6186,9 +6194,6 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -6368,7 +6373,7 @@ var SequenceManagerProvider = ({ children }) => {
     })
   });
 };
-var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContext = createContext14(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: true,
@@ -6387,7 +6392,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(".");
@@ -8211,10 +8270,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) => {
@@ -8558,9 +8617,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, {
@@ -8587,8 +8646,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,
@@ -8598,7 +8657,7 @@ var withInteractivitySchema = ({
         componentName
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -8656,7 +8715,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();
@@ -8707,13 +8766,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;
@@ -8721,7 +8780,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,
@@ -8752,12 +8811,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;
@@ -8905,7 +8964,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo14(() => {
+  const defaultStyle = useMemo15(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -8931,8 +8990,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"');
   }
@@ -8946,34 +9003,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,
@@ -9309,7 +9362,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo15(() => ({
+  return useMemo16(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -9325,7 +9378,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;
     }
@@ -9532,6 +9585,13 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
     return null;
@@ -9599,7 +9659,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);
@@ -9727,8 +9787,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -9751,7 +9809,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -9877,7 +9935,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo17(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -9891,7 +9949,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(() => {
@@ -10006,14 +10064,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
@@ -10082,7 +10140,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]) {
@@ -10385,7 +10443,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo19(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -10524,7 +10582,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;
     }
@@ -10658,9 +10716,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));
@@ -10680,7 +10738,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo21(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -10772,7 +10830,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,
@@ -10809,10 +10867,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 {
@@ -10951,7 +11009,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo21(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -10966,7 +11024,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo21(() => {
+  const sharedAudioTagElements = useMemo22(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -10989,8 +11047,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 });
@@ -11169,7 +11227,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");
   }
@@ -11234,7 +11292,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
@@ -11323,7 +11381,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,
@@ -11333,7 +11391,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo22(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -11354,7 +11412,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo22(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -11395,9 +11453,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({
@@ -11562,13 +11620,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,
@@ -11594,10 +11652,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");
@@ -11705,7 +11763,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo25(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -12079,7 +12137,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);
@@ -12374,16 +12432,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]);
 };
@@ -12437,7 +12495,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,
@@ -12450,7 +12508,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo27(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -12467,7 +12525,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,
@@ -12597,10 +12655,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,
@@ -12707,7 +12765,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,
@@ -12731,7 +12789,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.`);
   }
@@ -12893,7 +12951,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo29(() => {
+  const sourceCanvas = useMemo30(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -12961,7 +13019,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo29(() => {
+  const canvasStyle = useMemo30(() => {
     return {
       width,
       height,
@@ -13110,7 +13168,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);
@@ -13329,20 +13387,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?.();
@@ -13379,8 +13437,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) => {
@@ -13392,7 +13448,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,
@@ -13558,7 +13614,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);
@@ -13575,7 +13631,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo31(() => {
+  const sourceCanvas = useMemo32(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -13897,7 +13953,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) {
@@ -14246,7 +14302,10 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema,
+  ...transformSchema
+};
+var interactiveTextElementSchema = {
+  ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
 };
@@ -14262,7 +14321,7 @@ var withSchema = (options) => {
   addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
-var makeInteractiveElement = (tag, displayName) => {
+var makeInteractiveElement = (tag, displayName, schema) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
       durationInFrames,
@@ -14308,12 +14367,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,
@@ -14322,41 +14387,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 = ({
@@ -14413,7 +14478,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo32(() => {
+  const compositionManagerSetters = useMemo33(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -14429,7 +14494,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo32(() => {
+  const compositionManagerContextValue = useMemo33(() => {
     return {
       compositions,
       folders,
@@ -14527,7 +14592,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -14537,7 +14602,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -14551,7 +14616,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
@@ -14567,13 +14632,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, {
@@ -14874,13 +14939,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,
@@ -14935,14 +15000,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,
@@ -15030,7 +15095,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) => {
@@ -15094,12 +15159,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;
     }
@@ -15151,7 +15216,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()));
@@ -15302,7 +15367,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo36(() => {
+  const actualStyle = useMemo37(() => {
     return {
       ...style
     };
@@ -15498,7 +15563,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,
@@ -15609,6 +15674,7 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
+  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -15622,6 +15688,7 @@ var Internals = {
   truthy,
   SequenceContext,
   PremountContext,
+  usePremounting,
   useRemotionContexts,
   RemotionContextProvider,
   CSSUtils: exports_default_css,
@@ -15797,7 +15864,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) {
@@ -16126,14 +16193,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,
@@ -16344,7 +16411,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");
   }
@@ -16463,7 +16530,7 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback26, useMemo as useMemo40, useRef as useRef29 } from "react";
+import React, { useCallback as useCallback26, useMemo as useMemo41, useRef as useRef29 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -16645,13 +16712,13 @@ var RenderSvg = ({
   stack,
   ...props
 }) => {
-  const actualStyle = useMemo40(() => {
+  const actualStyle = useMemo41(() => {
     return {
       overflow: "visible",
       ...style ?? {}
     };
   }, [style]);
-  const actualPathStyle = useMemo40(() => {
+  const actualPathStyle = useMemo41(() => {
     return {
       transformBox: "fill-box",
       ...pathStyle ?? {}
@@ -19630,7 +19697,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo42(() => new EventTarget, []);
+  const eventTarget = useMemo43(() => new EventTarget, []);
   useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));