@remotion/promo-pages 4.0.475 → 4.0.476

package/dist/design.js

@@ -5564,7 +5564,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.475";
+var VERSION = "4.0.476";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5998,6 +5998,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,8 +6023,9 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = {
+var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   from: fromField,
   durationInFrames: durationInFramesField,
   layout: {
@@ -6024,12 +6037,13 @@ var sequenceSchema = {
       none: {}
     }
   }
-};
-var sequenceSchemaWithoutFrom = {
+});
+var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
-};
+});
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -6373,81 +6387,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,130 +6889,480 @@ 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;
+var validateFrame = ({
+  allowFloats,
+  durationInFrames,
+  frame
+}) => {
+  if (typeof frame === "undefined") {
+    throw new TypeError(`Argument missing for parameter "frame"`);
   }
-  if (t > 1) {
-    t -= 1;
+  if (typeof frame !== "number") {
+    throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
   }
-  if (t < 1 / 6) {
-    return p + (q - p) * 6 * t;
+  if (!Number.isFinite(frame)) {
+    throw new RangeError(`Frame ${frame} is not finite`);
   }
-  if (t < 1 / 2) {
-    return q;
+  if (frame % 1 !== 0 && !allowFloats) {
+    throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
   }
-  if (t < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t) * 6;
+  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}`);
   }
-  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 > 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}`);
   }
-  if (int > 255) {
-    return 255;
+};
+var validateSpringDuration = (dur) => {
+  if (typeof dur === "undefined") {
+    return;
   }
-  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 (typeof dur !== "number") {
+    throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
   }
-  if (num > 1) {
-    return 255;
+  if (Number.isNaN(dur)) {
+    throw new TypeError('A "duration" of a spring is NaN, which it must not be');
   }
-  return Math.round(num * 255);
-}
-function parsePercentage(str) {
-  const int = Number.parseFloat(str);
-  if (int < 0) {
-    return 0;
+  if (!Number.isFinite(dur)) {
+    throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
   }
-  if (int > 100) {
-    return 1;
+  if (dur <= 0) {
+    throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
   }
-  return int / 100;
-}
-function parseModernComponent(str, percentScale) {
-  if (str === "none")
-    return 0;
-  if (str.endsWith("%")) {
-    return Number.parseFloat(str) / 100 * percentScale;
+};
+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.");
   }
-  return Number.parseFloat(str);
-}
-function parseHueAngle(str) {
-  if (str === "none")
-    return 0;
-  if (str.endsWith("rad")) {
-    return Number.parseFloat(str) * 180 / Math.PI;
+  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];
   }
-  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) {
+  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")
     return 1;
   if (str.endsWith("%")) {
@@ -7946,7 +8235,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();
@@ -7985,7 +8275,7 @@ var wrapInSchema = ({
     const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo13(() => {
       return {
-        schema,
+        schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
         supportsEffects
@@ -7993,7 +8283,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),
@@ -8006,7 +8296,7 @@ var wrapInSchema = ({
       propStatuses,
       frame
     ]);
-    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
@@ -8048,6 +8338,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}`);
@@ -8085,6 +8376,7 @@ var RegularSequenceRefForwardingFunction = ({
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
   const contextValue = useMemo14(() => {
     return {
+      absoluteFrom,
       cumulatedFrom,
       relativeFrom: from,
       cumulatedNegativeFrom,
@@ -8100,6 +8392,7 @@ var RegularSequenceRefForwardingFunction = ({
     };
   }, [
     cumulatedFrom,
+    absoluteFrom,
     from,
     actualDurationInFrames,
     parentSequence,
@@ -8115,7 +8408,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;
@@ -8742,10 +9035,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 +9049,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 +9062,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 +9085,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 +9128,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);
@@ -9296,7 +9589,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,
@@ -11685,7 +11978,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({
@@ -12179,7 +12472,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,
@@ -12491,7 +12784,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,
@@ -13055,7 +13348,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,
@@ -13197,7 +13490,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
@@ -13248,6 +13541,7 @@ var makeInteractiveElement = (tag, displayName) => {
       showInTimeline: showInTimeline ?? true,
       _experimentalControls,
       _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       _remotionInternalRefForOutline: refForOutline,
       children: React29.createElement(tag, {
         ...props2,
@@ -14145,7 +14439,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 +14570,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx34("video", {
+    ...nativeProps,
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -14284,7 +14579,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     style: actualStyle,
     disableRemotePlayback: true,
     crossOrigin: crossOriginValue,
-    ...nativeProps
+    controls: false
   });
 };
 var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
@@ -14662,52 +14957,28 @@ var Internals = {
   CompositionRenderErrorContext,
   useEffectChainState,
   createEffectChainState,
-  cleanupEffectChainState,
-  runEffectChain,
-  useMemoizedEffects,
-  useMemoizedEffectDefinitions,
-  createEffect,
-  createWebGLContextError,
-  createWebGL2ContextError,
-  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}`);
-  }
+  cleanupEffectChainState,
+  runEffectChain,
+  useMemoizedEffects,
+  useMemoizedEffectDefinitions,
+  createEffect,
+  createWebGLContextError,
+  createWebGL2ContextError,
+  computeEffectiveSchemaValuesDotNotation,
+  interpolateKeyframedStatus,
+  makeStaticDragOverride,
+  makeKeyframedDragOverride,
+  resolveDragOverrideValue,
+  getStaticDragOverrideValue,
+  OverrideIdsToNodePathsGettersContext,
+  OverrideIdsToNodePathsSettersContext,
+  findPropsToDelete,
+  makeSequencePropsSubscriptionKey,
+  getPropStatusesCtx,
+  getEffectPropStatusesCtx,
+  hiddenField,
+  durationInFramesField,
+  fromField
 };
 var flattenChildren = (children) => {
   const childrenArray = React40.Children.toArray(children);
@@ -14798,240 +15069,6 @@ var Series = Object.assign(wrapInSchema({
   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
-  });
-  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 problematicCharacters = {
   "%3A": ":",
   "%2F": "/",