strikethrough-replace

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { EASING_ENTER } from "@/remotion/lib/timing";
4 
5export type StrikethroughReplaceProps = {
6  from: string;
7  to: string;
8  strikeDurationInFrames?: number;
9  replaceDelayInFrames?: number;
10  replaceDurationInFrames?: number;
11  fontSize?: number;
12  color?: string;
13  strikeColor?: string;
14  fontWeight?: number;
15  fontFamily?: string;
16};
17 
18export const StrikethroughReplace: React.FC<StrikethroughReplaceProps> = ({
19  from,
20  to,
21  strikeDurationInFrames = 18,
22  replaceDelayInFrames = 20,
23  replaceDurationInFrames = 16,
24  fontSize: fontSizeProp,
25  color = "#f4f4f5",
26  strikeColor = "#f472b6",
27  fontWeight = 600,
28  fontFamily,
29}) => {
30  const frame = useCurrentFrame();
31  const { width } = useVideoConfig();
32  const fontSize = fontSizeProp ?? scaleFont(72, width);
33  const strikeProgress = interpolate(frame, [0, strikeDurationInFrames], [0, 1], {
34    easing: EASING_ENTER,
35    extrapolateLeft: "clamp",
36    extrapolateRight: "clamp",
37  });
38  const replaceOpacity = interpolate(
39    frame,
40    [replaceDelayInFrames, replaceDelayInFrames + replaceDurationInFrames],
41    [0, 1],
42    {
43      easing: EASING_ENTER,
44      extrapolateLeft: "clamp",
45      extrapolateRight: "clamp",
46    },
47  );
48  const fromOpacity = 1 - replaceOpacity;
49  const showStrike = frame < replaceDelayInFrames + 4;
50 
51  return (
52    <span
53      style={{
54        position: "relative",
55        display: "inline-block",
56        fontSize,
57        fontWeight,
58        lineHeight: 1.2,
59        ...(fontFamily ? { fontFamily } : {}),
60      }}
61    >
62      <span style={{ opacity: fromOpacity, color }}>{from}</span>
63      {showStrike ? (
64        <span
65          style={{
66            position: "absolute",
67            left: 0,
68            right: 0,
69            top: "52%",
70            height: 3,
71            scale: `${strikeProgress} 1`,
72            transformOrigin: "left center",
73            backgroundColor: strikeColor,
74            borderRadius: 2,
75          }}
76        />
77      ) : null}
78      <span
79        style={{
80          position: "absolute",
81          left: 0,
82          top: 0,
83          opacity: replaceOpacity,
84          color,
85        }}
86      >
87        {to}
88      </span>
89    </span>
90  );
91};