remotion 4.0.474 → 4.0.476

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.474";
+var VERSION = "4.0.476";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1719,6 +1719,12 @@ var PremountContext = createContext14({
 
 // src/sequence-field-schema.ts
 var sequenceVisualStyleSchema = {
+  "style.transformOrigin": {
+    type: "transform-origin",
+    step: 1,
+    default: "50% 50%",
+    description: "Transform origin"
+  },
   "style.translate": {
     type: "translate",
     step: 1,
@@ -1780,6 +1786,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,
@@ -1793,8 +1811,9 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = {
+var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   from: fromField,
   durationInFrames: durationInFramesField,
   layout: {
@@ -1806,12 +1825,13 @@ var sequenceSchema = {
       none: {}
     }
   }
-};
-var sequenceSchemaWithoutFrom = {
+});
+var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
-};
+});
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -2176,83 +2196,6 @@ function bezier(mX1, mY1, mX2, mY2) {
   };
 }
 
-// src/easing.ts
-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;
-    };
-  }
-}
-
 // src/normalize-number.ts
 var normalizeNumber = (value) => {
   return Math.round(value * 1e6) / 1e6;
@@ -2297,6 +2240,32 @@ var lengthUnits = new Set([
   "vw"
 ]);
 var cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+var transformOriginKeywords = new Set([
+  "left",
+  "center",
+  "right",
+  "top",
+  "bottom"
+]);
+var transformOriginKeywordOptions = (keyword) => {
+  if (keyword === "left") {
+    return [{ axis: "x", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "right") {
+    return [{ axis: "x", value: { value: 100, unit: "%" } }];
+  }
+  if (keyword === "top") {
+    return [{ axis: "y", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "bottom") {
+    return [{ axis: "y", value: { value: 100, unit: "%" } }];
+  }
+  return [
+    { axis: "x", value: { value: 50, unit: "%" } },
+    { axis: "y", value: { value: 50, unit: "%" } }
+  ];
+};
+var transformOriginCenter = { value: 50, unit: "%" };
 var stringifyNumber = (value) => {
   return String(normalizeNumber(value));
 };
@@ -2321,6 +2290,110 @@ var parseStringInterpolationComponent = (component, value) => {
   }
   throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
 };
+var parseTransformOriginLengthPercentage = ({
+  component,
+  value,
+  allowPercentage
+}) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? "length-percentage" : "z length"}`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+  }
+  if (unit === null || !lengthUnits.has(unit) || !allowPercentage && unit === "%") {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? "length-percentage" : "z length"}`);
+  }
+  return { value: numberValue, unit };
+};
+var parseTransformOriginToken = (component, value) => {
+  const lower = component.toLowerCase();
+  if (transformOriginKeywords.has(lower)) {
+    return { type: "keyword", keyword: lower };
+  }
+  return {
+    type: "length-percentage",
+    parsed: parseTransformOriginLengthPercentage({
+      component,
+      value,
+      allowPercentage: true
+    })
+  };
+};
+var parseTwoTransformOriginKeywords = (first, second, value) => {
+  const candidates = [];
+  for (const firstOption of transformOriginKeywordOptions(first)) {
+    for (const secondOption of transformOriginKeywordOptions(second)) {
+      if (firstOption.axis === secondOption.axis) {
+        continue;
+      }
+      candidates.push(firstOption.axis === "x" ? [firstOption.value, secondOption.value] : [secondOption.value, firstOption.value]);
+    }
+  }
+  if (candidates.length === 0) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`);
+  }
+  return candidates[0];
+};
+var parseTransformOriginXY = (parts, value) => {
+  if (parts.length === 1) {
+    const token = parseTransformOriginToken(parts[0], value);
+    if (token.type === "length-percentage") {
+      return [token.parsed, transformOriginCenter];
+    }
+    if (token.keyword === "top" || token.keyword === "bottom") {
+      return [
+        transformOriginCenter,
+        transformOriginKeywordOptions(token.keyword)[0].value
+      ];
+    }
+    return [
+      transformOriginKeywordOptions(token.keyword)[0].value,
+      transformOriginCenter
+    ];
+  }
+  const first = parseTransformOriginToken(parts[0], value);
+  const second = parseTransformOriginToken(parts[1], value);
+  if (first.type === "length-percentage" && second.type === "length-percentage") {
+    return [first.parsed, second.parsed];
+  }
+  if (first.type === "keyword" && second.type === "keyword") {
+    return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+  }
+  const keyword = first.type === "keyword" ? first : second.type === "keyword" ? second : null;
+  const length = first.type === "length-percentage" ? first.parsed : second.type === "length-percentage" ? second.parsed : null;
+  if (keyword === null || length === null) {
+    throw new Error("Expected a keyword and a length-percentage value");
+  }
+  const keywordIsFirst = first.type === "keyword";
+  if (keyword.keyword === "left" || keyword.keyword === "right") {
+    if (!keywordIsFirst) {
+      throw new TypeError(`Cannot interpolate "${value}" because horizontal transform-origin keywords must come before a length-percentage value`);
+    }
+    return [transformOriginKeywordOptions(keyword.keyword)[0].value, length];
+  }
+  if (keyword.keyword === "top" || keyword.keyword === "bottom") {
+    return [length, transformOriginKeywordOptions(keyword.keyword)[0].value];
+  }
+  return keywordIsFirst ? [transformOriginCenter, length] : [length, transformOriginCenter];
+};
+var parseTransformOriginValue = (output, parts) => {
+  const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+  const z = parts[2] === undefined ? { value: 0, unit: null } : parseTransformOriginLengthPercentage({
+    component: parts[2],
+    value: output,
+    allowPercentage: false
+  });
+  return {
+    kind: "translate",
+    values: [x.value, y.value, z.value],
+    units: [x.unit, y.unit, z.unit],
+    dimensions: parts[2] === undefined ? 2 : 3
+  };
+};
 var parseStringInterpolationValue = (output) => {
   if (typeof output === "number") {
     if (!Number.isFinite(output)) {
@@ -2337,6 +2410,9 @@ var parseStringInterpolationValue = (output) => {
   if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
     throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
   }
+  if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+    return parseTransformOriginValue(output, parts);
+  }
   const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
   const [{ kind }] = parsed;
   for (const part of parsed) {
@@ -2626,106 +2702,468 @@ function interpolate(input, inputRange, outputRange, options) {
   return interpolateNumber({ input, inputRange, outputRange, options });
 }
 
-// src/interpolate-colors.ts
-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");
+// src/validate-frame.ts
+var validateFrame = ({
+  allowFloats,
+  durationInFrames,
+  frame
+}) => {
+  if (typeof frame === "undefined") {
+    throw new TypeError(`Argument missing for parameter "frame"`);
   }
-  return cachedMatchers;
-}
-function hue2rgb(p, q, t) {
-  if (t < 0) {
-    t += 1;
+  if (typeof frame !== "number") {
+    throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
   }
-  if (t > 1) {
-    t -= 1;
+  if (!Number.isFinite(frame)) {
+    throw new RangeError(`Frame ${frame} is not finite`);
   }
-  if (t < 1 / 6) {
-    return p + (q - p) * 6 * t;
+  if (frame % 1 !== 0 && !allowFloats) {
+    throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
   }
-  if (t < 1 / 2) {
-    return q;
+  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 (t < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t) * 6;
+  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 p;
-}
-function hslToRgb(h, s, l) {
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r = hue2rgb(p, q, h + 1 / 3);
-  const g = hue2rgb(p, q, h);
-  const b2 = hue2rgb(p, q, h - 1 / 3);
-  return Math.round(r * 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;
+};
+
+// src/validation/validation-spring-duration.ts
+var validateSpringDuration = (dur) => {
+  if (typeof dur === "undefined") {
+    return;
   }
-  if (int > 255) {
-    return 255;
+  if (typeof dur !== "number") {
+    throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
   }
-  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 (Number.isNaN(dur)) {
+    throw new TypeError('A "duration" of a spring is NaN, which it must not be');
   }
-  if (num > 1) {
-    return 255;
+  if (!Number.isFinite(dur)) {
+    throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
   }
-  return Math.round(num * 255);
-}
-function parsePercentage(str) {
-  const int = Number.parseFloat(str);
-  if (int < 0) {
-    return 0;
+  if (dur <= 0) {
+    throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
   }
-  if (int > 100) {
+};
+
+// src/spring/spring-utils.ts
+var defaultSpringConfig = {
+  damping: 10,
+  mass: 1,
+  stiffness: 100,
+  overshootClamping: false
+};
+var advanceCache = {};
+function advance({
+  animation,
+  now,
+  config
+}) {
+  const { toValue, 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 = [
+    toValue,
+    lastTimestamp,
+    current,
+    velocity,
+    c2,
+    m,
+    k,
+    now
+  ].join("-");
+  if (advanceCache[cacheKey]) {
+    return advanceCache[cacheKey];
+  }
+  const v0 = -velocity;
+  const x0 = toValue - 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 = toValue - underDampedFrag1;
+  const underDampedVelocity = zeta * omega0 * underDampedFrag1 - underDampedEnvelope * (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+  const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+  const criticallyDampedPosition = toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+  const criticallyDampedVelocity = criticallyDampedEnvelope * (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+  const animationNode = {
+    toValue,
+    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;
+}
+
+// src/spring/measure-spring.ts
+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;
+}
+
+// src/spring/index.ts
+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;
+}
+
+// src/easing.ts
+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;
+    };
+  }
+}
+
+// src/interpolate-colors.ts
+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 r = hue2rgb(p, q, h + 1 / 3);
+  const g = hue2rgb(p, q, h);
+  const b2 = hue2rgb(p, q, h - 1 / 3);
+  return Math.round(r * 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;
@@ -3094,6 +3532,7 @@ function processColor(color) {
 var interpolateColorsRGB = (value, inputRange, colors, options) => {
   const [r, g, b2, a2] = [red, green, blue, opacity].map((f) => {
     const unrounded = interpolate(value, inputRange, colors.map((c2) => f(c2)), {
+      easing: options?.easing,
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       posterize: options?.posterize
@@ -3149,6 +3588,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
+        easing: easing.map(easingToFn),
         posterize: status.posterize
       });
     } catch {
@@ -3638,7 +4078,8 @@ var wrapInSchema = ({
   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();
@@ -3677,7 +4118,7 @@ var wrapInSchema = ({
     const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo13(() => {
       return {
-        schema,
+        schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
         supportsEffects
@@ -3685,7 +4126,7 @@ var wrapInSchema = ({
     }, [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),
@@ -3698,7 +4139,7 @@ var wrapInSchema = ({
       propStatuses,
       frame
     ]);
-    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
@@ -3743,6 +4184,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}`);
@@ -3780,6 +4222,7 @@ var RegularSequenceRefForwardingFunction = ({
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
   const contextValue = useMemo14(() => {
     return {
+      absoluteFrom,
       cumulatedFrom,
       relativeFrom: from,
       cumulatedNegativeFrom,
@@ -3795,6 +4238,7 @@ var RegularSequenceRefForwardingFunction = ({
     };
   }, [
     cumulatedFrom,
+    absoluteFrom,
     from,
     actualDurationInFrames,
     parentSequence,
@@ -3810,7 +4254,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;
@@ -4468,10 +4912,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;
     }
@@ -4482,7 +4926,7 @@ var decodeImage = async ({
     if (foundInCache) {
       foundInCache.frame = frame.image;
     } else {
-      cache.push({
+      cache2.push({
         frame: frame.image,
         frameIndex,
         timeInSeconds: frame.image.timestamp / 1e6
@@ -4495,7 +4939,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);
@@ -4518,7 +4962,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) {
@@ -4561,7 +5005,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);
@@ -4611,7 +5055,7 @@ var animatedImageSchema = {
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate",
+    description: "Playback rate",
     hiddenFromList: false,
     keyframable: false
   },
@@ -5059,7 +5503,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,
@@ -7588,7 +8032,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({
@@ -8108,7 +8552,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,
@@ -8431,7 +8875,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,
@@ -9048,7 +9492,7 @@ var NativeImgInner = ({
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
     _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,
@@ -9190,7 +9634,7 @@ var ImgInner = ({
     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
@@ -9202,22 +9646,119 @@ var Img = wrapInSchema({
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
+// src/Interactive.tsx
+import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var interactiveElementSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
+var makeInteractiveElement = (tag, displayName) => {
+  const Inner = forwardRef12((propsWithControls, ref) => {
+    const {
+      durationInFrames,
+      from,
+      hidden,
+      name,
+      showInTimeline,
+      stack,
+      _experimentalControls,
+      ...props2
+    } = propsWithControls;
+    const refForOutline = useRef25(null);
+    const callbackRef = useCallback19((element) => {
+      refForOutline.current = element;
+      setRef(ref, element);
+    }, [ref]);
+    return /* @__PURE__ */ jsx29(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      hidden,
+      name: name ?? displayName,
+      showInTimeline: showInTimeline ?? true,
+      _experimentalControls,
+      _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
+      _remotionInternalRefForOutline: refForOutline,
+      children: React29.createElement(tag, {
+        ...props2,
+        ref: callbackRef
+      })
+    });
+  });
+  Inner.displayName = displayName;
+  const Wrapped = wrapInSchema({
+    Component: Inner,
+    schema: interactiveElementSchema,
+    supportsEffects: false
+  });
+  Wrapped.displayName = displayName;
+  addSequenceStackTraces(Wrapped);
+  return Wrapped;
+};
+var Interactive = {
+  A: makeInteractiveElement("a", "<Interactive.A>"),
+  Article: makeInteractiveElement("article", "<Interactive.Article>"),
+  Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
+  Button: makeInteractiveElement("button", "<Interactive.Button>"),
+  Circle: makeInteractiveElement("circle", "<Interactive.Circle>"),
+  Code: makeInteractiveElement("code", "<Interactive.Code>"),
+  Div: makeInteractiveElement("div", "<Interactive.Div>"),
+  Ellipse: makeInteractiveElement("ellipse", "<Interactive.Ellipse>"),
+  Em: makeInteractiveElement("em", "<Interactive.Em>"),
+  Footer: makeInteractiveElement("footer", "<Interactive.Footer>"),
+  G: makeInteractiveElement("g", "<Interactive.G>"),
+  H1: makeInteractiveElement("h1", "<Interactive.H1>"),
+  H2: makeInteractiveElement("h2", "<Interactive.H2>"),
+  H3: makeInteractiveElement("h3", "<Interactive.H3>"),
+  H4: makeInteractiveElement("h4", "<Interactive.H4>"),
+  H5: makeInteractiveElement("h5", "<Interactive.H5>"),
+  H6: makeInteractiveElement("h6", "<Interactive.H6>"),
+  Header: makeInteractiveElement("header", "<Interactive.Header>"),
+  Label: makeInteractiveElement("label", "<Interactive.Label>"),
+  Li: makeInteractiveElement("li", "<Interactive.Li>"),
+  Line: makeInteractiveElement("line", "<Interactive.Line>"),
+  Main: makeInteractiveElement("main", "<Interactive.Main>"),
+  Nav: makeInteractiveElement("nav", "<Interactive.Nav>"),
+  Ol: makeInteractiveElement("ol", "<Interactive.Ol>"),
+  P: makeInteractiveElement("p", "<Interactive.P>"),
+  Path: makeInteractiveElement("path", "<Interactive.Path>"),
+  Pre: makeInteractiveElement("pre", "<Interactive.Pre>"),
+  Rect: makeInteractiveElement("rect", "<Interactive.Rect>"),
+  Section: makeInteractiveElement("section", "<Interactive.Section>"),
+  Small: makeInteractiveElement("small", "<Interactive.Small>"),
+  Span: makeInteractiveElement("span", "<Interactive.Span>"),
+  Strong: makeInteractiveElement("strong", "<Interactive.Strong>"),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>"),
+  Text: makeInteractiveElement("text", "<Interactive.Text>"),
+  Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
+};
 // src/internals.ts
 import { createRef as createRef3 } from "react";
 
 // src/CompositionManager.tsx
-import React29 from "react";
-var compositionsRef = React29.createRef();
+import React30 from "react";
+var compositionsRef = React30.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
-  useCallback as useCallback19,
+  useCallback as useCallback20,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState18
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -9228,15 +9769,15 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef25(compositions);
-  const updateCompositions = useCallback19((updateComps) => {
+  const currentcompositionsRef = useRef26(compositions);
+  const updateCompositions = useCallback20((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback19((comp) => {
+  const registerComposition = useCallback20((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -9244,12 +9785,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback19((id) => {
+  const unregisterComposition = useCallback20((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback19((name, parent, nonce, stack) => {
+  const registerFolder = useCallback20((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -9262,7 +9803,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback19((name, parent) => {
+  const unregisterFolder = useCallback20((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -9296,9 +9837,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx29(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx30(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx29(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx30(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -9404,8 +9945,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React30 from "react";
-var MaxMediaCacheSizeContext = React30.createContext(null);
+import React31 from "react";
+var MaxMediaCacheSizeContext = React31.createContext(null);
 
 // src/register-root.ts
 var Root = null;
@@ -9443,7 +9984,7 @@ import { useMemo as useMemo34 } from "react";
 
 // src/use-media-enabled.tsx
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
   const context = useContext34(MediaEnabledContext);
@@ -9471,14 +10012,14 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
   });
 };
 
 // src/RemotionRoot.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
   numberOfAudioTags,
@@ -9498,25 +10039,25 @@ var RemotionRootContexts = ({
   const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx32(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx31(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx32(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx31(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx32(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx31(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx31(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx31(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx31(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx31(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx31(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx32(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx32(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx32(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx32(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx32(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx32(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
                       previewSampleRate,
-                      children: /* @__PURE__ */ jsx31(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx32(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -9710,8 +10251,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React32 from "react";
-var SequenceStackTracesUpdateContext = React32.createContext(() => {});
+import React33 from "react";
+var SequenceStackTracesUpdateContext = React33.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -9741,8 +10282,8 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React33, { createContext as createContext25 } from "react";
-var CurrentScaleContext = React33.createContext(null);
+import React34, { createContext as createContext25 } from "react";
+var CurrentScaleContext = React34.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -9767,8 +10308,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React33.useContext(CurrentScaleContext);
-  const zoomContext = React33.useContext(PreviewSizeContext);
+  const hasContext = React34.useContext(CurrentScaleContext);
+  const zoomContext = React34.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -9798,8 +10339,8 @@ var useCurrentScale = (options) => {
 };
 
 // src/use-pixel-density.ts
-import React34, { useContext as useContext35 } from "react";
-var PixelDensityContext = React34.createContext(null);
+import React35, { useContext as useContext35 } from "react";
+var PixelDensityContext = React35.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
     return 1;
@@ -9825,11 +10366,11 @@ var usePixelDensity = (options) => {
 };
 
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback22 } from "react";
+import { useCallback as useCallback23 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
@@ -9848,7 +10389,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -10022,7 +10563,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback20(() => {
+  const onErr = useCallback21(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -10032,7 +10573,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback20((img) => {
+  const onImageFrame = useCallback21((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -10041,7 +10582,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx32(Img, {
+  return /* @__PURE__ */ jsx33(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -10053,14 +10594,14 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React36, {
-  forwardRef as forwardRef12,
-  useCallback as useCallback21,
+import React37, {
+  forwardRef as forwardRef13,
+  useCallback as useCallback22,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef26,
+  useRef as useRef27,
   useState as useState20
 } from "react";
 
@@ -10110,13 +10651,13 @@ class MediaPlaybackError extends Error {
 }
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const context = useContext37(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef26(null);
+  const videoRef = useRef27(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -10126,7 +10667,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
+  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -10184,7 +10725,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback21(() => {
+  const getStack = useCallback22(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -10200,7 +10741,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({
@@ -10289,7 +10830,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef26(onDuration);
+  const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect20(() => {
@@ -10330,7 +10871,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx33("video", {
+  return /* @__PURE__ */ jsx34("video", {
+    ...nativeProps,
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -10339,13 +10881,13 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     style: actualStyle,
     disableRemotePlayback: true,
     crossOrigin: crossOriginValue,
-    ...nativeProps
+    controls: false
   });
 };
-var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -10362,7 +10904,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 = useCallback22(() => {
+  const onDuration = useCallback23(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -10376,13 +10918,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx34(Sequence, {
+    return /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -10397,7 +10939,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -10419,7 +10961,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx34(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -10468,7 +11010,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -10541,23 +11083,23 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React38, { useMemo as useMemo37 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import React39, { useMemo as useMemo37 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React38.useContext(CompositionManager);
-  const timelineContext = React38.useContext(TimelineContext);
-  const setTimelineContext = React38.useContext(SetTimelineContext);
-  const sequenceContext = React38.useContext(SequenceContext);
-  const nonceContext = React38.useContext(NonceContext);
-  const canUseRemotionHooksContext = React38.useContext(CanUseRemotionHooks);
-  const preloadContext = React38.useContext(PreloadContext);
-  const resolveCompositionContext = React38.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React38.useContext(RenderAssetManager);
-  const sequenceManagerContext = React38.useContext(SequenceManager);
-  const sequenceManagerRefContext = React38.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React38.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React38.useContext(BufferingContextReact);
-  const logLevelContext = React38.useContext(LogLevelContext);
+  const compositionManagerCtx = React39.useContext(CompositionManager);
+  const timelineContext = React39.useContext(TimelineContext);
+  const setTimelineContext = React39.useContext(SetTimelineContext);
+  const sequenceContext = React39.useContext(SequenceContext);
+  const nonceContext = React39.useContext(NonceContext);
+  const canUseRemotionHooksContext = React39.useContext(CanUseRemotionHooks);
+  const preloadContext = React39.useContext(PreloadContext);
+  const resolveCompositionContext = React39.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React39.useContext(RenderAssetManager);
+  const sequenceManagerContext = React39.useContext(SequenceManager);
+  const sequenceManagerRefContext = React39.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React39.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React39.useContext(BufferingContextReact);
+  const logLevelContext = React39.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -10592,33 +11134,33 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx35(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx36(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx35(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx36(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx35(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx36(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx35(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx36(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx36(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx35(SequenceManagerRefContext.Provider, {
+            children: /* @__PURE__ */ jsx36(SequenceManagerRefContext.Provider, {
               value: contexts.sequenceManagerRefContext,
-              children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
+              children: /* @__PURE__ */ jsx36(SequenceManager.Provider, {
                 value: contexts.sequenceManagerContext,
-                children: /* @__PURE__ */ jsx35(VisualModePropStatusesRefContext.Provider, {
+                children: /* @__PURE__ */ jsx36(VisualModePropStatusesRefContext.Provider, {
                   value: contexts.visualModePropStatusesRefContext,
-                  children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
+                  children: /* @__PURE__ */ jsx36(RenderAssetManager.Provider, {
                     value: contexts.renderAssetManagerContext,
-                    children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
+                    children: /* @__PURE__ */ jsx36(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
+                      children: /* @__PURE__ */ jsx36(TimelineContext.Provider, {
                         value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
+                        children: /* @__PURE__ */ jsx36(SetTimelineContext.Provider, {
                           value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
+                          children: /* @__PURE__ */ jsx36(SequenceContext.Provider, {
                             value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
+                            children: /* @__PURE__ */ jsx36(BufferingContextReact.Provider, {
                               value: contexts.bufferManagerContext,
                               children
                             })
@@ -10778,51 +11320,26 @@ var Internals = {
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
-  makeSequencePropsSubscriptionKey,
-  getPropStatusesCtx,
-  getEffectPropStatusesCtx,
-  hiddenField,
-  durationInFramesField,
-  fromField
-};
-// src/validate-frame.ts
-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}`);
-  }
+  makeSequencePropsSubscriptionKey,
+  getPropStatusesCtx,
+  getEffectPropStatusesCtx,
+  hiddenField,
+  durationInFramesField,
+  fromField
 };
 // src/series/index.tsx
 import {
   Children,
-  forwardRef as forwardRef13,
+  forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
 
 // src/series/flatten-children.tsx
-import React39 from "react";
+import React40 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React39.Children.toArray(children);
+  const childrenArray = React40.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React39.Fragment) {
+    if (child.type === React40.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -10831,14 +11348,14 @@ var flattenChildren = (children) => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx36(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
     children
   });
 };
-var SeriesSequence = forwardRef13(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef14(SeriesSequenceRefForwardingFunction);
 var SequenceWithoutSchemaWithRef = SequenceWithoutSchema;
 var SeriesInner = (props2) => {
   const childrenValue = useMemo38(() => {
@@ -10882,7 +11399,7 @@ var SeriesInner = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx36(SequenceWithoutSchemaWithRef, {
+      return /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
         ref: castedChild.ref,
         name: name || "<Series.Sequence>",
         _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
@@ -10893,8 +11410,8 @@ var SeriesInner = (props2) => {
       });
     });
   }, [props2.children]);
-  return /* @__PURE__ */ jsx36(IsInsideSeriesContainer, {
-    children: /* @__PURE__ */ jsx36(Sequence, {
+  return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
+    children: /* @__PURE__ */ jsx37(Sequence, {
       layout: "none",
       name: "<Series>",
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
@@ -10911,247 +11428,6 @@ var Series = Object.assign(wrapInSchema({
   Sequence: SeriesSequence
 });
 addSequenceStackTraces(Series);
-// src/validation/validation-spring-duration.ts
-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);
-  }
-};
-
-// src/spring/spring-utils.ts
-var defaultSpringConfig = {
-  damping: 10,
-  mass: 1,
-  stiffness: 100,
-  overshootClamping: false
-};
-var advanceCache = {};
-function advance({
-  animation,
-  now,
-  config
-}) {
-  const { toValue, 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 = [
-    toValue,
-    lastTimestamp,
-    current,
-    velocity,
-    c2,
-    m,
-    k,
-    now
-  ].join("-");
-  if (advanceCache[cacheKey]) {
-    return advanceCache[cacheKey];
-  }
-  const v0 = -velocity;
-  const x0 = toValue - 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 = toValue - underDampedFrag1;
-  const underDampedVelocity = zeta * omega0 * underDampedFrag1 - underDampedEnvelope * (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
-  const criticallyDampedEnvelope = Math.exp(-omega0 * t);
-  const criticallyDampedPosition = toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
-  const criticallyDampedVelocity = criticallyDampedEnvelope * (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
-  const animationNode = {
-    toValue,
-    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;
-}
-
-// src/spring/measure-spring.ts
-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;
-}
-
-// src/spring/index.ts
-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;
-}
 // src/static-file.ts
 var problematicCharacters = {
   "%3A": ":",
@@ -11242,27 +11518,27 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React41 from "react";
+import React42 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React41.createElement(Composition, newProps);
+  return React42.createElement(Composition, newProps);
 };
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   useContext as useContext38,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef27
+  useRef as useRef28
 } from "react";
 
 // src/video/seek-until-right.ts
@@ -11390,7 +11666,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -11412,7 +11688,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef27(null);
+  const videoRef = useRef28(null);
   const sequenceContext = useContext38(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -11603,16 +11879,16 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx37("video", {
+  return /* @__PURE__ */ jsx38("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
   });
 };
-var VideoForRendering = forwardRef14(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef15(VideoForRenderingForwardFunction);
 
 // src/video/html5-video.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -11642,7 +11918,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 = useCallback23((src, durationInSeconds) => {
+  const onDuration = useCallback24((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
@@ -11655,7 +11931,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx38(Html5Video, {
+      return /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -11663,7 +11939,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx38(Loop, {
+    return /* @__PURE__ */ jsx39(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -11673,7 +11949,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -11682,13 +11958,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx38(Sequence, {
+    return /* @__PURE__ */ jsx39(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue === undefined ? undefined : trimAfterValue / (props2.playbackRate ?? 1),
       name,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         onVideoFrame,
         ...otherProps,
@@ -11703,14 +11979,14 @@ var VideoForwardingFunction = (props2, ref) => {
     volume: props2.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx38(VideoForRendering, {
+    return /* @__PURE__ */ jsx39(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx38(VideoForPreview, {
+  return /* @__PURE__ */ jsx39(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
@@ -11723,7 +11999,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef15(VideoForwardingFunction);
+var Html5Video = forwardRef16(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 var Video = Html5Video;
 // src/index.ts
@@ -11793,6 +12069,7 @@ export {
   MediaPlaybackError,
   Loop,
   Internals,
+  Interactive,
   Img,
   IFrame,
   HtmlInCanvas,