transition-fade

1import type { TransitionPresentation } from "@remotion/transitions";
2import { AbsoluteFill, interpolate } from "remotion";
3import {
4  resolveTransitionTiming,
5  transitionPhase,
6  type TransitionVariant,
7} from "@/remotion/lib/transition-timing";
8 
9export type FadeProps = {
10  /** Colour the cut passes through. Undefined crossfades the scenes directly. */
11  dipTo?: string;
12};
13 
14/**
15 * Dip to colour: the outgoing scene sinks into `dipTo`, the frame holds that
16 * colour for an instant, and the incoming scene rises back out of it. Each
17 * scene paints its own colour layer, so the dip is opaque at the midpoint
18 * whatever is behind the transition.
19 */
20const FadePresentation: React.FC<
21  React.ComponentProps<
22    NonNullable<TransitionPresentation<FadeProps>["component"]>
23  >
24> = ({
25  children,
26  presentationProgress,
27  presentationDirection,
28  passedProps: { dipTo },
29}) => {
30  const phase = transitionPhase(presentationProgress, presentationDirection, {
31    lead: 1,
32    fade: true,
33  });
34 
35  if (dipTo === undefined) {
36    return <AbsoluteFill style={{ opacity: phase.opacity }}>{children}</AbsoluteFill>;
37  }
38  // Reaches full colour by the halfway point rather than at the very end, so
39  // the two half-covered scenes meet as one opaque field instead of a muddy
40  // 75% blend of both.
41  const veil = interpolate(phase.displace, [0, 0.5, 1], [0, 1, 1], {
42    extrapolateLeft: "clamp",
43    extrapolateRight: "clamp",
44  });
45 
46  return (
47    <AbsoluteFill>
48      {children}
49      <AbsoluteFill style={{ background: dipTo, opacity: veil }} />
50    </AbsoluteFill>
51  );
52};
53 
54export function crossfade(
55  props: FadeProps = {},
56): TransitionPresentation<FadeProps> {
57  return { component: FadePresentation, props };
58}
59 
60export type TransitionFadeConfig = {
61  durationInFrames?: number;
62  /** `spring` uses organic motion; `editorial` ease-out; `linear` is constant speed */
63  variant?: TransitionVariant;
64  /**
65   * Pass a colour to dip through it instead of crossfading the two scenes
66   * directly — the classic dip to black between beats.
67   */
68  dipTo?: string;
69};
70 
71/** Fade transition config for use with TransitionSeries.Transition */
72export function transitionFade({
73  durationInFrames = 18,
74  variant = "editorial",
75  dipTo,
76}: TransitionFadeConfig = {}) {
77  return {
78    presentation: crossfade({ dipTo }),
79    timing: resolveTransitionTiming({ durationInFrames, variant }),
80  };
81}
82 
83/** Total overlap frames consumed by a transition (for composition duration math) */
84// … truncated