staggered-fade-up

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { EASING_ENTER, staggerDelay } from "@/remotion/lib/timing";
4 
5export type StaggeredFadeUpProps = {
6  text: string;
7  staggerInFrames?: number;
8  durationInFrames?: number;
9  delayInFrames?: number;
10  fontSize?: number;
11  color?: string;
12  fontWeight?: number;
13  fontFamily?: string;
14};
15 
16export const StaggeredFadeUp: React.FC<StaggeredFadeUpProps> = ({
17  text,
18  staggerInFrames = 4,
19  durationInFrames = 16,
20  delayInFrames = 0,
21  fontSize: fontSizeProp,
22  color = "#f4f4f5",
23  fontWeight = 600,
24  fontFamily,
25}) => {
26  const frame = useCurrentFrame();
27  const { width } = useVideoConfig();
28  const fontSize = fontSizeProp ?? scaleFont(72, width);
29  const words = text.split(/\s+/).filter(Boolean);
30 
31  return (
32    <span
33      style={{
34        display: "inline-flex",
35        flexWrap: "wrap",
36        gap: "0.28em",
37        fontSize,
38        fontWeight,
39        color,
40        lineHeight: 1.2,
41        ...(fontFamily ? { fontFamily } : {}),
42      }}
43    >
44      {words.map((word, index) => {
45        const start = staggerDelay(index, staggerInFrames, delayInFrames);
46        const progress = interpolate(
47          frame,
48          [start, start + durationInFrames],
49          [0, 1],
50          {
51            easing: EASING_ENTER,
52            extrapolateLeft: "clamp",
53            extrapolateRight: "clamp",
54          },
55        );
56        const y = interpolate(progress, [0, 1], [18, 0]);
57 
58        return (
59          <span
60            key={`${word}-${index}`}
61            style={{
62              display: "inline-block",
63              opacity: progress,
64              translate: `0px ${y}px`,
65            }}
66          >
67            {word}
68          </span>
69        );
70      })}
71    </span>
72  );
73};