@remotion/promo-pages 4.0.462 → 4.0.464

package/dist/design.js

@@ -36,7 +36,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 import * as React24 from "react";
 import * as React3 from "react";
 import { Fragment as Fragment2, jsx as jsx38 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback22, useRef as useRef24, useState as useState22 } from "react";
+import React52, { useCallback as useCallback24, useRef as useRef25, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo38, useState as useState23 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo39, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5743,8 +5743,15 @@ 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 jsx72 } from "react/jsx-runtime";
-import { useEffect as useEffect4, useMemo as useMemo12, useState as useState4 } from "react";
-import { useContext as useContext11 } from "react";
+import {
+  forwardRef as forwardRef3,
+  useContext as useContext17,
+  useEffect as useEffect3,
+  useMemo as useMemo14,
+  useState as useState5
+} from "react";
+import { useRef as useRef6 } from "react";
+import { useContext as useContext14, useMemo as useMemo11 } from "react";
 import { createContext as createContext12 } from "react";
 import { useContext as useContext10, useMemo as useMemo9 } from "react";
 import {
@@ -5755,194 +5762,195 @@ import {
   useState as useState2
 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
-import { useEffect as useEffect3, useMemo as useMemo10, useRef as useRef4 } 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 { useContext as useContext11 } from "react";
+import { useContext as useContext13 } from "react";
+import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
+import { createContext as createContext14 } from "react";
+import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
+import React12, { forwardRef as forwardRef2, useState as useState4, useContext as useContext16, useMemo as useMemo13 } from "react";
+import { useContext as useContext15, useRef as useRef5 } from "react";
+import { createContext as createContext15 } from "react";
+import { jsx as jsx112 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef3,
-  useContext as useContext17,
+  forwardRef as forwardRef4,
   useEffect as useEffect5,
-  useMemo as useMemo16,
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef9,
   useState as useState6
 } 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 jsx112 } from "react/jsx-runtime";
-import { createContext as createContext15 } from "react";
-import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext16, useMemo as useMemo15 } from "react";
+import React14, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef5,
+  useCallback as useCallback7,
   useEffect as useEffect6,
-  useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef8,
+  useMemo as useMemo17,
   useState as useState7
 } from "react";
-import React15, { useCallback as useCallback6, useImperativeHandle, useRef as useRef7 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
   createContext as createContext16,
-  forwardRef as forwardRef5,
-  useCallback as useCallback7,
+  forwardRef as forwardRef6,
+  useCallback as useCallback8,
   useContext as useContext18,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo17,
-  useRef as useRef9,
-  useState as useState8
+  useMemo as useMemo18,
+  useRef as useRef10
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState9 } from "react";
 import {
   createContext as createContext17,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo18,
-  useRef as useRef10,
-  useState as useState9
+  useMemo as useMemo19,
+  useRef as useRef11,
+  useState as useState8
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext31 } from "react";
-import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback15, useContext as useContext31 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo20 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { useContext as useContext20 } from "react";
-import { createContext as createContext19, useEffect as useEffect7, useState as useState11 } from "react";
+import { createContext as createContext19, useEffect as useEffect7, useState as useState10 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo21, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
+import { useCallback as useCallback14 } from "react";
 import React23, {
-  forwardRef as forwardRef6,
+  forwardRef as forwardRef7,
   useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo28,
-  useRef as useRef18,
-  useState as useState16
+  useMemo as useMemo29,
+  useRef as useRef19,
+  useState as useState15
 } from "react";
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef14 } from "react";
 import React20, {
   createContext as createContext21,
   createRef as createRef2,
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext21,
-  useMemo as useMemo22,
-  useRef as useRef11,
-  useState as useState12
+  useMemo as useMemo23,
+  useRef as useRef12,
+  useState as useState11
 } from "react";
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo22 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
-import { useRef as useRef12 } from "react";
-import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
+import { useRef as useRef13 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo24, useState as useState12 } from "react";
 import { useContext as useContext23 } from "react";
 import {
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
-  useRef as useRef17
+  useRef as useRef18
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef15 } from "react";
-import { useContext as useContext26, useMemo as useMemo25 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef16 } from "react";
+import { useContext as useContext26, useMemo as useMemo26 } from "react";
 import React21, {
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo24,
-  useRef as useRef14,
-  useState as useState14
+  useMemo as useMemo25,
+  useRef as useRef15,
+  useState as useState13
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 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 useEffect10, useState as useState14 } from "react";
+import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo28 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef8,
   useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo29,
