transition-timing

1import { linearTiming, springTiming } from "@remotion/transitions";
2import type { TransitionPresentationComponentProps } from "@remotion/transitions";
3import { Easing, interpolate } from "remotion";
4import { springSmooth } from "./springs";
5 
6export type TransitionVariant = "linear" | "spring" | "editorial";
7 
8/** Balanced ease-in-out — matches `EASING.editorial` from `motion-tokens`. */
9const EASING_CUT = Easing.bezier(0.45, 0, 0.55, 1);
10 
11export function resolveTransitionTiming({
12  durationInFrames,
13  variant = "editorial",
14}: {
15  durationInFrames: number;
16  variant?: TransitionVariant;
17}) {
18  if (variant === "spring") {
19    return springTiming({ config: springSmooth, durationInFrames });
20  }
21 
22  return linearTiming({
23    durationInFrames,
24    // A cut is not an entrance. `EASING_ENTER` is tuned for an element landing
25    // on a stage that is already there and reaches ~0.9 by 40% of its window —
26    // used as a transition curve it spends three quarters of the overlap with
27    // both scenes already settled, which is why every presentation looked like
28    // a hard cut. An ease-in-out carries the frame across the whole window.
29    easing: variant === "editorial" ? EASING_CUT : undefined,
30  });
31}
32 
33export type TransitionDirection =
34  TransitionPresentationComponentProps<
35    Record<string, unknown>
36  >["presentationDirection"];
37 
38export type TransitionPhase = {
39  isEntering: boolean;
40  /**
41   * How far the scene sits from its resting position, 0→1.
42   *
43   * `0` **always** means "untouched": the scene is whole, centred and sharp.
44   * `1` means fully displaced — off-stage for an entering scene that has not
45   * arrived yet, and off-stage again for an exiting scene that has left.
46   *
47   * A presentation therefore only ever scales its effect by `displace`, and
48   * never has to know which direction it is playing. This matters because
49   * `TransitionSeries` keeps a presentation mounted for the sequence's whole
50   * life and holds `presentationProgress` at 0 outside the overlap — so any
51   * effect that is non-zero at `displace === 0` is applied to the scene for
52   * every frame it is on screen, not just during the transition.
53   */
54  displace: number;
55  /** 1 = opaque. Only meaningful when the presentation opted into fading. */
56  opacity: number;
57  /** Untouched 0→1 progress of the transition itself, both directions. */
58  progress: number;
59};
60 
61export type TransitionPhaseOptions = {
62  /**
63// … truncated