remotion 4.0.533 → 4.0.534

package/dist/esm/index.mjs

@@ -1561,7 +1561,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.533";
+var VERSION = "4.0.534";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1599,10 +1599,11 @@ var Null = () => {
 
 // src/Sequence.tsx
 import {
-  createContext as createContext20,
+  createContext as createContext21,
   forwardRef as forwardRef3,
   useCallback as useCallback6,
   useContext as useContext21,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo14,
   useRef as useRef7,
   useState as useState6
@@ -2002,12 +2003,10 @@ var Freeze = ({
   const isInsideNonPremountFreeze = useIsInsideNonPremountFreeze();
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
   const playbackRate = sequenceContext?.playbackRate ?? 1;
-  const timelineValue = useMemo10(() => {
-    if (!isActive) {
-      return timelineContext;
-    }
+  const { audioAndVideoTags } = timelineContext;
+  const frozenTimelineValue = useMemo10(() => {
     return {
-      ...timelineContext,
+      audioAndVideoTags,
       isPlaying: () => false,
       isInsideFreeze: true,
       frame: {
@@ -2015,8 +2014,7 @@ var Freeze = ({
       }
     };
   }, [
-    isActive,
-    timelineContext,
+    audioAndVideoTags,
     videoConfig.id,
     frameToFreeze,
     relativeFrom,
@@ -2037,7 +2035,7 @@ var Freeze = ({
   return /* @__PURE__ */ jsx9(NonPremountFreezeContext.Provider, {
     value: isInsideNonPremountFreeze || Boolean(isActive) && !_remotionInternalIsPremounting,
     children: /* @__PURE__ */ jsx9(TimelineContext.Provider, {
-      value: timelineValue,
+      value: isActive ? frozenTimelineValue : timelineContext,
       children: /* @__PURE__ */ jsx9(SequenceContext.Provider, {
         value: newSequenceContext,
         children
@@ -3011,11 +3009,27 @@ var SequenceManagerProvider = ({ children }) => {
       if (index === -1) {
         return seqs;
       }
+      const previousSequence = seqs[index];
+      const timelineOrder = committedOrderRef.current?.get(seq.id) ?? null;
+      let unchanged = Object.is(previousSequence.timelineOrder, timelineOrder);
+      let keyCount = 1;
+      if (unchanged) {
+        for (const key in seq) {
+          if (key === "timelineOrder" || !Object.prototype.hasOwnProperty.call(seq, key)) {
+            continue;
+          }
+          keyCount++;
+          if (!Object.prototype.hasOwnProperty.call(previousSequence, key) || !Object.is(previousSequence[key], seq[key])) {
+            unchanged = false;
+            break;
+          }
+        }
+      }
+      if (unchanged && Object.keys(previousSequence).length === keyCount) {
+        return seqs;
+      }
       const next = [...seqs];
-      next[index] = {
-        ...seq,
-        timelineOrder: committedOrderRef.current?.get(seq.id) ?? null
-      };
+      next[index] = { ...seq, timelineOrder };
       return next;
     });
   }, []);
@@ -3131,12 +3145,17 @@ var useRequireToBeInsideSeries = () => {
   }
 };
 
+// src/timeline-track-context.ts
+import { createContext as createContext17 } from "react";
+var TimelineTrackContext = createContext17(null);
+var ExperimentalTracksEnabledContext = createContext17(false);
+
 // src/use-premounting.ts
 import { useContext as useContext17, useMemo as useMemo12 } from "react";
 
 // src/PremountContext.tsx
-import { createContext as createContext17 } from "react";
-var PremountContext = createContext17({
+import { createContext as createContext18 } from "react";
+var PremountContext = createContext18({
   premountFramesRemaining: 0
 });
 
@@ -3245,7 +3264,7 @@ var useSequenceRegistration = ({
 
 // src/with-interactivity-schema.ts
 import React18, {
-  createContext as createContext19,
+  createContext as createContext20,
   forwardRef as forwardRef2,
   useContext as useContext20,
   useLayoutEffect as useLayoutEffect4,
@@ -3289,6 +3308,82 @@ var deleteNestedKey = (obj, keysToRemove) => {
 // src/effects/use-memoized-effects.ts
 import { useContext as useContext19, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
 
+// src/evaluate-source-expressions.ts
+var evaluateSourceNumericValue = (expression, config) => {
+  if (typeof expression === "number") {
+    return expression;
+  }
+  if (expression.type === "literal") {
+    return expression.value;
+  }
+  if (expression.type === "binary") {
+    const left = evaluateSourceNumericValue(expression.left, config);
+    const right = evaluateSourceNumericValue(expression.right, config);
+    switch (expression.operator) {
+      case "+":
+        return left + right;
+      case "-":
+        return left - right;
+      case "*":
+        return left * right;
+      case "/":
+        return left / right;
+      default:
+        throw new Error("Unknown source expression operator");
+    }
+  }
+  const value = expression.binding.type === "constant" ? expression.binding.value : config?.[expression.binding.field] ?? NaN;
+  if (expression.type === "video-config-multiplication") {
+    return value * expression.multiplier;
+  }
+  if (expression.type === "video-config-subtraction") {
+    return value - expression.subtrahend;
+  }
+  return value;
+};
+var evaluatedProps = new WeakMap;
+var evaluateSourcePropStatuses = (props, config) => {
+  const configKey = config === null ? "" : `${config.durationInFrames}:${config.fps}:${config.width}:${config.height}`;
+  const cached = evaluatedProps.get(props) ?? new Map;
+  const existing = cached.get(configKey);
+  if (existing)
+    return existing;
+  const result = Object.fromEntries(Object.entries(props).map(([key, status]) => {
+    if (status.status === "computed") {
+      return [key, status];
+    }
+    const adjustment = status.keyframeDisplayOffsetAdjustment === null ? null : evaluateSourceNumericValue(status.keyframeDisplayOffsetAdjustment, config);
+    const rate = evaluateSourceNumericValue(status.keyframePlaybackRateAdjustment ?? 1, config);
+    if (adjustment !== null && !Number.isFinite(adjustment) || !Number.isFinite(rate) || rate <= 0) {
+      return [key, { status: "computed" }];
+    }
+    const timing = {
+      keyframeDisplayOffsetAdjustment: adjustment,
+      ...status.keyframePlaybackRateAdjustment === undefined ? {} : { keyframePlaybackRateAdjustment: rate }
+    };
+    if (status.status === "static") {
+      const value = status.numericExpression === undefined ? status.codeValue : evaluateSourceNumericValue(status.numericExpression, config);
+      return [
+        key,
+        status.numericExpression !== undefined && !Number.isFinite(value) ? { status: "computed" } : { ...status, ...timing, codeValue: value }
+      ];
+    }
+    const keyframes = status.keyframes.map((keyframe) => ({
+      ...keyframe,
+      frame: evaluateSourceNumericValue(keyframe.frame, config)
+    }));
+    if (keyframes.some((keyframe, index) => !Number.isFinite(keyframe.frame) || index > 0 && keyframe.frame <= keyframes[index - 1].frame)) {
+      return [key, { status: "computed" }];
+    }
+    return [key, { ...status, ...timing, keyframes }];
+  }));
+  cached.set(configKey, result);
+  if (cached.size > 8)
+    cached.delete(cached.keys().next().value);
+  evaluatedProps.set(props, cached);
+  return result;
+};
+
 // src/bezier.ts
 var NEWTON_ITERATIONS = 4;
 var NEWTON_MIN_SLOPE = 0.001;
@@ -5272,11 +5367,11 @@ var getEffectiveVisualModeValue = ({
 };
 
 // src/sequence-node-path.tsx
-import { createContext as createContext18 } from "react";
-var OverrideIdsToNodePathsGettersContext = createContext18({
+import { createContext as createContext19 } from "react";
+var OverrideIdsToNodePathsGettersContext = createContext19({
   overrideIdToNodePathMappings: {}
 });
-var OverrideIdsToNodePathsSettersContext = createContext18({
+var OverrideIdsToNodePathsSettersContext = createContext19({
   setOverrideIdToNodePath: () => {
     throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
   }
@@ -5382,7 +5477,10 @@ var getEffectPropStatusesCtx = ({
   if (!effect.canUpdate) {
     return { type: "cannot-update-effect", reason: effect.reason };
   }
-  return { type: "can-update-effect", props: effect.props };
+  return {
+    type: "can-update-effect",
+    props: evaluateSourcePropStatuses(effect.props, nodePath.videoConfigValues)
+  };
 };
 var getPropStatusesCtx = (propStatuses, nodePath) => {
   const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
@@ -5392,11 +5490,12 @@ var getPropStatusesCtx = (propStatuses, nodePath) => {
   if (!status.canUpdate) {
     return;
   }
-  return status.props;
+  return evaluateSourcePropStatuses(status.props, nodePath.videoConfigValues);
 };
 var useMemoizedEffects = ({
   effects,
-  overrideId
+  overrideId,
+  videoConfigValues
 }) => {
   const previousRef = useRef6(null);
   const { propStatuses } = useContext19(VisualModePropStatusesContext);
@@ -5415,7 +5514,7 @@ var useMemoizedEffects = ({
     }
     const effectStatus = getEffectPropStatusesCtx({
       propStatuses,
-      nodePath,
+      nodePath: { ...nodePath, videoConfigValues },
       effectIndex: index
     });
     const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
@@ -5739,12 +5838,11 @@ var mergeValues = ({
   deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
-var stackToOverrideMap = {};
-var DisableInteractivityContext = createContext19(false);
+var DisableInteractivityContext = createContext20(false);
 var DisableInteractivityProvider = ({ children }) => {
   return React18.createElement(DisableInteractivityContext.Provider, { value: true }, children);
 };
-var EnableInteractivityContext = createContext19(false);
+var EnableInteractivityContext = createContext20(false);
 var EnableInteractivityProvider = ({ children }) => {
   return React18.createElement(EnableInteractivityContext.Provider, { value: true }, children);
 };
@@ -5758,6 +5856,7 @@ var withInteractivitySchema = ({
   const schemaWithSequenceName = extendSchemaWithSequenceName(schema);
   const flatSchema = getFlatSchemaWithAllKeys(schemaWithSequenceName);
   const flatKeys = Object.keys(flatSchema);
+  const stackToOverrideMap = {};
   const Wrapped = forwardRef2((props, ref) => {
     const {
       _remotionInternalStack: internalStack,
@@ -5846,7 +5945,10 @@ var withInteractivitySchema = ({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: dragOverrides,
-        propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, nodePath),
+        propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, {
+          ...nodePath,
+          videoConfigValues
+        }),
         frame
       });
     }, [
@@ -5854,6 +5956,7 @@ var withInteractivitySchema = ({
       dragOverrides,
       nodePath,
       propStatuses,
+      videoConfigValues,
       frame
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
@@ -5876,7 +5979,7 @@ var withInteractivitySchema = ({
 
 // src/Sequence.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var SeriesContentVisibilityContext = createContext20(true);
+var SeriesContentVisibilityContext = createContext21(true);
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
@@ -5893,6 +5996,7 @@ var RegularSequenceRefForwardingFunction = ({
   hidden = false,
   controls,
   _remotionInternalEffects,
+  _remotionInternalTimelineTrack: timelineTrackItem,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalDocumentationLink: documentationLink,
@@ -5910,6 +6014,8 @@ var RegularSequenceRefForwardingFunction = ({
   const { layout = "absolute-fill" } = other;
   const [id] = useState6(() => String(Math.random()));
   const parentSequence = useContext21(SequenceContext);
+  const timelineTrack = useContext21(TimelineTrackContext);
+  const timelineTrackRole = timelineTrackItem?.role ?? "clip";
   const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
   const cumulativePlaybackRate = parentPlaybackRate * playbackRate;
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
@@ -6086,7 +6192,14 @@ var RegularSequenceRefForwardingFunction = ({
   const isInsideSeries = useContext21(IsInsideSeriesContext);
   const stackRef = useRef7(null);
   stackRef.current = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
+  const getStack = useCallback6(() => stackRef.current, []);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
+  const currentFrame = registeredFrozenFrame ?? (absoluteFrame - currentSequenceStart) * cumulativePlaybackRate;
+  const currentFrameRef = useRef7(currentFrame);
+  useLayoutEffect5(() => {
+    currentFrameRef.current = currentFrame;
+  }, [currentFrame]);
+  const getCurrentFrame = useCallback6(() => currentFrameRef.current, []);
   const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
@@ -6128,9 +6241,16 @@ var RegularSequenceRefForwardingFunction = ({
     controlsSupportsEffects
   ]);
   const getSequenceForRegistration = useCallback6(() => {
+    const trackRegistration = timelineTrack ? {
+      timelineTrack: {
+        ...timelineTrack,
+        role: timelineTrackRole
+      }
+    } : {};
     if (isMedia) {
       if (isMedia.type === "image") {
         return {
+          ...trackRegistration,
           sequencePlaybackRate: playbackRate,
           type: "image",
           controls: registrationControls,
@@ -6149,7 +6269,8 @@ var RegularSequenceRefForwardingFunction = ({
           showInTimeline,
           timelineOrder: null,
           src: isMedia.src,
-          getStack: () => stackRef.current,
+          getStack,
+          getCurrentFrame,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
@@ -6157,6 +6278,7 @@ var RegularSequenceRefForwardingFunction = ({
         };
       }
       return {
+        ...trackRegistration,
         type: isMedia.type,
         sequencePlaybackRate: playbackRate,
         controls: registrationControls,
@@ -6177,7 +6299,8 @@ var RegularSequenceRefForwardingFunction = ({
         showInTimeline,
         timelineOrder: null,
         src: isMedia.data.src,
-        getStack: () => stackRef.current,
+        getStack,
+        getCurrentFrame,
         startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
         mediaFrameAtSequenceZero,
         volume: isMedia.data.volumes,
@@ -6190,6 +6313,7 @@ var RegularSequenceRefForwardingFunction = ({
       };
     }
     return {
+      ...trackRegistration,
       from,
       sequencePlaybackRate: playbackRate,
       trimBefore: registeredTrimBefore,
@@ -6205,7 +6329,8 @@ var RegularSequenceRefForwardingFunction = ({
       showInTimeline,
       timelineOrder: null,
       loopDisplay: resolvedLoopDisplay,
-      getStack: () => stackRef.current,
+      getStack,
+      getCurrentFrame,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: registrationControls,
@@ -6218,6 +6343,10 @@ var RegularSequenceRefForwardingFunction = ({
     };
   }, [
     id,
+    timelineTrack,
+    timelineTrackRole,
+    getCurrentFrame,
+    getStack,
     timelineClipName,
     playbackRate,
     parentSequence?.id,
@@ -6304,18 +6433,22 @@ var RegularSequenceRefForwardingFunction = ({
     }) : null;
   }
   const retainSeriesRegistration = env.isStudio && canInferDuration;
-  const sequenceContent = loopedContent === null ? retainSeriesRegistration ? children : null : other.layout === "none" ? loopedContent : /* @__PURE__ */ jsx12(AbsoluteFillElement, {
+  const renderedContent = loopedContent === null ? retainSeriesRegistration ? children : null : other.layout === "none" ? loopedContent : /* @__PURE__ */ jsx12(AbsoluteFillElement, {
     ref: sequenceRef,
     style: defaultStyle,
     className: other.className,
     children: loopedContent
   });
-  const sequence = /* @__PURE__ */ jsx12(SequenceContext.Provider, {
+  const sequenceContent = /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
     children: retainSeriesRegistration ? /* @__PURE__ */ jsx12(SeriesContentVisibilityContext.Provider, {
       value: content2 !== null,
-      children: sequenceContent
-    }) : sequenceContent
+      children: renderedContent
+    }) : renderedContent
+  });
+  const sequence = /* @__PURE__ */ jsx12(TimelineTrackContext.Provider, {
+    value: timelineTrackRole === "track" || timelineTrackRole === "clip" && !showInTimeline ? timelineTrack : null,
+    children: sequenceContent
   });
   return shouldDiscoverOutline ? /* @__PURE__ */ jsx12(SequenceOrderMarker, {
     sequenceId: id,
@@ -6569,7 +6702,7 @@ import {
   forwardRef as forwardRef4,
   useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect6,
   useRef as useRef10,
   useState as useState7
 } from "react";
@@ -7337,7 +7470,8 @@ var AnimatedImageContent = forwardRef4(({
   const ref = useRef10(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
-    overrideId: controls?.overrideId ?? null
+    overrideId: controls?.overrideId ?? null,
+    videoConfigValues: controls?.videoConfigValues ?? null
   });
   useImperativeHandle2(canvasRef, () => {
     const c2 = ref.current?.getCanvas();
@@ -7404,7 +7538,7 @@ var AnimatedImageContent = forwardRef4(({
       imageDecoder?.close();
     };
   }, [imageDecoder]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (!imageDecoder) {
       return;
     }
@@ -7671,14 +7805,14 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect7, useState as useState9 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect8, useState as useState9 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext21,
+  createContext as createContext22,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo18,
   useRef as useRef11,
   useState as useState8
@@ -7717,7 +7851,7 @@ var validateRenderAsset = (artifact) => {
 
 // src/RenderAssetManager.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var RenderAssetManager = createContext21({
+var RenderAssetManager = createContext22({
   registerRenderAsset: () => {
     return;
   },
@@ -7750,7 +7884,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -7782,7 +7916,7 @@ var Artifact = ({ filename, content: content2, downloadBehavior }) => {
   const [id] = useState9(() => {
     return String(Math.random());
   });
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (!env.isRendering) {
       return;
     }
@@ -7875,9 +8009,9 @@ var getMediaTrimAfter = ({
 };
 
 // src/loop/index.tsx
-import React22, { createContext as createContext22, useContext as useContext23, useMemo as useMemo19 } from "react";
+import React22, { createContext as createContext23, useContext as useContext23, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var LoopTimelineContext = createContext22(null);
+var LoopTimelineContext = createContext23(null);
 var useLoop = () => {
   return React22.useContext(LoopContext);
 };
@@ -7978,9 +8112,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext23, useEffect as useEffect7, useState as useState10 } from "react";
+import { createContext as createContext24, useEffect as useEffect7, useState as useState10 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var PreloadContext = createContext23({});
+var PreloadContext = createContext24({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -8305,7 +8439,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext24, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext25, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -8323,7 +8457,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext24({
+var DurationsContext = createContext25({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -8408,11 +8542,11 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext26, useLayoutEffect as useLayoutEffect8, useRef as useRef15 } from "react";
+import { useContext as useContext26, useLayoutEffect as useLayoutEffect9, useRef as useRef15 } from "react";
 
 // src/audio/shared-audio-tags.tsx
 import React25, {
-  createContext as createContext25,
+  createContext as createContext26,
   createRef as createRef2,
   useCallback as useCallback10,
   useContext as useContext25,
@@ -8697,8 +8831,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext25(null);
-var SharedAudioTagsContext = createContext25(null);
+var SharedAudioContext = createContext26(null);
+var SharedAudioTagsContext = createContext26(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -9320,7 +9454,7 @@ var useVolume = ({
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect8(() => {
+    useLayoutEffect9(() => {
       if (!audioContext) {
         return;
       }
@@ -9383,8 +9517,8 @@ var useVolume = ({
 import { useCallback as useCallback11, useContext as useContext28, useMemo as useMemo23 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { createContext as createContext26, useContext as useContext27 } from "react";
-var Html5MediaTrimContext = createContext26(0);
+import { createContext as createContext27, useContext as useContext27 } from "react";
+var Html5MediaTrimContext = createContext27(0);
 var useMediaStartsAt = () => {
   const parentSequence = useContext27(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
@@ -9470,6 +9604,7 @@ var evaluateVolume = ({
 };
 
 // src/use-media-in-timeline.ts
+var EMPTY_EFFECTS2 = [];
 var useBasicMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -9566,6 +9701,7 @@ var useMediaInTimeline = ({
   muted
 }) => {
   const parentSequence = useContext28(SequenceContext);
+  const timelineTrack = useContext28(TimelineTrackContext);
   const mediaTrimBefore = useContext28(Html5MediaTrimContext);
   const sequenceRegistrationEnabled = useContext28(SequenceRegistrationContext);
   const { durationInFrames } = useVideoConfig();
@@ -9632,6 +9768,12 @@ var useMediaInTimeline = ({
     }
     return {
       effectRuntimeValues: null,
+      ...timelineTrack ? {
+        timelineTrack: {
+          ...timelineTrack,
+          role: "clip"
+        }
+      } : {},
       type: mediaType,
       src,
       id,
@@ -9655,7 +9797,7 @@ var useMediaInTimeline = ({
       premountDisplay,
       postmountDisplay,
       controls: null,
-      effects: [],
+      effects: EMPTY_EFFECTS2,
       refForOutline: automaticOutlineRef,
       isInsideSeries: false,
       frozenFrame: null,
@@ -9664,7 +9806,8 @@ var useMediaInTimeline = ({
   }, [
     duration,
     id,
-    parentSequence,
+    timelineTrack,
+    parentSequence?.id,
     src,
     volumes,
     doesVolumeChange,
@@ -9693,7 +9836,7 @@ import {
   useCallback as useCallback14,
   useContext as useContext31,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useRef as useRef18
 } from "react";
 
@@ -9708,7 +9851,7 @@ import React26, {
   useCallback as useCallback12,
   useContext as useContext29,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo24,
   useState as useState12
 } from "react";
@@ -9752,7 +9895,7 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
     }
   }, [blockCount]);
   if (typeof window !== "undefined") {
-    useLayoutEffect9(() => {
+    useLayoutEffect10(() => {
       if (rendering) {
         return;
       }
@@ -10360,7 +10503,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION;
   })();
   const env = useRemotionEnvironment();
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.defaultPlaybackRate !== playbackRateToSet) {
       mediaRef.current.defaultPlaybackRate = playbackRateToSet;
@@ -10589,12 +10732,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext27, useContext as useContext33, useMemo as useMemo27 } from "react";
-var MediaVolumeContext = createContext27({
+import { createContext as createContext28, useContext as useContext33, useMemo as useMemo27 } from "react";
+var MediaVolumeContext = createContext28({
   playerMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext27({
+var SetMediaVolumeContext = createContext28({
   setPlayerMuted: () => {
     throw new Error("default");
   },
@@ -10858,15 +11001,15 @@ import {
   useContext as useContext36,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect11,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo30,
   useRef as useRef21
 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext28, useContext as useContext35, useMemo as useMemo29 } from "react";
+import { createContext as createContext29, useContext as useContext35, useMemo as useMemo29 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext28(null);
+var MediaEnabledContext = createContext29(null);
 var useVideoEnabled = () => {
   const context = useContext35(MediaEnabledContext);
   if (!context) {
@@ -10990,7 +11133,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -11248,6 +11391,7 @@ var SolidInner = ({
   style,
   pixelDensity,
   overrideId,
+  videoConfigValues,
   reference
 }) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
@@ -11257,7 +11401,8 @@ var SolidInner = ({
   const [outputCanvas, setOutputCanvas] = useState15(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
-    overrideId: overrideId ?? null
+    overrideId: overrideId ?? null,
+    videoConfigValues
   });
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
@@ -11430,6 +11575,7 @@ var SolidOuter = forwardRef8(({
       _remotionInternalIsPostmounting: postmountingActive,
       children: /* @__PURE__ */ jsx26(SolidInner, {
         reference: actualRef,
+        videoConfigValues: controls?.videoConfigValues ?? null,
         overrideId: controls?.overrideId ?? null,
         color,
         height,
@@ -11453,11 +11599,11 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext29,
+  createContext as createContext30,
   forwardRef as forwardRef9,
   useCallback as useCallback18,
   useContext as useContext38,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo32,
   useRef as useRef23
 } from "react";
@@ -11568,7 +11714,7 @@ var defaultOnPaint = ({
   ctx.reset();
   ctx.drawElementImage(elementImage, 0, 0);
 };
-var HtmlInCanvasAncestorContext = createContext29(false);
+var HtmlInCanvasAncestorContext = createContext30(false);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -11611,7 +11757,8 @@ var HtmlInCanvasContent = forwardRef9(({
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
     effects,
-    overrideId: controls?.overrideId ?? null
+    overrideId: controls?.overrideId ?? null,
+    videoConfigValues: controls?.videoConfigValues ?? null
   });
   const effectsRef = useRef23(memoizedEffects);
   effectsRef.current = memoizedEffects;
@@ -11748,7 +11895,7 @@ var HtmlInCanvasContent = forwardRef9(({
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -11782,7 +11929,7 @@ var HtmlInCanvasContent = forwardRef9(({
     usesDirectLayoutCanvas
   ]);
   const onPaintChangedRef = useRef23(false);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -11793,7 +11940,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -11971,7 +12118,7 @@ import {
   useCallback as useCallback19,
   useContext as useContext39,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect13,
+  useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo33,
   useRef as useRef24,
   useState as useState16
@@ -12113,7 +12260,8 @@ var CanvasImageContent = forwardRef10(({
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
     effects,
-    overrideId: controls?.overrideId ?? null
+    overrideId: controls?.overrideId ?? null,
+    videoConfigValues: controls?.videoConfigValues ?? null
   });
   const sequenceContext = useContext39(SequenceContext);
   const pendingLoadDelayRef = useRef24(null);
@@ -12146,7 +12294,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref]);
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -12158,7 +12306,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -12221,7 +12369,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -12521,7 +12669,7 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 import {
   useCallback as useCallback21,
   useContext as useContext40,
-  useLayoutEffect as useLayoutEffect14,
+  useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo34,
   useRef as useRef25,
   useState as useState18
@@ -12603,7 +12751,7 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, onImageError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect14(() => {
+    useLayoutEffect15(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -12615,7 +12763,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect14(() => {
+    useLayoutEffect15(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -13318,13 +13466,13 @@ import {
   useCallback as useCallback23,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle8,
-  useLayoutEffect as useLayoutEffect15,
+  useLayoutEffect as useLayoutEffect16,
   useMemo as useMemo35,
   useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? useEffect17 : useLayoutEffect15;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? useEffect17 : useLayoutEffect16;
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -13350,11 +13498,9 @@ var CompositionManagerProvider = ({
   const [compositions, setCompositions] = useState19(() => initialCompositions.map((composition, order) => ({ ...composition, order })));
   const currentcompositionsRef = useRef26(compositions);
   const updateCompositions = useCallback23((updateComps) => {
-    setCompositions((comps) => {
-      const updated = updateComps(comps);
-      currentcompositionsRef.current = updated;
-      return updated;
-    });
+    const updated = updateComps(currentcompositionsRef.current);
+    currentcompositionsRef.current = updated;
+    setCompositions(updated);
   }, []);
   const registerComposition = useCallback23((comp) => {
     const orderKey = getCompositionAndFolderOrderKey({
@@ -13378,10 +13524,8 @@ var CompositionManagerProvider = ({
   }, [updateCompositions]);
   const unregisterComposition = useCallback23((id) => {
     internalOrderRef.current.delete(getCompositionAndFolderOrderKey({ type: "composition", id }));
-    setCompositions((comps) => {
-      return comps.filter((c2) => c2.id !== id);
-    });
-  }, []);
+    updateCompositions((comps) => comps.filter((c2) => c2.id !== id));
+  }, [updateCompositions]);
   const registerFolder = useCallback23((name, parent, stack) => {
     const orderKey = getCompositionAndFolderOrderKey({
       type: "folder",
@@ -14059,9 +14203,45 @@ var setupEnvVariables = () => {
   });
 };
 
+// src/Track.tsx
+import { useContext as useContext42, useMemo as useMemo37, useState as useState20 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var trackSchema = {
+  name: sequenceSchema.name,
+  hidden: sequenceSchema.hidden
+};
+var TrackWithoutSchema = ({
+  name = "Track",
+  children,
+  layout = "none",
+  ...props2
+}) => {
+  const [id] = useState20(() => String(Math.random()));
+  const tracksEnabled = useContext42(ExperimentalTracksEnabledContext);
+  const value = useMemo37(() => tracksEnabled ? { id, name } : null, [id, name, tracksEnabled]);
+  return /* @__PURE__ */ jsx34(TimelineTrackContext.Provider, {
+    value,
+    children: /* @__PURE__ */ jsx34(SequenceWithoutSchema, {
+      ...props2,
+      name,
+      layout,
+      _remotionInternalTimelineTrack: { role: "track" },
+      children
+    })
+  });
+};
+var Track = withInteractivitySchema({
+  Component: TrackWithoutSchema,
+  componentName: "<Track>",
+  componentIdentity: "dev.remotion.remotion.Track",
+  schema: trackSchema,
+  supportsEffects: false
+});
+addSequenceStackTraces(Track);
+
 // src/use-pixel-density.ts
-import React41, { useContext as useContext42 } from "react";
-var PixelDensityContext = React41.createContext(null);
+import React42, { useContext as useContext43 } from "react";
+var PixelDensityContext = React42.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
     return 1;
@@ -14069,8 +14249,8 @@ var getBrowserPixelDensity = () => {
   return window.devicePixelRatio || 1;
 };
 var usePixelDensity = (options) => {
-  const pixelDensity = useContext42(PixelDensityContext);
-  const canUseRemotionHooks = useContext42(CanUseRemotionHooks);
+  const pixelDensity = useContext43(PixelDensityContext);
+  const canUseRemotionHooks = useContext43(CanUseRemotionHooks);
   if (pixelDensity !== null) {
     return pixelDensity;
   }
@@ -14092,11 +14272,11 @@ import { useCallback as useCallback26 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback24,
-  useContext as useContext43,
+  useContext as useContext44,
   useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo37,
-  useState as useState20
+  useLayoutEffect as useLayoutEffect17,
+  useMemo as useMemo38,
+  useState as useState21
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -14110,7 +14290,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -14135,14 +14315,14 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext43(SequenceContext);
+  const sequenceContext = useContext44(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext43(Html5MediaTrimContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
+  const audioStartFrame = useContext44(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext44(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo37(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo38(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -14198,14 +14378,14 @@ var OffthreadVideoForRendering = ({
     sequencePlaybackRate,
     audioStreamIndex
   ]);
-  const currentTime = useMemo37(() => {
+  const currentTime = useMemo38(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: audioStartFrame
     }) / videoConfig.fps;
   }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo37(() => {
+  const actualSrc = useMemo38(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -14213,9 +14393,9 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState20(null);
+  const [imageSrc, setImageSrc] = useState21(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -14293,7 +14473,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo37(() => {
+  const className = useMemo38(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback24((img) => {
@@ -14305,7 +14485,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx34(Img, {
+  return /* @__PURE__ */ jsx35(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -14317,15 +14497,15 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React43, {
+import React44, {
   forwardRef as forwardRef13,
   useCallback as useCallback25,
-  useContext as useContext44,
+  useContext as useContext45,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo38,
+  useMemo as useMemo39,
   useRef as useRef27,
-  useState as useState21
+  useState as useState22
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -14374,14 +14554,14 @@ class MediaPlaybackError extends Error {
 }
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext44(SharedAudioContext);
+  const context = useContext45(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef27(null);
-  const sharedSource = useMemo38(() => {
+  const sharedSource = useMemo39(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -14390,7 +14570,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React43.useInsertionEffect ?? React43.useLayoutEffect;
+  const effectToUse = React44.useInsertionEffect ?? React44.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -14433,11 +14613,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext44(SequenceContext);
+  const parentSequence = useContext45(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState21(() => String(Math.random()));
+  const [timelineId] = useState22(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -14513,7 +14693,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState21(() => playbackLogging({
+  useState22(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -14590,7 +14770,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo38(() => {
+  const actualStyle = useMemo39(() => {
     return {
       ...style
     };
@@ -14600,7 +14780,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  const video = /* @__PURE__ */ jsx35("video", {
+  const video = /* @__PURE__ */ jsx36("video", {
     ...nativeProps,
     ref: videoRef,
     muted: isMutedForPlayback,
@@ -14612,7 +14792,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     crossOrigin: crossOriginValue,
     controls: false
   });
-  return isStudio || automaticOutlineRef ? /* @__PURE__ */ jsx35(SequenceOrderMarker, {
+  return isStudio || automaticOutlineRef ? /* @__PURE__ */ jsx36(SequenceOrderMarker, {
     sequenceId: timelineId,
     outlineChildrenRef: automaticOutlineRef,
     children: video
@@ -14621,7 +14801,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
 var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -14665,15 +14845,15 @@ var InnerOffthreadVideo = (props2) => {
     trimBefore: trimBeforeValue
   });
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx36(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx37(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx36(Sequence, {
+      children: /* @__PURE__ */ jsx37(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props2.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx36(InnerOffthreadVideo, {
+        children: /* @__PURE__ */ jsx37(InnerOffthreadVideo, {
           pauseWhenBuffering: shouldPauseWhenBuffering,
           ...otherProps,
           trimAfter: undefined,
@@ -14690,7 +14870,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx36(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx37(OffthreadVideoForRendering, {
       pauseWhenBuffering: shouldPauseWhenBuffering,
       ...otherProps,
       trimAfter: undefined,
@@ -14713,7 +14893,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx36(VideoForPreview, {
+  return /* @__PURE__ */ jsx37(VideoForPreview, {
     _remotionInternalStack: _remotionInternalStack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -14763,7 +14943,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx36(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx37(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -14837,27 +15017,31 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React45, { useMemo as useMemo39 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import React46, { useMemo as useMemo40 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React45.useContext(CompositionManager);
-  const timelineContext = React45.useContext(TimelineContext);
-  const setTimelineContext = React45.useContext(SetTimelineContext);
-  const sequenceContext = React45.useContext(SequenceContext);
-  const canUseRemotionHooksContext = React45.useContext(CanUseRemotionHooks);
-  const preloadContext = React45.useContext(PreloadContext);
-  const resolveCompositionContext = React45.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React45.useContext(RenderAssetManager);
-  const sequenceManagerContext = React45.useContext(SequenceManager);
-  const sequenceManagerRefContext = React45.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React45.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React45.useContext(BufferingContextReact);
-  const logLevelContext = React45.useContext(LogLevelContext);
-  return useMemo39(() => ({
+  const compositionManagerCtx = React46.useContext(CompositionManager);
+  const timelineContext = React46.useContext(TimelineContext);
+  const setTimelineContext = React46.useContext(SetTimelineContext);
+  const sequenceContext = React46.useContext(SequenceContext);
+  const experimentalTracksEnabled = React46.useContext(ExperimentalTracksEnabledContext);
+  const timelineTrackContext = React46.useContext(TimelineTrackContext);
+  const canUseRemotionHooksContext = React46.useContext(CanUseRemotionHooks);
+  const preloadContext = React46.useContext(PreloadContext);
+  const resolveCompositionContext = React46.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React46.useContext(RenderAssetManager);
+  const sequenceManagerContext = React46.useContext(SequenceManager);
+  const sequenceManagerRefContext = React46.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React46.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React46.useContext(BufferingContextReact);
+  const logLevelContext = React46.useContext(LogLevelContext);
+  return useMemo40(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
     sequenceContext,
+    experimentalTracksEnabled,
+    timelineTrackContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -14870,6 +15054,8 @@ function useRemotionContexts() {
   }), [
     compositionManagerCtx,
     sequenceContext,
+    experimentalTracksEnabled,
+    timelineTrackContext,
     setTimelineContext,
     timelineContext,
     canUseRemotionHooksContext,
@@ -14885,33 +15071,39 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx37(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx38(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx37(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx38(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx37(PreloadContext.Provider, {
+      children: /* @__PURE__ */ jsx38(PreloadContext.Provider, {
         value: contexts.preloadContext,
-        children: /* @__PURE__ */ jsx37(CompositionManager.Provider, {
+        children: /* @__PURE__ */ jsx38(CompositionManager.Provider, {
           value: contexts.compositionManagerCtx,
-          children: /* @__PURE__ */ jsx37(SequenceManagerRefContext.Provider, {
+          children: /* @__PURE__ */ jsx38(SequenceManagerRefContext.Provider, {
             value: contexts.sequenceManagerRefContext,
-            children: /* @__PURE__ */ jsx37(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx38(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx37(VisualModePropStatusesRefContext.Provider, {
+              children: /* @__PURE__ */ jsx38(VisualModePropStatusesRefContext.Provider, {
                 value: contexts.visualModePropStatusesRefContext,
-                children: /* @__PURE__ */ jsx37(RenderAssetManager.Provider, {
+                children: /* @__PURE__ */ jsx38(RenderAssetManager.Provider, {
                   value: contexts.renderAssetManagerContext,
-                  children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
+                  children: /* @__PURE__ */ jsx38(ResolveCompositionContext.Provider, {
                     value: contexts.resolveCompositionContext,
-                    children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx38(TimelineContext.Provider, {
                       value: contexts.timelineContext,
-                      children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
+                      children: /* @__PURE__ */ jsx38(SetTimelineContext.Provider, {
                         value: contexts.setTimelineContext,
-                        children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
+                        children: /* @__PURE__ */ jsx38(SequenceContext.Provider, {
                           value: contexts.sequenceContext,
-                          children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
+                          children: /* @__PURE__ */ jsx38(BufferingContextReact.Provider, {
                             value: contexts.bufferManagerContext,
-                            children
+                            children: /* @__PURE__ */ jsx38(ExperimentalTracksEnabledContext.Provider, {
+                              value: contexts.experimentalTracksEnabled,
+                              children: /* @__PURE__ */ jsx38(TimelineTrackContext.Provider, {
+                                value: contexts.timelineTrackContext,
+                                children
+                              })
+                            })
                           })
                         })
                       })
@@ -14930,6 +15122,8 @@ var RemotionContextProvider = (props2) => {
 // src/internals.ts
 var compositionSelectorRef = createRef3();
 var Internals = {
+  evaluateSourceNumericValue,
+  evaluateSourcePropStatuses,
   AbsoluteFillElement,
   MaxMediaCacheSizeContext,
   getMediabunnyInputResourceKey,
@@ -14995,6 +15189,9 @@ var Internals = {
   useLazyComponent,
   truthy,
   SequenceContext,
+  TimelineTrackContext,
+  ExperimentalTracksEnabledContext,
+  TrackWithoutSchema,
   PremountContext,
   usePremounting,
   resolveSequenceDuration,
@@ -15125,17 +15322,17 @@ Object.assign(Internals, { useSyncExternalStore: useSyncExternalStore2 });
 // src/font-face-registry.ts
 var fontDataByUrl = new Map;
 // src/series/index.tsx
-import React47, {
+import React48, {
   forwardRef as forwardRef14,
-  useMemo as useMemo40
+  useMemo as useMemo41
 } from "react";
 
 // src/series/flatten-children.tsx
-import React46 from "react";
+import React47 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React46.Children.toArray(children);
+  const childrenArray = React47.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React46.Fragment) {
+    if (child.type === React47.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -15144,7 +15341,7 @@ var flattenChildren = (children) => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx38, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 var seriesSequenceSchema = {
   durationInFrames: Interactive.baseSchema.durationInFrames,
   name: Interactive.sequenceSchema.name,
@@ -15160,7 +15357,7 @@ var SeriesSequenceInner = forwardRef14(({ offset = 0, className = "", _remotionI
   if (_remotionInternalRender) {
     return _remotionInternalRender({ ...props2, offset, className: className || undefined }, ref);
   }
-  return /* @__PURE__ */ jsx38(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx39(IsNotInsideSeriesProvider, {
     children: props2.children
   });
 });
@@ -15198,7 +15395,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo40(() => {
+  const childrenValue = useMemo41(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -15222,7 +15419,7 @@ var SeriesInner = (props2) => {
         index: i,
         childrenLength: flattenedChildren.length
       });
-      return React47.cloneElement(castedElement, {
+      return React48.cloneElement(castedElement, {
         _remotionInternalRender: (resolvedProps, ref) => {
           const durationInFramesProp = resolvedProps.durationInFrames;
           const timelineDurationInFrames = durationInFramesProp / (resolvedProps.playbackRate ?? 1);
@@ -15248,7 +15445,7 @@ var SeriesInner = (props2) => {
           const nextStartFrame = startFrame + timelineDurationInFrames + offset;
           return /* @__PURE__ */ jsxs4(Fragment, {
             children: [
-              /* @__PURE__ */ jsx38(SequenceWithoutSchemaWithRef, {
+              /* @__PURE__ */ jsx39(SequenceWithoutSchemaWithRef, {
                 ref,
                 name: name || "<Series.Sequence>",
                 _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
@@ -15257,7 +15454,7 @@ var SeriesInner = (props2) => {
                 durationInFrames: durationInFramesProp,
                 ...passedProps,
                 _remotionInternalSingleChildComponent: getSingleChildComponent(sequenceChildren),
-                children: /* @__PURE__ */ jsx38(IsNotInsideSeriesProvider, {
+                children: /* @__PURE__ */ jsx39(IsNotInsideSeriesProvider, {
                   children: sequenceChildren
                 })
               }),
@@ -15269,12 +15466,12 @@ var SeriesInner = (props2) => {
     };
     return renderChildren(0, 0);
   }, [props2.children]);
-  return /* @__PURE__ */ jsx38(Sequence, {
+  return /* @__PURE__ */ jsx39(TrackWithoutSchema, {
     layout: "none",
-    name: "<Series>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
     ...props2,
-    children: /* @__PURE__ */ jsx38(IsInsideSeriesContainer, {
+    name: props2.name ?? "<Series>",
+    children: /* @__PURE__ */ jsx39(IsInsideSeriesContainer, {
       children: childrenValue
     })
   });
@@ -15385,27 +15582,27 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React48 from "react";
+import React49 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React48.createElement(Composition, newProps);
+  return React49.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext46 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext47 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef15,
-  useContext as useContext45,
+  useContext as useContext46,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo41,
+  useLayoutEffect as useLayoutEffect18,
+  useMemo as useMemo42,
   useRef as useRef28
 } from "react";
 
@@ -15534,7 +15731,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -15557,15 +15754,15 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef28(null);
-  const sequenceContext = useContext45(SequenceContext);
+  const sequenceContext = useContext46(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext45(Html5MediaTrimContext);
+  const audioStartFrame = useContext46(Html5MediaTrimContext);
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext45(RenderAssetManager);
-  const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext46(RenderAssetManager);
+  const id = useMemo42(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -15715,7 +15912,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect17(() => {
+    useLayoutEffect18(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -15749,7 +15946,7 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx39("video", {
+  return /* @__PURE__ */ jsx40("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
@@ -15758,7 +15955,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef15(VideoForRenderingForwardFunction);
 
 // src/video/html5-video.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -15782,7 +15979,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 } = useContext46(DurationsContext);
+  const { durations, setDurations } = useContext47(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -15815,14 +16012,14 @@ var VideoForwardingFunction = (props2, ref) => {
   const loopDuration = effectiveTrimAfter ?? (durationFetched === undefined ? undefined : durationFetched * fps);
   if (loop && loopDuration !== undefined) {
     if (!Number.isFinite(loopDuration)) {
-      return /* @__PURE__ */ jsx40(Html5Video, {
+      return /* @__PURE__ */ jsx41(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalStack,
         _remotionInternalNativeLoopPassed: true
       });
     }
-    return /* @__PURE__ */ jsx40(Loop, {
+    return /* @__PURE__ */ jsx41(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: effectiveTrimAfter,
         mediaDurationInFrames: loopDuration,
@@ -15832,7 +16029,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx40(Html5Video, {
+      children: /* @__PURE__ */ jsx41(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalStack,
@@ -15841,19 +16038,20 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx40(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx41(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx40(Sequence, {
+      children: /* @__PURE__ */ jsx41(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props2.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx40(Html5Video, {
+        children: /* @__PURE__ */ jsx41(Html5Video, {
           pauseWhenBuffering: shouldPauseWhenBuffering,
           onVideoFrame,
           ...otherProps,
           ref,
+          showInTimeline,
           _remotionInternalStack
         })
       })
@@ -15865,14 +16063,14 @@ var VideoForwardingFunction = (props2, ref) => {
     volume: props2.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx40(VideoForRendering, {
+    return /* @__PURE__ */ jsx41(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx40(VideoForPreview, {
+  return /* @__PURE__ */ jsx41(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
@@ -15952,6 +16150,7 @@ export {
   absoluteFillSchema,
   Video,
   VERSION,
+  Track,
   Still,
   Solid,
   Series,