-  useRef as useRef19
+  useMemo as useMemo30,
+  useRef as useRef20
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import { jsx as jsx24 } from "react/jsx-runtime";
-import { forwardRef as forwardRef9, useCallback as useCallback14, useState as useState17 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback16, useState as useState16 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
-  useCallback as useCallback15,
+  useCallback as useCallback17,
   useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
-  useRef as useRef20,
-  useState as useState18
+  useRef as useRef21,
+  useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React28 from "react";
 import {
-  useCallback as useCallback16,
+  useCallback as useCallback18,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo30,
-  useRef as useRef21,
-  useState as useState19
+  useMemo as useMemo31,
+  useRef as useRef22,
+  useState as useState18
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
-import { useMemo as useMemo322 } from "react";
-import { createContext as createContext23, useContext as useContext33, useMemo as useMemo31 } from "react";
+import { useMemo as useMemo33 } from "react";
+import { createContext as createContext23, useContext as useContext33, useMemo as useMemo322 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
 import React32, { createContext as createContext24 } from "react";
-import { useCallback as useCallback18 } from "react";
+import { useCallback as useCallback21 } from "react";
 import {
-  useCallback as useCallback17,
+  useCallback as useCallback19,
   useContext as useContext34,
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo33,
-  useState as useState20
+  useMemo as useMemo34,
+  useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
-  forwardRef as forwardRef10,
+  forwardRef as forwardRef11,
   useContext as useContext35,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo34,
-  useRef as useRef22,
-  useState as useState21
+  useMemo as useMemo35,
+  useRef as useRef23,
+  useState as useState20,
+  useCallback as useCallback20
 } from "react";
 import { useEffect as useEffect17 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import React36, { useMemo as useMemo35 } from "react";
+import React36, { useMemo as useMemo36 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef11, useMemo as useMemo36 } from "react";
+import { Children, forwardRef as forwardRef12, useMemo as useMemo37 } from "react";
 import React37 from "react";
 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 useContext37 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback22, useContext as useContext37 } from "react";
 import {
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef13,
   useContext as useContext36,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo37,
-  useRef as useRef23
+  useMemo as useMemo38,
+  useRef as useRef24
 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import { jsx as jsx37 } from "react/jsx-runtime";
@@ -7013,6 +7021,39 @@ var Composition = (props) => {
     ...props
   });
 };
+var componentsToAddStacksTo = [];
+var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+var addSequenceStackTraces = (component) => {
+  componentsToAddStacksTo.push(component);
+};
+var VERSION = "4.0.464";
+var checkMultipleRemotionVersions = () => {
+  if (typeof globalThis === "undefined") {
+    return;
+  }
+  const set = () => {
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== "undefined") {
+      window.remotion_imported = VERSION;
+    }
+  };
+  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
+  if (alreadyImported) {
+    if (alreadyImported === VERSION) {
+      return;
+    }
+    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
+      set();
+      return;
+    }
+    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
+      VERSION,
+      typeof alreadyImported === "string" ? alreadyImported : "an older version"
+    ].filter(truthy2).join(" and ")}. This will cause things to break in an unexpected way.
+Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+  }
+  set();
+};
 var SequenceContext = createContext12(null);
 var exports_timeline_position_state = {};
 __export2(exports_timeline_position_state, {
@@ -7218,253 +7259,212 @@ var useCurrentFrame = () => {
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
-
-class CanvasPool {
-  width;
-  height;
-  pairs = new Map;
-  lostContexts = new Set;
-  constructor(width, height) {
-    this.width = width;
-    this.height = height;
-  }
-  getPair(backend) {
-    const existing = this.pairs.get(backend);
-    if (existing) {
-      return existing;
+var useUnsafeVideoConfig = () => {
+  const context = useContext12(SequenceContext);
+  const ctxWidth = context?.width ?? null;
+  const ctxHeight = context?.height ?? null;
+  const ctxDuration = context?.durationInFrames ?? null;
+  const video = useVideo();
+  return useMemo10(() => {
+    if (!video) {
+      return null;
     }
-    const pair = [
-      this.allocateCanvas(backend),
-      this.allocateCanvas(backend)
-    ];
-    this.pairs.set(backend, pair);
-    return pair;
-  }
-  assertContextNotLost(canvas) {
-    if (this.lostContexts.has(canvas)) {
-      throw new Error("WebGL context was lost during canvas effect rendering. " + "This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). " + "Try reducing concurrency or increasing the Lambda function memory.");
+    const {
+      id,
+      durationInFrames,
+      fps,
+      height,
+      width,
+      defaultProps,
+      props,
+      defaultCodec,
+      defaultOutName,
+      defaultVideoImageFormat,
+      defaultPixelFormat,
+      defaultProResProfile,
+      defaultSampleRate
+    } = video;
+    return {
+      id,
+      width: ctxWidth ?? width,
+      height: ctxHeight ?? height,
+      fps,
+      durationInFrames: ctxDuration ?? durationInFrames,
+      defaultProps,
+      props,
+      defaultCodec,
+      defaultOutName,
+      defaultVideoImageFormat,
+      defaultPixelFormat,
+      defaultProResProfile,
+      defaultSampleRate
+    };
+  }, [ctxDuration, ctxHeight, ctxWidth, video]);
+};
+var useVideoConfig = () => {
+  const videoConfig = useUnsafeVideoConfig();
+  const context = useContext13(CanUseRemotionHooks);
+  const isPlayer = useIsPlayer();
+  if (!videoConfig) {
+    if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
+      throw new Error([
+        "No video config found. Likely reasons:",
+        "- You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.",
+        "- You have multiple versions of Remotion installed which causes the React context to get lost."
+      ].join("-"));
     }
+    throw new Error("No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.");
   }
-  allocateCanvas(backend) {
-    const canvas = document.createElement("canvas");
-    canvas.width = this.width;
-    canvas.height = this.height;
-    switch (backend) {
-      case "2d": {
-        const ctx = canvas.getContext("2d", {
-          colorSpace: "srgb"
-        });
-        if (!ctx) {
-          throw new Error("Failed to acquire 2D context for canvas effect");
-        }
-        return canvas;
-      }
-      case "webgl2": {
-        const ctx = canvas.getContext("webgl2", {
-          premultipliedAlpha: true,
-          alpha: true,
-          preserveDrawingBuffer: true
-        });
-        if (!ctx) {
-          throw new Error("Failed to acquire WebGL2 context for canvas effect");
-        }
-        canvas.addEventListener("webglcontextlost", (e) => {
-          e.preventDefault();
-          this.lostContexts.add(canvas);
-        });
-        canvas.addEventListener("webglcontextrestored", () => {
-          this.lostContexts.delete(canvas);
-        });
-        ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-        return canvas;
-      }
-      case "webgpu": {
-        if (typeof navigator === "undefined" || !("gpu" in navigator)) {
-          throw new Error("WebGPU is not available in this environment for canvas effect");
-        }
-        return canvas;
-      }
-      default: {
-        const exhaustive = backend;
-        throw new Error(`Unknown effect backend: ${exhaustive}`);
-      }
-    }
+  if (!context) {
+    throw new Error("Called useVideoConfig() outside a Remotion composition.");
   }
-}
-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;
-    }
+  return videoConfig;
+};
+var Freeze = ({
+  frame: frameToFreeze,
+  children,
+  active = true
+}) => {
+  const frame = useCurrentFrame();
+  const videoConfig = useVideoConfig();
+  if (typeof frameToFreeze === "undefined") {
+    throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
   }
-  if (currentBackend !== null && current.length > 0) {
-    runs.push({ backend: currentBackend, effects: current });
+  if (typeof frameToFreeze !== "number") {
+    throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frameToFreeze}`);
   }
-  return runs;
-};
-var devicePromise = null;
-var getGpuDevice = () => {
-  if (devicePromise) {
-    return devicePromise;
+  if (Number.isNaN(frameToFreeze)) {
+    throw new Error(`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`);
   }
-  devicePromise = (async () => {
-    if (typeof navigator === "undefined" || !("gpu" in navigator)) {
-      throw new Error("WebGPU is not available in this environment");
-    }
-    const { gpu } = navigator;
-    const adapter = await gpu.requestAdapter();
-    if (!adapter) {
-      throw new Error("No WebGPU adapter available");
-    }
-    return adapter.requestDevice();
-  })();
-  return devicePromise;
-};
-var createEffectChainState = (width, height) => ({
-  pool: new CanvasPool(width, height),
-  setupCache: new WeakMap,
-  cleanupRegistry: [],
-  currentRunId: 0
-});
-var cleanupEffectChainState = (state) => {
-  state.currentRunId++;
-  for (const entry of state.cleanupRegistry) {
-    entry.definition.cleanup(entry.state);
-  }
-};
-var ensureSetup = (state, def, target) => {
-  const widened = def;
-  if (state.setupCache.has(widened)) {
-    return state.setupCache.get(widened);
+  if (!Number.isFinite(frameToFreeze)) {
+    throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const setupState = def.setup(target);
-  state.setupCache.set(widened, setupState);
-  state.cleanupRegistry.push({ definition: widened, state: setupState });
-  return setupState;
-};
-var runEffectChain = async ({
-  state,
-  source,
-  effects,
-  output,
-  frame,
-  width,
-  height
-}) => {
-  const runId = ++state.currentRunId;
-  const isCancelled = () => state.currentRunId !== runId;
-  const runs = groupByBackend(effects);
-  let currentImage = source;
-  let lastTarget = null;
-  if (runs.length === 0) {
-    if (source === output) {
-      return true;
+  const isActive = useMemo11(() => {
+    if (typeof active === "boolean") {
+      return active;
     }
-    const ctx = output.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to acquire 2D context for output canvas");
+    if (typeof active === "function") {
+      return active(frame);
     }
-    ctx.clearRect(0, 0, width, height);
-    ctx.drawImage(currentImage, 0, 0, width, height);
-    return true;
-  }
-  let needsGpuDevice = false;
-  for (const run of runs) {
-    if (run.backend === "webgpu") {
-      needsGpuDevice = true;
-      break;
+  }, [active, frame]);
+  const timelineContext = useTimelineContext();
+  const sequenceContext = useContext14(SequenceContext);
+  const relativeFrom = sequenceContext?.relativeFrom ?? 0;
+  const timelineValue = useMemo11(() => {
+    if (!isActive) {
+      return timelineContext;
     }
-  }
-  const gpuDevice = needsGpuDevice ? await getGpuDevice() : null;
-  if (isCancelled()) {
-    return false;
-  }
-  for (let runIndex = 0;runIndex < runs.length; runIndex++) {
-    const run = runs[runIndex];
-    const [a, b] = state.pool.getPair(run.backend);
-    let dst = a;
-    for (const eff of run.effects) {
-      const def = eff.definition;
-      const setupState = ensureSetup(state, def, dst);
-      def.apply({
-        source: currentImage,
-        target: dst,
-        state: setupState,
-        params: eff.params,
-        frame,
-        width,
-        height,
-        gpuDevice
-      });
-      if (run.backend === "webgl2") {
-        state.pool.assertContextNotLost(dst);
+    return {
+      ...timelineContext,
+      playing: false,
+      imperativePlaying: {
+        current: false
+      },
+      frame: {
+        [videoConfig.id]: frameToFreeze + relativeFrom
       }
-      currentImage = dst;
-      dst = dst === a ? b : a;
+    };
+  }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
+  const newSequenceContext = useMemo11(() => {
+    if (!sequenceContext) {
+      return null;
     }
-    lastTarget = currentImage ?? lastTarget;
-    const nextRun = runs[runIndex + 1];
-    if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-      const bitmap = await createImageBitmap(lastTarget);
-      if (isCancelled()) {
-        bitmap.close();
-        return false;
-      }
-      currentImage = bitmap;
+    if (!isActive) {
+      return sequenceContext;
     }
+    return {
+      ...sequenceContext,
+      cumulatedFrom: 0
+    };
+  }, [sequenceContext, isActive]);
+  return /* @__PURE__ */ jsx92(TimelineContext.Provider, {
+    value: timelineValue,
+    children: /* @__PURE__ */ jsx92(SequenceContext.Provider, {
+      value: newSequenceContext,
+      children
+    })
+  });
+};
+var PremountContext = createContext14({
+  premountFramesRemaining: 0
+});
+var sequenceVisualStyleSchema = {
+  "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"
   }
-  if (!lastTarget) {
-    return true;
-  }
-  const outCtx = output.getContext("2d");
-  if (!outCtx) {
-    throw new Error("Failed to acquire 2D context for output canvas");
+};
+var sequencePremountSchema = {
+  premountFor: {
+    type: "number",
+    default: 0,
+    description: "Premount For",
+    min: 0,
+    step: 1
+  },
+  postmountFor: {
+    type: "hidden"
+  },
+  styleWhilePremounted: {
+    type: "hidden"
+  },
+  styleWhilePostmounted: {
+    type: "hidden"
   }
-  outCtx.clearRect(0, 0, width, height);
-  outCtx.drawImage(lastTarget, 0, 0, width, height);
-  return true;
 };
-var useEffectChainState = () => {
-  const chainStateRef = useRef4(null);
-  const sizeRef = useRef4(null);
-  useEffect3(() => {
-    return () => {
-      if (chainStateRef.current) {
-        cleanupEffectChainState(chainStateRef.current);
-      }
-    };
-  }, []);
-  return useMemo10(() => ({
-    get: (width, height) => {
-      if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
-        if (chainStateRef.current) {
-          cleanupEffectChainState(chainStateRef.current);
-        }
-        chainStateRef.current = createEffectChainState(width, height);
-        sizeRef.current = { width, height };
-      }
-      return chainStateRef.current;
+var sequenceStyleSchema = {
+  ...sequenceVisualStyleSchema,
+  ...sequencePremountSchema
+};
+var hiddenField = {
+  type: "boolean",
+  default: false,
+  description: "Hidden"
+};
+var sequenceSchema = {
+  hidden: hiddenField,
+  layout: {
+    type: "enum",
+    default: "absolute-fill",
+    description: "Layout",
+    variants: {
+      "absolute-fill": sequenceStyleSchema,
+      none: {}
     }
-  }), []);
+  }
 };
-var OverrideIdsToNodePathsGettersContext = createContext14({
-  overrideIdToNodePathMappings: {}
-});
-var OverrideIdsToNodePathsSettersContext = createContext14({
-  setOverrideIdToNodePath: () => {
-    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+var sequenceSchemaDefaultLayoutNone = {
+  ...sequenceSchema,
+  layout: {
+    ...sequenceSchema.layout,
+    default: "none"
   }
-});
-var SequenceManager = React10.createContext({
+};
+var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -7473,19 +7473,13 @@ var SequenceManager = React10.createContext({
   },
   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({
+var VisualModeCodeValuesContext = React11.createContext({
   codeValues: {}
 });
-var VisualModeDragOverridesContext = React10.createContext({
+var VisualModeDragOverridesContext = React11.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -7493,7 +7487,7 @@ var VisualModeDragOverridesContext = React10.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React10.createContext({
+var VisualModeSettersContext = React11.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -7513,9 +7507,8 @@ var VisualModeSettersContext = React10.createContext({
 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);
+  const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
   const [codeValues, setCodeValuesMapState] = useState3({});
@@ -7581,37 +7574,31 @@ var SequenceManagerProvider = ({ children }) => {
   const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo11(() => {
+  const sequenceContext = useMemo12(() => {
     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(() => {
+  const codeValuesContext = useMemo12(() => {
     return {
       codeValues
     };
   }, [codeValues]);
-  const dragOverridesContext = useMemo11(() => {
+  const dragOverridesContext = useMemo12(() => {
     return {
       getDragOverrides,
       getEffectDragOverrides
     };
   }, [getDragOverrides, getEffectDragOverrides]);
-  const settersContext = useMemo11(() => {
+  const settersContext = useMemo12(() => {
     return {
       setDragOverrides,
       clearDragOverrides,
@@ -7626,38 +7613,75 @@ var SequenceManagerProvider = ({ children }) => {
     clearEffectDragOverrides,
     setCodeValues
   ]);
-  return /* @__PURE__ */ jsx92(SequenceManager.Provider, {
+  return /* @__PURE__ */ jsx102(SequenceManager.Provider, {
     value: sequenceContext,
-    children: /* @__PURE__ */ jsx92(SequenceVisibilityToggleContext.Provider, {
-      value: hiddenContext,
-      children: /* @__PURE__ */ jsx92(VisualModeCodeValuesContext.Provider, {
-        value: codeValuesContext,
-        children: /* @__PURE__ */ jsx92(VisualModeDragOverridesContext.Provider, {
-          value: dragOverridesContext,
-          children: /* @__PURE__ */ jsx92(VisualModeSettersContext.Provider, {
-            value: settersContext,
-            children
-          })
+    children: /* @__PURE__ */ jsx102(VisualModeCodeValuesContext.Provider, {
+      value: codeValuesContext,
+      children: /* @__PURE__ */ jsx102(VisualModeDragOverridesContext.Provider, {
+        value: dragOverridesContext,
+        children: /* @__PURE__ */ jsx102(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;
+var ENABLE_V5_BREAKING_CHANGES = false;
+var deleteNestedKey = (obj, keysToRemove) => {
+  for (const key of keysToRemove) {
+    const parts = key.split(".");
+    const parents = [obj];
+    let current = obj;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      const next = current[part];
+      if (next === undefined || next === null) {
+        current = null;
+        break;
+      }
+      current = next;
+      parents.push(current);
+    }
+    if (current === null) {
+      continue;
+    }
+    delete current[parts[parts.length - 1]];
+    for (let i = parents.length - 1;i > 0; i--) {
+      const parent = parents[i];
+      if (Object.keys(parent).length === 0) {
+        const parentKey = parts[i - 1];
+        delete parents[i - 1][parentKey];
+      } else {
+        break;
+      }
+    }
+  }
+  return obj;
+};
+var OverrideIdsToNodePathsGettersContext = createContext15({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext15({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
+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;
       }
     }
   }
@@ -7686,7 +7710,7 @@ var extractCodeOverrides = (propStatus) => {
   return hasAny ? out : null;
 };
 var useMemoizedEffectDefinitions = (effects) => {
-  const previousRef = useRef6(null);
+  const previousRef = useRef5(null);
   const definitions = effects.map((descriptor) => descriptor.definition);
   const previous = previousRef.current;
   const isSame = previous !== null && previous.length === definitions.length && previous.every((def, i) => def === definitions[i]);
@@ -7731,10 +7755,10 @@ var useMemoizedEffects = ({
   effects,
   overrideId
 }) => {
-  const previousRef = useRef6(null);
-  const { codeValues } = useContext12(VisualModeCodeValuesContext);
-  const { getEffectDragOverrides } = useContext12(VisualModeDragOverridesContext);
-  const { overrideIdToNodePathMappings } = useContext12(OverrideIdsToNodePathsGettersContext);
+  const previousRef = useRef5(null);
+  const { codeValues } = useContext15(VisualModeCodeValuesContext);
+  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const resolved = effects.map((descriptor, index) => {
@@ -7773,361 +7797,103 @@ var useMemoizedEffects = ({
   previousRef.current = next;
   return next;
 };
-var componentsToAddStacksTo = [];
-var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
-var addSequenceStackTraces = (component) => {
-  componentsToAddStacksTo.push(component);
-};
-var VERSION = "4.0.462";
-var checkMultipleRemotionVersions = () => {
-  if (typeof globalThis === "undefined") {
-    return;
-  }
-  const set = () => {
-    globalThis.remotion_imported = VERSION;
-    if (typeof window !== "undefined") {
-      window.remotion_imported = VERSION;
-    }
-  };
-  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
-  if (alreadyImported) {
-    if (alreadyImported === VERSION) {
-      return;
-    }
-    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
-      set();
-      return;
+var flattenActiveSchema = (schema, resolve) => {
+  const out = {};
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field.type === "hidden") {
+      continue;
+    } else if (field.type === "enum") {
+      out[key] = field;
+      const current = resolve(key) ?? field.default;
+      const variant = field.variants[current];
+      if (variant) {
+        Object.assign(out, flattenActiveSchema(variant, resolve));
+      }
+    } else {
+      out[key] = field;
     }
-    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
-      VERSION,
-      typeof alreadyImported === "string" ? alreadyImported : "an older version"
-    ].filter(truthy2).join(" and ")}. This will cause things to break in an unexpected way.
-Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
   }
-  set();
+  return out;
 };
-var useUnsafeVideoConfig = () => {
-  const context = useContext13(SequenceContext);
-  const ctxWidth = context?.width ?? null;
-  const ctxHeight = context?.height ?? null;
-  const ctxDuration = context?.durationInFrames ?? null;
-  const video = useVideo();
-  return useMemo13(() => {
-    if (!video) {
-      return null;
+var getFlatSchemaWithAllKeys = (schema) => {
+  const out = {};
+  const addKey = (key, field) => {
+    if (key in out) {
+      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
     }
-    const {
-      id,
-      durationInFrames,
-      fps,
-      height,
-      width,
-      defaultProps,
-      props,
-      defaultCodec,
-      defaultOutName,
-      defaultVideoImageFormat,
-      defaultPixelFormat,
-      defaultProResProfile,
-      defaultSampleRate
-    } = video;
-    return {
-      id,
-      width: ctxWidth ?? width,
-      height: ctxHeight ?? height,
-      fps,
-      durationInFrames: ctxDuration ?? durationInFrames,
-      defaultProps,
-      props,
-      defaultCodec,
-      defaultOutName,
-      defaultVideoImageFormat,
-      defaultPixelFormat,
-      defaultProResProfile,
-      defaultSampleRate
-    };
-  }, [ctxDuration, ctxHeight, ctxWidth, video]);
-};
-var useVideoConfig = () => {
-  const videoConfig = useUnsafeVideoConfig();
-  const context = useContext14(CanUseRemotionHooks);
-  const isPlayer = useIsPlayer();
-  if (!videoConfig) {
-    if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
-      throw new Error([
-        "No video config found. Likely reasons:",
-        "- You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.",
-        "- You have multiple versions of Remotion installed which causes the React context to get lost."
-      ].join("-"));
+    out[key] = field;
+  };
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    addKey(key, field);
+    if (field.type === "enum") {
+      for (const variant of Object.values(field.variants)) {
+        const flatVariant = getFlatSchemaWithAllKeys(variant);
+        for (const variantKey of Object.keys(flatVariant)) {
+          addKey(variantKey, flatVariant[variantKey]);
+        }
+      }
     }
-    throw new Error("No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.");
-  }
-  if (!context) {
-    throw new Error("Called useVideoConfig() outside a Remotion composition.");
   }
-  return videoConfig;
+  return out;
 };
-var Freeze = ({
-  frame: frameToFreeze,
-  children,
-  active = true
+var findPropsToDelete = ({
+  schema,
+  key,
+  value
 }) => {
-  const frame = useCurrentFrame();
-  const videoConfig = useVideoConfig();
-  if (typeof frameToFreeze === "undefined") {
-    throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
+  const fieldSchema = schema[key];
+  if (!fieldSchema) {
+    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
   }
-  if (typeof frameToFreeze !== "number") {
-    throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frameToFreeze}`);
+  if (typeof value !== "string") {
+    throw new Error("Value must be a string, but is " + JSON.stringify(value));
   }
-  if (Number.isNaN(frameToFreeze)) {
-    throw new Error(`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`);
+  if (fieldSchema.type !== "enum") {
+    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
   }
-  if (!Number.isFinite(frameToFreeze)) {
-    throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
+  const currentVariant = fieldSchema.variants[value];
+  if (!currentVariant) {
+    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
   }
-  const isActive = useMemo14(() => {
-    if (typeof active === "boolean") {
-      return active;
-    }
-    if (typeof active === "function") {
-      return active(frame);
+  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
+  const otherKeys = new Set;
+  for (const variant of otherVariants) {
+    const otherVariant = fieldSchema.variants[variant];
+    const keys = Object.keys(otherVariant);
+    for (const k of keys) {
+      otherKeys.add(k);
     }
-  }, [active, frame]);
-  const timelineContext = useTimelineContext();
-  const sequenceContext = useContext15(SequenceContext);
-  const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo14(() => {
-    if (!isActive) {
-      return timelineContext;
+  }
+  return [...otherKeys];
+};
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+var findFieldInSchema = (schema, key) => {
+  if (key in schema) {
+    return schema[key];
+  }
+  for (const field of Object.values(schema)) {
+    if (field.type !== "enum") {
+      continue;
     }
-    return {
-      ...timelineContext,
-      playing: false,
-      imperativePlaying: {
-        current: false
-      },
-      frame: {
-        [videoConfig.id]: frameToFreeze + relativeFrom
-      }
-    };
-  }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo14(() => {
-    if (!sequenceContext) {
-      return null;
-    }
-    if (!isActive) {
-      return sequenceContext;
-    }
-    return {
-      ...sequenceContext,
-      cumulatedFrom: 0
-    };
-  }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx112(TimelineContext.Provider, {
-    value: timelineValue,
-    children: /* @__PURE__ */ jsx112(SequenceContext.Provider, {
-      value: newSequenceContext,
-      children
-    })
-  });
-};
-var PremountContext = createContext15({
-  premountFramesRemaining: 0
-});
-var sequenceStyleSchema = {
-  "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 sequenceSchema = {
-  layout: {
-    type: "enum",
-    default: "absolute-fill",
-    description: "Layout",
-    variants: {
-      "absolute-fill": sequenceStyleSchema,
-      none: {}
-    }
-  }
-};
-var sequenceSchemaDefaultLayoutNone = {
-  ...sequenceSchema,
-  layout: {
-    ...sequenceSchema.layout,
-    default: "none"
-  }
-};
-var ENABLE_V5_BREAKING_CHANGES = false;
-var deleteNestedKey = (obj, keysToRemove) => {
-  for (const key of keysToRemove) {
-    const parts = key.split(".");
-    const parents = [obj];
-    let current = obj;
-    for (let i = 0;i < parts.length - 1; i++) {
-      const part = parts[i];
-      const next = current[part];
-      if (next === undefined || next === null) {
-        current = null;
-        break;
-      }
-      current = next;
-      parents.push(current);
-    }
-    if (current === null) {
-      continue;
-    }
-    delete current[parts[parts.length - 1]];
-    for (let i = parents.length - 1;i > 0; i--) {
-      const parent = parents[i];
-      if (Object.keys(parent).length === 0) {
-        const parentKey = parts[i - 1];
-        delete parents[i - 1][parentKey];
-      } else {
-        break;
-      }
-    }
-  }
-  return obj;
-};
-var flattenActiveSchema = (schema, resolve) => {
-  const out = {};
-  for (const key of Object.keys(schema)) {
-    const field = schema[key];
-    if (field.type === "hidden") {
-      continue;
-    } else if (field.type === "enum") {
-      out[key] = field;
-      const current = resolve(key) ?? field.default;
-      const variant = field.variants[current];
-      if (variant) {
-        Object.assign(out, flattenActiveSchema(variant, resolve));
-      }
-    } else {
-      out[key] = field;
-    }
-  }
-  return out;
-};
-var getFlatSchemaWithAllKeys = (schema) => {
-  const out = {};
-  const addKey = (key, field) => {
-    if (key in out) {
-      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
-    }
-    out[key] = field;
-  };
-  for (const key of Object.keys(schema)) {
-    const field = schema[key];
-    addKey(key, field);
-    if (field.type === "enum") {
-      for (const variant of Object.values(field.variants)) {
-        const flatVariant = getFlatSchemaWithAllKeys(variant);
-        for (const variantKey of Object.keys(flatVariant)) {
-          addKey(variantKey, flatVariant[variantKey]);
-        }
-      }
-    }
-  }
-  return out;
-};
-var findPropsToDelete = ({
-  schema,
-  key,
-  value
-}) => {
-  const fieldSchema = schema[key];
-  if (!fieldSchema) {
-    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
-  }
-  if (typeof value !== "string") {
-    throw new Error("Value must be a string, but is " + JSON.stringify(value));
-  }
-  if (fieldSchema.type !== "enum") {
-    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
-  }
-  const currentVariant = fieldSchema.variants[value];
-  if (!currentVariant) {
-    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
-  }
-  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
-  const otherKeys = new Set;
-  for (const variant of otherVariants) {
-    const otherVariant = fieldSchema.variants[variant];
-    const keys = Object.keys(otherVariant);
-    for (const k of keys) {
-      otherKeys.add(k);
-    }
-  }
-  return [...otherKeys];
-};
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
-}) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
-  }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
-  }
-  return codeValue.codeValue;
-};
-var findFieldInSchema = (schema, key) => {
-  if (key in schema) {
-    return schema[key];
-  }
-  for (const field of Object.values(schema)) {
-    if (field.type !== "enum") {
-      continue;
-    }
-    for (const variant of Object.values(field.variants)) {
-      const found = findFieldInSchema(variant, key);
-      if (found) {
-        return found;
+    for (const variant of Object.values(field.variants)) {
+      const found = findFieldInSchema(variant, key);
+      if (found) {
+        return found;
       }
     }
   }
@@ -8228,7 +7994,7 @@ var wrapInSchema = (Component, schema) => {
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React13.createElement(Component, {
+      return React12.createElement(Component, {
         ...props,
         _experimentalControls: null,
         ref
@@ -8238,12 +8004,12 @@ var wrapInSchema = (Component, schema) => {
     const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     if (props._experimentalControls) {
-      return React13.createElement(Component, {
+      return React12.createElement(Component, {
         ...props,
         ref
       });
     }
-    const [overrideId] = useState5(() => {
+    const [overrideId] = useState4(() => {
       const { stack } = props;
       if (!stack) {
         return String(Math.random());
@@ -8258,15 +8024,15 @@ var wrapInSchema = (Component, schema) => {
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
-    const controls = useMemo15(() => {
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const controls = useMemo13(() => {
       return {
         schema,
         currentRuntimeValueDotNotation,
         overrideId
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo15(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema,
         currentValue: currentRuntimeValueDotNotation,
@@ -8286,7 +8052,7 @@ var wrapInSchema = (Component, schema) => {
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React13.createElement(Component, {
+    return React12.createElement(Component, {
       ...mergedProps,
       _experimentalControls: controls,
       ref
@@ -8303,6 +8069,7 @@ var RegularSequenceRefForwardingFunction = ({
   height,
   width,
   showInTimeline = true,
+  hidden = false,
   _experimentalControls: controls,
   _experimentalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
@@ -8313,7 +8080,7 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState6(() => String(Math.random()));
+  const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
@@ -8341,14 +8108,13 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
-  const { hidden } = useContext17(SequenceVisibilityToggleContext);
-  const premounting = useMemo16(() => {
+  const premounting = useMemo14(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo16(() => {
+  const postmounting = useMemo14(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo16(() => {
+  const contextValue = useMemo14(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -8375,12 +8141,14 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo16(() => {
+  const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  useEffect5(() => {
+  const stackRef = useRef6(null);
+  stackRef.current = stack ?? inheritedStack;
+  useEffect3(() => {
     if (!env.isStudio) {
       return;
     }
@@ -8403,7 +8171,7 @@ var RegularSequenceRefForwardingFunction = ({
         rootId,
         showInTimeline,
         src: isMedia.data.src,
-        stack: stack ?? inheritedStack,
+        getStack: () => stackRef.current,
         startMediaFrom: isMedia.data.startMediaFrom,
         volume: isMedia.data.volumes
       });
@@ -8422,7 +8190,7 @@ var RegularSequenceRefForwardingFunction = ({
       showInTimeline,
       nonce: nonce.get(),
       loopDisplay,
-      stack: stack ?? inheritedStack,
+      getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
@@ -8445,11 +8213,9 @@ var RegularSequenceRefForwardingFunction = ({
     showInTimeline,
     nonce,
     loopDisplay,
-    stack,
     premountDisplay,
     postmountDisplay,
     env.isStudio,
-    inheritedStack,
     controls,
     _experimentalEffects,
     isMedia
@@ -8457,7 +8223,7 @@ var RegularSequenceRefForwardingFunction = ({
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo16(() => {
+  const defaultStyle = useMemo14(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -8468,94 +8234,334 @@ var RegularSequenceRefForwardingFunction = ({
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
-  const isSequenceHidden = hidden[id] ?? false;
-  if (isSequenceHidden) {
-    return null;
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx112(SequenceContext.Provider, {
+    value: contextValue,
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx112(AbsoluteFill, {
+      ref,
+      style: defaultStyle,
+      className: other.className,
+      children: content
+    })
+  });
+};
+var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
+var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
+  const parentPremountContext = useContext17(PremountContext);
+  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
+  if (props.layout === "none") {
+    throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
+  }
+  const {
+    style: passedStyle,
+    from = 0,
+    durationInFrames = Infinity,
+    premountFor = 0,
+    postmountFor = 0,
+    styleWhilePremounted,
+    styleWhilePostmounted,
+    ...otherProps
+  } = props;
+  const endThreshold = Math.ceil(from + durationInFrames - 1);
+  const premountingActive = frame < from && frame >= from - premountFor;
+  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
+  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
+  const isFreezingActive = premountingActive || postmountingActive;
+  const style = useMemo14(() => {
+    return {
+      ...passedStyle,
+      opacity: premountingActive || postmountingActive ? 0 : 1,
+      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
+      ...premountingActive ? styleWhilePremounted : {},
+      ...postmountingActive ? styleWhilePostmounted : {}
+    };
+  }, [
+    passedStyle,
+    premountingActive,
+    postmountingActive,
+    styleWhilePremounted,
+    styleWhilePostmounted
+  ]);
+  return /* @__PURE__ */ jsx112(Freeze, {
+    frame: freezeFrame,
+    active: isFreezingActive,
+    children: /* @__PURE__ */ jsx112(SequenceInner, {
+      ref,
+      from,
+      durationInFrames,
+      style,
+      _remotionInternalPremountDisplay: premountFor,
+      _remotionInternalPostmountDisplay: postmountFor,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...otherProps
+    })
+  });
+};
+var PremountedPostmountedSequence = forwardRef3(PremountedPostmountedSequenceRefForwardingFunction);
+var SequenceRefForwardingFunction = (props, ref) => {
+  const env = useRemotionEnvironment();
+  const { fps } = useVideoConfig();
+  if (props.layout !== "none" && !env.isRendering) {
+    const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? props.premountFor ?? fps : props.premountFor;
+    if (effectivePremountFor || props.postmountFor) {
+      return /* @__PURE__ */ jsx112(PremountedPostmountedSequence, {
+        ref,
+        ...props,
+        premountFor: effectivePremountFor
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx112(RegularSequence, {
+    ...props,
+    ref
+  });
+};
+var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
+var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
+var WEBGL_CONTEXT_DOCS_URL = "https://remotion.dev/docs/troubleshooting/webgl2-context";
+var webGlContextErrorMessage = (versionLabel, effectName) => `Failed to acquire ${versionLabel} context for ${effectName}. ` + 'Pass --gl=angle when using the CLI, set chromiumOptions: { gl: "angle" } when using SSR APIs, ' + 'or set "OpenGL render backend" to "angle" in the Advanced section when rendering in the Studio. ' + `See ${WEBGL_CONTEXT_DOCS_URL}`;
+var createWebGLContextError = (effectName) => new Error(webGlContextErrorMessage("WebGL", effectName));
+var createWebGL2ContextError = (effectName) => new Error(webGlContextErrorMessage("WebGL2", effectName));
+
+class CanvasPool {
+  width;
+  height;
+  pairs = new Map;
+  lostContexts = new Set;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  getPair(backend) {
+    const existing = this.pairs.get(backend);
+    if (existing) {
+      return existing;
+    }
+    const pair = [
+      this.allocateCanvas(backend),
+      this.allocateCanvas(backend)
+    ];
+    this.pairs.set(backend, pair);
+    return pair;
+  }
+  assertContextNotLost(canvas) {
+    if (this.lostContexts.has(canvas)) {
+      throw new Error("WebGL context was lost during canvas effect rendering. " + "This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). " + "Try reducing concurrency or increasing the Lambda function memory.");
+    }
+  }
+  allocateCanvas(backend) {
+    const canvas = document.createElement("canvas");
+    canvas.width = this.width;
+    canvas.height = this.height;
+    switch (backend) {
+      case "2d": {
+        const ctx = canvas.getContext("2d", {
+          colorSpace: "srgb"
+        });
+        if (!ctx) {
+          throw new Error("Failed to acquire 2D context for canvas effect");
+        }
+        return canvas;
+      }
+      case "webgl2": {
+        const ctx = canvas.getContext("webgl2", {
+          premultipliedAlpha: true,
+          alpha: true,
+          preserveDrawingBuffer: true
+        });
+        if (!ctx) {
+          throw createWebGL2ContextError("canvas effect");
+        }
+        canvas.addEventListener("webglcontextlost", (e) => {
+          e.preventDefault();
+          this.lostContexts.add(canvas);
+        });
+        canvas.addEventListener("webglcontextrestored", () => {
+          this.lostContexts.delete(canvas);
+        });
+        ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        return canvas;
+      }
+      case "webgpu": {
+        if (typeof navigator === "undefined" || !("gpu" in navigator)) {
+          throw new Error("WebGPU is not available in this environment for canvas effect");
+        }
+        return canvas;
+      }
+      default: {
+        const exhaustive = backend;
+        throw new Error(`Unknown effect backend: ${exhaustive}`);
+      }
+    }
+  }
+}
+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) {
+    return devicePromise;
+  }
+  devicePromise = (async () => {
+    if (typeof navigator === "undefined" || !("gpu" in navigator)) {
+      throw new Error("WebGPU is not available in this environment");
+    }
+    const { gpu } = navigator;
+    const adapter = await gpu.requestAdapter();
+    if (!adapter) {
+      throw new Error("No WebGPU adapter available");
+    }
+    return adapter.requestDevice();
+  })();
+  return devicePromise;
+};
+var createEffectChainState = (width, height) => ({
+  pool: new CanvasPool(width, height),
+  setupCache: new WeakMap,
+  cleanupRegistry: [],
+  currentRunId: 0
+});
+var cleanupEffectChainState = (state) => {
+  state.currentRunId++;
+  for (const entry of state.cleanupRegistry) {
+    entry.definition.cleanup(entry.state);
+  }
+};
+var ensureSetup = (state, def, target) => {
+  const widened = def;
+  if (state.setupCache.has(widened)) {
+    return state.setupCache.get(widened);
+  }
+  const setupState = def.setup(target);
+  state.setupCache.set(widened, setupState);
+  state.cleanupRegistry.push({ definition: widened, state: setupState });
+  return setupState;
+};
+var runEffectChain = async ({
+  state,
+  source,
+  effects,
+  output,
+  width,
+  height
+}) => {
+  const runId = ++state.currentRunId;
+  const isCancelled = () => state.currentRunId !== runId;
+  const enabledEffects = effects.filter((e) => !e.params.disabled);
+  const runs = groupByBackend(enabledEffects);
+  let currentImage = source;
+  let lastTarget = null;
+  if (runs.length === 0) {
+    if (source === output) {
+      return true;
+    }
+    const ctx = output.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for output canvas");
+    }
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(currentImage, 0, 0, width, height);
+    return true;
+  }
+  let needsGpuDevice = false;
+  for (const run of runs) {
+    if (run.backend === "webgpu") {
+      needsGpuDevice = true;
+      break;
+    }
+  }
+  const gpuDevice = needsGpuDevice ? await getGpuDevice() : null;
+  if (isCancelled()) {
+    return false;
+  }
+  for (let runIndex = 0;runIndex < runs.length; runIndex++) {
+    const run = runs[runIndex];
+    const [a, b] = state.pool.getPair(run.backend);
+    let dst = a;
+    for (const eff of run.effects) {
+      const def = eff.definition;
+      const setupState = ensureSetup(state, def, dst);
+      def.apply({
+        source: currentImage,
+        target: dst,
+        state: setupState,
+        params: eff.params,
+        width,
+        height,
+        gpuDevice
+      });
+      if (run.backend === "webgl2") {
+        state.pool.assertContextNotLost(dst);
+      }
+      currentImage = dst;
+      dst = dst === a ? b : a;
+    }
+    lastTarget = currentImage ?? lastTarget;
+    const nextRun = runs[runIndex + 1];
+    if (nextRun && nextRun.backend !== run.backend && lastTarget) {
+      const bitmap = await createImageBitmap(lastTarget);
+      if (isCancelled()) {
+        bitmap.close();
+        return false;
+      }
+      currentImage = bitmap;
+    }
+  }
+  if (!lastTarget) {
+    return true;
   }
-  return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
-    value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
-      ref,
-      style: defaultStyle,
-      className: other.className,
-      children: content
-    })
-  });
-};
-var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
-var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext17(PremountContext);
-  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
-  if (props.layout === "none") {
-    throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
+  const outCtx = output.getContext("2d");
+  if (!outCtx) {
+    throw new Error("Failed to acquire 2D context for output canvas");
   }
-  const {
-    style: passedStyle,
-    from = 0,
-    durationInFrames = Infinity,
-    premountFor = 0,
-    postmountFor = 0,
-    styleWhilePremounted,
-    styleWhilePostmounted,
-    ...otherProps
-  } = props;
-  const endThreshold = Math.ceil(from + durationInFrames - 1);
-  const premountingActive = frame < from && frame >= from - premountFor;
-  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
-  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo16(() => {
-    return {
-      ...passedStyle,
-      opacity: premountingActive || postmountingActive ? 0 : 1,
-      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
-      ...premountingActive ? styleWhilePremounted : {},
-      ...postmountingActive ? styleWhilePostmounted : {}
-    };
-  }, [
-    passedStyle,
-    premountingActive,
-    postmountingActive,
-    styleWhilePremounted,
-    styleWhilePostmounted
-  ]);
-  return /* @__PURE__ */ jsx12(Freeze, {
-    frame: freezeFrame,
-    active: isFreezingActive,
-    children: /* @__PURE__ */ jsx12(SequenceInner, {
-      ref,
-      from,
-      durationInFrames,
-      style,
-      _remotionInternalPremountDisplay: premountFor,
-      _remotionInternalPostmountDisplay: postmountFor,
-      _remotionInternalIsPremounting: premountingActive,
-      _remotionInternalIsPostmounting: postmountingActive,
-      ...otherProps
-    })
-  });
+  outCtx.clearRect(0, 0, width, height);
+  outCtx.drawImage(lastTarget, 0, 0, width, height);
+  return true;
 };
-var PremountedPostmountedSequence = forwardRef3(PremountedPostmountedSequenceRefForwardingFunction);
-var SequenceRefForwardingFunction = (props, ref) => {
-  const env = useRemotionEnvironment();
-  const { fps } = useVideoConfig();
-  if (props.layout !== "none" && !env.isRendering) {
-    const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? props.premountFor ?? fps : props.premountFor;
-    if (effectivePremountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx12(PremountedPostmountedSequence, {
-        ref,
-        ...props,
-        premountFor: effectivePremountFor
-      });
+var useEffectChainState = () => {
+  const chainStateRef = useRef7(null);
+  const sizeRef = useRef7(null);
+  useEffect4(() => {
+    return () => {
+      if (chainStateRef.current) {
+        cleanupEffectChainState(chainStateRef.current);
+      }
+    };
+  }, []);
+  return useMemo15(() => ({
+    get: (width, height) => {
+      if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
+        if (chainStateRef.current) {
+          cleanupEffectChainState(chainStateRef.current);
+        }
+        chainStateRef.current = createEffectChainState(width, height);
+        sizeRef.current = { width, height };
+      }
+      return chainStateRef.current;
     }
-  }
-  return /* @__PURE__ */ jsx12(RegularSequence, {
-    ...props,
-    ref
-  });
+  }), []);
 };
-var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
-var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -8604,29 +8610,49 @@ var calcArgs = (fit, frameSize, canvasSize) => {
       throw new Error("Unknown fit: " + fit);
   }
 };
-var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
-  const canvasRef = useRef7(null);
-  const draw = useCallback6((imageData) => {
+var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
+  const canvasRef = useRef8(null);
+  const chainState = useEffectChainState();
+  const sourceCanvas = useMemo16(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("canvas");
+  }, []);
+  const draw = useCallback6(async (imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
     if (!canvas) {
       throw new Error("Canvas ref is not set");
     }
-    const ctx = canvasRef.current?.getContext("2d");
-    if (!ctx) {
-      throw new Error("Could not get 2d context");
+    if (!sourceCanvas) {
+      throw new Error("Source canvas is not available");
     }
-    canvas.width = canvasWidth;
-    canvas.height = canvasHeight;
-    ctx.drawImage(imageData, ...calcArgs(fit, {
+    sourceCanvas.width = canvasWidth;
+    sourceCanvas.height = canvasHeight;
+    const sourceCtx = sourceCanvas.getContext("2d");
+    if (!sourceCtx) {
+      throw new Error("Could not get 2d context for source canvas");
+    }
+    sourceCtx.drawImage(imageData, ...calcArgs(fit, {
       height: imageData.displayHeight,
       width: imageData.displayWidth
     }, {
       width: canvasWidth,
       height: canvasHeight
     }));
-  }, [fit, height, width]);
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    return runEffectChain({
+      state: chainState.get(canvasWidth, canvasHeight),
+      source: sourceCanvas,
+      effects,
+      output: canvas,
+      width: canvasWidth,
+      height: canvasHeight
+    });
+  }, [chainState, effects, fit, height, sourceCanvas, width]);
   useImperativeHandle(ref, () => {
     return {
       draw,
@@ -8645,13 +8671,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx13("canvas", {
+  return /* @__PURE__ */ jsx12("canvas", {
     ref: canvasRef,
     className,
     style
   });
 };
-var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React14.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -8798,7 +8824,19 @@ var resolveAnimatedImageSource = (src) => {
   }
   return new URL(src, window.origin).href;
 };
-var AnimatedImage = forwardRef4(({
+var animatedImageSchema = {
+  playbackRate: {
+    type: "number",
+    min: 0,
+    max: 10,
+    step: 0.1,
+    default: 1,
+    description: "Playback Rate"
+  },
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var AnimatedImageContent = forwardRef4(({
   src,
   width,
   height,
@@ -8806,105 +8844,326 @@ var AnimatedImage = forwardRef4(({
   loopBehavior = "loop",
   playbackRate = 1,
   fit = "fill",
+  effects,
+  controls,
   ...props
 }, canvasRef) => {
-  const mountState = useRef8({ isMounted: true });
-  useEffect6(() => {
-    const { current } = mountState;
-    current.isMounted = true;
-    return () => {
-      current.isMounted = false;
-    };
-  }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState7(null);
+  const [imageDecoder, setImageDecoder] = useState6(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [decodeHandle] = useState7(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
-  const currentTimeRef = useRef8(currentTime);
+  const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
-  const ref = useRef8(null);
+  const ref = useRef9(null);
+  const memoizedEffects = useMemoizedEffects({
+    effects,
+    overrideId: controls?.overrideId ?? null
+  });
   useImperativeHandle2(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
       throw new Error("Canvas ref is not set");
     }
-    return c;
+    return c;
+  }, []);
+  const [initialLoopBehavior] = useState6(() => loopBehavior);
+  useEffect5(() => {
+    const controller = new AbortController;
+    decodeImage({
+      resolvedSrc,
+      signal: controller.signal,
+      currentTime: currentTimeRef.current,
+      initialLoopBehavior
+    }).then((d) => {
+      setImageDecoder(d);
+      continueRender2(decodeHandle);
+    }).catch((err) => {
+      if (err.name === "AbortError") {
+        continueRender2(decodeHandle);
+        return;
+      }
+      if (onError) {
+        onError?.(err);
+        continueRender2(decodeHandle);
+      } else {
+        cancelRender(err);
+      }
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [
+    resolvedSrc,
+    decodeHandle,
+    onError,
+    initialLoopBehavior,
+    continueRender2
+  ]);
+  useLayoutEffect2(() => {
+    if (!imageDecoder) {
+      return;
+    }
+    const delay = delayRender2(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+    let cancelled = false;
+    imageDecoder.getFrame(currentTime, loopBehavior).then(async (videoFrame) => {
+      if (cancelled) {
+        return;
+      }
+      if (videoFrame === null) {
+        ref.current?.clear();
+        continueRender2(delay);
+        return;
+      }
+      const completed = await ref.current?.draw(videoFrame.frame);
+      if (completed && !cancelled) {
+        continueRender2(delay);
+      }
+    }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
+      if (onError) {
+        onError(err);
+        continueRender2(delay);
+      } else {
+        cancelRender(err);
+      }
+    });
+    return () => {
+      cancelled = true;
+      continueRender2(delay);
+    };
+  }, [
+    currentTime,
+    imageDecoder,
+    loopBehavior,
+    onError,
+    src,
+    continueRender2,
+    delayRender2,
+    memoizedEffects,
+    fit,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ jsx13(Canvas, {
+    ref,
+    width,
+    height,
+    fit,
+    effects: memoizedEffects,
+    ...props
+  });
+});
+AnimatedImageContent.displayName = "AnimatedImageContent";
+var AnimatedImageInner = ({
+  src,
+  width,
+  height,
+  onError,
+  fit,
+  playbackRate,
+  loopBehavior,
+  id,
+  className,
+  style,
+  durationInFrames,
+  _experimentalEffects: effects = [],
+  _experimentalControls: controls,
+  ref,
+  ...sequenceProps
+}) => {
+  const { durationInFrames: videoDuration } = useVideoConfig();
+  const resolvedDuration = durationInFrames ?? videoDuration;
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const animatedImageProps = {
+    src,
+    width,
+    height,
+    onError,
+    fit,
+    playbackRate,
+    loopBehavior,
+    id,
+    className,
+    style
+  };
+  return /* @__PURE__ */ jsx13(Sequence, {
+    layout: "none",
+    durationInFrames: resolvedDuration,
+    name: "<AnimatedImage>",
+    _experimentalControls: controls,
+    _experimentalEffects: memoizedEffectDefinitions,
+    ...sequenceProps,
+    children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
+      ...animatedImageProps,
+      ref,
+      effects,
+      controls
+    })
+  });
+};
+var AnimatedImage = wrapInSchema(AnimatedImageInner, animatedImageSchema);
+AnimatedImage.displayName = "AnimatedImage";
+addSequenceStackTraces(AnimatedImage);
+var solidSchema = {
+  color: {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  },
+  width: {
+    type: "number",
+    min: 1,
+    step: 1,
+    default: 1920,
+    description: "Width"
+  },
+  height: {
+    type: "number",
+    min: 1,
+    step: 1,
+    default: 1080,
+    description: "Height"
+  },
+  ...sequenceVisualStyleSchema
+};
+var SolidInner = ({
+  color,
+  width,
+  height,
+  _experimentalEffects: experimentalEffects = [],
+  className,
+  style,
+  overrideId,
+  ref
+}) => {
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const [outputCanvas, setOutputCanvas] = useState7(null);
+  const memoizedEffects = useMemoizedEffects({
+    effects: experimentalEffects,
+    overrideId: overrideId ?? null
+  });
+  const sourceCanvas = useMemo17(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    return canvas;
   }, []);
-  const [initialLoopBehavior] = useState7(() => loopBehavior);
+  const chainState = useEffectChainState();
+  const canvasRef = useCallback7((canvas) => {
+    setOutputCanvas(canvas);
+    if (typeof ref === "function") {
+      ref(canvas);
+    } else if (ref) {
+      ref.current = canvas;
+    }
+  }, [ref]);
   useEffect6(() => {
-    const controller = new AbortController;
-    decodeImage({
-      resolvedSrc,
-      signal: controller.signal,
-      currentTime: currentTimeRef.current,
-      initialLoopBehavior
-    }).then((d) => {
-      setImageDecoder(d);
-      continueRender2(decodeHandle);
-    }).catch((err) => {
-      if (err.name === "AbortError") {
-        continueRender2(decodeHandle);
-        return;
-      }
-      if (onError) {
-        onError?.(err);
-        continueRender2(decodeHandle);
-      } else {
-        cancelRender(err);
-      }
-    });
-    return () => {
-      controller.abort();
-    };
-  }, [
-    resolvedSrc,
-    decodeHandle,
-    onError,
-    initialLoopBehavior,
-    continueRender2
-  ]);
-  useLayoutEffect2(() => {
-    if (!imageDecoder) {
+    if (!outputCanvas || !sourceCanvas) {
       return;
     }
-    const delay = delayRender2(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
-    imageDecoder.getFrame(currentTime, loopBehavior).then((videoFrame) => {
-      if (mountState.current.isMounted) {
-        if (videoFrame === null) {
-          ref.current?.clear();
-        } else {
-          ref.current?.draw(videoFrame.frame);
-        }
+    const handle = delayRender2("Solid effect chain");
+    if (!chainState) {
+      continueRender2(handle);
+      return () => {
+        continueRender2(handle);
+      };
+    }
+    const ctx = sourceCanvas.getContext("2d", { colorSpace: "srgb" });
+    if (!ctx) {
+      cancelRender2(new Error("Failed to acquire 2D context for <Solid> source"));
+      return;
+    }
+    ctx.clearRect(0, 0, 1, 1);
+    if (color !== undefined) {
+      ctx.fillStyle = color;
+      ctx.fillRect(0, 0, 1, 1);
+    }
+    runEffectChain({
+      state: chainState.get(width, height),
+      source: sourceCanvas,
+      effects: memoizedEffects,
+      output: outputCanvas,
+      width,
+      height
+    }).then((completed) => {
+      if (completed) {
+        continueRender2(handle);
       }
-      continueRender2(delay);
     }).catch((err) => {
-      if (onError) {
-        onError(err);
-        continueRender2(delay);
-      } else {
-        cancelRender(err);
-      }
+      cancelRender2(err);
     });
+    return () => {
+      continueRender2(handle);
+    };
   }, [
-    currentTime,
-    imageDecoder,
-    loopBehavior,
-    onError,
-    src,
+    color,
+    outputCanvas,
+    sourceCanvas,
+    chainState,
+    width,
+    height,
+    delayRender2,
     continueRender2,
-    delayRender2
+    cancelRender2,
+    memoizedEffects
   ]);
-  return /* @__PURE__ */ jsx14(Canvas, {
-    ref,
+  return /* @__PURE__ */ jsx14("canvas", {
+    ref: canvasRef,
     width,
     height,
-    fit,
-    ...props
+    className,
+    style
+  });
+};
+var SolidOuter = forwardRef5(({
+  _experimentalEffects = [],
+  _experimentalControls: controls,
+  color,
+  height,
+  width,
+  className,
+  durationInFrames,
+  style,
+  name,
+  from,
+  hidden,
+  showInTimeline,
+  ...props
+}, ref) => {
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(_experimentalEffects);
+  return /* @__PURE__ */ jsx14(Sequence, {
+    layout: "none",
+    from,
+    hidden,
+    showInTimeline,
+    _experimentalControls: controls,
+    _experimentalEffects: memoizedEffectDefinitions,
+    durationInFrames,
+    name: name ?? "<Solid>",
+    ...props,
+    children: /* @__PURE__ */ jsx14(SolidInner, {
+      ref,
+      overrideId: controls?.overrideId ?? null,
+      color,
+      height,
+      width,
+      className,
+      style,
+      _experimentalEffects
+    })
   });
 });
+var Solid = wrapInSchema(SolidOuter, solidSchema);
+Solid.displayName = "Solid";
+addSequenceStackTraces(Solid);
 var cachedSupport = null;
 var isHtmlInCanvasSupported = () => {
   if (cachedSupport !== null) {
@@ -8915,7 +9174,7 @@ var isHtmlInCanvasSupported = () => {
   }
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
-  cachedSupport = typeof ctx?.drawElementImage === "function" && typeof canvas.requestPaint === "function" && typeof canvas.captureElementImage === "function";
+  cachedSupport = typeof ctx?.drawElementImage === "function" && typeof canvas.requestPaint === "function" && typeof canvas.captureElementImage === "function" && "transferControlToOffscreen" in HTMLCanvasElement.prototype;
   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).";
@@ -8944,30 +9203,18 @@ var defaultOnPaint = ({
   element.style.transform = transform.toString();
 };
 var HtmlInCanvasAncestorContext = createContext16(false);
-var HtmlInCanvasInner = forwardRef5(({
-  width,
-  height,
-  _experimentalEffects: effects = [],
-  children,
-  onPaint,
-  onInit,
-  _experimentalControls: controls,
-  style,
-  durationInFrames,
-  ...sequenceProps
-}, ref) => {
+var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPaint, onInit, controls, style }, ref) => {
   const isInsideAncestorHtmlInCanvas = useContext18(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
-  const frame = useCurrentFrame();
-  const canvas2dRef = useRef9(null);
-  const divRef = useRef9(null);
-  const setLayoutCanvasRef = useCallback7((node) => {
+  const canvas2dRef = useRef10(null);
+  const offscreenRef = useRef10(null);
+  const divRef = useRef10(null);
+  const canvasSizeKey = `${width}x${height}`;
+  const setLayoutCanvasRef = useCallback8((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -8975,48 +9222,48 @@ var HtmlInCanvasInner = forwardRef5(({
       ref.current = node;
     }
   }, [ref]);
-  const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  const effectsRef = useRef9(memoizedEffects);
+  const effectsRef = useRef10(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const frameRef = useRef9(frame);
-  frameRef.current = frame;
-  const onPaintRef = useRef9(onPaint);
+  const onPaintRef = useRef10(onPaint);
   onPaintRef.current = onPaint;
-  const onInitRef = useRef9(onInit);
+  const onInitRef = useRef10(onInit);
   onInitRef.current = onInit;
-  const initializedRef = useRef9(false);
-  const onInitCleanupRef = useRef9(null);
-  const unmountedRef = useRef9(false);
-  const onPaintCb = useCallback7(async () => {
+  const initializedRef = useRef10(false);
+  const onInitCleanupRef = useRef10(null);
+  const unmountedRef = useRef10(false);
+  const onPaintCb = useCallback8(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    const offscreen = offscreenRef.current;
+    if (!offscreen) {
+      throw new Error("HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)");
+    }
+    offscreen.width = width;
+    offscreen.height = height;
     try {
-      const layoutCanvas = canvas2dRef.current;
-      if (!layoutCanvas) {
+      const placeholderCanvas = canvas2dRef.current;
+      if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const layout2d = layoutCanvas.getContext("2d");
-      if (!layout2d) {
-        throw new Error("Failed to acquire 2D context for <HtmlInCanvas> layout canvas");
+      const offscreen2d = offscreen.getContext("2d");
+      if (!offscreen2d) {
+        throw new Error("Failed to acquire 2D context for <HtmlInCanvas> offscreen canvas");
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
         initializedRef.current = true;
-        const initImage = layoutCanvas.captureElementImage(element);
+        const initImage = placeholderCanvas.captureElementImage(element);
         const currentOnInit = onInitRef.current;
         if (currentOnInit) {
           const cleanup = await currentOnInit({
-            canvas: offscreenCanvas,
+            canvas: offscreen,
             element,
             elementImage: initImage
           });
@@ -9031,18 +9278,17 @@ var HtmlInCanvasInner = forwardRef5(({
         }
       }
       const handler = onPaintRef.current ?? defaultOnPaint;
-      const elImage = layoutCanvas.captureElementImage(element);
+      const elImage = placeholderCanvas.captureElementImage(element);
       await handler({
-        canvas: offscreenCanvas,
+        canvas: offscreen,
         element,
         elementImage: elImage
       });
       await runEffectChain({
         state: chainState.get(width, height),
-        source: offscreenCanvas,
+        source: offscreen,
         effects: effectsRef.current,
-        output: canvas2dRef.current,
-        frame: frameRef.current,
+        output: offscreen,
         width,
         height
       });
@@ -9050,29 +9296,30 @@ var HtmlInCanvasInner = forwardRef5(({
     } catch (error2) {
       cancelRender2(error2);
     }
-  }, [
-    chainState,
-    continueRender2,
-    cancelRender2,
-    width,
-    height,
-    offscreenCanvas
-  ]);
+  }, [chainState, continueRender2, cancelRender2, width, height]);
   useLayoutEffect3(() => {
-    const canvas = canvas2dRef.current;
-    if (!canvas) {
+    const placeholder = canvas2dRef.current;
+    if (!placeholder) {
       throw new Error("Canvas not found");
     }
-    canvas.layoutSubtree = true;
-    canvas.addEventListener("paint", onPaintCb);
+    placeholder.layoutSubtree = true;
+    const offscreen = placeholder.transferControlToOffscreen();
+    offscreenRef.current = offscreen;
+    offscreen.width = width;
+    offscreen.height = height;
+    initializedRef.current = false;
+    unmountedRef.current = false;
+    placeholder.addEventListener("paint", onPaintCb);
     return () => {
-      canvas.removeEventListener("paint", onPaintCb);
+      placeholder.removeEventListener("paint", onPaintCb);
+      offscreenRef.current = null;
+      initializedRef.current = false;
       unmountedRef.current = true;
       onInitCleanupRef.current?.();
       onInitCleanupRef.current = null;
     };
-  }, [onPaintCb, cancelRender2]);
-  const onPaintChangedRef = useRef9(false);
+  }, [onPaintCb, cancelRender2, width, height]);
+  const onPaintChangedRef = useRef10(false);
   useLayoutEffect3(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
@@ -9096,8 +9343,8 @@ var HtmlInCanvasInner = forwardRef5(({
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2]);
-  const innerStyle = useMemo17(() => {
+  }, [width, height, continueRender2, canvasSizeKey]);
+  const innerStyle = useMemo18(() => {
     return {
       width,
       height
@@ -9106,31 +9353,64 @@ var HtmlInCanvasInner = forwardRef5(({
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
   }
+  return /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx15("canvas", {
+      ref: setLayoutCanvasRef,
+      width,
+      height,
+      style,
+      children: /* @__PURE__ */ jsx15("div", {
+        ref: divRef,
+        style: innerStyle,
+        children
+      })
+    }, canvasSizeKey)
+  });
+});
+HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
+var HtmlInCanvasInner = forwardRef6(({
+  width,
+  height,
+  _experimentalEffects: effects = [],
+  children,
+  onPaint,
+  onInit,
+  _experimentalControls: controls,
+  style,
+  durationInFrames,
+  name,
+  ...sequenceProps
+}, ref) => {
+  const { durationInFrames: videoDuration } = useVideoConfig();
+  const resolvedDuration = durationInFrames ?? videoDuration;
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   return /* @__PURE__ */ jsx15(Sequence, {
     durationInFrames: resolvedDuration,
-    name: "<HtmlInCanvas>",
+    name: name ?? "<HtmlInCanvas>",
     _experimentalControls: controls,
     _experimentalEffects: memoizedEffectDefinitions,
     layout: "none",
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
-      value: true,
-      children: /* @__PURE__ */ jsx15("canvas", {
-        ref: setLayoutCanvasRef,
-        width,
-        height,
-        style,
-        children: /* @__PURE__ */ jsx15("div", {
-          ref: divRef,
-          style: innerStyle,
-          children
-        })
-      })
+    children: /* @__PURE__ */ jsx15(HtmlInCanvasContent, {
+      ref,
+      width,
+      height,
+      effects,
+      onPaint,
+      onInit,
+      controls,
+      style,
+      children
     })
   });
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
-var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, sequenceStyleSchema);
+var htmlInCanvasSchema = {
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
   isSupported: isHtmlInCanvasSupported
 });
@@ -9175,9 +9455,9 @@ var RenderAssetManager = createContext17({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState9([]);
-  const renderAssetsRef = useRef10([]);
-  const registerRenderAsset = useCallback8((renderAsset) => {
+  const [renderAssets, setRenderAssets] = useState8([]);
+  const renderAssetsRef = useRef11([]);
+  const registerRenderAsset = useCallback9((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -9194,7 +9474,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback8((id) => {
+  const unregisterRenderAsset = useCallback9((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -9208,7 +9488,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo18(() => {
+  const contextValue = useMemo19(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -9225,7 +9505,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext19(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState10(() => {
+  const [id] = useState9(() => {
     return String(Math.random());
   });
   useLayoutEffect5(() => {
@@ -9337,14 +9617,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo19(() => {
+  const loopDisplay = useMemo20(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo19(() => {
+  const loopContext = useMemo20(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -9382,7 +9662,7 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState11(() => preloads);
+  const [_preloads, _setPreloads] = useState10(() => preloads);
   useEffect7(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -9594,6 +9874,9 @@ var validateMediaProps = (props, component) => {
   if (typeof props.playbackRate === "number" && (isNaN(props.playbackRate) || !Number.isFinite(props.playbackRate) || props.playbackRate <= 0)) {
     throw new TypeError(`You have passed a playbackRate of ${props.playbackRate} to your <${component} /> component. Playback rate must be a real number above 0.`);
   }
+  if (typeof props.preservePitch !== "boolean" && typeof props.preservePitch !== "undefined") {
+    throw new TypeError(`'preservePitch' must be a boolean or undefined but got '${typeof props.preservePitch}' instead`);
+  }
 };
 var validateStartFromProps = (startFrom, endAt) => {
   if (typeof startFrom !== "undefined") {
@@ -9703,7 +9986,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo20(() => {
+  const value = useMemo21(() => {
     return {
       durations,
       setDurations
@@ -9837,7 +10120,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  const context = useMemo21(() => {
+  const context = useMemo22(() => {
     if (env.isRendering) {
       return null;
     }
@@ -9918,11 +10201,11 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     latencyHint: audioLatencyHint,
     audioEnabled
   });
-  const audioContextIsPlayingEventually = useRef11(false);
-  const isResuming = useRef11(null);
-  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
-  const audioSyncAnchorListeners = useRef11([]);
-  const audioSyncAnchorEmitter = useMemo22(() => {
+  const audioContextIsPlayingEventually = useRef12(false);
+  const isResuming = useRef12(null);
+  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
+  const audioSyncAnchorListeners = useRef12([]);
+  const audioSyncAnchorEmitter = useMemo23(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -9937,12 +10220,12 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       }
     };
   }, []);
-  const prevEndTimes = useRef11({ scheduledEndTime: null, mediaEndTime: null });
-  const nodesToResume = useRef11(new Map);
-  const unscheduleAudioNode = useCallback9((node) => {
+  const prevEndTimes = useRef12({ scheduledEndTime: null, mediaEndTime: null });
+  const nodesToResume = useRef12(new Map);
+  const unscheduleAudioNode = useCallback10((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo22(() => {
+  const scheduleAudioNode = useMemo23(() => {
     return ({
       node,
       mediaTimestamp,
@@ -9987,7 +10270,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       };
     };
   }, [ctxAndGain, logLevel]);
-  const resume = useCallback9(() => {
+  const resume = useCallback10(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -10014,10 +10297,10 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     });
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
-  const getIsResumingAudioContext = useCallback9(() => {
+  const getIsResumingAudioContext = useCallback10(() => {
     return isResuming.current;
   }, []);
-  const suspend = useCallback9(() => {
+  const suspend = useCallback10(() => {
     if (!ctxAndGain) {
       return;
     }
@@ -10027,7 +10310,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     audioContextIsPlayingEventually.current = false;
     ctxAndGain.audioContext.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo22(() => {
+  const audioContextValue = useMemo23(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       gainNode: ctxAndGain?.gainNode ?? null,
@@ -10055,8 +10338,8 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   });
 };
 var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
-  const audios = useRef11([]);
-  const [initialNumberOfAudioTags] = useState12(numberOfAudioTags);
+  const audios = useRef12([]);
+  const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
@@ -10066,7 +10349,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo22(() => {
+  const refs = useMemo23(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -10089,8 +10372,8 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     };
   }, [refs]);
-  const takenAudios = useRef11(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback9(() => {
+  const takenAudios = useRef12(new Array(numberOfAudioTags).fill(false));
+  const rerenderAudios = useCallback10(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -10111,7 +10394,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     });
   }, [refs]);
-  const registerAudio = useCallback9((options) => {
+  const registerAudio = useCallback10((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -10140,7 +10423,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback9((id) => {
+  const unregisterAudio = useCallback10((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r2) => r2.id === id);
     if (index === -1) {
@@ -10151,7 +10434,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback9(({
+  const updateAudio = useCallback10(({
     aud,
     audioId,
     id,
@@ -10185,7 +10468,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback9(() => {
+  const playAllAudios = useCallback10(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -10203,7 +10486,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo22(() => {
+  const audioTagsValue = useMemo23(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -10240,7 +10523,7 @@ var useSharedAudio = ({
 }) => {
   const audioCtx = useContext21(SharedAudioContext);
   const tagsCtx = useContext21(SharedAudioTagsContext);
-  const [elem] = useState12(() => {
+  const [elem] = useState11(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
@@ -10376,9 +10659,9 @@ var useAppendVideoFragment = ({
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef12(initialActualFrom);
-  const actualDuration = useRef12(initialDuration);
-  const actualSrc = useRef12(initialActualSrc);
+  const actualFromRef = useRef13(initialActualFrom);
+  const actualDuration = useRef13(initialDuration);
+  const actualSrc = useRef13(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -10415,8 +10698,8 @@ var useVolume = ({
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef13(null);
-  const currentVolumeRef = useRef13(volume);
+  const audioStuffRef = useRef14(null);
+  const currentVolumeRef = useRef14(volume);
   currentVolumeRef.current = volume;
   const sharedAudioContext = useContext22(SharedAudioContext);
   if (!sharedAudioContext) {
@@ -10573,7 +10856,7 @@ var useBasicMediaInTimeline = ({
     throw new Error("No src passed");
   }
   const parentSequence = useContext24(SequenceContext);
-  const [initialVolume] = useState13(() => volume);
+  const [initialVolume] = useState12(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
     playbackRate,
@@ -10582,7 +10865,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo23(() => {
+  const volumes = useMemo24(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -10603,7 +10886,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo23(() => {
+  const memoizedResult = useMemo24(() => {
     return {
       volumes,
       duration,
@@ -10632,7 +10915,7 @@ var useImageInTimeline = ({
   src,
   displayName,
   id,
-  stack,
+  getStack,
   showInTimeline,
   premountDisplay,
   postmountDisplay,
@@ -10679,7 +10962,7 @@ var useImageInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       loopDisplay,
-      stack,
+      getStack,
       premountDisplay,
       postmountDisplay,
       controls,
@@ -10696,7 +10979,7 @@ var useImageInTimeline = ({
     registerSequence,
     unregisterSequence,
     nonce,
-    stack,
+    getStack,
     showInTimeline,
     premountDisplay,
     postmountDisplay,
@@ -10715,7 +10998,7 @@ var useMediaInTimeline = ({
   playbackRate,
   displayName,
   id,
-  stack,
+  getStack,
   showInTimeline,
   premountDisplay,
   postmountDisplay,
@@ -10766,7 +11049,7 @@ var useMediaInTimeline = ({
       doesVolumeChange,
       loopDisplay,
       playbackRate,
-      stack,
+      getStack,
       premountDisplay,
       postmountDisplay,
       controls: null,
@@ -10788,7 +11071,7 @@ var useMediaInTimeline = ({
     mediaType,
     startsAt,
     playbackRate,
-    stack,
+    getStack,
     showInTimeline,
     premountDisplay,
     postmountDisplay,
@@ -10799,13 +11082,13 @@ var useMediaInTimeline = ({
   ]);
 };
 var useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState14([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState14([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState14([]);
+  const [blocks, setBlocks] = useState13([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
-  const buffering = useRef14(false);
-  const addBlock = useCallback10((block) => {
+  const buffering = useRef15(false);
+  const addBlock = useCallback11((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -10831,7 +11114,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback10((callback) => {
+  const listenForBuffering = useCallback11((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -10839,7 +11122,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback10((callback) => {
+  const listenForResume = useCallback11((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -10877,7 +11160,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo24(() => {
+  return useMemo25(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -10891,7 +11174,7 @@ var BufferingProvider = ({ children }) => {
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState14(bufferManager.buffering.current);
+  const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
   useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
@@ -10916,7 +11199,7 @@ var useBufferState = () => {
   const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo25(() => ({
+  return useMemo26(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -10951,9 +11234,9 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef15(false);
+  const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback11((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback12((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -11024,7 +11307,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo26(() => {
+  return useMemo27(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -11072,7 +11355,7 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState15(false);
+  const [isBuffering, setIsBuffering] = useState14(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -11205,7 +11488,7 @@ var useRequestVideoCallbackTime = ({
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef16(null);
+  const currentTime = useRef17(null);
   useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
@@ -11447,6 +11730,7 @@ var useMediaPlayback = ({
   src,
   mediaType,
   playbackRate: localPlaybackRate,
+  preservePitch = true,
   onlyWarnForMediaSeekingError,
   acceptableTimeshift,
   pauseWhenBuffering,
@@ -11461,15 +11745,15 @@ var useMediaPlayback = ({
   const buffering = useContext27(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef17(null);
-  const lastSeek = useRef17(null);
+  const lastSeekDueToShift = useRef18(null);
+  const lastSeek = useRef18(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef17({});
-  const onVariableFpsVideoDetected = useCallback12(() => {
+  const isVariableFpsVideoMap = useRef18({});
+  const onVariableFpsVideoDetected = useCallback13(() => {
     if (!src) {
       return;
     }
@@ -11564,7 +11848,10 @@ var useMediaPlayback = ({
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
-  }, [mediaRef, playbackRate]);
+    if (mediaRef.current && mediaRef.current.preservesPitch !== preservePitch) {
+      mediaRef.current.preservesPitch = preservePitch;
+    }
+  }, [mediaRef, playbackRate, preservePitch]);
   useEffect12(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
@@ -11748,14 +12035,14 @@ var SetMediaVolumeContext = createContext22({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext28(MediaVolumeContext);
   const { setMediaVolume } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
   const { mediaMuted } = useContext28(MediaVolumeContext);
   const { setMediaMuted } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -11765,7 +12052,7 @@ var warnAboutTooHighVolume = (volume) => {
   }
 };
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState16(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState15(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -11774,6 +12061,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume,
     muted,
     playbackRate,
+    preservePitch,
     shouldPreMountAudioTags,
     src,
     onDuration,
@@ -11804,14 +12092,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext29(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
   const sequenceContext = useContext29(SequenceContext);
-  const [timelineId] = useState16(() => String(Math.random()));
-  const isSequenceHidden = hidden[timelineId] ?? false;
+  const [timelineId] = useState15(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
     volume,
@@ -11823,9 +12109,9 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo28(() => {
+  const propsToPass = useMemo29(() => {
     return {
-      muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
+      muted: muted || mediaMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
       loop: _remotionInternalNativeLoopPassed,
       crossOrigin: crossOriginValue,
@@ -11833,7 +12119,6 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     };
   }, [
     _remotionInternalNativeLoopPassed,
-    isSequenceHidden,
     mediaMuted,
     muted,
     nativeProps,
@@ -11841,7 +12126,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11859,6 +12144,9 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
+  const getStack = useCallback14(() => {
+    return _remotionInternalStack ?? null;
+  }, [_remotionInternalStack]);
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -11867,7 +12155,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     playbackRate: playbackRate ?? 1,
     displayName: name ?? null,
     id: timelineId,
-    stack: _remotionInternalStack,
+    getStack,
     showInTimeline,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
@@ -11878,6 +12166,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     src,
     mediaType: "audio",
     playbackRate: playbackRate ?? 1,
+    preservePitch,
     onlyWarnForMediaSeekingError: false,
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
     isPremounting: Boolean(sequenceContext?.premounting),
@@ -11911,7 +12200,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef18(onDuration);
+  const currentOnDurationCallback = useRef19(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEffect14(() => {
     const { current } = audioRef;
@@ -11940,9 +12229,9 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     ...propsToPass
   });
 };
-var AudioForPreview = forwardRef6(AudioForDevelopmentForwardRefFunction);
+var AudioForPreview = forwardRef7(AudioForDevelopmentForwardRefFunction);
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef19(null);
+  const audioRef = useRef20(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -11959,6 +12248,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     loopVolumeCurveBehavior,
     pauseWhenBuffering,
     audioStreamIndex,
+    preservePitch: _preservePitch,
     ...nativeProps
   } = props;
   const absoluteFrame = useTimelinePosition();
@@ -11967,7 +12257,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   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}`, [
+  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -12072,7 +12362,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     onError: onNativeError
   });
 };
-var AudioForRendering = forwardRef7(AudioForRenderingRefForwardingFunction);
+var AudioForRendering = forwardRef8(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
   const audioTagsContext = useContext31(SharedAudioTagsContext);
   const {
@@ -12098,7 +12388,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback13((e) => {
+  const onError = useCallback15((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -12112,7 +12402,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback13((src, durationInSeconds) => {
+  const onDuration = useCallback15((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -12162,7 +12452,11 @@ var AudioRefForwardingFunction = (props, ref) => {
       })
     });
   }
-  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
+  validateMediaProps({
+    playbackRate: props.playbackRate,
+    preservePitch: props.preservePitch,
+    volume: props.volume
+  }, "Html5Audio");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx24(AudioForRendering, {
       onDuration,
@@ -12185,7 +12479,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     showInTimeline: showInTimeline ?? true
   });
 };
-var Html5Audio = forwardRef8(AudioRefForwardingFunction);
+var Html5Audio = forwardRef9(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
 var kSplineTableSize = 11;
@@ -12198,15 +12492,15 @@ var IFrameRefForwarding = ({
   ...props2
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState17(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState16(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback14((e) => {
+  const didLoad = useCallback16((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback14((e) => {
+  const didGetError = useCallback16((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -12222,7 +12516,7 @@ var IFrameRefForwarding = ({
     onLoad: didLoad
   });
 };
-var IFrame = forwardRef9(IFrameRefForwarding);
+var IFrame = forwardRef10(IFrameRefForwarding);
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -12232,7 +12526,7 @@ function truncateSrcForLabel(src) {
   }
   return src;
 }
-var ImgInner = ({
+var ImgContent = ({
   onError,
   maxRetries = 2,
   src,
@@ -12241,21 +12535,13 @@ var ImgInner = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
-  showInTimeline,
-  name,
-  stack,
   ref,
-  _experimentalControls: controls,
   ...props2
 }) => {
-  const imageRef = useRef20(null);
-  const errors = useRef20({});
+  const imageRef = useRef21(null);
+  const errors = useRef21({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext32(SequenceContext);
-  const [timelineId] = useState18(() => String(Math.random()));
-  if (!src) {
-    throw new Error('No "src" prop was passed to <Img>.');
-  }
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
@@ -12263,19 +12549,8 @@ var ImgInner = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
-  useImageInTimeline({
-    src,
-    displayName: name ?? null,
-    id: timelineId,
-    stack: stack ?? null,
-    showInTimeline: showInTimeline ?? true,
-    premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined,
-    controls: controls ?? null
-  });
   const actualSrc = usePreload(src);
-  const retryIn = useCallback15((timeout) => {
+  const retryIn = useCallback17((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -12293,7 +12568,7 @@ var ImgInner = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback15((e) => {
+  const didGetError = useCallback17((e) => {
     if (!errors.current) {
       return;
     }
@@ -12395,7 +12670,47 @@ var ImgInner = ({
     decoding: "sync"
   });
 };
-var Img = wrapInSchema(ImgInner, sequenceStyleSchema);
+var ImgInner = ({
+  hidden,
+  name,
+  stack,
+  showInTimeline,
+  src,
+  _experimentalControls: controls,
+  ...props2
+}) => {
+  const sequenceContext = useContext32(SequenceContext);
+  const [timelineId] = useState17(() => String(Math.random()));
+  if (!src) {
+    throw new Error('No "src" prop was passed to <Img>.');
+  }
+  const stackRef = useRef21(null);
+  stackRef.current = stack ?? null;
+  const getStack = useCallback17(() => stackRef.current, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    getStack,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined,
+    controls: controls ?? null
+  });
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx26(ImgContent, {
+    src,
+    ...props2
+  });
+};
+var imgSchema = {
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var Img = wrapInSchema(ImgInner, imgSchema);
 addSequenceStackTraces(Img);
 var compositionsRef = React28.createRef();
 var CompositionManagerProvider = ({
@@ -12405,18 +12720,18 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState19([]);
-  const [canvasContent, setCanvasContent] = useState19(initialCanvasContent);
-  const [compositions, setCompositions] = useState19(initialCompositions);
-  const currentcompositionsRef = useRef21(compositions);
-  const updateCompositions = useCallback16((updateComps) => {
+  const [folders, setFolders] = useState18([]);
+  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
+  const [compositions, setCompositions] = useState18(initialCompositions);
+  const currentcompositionsRef = useRef22(compositions);
+  const updateCompositions = useCallback18((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback16((comp) => {
+  const registerComposition = useCallback18((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -12424,12 +12739,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback16((id) => {
+  const unregisterComposition = useCallback18((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback16((name, parent, nonce) => {
+  const registerFolder = useCallback18((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -12441,7 +12756,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback16((name, parent) => {
+  const unregisterFolder = useCallback18((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -12451,7 +12766,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo30(() => {
+  const compositionManagerSetters = useMemo31(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -12467,7 +12782,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo30(() => {
+  const compositionManagerContextValue = useMemo31(() => {
     return {
       compositions,
       folders,
@@ -12541,14 +12856,33 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
+var disabledEffectField = {
+  type: "boolean",
+  default: false,
+  description: "Disabled"
+};
 var createEffect = (definition) => {
-  const widened = definition;
-  const factory = (params = {}) => ({
-    definition: widened,
-    params,
-    effectKey: widened.calculateKey(params),
-    memoized: false
-  });
+  const { calculateKey: userCalculateKey, validateParams } = definition;
+  const widened = {
+    ...definition,
+    calculateKey: (params) => {
+      const disabled = params.disabled ?? false;
+      return `${userCalculateKey(params)}-disabled-${disabled}`;
+    },
+    schema: {
+      disabled: disabledEffectField,
+      ...definition.schema
+    }
+  };
+  const factory = (params = {}) => {
+    validateParams(params);
+    return {
+      definition: widened,
+      params,
+      effectKey: widened.calculateKey(params),
+      memoized: false
+    };
+  };
   return factory;
 };
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
@@ -12599,7 +12933,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo31(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo322(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
@@ -12614,13 +12948,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo322(() => {
+  const nonceContext = useMemo33(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo322(() => {
+  const logging = useMemo33(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx29(LogLevelContext.Provider, {
@@ -12901,6 +13235,7 @@ var OffthreadVideoForRendering = ({
   onVideoFrame,
   crossOrigin,
   audioStreamIndex,
+  preservePitch: _preservePitch,
   ...props2
 }) => {
   const absoluteFrame = useTimelinePosition();
@@ -12913,7 +13248,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo33(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo34(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12968,14 +13303,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo33(() => {
+  const currentTime = useMemo34(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo33(() => {
+  const actualSrc = useMemo34(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -12983,7 +13318,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState20(null);
+  const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect11(() => {
     if (!window.remotion_videoEnabled) {
@@ -13056,17 +13391,17 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback17(() => {
+  const onErr = useCallback19(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo33(() => {
+  const className = useMemo34(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy2).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback17((img) => {
+  const onImageFrame = useCallback19((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -13125,8 +13460,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef22(null);
-  const sharedSource = useMemo34(() => {
+  const videoRef = useRef23(null);
+  const sharedSource = useMemo35(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -13147,6 +13482,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     volume,
     muted,
     playbackRate,
+    preservePitch,
     onlyWarnForMediaSeekingError,
     src,
     onDuration,
@@ -13178,11 +13514,9 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
   const parentSequence = useContext35(SequenceContext);
-  const { hidden } = useContext35(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState21(() => String(Math.random()));
-  const isSequenceHidden = hidden[timelineId] ?? false;
+  const [timelineId] = useState20(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -13194,6 +13528,9 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
+  const getStack = useCallback20(() => {
+    return _remotionInternalStack ?? null;
+  }, [_remotionInternalStack]);
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -13202,7 +13539,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     playbackRate: props2.playbackRate ?? 1,
     displayName: name ?? null,
     id: timelineId,
-    stack: _remotionInternalStack,
+    getStack,
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
@@ -13213,6 +13550,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     src,
     mediaType: "video",
     playbackRate: props2.playbackRate ?? 1,
+    preservePitch,
     onlyWarnForMediaSeekingError,
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
     isPremounting: Boolean(parentSequence?.premounting),
@@ -13247,7 +13585,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState21(() => playbackLogging({
+  useState20(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -13293,7 +13631,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef22(onDuration);
+  const currentOnDurationCallback = useRef23(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect18(() => {
@@ -13324,12 +13662,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo34(() => {
+  const actualStyle = useMemo35(() => {
     return {
-      ...style,
-      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
+      ...style
     };
-  }, [isSequenceHidden, style]);
+  }, [style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame),
@@ -13337,7 +13674,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   });
   return /* @__PURE__ */ jsx31("video", {
     ref: videoRef,
-    muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
+    muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
     src: actualSrc,
     loop: _remotionInternalNativeLoopPassed,
@@ -13347,7 +13684,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef10(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef11(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -13364,7 +13701,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback18(() => {
+  const onDuration = useCallback21(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -13452,6 +13789,7 @@ var OffthreadVideo = ({
   onVideoFrame,
   pauseWhenBuffering,
   playbackRate,
+  preservePitch,
   showInTimeline,
   style,
   toneFrequency,
@@ -13487,6 +13825,7 @@ var OffthreadVideo = ({
     onVideoFrame,
     pauseWhenBuffering: pauseWhenBuffering ?? true,
     playbackRate: playbackRate ?? 1,
+    preservePitch,
     toneFrequency: toneFrequency ?? 1,
     showInTimeline: showInTimeline ?? true,
     src,
@@ -13518,7 +13857,7 @@ function useRemotionContexts() {
   const sequenceManagerContext = React36.useContext(SequenceManager);
   const bufferManagerContext = React36.useContext(BufferingContextReact);
   const logLevelContext = React36.useContext(LogLevelContext);
-  return useMemo35(() => ({
+  return useMemo36(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -13607,10 +13946,11 @@ var Internals = {
   VisualModeSettersContext,
   SequenceManager,
   SequenceStackTracesUpdateContext,
-  SequenceVisibilityToggleContext,
   wrapInSchema,
   sequenceSchema,
   sequenceStyleSchema,
+  sequenceVisualStyleSchema,
+  sequencePremountSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -13705,13 +14045,16 @@ var Internals = {
   useMemoizedEffects,
   useMemoizedEffectDefinitions,
   createEffect,
+  createWebGLContextError,
+  createWebGL2ContextError,
   computeEffectiveSchemaValuesDotNotation,
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
   makeSequencePropsSubscriptionKey,
   getCodeValuesCtx,
-  getEffectCodeValuesCtx
+  getEffectCodeValuesCtx,
+  hiddenField
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -13774,9 +14117,9 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     children
   });
 };
-var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef12(SeriesSequenceRefForwardingFunction);
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo36(() => {
+  const childrenValue = useMemo37(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -14299,13 +14642,14 @@ var VideoForRenderingForwardFunction = ({
   loopVolumeCurveBehavior,
   audioStreamIndex,
   onVideoFrame,
+  preservePitch: _preservePitch,
   ...props2
 }, ref) => {
   const absoluteFrame = useTimelinePosition();
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef23(null);
+  const videoRef = useRef24(null);
   const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -14313,7 +14657,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
-  const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo38(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -14501,7 +14845,7 @@ var VideoForRenderingForwardFunction = ({
     ...props2
   });
 };
-var VideoForRendering = forwardRef12(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef13(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -14530,10 +14874,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback19((src, durationInSeconds) => {
+  const onDuration = useCallback22((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback19(() => {}, []);
+  const onVideoFrame = useCallback22(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -14585,7 +14929,11 @@ var VideoForwardingFunction = (props2, ref) => {
       })
     });
   }
-  validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
+  validateMediaProps({
+    playbackRate: props2.playbackRate,
+    preservePitch: props2.preservePitch,
+    volume: props2.volume
+  }, "Html5Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx37(VideoForRendering, {
       onDuration,
@@ -14607,7 +14955,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef13(VideoForwardingFunction);
+var Html5Video = forwardRef14(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -14637,7 +14985,7 @@ addSequenceStackTraces(Composition);
 // ../design/dist/esm/index.mjs
 import { jsx as jsx210, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef25 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef26 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -14651,21 +14999,21 @@ import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
-import React11 from "react";
+import React112 from "react";
 import * as React8 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
 import * as React9 from "react";
-import * as React102 from "react";
+import * as React10 from "react";
 import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
-import * as React12 from "react";
+import * as React122 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React16 from "react";
-import * as React132 from "react";
+import * as React13 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React14 from "react";
-import * as React152 from "react";
+import * as React142 from "react";
+import * as React15 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React172 from "react";
 import * as React18 from "react";
@@ -14891,7 +15239,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo38(() => new EventTarget, []);
+  const eventTarget = useMemo39(() => new EventTarget, []);
   useEffect20(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
@@ -15038,7 +15386,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
   useEffect20(() => {
     const element = ref.current;
     if (!element) {
@@ -15159,7 +15507,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef25([]);
+  const pathsRef = useRef26([]);
   useEffect22(() => {
     const animate = () => {
       const now = performance.now();
@@ -15205,9 +15553,9 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef24(null);
+  const ref = useRef25(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback22((e) => {
+  const onPointerEnter = useCallback24((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -15244,7 +15592,7 @@ var Button = ({
   const isDisabled = disabled || loading;
   const isAnchor = !asChild && "href" in rest && rest.href !== undefined;
   const sharedClasses = cn("text-text", "inline-flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
-  const preventInteraction = useCallback22((e) => {
+  const preventInteraction = useCallback24((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -15553,43 +15901,43 @@ function composeRefs2(...refs) {
 function useComposedRefs2(...refs) {
   return React9.useCallback(composeRefs2(...refs), refs);
 }
-var Slot2 = React102.forwardRef((props, forwardedRef) => {
+var Slot2 = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React102.Children.toArray(children);
+  const childrenArray = React10.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable2);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React102.Children.count(newElement) > 1)
-          return React102.Children.only(null);
-        return React102.isValidElement(newElement) ? newElement.props.children : null;
+        if (React10.Children.count(newElement) > 1)
+          return React10.Children.only(null);
+        return React10.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    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: React10.isValidElement(newElement) ? React10.cloneElement(newElement, undefined, newChildren) : null });
   }
   return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot2.displayName = "Slot";
-var SlotClone = React102.forwardRef((props, forwardedRef) => {
+var SlotClone = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React102.isValidElement(children)) {
+  if (React10.isValidElement(children)) {
     const childrenRef = getElementRef2(children);
-    return React102.cloneElement(children, {
+    return React10.cloneElement(children, {
       ...mergeProps2(slotProps, children.props),
       ref: forwardedRef ? composeRefs2(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React102.Children.count(children) > 1 ? React102.Children.only(null) : null;
+  return React10.Children.count(children) > 1 ? React10.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable2 = ({ children }) => {
   return /* @__PURE__ */ jsx142(Fragment5, { children });
 };
 function isSlottable2(child) {
-  return React102.isValidElement(child) && child.type === Slottable2;
+  return React10.isValidElement(child) && child.type === Slottable2;
 }
 function mergeProps2(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -15633,13 +15981,13 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React11.useRef(null);
-    const itemMap = React11.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React112.useRef(null);
+    const itemMap = React112.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx152(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React11.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React112.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
@@ -15648,12 +15996,12 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React11.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React112.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React11.useRef(null);
+    const ref = React112.useRef(null);
     const composedRefs = useComposedRefs2(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React11.useEffect(() => {
+    React112.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -15662,7 +16010,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React11.useCallback(() => {
+    const getItems = React112.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -15679,9 +16027,9 @@ function createCollection(name) {
     createCollectionScope
   ];
 }
-var DirectionContext = React12.createContext(undefined);
+var DirectionContext = React122.createContext(undefined);
 function useDirection(localDir) {
-  const globalDir = React12.useContext(DirectionContext);
+  const globalDir = React122.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 var NODES = [
@@ -15703,7 +16051,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React132.forwardRef((props, forwardedRef) => {
+  const Node2 = React13.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -15719,15 +16067,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React14.useRef(callback);
-  React14.useEffect(() => {
+  const callbackRef = React142.useRef(callback);
+  React142.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React152.useEffect(() => {
+  React15.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -21338,10 +21686,10 @@ var Triangle2 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback34, useState as useState41 } from "react";
+import { useCallback as useCallback35, useState as useState39 } from "react";
 
 // src/components/ManageTeamMembers.tsx
-import React53, { useCallback as useCallback33, useState as useState40 } from "react";
+import React53, { useCallback as useCallback34, useState as useState38 } from "react";
 import { jsx as jsx40, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
 function generateId() {
   return Math.random().toString(36).substr(2, 9);
@@ -21385,9 +21733,9 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
   });
 };
 var ManageTeamMembers = () => {
-  const [members, setMembers] = useState40(initialMembers);
+  const [members, setMembers] = useState38(initialMembers);
   const displayedMembers = [...members, { id: "NEW", name: "" }];
-  const updateMember = useCallback33((idx, value) => {
+  const updateMember = useCallback34((idx, value) => {
     if (idx === members.length) {
       if (value.trim() !== "") {
         setMembers((prev) => [...prev, { id: generateId(), name: value }]);
@@ -21396,11 +21744,11 @@ var ManageTeamMembers = () => {
       setMembers((prev) => prev.map((m, i) => i === idx ? { ...m, name: value } : m));
     }
   }, [members.length]);
-  const deleteMember = useCallback33((idx) => {
+  const deleteMember = useCallback34((idx) => {
     setMembers((prev) => prev.filter((_, i) => i !== idx));
   }, []);
-  const [loading, setLoading] = useState40(false);
-  const save = useCallback33(() => {
+  const [loading, setLoading] = useState38(false);
+  const save = useCallback34(() => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
@@ -21455,24 +21803,24 @@ var Explainer = ({ children }) => {
   });
 };
 var DesignPage = () => {
-  const [count4, setCount] = useState41(10);
-  const [active, setActive] = useState41(false);
-  const [submitButtonActive, setSubmitButtonActive] = useState41(true);
-  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState41(true);
-  const onClick = useCallback34(() => {
+  const [count4, setCount] = useState39(10);
+  const [active, setActive] = useState39(false);
+  const [submitButtonActive, setSubmitButtonActive] = useState39(true);
+  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState39(true);
+  const onClick = useCallback35(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
-  const onClickPrimary = useCallback34(() => {
+  const onClickPrimary = useCallback35(() => {
     setSubmitButtonPrimaryActive(false);
     setTimeout(() => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
-  const [saving, setSaving] = useState41(false);
-  const save = useCallback34(() => {
+  const [saving, setSaving] = useState39(false);
+  const save = useCallback35(() => {
     setSaving(true);
     setTimeout(() => {
       setSaving(false);