@remotion/promo-pages 4.0.475 → 4.0.477

package/dist/template-modal-content.js

@@ -36,7 +36,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 import * as React23 from "react";
 import * as React3 from "react";
 import { Fragment as Fragment2, jsx as jsx43 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback26, useRef as useRef210, useState as useState22 } from "react";
+import React52, { useCallback as useCallback27, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -4173,6 +4173,7 @@ import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
+  useCallback as useCallback6,
   useContext as useContext17,
   useEffect as useEffect3,
   useMemo as useMemo14,
@@ -4211,14 +4212,14 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React15, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 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 createContext17,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
@@ -4226,7 +4227,7 @@ import {
   useState as useState7
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
 import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
@@ -4234,7 +4235,7 @@ import { createContext as createContext19, useEffect as useEffect6, useState as
 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 { useCallback as useCallback13 } from "react";
 import React22, {
   forwardRef as forwardRef5,
   useContext as useContext28,
@@ -4248,7 +4249,7 @@ import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef
 import React19, {
   createContext as createContext21,
   createRef as createRef2,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext20,
   useEffect as useEffect7,
   useMemo as useMemo21,
@@ -4261,16 +4262,16 @@ 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";
 import {
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useContext as useContext26,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
-import { useCallback as useCallback10, useMemo as useMemo25, useRef as useRef16 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
 import React20, {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
@@ -4298,7 +4299,7 @@ import { jsx as jsx22 } from "react/jsx-runtime";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo29,
@@ -4309,7 +4310,7 @@ import { jsx as jsx24 } from "react/jsx-runtime";
 import {
   createContext as createContext23,
   forwardRef as forwardRef9,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext31,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
@@ -4318,7 +4319,7 @@ import {
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useContext as useContext32,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
@@ -4327,16 +4328,16 @@ import {
   useState as useState16
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback18, 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 { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React30 from "react";
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
   useRef as useRef26,
@@ -4351,9 +4352,9 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 import React33 from "react";
 import React34, { createContext as createContext25 } from "react";
 import React35, { useContext as useContext35 } from "react";
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback24 } from "react";
 import {
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
@@ -4363,7 +4364,7 @@ import {
 import { jsx as jsx33 } from "react/jsx-runtime";
 import React37, {
   forwardRef as forwardRef13,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
@@ -4384,7 +4385,7 @@ import {
 import React40 from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import React42 from "react";
-import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
@@ -5564,7 +5565,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.475";
+var VERSION = "4.0.477";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5998,6 +5999,18 @@ var hiddenField = {
   default: false,
   description: "Hidden"
 };
+var showInTimelineField = {
+  type: "hidden"
+};
+var sequenceNameField = {
+  type: "hidden"
+};
+var extendSchemaWithSequenceName = (schema) => {
+  return {
+    name: sequenceNameField,
+    ...schema
+  };
+};
 var durationInFramesField = {
   type: "number",
   default: undefined,
@@ -6011,9 +6024,17 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = {
+var freezeField = {
+  type: "number",
+  default: null,
+  step: 1,
+  hiddenFromList: true
+};
+var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   from: fromField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: {
     type: "enum",
@@ -6024,12 +6045,14 @@ var sequenceSchema = {
       none: {}
     }
   }
-};
-var sequenceSchemaWithoutFrom = {
+});
+var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
-};
+});
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -6373,81 +6396,6 @@ function bezier(mX1, mY1, mX2, mY2) {
     return calcBezier(getTForX(clampedX), mY1, mY2);
   };
 }
-var clampUnit = (t) => Math.min(1, Math.max(0, t));
-
-class Easing {
-  static step0(n) {
-    return n > 0 ? 1 : 0;
-  }
-  static step1(n) {
-    return n >= 1 ? 1 : 0;
-  }
-  static linear(t) {
-    return t;
-  }
-  static ease(t) {
-    return Easing.bezier(0.42, 0, 1, 1)(t);
-  }
-  static quad(t) {
-    return t * t;
-  }
-  static cubic(t) {
-    return t * t * t;
-  }
-  static poly(n) {
-    return (t) => t ** n;
-  }
-  static sin(t) {
-    return 1 - Math.cos(t * Math.PI / 2);
-  }
-  static circle(t) {
-    const u = clampUnit(t);
-    return 1 - Math.sqrt(1 - u * u);
-  }
-  static exp(t) {
-    return 2 ** (10 * (t - 1));
-  }
-  static elastic(bounciness = 1) {
-    const p = bounciness * Math.PI;
-    return (t) => 1 - Math.cos(t * Math.PI / 2) ** 3 * Math.cos(t * p);
-  }
-  static back(s = 1.70158) {
-    return (t) => t * t * ((s + 1) * t - s);
-  }
-  static bounce(t) {
-    const u = clampUnit(t);
-    if (u < 1 / 2.75) {
-      return 7.5625 * u * u;
-    }
-    if (u < 2 / 2.75) {
-      const t2_ = u - 1.5 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.75;
-    }
-    if (u < 2.5 / 2.75) {
-      const t2_ = u - 2.25 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.9375;
-    }
-    const t2 = u - 2.625 / 2.75;
-    return 7.5625 * t2 * t2 + 0.984375;
-  }
-  static bezier(x1, y1, x2, y2) {
-    return bezier(x1, y1, x2, y2);
-  }
-  static in(easing) {
-    return easing;
-  }
-  static out(easing) {
-    return (t) => 1 - easing(1 - t);
-  }
-  static inOut(easing) {
-    return (t) => {
-      if (t < 0.5) {
-        return easing(t * 2) / 2;
-      }
-      return 1 - easing((1 - t) * 2) / 2;
-    };
-  }
-}
 var normalizeNumber = (value) => {
   return Math.round(value * 1e6) / 1e6;
 };
@@ -6950,128 +6898,478 @@ function interpolate(input, inputRange, outputRange, options) {
   checkInfiniteRange("outputRange", outputRange);
   return interpolateNumber({ input, inputRange, outputRange, options });
 }
-var NUMBER = "[-+]?\\d*\\.?\\d+";
-var PERCENTAGE = NUMBER + "%";
-function call(...args) {
-  return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
-}
-var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
-function modernColorCall(name) {
-  return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
-}
-function getMatchers() {
-  const cachedMatchers = {
-    rgb: undefined,
-    rgba: undefined,
-    hsl: undefined,
-    hsla: undefined,
-    hex3: undefined,
-    hex4: undefined,
-    hex5: undefined,
-    hex6: undefined,
-    hex8: undefined,
-    oklch: undefined,
-    oklab: undefined,
-    lab: undefined,
-    lch: undefined,
-    hwb: undefined
-  };
-  if (cachedMatchers.rgb === undefined) {
-    cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
-    cachedMatchers.rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
-    cachedMatchers.hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
-    cachedMatchers.hsla = new RegExp("hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
-    cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-    cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
-    cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
-    cachedMatchers.oklch = modernColorCall("oklch");
-    cachedMatchers.oklab = modernColorCall("oklab");
-    cachedMatchers.lab = modernColorCall("lab");
-    cachedMatchers.lch = modernColorCall("lch");
-    cachedMatchers.hwb = modernColorCall("hwb");
-  }
-  return cachedMatchers;
-}
-function hue2rgb(p, q, t) {
-  if (t < 0) {
-    t += 1;
-  }
-  if (t > 1) {
-    t -= 1;
+var validateFrame = ({
+  allowFloats,
+  durationInFrames,
+  frame
+}) => {
+  if (typeof frame === "undefined") {
+    throw new TypeError(`Argument missing for parameter "frame"`);
   }
-  if (t < 1 / 6) {
-    return p + (q - p) * 6 * t;
+  if (typeof frame !== "number") {
+    throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
   }
-  if (t < 1 / 2) {
-    return q;
+  if (!Number.isFinite(frame)) {
+    throw new RangeError(`Frame ${frame} is not finite`);
   }
-  if (t < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t) * 6;
+  if (frame % 1 !== 0 && !allowFloats) {
+    throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
   }
-  return p;
-}
-function hslToRgb(h, s, l) {
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r2 = hue2rgb(p, q, h + 1 / 3);
-  const g = hue2rgb(p, q, h);
-  const b2 = hue2rgb(p, q, h - 1 / 3);
-  return Math.round(r2 * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b2 * 255) << 8;
-}
-function parse255(str) {
-  const int = Number.parseInt(str, 10);
-  if (int < 0) {
-    return 0;
+  if (frame < 0 && frame < -durationInFrames) {
+    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
   }
-  if (int > 255) {
-    return 255;
+  if (frame > durationInFrames - 1) {
+    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
-  return int;
-}
-function parse360(str) {
-  const int = Number.parseFloat(str);
-  return (int % 360 + 360) % 360 / 360;
-}
-function parse1(str) {
-  const num = Number.parseFloat(str);
-  if (num < 0) {
-    return 0;
+};
+var validateSpringDuration = (dur) => {
+  if (typeof dur === "undefined") {
+    return;
   }
-  if (num > 1) {
-    return 255;
+  if (typeof dur !== "number") {
+    throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
   }
-  return Math.round(num * 255);
-}
-function parsePercentage(str) {
-  const int = Number.parseFloat(str);
-  if (int < 0) {
-    return 0;
+  if (Number.isNaN(dur)) {
+    throw new TypeError('A "duration" of a spring is NaN, which it must not be');
   }
-  if (int > 100) {
-    return 1;
+  if (!Number.isFinite(dur)) {
+    throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
   }
-  return int / 100;
-}
-function parseModernComponent(str, percentScale) {
-  if (str === "none")
-    return 0;
-  if (str.endsWith("%")) {
-    return Number.parseFloat(str) / 100 * percentScale;
+  if (dur <= 0) {
+    throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
   }
-  return Number.parseFloat(str);
-}
-function parseHueAngle(str) {
-  if (str === "none")
-    return 0;
-  if (str.endsWith("rad")) {
-    return Number.parseFloat(str) * 180 / Math.PI;
+};
+var defaultSpringConfig = {
+  damping: 10,
+  mass: 1,
+  stiffness: 100,
+  overshootClamping: false
+};
+var advanceCache = {};
+function advance({
+  animation,
+  now,
+  config
+}) {
+  const { toValue: toValue2, lastTimestamp, current, velocity } = animation;
+  const deltaTime = Math.min(now - lastTimestamp, 64);
+  if (config.damping <= 0) {
+    throw new Error("Spring damping must be greater than 0, otherwise the spring() animation will never end, causing an infinite loop.");
   }
-  if (str.endsWith("grad"))
-    return Number.parseFloat(str) * 0.9;
-  if (str.endsWith("turn"))
-    return Number.parseFloat(str) * 360;
-  return Number.parseFloat(str);
+  const c2 = config.damping;
+  const m = config.mass;
+  const k = config.stiffness;
+  const cacheKey = [
+    toValue2,
+    lastTimestamp,
+    current,
+    velocity,
+    c2,
+    m,
+    k,
+    now
+  ].join("-");
+  if (advanceCache[cacheKey]) {
+    return advanceCache[cacheKey];
+  }
+  const v0 = -velocity;
+  const x0 = toValue2 - current;
+  const zeta = c2 / (2 * Math.sqrt(k * m));
+  const omega0 = Math.sqrt(k / m);
+  const omega1 = omega0 * Math.sqrt(1 - zeta ** 2);
+  const t = deltaTime / 1000;
+  const sin1 = Math.sin(omega1 * t);
+  const cos1 = Math.cos(omega1 * t);
+  const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+  const underDampedFrag1 = underDampedEnvelope * (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+  const underDampedPosition = toValue2 - underDampedFrag1;
+  const underDampedVelocity = zeta * omega0 * underDampedFrag1 - underDampedEnvelope * (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+  const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+  const criticallyDampedPosition = toValue2 - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+  const criticallyDampedVelocity = criticallyDampedEnvelope * (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+  const animationNode = {
+    toValue: toValue2,
+    prevPosition: current,
+    lastTimestamp: now,
+    current: zeta < 1 ? underDampedPosition : criticallyDampedPosition,
+    velocity: zeta < 1 ? underDampedVelocity : criticallyDampedVelocity
+  };
+  advanceCache[cacheKey] = animationNode;
+  return animationNode;
+}
+var calculationCache = {};
+function springCalculation({
+  frame,
+  fps,
+  config = {}
+}) {
+  const from = 0;
+  const to = 1;
+  const cacheKey = [
+    frame,
+    fps,
+    config.damping,
+    config.mass,
+    config.overshootClamping,
+    config.stiffness
+  ].join("-");
+  if (calculationCache[cacheKey]) {
+    return calculationCache[cacheKey];
+  }
+  let animation = {
+    lastTimestamp: 0,
+    current: from,
+    toValue: to,
+    velocity: 0,
+    prevPosition: 0
+  };
+  const frameClamped = Math.max(0, frame);
+  const unevenRest = frameClamped % 1;
+  for (let f = 0;f <= Math.floor(frameClamped); f++) {
+    if (f === Math.floor(frameClamped)) {
+      f += unevenRest;
+    }
+    const time = f / fps * 1000;
+    animation = advance({
+      animation,
+      now: time,
+      config: {
+        ...defaultSpringConfig,
+        ...config
+      }
+    });
+  }
+  calculationCache[cacheKey] = animation;
+  return animation;
+}
+var cache = new Map;
+function measureSpring({
+  fps,
+  config = {},
+  threshold = 0.005
+}) {
+  if (typeof threshold !== "number") {
+    throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
+  }
+  if (threshold === 0) {
+    return Infinity;
+  }
+  if (threshold === 1) {
+    return 0;
+  }
+  if (isNaN(threshold)) {
+    throw new TypeError("Threshold is NaN");
+  }
+  if (!Number.isFinite(threshold)) {
+    throw new TypeError("Threshold is not finite");
+  }
+  if (threshold < 0) {
+    throw new TypeError("Threshold is below 0");
+  }
+  const cacheKey = [
+    fps,
+    config.damping,
+    config.mass,
+    config.overshootClamping,
+    config.stiffness,
+    threshold
+  ].join("-");
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+  validateFps(fps, "to the measureSpring() function", false);
+  let frame = 0;
+  let finishedFrame = 0;
+  const calc = () => {
+    return springCalculation({
+      fps,
+      frame,
+      config
+    });
+  };
+  let animation = calc();
+  const calcDifference = () => {
+    return Math.abs(animation.current - animation.toValue);
+  };
+  let difference = calcDifference();
+  while (difference >= threshold) {
+    frame++;
+    animation = calc();
+    difference = calcDifference();
+  }
+  finishedFrame = frame;
+  for (let i = 0;i < 20; i++) {
+    frame++;
+    animation = calc();
+    difference = calcDifference();
+    if (difference >= threshold) {
+      i = 0;
+      finishedFrame = frame + 1;
+    }
+  }
+  cache.set(cacheKey, finishedFrame);
+  return finishedFrame;
+}
+function spring({
+  frame: passedFrame,
+  fps,
+  config = {},
+  from = 0,
+  to = 1,
+  durationInFrames: passedDurationInFrames,
+  durationRestThreshold,
+  delay = 0,
+  reverse = false
+}) {
+  validateSpringDuration(passedDurationInFrames);
+  validateFrame({
+    frame: passedFrame,
+    durationInFrames: Infinity,
+    allowFloats: true
+  });
+  validateFps(fps, "to spring()", false);
+  const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== "undefined";
+  const naturalDuration = needsToCalculateNaturalDuration ? measureSpring({
+    fps,
+    config,
+    threshold: durationRestThreshold
+  }) : undefined;
+  const naturalDurationGetter = needsToCalculateNaturalDuration ? {
+    get: () => naturalDuration
+  } : {
+    get: () => {
+      throw new Error("did not calculate natural duration, this is an error with Remotion. Please report");
+    }
+  };
+  const reverseProcessed = reverse ? (passedDurationInFrames ?? naturalDurationGetter.get()) - passedFrame : passedFrame;
+  const delayProcessed = reverseProcessed + (reverse ? delay : -delay);
+  const durationProcessed = passedDurationInFrames === undefined ? delayProcessed : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
+  if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
+    return to;
+  }
+  const spr = springCalculation({
+    fps,
+    frame: durationProcessed,
+    config
+  });
+  const inner = config.overshootClamping ? to >= from ? Math.min(spr.current, to) : Math.max(spr.current, to) : spr.current;
+  const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
+  return interpolated;
+}
+var clampUnit = (t) => Math.min(1, Math.max(0, t));
+var springEasingDurationInFrames = 30;
+
+class Easing {
+  static step0(n) {
+    return n > 0 ? 1 : 0;
+  }
+  static step1(n) {
+    return n >= 1 ? 1 : 0;
+  }
+  static linear(t) {
+    return t;
+  }
+  static ease(t) {
+    return Easing.bezier(0.42, 0, 1, 1)(t);
+  }
+  static quad(t) {
+    return t * t;
+  }
+  static cubic(t) {
+    return t * t * t;
+  }
+  static poly(n) {
+    return (t) => t ** n;
+  }
+  static sin(t) {
+    return 1 - Math.cos(t * Math.PI / 2);
+  }
+  static circle(t) {
+    const u = clampUnit(t);
+    return 1 - Math.sqrt(1 - u * u);
+  }
+  static exp(t) {
+    return 2 ** (10 * (t - 1));
+  }
+  static elastic(bounciness = 1) {
+    const p = bounciness * Math.PI;
+    return (t) => 1 - Math.cos(t * Math.PI / 2) ** 3 * Math.cos(t * p);
+  }
+  static back(s = 1.70158) {
+    return (t) => t * t * ((s + 1) * t - s);
+  }
+  static spring(config = {}) {
+    return (t) => {
+      if (t <= 0) {
+        return 0;
+      }
+      if (t >= 1) {
+        return 1;
+      }
+      return spring({
+        fps: springEasingDurationInFrames,
+        frame: t * springEasingDurationInFrames,
+        config,
+        durationInFrames: springEasingDurationInFrames
+      });
+    };
+  }
+  static bounce(t) {
+    const u = clampUnit(t);
+    if (u < 1 / 2.75) {
+      return 7.5625 * u * u;
+    }
+    if (u < 2 / 2.75) {
+      const t2_ = u - 1.5 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.75;
+    }
+    if (u < 2.5 / 2.75) {
+      const t2_ = u - 2.25 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.9375;
+    }
+    const t2 = u - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
+  }
+  static bezier(x1, y1, x2, y2) {
+    return bezier(x1, y1, x2, y2);
+  }
+  static in(easing) {
+    return easing;
+  }
+  static out(easing) {
+    return (t) => 1 - easing(1 - t);
+  }
+  static inOut(easing) {
+    return (t) => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
+      }
+      return 1 - easing((1 - t) * 2) / 2;
+    };
+  }
+}
+var NUMBER = "[-+]?\\d*\\.?\\d+";
+var PERCENTAGE = NUMBER + "%";
+function call(...args) {
+  return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
+}
+var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
+function modernColorCall(name) {
+  return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
+}
+function getMatchers() {
+  const cachedMatchers = {
+    rgb: undefined,
+    rgba: undefined,
+    hsl: undefined,
+    hsla: undefined,
+    hex3: undefined,
+    hex4: undefined,
+    hex5: undefined,
+    hex6: undefined,
+    hex8: undefined,
+    oklch: undefined,
+    oklab: undefined,
+    lab: undefined,
+    lch: undefined,
+    hwb: undefined
+  };
+  if (cachedMatchers.rgb === undefined) {
+    cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
+    cachedMatchers.rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
+    cachedMatchers.hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
+    cachedMatchers.hsla = new RegExp("hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
+    cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
+    cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+    cachedMatchers.oklch = modernColorCall("oklch");
+    cachedMatchers.oklab = modernColorCall("oklab");
+    cachedMatchers.lab = modernColorCall("lab");
+    cachedMatchers.lch = modernColorCall("lch");
+    cachedMatchers.hwb = modernColorCall("hwb");
+  }
+  return cachedMatchers;
+}
+function hue2rgb(p, q, t) {
+  if (t < 0) {
+    t += 1;
+  }
+  if (t > 1) {
+    t -= 1;
+  }
+  if (t < 1 / 6) {
+    return p + (q - p) * 6 * t;
+  }
+  if (t < 1 / 2) {
+    return q;
+  }
+  if (t < 2 / 3) {
+    return p + (q - p) * (2 / 3 - t) * 6;
+  }
+  return p;
+}
+function hslToRgb(h, s, l) {
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const r2 = hue2rgb(p, q, h + 1 / 3);
+  const g = hue2rgb(p, q, h);
+  const b2 = hue2rgb(p, q, h - 1 / 3);
+  return Math.round(r2 * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b2 * 255) << 8;
+}
+function parse255(str) {
+  const int = Number.parseInt(str, 10);
+  if (int < 0) {
+    return 0;
+  }
+  if (int > 255) {
+    return 255;
+  }
+  return int;
+}
+function parse360(str) {
+  const int = Number.parseFloat(str);
+  return (int % 360 + 360) % 360 / 360;
+}
+function parse1(str) {
+  const num = Number.parseFloat(str);
+  if (num < 0) {
+    return 0;
+  }
+  if (num > 1) {
+    return 255;
+  }
+  return Math.round(num * 255);
+}
+function parsePercentage(str) {
+  const int = Number.parseFloat(str);
+  if (int < 0) {
+    return 0;
+  }
+  if (int > 100) {
+    return 1;
+  }
+  return int / 100;
+}
+function parseModernComponent(str, percentScale) {
+  if (str === "none")
+    return 0;
+  if (str.endsWith("%")) {
+    return Number.parseFloat(str) / 100 * percentScale;
+  }
+  return Number.parseFloat(str);
+}
+function parseHueAngle(str) {
+  if (str === "none")
+    return 0;
+  if (str.endsWith("rad")) {
+    return Number.parseFloat(str) * 180 / Math.PI;
+  }
+  if (str.endsWith("grad"))
+    return Number.parseFloat(str) * 0.9;
+  if (str.endsWith("turn"))
+    return Number.parseFloat(str) * 360;
+  return Number.parseFloat(str);
 }
 function parseModernAlpha(str) {
   if (str === undefined || str === "none")
@@ -7943,10 +8241,12 @@ var mergeValues = ({
 var stackToOverrideMap = {};
 var wrapInSchema = ({
   Component,
+  componentIdentity,
   schema,
   supportsEffects
 }) => {
-  const flatSchema = getFlatSchemaWithAllKeys(schema);
+  const schemaWithSequenceName = extendSchemaWithSequenceName(schema);
+  const flatSchema = getFlatSchemaWithAllKeys(schemaWithSequenceName);
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
@@ -7985,15 +8285,16 @@ var wrapInSchema = ({
     const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo13(() => {
       return {
-        schema,
+        schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
-        supportsEffects
+        supportsEffects,
+        componentIdentity
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
       return computeEffectiveSchemaValuesDotNotation({
-        schema,
+        schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
         propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, nodePath),
@@ -8006,7 +8307,7 @@ var wrapInSchema = ({
       propStatuses,
       frame
     ]);
-    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
@@ -8025,6 +8326,7 @@ var wrapInSchema = ({
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
+  freeze,
   durationInFrames = Infinity,
   children,
   name,
@@ -8040,7 +8342,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: refForOutline,
+  _remotionInternalRefForOutline: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -8048,6 +8350,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
+  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + from;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -8067,11 +8370,24 @@ var RegularSequenceRefForwardingFunction = ({
   if (!Number.isFinite(from)) {
     throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
   }
+  if (typeof freeze !== "undefined" && freeze !== null) {
+    if (typeof freeze !== "number") {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
+    }
+    if (Number.isNaN(freeze)) {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be a real number, but it is NaN.`);
+    }
+    if (!Number.isFinite(freeze)) {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be finite, but it is ${freeze}.`);
+    }
+  }
   const absoluteFrame = useTimelinePosition();
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const wrapperRefForOutline = useRef6(null);
+  const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
   const premounting = useMemo14(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -8085,6 +8401,7 @@ var RegularSequenceRefForwardingFunction = ({
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
   const contextValue = useMemo14(() => {
     return {
+      absoluteFrom,
       cumulatedFrom,
       relativeFrom: from,
       cumulatedNegativeFrom,
@@ -8100,6 +8417,7 @@ var RegularSequenceRefForwardingFunction = ({
     };
   }, [
     cumulatedFrom,
+    absoluteFrom,
     from,
     actualDurationInFrames,
     parentSequence,
@@ -8115,7 +8433,7 @@ var RegularSequenceRefForwardingFunction = ({
   const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
-  const resolvedDocumentationLink = documentationLink ?? (name === undefined ? "https://www.remotion.dev/docs/sequence" : null);
+  const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
   const isInsideSeries = useContext17(IsInsideSeriesContext);
   const inheritedStack = other?.stack ?? null;
@@ -8228,7 +8546,19 @@ var RegularSequenceRefForwardingFunction = ({
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
+  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx12(Freeze, {
+    frame: freeze,
+    children: content
+  });
   const styleIfThere = other.layout === "none" ? undefined : other.style;
+  const sequenceRef = useCallback6((node) => {
+    wrapperRefForOutline.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   const defaultStyle = useMemo14(() => {
     return {
       flexDirection: undefined,
@@ -8245,11 +8575,11 @@ var RegularSequenceRefForwardingFunction = ({
   }
   return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
-      ref,
+    children: frozenContent === null ? null : other.layout === "none" ? frozenContent : /* @__PURE__ */ jsx12(AbsoluteFill, {
+      ref: sequenceRef,
       style: defaultStyle,
       className: other.className,
-      children: content
+      children: frozenContent
     })
   });
 };
@@ -8329,11 +8659,13 @@ var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
 var Sequence = wrapInSchema({
   Component: SequenceInner,
+  componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
 var SequenceWithoutFrom = wrapInSchema({
   Component: SequenceInner,
+  componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
 });
@@ -8651,7 +8983,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     }
     return document.createElement("canvas");
   }, []);
-  const draw = useCallback6((imageData) => {
+  const draw = useCallback7((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -8742,10 +9074,10 @@ var decodeImage = async ({
   if (!selectedTrack) {
     throw new Error("No selected track");
   }
-  const cache = [];
+  const cache2 = [];
   let durationFound = null;
   const getFrameByIndex = async (frameIndex) => {
-    const foundInCache = cache.find((c2) => c2.frameIndex === frameIndex);
+    const foundInCache = cache2.find((c2) => c2.frameIndex === frameIndex);
     if (foundInCache && foundInCache.frame) {
       return foundInCache;
     }
@@ -8756,7 +9088,7 @@ var decodeImage = async ({
     if (foundInCache) {
       foundInCache.frame = frame.image;
     } else {
-      cache.push({
+      cache2.push({
         frame: frame.image,
         frameIndex,
         timeInSeconds: frame.image.timestamp / 1e6
@@ -8769,7 +9101,7 @@ var decodeImage = async ({
     };
   };
   const clearCache = (closeToTimeInSec) => {
-    const itemsInCache = cache.filter((c2) => c2.frame);
+    const itemsInCache = cache2.filter((c2) => c2.frame);
     const sortByClosestToCurrentTime = itemsInCache.sort((a2, b2) => {
       const aDiff = Math.abs(a2.timeInSeconds - closeToTimeInSec);
       const bDiff = Math.abs(b2.timeInSeconds - closeToTimeInSec);
@@ -8792,7 +9124,7 @@ var decodeImage = async ({
       loopBehavior,
       timeInSec
     });
-    const framesBefore = cache.filter((c2) => c2.timeInSeconds <= actualTimeInSec);
+    const framesBefore = cache2.filter((c2) => c2.timeInSeconds <= actualTimeInSec);
     const biggestIndex = framesBefore.map((c2) => c2.frameIndex).reduce((a2, b2) => Math.max(a2, b2), 0);
     let i = biggestIndex;
     while (true) {
@@ -8835,7 +9167,7 @@ var decodeImage = async ({
       timeInSec
     });
     await ensureFrameBeforeAndAfter({ timeInSec: actualTimeInSec, loopBehavior });
-    const itemsInCache = cache.filter((c2) => c2.frame);
+    const itemsInCache = cache2.filter((c2) => c2.frame);
     const closest = itemsInCache.reduce((a2, b2) => {
       const aDiff = Math.abs(a2.timeInSeconds - actualTimeInSec);
       const bDiff = Math.abs(b2.timeInSeconds - actualTimeInSec);
@@ -8872,6 +9204,7 @@ var resolveAnimatedImageSource = (src) => {
 var animatedImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   playbackRate: {
     type: "number",
     min: 0,
@@ -9071,6 +9404,7 @@ var AnimatedImageInner = ({
 };
 var AnimatedImage = wrapInSchema({
   Component: AnimatedImageInner,
+  componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
   supportsEffects: true
 });
@@ -9117,7 +9451,7 @@ var RenderAssetManager = createContext17({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState7([]);
   const renderAssetsRef = useRef10([]);
-  const registerRenderAsset = useCallback7((renderAsset) => {
+  const registerRenderAsset = useCallback8((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -9134,7 +9468,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback7((id) => {
+  const unregisterRenderAsset = useCallback8((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -9296,7 +9630,7 @@ var Loop = ({
       durationInFrames,
       from,
       name: name ?? "<Loop>",
-      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/loop" : undefined,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop",
       _remotionInternalLoopDisplay: loopDisplay,
       layout: props.layout,
       style,
@@ -9939,7 +10273,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   }, []);
   const prevEndTimes = useRef12({ scheduledEndTime: null, mediaEndTime: null });
   const nodesToResume = useRef12(new Map);
-  const unscheduleAudioNode = useCallback8((node) => {
+  const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
   const scheduleAudioNode = useMemo21(() => {
@@ -9993,7 +10327,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
       };
     };
   }, [ctxAndGain, logLevel]);
-  const resume = useCallback8(() => {
+  const resume = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -10020,10 +10354,10 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     });
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
-  const getIsResumingAudioContext = useCallback8(() => {
+  const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current;
   }, []);
-  const suspend = useCallback8(() => {
+  const suspend = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -10097,7 +10431,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     };
   }, [refs]);
   const takenAudios = useRef12(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback8(() => {
+  const rerenderAudios = useCallback9(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a2) => a2.id === id);
       const { current } = ref;
@@ -10118,7 +10452,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     });
   }, [refs]);
-  const registerAudio = useCallback8((options) => {
+  const registerAudio = useCallback9((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a2) => a2.audioId === audioId);
     if (found) {
@@ -10147,7 +10481,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback8((id) => {
+  const unregisterAudio = useCallback9((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r2) => r2.id === id);
     if (index === -1) {
@@ -10158,7 +10492,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     audios.current = audios.current?.filter((a2) => a2.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback8(({
+  const updateAudio = useCallback9(({
     aud,
     audioId,
     id,
@@ -10192,7 +10526,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback8(() => {
+  const playAllAudios = useCallback9(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a2) => a2.el === ref.ref);
       if (audio?.premounting) {
@@ -10740,7 +11074,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef15(false);
-  const addBlock = useCallback9((block) => {
+  const addBlock = useCallback10((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -10766,7 +11100,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback9((callback) => {
+  const listenForBuffering = useCallback10((callback) => {
     setOnBufferingCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -10774,7 +11108,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback9((callback) => {
+  const listenForResume = useCallback10((callback) => {
     setOnResumeCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -10888,7 +11222,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback10((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback11((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -11278,7 +11612,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef18({});
-  const onVariableFpsVideoDetected = useCallback11(() => {
+  const onVariableFpsVideoDetected = useCallback12(() => {
     if (!src) {
       return;
     }
@@ -11669,7 +12003,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
-  const getStack = useCallback12(() => {
+  const getStack = useCallback13(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -11685,7 +12019,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
     loopDisplay: undefined,
-    documentationLink: name === undefined ? "https://www.remotion.dev/docs/html5-audio" : null,
+    documentationLink: "https://www.remotion.dev/docs/html5-audio",
     refForOutline: null
   });
   useMediaPlayback({
@@ -11915,7 +12249,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback13((e) => {
+  const onError = useCallback14((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -11929,7 +12263,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback13((src, durationInSeconds) => {
+  const onDuration = useCallback14((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -12021,6 +12355,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
 var solidSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   color: {
     type: "color",
     default: "transparent",
@@ -12075,7 +12410,7 @@ var SolidInner = ({
     return canvas;
   }, []);
   const chainState = useEffectChainState();
-  const canvasRef = useCallback14((canvas) => {
+  const canvasRef = useCallback15((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
       reference(canvas);
@@ -12159,6 +12494,7 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  freeze,
   hidden,
   showInTimeline,
   pixelDensity,
@@ -12172,6 +12508,7 @@ var SolidOuter = forwardRef8(({
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -12179,7 +12516,7 @@ var SolidOuter = forwardRef8(({
     durationInFrames,
     name: name ?? "<Solid>",
     _remotionInternalRefForOutline: actualRef,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid",
     ...props2,
     children: /* @__PURE__ */ jsx24(SolidInner, {
       reference: actualRef,
@@ -12196,6 +12533,7 @@ var SolidOuter = forwardRef8(({
 });
 var Solid = wrapInSchema({
   Component: SolidOuter,
+  componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
   supportsEffects: true
 });
@@ -12285,7 +12623,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const offscreenRef = useRef22(null);
   const divRef = useRef22(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
-  const setLayoutCanvasRef = useCallback15((node) => {
+  const setLayoutCanvasRef = useCallback16((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -12307,7 +12645,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef22(false);
   const onInitCleanupRef = useRef22(null);
   const unmountedRef = useRef22(false);
-  const onPaintCb = useCallback15(async () => {
+  const onPaintCb = useCallback16(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
@@ -12480,7 +12818,7 @@ var HtmlInCanvasInner = forwardRef9(({
   const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef22(null);
-  const setCanvasRef = useCallback15((node) => {
+  const setCanvasRef = useCallback16((node) => {
     actualRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -12491,7 +12829,7 @@ var HtmlInCanvasInner = forwardRef9(({
   return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalRefForOutline: actualRef,
@@ -12515,11 +12853,13 @@ HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
 var HtmlInCanvasWrapped = wrapInSchema({
   Component: HtmlInCanvasInner,
+  componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
   supportsEffects: true
 });
@@ -12537,6 +12877,7 @@ function truncateSrcForLabel(src) {
 var canvasImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   fit: {
     type: "enum",
     default: "fill",
@@ -12642,7 +12983,7 @@ var CanvasImageContent = forwardRef10(({
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback16((canvas) => {
+  const canvasRef = useCallback17((canvas) => {
     setOutputCanvas(canvas);
     if (refForOutline) {
       refForOutline.current = canvas;
@@ -12789,6 +13130,7 @@ var CanvasImageInner = forwardRef10(({
   delayRenderTimeoutInMilliseconds,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -12810,6 +13152,7 @@ var CanvasImageInner = forwardRef10(({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     hidden,
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
@@ -12842,6 +13185,7 @@ var CanvasImageInner = forwardRef10(({
 });
 var CanvasImage = wrapInSchema({
   Component: CanvasImageInner,
+  componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
   supportsEffects: true
 });
@@ -12859,11 +13203,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback17((e) => {
+  const didLoad = useCallback18((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback17((e) => {
+  const didGetError = useCallback18((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -12905,7 +13249,7 @@ var ImgContent = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  const imageCallbackRef = useCallback18((img) => {
+  const imageCallbackRef = useCallback19((img) => {
     imageRef.current = img;
     refForOutline.current = img;
     if (typeof ref === "function") {
@@ -12915,7 +13259,7 @@ var ImgContent = ({
     }
   }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback18((timeout) => {
+  const retryIn = useCallback19((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -12933,7 +13277,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback18((e) => {
+  const didGetError = useCallback19((e) => {
     if (!errors.current) {
       return;
     }
@@ -13043,6 +13387,7 @@ var NativeImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   _remotionInternalRefForOutline: refForOutline,
   ...props2
@@ -13054,8 +13399,9 @@ var NativeImgInner = ({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _remotionInternalIsMedia: { type: "image", src },
     name: name ?? "<Img>",
     _experimentalControls: controls,
@@ -13073,6 +13419,7 @@ var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -13128,6 +13475,7 @@ var ImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   width,
   height,
@@ -13152,6 +13500,7 @@ var ImgInner = ({
       src,
       from,
       durationInFrames,
+      freeze,
       _experimentalControls: controls,
       width,
       height,
@@ -13193,11 +13542,12 @@ var ImgInner = ({
     delayRenderTimeoutInMilliseconds,
     from,
     durationInFrames,
+    freeze,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
     stack,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _experimentalControls: controls,
     _remotionInternalRefForOutline: refForOutline,
     ...canvasProps
@@ -13205,6 +13555,7 @@ var ImgInner = ({
 };
 var Img = wrapInSchema({
   Component: ImgInner,
+  componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
   supportsEffects: true
 });
@@ -13212,6 +13563,7 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -13227,6 +13579,7 @@ var makeInteractiveElement = (tag, displayName) => {
     const {
       durationInFrames,
       from,
+      freeze,
       hidden,
       name,
       showInTimeline,
@@ -13235,7 +13588,7 @@ var makeInteractiveElement = (tag, displayName) => {
       ...props2
     } = propsWithControls;
     const refForOutline = useRef25(null);
-    const callbackRef = useCallback19((element) => {
+    const callbackRef = useCallback20((element) => {
       refForOutline.current = element;
       setRef(ref, element);
     }, [ref]);
@@ -13243,11 +13596,13 @@ var makeInteractiveElement = (tag, displayName) => {
       layout: "none",
       from: from ?? 0,
       durationInFrames: durationInFrames ?? Infinity,
+      freeze,
       hidden,
       name: name ?? displayName,
       showInTimeline: showInTimeline ?? true,
       _experimentalControls,
       _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       _remotionInternalRefForOutline: refForOutline,
       children: React29.createElement(tag, {
         ...props2,
@@ -13258,6 +13613,7 @@ var makeInteractiveElement = (tag, displayName) => {
   Inner.displayName = displayName;
   const Wrapped = wrapInSchema({
     Component: Inner,
+    componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
     supportsEffects: false
   });
@@ -13314,14 +13670,14 @@ var CompositionManagerProvider = ({
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
   const currentcompositionsRef = useRef26(compositions);
-  const updateCompositions = useCallback20((updateComps) => {
+  const updateCompositions = useCallback21((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback20((comp) => {
+  const registerComposition = useCallback21((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -13329,12 +13685,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback20((id) => {
+  const unregisterComposition = useCallback21((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback20((name, parent, nonce, stack) => {
+  const registerFolder = useCallback21((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -13347,7 +13703,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback20((name, parent) => {
+  const unregisterFolder = useCallback21((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -13986,7 +14342,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback21(() => {
+  const onErr = useCallback22(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -13996,7 +14352,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback21((img) => {
+  const onImageFrame = useCallback22((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -14129,7 +14485,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback22(() => {
+  const getStack = useCallback23(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -14145,7 +14501,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
     loopDisplay: undefined,
-    documentationLink: name === undefined ? onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video" : null,
+    documentationLink: onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video",
     refForOutline: videoRef
   });
   useMediaPlayback({
@@ -14276,6 +14632,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx34("video", {
+    ...nativeProps,
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -14284,7 +14641,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     style: actualStyle,
     disableRemotePlayback: true,
     crossOrigin: crossOriginValue,
-    ...nativeProps
+    controls: false
   });
 };
 var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
@@ -14304,7 +14661,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback23(() => {
+  const onDuration = useCallback24(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -14672,42 +15029,19 @@ var Internals = {
   computeEffectiveSchemaValuesDotNotation,
   interpolateKeyframedStatus,
   makeStaticDragOverride,
-  makeKeyframedDragOverride,
-  resolveDragOverrideValue,
-  getStaticDragOverrideValue,
-  OverrideIdsToNodePathsGettersContext,
-  OverrideIdsToNodePathsSettersContext,
-  findPropsToDelete,
-  makeSequencePropsSubscriptionKey,
-  getPropStatusesCtx,
-  getEffectPropStatusesCtx,
-  hiddenField,
-  durationInFramesField,
-  fromField
-};
-var validateFrame = ({
-  allowFloats,
-  durationInFrames,
-  frame
-}) => {
-  if (typeof frame === "undefined") {
-    throw new TypeError(`Argument missing for parameter "frame"`);
-  }
-  if (typeof frame !== "number") {
-    throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
-  }
-  if (!Number.isFinite(frame)) {
-    throw new RangeError(`Frame ${frame} is not finite`);
-  }
-  if (frame % 1 !== 0 && !allowFloats) {
-    throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
-  }
-  if (frame < 0 && frame < -durationInFrames) {
-    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
-  }
-  if (frame > durationInFrames - 1) {
-    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
-  }
+  makeKeyframedDragOverride,
+  resolveDragOverrideValue,
+  getStaticDragOverrideValue,
+  OverrideIdsToNodePathsGettersContext,
+  OverrideIdsToNodePathsSettersContext,
+  findPropsToDelete,
+  makeSequencePropsSubscriptionKey,
+  getPropStatusesCtx,
+  getEffectPropStatusesCtx,
+  hiddenField,
+  durationInFramesField,
+  freezeField,
+  fromField
 };
 var flattenChildren = (children) => {
   const childrenArray = React40.Children.toArray(children);
@@ -14783,255 +15117,22 @@ var SeriesInner = (props2) => {
   return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
     children: /* @__PURE__ */ jsx37(Sequence, {
       layout: "none",
-      name: "<Series>",
-      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
-      ...props2,
-      children: childrenValue
-    })
-  });
-};
-var Series = Object.assign(wrapInSchema({
-  Component: SeriesInner,
-  schema: sequenceSchemaDefaultLayoutNone,
-  supportsEffects: false
-}), {
-  Sequence: SeriesSequence
-});
-addSequenceStackTraces(Series);
-var validateSpringDuration = (dur) => {
-  if (typeof dur === "undefined") {
-    return;
-  }
-  if (typeof dur !== "number") {
-    throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
-  }
-  if (Number.isNaN(dur)) {
-    throw new TypeError('A "duration" of a spring is NaN, which it must not be');
-  }
-  if (!Number.isFinite(dur)) {
-    throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
-  }
-  if (dur <= 0) {
-    throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
-  }
-};
-var defaultSpringConfig = {
-  damping: 10,
-  mass: 1,
-  stiffness: 100,
-  overshootClamping: false
-};
-var advanceCache = {};
-function advance({
-  animation,
-  now,
-  config
-}) {
-  const { toValue: toValue2, lastTimestamp, current, velocity } = animation;
-  const deltaTime = Math.min(now - lastTimestamp, 64);
-  if (config.damping <= 0) {
-    throw new Error("Spring damping must be greater than 0, otherwise the spring() animation will never end, causing an infinite loop.");
-  }
-  const c2 = config.damping;
-  const m = config.mass;
-  const k = config.stiffness;
-  const cacheKey = [
-    toValue2,
-    lastTimestamp,
-    current,
-    velocity,
-    c2,
-    m,
-    k,
-    now
-  ].join("-");
-  if (advanceCache[cacheKey]) {
-    return advanceCache[cacheKey];
-  }
-  const v0 = -velocity;
-  const x0 = toValue2 - current;
-  const zeta = c2 / (2 * Math.sqrt(k * m));
-  const omega0 = Math.sqrt(k / m);
-  const omega1 = omega0 * Math.sqrt(1 - zeta ** 2);
-  const t = deltaTime / 1000;
-  const sin1 = Math.sin(omega1 * t);
-  const cos1 = Math.cos(omega1 * t);
-  const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
-  const underDampedFrag1 = underDampedEnvelope * (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
-  const underDampedPosition = toValue2 - underDampedFrag1;
-  const underDampedVelocity = zeta * omega0 * underDampedFrag1 - underDampedEnvelope * (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
-  const criticallyDampedEnvelope = Math.exp(-omega0 * t);
-  const criticallyDampedPosition = toValue2 - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
-  const criticallyDampedVelocity = criticallyDampedEnvelope * (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
-  const animationNode = {
-    toValue: toValue2,
-    prevPosition: current,
-    lastTimestamp: now,
-    current: zeta < 1 ? underDampedPosition : criticallyDampedPosition,
-    velocity: zeta < 1 ? underDampedVelocity : criticallyDampedVelocity
-  };
-  advanceCache[cacheKey] = animationNode;
-  return animationNode;
-}
-var calculationCache = {};
-function springCalculation({
-  frame,
-  fps,
-  config = {}
-}) {
-  const from = 0;
-  const to = 1;
-  const cacheKey = [
-    frame,
-    fps,
-    config.damping,
-    config.mass,
-    config.overshootClamping,
-    config.stiffness
-  ].join("-");
-  if (calculationCache[cacheKey]) {
-    return calculationCache[cacheKey];
-  }
-  let animation = {
-    lastTimestamp: 0,
-    current: from,
-    toValue: to,
-    velocity: 0,
-    prevPosition: 0
-  };
-  const frameClamped = Math.max(0, frame);
-  const unevenRest = frameClamped % 1;
-  for (let f = 0;f <= Math.floor(frameClamped); f++) {
-    if (f === Math.floor(frameClamped)) {
-      f += unevenRest;
-    }
-    const time = f / fps * 1000;
-    animation = advance({
-      animation,
-      now: time,
-      config: {
-        ...defaultSpringConfig,
-        ...config
-      }
-    });
-  }
-  calculationCache[cacheKey] = animation;
-  return animation;
-}
-var cache = new Map;
-function measureSpring({
-  fps,
-  config = {},
-  threshold = 0.005
-}) {
-  if (typeof threshold !== "number") {
-    throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
-  }
-  if (threshold === 0) {
-    return Infinity;
-  }
-  if (threshold === 1) {
-    return 0;
-  }
-  if (isNaN(threshold)) {
-    throw new TypeError("Threshold is NaN");
-  }
-  if (!Number.isFinite(threshold)) {
-    throw new TypeError("Threshold is not finite");
-  }
-  if (threshold < 0) {
-    throw new TypeError("Threshold is below 0");
-  }
-  const cacheKey = [
-    fps,
-    config.damping,
-    config.mass,
-    config.overshootClamping,
-    config.stiffness,
-    threshold
-  ].join("-");
-  if (cache.has(cacheKey)) {
-    return cache.get(cacheKey);
-  }
-  validateFps(fps, "to the measureSpring() function", false);
-  let frame = 0;
-  let finishedFrame = 0;
-  const calc = () => {
-    return springCalculation({
-      fps,
-      frame,
-      config
-    });
-  };
-  let animation = calc();
-  const calcDifference = () => {
-    return Math.abs(animation.current - animation.toValue);
-  };
-  let difference = calcDifference();
-  while (difference >= threshold) {
-    frame++;
-    animation = calc();
-    difference = calcDifference();
-  }
-  finishedFrame = frame;
-  for (let i = 0;i < 20; i++) {
-    frame++;
-    animation = calc();
-    difference = calcDifference();
-    if (difference >= threshold) {
-      i = 0;
-      finishedFrame = frame + 1;
-    }
-  }
-  cache.set(cacheKey, finishedFrame);
-  return finishedFrame;
-}
-function spring({
-  frame: passedFrame,
-  fps,
-  config = {},
-  from = 0,
-  to = 1,
-  durationInFrames: passedDurationInFrames,
-  durationRestThreshold,
-  delay = 0,
-  reverse = false
-}) {
-  validateSpringDuration(passedDurationInFrames);
-  validateFrame({
-    frame: passedFrame,
-    durationInFrames: Infinity,
-    allowFloats: true
-  });
-  validateFps(fps, "to spring()", false);
-  const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== "undefined";
-  const naturalDuration = needsToCalculateNaturalDuration ? measureSpring({
-    fps,
-    config,
-    threshold: durationRestThreshold
-  }) : undefined;
-  const naturalDurationGetter = needsToCalculateNaturalDuration ? {
-    get: () => naturalDuration
-  } : {
-    get: () => {
-      throw new Error("did not calculate natural duration, this is an error with Remotion. Please report");
-    }
-  };
-  const reverseProcessed = reverse ? (passedDurationInFrames ?? naturalDurationGetter.get()) - passedFrame : passedFrame;
-  const delayProcessed = reverseProcessed + (reverse ? delay : -delay);
-  const durationProcessed = passedDurationInFrames === undefined ? delayProcessed : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
-  if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
-    return to;
-  }
-  const spr = springCalculation({
-    fps,
-    frame: durationProcessed,
-    config
+      name: "<Series>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
+      ...props2,
+      children: childrenValue
+    })
   });
-  const inner = config.overshootClamping ? to >= from ? Math.min(spr.current, to) : Math.max(spr.current, to) : spr.current;
-  const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
-  return interpolated;
-}
+};
+var Series = Object.assign(wrapInSchema({
+  Component: SeriesInner,
+  componentIdentity: "dev.remotion.remotion.Series",
+  schema: sequenceSchemaDefaultLayoutNone,
+  supportsEffects: false
+}), {
+  Sequence: SeriesSequence
+});
+addSequenceStackTraces(Series);
 var problematicCharacters = {
   "%3A": ":",
   "%2F": "/",
@@ -15490,7 +15591,7 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback24((src, durationInSeconds) => {
+  const onDuration = useCallback25((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
@@ -15600,7 +15701,7 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback25, useMemo as useMemo40, useRef as useRef29 } from "react";
+import React, { useCallback as useCallback26, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -15612,6 +15713,7 @@ import { jsx as jsx72 } from "react/jsx-runtime";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var unitDir = (from, to) => {
   const dx = to[0] - from[0];
   const dy = to[1] - from[1];
@@ -15770,6 +15872,7 @@ var RenderSvg = ({
   pixelDensity,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -15790,10 +15893,10 @@ var RenderSvg = ({
     };
   }, [pathStyle]);
   const outlineRef = useRef29(null);
-  const setSvgRef = useCallback25((node) => {
+  const setSvgRef = useCallback26((node) => {
     outlineRef.current = node;
   }, []);
-  const setCanvasRef = useCallback25((canvas) => {
+  const setCanvasRef = useCallback26((canvas) => {
     outlineRef.current = canvas;
   }, []);
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
@@ -15878,6 +15981,7 @@ var RenderSvg = ({
   return /* @__PURE__ */ jsx40(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -15928,56 +16032,477 @@ var colorField = ({
     description
   };
 };
-var enumField = ({
-  defaultValue,
-  description,
-  variants
+var enumField = ({
+  defaultValue,
+  description,
+  variants
+}) => {
+  return {
+    type: "enum",
+    default: defaultValue,
+    description,
+    variants: Object.fromEntries(variants.map((variant) => [variant, {}]))
+  };
+};
+var makeShapeSchema = (shapeFields) => {
+  return {
+    from: Internals.sequenceSchema.from,
+    freeze: Internals.sequenceSchema.freeze,
+    durationInFrames: Internals.sequenceSchema.durationInFrames,
+    ...shapeFields,
+    fill: colorField({
+      defaultValue: "#0b84ff",
+      description: "Fill"
+    }),
+    ...Internals.sequenceVisualStyleSchema,
+    hidden: Internals.sequenceSchema.hidden
+  };
+};
+var arrowSchema = makeShapeSchema({
+  length: numberField({
+    defaultValue: 300,
+    description: "Length",
+    min: 0
+  }),
+  headWidth: numberField({
+    defaultValue: 185,
+    description: "Head Width",
+    min: 0
+  }),
+  headLength: numberField({
+    defaultValue: 120,
+    description: "Head Length",
+    min: 0
+  }),
+  shaftWidth: numberField({
+    defaultValue: 80,
+    description: "Shaft Width",
+    min: 0
+  }),
+  direction: enumField({
+    defaultValue: "right",
+    description: "Direction",
+    variants: ["right", "left", "up", "down"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var ArrowInner = ({
+  length: length2,
+  headWidth,
+  headLength,
+  shaftWidth,
+  direction,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx210(RenderSvg, {
+    defaultName: "<Arrow>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/arrow",
+    ...makeArrow({
+      length: length2,
+      headWidth,
+      headLength,
+      shaftWidth,
+      direction,
+      cornerRadius
+    }),
+    ...props
+  });
+};
+var Arrow = Internals.wrapInSchema({
+  Component: ArrowInner,
+  componentIdentity: "dev.remotion.shapes.Arrow",
+  schema: arrowSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Arrow);
+var shortenVector = (vector, radius) => {
+  const [x, y] = vector;
+  const currentLength = Math.sqrt(x * x + y * y);
+  const scalingFactor = (currentLength - radius) / currentLength;
+  return [x * scalingFactor, y * scalingFactor];
+};
+var scaleVectorToLength = (vector, length2) => {
+  const [x, y] = vector;
+  const currentLength = Math.sqrt(x * x + y * y);
+  const scalingFactor = length2 / currentLength;
+  return [x * scalingFactor, y * scalingFactor];
+};
+var joinPoints = (points, {
+  edgeRoundness,
+  cornerRadius,
+  roundCornerStrategy
+}) => {
+  return points.map(([x, y], i) => {
+    const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
+    const prevPoint = points[prevPointIndex];
+    const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
+    const nextPoint = points[nextPointIndex];
+    const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
+    const prevPointMiddleOfLine = [
+      (x + prevPoint[0]) / 2,
+      (y + prevPoint[1]) / 2
+    ];
+    const prevVector = [x - prevPoint[0], y - prevPoint[1]];
+    const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
+    if (i === 0) {
+      if (edgeRoundness !== null) {
+        return [
+          {
+            type: "M",
+            x: middleOfLine[0],
+            y: middleOfLine[1]
+          }
+        ];
+      }
+      if (cornerRadius !== 0) {
+        const computeRadius = shortenVector(nextVector, cornerRadius);
+        return [
+          {
+            type: "M",
+            x: computeRadius[0] + x,
+            y: computeRadius[1] + y
+          }
+        ];
+      }
+      return [
+        {
+          type: "M",
+          x,
+          y
+        }
+      ];
+    }
+    if (cornerRadius && edgeRoundness !== null) {
+      throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
+    }
+    if (edgeRoundness === null) {
+      if (cornerRadius === 0) {
+        return [
+          {
+            type: "L",
+            x,
+            y
+          }
+        ];
+      }
+      const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
+      const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
+      const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
+      const firstDraw = [
+        prevPoint[0] + prevVectorMinusRadius[0],
+        prevPoint[1] + prevVectorMinusRadius[1]
+      ];
+      return [
+        {
+          type: "L",
+          x: firstDraw[0],
+          y: firstDraw[1]
+        },
+        roundCornerStrategy === "arc" ? {
+          type: "a",
+          rx: cornerRadius,
+          ry: cornerRadius,
+          xAxisRotation: 0,
+          dx: prevVectorLength[0] + nextVectorMinusRadius[0],
+          dy: prevVectorLength[1] + nextVectorMinusRadius[1],
+          largeArcFlag: false,
+          sweepFlag: true
+        } : {
+          type: "C",
+          x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
+          y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
+          cp1x: x,
+          cp1y: y,
+          cp2x: x,
+          cp2y: y
+        }
+      ];
+    }
+    const controlPoint1 = [
+      prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
+      prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5
+    ];
+    const controlPoint2 = [
+      middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
+      middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5
+    ];
+    return [
+      {
+        type: "C",
+        cp1x: controlPoint1[0],
+        cp1y: controlPoint1[1],
+        cp2x: controlPoint2[0],
+        cp2y: controlPoint2[1],
+        x: middleOfLine[0],
+        y: middleOfLine[1]
+      }
+    ];
+  }).flat(1);
+};
+var ensurePositive = (name, value) => {
+  if (typeof value !== "number" || value <= 0) {
+    throw new Error(`"${name}" must be a positive number, got ${value}`);
+  }
+};
+var pointerInterval = ({
+  availableLength,
+  pointerBaseWidth,
+  pointerPosition
+}) => {
+  const center = availableLength * pointerPosition;
+  const half = pointerBaseWidth / 2;
+  return {
+    center,
+    start: Math.max(0, center - half),
+    end: Math.min(availableLength, center + half)
+  };
+};
+var areSamePoint = (a2, b2) => {
+  return a2[0] === b2[0] && a2[1] === b2[1];
+};
+var normalizeClosedPoints = (points) => {
+  const deduplicated = points.reduce((acc, entry) => {
+    const previous = acc[acc.length - 1];
+    if (previous && areSamePoint(previous.point, entry.point)) {
+      acc[acc.length - 1] = {
+        point: previous.point,
+        round: previous.round && entry.round
+      };
+      return acc;
+    }
+    return [...acc, entry];
+  }, []);
+  if (deduplicated.length === 0) {
+    return deduplicated;
+  }
+  const first = deduplicated[0];
+  const last = deduplicated[deduplicated.length - 1];
+  if (areSamePoint(first.point, last.point)) {
+    const [firstEntry, ...rest] = deduplicated;
+    const withoutLast = rest.slice(0, -1);
+    const mergedFirst = {
+      point: firstEntry.point,
+      round: firstEntry.round && last.round
+    };
+    return [mergedFirst, ...withoutLast, mergedFirst];
+  }
+  return [...deduplicated, first];
+};
+var unitDir2 = (from, to) => {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    return [0, 0];
+  }
+  return [dx / len, dy / len];
+};
+var makeInstructions2 = ({
+  points,
+  edgeRoundness,
+  cornerRadius
+}) => {
+  const rawPoints = points.map((p) => p.point);
+  if (edgeRoundness !== null || cornerRadius === 0) {
+    return [
+      ...joinPoints(rawPoints, {
+        edgeRoundness,
+        cornerRadius,
+        roundCornerStrategy: "arc"
+      }),
+      {
+        type: "Z"
+      }
+    ];
+  }
+  const uniquePoints = areSamePoint(points[0].point, points[points.length - 1].point) ? points.slice(0, -1) : points;
+  const firstPoint = uniquePoints[0];
+  const startDir = firstPoint.round ? unitDir2(uniquePoints[0].point, uniquePoints[1].point) : null;
+  const startPoint = startDir ? [
+    firstPoint.point[0] + startDir[0] * cornerRadius,
+    firstPoint.point[1] + startDir[1] * cornerRadius
+  ] : firstPoint.point;
+  const instructions = [
+    { type: "M", x: startPoint[0], y: startPoint[1] }
+  ];
+  for (let i = 1;i < uniquePoints.length; i++) {
+    const current = uniquePoints[i];
+    if (!current.round) {
+      instructions.push({
+        type: "L",
+        x: current.point[0],
+        y: current.point[1]
+      });
+      continue;
+    }
+    const previous = uniquePoints[i - 1].point;
+    const next = uniquePoints[(i + 1) % uniquePoints.length].point;
+    const incoming = unitDir2(previous, current.point);
+    const outgoing = unitDir2(current.point, next);
+    const arcStart = [
+      current.point[0] - incoming[0] * cornerRadius,
+      current.point[1] - incoming[1] * cornerRadius
+    ];
+    instructions.push({
+      type: "L",
+      x: arcStart[0],
+      y: arcStart[1]
+    }, {
+      type: "a",
+      rx: cornerRadius,
+      ry: cornerRadius,
+      xAxisRotation: 0,
+      dx: incoming[0] * cornerRadius + outgoing[0] * cornerRadius,
+      dy: incoming[1] * cornerRadius + outgoing[1] * cornerRadius,
+      largeArcFlag: false,
+      sweepFlag: true
+    });
+  }
+  if (firstPoint.round) {
+    const previous = uniquePoints[uniquePoints.length - 1].point;
+    const incoming = unitDir2(previous, firstPoint.point);
+    instructions.push({
+      type: "L",
+      x: firstPoint.point[0] - incoming[0] * cornerRadius,
+      y: firstPoint.point[1] - incoming[1] * cornerRadius
+    }, {
+      type: "a",
+      rx: cornerRadius,
+      ry: cornerRadius,
+      xAxisRotation: 0,
+      dx: incoming[0] * cornerRadius + startDir[0] * cornerRadius,
+      dy: incoming[1] * cornerRadius + startDir[1] * cornerRadius,
+      largeArcFlag: false,
+      sweepFlag: true
+    });
+  }
+  instructions.push({ type: "Z" });
+  return instructions;
+};
+var makeCallout = ({
+  width = 500,
+  height = 200,
+  pointerLength = 40,
+  pointerBaseWidth = 60,
+  pointerPosition = 0.5,
+  pointerDirection = "down",
+  edgeRoundness = null,
+  cornerRadius = 0
 }) => {
-  return {
-    type: "enum",
-    default: defaultValue,
-    description,
-    variants: Object.fromEntries(variants.map((variant) => [variant, {}]))
+  ensurePositive("width", width);
+  ensurePositive("height", height);
+  ensurePositive("pointerLength", pointerLength);
+  ensurePositive("pointerBaseWidth", pointerBaseWidth);
+  if (typeof pointerPosition !== "number" || pointerPosition < 0 || pointerPosition > 1) {
+    throw new Error(`"pointerPosition" must be a number between 0 and 1, got ${pointerPosition}`);
+  }
+  const horizontalInterval = pointerInterval({
+    availableLength: width,
+    pointerBaseWidth,
+    pointerPosition
+  });
+  const verticalInterval = pointerInterval({
+    availableLength: height,
+    pointerBaseWidth,
+    pointerPosition
+  });
+  const pointsByDirection = {
+    up: [
+      { point: [0, pointerLength], round: true },
+      { point: [horizontalInterval.start, pointerLength], round: false },
+      { point: [horizontalInterval.center, 0], round: false },
+      { point: [horizontalInterval.end, pointerLength], round: false },
+      { point: [width, pointerLength], round: true },
+      { point: [width, height + pointerLength], round: true },
+      { point: [0, height + pointerLength], round: true },
+      { point: [0, pointerLength], round: true }
+    ],
+    down: [
+      { point: [0, 0], round: true },
+      { point: [width, 0], round: true },
+      { point: [width, height], round: true },
+      { point: [horizontalInterval.end, height], round: false },
+      {
+        point: [horizontalInterval.center, height + pointerLength],
+        round: false
+      },
+      { point: [horizontalInterval.start, height], round: false },
+      { point: [0, height], round: true },
+      { point: [0, 0], round: true }
+    ],
+    left: [
+      { point: [pointerLength, 0], round: true },
+      { point: [width + pointerLength, 0], round: true },
+      { point: [width + pointerLength, height], round: true },
+      { point: [pointerLength, height], round: true },
+      { point: [pointerLength, verticalInterval.end], round: false },
+      { point: [0, verticalInterval.center], round: false },
+      { point: [pointerLength, verticalInterval.start], round: false },
+      { point: [pointerLength, 0], round: true }
+    ],
+    right: [
+      { point: [0, 0], round: true },
+      { point: [width, 0], round: true },
+      { point: [width, verticalInterval.start], round: false },
+      { point: [width + pointerLength, verticalInterval.center], round: false },
+      { point: [width, verticalInterval.end], round: false },
+      { point: [width, height], round: true },
+      { point: [0, height], round: true },
+      { point: [0, 0], round: true }
+    ]
   };
-};
-var makeShapeSchema = (shapeFields) => {
+  const points = normalizeClosedPoints(pointsByDirection[pointerDirection]);
+  const instructions = makeInstructions2({ points, edgeRoundness, cornerRadius });
+  const path = serializeInstructions(instructions);
+  const shapeWidth = pointerDirection === "left" || pointerDirection === "right" ? width + pointerLength : width;
+  const shapeHeight = pointerDirection === "up" || pointerDirection === "down" ? height + pointerLength : height;
+  const bodyX = pointerDirection === "left" ? pointerLength : 0;
+  const bodyY = pointerDirection === "up" ? pointerLength : 0;
   return {
-    from: Internals.sequenceSchema.from,
-    durationInFrames: Internals.sequenceSchema.durationInFrames,
-    ...shapeFields,
-    fill: colorField({
-      defaultValue: "#0b84ff",
-      description: "Fill"
-    }),
-    ...Internals.sequenceVisualStyleSchema,
-    hidden: Internals.sequenceSchema.hidden
+    width: shapeWidth,
+    height: shapeHeight,
+    instructions,
+    path,
+    transformOrigin: `${bodyX + width / 2} ${bodyY + height / 2}`
   };
 };
-var arrowSchema = makeShapeSchema({
-  length: numberField({
-    defaultValue: 300,
-    description: "Length",
-    min: 0
+var calloutSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 500,
+    description: "Width",
+    min: 1
   }),
-  headWidth: numberField({
-    defaultValue: 185,
-    description: "Head Width",
-    min: 0
+  height: numberField({
+    defaultValue: 200,
+    description: "Height",
+    min: 1
   }),
-  headLength: numberField({
-    defaultValue: 120,
-    description: "Head Length",
-    min: 0
+  pointerLength: numberField({
+    defaultValue: 40,
+    description: "Pointer Length",
+    min: 1
   }),
-  shaftWidth: numberField({
-    defaultValue: 80,
-    description: "Shaft Width",
-    min: 0
+  pointerBaseWidth: numberField({
+    defaultValue: 60,
+    description: "Pointer Base Width",
+    min: 1
   }),
-  direction: enumField({
-    defaultValue: "right",
-    description: "Direction",
-    variants: ["right", "left", "up", "down"]
+  pointerPosition: numberField({
+    defaultValue: 0.5,
+    description: "Pointer Position",
+    min: 0,
+    max: 1,
+    step: 0.01
+  }),
+  pointerDirection: enumField({
+    defaultValue: "down",
+    description: "Pointer Direction",
+    variants: ["up", "down", "left", "right"]
   }),
   cornerRadius: numberField({
     defaultValue: 0,
@@ -15985,35 +16510,40 @@ var arrowSchema = makeShapeSchema({
     min: 0
   })
 });
-var ArrowInner = ({
-  length: length2,
-  headWidth,
-  headLength,
-  shaftWidth,
-  direction,
+var CalloutInner = ({
+  width,
+  height,
+  pointerLength,
+  pointerBaseWidth,
+  pointerPosition,
+  pointerDirection,
+  edgeRoundness,
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx210(RenderSvg, {
-    defaultName: "<Arrow>",
-    documentationLink: "https://www.remotion.dev/docs/shapes/arrow",
-    ...makeArrow({
-      length: length2,
-      headWidth,
-      headLength,
-      shaftWidth,
-      direction,
+  return /* @__PURE__ */ jsx310(RenderSvg, {
+    defaultName: "<Callout>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/callout",
+    ...makeCallout({
+      width,
+      height,
+      pointerLength,
+      pointerBaseWidth,
+      pointerPosition,
+      pointerDirection,
+      edgeRoundness,
       cornerRadius
     }),
     ...props
   });
 };
-var Arrow = Internals.wrapInSchema({
-  Component: ArrowInner,
-  schema: arrowSchema,
+var Callout = Internals.wrapInSchema({
+  Component: CalloutInner,
+  componentIdentity: "dev.remotion.shapes.Callout",
+  schema: calloutSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Arrow);
+Internals.addSequenceStackTraces(Callout);
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -16062,7 +16592,7 @@ var circleSchema = makeShapeSchema({
   })
 });
 var CircleInner = ({ radius, ...props }) => {
-  return /* @__PURE__ */ jsx310(RenderSvg, {
+  return /* @__PURE__ */ jsx42(RenderSvg, {
     defaultName: "<Circle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/circle",
     ...makeCircle({ radius }),
@@ -16071,6 +16601,7 @@ var CircleInner = ({ radius, ...props }) => {
 };
 var Circle = Internals.wrapInSchema({
   Component: CircleInner,
+  componentIdentity: "dev.remotion.shapes.Circle",
   schema: circleSchema,
   supportsEffects: true
 });
@@ -16118,7 +16649,7 @@ var ellipseSchema = makeShapeSchema({
   })
 });
 var EllipseInner = ({ rx, ry, ...props }) => {
-  return /* @__PURE__ */ jsx42(RenderSvg, {
+  return /* @__PURE__ */ jsx52(RenderSvg, {
     defaultName: "<Ellipse>",
     documentationLink: "https://www.remotion.dev/docs/shapes/ellipse",
     ...makeEllipse({ rx, ry }),
@@ -16127,6 +16658,7 @@ var EllipseInner = ({ rx, ry, ...props }) => {
 };
 var Ellipse = Internals.wrapInSchema({
   Component: EllipseInner,
+  componentIdentity: "dev.remotion.shapes.Ellipse",
   schema: ellipseSchema,
   supportsEffects: true
 });
@@ -16250,7 +16782,7 @@ var HeartInner = ({
   depthAdjustment = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx52(RenderSvg, {
+  return /* @__PURE__ */ jsx62(RenderSvg, {
     defaultName: "<Heart>",
     documentationLink: "https://www.remotion.dev/docs/shapes/heart",
     ...makeHeart({
@@ -16264,6 +16796,7 @@ var HeartInner = ({
 };
 var Heart = Internals.wrapInSchema({
   Component: HeartInner,
+  componentIdentity: "dev.remotion.shapes.Heart",
   schema: heartSchema,
   supportsEffects: true
 });
@@ -16408,7 +16941,7 @@ var PieInner = ({
   rotation,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx62(RenderSvg, {
+  return /* @__PURE__ */ jsx72(RenderSvg, {
     defaultName: "<Pie>",
     documentationLink: "https://www.remotion.dev/docs/shapes/pie",
     ...makePie({ radius, progress, closePath, counterClockwise, rotation }),
@@ -16417,134 +16950,11 @@ var PieInner = ({
 };
 var Pie = Internals.wrapInSchema({
   Component: PieInner,
+  componentIdentity: "dev.remotion.shapes.Pie",
   schema: pieSchema,
   supportsEffects: true
 });
 Internals.addSequenceStackTraces(Pie);
-var shortenVector = (vector, radius) => {
-  const [x, y] = vector;
-  const currentLength = Math.sqrt(x * x + y * y);
-  const scalingFactor = (currentLength - radius) / currentLength;
-  return [x * scalingFactor, y * scalingFactor];
-};
-var scaleVectorToLength = (vector, length2) => {
-  const [x, y] = vector;
-  const currentLength = Math.sqrt(x * x + y * y);
-  const scalingFactor = length2 / currentLength;
-  return [x * scalingFactor, y * scalingFactor];
-};
-var joinPoints = (points, {
-  edgeRoundness,
-  cornerRadius,
-  roundCornerStrategy
-}) => {
-  return points.map(([x, y], i) => {
-    const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
-    const prevPoint = points[prevPointIndex];
-    const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
-    const nextPoint = points[nextPointIndex];
-    const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
-    const prevPointMiddleOfLine = [
-      (x + prevPoint[0]) / 2,
-      (y + prevPoint[1]) / 2
-    ];
-    const prevVector = [x - prevPoint[0], y - prevPoint[1]];
-    const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
-    if (i === 0) {
-      if (edgeRoundness !== null) {
-        return [
-          {
-            type: "M",
-            x: middleOfLine[0],
-            y: middleOfLine[1]
-          }
-        ];
-      }
-      if (cornerRadius !== 0) {
-        const computeRadius = shortenVector(nextVector, cornerRadius);
-        return [
-          {
-            type: "M",
-            x: computeRadius[0] + x,
-            y: computeRadius[1] + y
-          }
-        ];
-      }
-      return [
-        {
-          type: "M",
-          x,
-          y
-        }
-      ];
-    }
-    if (cornerRadius && edgeRoundness !== null) {
-      throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
-    }
-    if (edgeRoundness === null) {
-      if (cornerRadius === 0) {
-        return [
-          {
-            type: "L",
-            x,
-            y
-          }
-        ];
-      }
-      const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
-      const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
-      const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
-      const firstDraw = [
-        prevPoint[0] + prevVectorMinusRadius[0],
-        prevPoint[1] + prevVectorMinusRadius[1]
-      ];
-      return [
-        {
-          type: "L",
-          x: firstDraw[0],
-          y: firstDraw[1]
-        },
-        roundCornerStrategy === "arc" ? {
-          type: "a",
-          rx: cornerRadius,
-          ry: cornerRadius,
-          xAxisRotation: 0,
-          dx: prevVectorLength[0] + nextVectorMinusRadius[0],
-          dy: prevVectorLength[1] + nextVectorMinusRadius[1],
-          largeArcFlag: false,
-          sweepFlag: true
-        } : {
-          type: "C",
-          x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
-          y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
-          cp1x: x,
-          cp1y: y,
-          cp2x: x,
-          cp2y: y
-        }
-      ];
-    }
-    const controlPoint1 = [
-      prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
-      prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5
-    ];
-    const controlPoint2 = [
-      middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
-      middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5
-    ];
-    return [
-      {
-        type: "C",
-        cp1x: controlPoint1[0],
-        cp1y: controlPoint1[1],
-        cp2x: controlPoint2[0],
-        cp2y: controlPoint2[1],
-        x: middleOfLine[0],
-        y: middleOfLine[1]
-      }
-    ];
-  }).flat(1);
-};
 function polygon({
   points,
   radius,
@@ -16625,7 +17035,7 @@ var PolygonInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx72(RenderSvg, {
+  return /* @__PURE__ */ jsx82(RenderSvg, {
     defaultName: "<Polygon>",
     documentationLink: "https://www.remotion.dev/docs/shapes/polygon",
     ...makePolygon({
@@ -16639,6 +17049,7 @@ var PolygonInner = ({
 };
 var Polygon = Internals.wrapInSchema({
   Component: PolygonInner,
+  componentIdentity: "dev.remotion.shapes.Polygon",
   schema: polygonSchema,
   supportsEffects: true
 });
@@ -16695,7 +17106,7 @@ var RectInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82(RenderSvg, {
+  return /* @__PURE__ */ jsx92(RenderSvg, {
     defaultName: "<Rect>",
     documentationLink: "https://www.remotion.dev/docs/shapes/rect",
     ...makeRect({ height, width, edgeRoundness, cornerRadius }),
@@ -16704,6 +17115,7 @@ var RectInner = ({
 };
 var Rect = Internals.wrapInSchema({
   Component: RectInner,
+  componentIdentity: "dev.remotion.shapes.Rect",
   schema: rectSchema,
   supportsEffects: true
 });
@@ -16798,7 +17210,7 @@ var StarInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx92(RenderSvg, {
+  return /* @__PURE__ */ jsx102(RenderSvg, {
     defaultName: "<Star>",
     documentationLink: "https://www.remotion.dev/docs/shapes/star",
     ...makeStar({
@@ -16813,6 +17225,7 @@ var StarInner = ({
 };
 var Star = Internals.wrapInSchema({
   Component: StarInner,
+  componentIdentity: "dev.remotion.shapes.Star",
   schema: starSchema,
   supportsEffects: true
 });
@@ -16909,7 +17322,7 @@ var TriangleInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx102(RenderSvg, {
+  return /* @__PURE__ */ jsx112(RenderSvg, {
     defaultName: "<Triangle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
     ...makeTriangle({ length: length2, direction, edgeRoundness, cornerRadius }),
@@ -16918,6 +17331,7 @@ var TriangleInner = ({
 };
 var Triangle = Internals.wrapInSchema({
   Component: TriangleInner,
+  componentIdentity: "dev.remotion.shapes.Triangle",
   schema: triangleSchema,
   supportsEffects: true
 });
@@ -17998,7 +18412,7 @@ import { jsx as jsx83, jsxs as jsxs32 } from "react/jsx-runtime";
 import { jsx as jsx93 } from "react/jsx-runtime";
 import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React36 from "react";
 import * as ReactDOM4 from "react-dom";
@@ -18558,7 +18972,7 @@ var Button = ({
   const [dimensions, setDimensions] = useState22(null);
   const ref = useRef210(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback26((e) => {
+  const onPointerEnter = useCallback27((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -18595,7 +19009,7 @@ var Button = ({
   const isDisabled = disabled || loading;
   const isAnchor = !asChild && "href" in rest && rest.href !== undefined;
   const sharedClasses = cn("text-text", "inline-flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
-  const preventInteraction = useCallback26((e) => {
+  const preventInteraction = useCallback27((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -18806,7 +19220,7 @@ var Link = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx112("a", {
+  return /* @__PURE__ */ jsx113("a", {
     ...props,
     className: cn(className, "text-brand underline underline-offset-4"),
     children: props.children
@@ -24689,7 +25103,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/template-modal-content.tsx
-import { useCallback as useCallback39, useState as useState40 } from "react";
+import { useCallback as useCallback40, useState as useState40 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -26008,7 +26422,7 @@ function cn2(...inputs) {
 }
 
 // src/helpers/use-el-size.ts
-import { useCallback as useCallback37, useEffect as useEffect41, useMemo as useMemo51, useState as useState38 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect41, useMemo as useMemo51, useState as useState38 } from "react";
 var useElementSize = (ref) => {
   const [size4, setSize] = useState38(null);
   const observer = useMemo51(() => {
@@ -26022,7 +26436,7 @@ var useElementSize = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback37(() => {
+  const updateSize = useCallback38(() => {
     if (ref === null) {
       return;
     }
@@ -26117,7 +26531,7 @@ import { forwardRef as forwardRef37, useEffect as useEffect43, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef36, useCallback as useCallback38, useEffect as useEffect42, useRef as useRef47, useState as useState39 } from "react";
+import { forwardRef as forwardRef36, useCallback as useCallback39, useEffect as useEffect42, useRef as useRef47, useState as useState39 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef47(null);
@@ -26139,8 +26553,8 @@ var VideoPlayerWithControls = forwardRef36(({ playbackId, poster, currentTime, o
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef47(null);
   const [playerInitTime] = useState39(Date.now());
-  const videoError = useCallback38((event) => onError(event), [onError]);
-  const onImageLoad = useCallback38((event) => {
+  const videoError = useCallback39((event) => onError(event), [onError]);
+  const onImageLoad = useCallback39((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -26315,7 +26729,7 @@ var copyTimeout = null;
 var TemplateModalContent = ({ template }) => {
   const [copied, setCopied] = useState40(false);
   const mobileLayout = useMobileLayout();
-  const copyCommand = useCallback39(async (command) => {
+  const copyCommand = useCallback40(async (command) => {
     clearTimeout(copyTimeout);
     const permissionName = "clipboard-write";
     try {