fade-out

1import type { CSSProperties, ReactNode } from "react";
2import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
3import { MotionWrapper } from "@/remotion/lib/motion-wrapper";
4import { EASING_EXIT } from "@/remotion/lib/timing";
5 
6export type FadeOutProps = {
7  children: ReactNode;
8  /** Length of the fade in frames. */
9  durationInFrames?: number;
10  /**
11   * Frame the fade starts on. Left out, it lands on the last frame of the
12   * surrounding `<Sequence>` — the usual intent, and one less number to keep
13   * in sync when the window changes.
14   */
15  delayInFrames?: number;
16  /** Opacity it holds before the fade. */
17  from?: number;
18  /** Opacity it ends on. */
19  to?: number;
20  block?: boolean;
21  style?: CSSProperties;
22  className?: string;
23};
24 
25/**
26 * Holds, then leaves on an ease-in curve — an exit accelerates away, it never
27 * decelerates into nothing.
28 */
29export const FadeOut: React.FC<FadeOutProps> = ({
30  children,
31  durationInFrames = 30,
32  delayInFrames,
33  from = 1,
34  to = 0,
35  block,
36  style,
37  className,
38}) => {
39  const frame = useCurrentFrame();
40  const { durationInFrames: windowFrames } = useVideoConfig();
41 
42  const duration = Math.max(1, Math.round(durationInFrames));
43  const start =
44    delayInFrames ??
45    (Number.isFinite(windowFrames) ? Math.max(0, windowFrames - duration) : 0);
46 
47  const opacity = interpolate(frame, [start, start + duration], [from, to], {
48    easing: EASING_EXIT,
49    extrapolateLeft: "clamp",
50    extrapolateRight: "clamp",
51  });
52 
53  return (
54    <MotionWrapper block={block} className={className} style={{ ...style, opacity }}>
55      {children}
56    </MotionWrapper>
57  );
58};