@remotion/promo-pages 4.0.471 → 4.0.472

package/dist/Homepage.js

@@ -967,10 +967,12 @@ import { jsx as jsx9 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
 import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-import React12, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
-import { useContext as useContext15, useRef as useRef5 } from "react";
-import { createContext as createContext15 } from "react";
+import React12, { createContext as createContext15 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
+import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import { useContext as useContext15, useRef as useRef5 } from "react";
+import { createContext as createContext16 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useEffect as useEffect5,
@@ -979,13 +981,13 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React14, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React15, { 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 { jsx as jsx14 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 import {
-  createContext as createContext16,
+  createContext as createContext17,
   useCallback as useCallback7,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
@@ -993,17 +995,17 @@ import {
   useRef as useRef10,
   useState as useState7
 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
-import React15, { createContext as createContext17, useMemo as useMemo18 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext19 } from "react";
-import { createContext as createContext18, useEffect as useEffect6, useState as useState9 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
+import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { createContext as createContext19, useMemo as useMemo19, useReducer } from "react";
+import { useContext as useContext19 } from "react";
+import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
+import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback12 } from "react";
-import React21, {
+import React22, {
   forwardRef as forwardRef5,
   useContext as useContext28,
   useEffect as useEffect14,
@@ -1013,8 +1015,8 @@ import React21, {
   useState as useState14
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
-import React18, {
-  createContext as createContext20,
+import React19, {
+  createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback8,
   useContext as useContext20,
@@ -1024,7 +1026,7 @@ import React18, {
   useState as useState10
 } from "react";
 import { useMemo as useMemo20, useRef as useRef11 } from "react";
-import { jsx as jsx18, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef13 } from "react";
 import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo22, useState as useState11 } from "react";
 import { useContext as useContext22 } from "react";
@@ -1037,7 +1039,7 @@ import {
 } from "react";
 import { useCallback as useCallback10, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
-import React19, {
+import React20, {
   useCallback as useCallback9,
   useContext as useContext24,
   useEffect as useEffect9,
@@ -1046,13 +1048,13 @@ import React19, {
   useRef as useRef15,
   useState as useState12
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-import React20 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+import React21 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext21, useContext as useContext27, useMemo as useMemo26 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { createContext as createContext22, useContext as useContext27, useMemo as useMemo26 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef6,
   useContext as useContext29,
@@ -1062,8 +1064,8 @@ import {
   useMemo as useMemo28,
   useRef as useRef20
 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback14,
@@ -1073,9 +1075,9 @@ import {
   useRef as useRef21,
   useState as useState15
 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 import {
-  createContext as createContext22,
+  createContext as createContext23,
   forwardRef as forwardRef9,
   useCallback as useCallback15,
   useContext as useContext31,
@@ -1083,7 +1085,7 @@ import {
   useMemo as useMemo30,
   useRef as useRef22
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback16,
@@ -1094,13 +1096,13 @@ import {
   useRef as useRef23,
   useState as useState16
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
+import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React28 from "react";
+import React29 from "react";
 import {
   useCallback as useCallback19,
   useImperativeHandle as useImperativeHandle8,
@@ -1108,49 +1110,52 @@ import {
   useRef as useRef25,
   useState as useState18
 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-import React29 from "react";
-import { useMemo as useMemo34 } from "react";
-import { createContext as createContext23, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
+import React30 from "react";
+import { useMemo as useMemo34 } from "react";
+import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31 from "react";
-import React32, { createContext as createContext24 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+import React32 from "react";
+import React33, { createContext as createContext25 } from "react";
+import React34, { useContext as useContext35 } from "react";
 import { useCallback as useCallback22 } from "react";
 import {
   useCallback as useCallback20,
-  useContext as useContext35,
+  useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-import React34, {
+import { jsx as jsx32 } from "react/jsx-runtime";
+import React36, {
   forwardRef as forwardRef12,
-  useContext as useContext36,
+  useCallback as useCallback21,
+  useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef26,
-  useState as useState20,
-  useCallback as useCallback21
+  useState as useState20
 } from "react";
 import { useEffect as useEffect19 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React36, { useMemo as useMemo37 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef13, useMemo as useMemo38 } from "react";
-import React37 from "react";
-import React38, { createContext as createContext25 } from "react";
+import React38, { useMemo as useMemo37 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import {
+  Children,
+  forwardRef as forwardRef13,
+  useMemo as useMemo38
+} from "react";
+import React39 from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import React40 from "react";
-import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext38 } from "react";
+import React41 from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef14,
-  useContext as useContext37,
+  useContext as useContext38,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
@@ -1328,11 +1333,57 @@ function truthy(value) {
   return Boolean(value);
 }
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
+var isFolderNameValid = (name) => name.match(getRegex());
+var validateFolderName = (name) => {
+  if (name === undefined || name === null) {
+    throw new TypeError("You must pass a name to a <Folder />.");
+  }
+  if (typeof name !== "string") {
+    throw new TypeError(`The "name" you pass into <Folder /> must be a string. Got: ${typeof name}`);
+  }
+  if (!isFolderNameValid(name)) {
+    throw new Error(`Folder name can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
+  }
+};
 var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
 var FolderContext = createContext6({
   folderName: null,
   parentName: null
 });
+var Folder = (props) => {
+  const { name, children } = props;
+  const parent = useContext2(FolderContext);
+  const { registerFolder, unregisterFolder } = useContext2(CompositionSetters);
+  const nonce = useNonce();
+  const stack = props.stack ?? null;
+  validateFolderName(name);
+  const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
+  const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
+  const value = useMemo2(() => {
+    return {
+      folderName: name,
+      parentName
+    };
+  }, [name, parentName]);
+  useEffect(() => {
+    registerFolder(name, parentName, nonce.get(), stack);
+    return () => {
+      unregisterFolder(name, parentName);
+    };
+  }, [
+    name,
+    parent.folderName,
+    parentName,
+    registerFolder,
+    unregisterFolder,
+    nonce,
+    stack
+  ]);
+  return /* @__PURE__ */ jsx22(FolderContext.Provider, {
+    value,
+    children
+  });
+};
 function getNodeEnvString() {
   return ["NOD", "E_EN", "V"].join("");
 }
@@ -2281,7 +2332,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.471";
+var VERSION = "4.0.472";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2651,7 +2702,7 @@ var sequenceVisualStyleSchema = {
     description: "Offset"
   },
   "style.scale": {
-    type: "number",
+    type: "scale",
     min: 0.05,
     max: 100,
     step: 0.01,
@@ -2659,7 +2710,7 @@ var sequenceVisualStyleSchema = {
     description: "Scale"
   },
   "style.rotate": {
-    type: "rotation",
+    type: "rotation-css",
     step: 1,
     default: "0deg",
     description: "Rotation"
@@ -2670,7 +2721,8 @@ var sequenceVisualStyleSchema = {
     max: 1,
     step: 0.01,
     default: 1,
-    description: "Opacity"
+    description: "Opacity",
+    hiddenFromList: false
   }
 };
 var sequencePremountSchema = {
@@ -2679,10 +2731,15 @@ var sequencePremountSchema = {
     default: 0,
     description: "Premount For",
     min: 0,
-    step: 1
+    step: 1,
+    hiddenFromList: false
   },
   postmountFor: {
-    type: "hidden"
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    hiddenFromList: true
   },
   styleWhilePremounted: {
     type: "hidden"
@@ -2700,8 +2757,23 @@ var hiddenField = {
   default: false,
   description: "Hidden"
 };
+var durationInFramesField = {
+  type: "number",
+  default: undefined,
+  min: 1,
+  step: 1,
+  hiddenFromList: true
+};
+var fromField = {
+  type: "number",
+  default: 0,
+  step: 1,
+  hiddenFromList: true
+};
 var sequenceSchema = {
   hidden: hiddenField,
+  from: fromField,
+  durationInFrames: durationInFramesField,
   layout: {
     type: "enum",
     default: "absolute-fill",
@@ -2882,6 +2954,25 @@ var SequenceManagerProvider = ({ children }) => {
     })
   });
 };
+var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
+    value: true,
+    children
+  });
+};
+var IsNotInsideSeriesProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
+    value: false,
+    children
+  });
+};
+var useRequireToBeInsideSeries = () => {
+  const isInsideSeries = React12.useContext(IsInsideSeriesContext);
+  if (!isInsideSeries) {
+    throw new Error("This component must be inside a <Series /> component.");
+  }
+};
 var ENABLE_V5_BREAKING_CHANGES = false;
 var deleteNestedKey = (obj, keysToRemove) => {
   for (const key of keysToRemove) {
@@ -2914,229 +3005,6 @@ var deleteNestedKey = (obj, keysToRemove) => {
   }
   return obj;
 };
-var OverrideIdsToNodePathsGettersContext = createContext15({
-  overrideIdToNodePathMappings: {}
-});
-var OverrideIdsToNodePathsSettersContext = createContext15({
-  setOverrideIdToNodePath: () => {
-    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
-  }
-});
-var mergeOverrides = ({
-  descriptor,
-  codeOverrides,
-  dragOverrides
-}) => {
-  if (!codeOverrides && !dragOverrides) {
-    return { params: descriptor.params, effectKey: descriptor.effectKey };
-  }
-  const merged = {
-    ...descriptor.params
-  };
-  if (codeOverrides) {
-    for (const [key, value] of Object.entries(codeOverrides)) {
-      if (value !== undefined) {
-        merged[key] = value;
-      }
-    }
-  }
-  if (dragOverrides) {
-    for (const [key, value] of Object.entries(dragOverrides)) {
-      merged[key] = value;
-    }
-  }
-  return {
-    params: merged,
-    effectKey: descriptor.definition.calculateKey(merged)
-  };
-};
-var extractCodeOverrides = (propStatus) => {
-  if (!propStatus) {
-    return null;
-  }
-  const out = {};
-  let hasAny = false;
-  for (const [key, status] of Object.entries(propStatus)) {
-    if (status.canUpdate) {
-      out[key] = status.codeValue;
-      hasAny = true;
-    }
-  }
-  return hasAny ? out : null;
-};
-var useMemoizedEffectDefinitions = (effects) => {
-  const previousRef = useRef5(null);
-  const definitions = effects.map((descriptor) => descriptor.definition);
-  const previous = previousRef.current;
-  const isSame = previous !== null && previous.length === definitions.length && previous.every((def, i) => def === definitions[i]);
-  if (isSame) {
-    return previous;
-  }
-  previousRef.current = definitions;
-  return definitions;
-};
-var getEffectCodeValuesCtx = ({
-  codeValues,
-  nodePath,
-  effectIndex
-}) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
-  if (!status) {
-    return { type: "cannot-update-sequence", reason: "not-found" };
-  }
-  if (!status.canUpdate) {
-    return { type: "cannot-update-sequence", reason: status.reason };
-  }
-  const effect = status.effects.find((e) => e.effectIndex === effectIndex);
-  if (!effect) {
-    return { type: "cannot-update-effect", reason: "not-found" };
-  }
-  if (!effect.canUpdate) {
-    return { type: "cannot-update-effect", reason: effect.reason };
-  }
-  return { type: "can-update-effect", props: effect.props };
-};
-var getCodeValuesCtx = (codeValues, nodePath) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
-  if (!status) {
-    return;
-  }
-  if (!status.canUpdate) {
-    return;
-  }
-  return status.props;
-};
-var useMemoizedEffects = ({
-  effects,
-  overrideId
-}) => {
-  const previousRef = useRef5(null);
-  const { codeValues } = useContext15(VisualModeCodeValuesContext);
-  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
-  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
-  const previous = previousRef.current;
-  const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
-  const resolved = effects.map((descriptor, index) => {
-    if (nodePath === null) {
-      return {
-        descriptor,
-        params: descriptor.params,
-        effectKey: descriptor.effectKey
-      };
-    }
-    const effectStatus = getEffectCodeValuesCtx({
-      codeValues,
-      nodePath,
-      effectIndex: index
-    });
-    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
-    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
-    const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
-    const { params, effectKey } = mergeOverrides({
-      descriptor,
-      codeOverrides,
-      dragOverrides
-    });
-    return { descriptor, params, effectKey };
-  });
-  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
-  if (isSame) {
-    return previous;
-  }
-  const next = resolved.map(({ descriptor, params, effectKey }) => ({
-    definition: descriptor.definition,
-    effectKey,
-    params,
-    memoized: true
-  }));
-  previousRef.current = next;
-  return next;
-};
-var flattenActiveSchema = (schema, resolve) => {
-  const out = {};
-  for (const key of Object.keys(schema)) {
-    const field = schema[key];
-    if (field.type === "hidden") {
-      continue;
-    } else if (field.type === "enum") {
-      out[key] = field;
-      const current = resolve(key) ?? field.default;
-      const variant = field.variants[current];
-      if (variant) {
-        Object.assign(out, flattenActiveSchema(variant, resolve));
-      }
-    } else {
-      out[key] = field;
-    }
-  }
-  return out;
-};
-var getFlatSchemaWithAllKeys = (schema) => {
-  const out = {};
-  const addKey = (key, field) => {
-    if (key in out) {
-      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
-    }
-    out[key] = field;
-  };
-  for (const key of Object.keys(schema)) {
-    const field = schema[key];
-    addKey(key, field);
-    if (field.type === "enum") {
-      for (const variant of Object.values(field.variants)) {
-        const flatVariant = getFlatSchemaWithAllKeys(variant);
-        for (const variantKey of Object.keys(flatVariant)) {
-          addKey(variantKey, flatVariant[variantKey]);
-        }
-      }
-    }
-  }
-  return out;
-};
-var findPropsToDelete = ({
-  schema,
-  key,
-  value
-}) => {
-  const fieldSchema = schema[key];
-  if (!fieldSchema) {
-    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
-  }
-  if (typeof value !== "string") {
-    throw new Error("Value must be a string, but is " + JSON.stringify(value));
-  }
-  if (fieldSchema.type !== "enum") {
-    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
-  }
-  const currentVariant = fieldSchema.variants[value];
-  if (!currentVariant) {
-    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
-  }
-  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
-  const otherKeys = new Set;
-  for (const variant of otherVariants) {
-    const otherVariant = fieldSchema.variants[variant];
-    const keys = Object.keys(otherVariant);
-    for (const k of keys) {
-      otherKeys.add(k);
-    }
-  }
-  return [...otherKeys];
-};
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
-}) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
-  }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
-  }
-  return codeValue.codeValue;
-};
 var NEWTON_ITERATIONS = 4;
 var NEWTON_MIN_SLOPE = 0.001;
 var SUBDIVISION_PRECISION = 0.0000001;
@@ -3318,6 +3186,123 @@ class Easing {
     };
   }
 }
+var normalizeNumber = (value) => {
+  return Math.round(value * 1e6) / 1e6;
+};
+var angleUnits = new Set(["deg", "rad", "grad", "turn"]);
+var lengthUnits = new Set([
+  "%",
+  "cap",
+  "ch",
+  "cm",
+  "cqb",
+  "cqh",
+  "cqi",
+  "cqmax",
+  "cqmin",
+  "cqw",
+  "dvh",
+  "dvw",
+  "em",
+  "ex",
+  "ic",
+  "in",
+  "lh",
+  "lvh",
+  "lvw",
+  "mm",
+  "pc",
+  "pt",
+  "px",
+  "q",
+  "rem",
+  "rlh",
+  "svh",
+  "svw",
+  "vb",
+  "vh",
+  "vi",
+  "vmax",
+  "vmin",
+  "vw"
+]);
+var cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+var stringifyNumber = (value) => {
+  return String(normalizeNumber(value));
+};
+var parseStringInterpolationComponent = (component, value) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported scale, translate, or rotate value`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+  }
+  if (unit === null) {
+    return { kind: "scale", value: numberValue, unit: null };
+  }
+  if (angleUnits.has(unit)) {
+    return { kind: "rotate", value: numberValue, unit };
+  }
+  if (lengthUnits.has(unit)) {
+    return { kind: "translate", value: numberValue, unit };
+  }
+  throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
+};
+var parseStringInterpolationValue = (output) => {
+  if (typeof output === "number") {
+    if (!Number.isFinite(output)) {
+      throw new Error(`outputRange must contain only finite numbers, but got [${output}]`);
+    }
+    return {
+      kind: "scale",
+      values: [output, output, 1],
+      units: [null, null, null],
+      dimensions: 1
+    };
+  }
+  const parts = output.trim().split(/\s+/);
+  if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
+    throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
+  }
+  const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
+  const [{ kind }] = parsed;
+  for (const part of parsed) {
+    if (part.kind !== kind) {
+      throw new TypeError(`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`);
+    }
+  }
+  if (kind === "scale") {
+    const x = parsed[0].value;
+    const y = parsed[1]?.value ?? x;
+    const z = parsed[2]?.value ?? 1;
+    return {
+      kind,
+      values: [x, y, z],
+      units: [null, null, null],
+      dimensions: parsed.length
+    };
+  }
+  return {
+    kind,
+    values: [parsed[0].value, parsed[1]?.value ?? 0, parsed[2]?.value ?? 0],
+    units: [parsed[0].unit, parsed[1]?.unit ?? null, parsed[2]?.unit ?? null],
+    dimensions: parsed.length
+  };
+};
+var serializeStringInterpolationValue = ({
+  kind,
+  values,
+  units,
+  dimensions
+}) => {
+  if (kind === "scale") {
+    return values.slice(0, dimensions).map((value) => stringifyNumber(value)).join(" ");
+  }
+  return values.slice(0, dimensions).map((value, index) => `${stringifyNumber(value)}${units[index]}`).join(" ");
+};
 function interpolateFunction(input, inputRange, outputRange, options) {
   const { extrapolateLeft, extrapolateRight, easing } = options;
   let result = input;
@@ -3362,6 +3347,96 @@ function findRange(input, inputRange) {
   }
   return i - 1;
 }
+var defaultEasing = (num) => num;
+var interpolateNumber = ({
+  input,
+  inputRange,
+  outputRange,
+  options
+}) => {
+  if (inputRange.length === 1) {
+    return outputRange[0];
+  }
+  const easingOption = options?.easing;
+  const resolveEasingForSegment = (segmentIndex) => {
+    if (easingOption === undefined) {
+      return defaultEasing;
+    }
+    if (typeof easingOption === "function") {
+      return easingOption;
+    }
+    return easingOption[segmentIndex];
+  };
+  let extrapolateLeft = "extend";
+  if (options?.extrapolateLeft !== undefined) {
+    extrapolateLeft = options.extrapolateLeft;
+  }
+  let extrapolateRight = "extend";
+  if (options?.extrapolateRight !== undefined) {
+    extrapolateRight = options.extrapolateRight;
+  }
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const range = findRange(posterizedInput, inputRange);
+  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+    easing: resolveEasingForSegment(range),
+    extrapolateLeft,
+    extrapolateRight
+  });
+};
+var interpolateString = ({
+  input,
+  inputRange,
+  outputRange,
+  options
+}) => {
+  const parsedOutputRange = outputRange.map(parseStringInterpolationValue);
+  const kind = parsedOutputRange[0]?.kind;
+  if (kind === undefined) {
+    throw new Error("outputRange must have at least 1 element");
+  }
+  for (const parsed of parsedOutputRange) {
+    if (parsed.kind !== kind) {
+      throw new TypeError(`Cannot interpolate ${kind} values with ${parsed.kind} values`);
+    }
+  }
+  const dimensions = Math.max(...parsedOutputRange.map((parsed) => parsed.dimensions));
+  const units = [
+    null,
+    null,
+    null
+  ];
+  if (kind !== "scale") {
+    for (let axis = 0;axis < dimensions; axis++) {
+      for (const parsed of parsedOutputRange) {
+        const unit = parsed.units[axis];
+        if (unit === null) {
+          continue;
+        }
+        if (units[axis] === null) {
+          units[axis] = unit;
+          continue;
+        }
+        if (units[axis] !== unit) {
+          throw new TypeError(`Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}`);
+        }
+      }
+      if (units[axis] === null) {
+        throw new TypeError(`Cannot interpolate ${kind} values because axis ${axis + 1} has no unit`);
+      }
+    }
+  }
+  return serializeStringInterpolationValue({
+    kind,
+    values: [0, 0, 0].map((_, axis) => interpolateNumber({
+      input,
+      inputRange,
+      outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
+      options
+    })),
+    units,
+    dimensions
+  });
+};
 function checkValidInputRange(arr) {
   for (let i = 1;i < arr.length; ++i) {
     if (!(arr[i] > arr[i - 1])) {
@@ -3421,42 +3496,27 @@ function interpolate(input, inputRange, outputRange, options) {
     throw new Error("inputRange (" + inputRange.length + ") and outputRange (" + outputRange.length + ") must have the same length");
   }
   checkInfiniteRange("inputRange", inputRange);
-  checkInfiniteRange("outputRange", outputRange);
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption(options?.posterize);
-  const easingOption = options?.easing;
-  const defaultEasing = (num) => num;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
-  let extrapolateLeft = "extend";
-  if (options?.extrapolateLeft !== undefined) {
-    extrapolateLeft = options.extrapolateLeft;
-  }
-  let extrapolateRight = "extend";
-  if (options?.extrapolateRight !== undefined) {
-    extrapolateRight = options.extrapolateRight;
-  }
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
-  if (inputRange.length === 1) {
-    return outputRange[0];
+  if (!Array.isArray(outputRange)) {
+    throw new Error("outputRange must contain only numbers");
   }
-  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
-  const range = findRange(posterizedInput, inputRange);
-  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
-    extrapolateLeft,
-    extrapolateRight
-  });
+  const hasStringOutput = outputRange.some((output) => typeof output === "string");
+  if (hasStringOutput) {
+    if (!outputRange.every((output) => typeof output === "string" || typeof output === "number")) {
+      throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+    }
+    return interpolateString({ input, inputRange, outputRange, options });
+  }
+  if (!outputRange.every((output) => typeof output === "number")) {
+    throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+  }
+  checkInfiniteRange("outputRange", outputRange);
+  return interpolateNumber({ input, inputRange, outputRange, options });
 }
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -3986,12 +4046,6 @@ var interpolateKeyframedStatus = ({
   if (interpolationFunction !== "interpolate") {
     return null;
   }
-  if (!outputs.every((v) => typeof v === "number")) {
-    return null;
-  }
-  if (keyframes.length === 1) {
-    return outputs[0];
-  }
   try {
     return interpolate(frame, inputRange, outputs, {
       easing: easing.map(easingToFn),
@@ -4003,6 +4057,306 @@ var interpolateKeyframedStatus = ({
     return null;
   }
 };
+var resolveDragOverrideValue = ({
+  dragOverrideValue,
+  frame
+}) => {
+  if (dragOverrideValue === undefined) {
+    return { type: "none" };
+  }
+  if (dragOverrideValue.type === "static") {
+    return { type: "resolved", value: dragOverrideValue.value };
+  }
+  if (frame === null) {
+    return { type: "none" };
+  }
+  const interpolated = interpolateKeyframedStatus({
+    frame,
+    status: dragOverrideValue.status
+  });
+  if (interpolated === null) {
+    return { type: "none" };
+  }
+  return { type: "resolved", value: interpolated };
+};
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  dragOverrideValue,
+  defaultValue,
+  frame = null,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  const dragOverride = resolveDragOverrideValue({
+    dragOverrideValue,
+    frame
+  });
+  if (dragOverride.type === "resolved" && dragOverride.value !== undefined) {
+    return dragOverride.value;
+  }
+  if (codeValue.status === "keyframed" && frame !== null) {
+    return interpolateKeyframedStatus({
+      frame,
+      status: codeValue
+    });
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+var OverrideIdsToNodePathsGettersContext = createContext16({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext16({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
+var mergeOverrides = ({
+  descriptor,
+  codeOverrides,
+  dragOverrides,
+  frame
+}) => {
+  if (!codeOverrides && !dragOverrides) {
+    return { params: descriptor.params, effectKey: descriptor.effectKey };
+  }
+  const merged = {
+    ...descriptor.params
+  };
+  if (codeOverrides) {
+    for (const [key, value] of Object.entries(codeOverrides)) {
+      if (value !== undefined) {
+        merged[key] = value;
+      }
+    }
+  }
+  if (dragOverrides) {
+    for (const [key, value] of Object.entries(dragOverrides)) {
+      const resolved = resolveDragOverrideValue({
+        dragOverrideValue: value,
+        frame
+      });
+      if (resolved.type === "resolved") {
+        merged[key] = resolved.value;
+      }
+    }
+  }
+  return {
+    params: merged,
+    effectKey: descriptor.definition.calculateKey(merged)
+  };
+};
+var extractCodeOverrides = (propStatus) => {
+  if (!propStatus) {
+    return null;
+  }
+  const out = {};
+  let hasAny = false;
+  for (const [key, status] of Object.entries(propStatus)) {
+    if (status.status !== "computed") {
+      out[key] = status.codeValue;
+      hasAny = true;
+    }
+  }
+  return hasAny ? out : null;
+};
+var useMemoizedEffectDefinitions = (effects) => {
+  const previousRef = useRef5(null);
+  const definitions = effects.map((descriptor) => descriptor.definition);
+  const previous = previousRef.current;
+  const isSame = previous !== null && previous.length === definitions.length && previous.every((def, i) => def === definitions[i]);
+  if (isSame) {
+    return previous;
+  }
+  previousRef.current = definitions;
+  return definitions;
+};
+var getEffectCodeValuesCtx = ({
+  codeValues,
+  nodePath,
+  effectIndex
+}) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return { type: "cannot-update-sequence", reason: "not-found" };
+  }
+  if (!status.canUpdate) {
+    return { type: "cannot-update-sequence", reason: status.reason };
+  }
+  const effect = status.effects.find((e) => e.effectIndex === effectIndex);
+  if (!effect) {
+    return { type: "cannot-update-effect", reason: "not-found" };
+  }
+  if (!effect.canUpdate) {
+    return { type: "cannot-update-effect", reason: effect.reason };
+  }
+  return { type: "can-update-effect", props: effect.props };
+};
+var getCodeValuesCtx = (codeValues, nodePath) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var useMemoizedEffects = ({
+  effects,
+  overrideId
+}) => {
+  const previousRef = useRef5(null);
+  const { codeValues } = useContext15(VisualModeCodeValuesContext);
+  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const frame = useCurrentFrame();
+  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
+  const previous = previousRef.current;
+  const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
+  const resolved = effects.map((descriptor, index) => {
+    if (nodePath === null) {
+      return {
+        descriptor,
+        params: descriptor.params,
+        effectKey: descriptor.effectKey
+      };
+    }
+    const effectStatus = getEffectCodeValuesCtx({
+      codeValues,
+      nodePath,
+      effectIndex: index
+    });
+    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
+    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+    const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+    const { params, effectKey } = mergeOverrides({
+      descriptor,
+      codeOverrides,
+      dragOverrides,
+      frame
+    });
+    return { descriptor, params, effectKey };
+  });
+  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
+  if (isSame) {
+    return previous;
+  }
+  const next = resolved.map(({ descriptor, params, effectKey }) => ({
+    definition: descriptor.definition,
+    effectKey,
+    params,
+    memoized: true
+  }));
+  previousRef.current = next;
+  return next;
+};
+var flattenActiveSchema = (schema, resolve) => {
+  const out = {};
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field.type === "hidden") {
+      continue;
+    } else if (field.type === "enum") {
+      out[key] = field;
+      const current = resolve(key) ?? field.default;
+      const variant = field.variants[current];
+      if (variant) {
+        Object.assign(out, flattenActiveSchema(variant, resolve));
+      }
+    } else {
+      out[key] = field;
+    }
+  }
+  return out;
+};
+var getFlatSchemaWithAllKeys = (schema) => {
+  const out = {};
+  const addKey = (key, field) => {
+    if (key in out) {
+      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+    }
+    out[key] = field;
+  };
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    addKey(key, field);
+    if (field.type === "enum") {
+      for (const variant of Object.values(field.variants)) {
+        const flatVariant = getFlatSchemaWithAllKeys(variant);
+        for (const variantKey of Object.keys(flatVariant)) {
+          addKey(variantKey, flatVariant[variantKey]);
+        }
+      }
+    }
+  }
+  return out;
+};
+var findPropsToDelete = ({
+  schema,
+  key,
+  value
+}) => {
+  const fieldSchema = schema[key];
+  if (!fieldSchema) {
+    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
+  }
+  if (typeof value !== "string") {
+    throw new Error("Value must be a string, but is " + JSON.stringify(value));
+  }
+  if (fieldSchema.type !== "enum") {
+    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
+  }
+  const currentVariant = fieldSchema.variants[value];
+  if (!currentVariant) {
+    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
+  }
+  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
+  const otherKeys = new Set;
+  for (const variant of otherVariants) {
+    const otherVariant = fieldSchema.variants[variant];
+    const keys = Object.keys(otherVariant);
+    for (const k of keys) {
+      otherKeys.add(k);
+    }
+  }
+  return [...otherKeys];
+};
+var makeStaticDragOverride = (value) => {
+  return { type: "static", value };
+};
+var makeKeyframedDragOverride = ({
+  status,
+  frame,
+  value
+}) => {
+  const existingIndex = status.keyframes.findIndex((keyframe) => keyframe.frame === frame);
+  const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
+  const easing = [...status.easing];
+  while (easing.length < keyframes.length - 1) {
+    easing.push("linear");
+  }
+  if (easing.length > keyframes.length - 1) {
+    easing.length = keyframes.length - 1;
+  }
+  return {
+    type: "keyframed",
+    status: {
+      ...status,
+      keyframes,
+      easing
+    }
+  };
+};
+var getStaticDragOverrideValue = (dragOverrideValue) => {
+  if (dragOverrideValue?.type !== "static") {
+    return;
+  }
+  return dragOverrideValue.value;
+};
+var isKeyframedStatus = (status) => {
+  return status !== null && status.status === "keyframed";
+};
 var findFieldInSchema = (schema, key) => {
   if (key in schema) {
     return schema[key];
@@ -4038,21 +4392,34 @@ var computeEffectiveSchemaValuesDotNotation = ({
     let value;
     if (codeValueStatus === null) {
       value = currentValue[key];
-    } else if (codeValueStatus.canUpdate === false) {
-      if (codeValueStatus.reason === "keyframed" && frame !== null) {
-        const interpolated = interpolateKeyframedStatus({
-          frame,
-          status: codeValueStatus
-        });
-        value = interpolated ?? currentValue[key];
-      } else {
+    } else if (isKeyframedStatus(codeValueStatus)) {
+      if (field?.type === "array" || field?.keyframable === false) {
         value = currentValue[key];
+      } else {
+        const dragOverride = resolveDragOverrideValue({
+          dragOverrideValue: overrideValues[key],
+          frame
+        });
+        if (dragOverride.type === "resolved") {
+          value = dragOverride.value;
+        } else if (frame !== null) {
+          const interpolated = interpolateKeyframedStatus({
+            frame,
+            status: codeValueStatus
+          });
+          value = interpolated ?? currentValue[key];
+        } else {
+          value = currentValue[key];
+        }
       }
+    } else if (codeValueStatus.status === "computed") {
+      value = currentValue[key];
     } else {
       value = getEffectiveVisualModeValue({
         codeValue: codeValueStatus,
         dragOverrideValue: overrideValues[key],
         defaultValue: field?.default,
+        frame,
         shouldResortToDefaultValueIfUndefined: false
       });
     }
@@ -4125,13 +4492,17 @@ var mergeValues = ({
   return merged;
 };
 var stackToOverrideMap = {};
-var wrapInSchema = (Component, schema) => {
+var wrapInSchema = ({
+  Component,
+  schema,
+  supportsEffects
+}) => {
   const flatSchema = getFlatSchemaWithAllKeys(schema);
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React12.createElement(Component, {
+      return React13.createElement(Component, {
         ...props,
         _experimentalControls: null,
         ref
@@ -4142,7 +4513,7 @@ var wrapInSchema = (Component, schema) => {
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props._experimentalControls) {
-      return React12.createElement(Component, {
+      return React13.createElement(Component, {
         ...props,
         ref
       });
@@ -4167,7 +4538,8 @@ var wrapInSchema = (Component, schema) => {
       return {
         schema,
         currentRuntimeValueDotNotation,
-        overrideId
+        overrideId,
+        supportsEffects
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -4192,7 +4564,7 @@ var wrapInSchema = (Component, schema) => {
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React12.createElement(Component, {
+    return React13.createElement(Component, {
       ...mergedProps,
       _experimentalControls: controls,
       ref
@@ -4201,6 +4573,7 @@ var wrapInSchema = (Component, schema) => {
   Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
   return Wrapped;
 };
+var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -4295,6 +4668,7 @@ var RegularSequenceRefForwardingFunction = ({
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? (name === undefined ? "https://www.remotion.dev/docs/sequence" : null);
   const env = useRemotionEnvironment();
+  const isInsideSeries = useContext17(IsInsideSeriesContext);
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
@@ -4307,7 +4681,7 @@ var RegularSequenceRefForwardingFunction = ({
         registerSequence({
           type: "image",
           controls: controls ?? null,
-          effects: _remotionInternalEffects ?? [],
+          effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
           duration: actualDurationInFrames,
@@ -4322,13 +4696,14 @@ var RegularSequenceRefForwardingFunction = ({
           showInTimeline,
           src: isMedia.src,
           getStack: () => stackRef.current,
-          refForOutline: refForOutline ?? null
+          refForOutline: refForOutline ?? null,
+          isInsideSeries
         });
       } else {
         registerSequence({
           type: isMedia.type,
           controls: controls ?? null,
-          effects: _remotionInternalEffects ?? [],
+          effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
           doesVolumeChange: isMedia.data.doesVolumeChange,
@@ -4347,7 +4722,8 @@ var RegularSequenceRefForwardingFunction = ({
           getStack: () => stackRef.current,
           startMediaFrom: isMedia.data.startMediaFrom,
           volume: isMedia.data.volumes,
-          refForOutline: refForOutline ?? null
+          refForOutline: refForOutline ?? null,
+          isInsideSeries
         });
       }
       return () => {
@@ -4370,8 +4746,9 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: _remotionInternalEffects ?? [],
-      refForOutline: refForOutline ?? null
+      effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
+      refForOutline: refForOutline ?? null,
+      isInsideSeries
     });
     return () => {
       unregisterSequence(id);
@@ -4397,7 +4774,8 @@ var RegularSequenceRefForwardingFunction = ({
     _remotionInternalEffects,
     isMedia,
     resolvedDocumentationLink,
-    refForOutline
+    refForOutline,
+    isInsideSeries
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -4416,9 +4794,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx11(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -4463,10 +4841,10 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  return /* @__PURE__ */ jsx11(Freeze, {
+  return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx11(SequenceInner, {
+    children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
@@ -4486,20 +4864,24 @@ var SequenceRefForwardingFunction = (props, ref) => {
   if (props.layout !== "none" && !env.isRendering) {
     const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? props.premountFor ?? fps : props.premountFor;
     if (effectivePremountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx11(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx12(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx11(RegularSequence, {
+  return /* @__PURE__ */ jsx12(RegularSequence, {
     ...props,
     ref
   });
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
-var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
+var Sequence = wrapInSchema({
+  Component: SequenceInner,
+  schema: sequenceSchema,
+  supportsEffects: false
+});
 var calculateImageFit = (fit, imageSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -4866,13 +5248,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx12("canvas", {
+  return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
     style
   });
 };
-var Canvas = React14.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -5033,13 +5415,17 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   playbackRate: {
     type: "number",
     min: 0,
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate"
+    description: "Playback Rate",
+    hiddenFromList: false,
+    keyframable: false
   },
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
@@ -5163,7 +5549,7 @@ var AnimatedImageContent = forwardRef4(({
     width,
     height
   ]);
-  return /* @__PURE__ */ jsx13(Canvas, {
+  return /* @__PURE__ */ jsx14(Canvas, {
     ref,
     width,
     height,
@@ -5211,7 +5597,7 @@ var AnimatedImageInner = ({
     style,
     requestInit
   };
-  return /* @__PURE__ */ jsx13(Sequence, {
+  return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
@@ -5220,7 +5606,7 @@ var AnimatedImageInner = ({
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
     _remotionInternalRefForOutline: actualRef,
-    children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
+    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
       ...animatedImageProps,
       ref: actualRef,
       effects,
@@ -5228,7 +5614,11 @@ var AnimatedImageInner = ({
     })
   });
 };
-var AnimatedImage = wrapInSchema(AnimatedImageInner, animatedImageSchema);
+var AnimatedImage = wrapInSchema({
+  Component: AnimatedImageInner,
+  schema: animatedImageSchema,
+  supportsEffects: true
+});
 AnimatedImage.displayName = "AnimatedImage";
 addSequenceStackTraces(AnimatedImage);
 var validateArtifactFilename = (filename) => {
@@ -5260,7 +5650,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext16({
+var RenderAssetManager = createContext17({
   registerRenderAsset: () => {
     return;
   },
@@ -5310,7 +5700,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx14(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx15(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -5398,9 +5788,9 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext17(null);
+var LoopContext = createContext18(null);
 var useLoop = () => {
-  return React15.useContext(LoopContext);
+  return React16.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -5445,9 +5835,9 @@ var Loop = ({
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx15(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx16(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx15(Sequence, {
+    children: /* @__PURE__ */ jsx16(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -5470,7 +5860,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext18({});
+var PreloadContext = createContext19({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -5488,7 +5878,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx16(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx17(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -5794,7 +6184,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext19({
+var DurationsContext = createContext20({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -5808,7 +6198,7 @@ var DurationsContextProvider = ({ children }) => {
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx17(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx18(DurationsContext.Provider, {
     value,
     children
   });
@@ -6047,8 +6437,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext20(null);
-var SharedAudioTagsContext = createContext20(null);
+var SharedAudioContext = createContext21(null);
+var SharedAudioTagsContext = createContext21(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -6211,7 +6601,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     getIsResumingAudioContext,
     unscheduleAudioNode
   ]);
-  return /* @__PURE__ */ jsx18(SharedAudioContext.Provider, {
+  return /* @__PURE__ */ jsx19(SharedAudioContext.Provider, {
     value: audioContextValue,
     children
   });
@@ -6241,7 +6631,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React18.useInsertionEffect ?? React18.useLayoutEffect;
+  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -6384,7 +6774,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     value: audioTagsValue,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx18("audio", {
+        return /* @__PURE__ */ jsx19("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -6406,7 +6796,7 @@ var useSharedAudio = ({
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React18.createRef();
+    const el = React19.createRef();
     const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
       audioContext: audioCtx.audioContext,
       ref: el
@@ -6425,7 +6815,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React18.useInsertionEffect ?? React18.useLayoutEffect;
+  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -6857,7 +7247,8 @@ var useMediaInTimeline = ({
       postmountDisplay,
       controls: null,
       effects: [],
-      refForOutline
+      refForOutline,
+      isInsideSeries: false
     });
     return () => {
       unregisterSequence(id);
@@ -6970,11 +7361,11 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React19.createContext(null);
+var BufferingContextReact = React20.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx19(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx20(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
@@ -7121,7 +7512,7 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React20.useRef({
+  const lastUpdate = React21.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -7699,11 +8090,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext21({
+var MediaVolumeContext = createContext22({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext21({
+var SetMediaVolumeContext = createContext22({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -7870,7 +8261,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React21.useInsertionEffect ?? React21.useLayoutEffect;
+  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -7903,7 +8294,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx20("audio", {
+  return /* @__PURE__ */ jsx21("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -8037,7 +8428,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("audio", {
+  return /* @__PURE__ */ jsx222("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -8096,14 +8487,14 @@ var AudioRefForwardingFunction = (props, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx222(Html5Audio, {
+      return /* @__PURE__ */ jsx23(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx222(Loop, {
+    return /* @__PURE__ */ jsx23(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
@@ -8111,7 +8502,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx222(Html5Audio, {
+      children: /* @__PURE__ */ jsx23(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -8119,13 +8510,13 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx222(Sequence, {
+    return /* @__PURE__ */ jsx23(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx222(Html5Audio, {
+      children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -8139,7 +8530,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     volume: props.volume
   }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx222(AudioForRendering, {
+    return /* @__PURE__ */ jsx23(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -8147,7 +8538,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx222(AudioForPreview, {
+  return /* @__PURE__ */ jsx23(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0,
@@ -8163,7 +8554,18 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Html5Audio = forwardRef7(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
+var resolveSolidPixelDensity = (pixelDensity) => {
+  if (pixelDensity === undefined) {
+    return 1;
+  }
+  if (typeof pixelDensity !== "number" || !Number.isFinite(pixelDensity) || pixelDensity <= 0) {
+    throw new Error(`<Solid>: \`pixelDensity\` must be a positive finite number. Received: ${String(pixelDensity)}.`);
+  }
+  return pixelDensity;
+};
 var solidSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   color: {
     type: "color",
     default: "transparent",
@@ -8174,14 +8576,16 @@ var solidSchema = {
     min: 1,
     step: 1,
     default: 1920,
-    description: "Width"
+    description: "Width",
+    hiddenFromList: false
   },
   height: {
     type: "number",
     min: 1,
     step: 1,
     default: 1080,
-    description: "Height"
+    description: "Height",
+    hiddenFromList: false
   },
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
@@ -8193,10 +8597,14 @@ var SolidInner = ({
   effects = [],
   className,
   style,
+  pixelDensity,
   overrideId,
   reference
 }) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
+  const canvasWidth = Math.ceil(width * resolvedPixelDensity);
+  const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const [outputCanvas, setOutputCanvas] = useState15(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -8242,12 +8650,12 @@ var SolidInner = ({
       ctx.fillRect(0, 0, 1, 1);
     }
     runEffectChain({
-      state: chainState.get(width, height),
+      state: chainState.get(canvasWidth, canvasHeight),
       source: sourceCanvas,
       effects: memoizedEffects,
       output: outputCanvas,
-      width,
-      height
+      width: canvasWidth,
+      height: canvasHeight
     }).then((completed) => {
       if (completed) {
         continueRender2(handle);
@@ -8263,19 +8671,26 @@ var SolidInner = ({
     outputCanvas,
     sourceCanvas,
     chainState,
-    width,
-    height,
+    canvasWidth,
+    canvasHeight,
     delayRender2,
     continueRender2,
     cancelRender2,
     memoizedEffects
   ]);
-  return /* @__PURE__ */ jsx23("canvas", {
+  const canvasStyle = useMemo29(() => {
+    return {
+      width,
+      height,
+      ...style ?? {}
+    };
+  }, [height, style, width]);
+  return /* @__PURE__ */ jsx24("canvas", {
     ref: canvasRef,
-    width,
-    height,
+    width: canvasWidth,
+    height: canvasHeight,
     className,
-    style
+    style: canvasStyle
   });
 };
 var SolidOuter = forwardRef8(({
@@ -8291,6 +8706,7 @@ var SolidOuter = forwardRef8(({
   from,
   hidden,
   showInTimeline,
+  pixelDensity,
   ...props2
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
@@ -8298,7 +8714,7 @@ var SolidOuter = forwardRef8(({
   useImperativeHandle6(ref, () => {
     return actualRef.current;
   }, []);
-  return /* @__PURE__ */ jsx23(Sequence, {
+  return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
     hidden,
@@ -8310,7 +8726,7 @@ var SolidOuter = forwardRef8(({
     _remotionInternalRefForOutline: actualRef,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
     ...props2,
-    children: /* @__PURE__ */ jsx23(SolidInner, {
+    children: /* @__PURE__ */ jsx24(SolidInner, {
       reference: actualRef,
       overrideId: controls?.overrideId ?? null,
       color,
@@ -8318,11 +8734,16 @@ var SolidOuter = forwardRef8(({
       width,
       className,
       style,
-      effects
+      effects,
+      pixelDensity
     })
   });
 });
-var Solid = wrapInSchema(SolidOuter, solidSchema);
+var Solid = wrapInSchema({
+  Component: SolidOuter,
+  schema: solidSchema,
+  supportsEffects: true
+});
 Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 var cachedSupport = null;
@@ -8350,6 +8771,27 @@ function assertHtmlInCanvasDimensions(width, height) {
     throw new Error(`HtmlInCanvas: \`height\` must be a positive integer. Received: ${String(height)}.`);
   }
 }
+function resolveHtmlInCanvasPixelDensity(pixelDensity) {
+  if (pixelDensity === undefined) {
+    return 1;
+  }
+  if (typeof pixelDensity !== "number" || !Number.isFinite(pixelDensity) || pixelDensity <= 0) {
+    throw new Error(`HtmlInCanvas: \`pixelDensity\` must be a positive finite number. Received: ${String(pixelDensity)}.`);
+  }
+  return pixelDensity;
+}
+var resizeOffscreenCanvas = ({
+  offscreen,
+  width,
+  height
+}) => {
+  if (offscreen.width !== width) {
+    offscreen.width = width;
+  }
+  if (offscreen.height !== height) {
+    offscreen.height = height;
+  }
+};
 var defaultOnPaint = ({
   canvas,
   element,
@@ -8363,10 +8805,23 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext22(false);
-var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPaint, onInit, controls, style }, ref) => {
+var HtmlInCanvasAncestorContext = createContext23(false);
+var HtmlInCanvasContent = forwardRef9(({
+  width,
+  height,
+  effects,
+  children,
+  onPaint,
+  onInit,
+  pixelDensity,
+  controls,
+  style
+}, ref) => {
   const isInsideAncestorHtmlInCanvas = useContext31(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
+  const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
+  const canvasWidth = Math.ceil(width * resolvedPixelDensity);
+  const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
@@ -8374,7 +8829,7 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
   const canvas2dRef = useRef22(null);
   const offscreenRef = useRef22(null);
   const divRef = useRef22(null);
-  const canvasSizeKey = `${width}x${height}`;
+  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
   const setLayoutCanvasRef = useCallback15((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
@@ -8406,8 +8861,11 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
     if (!offscreen) {
       throw new Error("HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)");
     }
-    offscreen.width = width;
-    offscreen.height = height;
+    resizeOffscreenCanvas({
+      offscreen,
+      width: canvasWidth,
+      height: canvasHeight
+    });
     try {
       const placeholderCanvas = canvas2dRef.current;
       if (!placeholderCanvas) {
@@ -8426,7 +8884,8 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
           const cleanup = await currentOnInit({
             canvas: offscreen,
             element,
-            elementImage: initImage
+            elementImage: initImage,
+            pixelDensity: resolvedPixelDensity
           });
           if (typeof cleanup !== "function") {
             throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
@@ -8443,21 +8902,29 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
       await handler({
         canvas: offscreen,
         element,
-        elementImage: elImage
+        elementImage: elImage,
+        pixelDensity: resolvedPixelDensity
       });
       await runEffectChain({
-        state: chainState.get(width, height),
+        state: chainState.get(canvasWidth, canvasHeight),
         source: offscreen,
         effects: effectsRef.current,
         output: offscreen,
-        width,
-        height
+        width: canvasWidth,
+        height: canvasHeight
       });
       continueRender2(handle);
     } catch (error2) {
       cancelRender2(error2);
     }
-  }, [chainState, continueRender2, cancelRender2, width, height]);
+  }, [
+    canvasHeight,
+    canvasWidth,
+    chainState,
+    continueRender2,
+    cancelRender2,
+    resolvedPixelDensity
+  ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
@@ -8466,8 +8933,11 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
     placeholder.layoutSubtree = true;
     const offscreen = placeholder.transferControlToOffscreen();
     offscreenRef.current = offscreen;
-    offscreen.width = width;
-    offscreen.height = height;
+    resizeOffscreenCanvas({
+      offscreen,
+      width: canvasWidth,
+      height: canvasHeight
+    });
     initializedRef.current = false;
     unmountedRef.current = false;
     placeholder.addEventListener("paint", onPaintCb);
@@ -8479,7 +8949,7 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
       onInitCleanupRef.current?.();
       onInitCleanupRef.current = null;
     };
-  }, [onPaintCb, cancelRender2, width, height]);
+  }, [onPaintCb, cancelRender2, canvasWidth, canvasHeight]);
   const onPaintChangedRef = useRef22(false);
   useLayoutEffect9(() => {
     if (!onPaintChangedRef.current) {
@@ -8511,17 +8981,24 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
       height
     };
   }, [width, height]);
+  const canvasStyle = useMemo30(() => {
+    return {
+      width,
+      height,
+      ...style ?? {}
+    };
+  }, [height, style, width]);
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
   }
-  return /* @__PURE__ */ jsx24(HtmlInCanvasAncestorContext.Provider, {
+  return /* @__PURE__ */ jsx25(HtmlInCanvasAncestorContext.Provider, {
     value: true,
-    children: /* @__PURE__ */ jsx24("canvas", {
+    children: /* @__PURE__ */ jsx25("canvas", {
       ref: setLayoutCanvasRef,
-      width,
-      height,
-      style,
-      children: /* @__PURE__ */ jsx24("div", {
+      width: canvasWidth,
+      height: canvasHeight,
+      style: canvasStyle,
+      children: /* @__PURE__ */ jsx25("div", {
         ref: divRef,
         style: innerStyle,
         children
@@ -8537,6 +9014,7 @@ var HtmlInCanvasInner = forwardRef9(({
   children,
   onPaint,
   onInit,
+  pixelDensity,
   _experimentalControls: controls,
   style,
   durationInFrames,
@@ -8555,7 +9033,7 @@ var HtmlInCanvasInner = forwardRef9(({
       ref.current = node;
     }
   }, [ref]);
-  return /* @__PURE__ */ jsx24(Sequence, {
+  return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
@@ -8564,13 +9042,14 @@ var HtmlInCanvasInner = forwardRef9(({
     _remotionInternalRefForOutline: actualRef,
     layout: "none",
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx24(HtmlInCanvasContent, {
+    children: /* @__PURE__ */ jsx25(HtmlInCanvasContent, {
       ref: setCanvasRef,
       width,
       height,
       effects,
       onPaint,
       onInit,
+      pixelDensity,
       controls,
       style,
       children
@@ -8579,10 +9058,16 @@ var HtmlInCanvasInner = forwardRef9(({
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
-var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
+var HtmlInCanvasWrapped = wrapInSchema({
+  Component: HtmlInCanvasInner,
+  schema: htmlInCanvasSchema,
+  supportsEffects: true
+});
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
   isSupported: isHtmlInCanvasSupported
 });
@@ -8595,6 +9080,8 @@ function truncateSrcForLabel(src) {
   return src;
 }
 var canvasImageSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   fit: {
     type: "enum",
     default: "fill",
@@ -8820,7 +9307,7 @@ var CanvasImageContent = forwardRef10(({
     sourceCanvas,
     width
   ]);
-  return /* @__PURE__ */ jsx25("canvas", {
+  return /* @__PURE__ */ jsx26("canvas", {
     ...canvasProps,
     ref: canvasRef,
     width,
@@ -8864,7 +9351,7 @@ var CanvasImageInner = forwardRef10(({
   useImperativeHandle7(ref, () => {
     return actualRef.current;
   }, []);
-  return /* @__PURE__ */ jsx25(Sequence, {
+  return /* @__PURE__ */ jsx26(Sequence, {
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
@@ -8877,7 +9364,7 @@ var CanvasImageInner = forwardRef10(({
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
     _remotionInternalRefForOutline: _remotionInternalRefForOutline ?? actualRef,
-    children: /* @__PURE__ */ jsx25(CanvasImageContent, {
+    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
       ref: actualRef,
       src,
       width,
@@ -8898,7 +9385,11 @@ var CanvasImageInner = forwardRef10(({
     })
   });
 });
-var CanvasImage = wrapInSchema(CanvasImageInner, canvasImageSchema);
+var CanvasImage = wrapInSchema({
+  Component: CanvasImageInner,
+  schema: canvasImageSchema,
+  supportsEffects: true
+});
 CanvasImage.displayName = "CanvasImage";
 addSequenceStackTraces(CanvasImage);
 var IFrameRefForwarding = ({
@@ -8925,7 +9416,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx26("iframe", {
+  return /* @__PURE__ */ jsx27("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props2,
     ref,
@@ -9081,7 +9572,7 @@ var ImgContent = ({
     requestsVideoFrame: false,
     isClientSideRendering
   });
-  return /* @__PURE__ */ jsx27("img", {
+  return /* @__PURE__ */ jsx28("img", {
     ...props2,
     ref: imageCallbackRef,
     crossOrigin: crossOriginValue,
@@ -9104,7 +9595,7 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  return /* @__PURE__ */ jsx27(Sequence, {
+  return /* @__PURE__ */ jsx28(Sequence, {
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
@@ -9116,7 +9607,7 @@ var NativeImgInner = ({
     showInTimeline: showInTimeline ?? true,
     hidden,
     _remotionInternalRefForOutline: refForOutline,
-    children: /* @__PURE__ */ jsx27(ImgContent, {
+    children: /* @__PURE__ */ jsx28(ImgContent, {
       src,
       refForOutline,
       ...props2
@@ -9125,6 +9616,8 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -9194,7 +9687,7 @@ var ImgInner = ({
 }) => {
   const refForOutline = useRef24(null);
   if (effects.length === 0) {
-    return /* @__PURE__ */ jsx27(NativeImgInner, {
+    return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
       ref,
       hidden,
@@ -9230,7 +9723,7 @@ var ImgInner = ({
   const canvasHeight = typeof height === "number" ? height : undefined;
   const canvasProps = props2;
   const canvasFit = getFitFromObjectFit(style) ?? "fill";
-  return /* @__PURE__ */ jsx27(CanvasImageWithPrivateProps, {
+  return /* @__PURE__ */ jsx28(CanvasImageWithPrivateProps, {
     src,
     width: canvasWidth,
     height: canvasHeight,
@@ -9255,9 +9748,13 @@ var ImgInner = ({
     ...canvasProps
   });
 };
-var Img = wrapInSchema(ImgInner, imgSchema);
+var Img = wrapInSchema({
+  Component: ImgInner,
+  schema: imgSchema,
+  supportsEffects: true
+});
 addSequenceStackTraces(Img);
-var compositionsRef = React28.createRef();
+var compositionsRef = React29.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -9289,14 +9786,15 @@ var CompositionManagerProvider = ({
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback19((name, parent, nonce) => {
+  const registerFolder = useCallback19((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
         {
           name,
           parent,
-          nonce
+          nonce,
+          stack
         }
       ];
     });
@@ -9335,9 +9833,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx28(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx29(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx28(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx29(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -9435,7 +9933,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React29.createContext(null);
+var MaxMediaCacheSizeContext = React30.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -9453,7 +9951,7 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext23(null);
+var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
   const context = useContext34(MediaEnabledContext);
   if (!context) {
@@ -9480,7 +9978,7 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx29(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -9504,25 +10002,25 @@ var RemotionRootContexts = ({
   const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx30(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx30(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx30(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx31(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx30(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx31(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx30(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx30(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx30(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx30(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx30(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx30(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx31(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx31(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx31(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx31(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx31(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx31(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
                       previewSampleRate,
-                      children: /* @__PURE__ */ jsx30(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx31(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -9708,7 +10206,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React31.createContext(() => {});
+var SequenceStackTracesUpdateContext = React32.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -9734,8 +10232,8 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext24({
+var CurrentScaleContext = React33.createContext(null);
+var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
   },
@@ -9758,6 +10256,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
+var PixelDensityContext = React34.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -9790,9 +10289,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -9958,7 +10457,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx31(Img, {
+  return /* @__PURE__ */ jsx32(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -9981,16 +10480,22 @@ var useEmitVideoFrame = ({
       return;
     }
     let handle = 0;
-    const callback = () => {
+    const callback = (_now, metadata) => {
       if (!ref.current) {
         return;
       }
-      onVideoFrame(ref.current);
+      onVideoFrame(ref.current, _now, metadata);
       handle = ref.current.requestVideoFrameCallback(callback);
     };
-    callback();
+    onVideoFrame(current);
+    if (!current.requestVideoFrameCallback) {
+      return;
+    }
+    handle = current.requestVideoFrameCallback(callback);
     return () => {
-      current.cancelVideoFrameCallback(handle);
+      if (handle) {
+        current.cancelVideoFrameCallback(handle);
+      }
     };
   }, [onVideoFrame, ref]);
 };
@@ -10004,7 +10509,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext36(SharedAudioContext);
+  const context = useContext37(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -10018,7 +10523,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React34.useInsertionEffect ?? React34.useLayoutEffect;
+  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -10061,7 +10566,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext36(SequenceContext);
+  const parentSequence = useContext37(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState20(() => String(Math.random()));
@@ -10222,7 +10727,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx32("video", {
+  return /* @__PURE__ */ jsx33("video", {
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -10265,13 +10770,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx33(Sequence, {
+    return /* @__PURE__ */ jsx34(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -10286,7 +10791,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx33(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -10308,7 +10813,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx33(VideoForPreview, {
+  return /* @__PURE__ */ jsx34(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -10326,11 +10831,9 @@ var OffthreadVideo = ({
   acceptableTimeShiftInSeconds,
   allowAmplificationDuringRender,
   audioStreamIndex,
-  className,
   crossOrigin,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  id,
   loopVolumeCurveBehavior,
   muted,
   name,
@@ -10353,20 +10856,19 @@ var OffthreadVideo = ({
   endAt,
   stack,
   startFrom,
-  imageFormat
+  imageFormat,
+  ...props2
 }) => {
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
-    className,
     crossOrigin,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
-    id,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     muted: muted ?? false,
     name,
@@ -10389,24 +10891,25 @@ var OffthreadVideo = ({
     trimAfter,
     trimBefore,
     useWebAudioApi: useWebAudioApi ?? false,
-    volume
+    volume,
+    ...props2
   });
 };
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React36.useContext(CompositionManager);
-  const timelineContext = React36.useContext(TimelineContext);
-  const setTimelineContext = React36.useContext(SetTimelineContext);
-  const sequenceContext = React36.useContext(SequenceContext);
-  const nonceContext = React36.useContext(NonceContext);
-  const canUseRemotionHooksContext = React36.useContext(CanUseRemotionHooks);
-  const preloadContext = React36.useContext(PreloadContext);
-  const resolveCompositionContext = React36.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React36.useContext(RenderAssetManager);
-  const sequenceManagerContext = React36.useContext(SequenceManager);
-  const bufferManagerContext = React36.useContext(BufferingContextReact);
-  const logLevelContext = React36.useContext(LogLevelContext);
+  const compositionManagerCtx = React38.useContext(CompositionManager);
+  const timelineContext = React38.useContext(TimelineContext);
+  const setTimelineContext = React38.useContext(SetTimelineContext);
+  const sequenceContext = React38.useContext(SequenceContext);
+  const nonceContext = React38.useContext(NonceContext);
+  const canUseRemotionHooksContext = React38.useContext(CanUseRemotionHooks);
+  const preloadContext = React38.useContext(PreloadContext);
+  const resolveCompositionContext = React38.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React38.useContext(RenderAssetManager);
+  const sequenceManagerContext = React38.useContext(SequenceManager);
+  const bufferManagerContext = React38.useContext(BufferingContextReact);
+  const logLevelContext = React38.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -10437,29 +10940,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx34(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx35(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx34(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx35(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx34(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx35(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx34(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx35(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx34(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx34(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx34(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx34(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx34(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx34(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx34(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx34(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -10527,8 +11030,10 @@ var Internals = {
   SharedAudioTagsContext,
   SharedAudioTagsContextProvider,
   invalidCompositionErrorMessage,
+  invalidFolderNameErrorMessage,
   calculateMediaDuration,
   isCompositionIdValid,
+  isFolderNameValid,
   getPreviewDomElement,
   compositionsRef,
   portalNode,
@@ -10563,6 +11068,7 @@ var Internals = {
   BufferingContextReact,
   getComponentsToAddStacksTo,
   CurrentScaleContext,
+  PixelDensityContext,
   PreviewSizeContext,
   calculateScale,
   validateRenderAsset,
@@ -10602,13 +11108,19 @@ var Internals = {
   createWebGL2ContextError,
   computeEffectiveSchemaValuesDotNotation,
   interpolateKeyframedStatus,
+  makeStaticDragOverride,
+  makeKeyframedDragOverride,
+  resolveDragOverrideValue,
+  getStaticDragOverrideValue,
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
   makeSequencePropsSubscriptionKey,
   getCodeValuesCtx,
   getEffectCodeValuesCtx,
-  hiddenField
+  hiddenField,
+  durationInFramesField,
+  fromField
 };
 var validateFrame = ({
   allowFloats,
@@ -10635,34 +11147,15 @@ var validateFrame = ({
   }
 };
 var flattenChildren = (children) => {
-  const childrenArray = React37.Children.toArray(children);
+  const childrenArray = React39.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React37.Fragment) {
+    if (child.type === React39.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext25(false);
-var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx35(IsInsideSeriesContext.Provider, {
-    value: true,
-    children
-  });
-};
-var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx35(IsInsideSeriesContext.Provider, {
-    value: false,
-    children
-  });
-};
-var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React38.useContext(IsInsideSeriesContext);
-  if (!isInsideSeries) {
-    throw new Error("This component must be inside a <Series /> component.");
-  }
-};
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
   return /* @__PURE__ */ jsx36(IsNotInsideSeriesProvider, {
@@ -10733,7 +11226,11 @@ var SeriesInner = (props2) => {
     })
   });
 };
-var Series = Object.assign(wrapInSchema(SeriesInner, sequenceSchemaDefaultLayoutNone), {
+var Series = Object.assign(wrapInSchema({
+  Component: SeriesInner,
+  schema: sequenceSchemaDefaultLayoutNone,
+  supportsEffects: false
+}), {
   Sequence: SeriesSequence
 });
 addSequenceStackTraces(Series);
@@ -11204,13 +11701,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef27(null);
-  const sequenceContext = useContext37(SequenceContext);
+  const sequenceContext = useContext38(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext37(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext38(RenderAssetManager);
   const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -11269,6 +11766,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
+  useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -11412,6 +11910,7 @@ var VideoForwardingFunction = (props2, ref) => {
     _remotionInternalNativeLoopPassed,
     showInTimeline,
     onAutoPlayError,
+    onVideoFrame,
     ...otherProps
   } = props2;
   const { loop, ...propsOtherThanLoop } = props2;
@@ -11420,7 +11919,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext38(DurationsContext);
+  const { durations, setDurations } = useContext39(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -11431,7 +11930,6 @@ var VideoForwardingFunction = (props2, ref) => {
   const onDuration = useCallback23((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback23(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -11477,6 +11975,7 @@ var VideoForwardingFunction = (props2, ref) => {
       name,
       children: /* @__PURE__ */ jsx38(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
+        onVideoFrame,
         ...otherProps,
         ref,
         stack
@@ -11500,7 +11999,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
-    onVideoFrame: null,
+    onVideoFrame: onVideoFrame ?? null,
     pauseWhenBuffering: pauseWhenBuffering ?? false,
     onDuration,
     _remotionInternalStack: stack ?? null,
@@ -11535,6 +12034,7 @@ var Config = new Proxy(proxyObj, {
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
 addSequenceStackTraces(Composition);
+addSequenceStackTraces(Folder);
 
 // src/components/team/TeamCards.tsx
 import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -11972,7 +12472,7 @@ var ExpertsPageContent = ({ Link }) => {
   });
 };
 // ../design/dist/esm/index.mjs
-import * as React22 from "react";
+import * as React23 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx45 } from "react/jsx-runtime";
 import React52, { useCallback as useCallback25, useRef as useRef28, useState as useState22 } from "react";
@@ -13317,7 +13817,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect22, useMemo as useMemo43, useState as useState21 } from "react";
+import React35, { useEffect as useEffect22, useMemo as useMemo43, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -17680,15 +18180,15 @@ import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React122 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React16 from "react";
-import * as React13 from "react";
+import * as React162 from "react";
+import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React142 from "react";
+import * as React14 from "react";
 import * as React152 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React17 from "react";
-import * as React182 from "react";
+import * as React18 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React202 from "react";
 import * as React192 from "react";
@@ -17698,41 +18198,41 @@ import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "
 import * as ReactDOM2 from "react-dom";
 import * as React222 from "react";
 import { jsx as jsx202 } from "react/jsx-runtime";
-import * as React23 from "react";
+import * as React232 from "react";
 import { jsx as jsx213 } from "react/jsx-runtime";
 import * as React25 from "react";
 import ReactDOM3 from "react-dom";
 import { jsx as jsx223 } from "react/jsx-runtime";
 import * as React26 from "react";
 import * as React27 from "react";
-import * as React282 from "react";
+import * as React28 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
-import * as React35 from "react";
-import * as React312 from "react";
+import * as React352 from "react";
+import * as React31 from "react";
 import { useState as useState112 } from "react";
 import * as React292 from "react";
-import * as React30 from "react";
+import * as React302 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
 import * as React322 from "react";
 import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React372 from "react";
+import * as React37 from "react";
 import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
 import * as React382 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
-import React402 from "react";
-import * as React39 from "react";
+import React40 from "react";
+import * as React392 from "react";
 import { Fragment as Fragment222, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
 import * as React42 from "react";
-import * as React41 from "react";
+import * as React412 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -17785,7 +18285,7 @@ function useComposedRefs(...refs) {
   return React8.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React22[" use ".trim().toString()];
+var use = React23[" use ".trim().toString()];
 function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
@@ -17794,25 +18294,25 @@ function isLazyComponent(element) {
 }
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React22.forwardRef((props, forwardedRef) => {
+  const Slot2 = React23.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    const childrenArray = React22.Children.toArray(children);
+    const childrenArray = React23.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React22.Children.count(newElement) > 1)
-            return React22.Children.only(null);
-          return React22.isValidElement(newElement) ? newElement.props.children : null;
+          if (React23.Children.count(newElement) > 1)
+            return React23.Children.only(null);
+          return React23.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx45(SlotClone, { ...slotProps, ref: forwardedRef, children: React22.isValidElement(newElement) ? React22.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx45(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx45(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
@@ -17821,20 +18321,20 @@ function createSlot(ownerName) {
 }
 var Slot = /* @__PURE__ */ createSlot("Slot");
 function createSlotClone(ownerName) {
-  const SlotClone = React22.forwardRef((props, forwardedRef) => {
+  const SlotClone = React23.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    if (React22.isValidElement(children)) {
+    if (React23.isValidElement(children)) {
       const childrenRef = getElementRef(children);
       const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React22.Fragment) {
+      if (children.type !== React23.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React22.cloneElement(children, props2);
+      return React23.cloneElement(children, props2);
     }
-    return React22.Children.count(children) > 1 ? React22.Children.only(null) : null;
+    return React23.Children.count(children) > 1 ? React23.Children.only(null) : null;
   });
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
@@ -17850,7 +18350,7 @@ function createSlottable(ownerName) {
 }
 var Slottable = /* @__PURE__ */ createSlottable("Slottable");
 function isSlottable(child) {
-  return React22.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React23.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -17907,7 +18407,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React33.useState({
+  const [state, setState] = React35.useState({
     progress: 0,
     isActive: false
   });
@@ -17919,7 +18419,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React33.useEffect(() => {
+  React35.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -17994,8 +18494,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React33.useState(0);
-  React33.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React35.useState(0);
+  React35.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -18723,7 +19223,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React13.forwardRef((props, forwardedRef) => {
+  const Node2 = React132.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -18739,11 +19239,11 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React142.useRef(callback);
-  React142.useEffect(() => {
+  const callbackRef = React14.useRef(callback);
+  React14.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
@@ -18762,12 +19262,12 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React16.createContext({
+var DismissableLayerContext = React162.createContext({
   layers: /* @__PURE__ */ new Set,
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set,
   branches: /* @__PURE__ */ new Set
 });
-var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
+var DismissableLayer = React162.forwardRef((props, forwardedRef) => {
   const {
     disableOutsidePointerEvents = false,
     onEscapeKeyDown,
@@ -18777,10 +19277,10 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
     onDismiss,
     ...layerProps
   } = props;
-  const context = React16.useContext(DismissableLayerContext);
-  const [node, setNode] = React16.useState(null);
+  const context = React162.useContext(DismissableLayerContext);
+  const [node, setNode] = React162.useState(null);
   const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-  const [, force] = React16.useState({});
+  const [, force] = React162.useState({});
   const composedRefs = useComposedRefs2(forwardedRef, (node2) => setNode(node2));
   const layers = Array.from(context.layers);
   const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
@@ -18818,7 +19318,7 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -18836,7 +19336,7 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -18845,7 +19345,7 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
       dispatchUpdate();
     };
   }, [node, context]);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     const handleUpdate = () => force({});
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -18864,11 +19364,11 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React16.forwardRef((props, forwardedRef) => {
-  const context = React16.useContext(DismissableLayerContext);
-  const ref = React16.useRef(null);
+var DismissableLayerBranch = React162.forwardRef((props, forwardedRef) => {
+  const context = React162.useContext(DismissableLayerContext);
+  const ref = React162.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -18882,9 +19382,9 @@ var DismissableLayerBranch = React16.forwardRef((props, forwardedRef) => {
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React16.useRef(false);
-  const handleClickRef = React16.useRef(() => {});
-  React16.useEffect(() => {
+  const isPointerInsideReactTreeRef = React162.useRef(false);
+  const handleClickRef = React162.useRef(() => {});
+  React162.useEffect(() => {
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
@@ -18919,8 +19419,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React16.useRef(false);
-  React16.useEffect(() => {
+  const isFocusInsideReactTreeRef = React162.useRef(false);
+  React162.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -18978,7 +19478,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React182.forwardRef((props, forwardedRef) => {
+var FocusScope = React18.forwardRef((props, forwardedRef) => {
   const {
     loop = false,
     trapped = false,
@@ -18986,12 +19486,12 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container22, setContainer] = React182.useState(null);
+  const [container22, setContainer] = React18.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React182.useRef(null);
+  const lastFocusedElementRef = React18.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContainer(node));
-  const focusScope = React182.useRef({
+  const focusScope = React18.useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -19000,7 +19500,7 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React182.useEffect(() => {
+  React18.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
         if (focusScope.paused || !container22)
@@ -19042,7 +19542,7 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
       };
     }
   }, [trapped, container22, focusScope.paused]);
-  React182.useEffect(() => {
+  React18.useEffect(() => {
     if (container22) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
@@ -19073,7 +19573,7 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
       };
     }
   }, [container22, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React182.useCallback((event) => {
+  const handleKeyDown = React18.useCallback((event) => {
     if (!loop && !trapped)
       return;
     if (focusScope.paused)
@@ -21003,7 +21503,7 @@ var Arrow = React222.forwardRef((props, forwardedRef) => {
 Arrow.displayName = NAME;
 var Root2 = Arrow;
 function useSize(element) {
-  const [size4, setSize] = React23.useState(undefined);
+  const [size4, setSize] = React232.useState(undefined);
   useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -21325,7 +21825,7 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React282.forwardRef((props, forwardedRef) => {
+var VisuallyHidden = React28.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx232(Primitive.span, {
     ...props,
     ref: forwardedRef,
@@ -21655,7 +22155,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React30.createElement(Target, __assign({}, rest));
+  return React302.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -21666,9 +22166,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React312.forwardRef(function(props, parentRef) {
-  var ref = React312.useRef(null);
-  var _a = React312.useState({
+var RemoveScroll = React31.forwardRef(function(props, parentRef) {
+  var ref = React31.useRef(null);
+  var _a = React31.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -21677,7 +22177,7 @@ var RemoveScroll = React312.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React312.createElement(React312.Fragment, null, enabled && React312.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React312.cloneElement(React312.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React312.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React31.createElement(React31.Fragment, null, enabled && React31.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React31.cloneElement(React31.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React31.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -22136,8 +22636,8 @@ function getOutermostShadowParent(node) {
   return shadowParent;
 }
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
-var ReactRemoveScroll = React35.forwardRef(function(props, ref) {
-  return React35.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React352.forwardRef(function(props, ref) {
+  return React352.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -23143,7 +23643,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
+var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -23158,7 +23658,7 @@ var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -23167,7 +23667,7 @@ var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -23176,7 +23676,7 @@ var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
   children: /* @__PURE__ */ jsxs52(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -23193,13 +23693,13 @@ var SelectContent2 = React372.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -23218,7 +23718,7 @@ var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -23307,22 +23807,22 @@ function composeContextScopes2(...scopes) {
 }
 function createSlot2(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React39.forwardRef((props, forwardedRef) => {
+  const Slot22 = React392.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React39.Children.toArray(children);
+    const childrenArray = React392.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React39.Children.count(newElement) > 1)
-            return React39.Children.only(null);
-          return React39.isValidElement(newElement) ? newElement.props.children : null;
+          if (React392.Children.count(newElement) > 1)
+            return React392.Children.only(null);
+          return React392.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React39.isValidElement(newElement) ? React39.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React392.isValidElement(newElement) ? React392.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
@@ -23330,24 +23830,24 @@ function createSlot2(ownerName) {
   return Slot22;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React39.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React392.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React39.isValidElement(children)) {
+    if (React392.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
       const props2 = mergeProps3(slotProps, children.props);
-      if (children.type !== React39.Fragment) {
+      if (children.type !== React392.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React39.cloneElement(children, props2);
+      return React392.cloneElement(children, props2);
     }
-    return React39.Children.count(children) > 1 ? React39.Children.only(null) : null;
+    return React392.Children.count(children) > 1 ? React392.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
-  return React39.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+  return React392.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
 }
 function mergeProps3(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -23392,14 +23892,14 @@ function createCollection2(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React402.useRef(null);
-    const itemMap = React402.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React40.useRef(null);
+    const itemMap = React40.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx292(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot2(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React402.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React40.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
@@ -23409,12 +23909,12 @@ function createCollection2(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot2(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React402.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React40.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React402.useRef(null);
+    const ref = React40.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React402.useEffect(() => {
+    React40.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -23423,7 +23923,7 @@ function createCollection2(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React402.useCallback(() => {
+    const getItems = React40.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -23741,7 +24241,7 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
 var useReactId2 = React42[" useId ".trim().toString()] || (() => {
   return;
 });
@@ -27064,11 +27564,11 @@ import { jsx as jsx58, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
-import { useContext as useContext45, useLayoutEffect as useLayoutEffect17 } from "react";
+import { useContext as useContext46, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext46, useEffect as useEffect52, useRef as useRef46 } from "react";
+import { useContext as useContext47, useEffect as useEffect52, useRef as useRef46 } from "react";
 import { useEffect as useEffect310, useRef as useRef210 } from "react";
 import { useCallback as useCallback36, useContext as useContext310, useMemo as useMemo53, useRef as useRef47, useState as useState39 } from "react";
 import { useEffect as useEffect43, useRef as useRef310 } from "react";
@@ -27119,6 +27619,123 @@ import { useCallback as useCallback112, useMemo as useMemo132, useState as useSt
 import { jsx as jsx133 } from "react/jsx-runtime";
 
 // ../core/dist/esm/no-react.mjs
+var normalizeNumber2 = (value) => {
+  return Math.round(value * 1e6) / 1e6;
+};
+var angleUnits2 = new Set(["deg", "rad", "grad", "turn"]);
+var lengthUnits2 = new Set([
+  "%",
+  "cap",
+  "ch",
+  "cm",
+  "cqb",
+  "cqh",
+  "cqi",
+  "cqmax",
+  "cqmin",
+  "cqw",
+  "dvh",
+  "dvw",
+  "em",
+  "ex",
+  "ic",
+  "in",
+  "lh",
+  "lvh",
+  "lvw",
+  "mm",
+  "pc",
+  "pt",
+  "px",
+  "q",
+  "rem",
+  "rlh",
+  "svh",
+  "svw",
+  "vb",
+  "vh",
+  "vi",
+  "vmax",
+  "vmin",
+  "vw"
+]);
+var cssNumberRegex2 = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+var stringifyNumber2 = (value) => {
+  return String(normalizeNumber2(value));
+};
+var parseStringInterpolationComponent2 = (component, value) => {
+  const match = cssNumberRegex2.exec(component);
+  if (match === null) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported scale, translate, or rotate value`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+  }
+  if (unit === null) {
+    return { kind: "scale", value: numberValue, unit: null };
+  }
+  if (angleUnits2.has(unit)) {
+    return { kind: "rotate", value: numberValue, unit };
+  }
+  if (lengthUnits2.has(unit)) {
+    return { kind: "translate", value: numberValue, unit };
+  }
+  throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
+};
+var parseStringInterpolationValue2 = (output) => {
+  if (typeof output === "number") {
+    if (!Number.isFinite(output)) {
+      throw new Error(`outputRange must contain only finite numbers, but got [${output}]`);
+    }
+    return {
+      kind: "scale",
+      values: [output, output, 1],
+      units: [null, null, null],
+      dimensions: 1
+    };
+  }
+  const parts = output.trim().split(/\s+/);
+  if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
+    throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
+  }
+  const parsed = parts.map((part) => parseStringInterpolationComponent2(part, output));
+  const [{ kind }] = parsed;
+  for (const part of parsed) {
+    if (part.kind !== kind) {
+      throw new TypeError(`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`);
+    }
+  }
+  if (kind === "scale") {
+    const x = parsed[0].value;
+    const y = parsed[1]?.value ?? x;
+    const z = parsed[2]?.value ?? 1;
+    return {
+      kind,
+      values: [x, y, z],
+      units: [null, null, null],
+      dimensions: parsed.length
+    };
+  }
+  return {
+    kind,
+    values: [parsed[0].value, parsed[1]?.value ?? 0, parsed[2]?.value ?? 0],
+    units: [parsed[0].unit, parsed[1]?.unit ?? null, parsed[2]?.unit ?? null],
+    dimensions: parsed.length
+  };
+};
+var serializeStringInterpolationValue2 = ({
+  kind,
+  values,
+  units,
+  dimensions
+}) => {
+  if (kind === "scale") {
+    return values.slice(0, dimensions).map((value) => stringifyNumber2(value)).join(" ");
+  }
+  return values.slice(0, dimensions).map((value, index2) => `${stringifyNumber2(value)}${units[index2]}`).join(" ");
+};
 function interpolateFunction2(input, inputRange, outputRange, options2) {
   const { extrapolateLeft, extrapolateRight, easing } = options2;
   let result = input;
@@ -27163,6 +27780,96 @@ function findRange2(input, inputRange) {
   }
   return i - 1;
 }
+var defaultEasing2 = (num) => num;
+var interpolateNumber2 = ({
+  input,
+  inputRange,
+  outputRange,
+  options: options2
+}) => {
+  if (inputRange.length === 1) {
+    return outputRange[0];
+  }
+  const easingOption = options2?.easing;
+  const resolveEasingForSegment = (segmentIndex) => {
+    if (easingOption === undefined) {
+      return defaultEasing2;
+    }
+    if (typeof easingOption === "function") {
+      return easingOption;
+    }
+    return easingOption[segmentIndex];
+  };
+  let extrapolateLeft = "extend";
+  if (options2?.extrapolateLeft !== undefined) {
+    extrapolateLeft = options2.extrapolateLeft;
+  }
+  let extrapolateRight = "extend";
+  if (options2?.extrapolateRight !== undefined) {
+    extrapolateRight = options2.extrapolateRight;
+  }
+  const posterizedInput = options2?.posterize === undefined ? input : Math.floor(input / options2.posterize) * options2.posterize;
+  const range = findRange2(posterizedInput, inputRange);
+  return interpolateFunction2(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+    easing: resolveEasingForSegment(range),
+    extrapolateLeft,
+    extrapolateRight
+  });
+};
+var interpolateString2 = ({
+  input,
+  inputRange,
+  outputRange,
+  options: options2
+}) => {
+  const parsedOutputRange = outputRange.map(parseStringInterpolationValue2);
+  const kind = parsedOutputRange[0]?.kind;
+  if (kind === undefined) {
+    throw new Error("outputRange must have at least 1 element");
+  }
+  for (const parsed of parsedOutputRange) {
+    if (parsed.kind !== kind) {
+      throw new TypeError(`Cannot interpolate ${kind} values with ${parsed.kind} values`);
+    }
+  }
+  const dimensions = Math.max(...parsedOutputRange.map((parsed) => parsed.dimensions));
+  const units = [
+    null,
+    null,
+    null
+  ];
+  if (kind !== "scale") {
+    for (let axis = 0;axis < dimensions; axis++) {
+      for (const parsed of parsedOutputRange) {
+        const unit = parsed.units[axis];
+        if (unit === null) {
+          continue;
+        }
+        if (units[axis] === null) {
+          units[axis] = unit;
+          continue;
+        }
+        if (units[axis] !== unit) {
+          throw new TypeError(`Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}`);
+        }
+      }
+      if (units[axis] === null) {
+        throw new TypeError(`Cannot interpolate ${kind} values because axis ${axis + 1} has no unit`);
+      }
+    }
+  }
+  return serializeStringInterpolationValue2({
+    kind,
+    values: [0, 0, 0].map((_, axis) => interpolateNumber2({
+      input,
+      inputRange,
+      outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
+      options: options2
+    })),
+    units,
+    dimensions
+  });
+};
 function checkValidInputRange2(arr) {
   for (let i = 1;i < arr.length; ++i) {
     if (!(arr[i] > arr[i - 1])) {
@@ -27222,42 +27929,27 @@ function interpolate3(input, inputRange, outputRange, options2) {
     throw new Error("inputRange (" + inputRange.length + ") and outputRange (" + outputRange.length + ") must have the same length");
   }
   checkInfiniteRange2("inputRange", inputRange);
-  checkInfiniteRange2("outputRange", outputRange);
   checkValidInputRange2(inputRange);
   assertValidInterpolateEasingOption2(options2?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption2(options2?.posterize);
-  const easingOption = options2?.easing;
-  const defaultEasing = (num) => num;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
-  let extrapolateLeft = "extend";
-  if (options2?.extrapolateLeft !== undefined) {
-    extrapolateLeft = options2.extrapolateLeft;
-  }
-  let extrapolateRight = "extend";
-  if (options2?.extrapolateRight !== undefined) {
-    extrapolateRight = options2.extrapolateRight;
-  }
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
-  if (inputRange.length === 1) {
-    return outputRange[0];
+  if (!Array.isArray(outputRange)) {
+    throw new Error("outputRange must contain only numbers");
   }
-  const posterizedInput = options2?.posterize === undefined ? input : Math.floor(input / options2.posterize) * options2.posterize;
-  const range = findRange2(posterizedInput, inputRange);
-  return interpolateFunction2(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
-    extrapolateLeft,
-    extrapolateRight
-  });
+  const hasStringOutput = outputRange.some((output) => typeof output === "string");
+  if (hasStringOutput) {
+    if (!outputRange.every((output) => typeof output === "string" || typeof output === "number")) {
+      throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+    }
+    return interpolateString2({ input, inputRange, outputRange, options: options2 });
+  }
+  if (!outputRange.every((output) => typeof output === "number")) {
+    throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+  }
+  checkInfiniteRange2("outputRange", outputRange);
+  return interpolateNumber2({ input, inputRange, outputRange, options: options2 });
 }
 function truthy3(value) {
   return Boolean(value);
@@ -27808,6 +28500,45 @@ var proResProfileOptions = [
   "light",
   "proxy"
 ];
+var defaultScaleValue = [1, 1, 1];
+var parseScaleString = (value) => {
+  const parts = value.trim().split(/\s+/);
+  if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
+    return null;
+  }
+  const parsed = parts.map((part) => Number(part));
+  if (!parsed.every((part) => Number.isFinite(part))) {
+    return null;
+  }
+  const x = parsed[0];
+  const y = parsed[1] ?? x;
+  const z = parsed[2] ?? 1;
+  return [x, y, z];
+};
+var parseValidScaleValue = (value) => {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? [value, value, 1] : null;
+  }
+  if (typeof value === "string") {
+    return parseScaleString(value);
+  }
+  return null;
+};
+var parseScaleValue = (value) => {
+  return parseValidScaleValue(value) ?? defaultScaleValue;
+};
+var serializeScaleValue = ([x, y, z]) => {
+  const normalizedX = normalizeNumber2(x);
+  const normalizedY = normalizeNumber2(y);
+  const normalizedZ = normalizeNumber2(z);
+  if (normalizedX === normalizedY && normalizedZ === 1) {
+    return normalizedX;
+  }
+  if (normalizedZ === 1) {
+    return `${normalizedX} ${normalizedY}`;
+  }
+  return `${normalizedX} ${normalizedY} ${normalizedZ}`;
+};
 var sequenceVisualStyleSchema2 = {
   "style.translate": {
     type: "translate",
@@ -27816,7 +28547,7 @@ var sequenceVisualStyleSchema2 = {
     description: "Offset"
   },
   "style.scale": {
-    type: "number",
+    type: "scale",
     min: 0.05,
     max: 100,
     step: 0.01,
@@ -27824,7 +28555,7 @@ var sequenceVisualStyleSchema2 = {
     description: "Scale"
   },
   "style.rotate": {
-    type: "rotation",
+    type: "rotation-css",
     step: 1,
     default: "0deg",
     description: "Rotation"
@@ -27835,7 +28566,8 @@ var sequenceVisualStyleSchema2 = {
     max: 1,
     step: 0.01,
     default: 1,
-    description: "Opacity"
+    description: "Opacity",
+    hiddenFromList: false
   }
 };
 var sequencePremountSchema2 = {
@@ -27844,10 +28576,15 @@ var sequencePremountSchema2 = {
     default: 0,
     description: "Premount For",
     min: 0,
-    step: 1
+    step: 1,
+    hiddenFromList: false
   },
   postmountFor: {
-    type: "hidden"
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    hiddenFromList: true
   },
   styleWhilePremounted: {
     type: "hidden"
@@ -27865,8 +28602,23 @@ var hiddenField2 = {
   default: false,
   description: "Hidden"
 };
+var durationInFramesField2 = {
+  type: "number",
+  default: undefined,
+  min: 1,
+  step: 1,
+  hiddenFromList: true
+};
+var fromField2 = {
+  type: "number",
+  default: 0,
+  step: 1,
+  hiddenFromList: true
+};
 var sequenceSchema2 = {
   hidden: hiddenField2,
+  from: fromField2,
+  durationInFrames: durationInFramesField2,
   layout: {
     type: "enum",
     default: "absolute-fill",
@@ -28048,7 +28800,9 @@ var NoReactInternals = {
   validateCodec: validateCodec2,
   proResProfileOptions,
   findPropsToDelete: findPropsToDelete2,
-  sequenceSchema: sequenceSchema2
+  sequenceSchema: sequenceSchema2,
+  parseScaleValue,
+  serializeScaleValue
 };
 
 // ../player/dist/esm/index.mjs
@@ -28061,7 +28815,7 @@ import {
   useRef as useRef132,
   useState as useState142
 } from "react";
-import React132, {
+import React133, {
   forwardRef as forwardRef36,
   Suspense as Suspense22,
   useCallback as useCallback122,
@@ -28520,7 +29274,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext45(Internals.BufferingContextReact);
+  const bufferManager = useContext46(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -28977,11 +29731,11 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext46(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef46(0);
-  const context = useContext46(Internals.BufferingContextReact);
+  const context = useContext47(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -29195,12 +29949,22 @@ var usePlayback = ({
   }, [emitter, frame]);
 };
 var elementSizeHooks = [];
-var useElementSize = (ref, options2) => {
+var getElement = (source) => {
+  if (!source) {
+    return null;
+  }
+  if ("current" in source) {
+    return source.current;
+  }
+  return source;
+};
+var useElementSize = (source, options2) => {
   const [size4, setSize] = useState42(() => {
-    if (!ref.current) {
+    const element = getElement(source);
+    if (!element) {
       return null;
     }
-    const rect = ref.current.getClientRects();
+    const rect = element.getClientRects();
     if (!rect[0]) {
       return null;
     }
@@ -29249,10 +30013,11 @@ var useElementSize = (ref, options2) => {
     });
   }, [options2.shouldApplyCssTransforms]);
   const updateSize = useCallback210(() => {
-    if (!ref.current) {
+    const element = getElement(source);
+    if (!element) {
       return;
     }
-    const rect = ref.current.getClientRects();
+    const rect = element.getClientRects();
     if (!rect[0]) {
       setSize(null);
       return;
@@ -29273,21 +30038,24 @@ var useElementSize = (ref, options2) => {
         }
       };
     });
-  }, [ref]);
+  }, [source]);
+  useEffect62(() => {
+    updateSize();
+  }, [updateSize]);
   useEffect62(() => {
     if (!observer) {
       return;
     }
-    const { current } = ref;
-    if (current) {
-      observer.observe(current);
+    const element = getElement(source);
+    if (element) {
+      observer.observe(element);
     }
     return () => {
-      if (current) {
-        observer.unobserve(current);
+      if (element) {
+        observer.unobserve(element);
       }
     };
-  }, [observer, ref, updateSize]);
+  }, [observer, source]);
   useEffect62(() => {
     if (!options2.triggerOnWindowResize) {
       return;
@@ -31441,7 +32209,7 @@ var useThumbnail = () => {
   }, [emitter]);
   return returnValue;
 };
-var reactVersion2 = React132.version.split(".")[0];
+var reactVersion2 = React133.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -32408,7 +33176,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 useContext47, useMemo as useMemo55 } from "react";
+import React57, { useContext as useContext48, useMemo as useMemo55 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -32425,7 +33193,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext47(Context);
+  const context = useContext48(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -32433,13 +33201,12 @@ function useColorMode() {
 }
 
 // ../media/dist/esm/index.mjs
-import { useState as useState311 } from "react";
-import { useMemo as useMemo312 } from "react";
+import { useMemo as useMemo312, useState as useState311 } from "react";
 import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo57, useRef as useRef49, 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 useContext49, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext50, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
 import React211 from "react";
@@ -32455,10 +33222,10 @@ import {
 } from "mediabunny";
 import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx316 } from "react/jsx-runtime";
-import React58, { useMemo as useMemo63, useState as useState63 } from "react";
+import React63, { useMemo as useMemo63, useState as useState63 } from "react";
 import {
   useCallback as useCallback38,
-  useContext as useContext48,
+  useContext as useContext49,
   useEffect as useEffect212,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
@@ -34375,7 +35142,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext49(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext50(Internals.SharedAudioContext);
   useLayoutEffect18(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -36870,14 +37637,17 @@ var audioSchema = {
     max: 20,
     step: 0.01,
     default: 1,
-    description: "Volume"
+    description: "Volume",
+    hiddenFromList: false
   },
   playbackRate: {
     type: "number",
     min: 0.1,
     step: 0.01,
     default: 1,
-    description: "Playback Rate"
+    description: "Playback Rate",
+    hiddenFromList: false,
+    keyframable: false
   },
   loop: { type: "boolean", default: false, description: "Loop" },
   hidden: Internals.hiddenField
@@ -36962,7 +37732,11 @@ var AudioInner = (props) => {
     })
   });
 };
-var Audio2 = Internals.wrapInSchema(AudioInner, audioSchema);
+var Audio2 = Internals.wrapInSchema({
+  Component: AudioInner,
+  schema: audioSchema,
+  supportsEffects: false
+});
 Internals.addSequenceStackTraces(Audio2);
 var cache2 = new Map;
 var cacheVideoFrame = (src, sourceCanvas) => {
@@ -37042,7 +37816,8 @@ var VideoForPreviewAssertedShowing = ({
   _experimentalInitiallyDrawCachedFrame,
   effects,
   setMediaDurationInSeconds,
-  refForOutline
+  refForOutline,
+  ...props
 }) => {
   const src = usePreload22(unpreloadedSrc);
   const canvasRef = useRef211(null);
@@ -37057,7 +37832,7 @@ var VideoForPreviewAssertedShowing = ({
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
   const [playing] = Timeline2.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
-  const sharedAudioContext = useContext48(SharedAudioContext22);
+  const sharedAudioContext = useContext49(SharedAudioContext22);
   const buffer = useBufferState();
   const canvasRefCallback = useCallback38((canvas) => {
     canvasRef.current = canvas;
@@ -37083,7 +37858,7 @@ var VideoForPreviewAssertedShowing = ({
   effectsRef.current = effects;
   const effectChainStateRef = useRef211(effectChainState);
   effectChainStateRef.current = effectChainState;
-  const parentSequence = useContext48(SequenceContext22);
+  const parentSequence = useContext49(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
@@ -37091,7 +37866,7 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef211(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext48(Internals.BufferingContextReact);
+  const buffering = useContext49(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -37135,8 +37910,8 @@ var VideoForPreviewAssertedShowing = ({
     if (!_experimentalInitiallyDrawCachedFrame) {
       return;
     }
-    const canvas = canvasRef.current;
     return () => {
+      const canvas = canvasRef.current;
       if (!canvas || !hasDrawnRealFrameRef.current || isPremountingRef.current) {
         return;
       }
@@ -37340,6 +38115,7 @@ var VideoForPreviewAssertedShowing = ({
   }, [objectFitProp, style2]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx412(Html5Video, {
+      ...props,
       ref: fallbackVideoRef,
       src,
       style: actualStyle,
@@ -37361,6 +38137,7 @@ var VideoForPreviewAssertedShowing = ({
     return null;
   }
   return /* @__PURE__ */ jsx412("canvas", {
+    ...props,
     ref: canvasRefCallback,
     style: actualStyle,
     className: classNameValue
@@ -37423,7 +38200,8 @@ var VideoForRendering2 = ({
   credentials,
   requestInit,
   objectFit: objectFitProp,
-  effects
+  effects,
+  ...props
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -37658,6 +38436,7 @@ var VideoForRendering2 = ({
   }, [objectFitProp, style2]);
   if (replaceWithOffthreadVideo) {
     const fallback = /* @__PURE__ */ jsx510(Internals.InnerOffthreadVideo, {
+      ...props,
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -37713,6 +38492,7 @@ var VideoForRendering2 = ({
     return null;
   }
   return /* @__PURE__ */ jsx510("canvas", {
+    ...props,
     ref: canvasRef,
     style: styleWithObjectFit,
     className: classNameValue
@@ -37726,14 +38506,17 @@ var videoSchema = {
     max: 20,
     step: 0.01,
     default: 1,
-    description: "Volume"
+    description: "Volume",
+    hiddenFromList: false
   },
   playbackRate: {
     type: "number",
     min: 0.1,
     step: 0.01,
     default: 1,
-    description: "Playback Rate"
+    description: "Playback Rate",
+    hiddenFromList: false,
+    keyframable: false
   },
   hidden: {
     type: "boolean",
@@ -37774,7 +38557,8 @@ var InnerVideo = ({
   _experimentalInitiallyDrawCachedFrame,
   effects,
   setMediaDurationInSeconds,
-  refForOutline
+  refForOutline,
+  ...props
 }) => {
   const environment = useRemotionEnvironment();
   if (typeof src !== "string") {
@@ -37795,6 +38579,7 @@ var InnerVideo = ({
   validateMediaProps22({ playbackRate, volume }, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx65(VideoForRendering2, {
+      ...props,
       audioStreamIndex: audioStreamIndex ?? 0,
       className: className2,
       delayRenderRetries: delayRenderRetries ?? null,
@@ -37823,6 +38608,7 @@ var InnerVideo = ({
     });
   }
   return /* @__PURE__ */ jsx65(VideoForPreview2, {
+    ...props,
     setMediaDurationInSeconds,
     audioStreamIndex: audioStreamIndex ?? 0,
     className: className2,
@@ -37886,7 +38672,8 @@ var VideoInner = ({
   effects,
   durationInFrames,
   from,
-  hidden
+  hidden,
+  ...props
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
   const [mediaVolume] = Internals.useMediaVolumeState();
@@ -37933,7 +38720,7 @@ var VideoInner = ({
     overrideId: controls?.overrideId ?? null
   });
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects ?? []);
-  const refForOutline = React58.useRef(null);
+  const refForOutline = React63.useRef(null);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -37952,6 +38739,7 @@ var VideoInner = ({
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx65(InnerVideo, {
+      ...props,
       audioStreamIndex: audioStreamIndex ?? 0,
       className: className2,
       delayRenderRetries: delayRenderRetries ?? null,
@@ -37986,7 +38774,11 @@ var VideoInner = ({
     })
   });
 };
-var Video = Internals.wrapInSchema(VideoInner, videoSchema);
+var Video = Internals.wrapInSchema({
+  Component: VideoInner,
+  schema: videoSchema,
+  supportsEffects: true
+});
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
@@ -39290,7 +40082,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.471";
+var VERSION2 = "4.0.472";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -40033,7 +40825,8 @@ function createScaffold({
   videoEnabled,
   defaultCodec,
   defaultOutName,
-  allowHtmlInCanvas
+  allowHtmlInCanvas,
+  pixelDensity
 }) {
   if (!ReactDOM6.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
@@ -40125,19 +40918,22 @@ function createScaffold({
               },
               folders: []
             },
-            children: /* @__PURE__ */ jsx217(Internals.RenderAssetManagerProvider, {
-              collectAssets,
-              children: /* @__PURE__ */ jsx217(UpdateTime, {
-                audioEnabled,
-                videoEnabled,
-                logLevel,
-                compId: id,
-                initialFrame,
-                timeUpdater,
-                children: /* @__PURE__ */ jsx217(Internals.CanUseRemotionHooks.Provider, {
-                  value: true,
-                  children: /* @__PURE__ */ jsx217(Component, {
-                    ...resolvedProps
+            children: /* @__PURE__ */ jsx217(Internals.PixelDensityContext.Provider, {
+              value: pixelDensity,
+              children: /* @__PURE__ */ jsx217(Internals.RenderAssetManagerProvider, {
+                collectAssets,
+                children: /* @__PURE__ */ jsx217(UpdateTime, {
+                  audioEnabled,
+                  videoEnabled,
+                  logLevel,
+                  compId: id,
+                  initialFrame,
+                  timeUpdater,
+                  children: /* @__PURE__ */ jsx217(Internals.CanUseRemotionHooks.Provider, {
+                    value: true,
+                    children: /* @__PURE__ */ jsx217(Component, {
+                      ...resolvedProps
+                    })
                   })
                 })
               })
@@ -43084,6 +43880,8 @@ var drawText = ({
     span.textContent = transformedText;
     const tokens = findWords(span);
     const textShadows = parseTextShadow(textShadowValue);
+    const ctm = contextToDraw.getTransform();
+    const blurScale = Math.hypot(ctm.a, ctm.b);
     const { strokeFirst } = parsePaintOrder(paintOrder);
     for (const token of tokens) {
       const measurements = contextToDraw.measureText(originalText);
@@ -43096,9 +43894,9 @@ var drawText = ({
       for (let i = textShadows.length - 1;i >= 0; i--) {
         const shadow = textShadows[i];
         contextToDraw.shadowColor = shadow.color;
-        contextToDraw.shadowBlur = shadow.blurRadius;
-        contextToDraw.shadowOffsetX = shadow.offsetX;
-        contextToDraw.shadowOffsetY = shadow.offsetY;
+        contextToDraw.shadowBlur = shadow.blurRadius * blurScale;
+        contextToDraw.shadowOffsetX = shadow.offsetX * ctm.a + shadow.offsetY * ctm.c;
+        contextToDraw.shadowOffsetY = shadow.offsetX * ctm.b + shadow.offsetY * ctm.d;
         contextToDraw.fillText(token.text, x, y);
       }
       contextToDraw.shadowColor = "transparent";
@@ -43603,7 +44401,8 @@ var internalRenderMediaOnWeb = async ({
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas
+      allowHtmlInCanvas,
+      pixelDensity: scale
     }), 0);
     const {
       delayRenderScope,
@@ -43920,7 +44719,7 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React70, { useCallback as useCallback47 } from "react";
+import React69, { useCallback as useCallback47 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -44118,7 +44917,7 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError, playerRef }) => {
-  const [state, setState] = React70.useState({
+  const [state, setState] = React69.useState({
     type: "idle"
   });
   const triggerRender = useCallback47(async () => {
@@ -44693,7 +45492,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React75, { useCallback as useCallback51, useEffect as useEffect56 } from "react";
+import React73, { useCallback as useCallback51, useEffect as useEffect56 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -44710,7 +45509,7 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React75.useState(true);
+  const [playing, setPlaying] = React73.useState(true);
   useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
@@ -44748,7 +45547,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React76, { useEffect as useEffect57 } from "react";
+import React75, { useEffect as useEffect57 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -44756,7 +45555,7 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React76.useState(0);
+  const [time, setTime] = React75.useState(0);
   useEffect57(() => {
     const { current } = playerRef;
     if (!current) {
@@ -44835,7 +45634,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React77 from "react";
+import React76 from "react";
 import { jsx as jsx110, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
@@ -44858,7 +45657,7 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React77.useCallback((e) => {
+  const toggleTheme = React76.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);