@remotion/promo-pages 4.0.463 → 4.0.464

package/dist/Homepage.js

@@ -1,15 +1,26 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -900,7 +911,7 @@ var experts = [
   }
 ];
 // src/components/experts/ExpertsPage.tsx
-import { useMemo as useMemo38 } from "react";
+import { useMemo as useMemo39 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
@@ -930,13 +941,6 @@ import * as React6 from "react";
 import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-import {
-  forwardRef as forwardRef4,
-  useCallback as useCallback6,
-  useEffect as useEffect5,
-  useMemo as useMemo16,
-  useState as useState6
-} from "react";
 import {
   forwardRef as forwardRef3,
   useContext as useContext17,
@@ -944,6 +948,7 @@ import {
   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";
@@ -966,18 +971,25 @@ import React12, { forwardRef as forwardRef2, useState as useState4, useContext a
 import { useContext as useContext15, useRef as useRef5 } from "react";
 import { createContext as createContext15 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef6 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useEffect as useEffect5,
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef9,
+  useState as useState6
+} 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 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 useCallback7, 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,
@@ -985,78 +997,78 @@ import {
   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 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 forwardRef9, useCallback as useCallback14, 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 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 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 useCallback13,
   useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
-  useRef as useRef17
+  useRef as useRef18
 } from "react";
-import { useCallback as useCallback12, 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 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 forwardRef8,
@@ -1064,47 +1076,47 @@ import {
   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 forwardRef10, useCallback as useCallback15, 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 useCallback16,
+  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 useCallback17,
+  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 useMemo32 } 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 useMemo32 } 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 useCallback19 } from "react";
+import { useCallback as useCallback21 } from "react";
 import {
-  useCallback as useCallback18,
+  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, {
@@ -1112,45 +1124,42 @@ import React34, {
   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 jsx32 } 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 forwardRef12, 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 forwardRef14, useCallback as useCallback20, useContext as useContext37 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback22, useContext as useContext37 } from "react";
 import {
   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";
 var __defProp2 = Object.defineProperty;
-var __returnValue2 = (v) => v;
-function __exportSetter2(name, newValue) {
-  this[name] = __returnValue2.bind(null, newValue);
-}
 var __export2 = (target, all) => {
   for (var name in all)
     __defProp2(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter2.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 if (typeof createContext !== "function") {
@@ -2215,75 +2224,33 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-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 VERSION = "4.0.464";
+var checkMultipleRemotionVersions = () => {
+  if (typeof globalThis === "undefined") {
+    return;
   }
-};
-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: {}
+  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(truthy).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.`);
   }
-};
-var sequenceSchemaDefaultLayoutNone = {
-  ...sequenceSchema,
-  layout: {
-    ...sequenceSchema.layout,
-    default: "none"
-  }
+  set();
 };
 var SequenceContext = createContext12(null);
 var exports_timeline_position_state = {};
@@ -2619,6 +2586,82 @@ var Freeze = ({
 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"
+  }
+};
+var sequencePremountSchema = {
+  premountFor: {
+    type: "number",
+    default: 0,
+    description: "Premount For",
+    min: 0,
+    step: 1
+  },
+  postmountFor: {
+    type: "hidden"
+  },
+  styleWhilePremounted: {
+    type: "hidden"
+  },
+  styleWhilePostmounted: {
+    type: "hidden"
+  }
+};
+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 sequenceSchemaDefaultLayoutNone = {
+  ...sequenceSchema,
+  layout: {
+    ...sequenceSchema.layout,
+    default: "none"
+  }
+};
 var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -3301,7 +3344,8 @@ var RegularSequenceRefForwardingFunction = ({
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  const [stackDoesntChange] = useState5(() => stack ?? inheritedStack);
+  const stackRef = useRef6(null);
+  stackRef.current = stack ?? inheritedStack;
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -3325,7 +3369,7 @@ var RegularSequenceRefForwardingFunction = ({
         rootId,
         showInTimeline,
         src: isMedia.data.src,
-        stack: stackDoesntChange,
+        getStack: () => stackRef.current,
         startMediaFrom: isMedia.data.startMediaFrom,
         volume: isMedia.data.volumes
       });
@@ -3344,7 +3388,7 @@ var RegularSequenceRefForwardingFunction = ({
       showInTimeline,
       nonce: nonce.get(),
       loopDisplay,
-      stack: stackDoesntChange,
+      getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
@@ -3367,7 +3411,6 @@ var RegularSequenceRefForwardingFunction = ({
     showInTimeline,
     nonce,
     loopDisplay,
-    stackDoesntChange,
     premountDisplay,
     postmountDisplay,
     env.isStudio,
@@ -3476,6 +3519,10 @@ var SequenceRefForwardingFunction = (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;
@@ -3524,7 +3571,7 @@ class CanvasPool {
           preserveDrawingBuffer: true
         });
         if (!ctx) {
-          throw new Error("Failed to acquire WebGL2 context for canvas effect");
+          throw createWebGL2ContextError("canvas effect");
         }
         canvas.addEventListener("webglcontextlost", (e) => {
           e.preventDefault();
@@ -3691,8 +3738,8 @@ var runEffectChain = async ({
   return true;
 };
 var useEffectChainState = () => {
-  const chainStateRef = useRef6(null);
-  const sizeRef = useRef6(null);
+  const chainStateRef = useRef7(null);
+  const sizeRef = useRef7(null);
   useEffect4(() => {
     return () => {
       if (chainStateRef.current) {
@@ -3713,186 +3760,6 @@ var useEffectChainState = () => {
     }
   }), []);
 };
-var solidSchema = {
-  color: {
-    type: "color",
-    default: "#ffffff",
-    description: "Color"
-  },
-  width: {
-    type: "number",
-    min: 1,
-    step: 1,
-    default: 1920,
-    description: "Width"
-  },
-  height: {
-    type: "number",
-    min: 1,
-    step: 1,
-    default: 1080,
-    description: "Height"
-  },
-  ...sequenceStyleSchema
-};
-var SolidInner = ({
-  color,
-  width,
-  height,
-  _experimentalEffects: experimentalEffects = [],
-  className,
-  style,
-  overrideId,
-  ref
-}) => {
-  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const [outputCanvas, setOutputCanvas] = useState6(null);
-  const memoizedEffects = useMemoizedEffects({
-    effects: experimentalEffects,
-    overrideId: overrideId ?? null
-  });
-  const sourceCanvas = useMemo16(() => {
-    if (typeof document === "undefined") {
-      return null;
-    }
-    const canvas = document.createElement("canvas");
-    canvas.width = 1;
-    canvas.height = 1;
-    return canvas;
-  }, []);
-  const chainState = useEffectChainState();
-  const canvasRef = useCallback6((canvas) => {
-    setOutputCanvas(canvas);
-    if (typeof ref === "function") {
-      ref(canvas);
-    } else if (ref) {
-      ref.current = canvas;
-    }
-  }, [ref]);
-  useEffect5(() => {
-    if (!outputCanvas || !sourceCanvas) {
-      return;
-    }
-    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.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);
-      }
-    }).catch((err) => {
-      cancelRender2(err);
-    });
-    return () => {
-      continueRender2(handle);
-    };
-  }, [
-    color,
-    outputCanvas,
-    sourceCanvas,
-    chainState,
-    width,
-    height,
-    delayRender2,
-    continueRender2,
-    cancelRender2,
-    memoizedEffects
-  ]);
-  return /* @__PURE__ */ jsx12("canvas", {
-    ref: canvasRef,
-    width,
-    height,
-    className,
-    style
-  });
-};
-var SolidOuter = forwardRef4(({
-  _experimentalEffects = [],
-  _experimentalControls: controls,
-  color,
-  height,
-  width,
-  className,
-  durationInFrames,
-  style,
-  name,
-  from,
-  hidden,
-  showInTimeline,
-  ...props
-}, ref) => {
-  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(_experimentalEffects);
-  return /* @__PURE__ */ jsx12(Sequence, {
-    layout: "none",
-    from,
-    hidden,
-    showInTimeline,
-    _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
-    durationInFrames,
-    name: name ?? "<Solid>",
-    ...props,
-    children: /* @__PURE__ */ jsx12(SolidInner, {
-      ref,
-      overrideId: controls?.overrideId ?? null,
-      color,
-      height,
-      width,
-      className,
-      style,
-      _experimentalEffects
-    })
-  });
-});
-var Solid = wrapInSchema(SolidOuter, solidSchema);
-Solid.displayName = "Solid";
-addSequenceStackTraces(Solid);
-var VERSION = "4.0.463";
-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(truthy).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 calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -3941,29 +3808,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 = useCallback7((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,
@@ -3982,13 +3869,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,
@@ -4144,10 +4031,10 @@ var animatedImageSchema = {
     default: 1,
     description: "Playback Rate"
   },
-  ...sequenceStyleSchema,
+  ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
-var AnimatedImageContent = forwardRef5(({
+var AnimatedImageContent = forwardRef4(({
   src,
   width,
   height,
@@ -4155,26 +4042,24 @@ var AnimatedImageContent = forwardRef5(({
   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) {
@@ -4182,8 +4067,8 @@ var AnimatedImageContent = forwardRef5(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState7(() => loopBehavior);
-  useEffect6(() => {
+  const [initialLoopBehavior] = useState6(() => loopBehavior);
+  useEffect5(() => {
     const controller = new AbortController;
     decodeImage({
       resolvedSrc,
@@ -4220,16 +4105,24 @@ var AnimatedImageContent = forwardRef5(({
       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);
-        }
+    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);
       }
-      continueRender2(delay);
     }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
       if (onError) {
         onError(err);
         continueRender2(delay);
@@ -4237,6 +4130,10 @@ var AnimatedImageContent = forwardRef5(({
         cancelRender(err);
       }
     });
+    return () => {
+      cancelled = true;
+      continueRender2(delay);
+    };
   }, [
     currentTime,
     imageDecoder,
@@ -4244,13 +4141,18 @@ var AnimatedImageContent = forwardRef5(({
     onError,
     src,
     continueRender2,
-    delayRender2
+    delayRender2,
+    memoizedEffects,
+    fit,
+    width,
+    height
   ]);
-  return /* @__PURE__ */ jsx14(Canvas, {
+  return /* @__PURE__ */ jsx13(Canvas, {
     ref,
     width,
     height,
     fit,
+    effects: memoizedEffects,
     ...props
   });
 });
@@ -4267,12 +4169,14 @@ var AnimatedImageInner = ({
   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,
@@ -4285,21 +4189,179 @@ var AnimatedImageInner = ({
     className,
     style
   };
-  return /* @__PURE__ */ jsx14(Sequence, {
+  return /* @__PURE__ */ jsx13(Sequence, {
     layout: "none",
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
     _experimentalControls: controls,
+    _experimentalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
+    children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
       ...animatedImageProps,
-      ref
+      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 chainState = useEffectChainState();
+  const canvasRef = useCallback7((canvas) => {
+    setOutputCanvas(canvas);
+    if (typeof ref === "function") {
+      ref(canvas);
+    } else if (ref) {
+      ref.current = canvas;
+    }
+  }, [ref]);
+  useEffect6(() => {
+    if (!outputCanvas || !sourceCanvas) {
+      return;
+    }
+    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);
+      }
+    }).catch((err) => {
+      cancelRender2(err);
+    });
+    return () => {
+      continueRender2(handle);
+    };
+  }, [
+    color,
+    outputCanvas,
+    sourceCanvas,
+    chainState,
+    width,
+    height,
+    delayRender2,
+    continueRender2,
+    cancelRender2,
+    memoizedEffects
+  ]);
+  return /* @__PURE__ */ jsx14("canvas", {
+    ref: canvasRef,
+    width,
+    height,
+    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) {
@@ -4310,7 +4372,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).";
@@ -4346,8 +4408,10 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
-  const canvas2dRef = useRef9(null);
-  const divRef = useRef9(null);
+  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") {
@@ -4356,45 +4420,48 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
       ref.current = node;
     }
   }, [ref]);
-  const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const effectsRef = useRef9(memoizedEffects);
+  const effectsRef = useRef10(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  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 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
           });
@@ -4409,17 +4476,17 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
         }
       }
       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,
+        output: offscreen,
         width,
         height
       });
@@ -4427,29 +4494,30 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
     } 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;
@@ -4473,8 +4541,8 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2]);
-  const innerStyle = useMemo17(() => {
+  }, [width, height, continueRender2, canvasSizeKey]);
+  const innerStyle = useMemo18(() => {
     return {
       width,
       height
@@ -4495,7 +4563,7 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
         style: innerStyle,
         children
       })
-    })
+    }, canvasSizeKey)
   });
 });
 HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
@@ -4537,7 +4605,7 @@ var HtmlInCanvasInner = forwardRef6(({
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
-  ...sequenceStyleSchema,
+  ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
 var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
@@ -4585,8 +4653,8 @@ var RenderAssetManager = createContext17({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState9([]);
-  const renderAssetsRef = useRef10([]);
+  const [renderAssets, setRenderAssets] = useState8([]);
+  const renderAssetsRef = useRef11([]);
   const registerRenderAsset = useCallback9((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
@@ -4618,7 +4686,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo18(() => {
+  const contextValue = useMemo19(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -4635,7 +4703,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(() => {
@@ -4747,14 +4815,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
@@ -4792,7 +4860,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);
@@ -5116,7 +5184,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo20(() => {
+  const value = useMemo21(() => {
     return {
       durations,
       setDurations
@@ -5250,7 +5318,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  const context = useMemo21(() => {
+  const context = useMemo22(() => {
     if (env.isRendering) {
       return null;
     }
@@ -5331,11 +5399,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));
@@ -5350,12 +5418,12 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       }
     };
   }, []);
-  const prevEndTimes = useRef11({ scheduledEndTime: null, mediaEndTime: null });
-  const nodesToResume = useRef11(new Map);
+  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,
@@ -5440,7 +5508,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,
@@ -5468,8 +5536,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.");
   }
@@ -5479,7 +5547,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 {
@@ -5502,7 +5570,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     };
   }, [refs]);
-  const takenAudios = useRef11(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef12(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback10(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -5616,7 +5684,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo22(() => {
+  const audioTagsValue = useMemo23(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -5653,7 +5721,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 });
     }
@@ -5789,9 +5857,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,
@@ -5828,8 +5896,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) {
@@ -5986,7 +6054,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,
@@ -5995,7 +6063,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo23(() => {
+  const volumes = useMemo24(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -6016,7 +6084,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo23(() => {
+  const memoizedResult = useMemo24(() => {
     return {
       volumes,
       duration,
@@ -6045,7 +6113,7 @@ var useImageInTimeline = ({
   src,
   displayName,
   id,
-  stack,
+  getStack,
   showInTimeline,
   premountDisplay,
   postmountDisplay,
@@ -6092,7 +6160,7 @@ var useImageInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       loopDisplay,
-      stack,
+      getStack,
       premountDisplay,
       postmountDisplay,
       controls,
@@ -6109,7 +6177,7 @@ var useImageInTimeline = ({
     registerSequence,
     unregisterSequence,
     nonce,
-    stack,
+    getStack,
     showInTimeline,
     premountDisplay,
     postmountDisplay,
@@ -6128,7 +6196,7 @@ var useMediaInTimeline = ({
   playbackRate,
   displayName,
   id,
-  stack,
+  getStack,
   showInTimeline,
   premountDisplay,
   postmountDisplay,
@@ -6179,7 +6247,7 @@ var useMediaInTimeline = ({
       doesVolumeChange,
       loopDisplay,
       playbackRate,
-      stack,
+      getStack,
       premountDisplay,
       postmountDisplay,
       controls: null,
@@ -6201,7 +6269,7 @@ var useMediaInTimeline = ({
     mediaType,
     startsAt,
     playbackRate,
-    stack,
+    getStack,
     showInTimeline,
     premountDisplay,
     postmountDisplay,
@@ -6212,12 +6280,12 @@ 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 buffering = useRef15(false);
   const addBlock = useCallback11((block) => {
     if (rendering) {
       return {
@@ -6290,7 +6358,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo24(() => {
+  return useMemo25(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -6304,7 +6372,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);
@@ -6329,7 +6397,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");
@@ -6364,7 +6432,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef15(false);
+  const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback12((requestedTime) => {
     if (mediaType !== "video") {
@@ -6437,7 +6505,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo26(() => {
+  return useMemo27(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -6485,7 +6553,7 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState15(false);
+  const [isBuffering, setIsBuffering] = useState14(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -6618,7 +6686,7 @@ var useRequestVideoCallbackTime = ({
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef16(null);
+  const currentTime = useRef17(null);
   useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
@@ -6875,14 +6943,14 @@ 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 isVariableFpsVideoMap = useRef18({});
   const onVariableFpsVideoDetected = useCallback13(() => {
     if (!src) {
       return;
@@ -7165,14 +7233,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]);
 };
@@ -7182,7 +7250,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.");
   }
@@ -7227,7 +7295,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }
   const preloadedSrc = usePreload(src);
   const sequenceContext = useContext29(SequenceContext);
-  const [timelineId] = useState16(() => String(Math.random()));
+  const [timelineId] = useState15(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
     volume,
@@ -7239,7 +7307,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo28(() => {
+  const propsToPass = useMemo29(() => {
     return {
       muted: muted || mediaMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -7256,7 +7324,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,
@@ -7274,6 +7342,9 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
+  const getStack = useCallback14(() => {
+    return _remotionInternalStack ?? null;
+  }, [_remotionInternalStack]);
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -7282,7 +7353,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,
@@ -7327,7 +7398,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;
@@ -7358,7 +7429,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 var AudioForPreview = forwardRef7(AudioForDevelopmentForwardRefFunction);
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef19(null);
+  const audioRef = useRef20(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -7384,7 +7455,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,
@@ -7515,7 +7586,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 = useCallback14((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) {
@@ -7529,7 +7600,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback14((src, durationInSeconds) => {
+  const onDuration = useCallback15((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -7619,15 +7690,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 = useCallback15((e) => {
+  const didLoad = useCallback16((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback15((e) => {
+  const didGetError = useCallback16((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -7665,8 +7736,8 @@ var ImgContent = ({
   ref,
   ...props2
 }) => {
-  const imageRef = useRef20(null);
-  const errors = useRef20({});
+  const imageRef = useRef21(null);
+  const errors = useRef21({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext32(SequenceContext);
   const _propsValid = true;
@@ -7677,7 +7748,7 @@ var ImgContent = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback16((timeout) => {
+  const retryIn = useCallback17((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -7695,7 +7766,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback16((e) => {
+  const didGetError = useCallback17((e) => {
     if (!errors.current) {
       return;
     }
@@ -7807,15 +7878,18 @@ var ImgInner = ({
   ...props2
 }) => {
   const sequenceContext = useContext32(SequenceContext);
-  const [timelineId] = useState18(() => String(Math.random()));
+  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,
-    stack: stack ?? null,
+    getStack,
     showInTimeline: showInTimeline ?? true,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
@@ -7831,7 +7905,7 @@ var ImgInner = ({
   });
 };
 var imgSchema = {
-  ...sequenceStyleSchema,
+  ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
 var Img = wrapInSchema(ImgInner, imgSchema);
@@ -7844,18 +7918,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 = useCallback17((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 = useCallback17((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.`);
@@ -7863,12 +7937,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback17((id) => {
+  const unregisterComposition = useCallback18((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback17((name, parent, nonce) => {
+  const registerFolder = useCallback18((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -7880,7 +7954,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback17((name, parent) => {
+  const unregisterFolder = useCallback18((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -7890,7 +7964,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo30(() => {
+  const compositionManagerSetters = useMemo31(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -7906,7 +7980,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo30(() => {
+  const compositionManagerContextValue = useMemo31(() => {
     return {
       compositions,
       folders,
@@ -7986,7 +8060,7 @@ var disabledEffectField = {
   description: "Disabled"
 };
 var createEffect = (definition) => {
-  const userCalculateKey = definition.calculateKey;
+  const { calculateKey: userCalculateKey, validateParams } = definition;
   const widened = {
     ...definition,
     calculateKey: (params) => {
@@ -7998,12 +8072,15 @@ var createEffect = (definition) => {
       ...definition.schema
     }
   };
-  const factory = (params = {}) => ({
-    definition: widened,
-    params,
-    effectKey: widened.calculateKey(params),
-    memoized: false
-  });
+  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";
@@ -8054,7 +8131,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo31(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo32(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
@@ -8069,13 +8146,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo32(() => {
+  const nonceContext = useMemo33(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo32(() => {
+  const logging = useMemo33(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx29(LogLevelContext.Provider, {
@@ -8369,7 +8446,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,
@@ -8424,14 +8501,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,
@@ -8439,7 +8516,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) {
@@ -8512,17 +8589,17 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback18(() => {
+  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(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback18((img) => {
+  const onImageFrame = useCallback19((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -8581,8 +8658,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;
     }
@@ -8637,7 +8714,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const parentSequence = useContext35(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState21(() => String(Math.random()));
+  const [timelineId] = useState20(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -8649,6 +8726,9 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
+  const getStack = useCallback20(() => {
+    return _remotionInternalStack ?? null;
+  }, [_remotionInternalStack]);
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -8657,7 +8737,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,
@@ -8703,7 +8783,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",
@@ -8749,7 +8829,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(() => {
@@ -8780,7 +8860,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo34(() => {
+  const actualStyle = useMemo35(() => {
     return {
       ...style
     };
@@ -8819,7 +8899,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 = useCallback19(() => {
+  const onDuration = useCallback21(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -8975,7 +9055,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,
@@ -9067,6 +9147,8 @@ var Internals = {
   wrapInSchema,
   sequenceSchema,
   sequenceStyleSchema,
+  sequenceVisualStyleSchema,
+  sequencePremountSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -9161,6 +9243,8 @@ var Internals = {
   useMemoizedEffects,
   useMemoizedEffectDefinitions,
   createEffect,
+  createWebGLContextError,
+  createWebGL2ContextError,
   computeEffectiveSchemaValuesDotNotation,
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
@@ -9233,7 +9317,7 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
 };
 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) => {
@@ -9763,7 +9847,7 @@ var VideoForRenderingForwardFunction = ({
   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();
@@ -9771,7 +9855,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,
@@ -9988,10 +10072,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 = useCallback20((src, durationInSeconds) => {
+  const onDuration = useCallback22((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback20(() => {}, []);
+  const onVideoFrame = useCallback22(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -10434,7 +10518,7 @@ var ExpertCard = ({ expert, Link }) => {
   });
 };
 var ExpertsPageContent = ({ Link }) => {
-  const expertsInRandomOrder = useMemo38(() => {
+  const expertsInRandomOrder = useMemo39(() => {
     if (typeof window === "undefined") {
       return [];
     }
@@ -10535,7 +10619,7 @@ var ExpertsPageContent = ({ Link }) => {
 import * as React24 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx44 } 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) {
@@ -11877,7 +11961,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo41, useState as useState23 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo42, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -14643,7 +14727,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React3, { useMemo as useMemo40 } from "react";
+import React3, { useMemo as useMemo41 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx42, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -14674,13 +14758,13 @@ var RenderSvg = ({
   instructions,
   ...props
 }) => {
-  const actualStyle = useMemo40(() => {
+  const actualStyle = useMemo41(() => {
     return {
       overflow: "visible",
       ...style ?? {}
     };
   }, [style]);
-  const actualPathStyle = useMemo40(() => {
+  const actualPathStyle = useMemo41(() => {
     return {
       transformBox: "fill-box",
       ...pathStyle ?? {}
@@ -16217,7 +16301,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx311, jsxs as jsxs6 } 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 jsx45 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -16244,8 +16328,8 @@ import * as React16 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";
@@ -16269,8 +16353,8 @@ import * as React282 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React35 from "react";
 import * as React312 from "react";
-import * as React292 from "react";
 import { useState as useState112 } from "react";
+import * as React292 from "react";
 import * as React30 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
@@ -16471,7 +16555,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo41(() => new EventTarget, []);
+  const eventTarget = useMemo42(() => new EventTarget, []);
   useEffect20(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
@@ -16618,7 +16702,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) {
@@ -16739,7 +16823,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef25([]);
+  const pathsRef = useRef26([]);
   useEffect22(() => {
     const animate = () => {
       const now = performance.now();
@@ -16785,9 +16869,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;
     }
@@ -16824,7 +16908,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();
   }, []);
@@ -17299,15 +17383,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);
@@ -20025,7 +20109,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 var __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
+  __assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length;i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -21812,17 +21896,17 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
     const BaseContext = React382.createContext(defaultContext);
-    const index3 = defaultContexts.length;
+    const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index3] || BaseContext;
+      const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React382.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index3] || BaseContext;
+      const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const context = React382.useContext(Context);
       if (context)
         return context;
@@ -22019,10 +22103,10 @@ var OrderedDict = class _OrderedDict extends Map {
     super.set(key, value);
     return this;
   }
-  insert(index3, key, value) {
+  insert(index2, key, value) {
     const has = this.has(key);
     const length2 = this.#keys.length;
-    const relativeIndex = toSafeInteger(index3);
+    const relativeIndex = toSafeInteger(index2);
     let actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
     const safeIndex = actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
     if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
@@ -22060,39 +22144,39 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return this;
   }
-  with(index3, key, value) {
+  with(index2, key, value) {
     const copy = new _OrderedDict(this);
-    copy.insert(index3, key, value);
+    copy.insert(index2, key, value);
     return copy;
   }
   before(key) {
-    const index3 = this.#keys.indexOf(key) - 1;
-    if (index3 < 0) {
+    const index2 = this.#keys.indexOf(key) - 1;
+    if (index2 < 0) {
       return;
     }
-    return this.entryAt(index3);
+    return this.entryAt(index2);
   }
   setBefore(key, newKey, value) {
-    const index3 = this.#keys.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.#keys.indexOf(key);
+    if (index2 === -1) {
       return this;
     }
-    return this.insert(index3, newKey, value);
+    return this.insert(index2, newKey, value);
   }
   after(key) {
-    let index3 = this.#keys.indexOf(key);
-    index3 = index3 === -1 || index3 === this.size - 1 ? -1 : index3 + 1;
-    if (index3 === -1) {
+    let index2 = this.#keys.indexOf(key);
+    index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
+    if (index2 === -1) {
       return;
     }
-    return this.entryAt(index3);
+    return this.entryAt(index2);
   }
   setAfter(key, newKey, value) {
-    const index3 = this.#keys.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.#keys.indexOf(key);
+    if (index2 === -1) {
       return this;
     }
-    return this.insert(index3 + 1, newKey, value);
+    return this.insert(index2 + 1, newKey, value);
   }
   first() {
     return this.entryAt(0);
@@ -22111,21 +22195,21 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return deleted;
   }
-  deleteAt(index3) {
-    const key = this.keyAt(index3);
+  deleteAt(index2) {
+    const key = this.keyAt(index2);
     if (key !== undefined) {
       return this.delete(key);
     }
     return false;
   }
-  at(index3) {
-    const key = at(this.#keys, index3);
+  at(index2) {
+    const key = at(this.#keys, index2);
     if (key !== undefined) {
       return this.get(key);
     }
   }
-  entryAt(index3) {
-    const key = at(this.#keys, index3);
+  entryAt(index2) {
+    const key = at(this.#keys, index2);
     if (key !== undefined) {
       return [key, this.get(key)];
     }
@@ -22133,15 +22217,15 @@ var OrderedDict = class _OrderedDict extends Map {
   indexOf(key) {
     return this.#keys.indexOf(key);
   }
-  keyAt(index3) {
-    return at(this.#keys, index3);
+  keyAt(index2) {
+    return at(this.#keys, index2);
   }
   from(key, offset4) {
-    const index3 = this.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.indexOf(key);
+    if (index2 === -1) {
       return;
     }
-    let dest = index3 + offset4;
+    let dest = index2 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -22149,11 +22233,11 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.at(dest);
   }
   keyFrom(key, offset4) {
-    const index3 = this.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.indexOf(key);
+    if (index2 === -1) {
       return;
     }
-    let dest = index3 + offset4;
+    let dest = index2 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -22161,68 +22245,68 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.keyAt(dest);
   }
   find(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         return entry;
       }
-      index3++;
+      index2++;
     }
     return;
   }
   findIndex(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
-        return index3;
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        return index2;
       }
-      index3++;
+      index2++;
     }
     return -1;
   }
   filter(predicate, thisArg) {
     const entries = [];
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         entries.push(entry);
       }
-      index3++;
+      index2++;
     }
     return new _OrderedDict(entries);
   }
   map(callbackfn, thisArg) {
     const entries = [];
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index3, this])]);
-      index3++;
+      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
+      index2++;
     }
     return new _OrderedDict(entries);
   }
   reduce(...args) {
     const [callbackfn, initialValue] = args;
-    let index3 = 0;
+    let index2 = 0;
     let accumulator = initialValue ?? this.at(0);
     for (const entry of this) {
-      if (index3 === 0 && args.length === 1) {
+      if (index2 === 0 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
       }
-      index3++;
+      index2++;
     }
     return accumulator;
   }
   reduceRight(...args) {
     const [callbackfn, initialValue] = args;
     let accumulator = initialValue ?? this.at(-1);
-    for (let index3 = this.size - 1;index3 >= 0; index3--) {
-      const entry = this.at(index3);
-      if (index3 === this.size - 1 && args.length === 1) {
+    for (let index2 = this.size - 1;index2 >= 0; index2--) {
+      const entry = this.at(index2);
+      if (index2 === this.size - 1 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
       }
     }
     return accumulator;
@@ -22233,8 +22317,8 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   toReversed() {
     const reversed = new _OrderedDict;
-    for (let index3 = this.size - 1;index3 >= 0; index3--) {
-      const key = this.keyAt(index3);
+    for (let index2 = this.size - 1;index2 >= 0; index2--) {
+      const key = this.keyAt(index2);
       const element = this.get(key);
       reversed.set(key, element);
     }
@@ -22257,44 +22341,44 @@ var OrderedDict = class _OrderedDict extends Map {
     if (end !== undefined && end > 0) {
       stop = end - 1;
     }
-    for (let index3 = start;index3 <= stop; index3++) {
-      const key = this.keyAt(index3);
+    for (let index2 = start;index2 <= stop; index2++) {
+      const key = this.keyAt(index2);
       const element = this.get(key);
       result.set(key, element);
     }
     return result;
   }
   every(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (!Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         return false;
       }
-      index3++;
+      index2++;
     }
     return true;
   }
   some(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         return true;
       }
-      index3++;
+      index2++;
     }
     return false;
   }
 };
-function at(array, index3) {
+function at(array, index2) {
   if ("at" in Array.prototype) {
-    return Array.prototype.at.call(array, index3);
+    return Array.prototype.at.call(array, index2);
   }
-  const actualIndex = toSafeIndex(array, index3);
+  const actualIndex = toSafeIndex(array, index2);
   return actualIndex === -1 ? undefined : array[actualIndex];
 }
-function toSafeIndex(array, index3) {
+function toSafeIndex(array, index2) {
   const length2 = array.length;
-  const relativeIndex = toSafeInteger(index3);
+  const relativeIndex = toSafeInteger(index2);
   const actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
   return actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
 }
@@ -22346,7 +22430,7 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
-function useCallbackRef4(callback) {
+function useCallbackRef3(callback) {
   const callbackRef = React44.useRef(callback);
   React44.useEffect(() => {
     callbackRef.current = callback;
@@ -22450,7 +22534,7 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
     caller: GROUP_NAME2
   });
   const [isTabbingBackOut, setIsTabbingBackOut] = React47.useState(false);
-  const handleEntryFocus = useCallbackRef4(onEntryFocus);
+  const handleEntryFocus = useCallbackRef3(onEntryFocus);
   const getItems = useCollection2(__scopeRovingFocusGroup);
   const isClickFocusRef = React47.useRef(false);
   const [focusableItemsCount, setFocusableItemsCount] = React47.useState(0);
@@ -22603,7 +22687,7 @@ function focusFirst2(candidates, preventScroll = false) {
   }
 }
 function wrapArray2(array, startIndex) {
-  return array.map((_, index3) => array[(startIndex + index3) % array.length]);
+  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
 var Root3 = RovingFocusGroup;
 var Item2 = RovingFocusGroupItem;
@@ -22918,7 +23002,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React53, { useCallback as useCallback32, useMemo as useMemo50 } from "react";
+import React53, { useCallback as useCallback34, useMemo as useMemo51 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -24565,7 +24649,7 @@ var CompanyPricing = () => {
   const [automatorsSelected, setAutomatorsSelected] = React53.useState(true);
   const [devSeatCount, setDevSeatCount] = React53.useState(3);
   const [cloudRenders, setCloudRenders] = React53.useState(1e4);
-  const formatPrice = useCallback32((price) => {
+  const formatPrice = useCallback34((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -24575,14 +24659,14 @@ var CompanyPricing = () => {
   }, []);
   const creatorsPrice = creatorsSelected ? devSeatCount * SEAT_PRICE : 0;
   const automatorsPrice = automatorsSelected ? Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE : 0;
-  const totalPrice = useMemo50(() => {
+  const totalPrice = useMemo51(() => {
     const basePrice = creatorsPrice + automatorsPrice;
     if (automatorsSelected) {
       return Math.max(100, basePrice);
     }
     return basePrice;
   }, [creatorsPrice, automatorsPrice, automatorsSelected]);
-  const totalPriceString = useMemo50(() => {
+  const totalPriceString = useMemo51(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
@@ -25288,14 +25372,14 @@ import { createContext as createContext32 } from "react";
 import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
+import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
 import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
-import { useEffect as useEffect24, useState as useState24 } from "react";
+import { useEffect as useEffect24, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext45, useEffect as useEffect52, useRef as useRef42 } from "react";
-import { useEffect as useEffect310, useRef as useRef26 } from "react";
-import { useCallback as useCallback33, useContext as useContext39, useMemo as useMemo51, useRef as useRef43, useState as useState310 } from "react";
+import { useContext as useContext45, useEffect as useEffect52, useRef as useRef43 } from "react";
+import { useEffect as useEffect310, useRef as useRef27 } from "react";
+import { useCallback as useCallback35, useContext as useContext39, useMemo as useMemo52, useRef as useRef44, useState as useState39 } from "react";
 import { useEffect as useEffect43, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -25325,10 +25409,10 @@ import { jsx as jsx55 } from "react/jsx-runtime";
 import { useCallback as useCallback72, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
 import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52, useState as useState62 } from "react";
-import React54, { useCallback as useCallback34, useMemo as useMemo39, useState as useState52 } from "react";
+import React54, { useCallback as useCallback36, useMemo as useMemo310, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo52, useState as useState82 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo53, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
 import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
@@ -26020,7 +26104,7 @@ var proResProfileOptions = [
   "light",
   "proxy"
 ];
-var sequenceStyleSchema2 = {
+var sequenceVisualStyleSchema2 = {
   "style.translate": {
     type: "translate",
     step: 1,
@@ -26048,7 +26132,9 @@ var sequenceStyleSchema2 = {
     step: 0.01,
     default: 1,
     description: "Opacity"
-  },
+  }
+};
+var sequencePremountSchema2 = {
   premountFor: {
     type: "number",
     default: 0,
@@ -26066,6 +26152,10 @@ var sequenceStyleSchema2 = {
     type: "hidden"
   }
 };
+var sequenceStyleSchema2 = {
+  ...sequenceVisualStyleSchema2,
+  ...sequencePremountSchema2
+};
 var hiddenField2 = {
   type: "boolean",
   default: false,
@@ -26746,7 +26836,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState40(() => new PlayerEmitter);
+  const [emitter] = useState38(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -26763,7 +26853,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState24(false);
+  const [hovered, setHovered] = useState210(false);
   useEffect24(() => {
     const { current } = ref;
     if (!current) {
@@ -26804,15 +26894,15 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
-  const [hasPlayed, setHasPlayed] = useState310(false);
+  const [hasPlayed, setHasPlayed] = useState39(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef43(frame);
+  const playStart = useRef44(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext39(Internals.SharedAudioContext);
   const audioTagsContext = useContext39(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
-  const frameRef = useRef43(frame);
+  const frameRef = useRef44(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -26828,14 +26918,14 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek2 = useCallback33((newFrame) => {
+  const seek2 = useCallback35((newFrame) => {
     if (video?.id) {
       setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
     frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
   }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback33((e) => {
+  const play = useCallback35((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -26862,7 +26952,7 @@ var usePlayer = () => {
     seek2,
     audioAndVideoTags
   ]);
-  const pause = useCallback33(() => {
+  const pause = useCallback35(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
@@ -26870,7 +26960,7 @@ var usePlayer = () => {
       audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback33(() => {
+  const pauseAndReturnToPlayStart = useCallback35(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -26885,7 +26975,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback33((frames) => {
+  const frameBack = useCallback35((frames) => {
     if (!videoId) {
       return null;
     }
@@ -26904,7 +26994,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback33((frames) => {
+  const frameForward = useCallback35((frames) => {
     if (!videoId) {
       return null;
     }
@@ -26923,23 +27013,23 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback33((e) => {
+  const toggle = useCallback35((e) => {
     if (imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback33(() => {
+  const isPlaying = useCallback35(() => {
     return imperativePlaying.current;
   }, [imperativePlaying]);
-  const getCurrentFrame = useCallback33(() => {
+  const getCurrentFrame = useCallback35(() => {
     return frameRef.current;
   }, [frameRef]);
-  const isBuffering = useCallback33(() => {
+  const isBuffering = useCallback35(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo51(() => {
+  const returnValue = useMemo52(() => {
     return {
       frameBack,
       frameForward,
@@ -26982,7 +27072,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  const hasEverPlayed = useRef26(false);
+  const hasEverPlayed = useRef27(false);
   useEffect310(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -27174,7 +27264,7 @@ var usePlayback = ({
   const sharedAudioContext = useContext45(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef42(0);
+  const lastTimeUpdateTimestamp = useRef43(0);
   const context = useContext45(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -27640,7 +27730,7 @@ var DefaultVolumeSlider = ({
   inputRef,
   setVolume
 }) => {
-  const sliderContainer = useMemo39(() => {
+  const sliderContainer = useMemo310(() => {
     const paddingLeft = 5;
     const common = {
       paddingLeft,
@@ -27662,10 +27752,10 @@ var DefaultVolumeSlider = ({
   }, [isVertical]);
   const randomId = typeof React54.useId === "undefined" ? "volume-slider" : React54.useId();
   const [randomClass] = useState52(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback34((e) => {
+  const onVolumeChange = useCallback36((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
-  const inputStyle = useMemo39(() => {
+  const inputStyle = useMemo310(() => {
     const commonStyle = {
       WebkitAppearance: "none",
       backgroundColor: "rgba(255, 255, 255, 0.5)",
@@ -27885,7 +27975,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo52(() => {
+  const actualStyle = useMemo53(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -27952,7 +28042,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo52(() => {
+  const playbackPopup = useMemo53(() => {
     return {
       position: "absolute",
       right: 0,
@@ -29840,10 +29930,10 @@ var Thumbnail = forward2(ThumbnailFn);
 
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback48,
+  useCallback as useCallback50,
   useEffect as useEffect58,
-  useMemo as useMemo64,
-  useRef as useRef53,
+  useMemo as useMemo66,
+  useRef as useRef55,
   useState as useState56
 } from "react";
 
@@ -29899,7 +29989,7 @@ function _isNativeReflectConstruct() {
   try {
     var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
   } catch (t2) {}
-  return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
     return !!t;
   })();
 }
@@ -29917,7 +30007,7 @@ function _construct(t, e, r2) {
 // ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
 function _wrapNativeSuper(t) {
   var r2 = typeof Map == "function" ? new Map : undefined;
-  return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
+  return _wrapNativeSuper = function _wrapNativeSuper(t2) {
     if (t2 === null || !_isNativeFunction(t2))
       return t2;
     if (typeof t2 != "function")
@@ -30593,7 +30683,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React57, { useContext as useContext46, useMemo as useMemo53 } from "react";
+import React57, { useContext as useContext46, useMemo as useMemo54 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -30601,7 +30691,7 @@ var ColorModeProvider = ({
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo53(() => {
+  const value = useMemo54(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx57(Context.Provider, {
@@ -30618,15 +30708,15 @@ function useColorMode() {
 }
 
 // ../media/dist/esm/index.mjs
-import { useState as useState312 } from "react";
-import { useMemo as useMemo311 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo55, useRef as useRef45, useState as useState41 } from "react";
+import { useState as useState311 } from "react";
+import { useMemo as useMemo312 } from "react";
+import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo56, useRef as useRef46, useState as useState40 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
+import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -30653,7 +30743,7 @@ import { jsx as jsx412 } from "react/jsx-runtime";
 import {
   useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
-  useMemo as useMemo54,
+  useMemo as useMemo55,
   useRef as useRef312,
   useState as useState53
 } from "react";
@@ -31722,6 +31812,10 @@ var videoIteratorManager = async ({
   let videoFrameIterator = null;
   let framesRendered = 0;
   let currentDelayHandle = null;
+  let lastDrawnFrame = null;
+  const clearLastDrawnFrame = () => {
+    lastDrawnFrame = null;
+  };
   if (canvas) {
     const displayWidth = await videoTrack.getDisplayWidth();
     const displayHeight = await videoTrack.getDisplayHeight();
@@ -31736,7 +31830,7 @@ var videoIteratorManager = async ({
     alpha: true
   });
   const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
-  const drawFrame = async (frame) => {
+  const paintFrame = async (frame) => {
     if (context && canvas) {
       const effects = getEffects();
       const chainState = getEffectChainState(canvas.width, canvas.height);
@@ -31754,6 +31848,10 @@ var videoIteratorManager = async ({
         context.drawImage(frame.canvas, 0, 0);
       }
     }
+  };
+  const drawFrame = async (frame) => {
+    await paintFrame(frame);
+    lastDrawnFrame = frame;
     framesRendered++;
     drawDebugOverlay();
     const callback = getOnVideoFrameCallback();
@@ -31762,9 +31860,22 @@ var videoIteratorManager = async ({
     }
     Internals.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
+  const redrawCurrentFrame = async () => {
+    if (!lastDrawnFrame) {
+      return;
+    }
+    await paintFrame(lastDrawnFrame);
+    drawDebugOverlay();
+    const callback = getOnVideoFrameCallback();
+    if (callback) {
+      callback(lastDrawnFrame.canvas);
+    }
+    Internals.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Redrew frame ${lastDrawnFrame.timestamp.toFixed(3)}s with updated effects`);
+  };
   const startVideoIterator = async (timeToSeek, nonce) => {
     let __stack = [];
     try {
+      clearLastDrawnFrame();
       videoFrameIterator?.destroy();
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
@@ -31816,6 +31927,7 @@ var videoIteratorManager = async ({
     getVideoIteratorsCreated: () => videoIteratorsCreated,
     seek: seek2,
     destroy: () => {
+      clearLastDrawnFrame();
       prewarmedVideoIteratorCache.destroy();
       videoFrameIterator?.destroy();
       if (context && canvas) {
@@ -31829,6 +31941,7 @@ var videoIteratorManager = async ({
     },
     getVideoFrameIterator: () => videoFrameIterator,
     drawFrame,
+    redrawCurrentFrame,
     getFramesRendered: () => framesRendered
   };
 };
@@ -32338,6 +32451,9 @@ class MediaPlayer {
   setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
   }
+  async redrawVideoEffects() {
+    await this.videoIteratorManager?.redrawCurrentFrame();
+  }
   drawDebugOverlay = () => {
     if (!this.debugOverlay)
       return;
@@ -32559,11 +32675,11 @@ var AudioForPreviewAssertedShowing = ({
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
-  const mediaPlayerRef = useRef45(null);
-  const initialTrimBeforeRef = useRef45(trimBefore);
-  const initialTrimAfterRef = useRef45(trimAfter);
-  const [mediaPlayerReady, setMediaPlayerReady] = useState41(false);
-  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState41(false);
+  const mediaPlayerRef = useRef46(null);
+  const initialTrimBeforeRef = useRef46(trimBefore);
+  const initialTrimAfterRef = useRef46(trimAfter);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState40(false);
+  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState40(false);
   const [playing] = Timeline.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
   const sharedAudioContext = useContext212(SharedAudioContext2);
@@ -32584,7 +32700,7 @@ var AudioForPreviewAssertedShowing = ({
     throw new TypeError("No `src` was passed to <NewAudioForPreview>.");
   }
   const currentTime = frame / videoConfig.fps;
-  const currentTimeRef = useRef45(currentTime);
+  const currentTimeRef = useRef46(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
   const parentSequence = useContext212(SequenceContext2);
@@ -32597,14 +32713,14 @@ var AudioForPreviewAssertedShowing = ({
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
-  const initialPlaying = useRef45(playing && !isPlayerBuffering);
-  const initialIsPremounting = useRef45(isPremounting);
-  const initialIsPostmounting = useRef45(isPostmounting);
-  const initialGlobalPlaybackRate = useRef45(globalPlaybackRate);
-  const initialPlaybackRate = useRef45(playbackRate);
-  const initialMuted = useRef45(effectiveMuted);
-  const initialDurationInFrames = useRef45(videoConfig.durationInFrames);
-  const initialSequenceOffset = useRef45(sequenceOffset);
+  const initialPlaying = useRef46(playing && !isPlayerBuffering);
+  const initialIsPremounting = useRef46(isPremounting);
+  const initialIsPostmounting = useRef46(isPostmounting);
+  const initialGlobalPlaybackRate = useRef46(globalPlaybackRate);
+  const initialPlaybackRate = useRef46(playbackRate);
+  const initialMuted = useRef46(effectiveMuted);
+  const initialDurationInFrames = useRef46(videoConfig.durationInFrames);
+  const initialSequenceOffset = useRef46(sequenceOffset);
   useCommonEffects({
     mediaPlayerRef,
     mediaPlayerReady,
@@ -32815,7 +32931,7 @@ var AudioForPreview2 = ({
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo55(() => {
+  const showShow = useMemo56(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -34689,7 +34805,7 @@ var AudioForRendering2 = ({
   }
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState212(false);
   const sequenceContext = useContext311(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
@@ -34905,8 +35021,8 @@ var AudioInner = (props) => {
     mediaStartsAt,
     loop: props.loop ?? false
   });
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState312(null);
-  const loopDisplay = useMemo311(() => getLoopDisplay({
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState311(null);
+  const loopDisplay = useMemo312(() => getLoopDisplay({
     loop: props.loop ?? false,
     mediaDurationInSeconds,
     playbackRate: props.playbackRate ?? 1,
@@ -34923,7 +35039,7 @@ var AudioInner = (props) => {
     sequenceDurationInFrames,
     videoConfig.fps
   ]);
-  const isMedia = useMemo311(() => ({
+  const isMedia = useMemo312(() => ({
     type: "audio",
     data: basicInfo
   }), [basicInfo]);
@@ -35306,6 +35422,13 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
+  useLayoutEffect34(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.redrawVideoEffects().catch(() => {});
+  }, [_experimentalEffects, mediaPlayerReady, mediaPlayerRef]);
   const actualStyle = useMemo412(() => {
     return {
       ...style2,
@@ -35405,7 +35528,7 @@ var VideoForRendering2 = ({
   const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const sequenceContext = useContext53(Internals.SequenceContext);
-  const id = useMemo54(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo55(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -35598,10 +35721,10 @@ var VideoForRendering2 = ({
     credentials
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo54(() => {
+  const classNameValue = useMemo55(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
-  const styleWithObjectFit = useMemo54(() => {
+  const styleWithObjectFit = useMemo55(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -35692,7 +35815,7 @@ var videoSchema = {
     description: "Hidden"
   },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals.sequenceStyleSchema
+  ...Internals.sequenceVisualStyleSchema
 };
 var InnerVideo = ({
   src,
@@ -35929,19 +36052,19 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback40, useEffect as useEffect50, useMemo as useMemo58, useState as useState48 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect50, useMemo as useMemo59, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
-  useCallback as useCallback39,
+  useCallback as useCallback41,
   useEffect as useEffect49,
-  useRef as useRef49,
+  useRef as useRef50,
   useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
-import { useCallback as useCallback37, useRef as useRef46 } from "react";
+import { useCallback as useCallback39, useRef as useRef47 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -35975,10 +36098,10 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback35 } from "react";
+import { useCallback as useCallback37 } from "react";
 import { jsx as jsx60, jsxs as jsxs14 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback35((e) => {
+  const onPointerDown = useCallback37((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
@@ -36039,9 +36162,9 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef46([]);
+  const stopPrevious = useRef47([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback37((except) => {
+  const applyPositions = useCallback39((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -36114,7 +36237,7 @@ var Card2 = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback37((e) => {
+  const onPointerDown = useCallback39((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -36175,7 +36298,7 @@ var Card2 = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index2, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback37((e) => {
+  const onPointerUp = useCallback39((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index2);
@@ -36302,15 +36425,15 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 // src/components/homepage/Demo/EmojiCard.tsx
 import {
   forwardRef as forwardRef36,
-  useCallback as useCallback38,
+  useCallback as useCallback40,
   useEffect as useEffect48,
   useImperativeHandle as useImperativeHandle12,
-  useRef as useRef48
+  useRef as useRef49
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect46, useRef as useRef47, useState as useState44 } from "react";
+import { useEffect as useEffect46, useRef as useRef48, useState as useState44 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -36379,10 +36502,10 @@ var Lottie = ({
   }
   validatePlaybackRate2(playbackRate);
   validateLoop(loop);
-  const animationRef = useRef47(null);
-  const currentFrameRef = useRef47(null);
-  const containerRef = useRef47(null);
-  const onAnimationLoadedRef = useRef47(onAnimationLoaded);
+  const animationRef = useRef48(null);
+  const currentFrameRef = useRef48(null);
+  const containerRef = useRef48(null);
+  const onAnimationLoadedRef = useRef48(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
@@ -36481,14 +36604,14 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect47, useMemo as useMemo56, useState as useState46 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo57, useState as useState46 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
   const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
-  const src = useMemo56(() => {
+  const src = useMemo57(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -36582,11 +36705,11 @@ var emojiStyle = {
   top: "calc(50% - 50px)"
 };
 var EmojiCardRefFn = ({ emojiIndex }, ref) => {
-  const ref1 = useRef48(null);
-  const ref2 = useRef48(null);
-  const ref3 = useRef48(null);
-  const transforms = useRef48([-100, 0, 100]);
-  const onLeft = useCallback38(() => {
+  const ref1 = useRef49(null);
+  const ref2 = useRef49(null);
+  const ref3 = useRef49(null);
+  const transforms = useRef49([-100, 0, 100]);
+  const onLeft = useCallback40(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -36597,7 +36720,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback38(() => {
+  const onRight = useCallback40(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -36915,7 +37038,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/TrendingRepos.tsx
-import { useMemo as useMemo57 } from "react";
+import { useMemo as useMemo58 } from "react";
 import { jsx as jsx80, jsxs as jsxs21 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
@@ -36928,7 +37051,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo57(() => {
+  const item = useMemo58(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -37031,14 +37154,14 @@ var Cards = ({
   location,
   trending
 }) => {
-  const container4 = useRef49(null);
+  const container4 = useRef50(null);
   const [refs] = useState47(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
-  const positions = useRef49(getInitialPositions());
-  const shouldBePositions = useRef49(getInitialPositions());
+  const positions = useRef50(getInitialPositions());
+  const shouldBePositions = useRef50(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
   useEffect49(() => {
     const { current } = container4;
@@ -37056,12 +37179,12 @@ var Cards = ({
       current.removeEventListener("click", onClick);
     };
   }, [onToggle]);
-  const ref = useRef49(null);
-  const onLeft = useCallback39(() => {
+  const ref = useRef50(null);
+  const onLeft = useCallback41(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback39(() => {
+  const onRight = useCallback41(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
@@ -37131,11 +37254,11 @@ var HomepageVideoComp = ({
   onClickRight
 }) => {
   const [rerenders, setRerenders] = useState48(0);
-  const onUpdate = useCallback40((newIndices) => {
+  const onUpdate = useCallback43((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo58(() => {
+  const emoji = useMemo59(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -37144,7 +37267,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo58(() => {
+  const audioSrc = useMemo59(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -37229,7 +37352,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.463";
+var VERSION2 = "4.0.464";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -41858,7 +41981,7 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React68, { useCallback as useCallback41 } from "react";
+import React68, { useCallback as useCallback45 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -41964,7 +42087,7 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo59 } from "react";
+import { useMemo as useMemo60 } from "react";
 import { jsx as jsx95, jsxs as jsxs29, Fragment as Fragment14 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
@@ -41972,7 +42095,7 @@ var className2 = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
 var translated3 = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
 var Spinner2 = ({ size: size4, duration }) => {
-  const style2 = useMemo59(() => {
+  const style2 = useMemo60(() => {
     return {
       width: size4,
       height: size4
@@ -42059,7 +42182,7 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
   const [state, setState] = React68.useState({
     type: "idle"
   });
-  const triggerRender = useCallback41(async () => {
+  const triggerRender = useCallback45(async () => {
     if (renderData === null) {
       return;
     }
@@ -42234,13 +42357,13 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback45, useEffect as useEffect53, useMemo as useMemo61, useRef as useRef50, useState as useState51 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect53, useMemo as useMemo64, useRef as useRef51, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback43, useEffect as useEffect51, useMemo as useMemo60, useState as useState50 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect51, useMemo as useMemo61, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
-  const observer = useMemo60(() => {
+  const observer = useMemo61(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -42251,7 +42374,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback43(() => {
+  const updateSize = useCallback46(() => {
     if (ref === null) {
       return;
     }
@@ -42363,7 +42486,7 @@ var PlayerSeekBar2 = ({
   outFrame,
   playerRef
 }) => {
-  const containerRef = useRef50(null);
+  const containerRef = useRef51(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
@@ -42403,7 +42526,7 @@ var PlayerSeekBar2 = ({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
-  const onPointerDown = useCallback45((e) => {
+  const onPointerDown = useCallback47((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -42417,7 +42540,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback45((e) => {
+  const onPointerMove = useCallback47((e) => {
     if (!size4) {
       throw new Error("Player has no size");
     }
@@ -42428,7 +42551,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size4.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size4]);
-  const onPointerUp = useCallback45(() => {
+  const onPointerUp = useCallback47(() => {
     setDragging({
       dragging: false
     });
@@ -42454,7 +42577,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo61(() => {
+  const knobStyle = useMemo64(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -42468,7 +42591,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo61(() => {
+  const fillStyle = useMemo64(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -42477,7 +42600,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo61(() => {
+  const active = useMemo64(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -42512,7 +42635,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback46, useEffect as useEffect55, useRef as useRef51, useState as useState54 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect55, useRef as useRef53, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -42572,7 +42695,7 @@ import { jsx as jsx105 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
-  const timerRef = useRef51(null);
+  const timerRef = useRef53(null);
   useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
@@ -42593,7 +42716,7 @@ var PlayerVolume = ({ playerRef }) => {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback46(() => {
+  const onClick = useCallback48(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -42631,7 +42754,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React71, { useCallback as useCallback47, useEffect as useEffect56 } from "react";
+import React71, { useCallback as useCallback49, useEffect as useEffect56 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -42667,7 +42790,7 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback47(() => {
+  const onToggle = useCallback49(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
@@ -42861,7 +42984,7 @@ var playerWrapper = {
 var Demo = () => {
   const { colorMode } = useColorMode();
   const [data2, setData] = useState56(null);
-  const ref = useRef53(null);
+  const ref = useRef55(null);
   const [isFullscreen, setIsFullscreen] = useState56(false);
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
@@ -42887,10 +43010,10 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback48((newCardOrder) => {
+  const updateCardOrder = useCallback50((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo64(() => {
+  const props = useMemo66(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -42909,7 +43032,7 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback48(() => {
+  const onError = useCallback50(() => {
     setError(true);
   }, []);
   return /* @__PURE__ */ jsxs38("div", {
@@ -43019,15 +43142,15 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef39, useEffect as useEffect60, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
+import { forwardRef as forwardRef39, useEffect as useEffect60, useImperativeHandle as useImperativeHandle14, useRef as useRef57 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef38, useCallback as useCallback49, useEffect as useEffect59, useRef as useRef55, useState as useState57 } from "react";
+import { forwardRef as forwardRef38, useCallback as useCallback51, useEffect as useEffect59, useRef as useRef56, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
-  const targetRef = useRef55(null);
+  const targetRef = useRef56(null);
   useEffect59(() => {
     refs.forEach((ref) => {
       if (!ref)
@@ -43042,12 +43165,12 @@ var useCombinedRefs = function(...refs) {
   return targetRef;
 };
 var VideoPlayerWithControls = forwardRef38(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef55(null);
+  const videoRef = useRef56(null);
   const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef55(null);
+  const playerRef = useRef56(null);
   const [playerInitTime] = useState57(Date.now());
-  const videoError = useCallback49((event) => onError(event), [onError]);
-  const onImageLoad = useCallback49((event) => {
+  const videoError = useCallback51((event) => onError(event), [onError]);
+  const onImageLoad = useCallback51((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -43129,7 +43252,7 @@ var getVideoToPlayUrl = (muxId) => {
   return `https://stream.mux.com/${muxId}.m3u8`;
 };
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef56(null);
+  const videoRef = useRef57(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle14(ref, () => videoRef.current, []);
   useEffect60(() => {
@@ -43421,13 +43544,13 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback50, useState as useState60 } from "react";
+import { useCallback as useCallback53, useState as useState60 } from "react";
 import { jsx as jsx121, jsxs as jsxs44 } from "react/jsx-runtime";
 var NewsletterButton = () => {
   const [email, setEmail] = useState60("");
   const [submitting, setSubmitting] = useState60(false);
   const [subscribed, setSubscribed] = useState60(false);
-  const handleSubmit = useCallback50(async (e) => {
+  const handleSubmit = useCallback53(async (e) => {
     try {
       setSubmitting(true);
       e.preventDefault();
@@ -43509,14 +43632,14 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect65, useRef as useRef57, useState as useState61 } from "react";
+import { useEffect as useEffect65, useRef as useRef58, useState as useState61 } from "react";
 import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var ParameterizeAndEdit = () => {
-  const ref = useRef57(null);
+  const ref = useRef58(null);
   const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
   useEffect65(() => {
     if (isWebkit()) {
@@ -43632,15 +43755,15 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect66, useRef as useRef58, useState as useState64 } from "react";
+import { useEffect as useEffect66, useRef as useRef59, useState as useState64 } from "react";
 import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
   marginLeft: 10
 };
 var RealMP4Videos = () => {
-  const ref = useRef58(null);
-  const videoRef = useRef58(null);
+  const ref = useRef59(null);
+  const videoRef = useRef59(null);
   const [vid, setVid] = useState64("/img/render-progress.webm");
   useEffect66(() => {
     if (isWebkit()) {
@@ -43893,7 +44016,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef59, useState as useState66 } from "react";
+import { useRef as useRef60, useState as useState66 } from "react";
 import { jsx as jsx128, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -43950,8 +44073,8 @@ var VideoAppsShowcase = () => {
   const [isMuted, setIsMuted] = useState66(true);
   const [isPlaying, setIsPlaying] = useState66(false);
   const [videoLoaded, setVideoLoaded] = useState66(false);
-  const videoRef = useRef59(null);
-  const containerRef = useRef59(null);
+  const videoRef = useRef60(null);
+  const containerRef = useRef60(null);
   const handleTabChange = (index2) => {
     const video = videoRef.current;
     if (video) {
@@ -44233,6 +44356,7 @@ var listOfRemotionPackages = [
   "@remotion/example-videos",
   "@remotion/whisper-web",
   "@remotion/media",
+  "@remotion/remotion-media",
   "@remotion/web-renderer",
   "@remotion/design",
   "@remotion/light-leaks",
@@ -45603,7 +45727,7 @@ var WriteInReact = () => {
   return /* @__PURE__ */ jsxs67("div", {
     children: [
       /* @__PURE__ */ jsx167("h1", {
-        className: "text-5xl lg:text-[5em] text-center fontbrand font-black leading-none ",
+        className: "text-4xl sm:text-5xl lg:text-[5em] text-center fontbrand font-black leading-none text-balance",
         style: {
           textShadow: "0 5px 30px var(--background)"
         },
@@ -45617,7 +45741,7 @@ var WriteInReact = () => {
         children: [
           "Create real MP4 videos with React. ",
           /* @__PURE__ */ jsx167("br", {}),
-          "Parametrize content, render server-side and build applications."
+          "Use coding agents, build apps and render in bulk."
         ]
       }),
       /* @__PURE__ */ jsx167("br", {}),