@remotion/promo-pages 4.0.461 → 4.0.462

package/dist/Homepage.js

@@ -941,7 +941,7 @@ import * as React6 from "react";
 import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-import { useEffect as useEffect4, useMemo as useMemo11, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo12, useState as useState4 } from "react";
 import { useContext as useContext11 } from "react";
 import { createContext as createContext12 } from "react";
 import { useContext as useContext10, useMemo as useMemo9 } from "react";
@@ -954,24 +954,24 @@ import {
 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 import { useEffect as useEffect3, useMemo as useMemo10, useRef as useRef4 } from "react";
-import { useRef as useRef5 } from "react";
+import { useContext as useContext12, useRef as useRef6 } from "react";
+import { createContext as createContext14 } from "react";
+import React10, { useCallback as useCallback5, useMemo as useMemo11, useRef as useRef5, useState as useState3 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
-  useContext as useContext16,
+  useContext as useContext17,
   useEffect as useEffect5,
   useMemo as useMemo16,
   useState as useState6
 } from "react";
-import { useContext as useContext14, useMemo as useMemo13 } from "react";
-import { useContext as useContext13 } from "react";
-import { useContext as useContext12, useMemo as useMemo12 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-import { createContext as createContext14 } from "react";
-import React12, { useCallback as useCallback5, useMemo as useMemo14, useRef as useRef6, useState as useState4 } from "react";
+import { useContext as useContext15, useMemo as useMemo14 } from "react";
+import { useContext as useContext14 } from "react";
+import { useContext as useContext13, useMemo as useMemo13 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext15, useMemo as useMemo15 } from "react";
 import { createContext as createContext15 } from "react";
+import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext16, useMemo as useMemo15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -988,14 +988,14 @@ import {
   createContext as createContext16,
   forwardRef as forwardRef5,
   useCallback as useCallback7,
-  useContext as useContext17,
+  useContext as useContext18,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
   useRef as useRef9,
   useState as useState8
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
   createContext as createContext17,
   useCallback as useCallback8,
@@ -1006,29 +1006,29 @@ import {
   useState as useState9
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext31 } from "react";
 import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import { useContext as useContext19 } from "react";
+import { useContext as useContext20 } from "react";
 import { createContext as createContext19, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo28,
   useRef as useRef18,
   useState as useState16
 } from "react";
-import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
-  useContext as useContext20,
+  useContext as useContext21,
   useMemo as useMemo22,
   useRef as useRef11,
   useState as useState12
@@ -1036,20 +1036,20 @@ import React20, {
 import { useMemo as useMemo21 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
-import { useContext as useContext22 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
+import { useContext as useContext23 } from "react";
 import {
   useCallback as useCallback12,
-  useContext as useContext26,
+  useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
 import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef15 } from "react";
-import { useContext as useContext25, useMemo as useMemo25 } 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 useLayoutEffect7,
   useMemo as useMemo24,
@@ -1061,11 +1061,11 @@ import React22 from "react";
 import { useEffect as useEffect10, useState as useState15 } from "react";
 import { useEffect as useEffect11, useRef as useRef16 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext22, useContext as useContext27, useMemo as useMemo27 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
-  useContext as useContext29,
+  useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
@@ -1078,7 +1078,7 @@ import { forwardRef as forwardRef9, useCallback as useCallback14, useState as us
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   useCallback as useCallback15,
-  useContext as useContext31,
+  useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef20,
@@ -1097,7 +1097,7 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
 import { useMemo as useMemo32 } from "react";
-import { createContext as createContext23, useContext as useContext32, useMemo as useMemo31 } from "react";
+import { createContext as createContext23, useContext as useContext33, useMemo as useMemo31 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
@@ -1105,7 +1105,7 @@ import React32, { createContext as createContext24 } from "react";
 import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
@@ -1114,7 +1114,7 @@ import {
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
-  useContext as useContext34,
+  useContext as useContext35,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo34,
@@ -1132,10 +1132,10 @@ import React38, { createContext as createContext25 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext37 } from "react";
 import {
   forwardRef as forwardRef12,
-  useContext as useContext35,
+  useContext as useContext36,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
@@ -2416,39 +2416,6 @@ var useCurrentFrame = () => {
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
-var flattenEffects = (effects) => {
-  const out = [];
-  for (const item of effects) {
-    if (Array.isArray(item)) {
-      for (const inner of item) {
-        out.push(inner);
-      }
-    } else {
-      out.push(item);
-    }
-  }
-  return out;
-};
-var groupByBackend = (effects) => {
-  const runs = [];
-  let current = [];
-  let currentBackend = null;
-  for (const eff of effects) {
-    const { backend } = eff.definition;
-    if (currentBackend === null || backend === currentBackend) {
-      current.push(eff);
-      currentBackend = backend;
-    } else {
-      runs.push({ backend: currentBackend, effects: current });
-      current = [eff];
-      currentBackend = backend;
-    }
-  }
-  if (currentBackend !== null && current.length > 0) {
-    runs.push({ backend: currentBackend, effects: current });
-  }
-  return runs;
-};
 
 class CanvasPool {
   width;
@@ -2522,6 +2489,26 @@ class CanvasPool {
     }
   }
 }
+var groupByBackend = (effects) => {
+  const runs = [];
+  let current = [];
+  let currentBackend = null;
+  for (const eff of effects) {
+    const { backend } = eff.definition;
+    if (currentBackend === null || backend === currentBackend) {
+      current.push(eff);
+      currentBackend = backend;
+    } else {
+      runs.push({ backend: currentBackend, effects: current });
+      current = [eff];
+      currentBackend = backend;
+    }
+  }
+  if (currentBackend !== null && current.length > 0) {
+    runs.push({ backend: currentBackend, effects: current });
+  }
+  return runs;
+};
 var devicePromise = null;
 var getGpuDevice = () => {
   if (devicePromise) {
@@ -2667,18 +2654,318 @@ var useEffectChainState = () => {
     }
   }), []);
 };
-var useMemoizedEffects = (effects) => {
-  const previousRef = useRef5(null);
+var OverrideIdsToNodePathsGettersContext = createContext14({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext14({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
+var SequenceManager = React10.createContext({
+  registerSequence: () => {
+    throw new Error("SequenceManagerContext not initialized");
+  },
+  unregisterSequence: () => {
+    throw new Error("SequenceManagerContext not initialized");
+  },
+  sequences: []
+});
+var SequenceVisibilityToggleContext = React10.createContext({
+  hidden: {},
+  setHidden: () => {
+    throw new Error("SequenceVisibilityToggle not initialized");
+  }
+});
+var makeSequencePropsSubscriptionKey = (key) => {
+  return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
+};
+var VisualModeCodeValuesContext = React10.createContext({
+  codeValues: {}
+});
+var VisualModeDragOverridesContext = React10.createContext({
+  getDragOverrides: () => {
+    throw new Error("VisualModeDragOverridesContext not initialized");
+  },
+  getEffectDragOverrides: () => {
+    throw new Error("VisualModeDragOverridesContext not initialized");
+  }
+});
+var VisualModeSettersContext = React10.createContext({
+  setDragOverrides: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  },
+  clearDragOverrides: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  },
+  setEffectDragOverrides: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  },
+  clearEffectDragOverrides: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  },
+  setCodeValues: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  }
+});
+var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
+var SequenceManagerProvider = ({ children }) => {
+  const [sequences, setSequences] = useState3([]);
+  const [hidden, setHidden] = useState3({});
+  const [dragOverrides, setControlOverrides] = useState3({});
+  const controlOverridesRef = useRef5(dragOverrides);
+  controlOverridesRef.current = dragOverrides;
+  const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
+  const [codeValues, setCodeValuesMapState] = useState3({});
+  const setDragOverrides = useCallback5((nodePath, key, value) => {
+    setControlOverrides((prev) => ({
+      ...prev,
+      [makeSequencePropsSubscriptionKey(nodePath)]: {
+        ...prev[makeSequencePropsSubscriptionKey(nodePath)],
+        [key]: value
+      }
+    }));
+  }, []);
+  const clearDragOverrides = useCallback5((nodePath) => {
+    setControlOverrides((prev) => {
+      const key = makeSequencePropsSubscriptionKey(nodePath);
+      if (!prev[key]) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+  const setEffectDragOverrides = useCallback5((nodePath, effectIndex, key, value) => {
+    setEffectDragOverridesState((prev) => {
+      const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+      return {
+        ...prev,
+        [mapKey]: {
+          ...prev[mapKey],
+          [key]: value
+        }
+      };
+    });
+  }, []);
+  const clearEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
+    setEffectDragOverridesState((prev) => {
+      const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+      if (!prev[mapKey]) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next[mapKey];
+      return next;
+    });
+  }, []);
+  const setCodeValues = useCallback5((nodePath, values) => {
+    setCodeValuesMapState((prev) => {
+      const key = makeSequencePropsSubscriptionKey(nodePath);
+      const prevKey = prev[key];
+      const newKey = values(prevKey);
+      if (prevKey === newKey) {
+        return prev;
+      }
+      return { ...prev, [key]: newKey };
+    });
+  }, []);
+  const registerSequence = useCallback5((seq) => {
+    setSequences((seqs) => {
+      return [...seqs, seq];
+    });
+  }, []);
+  const unregisterSequence = useCallback5((seq) => {
+    setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+  }, []);
+  const sequenceContext = useMemo11(() => {
+    return {
+      registerSequence,
+      sequences,
+      unregisterSequence
+    };
+  }, [registerSequence, sequences, unregisterSequence]);
+  const hiddenContext = useMemo11(() => {
+    return {
+      hidden,
+      setHidden
+    };
+  }, [hidden]);
+  const getDragOverrides = useCallback5((nodePath) => {
+    return dragOverrides[makeSequencePropsSubscriptionKey(nodePath)] ?? {};
+  }, [dragOverrides]);
+  const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
+    return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
+  }, [effectDragOverridesState]);
+  const codeValuesContext = useMemo11(() => {
+    return {
+      codeValues
+    };
+  }, [codeValues]);
+  const dragOverridesContext = useMemo11(() => {
+    return {
+      getDragOverrides,
+      getEffectDragOverrides
+    };
+  }, [getDragOverrides, getEffectDragOverrides]);
+  const settersContext = useMemo11(() => {
+    return {
+      setDragOverrides,
+      clearDragOverrides,
+      setEffectDragOverrides,
+      clearEffectDragOverrides,
+      setCodeValues
+    };
+  }, [
+    setDragOverrides,
+    clearDragOverrides,
+    setEffectDragOverrides,
+    clearEffectDragOverrides,
+    setCodeValues
+  ]);
+  return /* @__PURE__ */ jsx9(SequenceManager.Provider, {
+    value: sequenceContext,
+    children: /* @__PURE__ */ jsx9(SequenceVisibilityToggleContext.Provider, {
+      value: hiddenContext,
+      children: /* @__PURE__ */ jsx9(VisualModeCodeValuesContext.Provider, {
+        value: codeValuesContext,
+        children: /* @__PURE__ */ jsx9(VisualModeDragOverridesContext.Provider, {
+          value: dragOverridesContext,
+          children: /* @__PURE__ */ jsx9(VisualModeSettersContext.Provider, {
+            value: settersContext,
+            children
+          })
+        })
+      })
+    })
+  });
+};
+var mergeOverrides = ({
+  descriptor,
+  codeOverrides,
+  dragOverrides
+}) => {
+  if (!codeOverrides && !dragOverrides) {
+    return { params: descriptor.params, effectKey: descriptor.effectKey };
+  }
+  const merged = {
+    ...descriptor.params
+  };
+  if (codeOverrides) {
+    for (const [key, value] of Object.entries(codeOverrides)) {
+      if (value !== undefined) {
+        merged[key] = value;
+      }
+    }
+  }
+  if (dragOverrides) {
+    for (const [key, value] of Object.entries(dragOverrides)) {
+      merged[key] = value;
+    }
+  }
+  return {
+    params: merged,
+    effectKey: descriptor.definition.calculateKey(merged)
+  };
+};
+var extractCodeOverrides = (propStatus) => {
+  if (!propStatus) {
+    return null;
+  }
+  const out = {};
+  let hasAny = false;
+  for (const [key, status] of Object.entries(propStatus)) {
+    if (status.canUpdate) {
+      out[key] = status.codeValue;
+      hasAny = true;
+    }
+  }
+  return hasAny ? out : null;
+};
+var useMemoizedEffectDefinitions = (effects) => {
+  const previousRef = useRef6(null);
+  const definitions = effects.map((descriptor) => descriptor.definition);
   const previous = previousRef.current;
-  const isSame = previous !== null && previous.length === effects.length && previous.every((p, i) => p.definition === effects[i].definition && p.effectKey === effects[i].effectKey);
+  const isSame = previous !== null && previous.length === definitions.length && previous.every((def, i) => def === definitions[i]);
   if (isSame) {
     return previous;
   }
-  const next = effects.map((e) => ({
-    definition: e.definition,
-    stack: e.stack,
-    effectKey: e.effectKey,
-    params: e.params,
+  previousRef.current = definitions;
+  return definitions;
+};
+var getEffectCodeValuesCtx = ({
+  codeValues,
+  nodePath,
+  effectIndex
+}) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return { type: "cannot-update-sequence", reason: "not-found" };
+  }
+  if (!status.canUpdate) {
+    return { type: "cannot-update-sequence", reason: status.reason };
+  }
+  const effect = status.effects.find((e) => e.effectIndex === effectIndex);
+  if (!effect) {
+    return { type: "cannot-update-effect", reason: "not-found" };
+  }
+  if (!effect.canUpdate) {
+    return { type: "cannot-update-effect", reason: effect.reason };
+  }
+  return { type: "can-update-effect", props: effect.props };
+};
+var getCodeValuesCtx = (codeValues, nodePath) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var useMemoizedEffects = ({
+  effects,
+  overrideId
+}) => {
+  const previousRef = useRef6(null);
+  const { codeValues } = useContext12(VisualModeCodeValuesContext);
+  const { getEffectDragOverrides } = useContext12(VisualModeDragOverridesContext);
+  const { overrideIdToNodePathMappings } = useContext12(OverrideIdsToNodePathsGettersContext);
+  const previous = previousRef.current;
+  const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
+  const resolved = effects.map((descriptor, index) => {
+    if (nodePath === null) {
+      return {
+        descriptor,
+        params: descriptor.params,
+        effectKey: descriptor.effectKey
+      };
+    }
+    const effectStatus = getEffectCodeValuesCtx({
+      codeValues,
+      nodePath,
+      effectIndex: index
+    });
+    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
+    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+    const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+    const { params, effectKey } = mergeOverrides({
+      descriptor,
+      codeOverrides,
+      dragOverrides
+    });
+    return { descriptor, params, effectKey };
+  });
+  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
+  if (isSame) {
+    return previous;
+  }
+  const next = resolved.map(({ descriptor, params, effectKey }) => ({
+    definition: descriptor.definition,
+    effectKey,
+    params,
     memoized: true
   }));
   previousRef.current = next;
@@ -2689,7 +2976,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.461";
+var VERSION = "4.0.462";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2718,12 +3005,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   set();
 };
 var useUnsafeVideoConfig = () => {
-  const context = useContext12(SequenceContext);
+  const context = useContext13(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo12(() => {
+  return useMemo13(() => {
     if (!video) {
       return null;
     }
@@ -2761,7 +3048,7 @@ var useUnsafeVideoConfig = () => {
 };
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext13(CanUseRemotionHooks);
+  const context = useContext14(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -2797,7 +3084,7 @@ var Freeze = ({
   if (!Number.isFinite(frameToFreeze)) {
     throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const isActive = useMemo13(() => {
+  const isActive = useMemo14(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -2806,9 +3093,9 @@ var Freeze = ({
     }
   }, [active, frame]);
   const timelineContext = useTimelineContext();
-  const sequenceContext = useContext14(SequenceContext);
+  const sequenceContext = useContext15(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo13(() => {
+  const timelineValue = useMemo14(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -2823,7 +3110,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo13(() => {
+  const newSequenceContext = useMemo14(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -2835,15 +3122,15 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx10(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx11(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx10(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx11(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
   });
 };
-var PremountContext = createContext14({
+var PremountContext = createContext15({
   premountFramesRemaining: 0
 });
 var sequenceStyleSchema = {
@@ -2910,154 +3197,6 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
-var nodePathToString = (nodePath) => {
-  return nodePath.join(".");
-};
-var SequenceManager = React12.createContext({
-  registerSequence: () => {
-    throw new Error("SequenceManagerContext not initialized");
-  },
-  unregisterSequence: () => {
-    throw new Error("SequenceManagerContext not initialized");
-  },
-  sequences: []
-});
-var SequenceVisibilityToggleContext = React12.createContext({
-  hidden: {},
-  setHidden: () => {
-    throw new Error("SequenceVisibilityToggle not initialized");
-  }
-});
-var getCodeValuesCtx = (codeValues, nodePath) => {
-  const status = codeValues[nodePathToString(nodePath)];
-  if (!status) {
-    return;
-  }
-  if (!status.canUpdate) {
-    return;
-  }
-  return status.props;
-};
-var VisualModeCodeValuesContext = React12.createContext({
-  getCodeValues: () => {
-    throw new Error("VisualModeCodeValuesContext not initialized");
-  }
-});
-var VisualModeDragOverridesContext = React12.createContext({
-  getDragOverrides: () => {
-    throw new Error("VisualModeDragOverridesContext not initialized");
-  }
-});
-var VisualModeSettersContext = React12.createContext({
-  setDragOverrides: () => {
-    throw new Error("VisualModeSettersContext not initialized");
-  },
-  clearDragOverrides: () => {
-    throw new Error("VisualModeSettersContext not initialized");
-  },
-  setCodeValues: () => {
-    throw new Error("VisualModeSettersContext not initialized");
-  }
-});
-var SequenceManagerProvider = ({ children }) => {
-  const [sequences, setSequences] = useState4([]);
-  const [hidden, setHidden] = useState4({});
-  const [dragOverrides, setControlOverrides] = useState4({});
-  const controlOverridesRef = useRef6(dragOverrides);
-  controlOverridesRef.current = dragOverrides;
-  const [codeValues, setCodeValuesMapState] = useState4({});
-  const setDragOverrides = useCallback5((nodePath, key, value) => {
-    setControlOverrides((prev) => ({
-      ...prev,
-      [nodePathToString(nodePath)]: {
-        ...prev[nodePathToString(nodePath)],
-        [key]: value
-      }
-    }));
-  }, []);
-  const clearDragOverrides = useCallback5((nodePath) => {
-    setControlOverrides((prev) => {
-      const key = nodePathToString(nodePath);
-      if (!prev[key]) {
-        return prev;
-      }
-      const next = { ...prev };
-      delete next[key];
-      return next;
-    });
-  }, []);
-  const setCodeValues = useCallback5((nodePath, values) => {
-    setCodeValuesMapState((prev) => {
-      const key = nodePathToString(nodePath);
-      const prevKey = prev[key];
-      const newKey = values(prevKey);
-      if (prevKey === newKey) {
-        return prev;
-      }
-      return { ...prev, [key]: newKey };
-    });
-  }, []);
-  const registerSequence = useCallback5((seq) => {
-    setSequences((seqs) => {
-      return [...seqs, seq];
-    });
-  }, []);
-  const unregisterSequence = useCallback5((seq) => {
-    setSequences((seqs) => seqs.filter((s) => s.id !== seq));
-  }, []);
-  const sequenceContext = useMemo14(() => {
-    return {
-      registerSequence,
-      sequences,
-      unregisterSequence
-    };
-  }, [registerSequence, sequences, unregisterSequence]);
-  const hiddenContext = useMemo14(() => {
-    return {
-      hidden,
-      setHidden
-    };
-  }, [hidden]);
-  const getDragOverrides = useCallback5((nodePath) => {
-    return dragOverrides[nodePathToString(nodePath)] ?? {};
-  }, [dragOverrides]);
-  const getCodeValues = useCallback5((nodePath) => {
-    return getCodeValuesCtx(codeValues, nodePath);
-  }, [codeValues]);
-  const codeValuesContext = useMemo14(() => {
-    return {
-      getCodeValues
-    };
-  }, [getCodeValues]);
-  const dragOverridesContext = useMemo14(() => {
-    return {
-      getDragOverrides
-    };
-  }, [getDragOverrides]);
-  const settersContext = useMemo14(() => {
-    return {
-      setDragOverrides,
-      clearDragOverrides,
-      setCodeValues
-    };
-  }, [setDragOverrides, clearDragOverrides, setCodeValues]);
-  return /* @__PURE__ */ jsx11(SequenceManager.Provider, {
-    value: sequenceContext,
-    children: /* @__PURE__ */ jsx11(SequenceVisibilityToggleContext.Provider, {
-      value: hiddenContext,
-      children: /* @__PURE__ */ jsx11(VisualModeCodeValuesContext.Provider, {
-        value: codeValuesContext,
-        children: /* @__PURE__ */ jsx11(VisualModeDragOverridesContext.Provider, {
-          value: dragOverridesContext,
-          children: /* @__PURE__ */ jsx11(VisualModeSettersContext.Provider, {
-            value: settersContext,
-            children
-          })
-        })
-      })
-    })
-  });
-};
 var ENABLE_V5_BREAKING_CHANGES = false;
 var deleteNestedKey = (obj, keysToRemove) => {
   for (const key of keysToRemove) {
@@ -3131,14 +3270,6 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
-var OverrideIdsToNodePathsGettersContext = createContext15({
-  overrideIdToNodePathMappings: {}
-});
-var OverrideIdsToNodePathsSettersContext = createContext15({
-  setOverrideIdToNodePath: () => {
-    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
-  }
-});
 var findPropsToDelete = ({
   schema,
   key,
@@ -3171,7 +3302,6 @@ var findPropsToDelete = ({
 };
 var getEffectiveVisualModeValue = ({
   codeValue,
-  runtimeValue,
   dragOverrideValue,
   defaultValue,
   shouldResortToDefaultValueIfUndefined = false
@@ -3179,12 +3309,6 @@ var getEffectiveVisualModeValue = ({
   if (dragOverrideValue !== undefined) {
     return dragOverrideValue;
   }
-  if (!codeValue) {
-    return runtimeValue;
-  }
-  if (!codeValue.canUpdate) {
-    return runtimeValue;
-  }
   if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
     return defaultValue;
   }
@@ -3221,9 +3345,8 @@ var computeEffectiveSchemaValuesDotNotation = ({
     if (field?.type === "hidden") {
       continue;
     }
-    const value = getEffectiveVisualModeValue({
+    const value = codeValueStatus === null || codeValueStatus.canUpdate === false ? currentValue[key] : getEffectiveVisualModeValue({
       codeValue: codeValueStatus,
-      runtimeValue: currentValue[key],
       dragOverrideValue: overrideValues[key],
       defaultValue: field?.default,
       shouldResortToDefaultValueIfUndefined: false
@@ -3309,9 +3432,9 @@ var wrapInSchema = (Component, schema) => {
         ref
       });
     }
-    const { getCodeValues } = useContext15(VisualModeCodeValuesContext);
-    const { getDragOverrides } = useContext15(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
+    const { codeValues } = useContext16(VisualModeCodeValuesContext);
+    const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     if (props._experimentalControls) {
       return React13.createElement(Component, {
         ...props,
@@ -3346,13 +3469,13 @@ var wrapInSchema = (Component, schema) => {
         schema,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
-        propStatus: nodePath === null ? undefined : getCodeValues(nodePath)
+        propStatus: nodePath === null ? undefined : getCodeValuesCtx(codeValues, nodePath)
       });
     }, [
       currentRuntimeValueDotNotation,
       getDragOverrides,
       nodePath,
-      getCodeValues
+      codeValues
     ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
     const mergedProps = mergeValues({
@@ -3389,7 +3512,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState6(() => String(Math.random()));
-  const parentSequence = useContext16(SequenceContext);
+  const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -3415,8 +3538,8 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext16(SequenceManager);
-  const { hidden } = useContext16(SequenceVisibilityToggleContext);
+  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const { hidden } = useContext17(SequenceVisibilityToggleContext);
   const premounting = useMemo16(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -3559,7 +3682,7 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext16(PremountContext);
+  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"');
@@ -3993,6 +4116,7 @@ var isHtmlInCanvasSupported = () => {
   cachedSupport = typeof ctx?.drawElementImage === "function" && typeof canvas.requestPaint === "function" && typeof canvas.captureElementImage === "function";
   return cachedSupport;
 };
+var HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
 function assertHtmlInCanvasDimensions(width, height) {
   if (typeof width !== "number" || typeof height !== "number") {
     throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -4030,11 +4154,11 @@ var HtmlInCanvasInner = forwardRef5(({
   durationInFrames,
   ...sequenceProps
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext17(HtmlInCanvasAncestorContext);
+  const isInsideAncestorHtmlInCanvas = useContext18(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
-    cancelRender2(new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled."));
+    cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
@@ -4051,7 +4175,11 @@ var HtmlInCanvasInner = forwardRef5(({
   }, [ref]);
   const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
-  const memoizedEffects = useMemoizedEffects(flattenEffects(effects));
+  const memoizedEffects = useMemoizedEffects({
+    effects,
+    overrideId: controls?.overrideId ?? null
+  });
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const effectsRef = useRef9(memoizedEffects);
   effectsRef.current = memoizedEffects;
   const frameRef = useRef9(frame);
@@ -4180,7 +4308,7 @@ var HtmlInCanvasInner = forwardRef5(({
     durationInFrames: resolvedDuration,
     name: "<HtmlInCanvas>",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffects,
+    _experimentalEffects: memoizedEffectDefinitions,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
@@ -4292,7 +4420,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] = useState10(() => {
@@ -4482,7 +4610,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]) {
@@ -5133,7 +5261,7 @@ 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 = useMemo22(() => {
@@ -5308,8 +5436,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext20(SharedAudioContext);
-  const tagsCtx = useContext20(SharedAudioTagsContext);
+  const audioCtx = useContext21(SharedAudioContext);
+  const tagsCtx = useContext21(SharedAudioTagsContext);
   const [elem] = useState12(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -5488,7 +5616,7 @@ var useVolume = ({
   const audioStuffRef = useRef13(null);
   const currentVolumeRef = useRef13(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext21(SharedAudioContext);
+  const sharedAudioContext = useContext22(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -5553,7 +5681,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -5642,7 +5770,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const [initialVolume] = useState13(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -5709,8 +5837,8 @@ var useImageInTimeline = ({
   loopDisplay,
   controls
 }) => {
-  const parentSequence = useContext23(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const parentSequence = useContext24(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -5791,9 +5919,9 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  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({
@@ -5953,7 +6081,7 @@ var useBufferManager = (logLevel, mountTime) => {
 };
 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__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -5983,7 +6111,7 @@ 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 useMemo25(() => ({
@@ -6394,6 +6522,23 @@ function checkInfiniteRange(name, arr) {
     }
   }
 }
+function assertValidInterpolateEasingOption(easing, inputRangeLength) {
+  if (easing === undefined) {
+    return;
+  }
+  if (typeof easing === "function") {
+    return;
+  }
+  const expectedLength = inputRangeLength - 1;
+  if (easing.length !== expectedLength) {
+    throw new Error(`When easing is an array, it must have one entry per segment between keyframes (length inputRange.length - 1 = ${expectedLength}), but got length ${easing.length}`);
+  }
+  for (let i = 0;i < easing.length; i++) {
+    if (typeof easing[i] !== "function") {
+      throw new Error(`easing[${i}] must be a function`);
+    }
+  }
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -6410,7 +6555,18 @@ function interpolate(input, inputRange, outputRange, options) {
   checkInfiniteRange("inputRange", inputRange);
   checkInfiniteRange("outputRange", outputRange);
   checkValidInputRange(inputRange);
-  const easing = options?.easing ?? ((num) => num);
+  assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+  const easingOption = options?.easing;
+  const defaultEasing = (num) => num;
+  const resolveEasingForSegment = (segmentIndex) => {
+    if (easingOption === undefined) {
+      return defaultEasing;
+    }
+    if (typeof easingOption === "function") {
+      return easingOption;
+    }
+    return easingOption[segmentIndex];
+  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -6424,7 +6580,7 @@ function interpolate(input, inputRange, outputRange, options) {
   }
   const range = findRange(input, inputRange);
   return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing,
+    easing: resolveEasingForSegment(range),
     extrapolateLeft,
     extrapolateRight
   });
@@ -6500,7 +6656,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 = useRef17(null);
@@ -6788,15 +6944,15 @@ var SetMediaVolumeContext = createContext22({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext27(MediaVolumeContext);
-  const { setMediaVolume } = useContext27(SetMediaVolumeContext);
+  const { mediaVolume } = useContext28(MediaVolumeContext);
+  const { setMediaVolume } = useContext28(SetMediaVolumeContext);
   return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext27(MediaVolumeContext);
-  const { setMediaMuted } = useContext27(SetMediaVolumeContext);
+  const { mediaMuted } = useContext28(MediaVolumeContext);
+  const { setMediaMuted } = useContext28(SetMediaVolumeContext);
   return useMemo27(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -6846,12 +7002,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext28(SequenceVisibilityToggleContext);
+  const { hidden } = useContext29(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   const [timelineId] = useState16(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -7006,8 +7162,8 @@ 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 = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -7116,7 +7272,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef7(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const audioTagsContext = useContext31(SharedAudioTagsContext);
   const {
     startFrom,
     endAt,
@@ -7135,7 +7291,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  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.`);
   }
@@ -7293,7 +7449,7 @@ var ImgInner = ({
   const imageRef = useRef20(null);
   const errors = useRef20({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const [timelineId] = useState18(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
@@ -7583,16 +7739,15 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
-var defineEffect = (definition) => definition;
-var createDescriptor = (definition, params) => {
+var createEffect = (definition) => {
   const widened = definition;
-  return {
+  const factory = (params = {}) => ({
     definition: widened,
     params,
-    stack: new Error().stack,
     effectKey: widened.calculateKey(params),
     memoized: false
-  };
+  });
+  return factory;
 };
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
@@ -7618,7 +7773,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
-  const context = useContext32(MediaEnabledContext);
+  const context = useContext33(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -7628,7 +7783,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext32(MediaEnabledContext);
+  const context = useContext33(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -7950,9 +8105,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -8164,7 +8319,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext34(SharedAudioContext);
+  const context = useContext35(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -8220,8 +8375,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext34(SequenceContext);
-  const { hidden } = useContext34(SequenceVisibilityToggleContext);
+  const parentSequence = useContext35(SequenceContext);
+  const { hidden } = useContext35(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -8746,13 +8901,15 @@ var Internals = {
   useEffectChainState,
   runEffectChain,
   useMemoizedEffects,
-  defineEffect,
-  createDescriptor,
+  useMemoizedEffectDefinitions,
+  createEffect,
   computeEffectiveSchemaValuesDotNotation,
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
-  flattenEffects
+  makeSequencePropsSubscriptionKey,
+  getCodeValuesCtx,
+  getEffectCodeValuesCtx
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -9347,13 +9504,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(null);
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
   const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -9563,7 +9720,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 } = useContext36(DurationsContext);
+  const { durations, setDurations } = useContext37(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -15814,10 +15971,10 @@ import React11 from "react";
 import * as React82 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
 import * as React9 from "react";
-import * as React10 from "react";
+import * as React102 from "react";
 import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
-import * as React122 from "react";
+import * as React12 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React16 from "react";
 import * as React132 from "react";
@@ -16712,43 +16869,43 @@ function composeRefs2(...refs) {
 function useComposedRefs2(...refs) {
   return React9.useCallback(composeRefs2(...refs), refs);
 }
-var Slot2 = React10.forwardRef((props, forwardedRef) => {
+var Slot2 = React102.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React10.Children.toArray(children);
+  const childrenArray = React102.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable2);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React10.Children.count(newElement) > 1)
-          return React10.Children.only(null);
-        return React10.isValidElement(newElement) ? newElement.props.children : null;
+        if (React102.Children.count(newElement) > 1)
+          return React102.Children.only(null);
+        return React102.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children: React10.isValidElement(newElement) ? React10.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children: React102.isValidElement(newElement) ? React102.cloneElement(newElement, undefined, newChildren) : null });
   }
   return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot2.displayName = "Slot";
-var SlotClone = React10.forwardRef((props, forwardedRef) => {
+var SlotClone = React102.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React10.isValidElement(children)) {
+  if (React102.isValidElement(children)) {
     const childrenRef = getElementRef2(children);
-    return React10.cloneElement(children, {
+    return React102.cloneElement(children, {
       ...mergeProps2(slotProps, children.props),
       ref: forwardedRef ? composeRefs2(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React10.Children.count(children) > 1 ? React10.Children.only(null) : null;
+  return React102.Children.count(children) > 1 ? React102.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable2 = ({ children }) => {
   return /* @__PURE__ */ jsx142(Fragment5, { children });
 };
 function isSlottable2(child) {
-  return React10.isValidElement(child) && child.type === Slottable2;
+  return React102.isValidElement(child) && child.type === Slottable2;
 }
 function mergeProps2(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -16838,9 +16995,9 @@ function createCollection(name) {
     createCollectionScope
   ];
 }
-var DirectionContext = React122.createContext(undefined);
+var DirectionContext = React12.createContext(undefined);
 function useDirection(localDir) {
-  const globalDir = React122.useContext(DirectionContext);
+  const globalDir = React12.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 var NODES = [
@@ -24863,17 +25020,18 @@ var CommunityStats = () => /* @__PURE__ */ jsxs12("div", {
 var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
+import { createContext as createContext32 } from "react";
 import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
-import { useContext as useContext43, useLayoutEffect as useLayoutEffect17 } from "react";
+import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext44, useEffect as useEffect52, useRef as useRef42 } from "react";
+import { useContext as useContext45, useEffect as useEffect52, useRef as useRef42 } from "react";
 import { useEffect as useEffect310, useRef as useRef26 } from "react";
-import { useCallback as useCallback34, useContext as useContext38, useMemo as useMemo51, useRef as useRef43, useState as useState310 } from "react";
+import { useCallback as useCallback34, useContext as useContext39, useMemo as useMemo51, useRef as useRef43, useState as useState310 } from "react";
 import { useEffect as useEffect43, useRef as useRef310 } from "react";
 import { useCallback as useCallback24, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -24885,7 +25043,7 @@ import {
   useRef as useRef112,
   useState as useState132
 } from "react";
-import React102, {
+import React103, {
   Suspense as Suspense2,
   forwardRef as forwardRef33,
   useCallback as useCallback102,
@@ -24986,6 +25144,23 @@ function checkInfiniteRange2(name, arr) {
     }
   }
 }
+function assertValidInterpolateEasingOption2(easing, inputRangeLength) {
+  if (easing === undefined) {
+    return;
+  }
+  if (typeof easing === "function") {
+    return;
+  }
+  const expectedLength = inputRangeLength - 1;
+  if (easing.length !== expectedLength) {
+    throw new Error(`When easing is an array, it must have one entry per segment between keyframes (length inputRange.length - 1 = ${expectedLength}), but got length ${easing.length}`);
+  }
+  for (let i = 0;i < easing.length; i++) {
+    if (typeof easing[i] !== "function") {
+      throw new Error(`easing[${i}] must be a function`);
+    }
+  }
+}
 function interpolate3(input, inputRange, outputRange, options2) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -25002,7 +25177,18 @@ function interpolate3(input, inputRange, outputRange, options2) {
   checkInfiniteRange2("inputRange", inputRange);
   checkInfiniteRange2("outputRange", outputRange);
   checkValidInputRange2(inputRange);
-  const easing = options2?.easing ?? ((num) => num);
+  assertValidInterpolateEasingOption2(options2?.easing, inputRange.length);
+  const easingOption = options2?.easing;
+  const defaultEasing = (num) => num;
+  const resolveEasingForSegment = (segmentIndex) => {
+    if (easingOption === undefined) {
+      return defaultEasing;
+    }
+    if (typeof easingOption === "function") {
+      return easingOption;
+    }
+    return easingOption[segmentIndex];
+  };
   let extrapolateLeft = "extend";
   if (options2?.extrapolateLeft !== undefined) {
     extrapolateLeft = options2.extrapolateLeft;
@@ -25016,7 +25202,7 @@ function interpolate3(input, inputRange, outputRange, options2) {
   }
   const range = findRange2(input, inputRange);
   return interpolateFunction2(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing,
+    easing: resolveEasingForSegment(range),
     extrapolateLeft,
     extrapolateRight
   });
@@ -25570,6 +25756,70 @@ var proResProfileOptions = [
   "light",
   "proxy"
 ];
+var sequenceStyleSchema2 = {
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Offset"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  },
+  premountFor: {
+    type: "number",
+    default: 0,
+    description: "Premount For",
+    min: 0,
+    step: 1
+  },
+  postmountFor: {
+    type: "hidden"
+  },
+  styleWhilePremounted: {
+    type: "hidden"
+  },
+  styleWhilePostmounted: {
+    type: "hidden"
+  }
+};
+var sequenceSchema2 = {
+  layout: {
+    type: "enum",
+    default: "absolute-fill",
+    description: "Layout",
+    variants: {
+      "absolute-fill": sequenceStyleSchema2,
+      none: {}
+    }
+  }
+};
+var sequenceSchemaDefaultLayoutNone2 = {
+  ...sequenceSchema2,
+  layout: {
+    ...sequenceSchema2.layout,
+    default: "none"
+  }
+};
 var ENABLE_V5_BREAKING_CHANGES2 = false;
 var validateFrame2 = ({
   allowFloats,
@@ -25733,7 +25983,8 @@ var NoReactInternals = {
   FILE_TOKEN: FILE_TOKEN2,
   validateCodec: validateCodec2,
   proResProfileOptions,
-  findPropsToDelete: findPropsToDelete2
+  findPropsToDelete: findPropsToDelete2,
+  sequenceSchema: sequenceSchema2
 };
 
 // ../player/dist/esm/index.mjs
@@ -25758,6 +26009,21 @@ import { useContext as useContext62, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
 import { jsx as jsx163 } from "react/jsx-runtime";
 "use client";
+if (typeof createContext32 !== "function") {
+  const err = [
+    'Remotion requires React.createContext, but it is "undefined".',
+    'If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',
+    "",
+    "Before:",
+    '  import {Player} from "@remotion/player";',
+    "",
+    "After:",
+    '  "use client";',
+    '  import {Player} from "@remotion/player";'
+  ];
+  throw new Error(err.join(`
+`));
+}
 var ICON_SIZE2 = 25;
 var fullscreenIconSize = 16;
 var PlayIcon = () => {
@@ -26190,7 +26456,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext43(Internals.BufferingContextReact);
+  const bufferManager = useContext44(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -26273,21 +26539,21 @@ var usePlayer = () => {
   const playStart = useRef43(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext38(Internals.SharedAudioContext);
-  const audioTagsContext = useContext38(Internals.SharedAudioTagsContext);
+  const audioContext = useContext39(Internals.SharedAudioContext);
+  const audioTagsContext = useContext39(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
   const frameRef = useRef43(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext38(PlayerEventEmitterContext);
+  const emitter = useContext39(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext38(Internals.BufferingContextReact);
+  const bufferingContext = useContext39(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26635,11 +26901,11 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext44(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext45(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef42(0);
-  const context = useContext44(Internals.BufferingContextReact);
+  const context = useContext45(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -28082,7 +28348,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
   }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
-var reactVersion = React102.version.split(".")[0];
+var reactVersion = React103.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -30057,7 +30323,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React57, { useContext as useContext45, useMemo as useMemo53 } from "react";
+import React57, { useContext as useContext46, useMemo as useMemo53 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -30074,7 +30340,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext45(Context);
+  const context = useContext46(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -30088,9 +30354,9 @@ import { useContext as useContext212, useEffect as useEffect44, useMemo as useMe
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext310, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
+import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -30106,7 +30372,7 @@ import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx315 } from "react/jsx-runtime";
 import { useMemo as useMemo63, useState as useState63 } from "react";
 import {
-  useContext as useContext46,
+  useContext as useContext47,
   useEffect as useEffect210,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
@@ -31873,7 +32139,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext48(Internals.SharedAudioContext);
   useLayoutEffect18(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -34149,7 +34415,7 @@ var AudioForRendering2 = ({
   const frame = useCurrentFrame();
   const absoluteFrame = Internals.useTimelinePosition();
   const videoConfig = Internals.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext310(Internals.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext311(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
@@ -34161,7 +34427,7 @@ var AudioForRendering2 = ({
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
-  const sequenceContext = useContext310(Internals.SequenceContext);
+  const sequenceContext = useContext311(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -34514,7 +34780,7 @@ var VideoForPreviewAssertedShowing = ({
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
   const [playing] = Timeline2.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
-  const sharedAudioContext = useContext46(SharedAudioContext22);
+  const sharedAudioContext = useContext47(SharedAudioContext22);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
@@ -34535,7 +34801,7 @@ var VideoForPreviewAssertedShowing = ({
   effectChainStateRef.current = effectChainState;
   const frameRef = useRef210(frame);
   frameRef.current = frame;
-  const parentSequence = useContext46(SequenceContext22);
+  const parentSequence = useContext47(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
@@ -34543,7 +34809,7 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef210(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext46(Internals.BufferingContextReact);
+  const buffering = useContext47(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -35335,7 +35601,11 @@ var VideoInner = ({
     type: "video",
     data: basicInfo
   }), [basicInfo]);
-  const memoizedEffects = Internals.useMemoizedEffects(Internals.flattenEffects(_experimentalEffects ?? []));
+  const memoizedEffects = Internals.useMemoizedEffects({
+    effects: _experimentalEffects ?? [],
+    overrideId: controls?.overrideId ?? null
+  });
+  const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(_experimentalEffects ?? []);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -35348,7 +35618,7 @@ var VideoInner = ({
     name: name ?? "<Video>",
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
-    _experimentalEffects: memoizedEffects,
+    _experimentalEffects: memoizedEffectDefinitions,
     showInTimeline: showInTimeline ?? true,
     children: /* @__PURE__ */ jsx65(InnerVideo, {
       audioStreamIndex: audioStreamIndex ?? 0,
@@ -36687,7 +36957,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.461";
+var VERSION2 = "4.0.462";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43669,6 +43939,7 @@ var listOfRemotionPackages = [
   "@remotion/serverless",
   "@remotion/serverless-client",
   "@remotion/skills",
+  "@remotion/skills-evals",
   "@remotion/studio-server",
   "@remotion/studio-shared",
   "@remotion/studio",