Fade Through

1"use client";
2 
3import { Easing, interpolate, useCurrentFrame } from "remotion";
4 
5export interface FadeThroughProps {
6  fromText: string;
7  toText: string;
8  fontSize?: number;
9  color?: string;
10  fontWeight?: number;
11  speed?: number;
12  className?: string;
13}
14 
15export function FadeThrough({
16  fromText,
17  toText,
18  fontSize = 72,
19  color = "#171717",
20  fontWeight = 600,
21  speed = 1,
22  className,
23}: FadeThroughProps) {
24  const frame = useCurrentFrame() * speed;
25 
26  const exitDur = 8;
27  const enterDur = 13;
28  const overlapF = 1;
29  const microDelayF = 2;
30 
31  const exitTotal = exitDur;
32  const newStart = Math.max(0, exitTotal - overlapF + microDelayF);
33 
34  const exitEasing = Easing.bezier(0.4, 0, 1, 1);
35  const enterEasing = Easing.bezier(0.2, 0, 0, 1);
36 
37  const fromOpacity = interpolate(frame, [0, exitDur], [1, 0], {
38    extrapolateLeft: "clamp",
39    extrapolateRight: "clamp",
40    easing: exitEasing,
41  });
42  const fromY = interpolate(frame, [0, exitDur], [0, -4], {
43    extrapolateLeft: "clamp",
44    extrapolateRight: "clamp",
45    easing: exitEasing,
46  });
47 
48  const local = frame - newStart;
49  const toOpacity = interpolate(local, [0, enterDur], [0, 1], {
50    extrapolateLeft: "clamp",
51    extrapolateRight: "clamp",
52    easing: enterEasing,
53  });
54  const toY = interpolate(local, [0, enterDur], [6, 0], {
55    extrapolateLeft: "clamp",
56    extrapolateRight: "clamp",
57    easing: enterEasing,
58  });
59  const toScale = interpolate(local, [0, enterDur], [0.99, 1], {
60    extrapolateLeft: "clamp",
61    extrapolateRight: "clamp",
62    easing: enterEasing,
63  });
64  const blurVal = interpolate(local, [0, enterDur], [2, 0], {
65    extrapolateLeft: "clamp",
66    extrapolateRight: "clamp",
67    easing: enterEasing,
68  });
69 
70  const fontStack =
71    "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
72 
73  return (
74    <div
75      className={className}
76      style={{
77        position: "absolute",
78        inset: 0,
79        background: "transparent",
80      }}
81    >
82      <div
83        style={{
84          position: "absolute",
85          inset: 0,
86          display: "flex",
87          alignItems: "center",
88          justifyContent: "center",
89        }}
90      >
91        <span
92          style={{
93            fontSize,
94            fontWeight,
95            color,
96            letterSpacing: "-0.03em",
97            fontFamily: fontStack,
98            display: "inline-block",
99            transformOrigin: "50% 50%",
100            opacity: fromOpacity,
101            transform: `translateY(${fromY}px)`,
102// … truncated