@remotion/promo-pages 4.0.475 → 4.0.476

package/dist/Homepage.js

@@ -2334,7 +2334,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;
@@ -2768,6 +2768,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,
@@ -2781,8 +2793,9 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = {
+var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   from: fromField,
   durationInFrames: durationInFramesField,
   layout: {
@@ -2794,12 +2807,13 @@ var sequenceSchema = {
       none: {}
     }
   }
-};
-var sequenceSchemaWithoutFrom = {
+});
+var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
-};
+});
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -3143,81 +3157,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;
 };
@@ -3720,6 +3659,356 @@ function interpolate(input, inputRange, outputRange, options) {
   checkInfiniteRange("outputRange", outputRange);
   return interpolateNumber({ input, inputRange, outputRange, options });
 }
+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}`);
+  }
+};
+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, 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;
+}
+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) {
@@ -4716,7 +5005,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();
@@ -4755,7 +5045,7 @@ var wrapInSchema = ({
     const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo13(() => {
       return {
-        schema,
+        schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
         supportsEffects
@@ -4763,7 +5053,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),
@@ -4776,7 +5066,7 @@ var wrapInSchema = ({
       propStatuses,
       frame
     ]);
-    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
@@ -4818,6 +5108,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}`);
@@ -4855,6 +5146,7 @@ var RegularSequenceRefForwardingFunction = ({
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
   const contextValue = useMemo14(() => {
     return {
+      absoluteFrom,
       cumulatedFrom,
       relativeFrom: from,
       cumulatedNegativeFrom,
@@ -4870,6 +5162,7 @@ var RegularSequenceRefForwardingFunction = ({
     };
   }, [
     cumulatedFrom,
+    absoluteFrom,
     from,
     actualDurationInFrames,
     parentSequence,
@@ -4885,7 +5178,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;
@@ -5512,10 +5805,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;
     }
@@ -5526,7 +5819,7 @@ var decodeImage = async ({
     if (foundInCache) {
       foundInCache.frame = frame.image;
     } else {
-      cache.push({
+      cache2.push({
         frame: frame.image,
         frameIndex,
         timeInSeconds: frame.image.timestamp / 1e6
@@ -5539,7 +5832,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);
@@ -5562,7 +5855,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) {
@@ -5605,7 +5898,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);
@@ -6066,7 +6359,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,
@@ -8455,7 +8748,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({
@@ -8949,7 +9242,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,
@@ -9261,7 +9554,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,
@@ -9825,7 +10118,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,
@@ -9967,7 +10260,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
@@ -10018,6 +10311,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,
@@ -10915,7 +11209,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({
@@ -11046,6 +11340,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx34("video", {
+    ...nativeProps,
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -11054,7 +11349,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     style: actualStyle,
     disableRemotePlayback: true,
     crossOrigin: crossOriginValue,
-    ...nativeProps
+    controls: false
   });
 };
 var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
@@ -11455,30 +11750,6 @@ var Internals = {
   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}`);
-  }
-};
 var flattenChildren = (children) => {
   const childrenArray = React40.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
@@ -11568,240 +11839,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, 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;
-}
-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": "/",
@@ -29924,6 +29961,18 @@ var hiddenField2 = {
   default: false,
   description: "Hidden"
 };
+var showInTimelineField2 = {
+  type: "hidden"
+};
+var sequenceNameField2 = {
+  type: "hidden"
+};
+var extendSchemaWithSequenceName2 = (schema) => {
+  return {
+    name: sequenceNameField2,
+    ...schema
+  };
+};
 var durationInFramesField2 = {
   type: "number",
   default: undefined,
@@ -29937,8 +29986,9 @@ var fromField2 = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema2 = {
+var sequenceSchema2 = extendSchemaWithSequenceName2({
   hidden: hiddenField2,
+  showInTimeline: showInTimelineField2,
   from: fromField2,
   durationInFrames: durationInFramesField2,
   layout: {
@@ -29950,12 +30000,13 @@ var sequenceSchema2 = {
       none: {}
     }
   }
-};
-var sequenceSchemaWithoutFrom2 = {
+});
+var sequenceSchemaWithoutFrom2 = extendSchemaWithSequenceName2({
   hidden: hiddenField2,
+  showInTimeline: showInTimelineField2,
   durationInFrames: durationInFramesField2,
   layout: sequenceSchema2.layout
-};
+});
 var sequenceSchemaDefaultLayoutNone2 = {
   ...sequenceSchema2,
   layout: {
@@ -36693,7 +36744,7 @@ var AudioForPreviewAssertedShowing = ({
   const parentSequence = useContext212(SequenceContext2);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
-  const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
+  const sequenceOffset = (parentSequence?.absoluteFrom ?? 0) / videoConfig.fps;
   const bufferingContext = useContext212(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
@@ -39228,7 +39279,7 @@ var VideoForPreviewAssertedShowing = ({
   const parentSequence = useContext49(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
-  const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
+  const sequenceOffset = (parentSequence?.absoluteFrom ?? 0) / videoConfig.fps;
   const currentTime = frame / videoConfig.fps;
   const currentTimeRef = useRef213(currentTime);
   currentTimeRef.current = currentTime;
@@ -41449,7 +41500,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.475";
+var VERSION2 = "4.0.476";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";