light-sweep-text

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { EASING } from "@/remotion/lib/motion-tokens";
4 
5export type LightSweepTextProps = {
6  text: string;
7  durationInFrames?: number;
8  delayInFrames?: number;
9  baseColor?: string;
10  shineColor?: string;
11  fontSize?: number;
12  fontWeight?: number;
13  fontFamily?: string;
14};
15 
16export const LightSweepText: React.FC<LightSweepTextProps> = ({
17  text,
18  durationInFrames = 48,
19  delayInFrames = 0,
20  baseColor = "#71717a",
21  shineColor = "#fafafa",
22  fontSize: fontSizeProp,
23  fontWeight = 700,
24  fontFamily,
25}) => {
26  const frame = useCurrentFrame();
27  const { width } = useVideoConfig();
28  const fontSize = fontSizeProp ?? scaleFont(84, width);
29  const sweep = interpolate(
30    frame,
31    [delayInFrames, delayInFrames + durationInFrames],
32    [120, -20],
33    {
34      easing: EASING.editorial,
35      extrapolateLeft: "clamp",
36      extrapolateRight: "clamp",
37    },
38  );
39 
40  return (
41    <span
42      style={{
43        fontSize,
44        fontWeight,
45        lineHeight: 1.1,
46        backgroundImage: `linear-gradient(105deg, ${baseColor} 0%, ${baseColor} 42%, ${shineColor} 50%, ${baseColor} 58%, ${baseColor} 100%)`,
47        backgroundSize: "220% 100%",
48        backgroundPosition: `${sweep}% 0`,
49        WebkitBackgroundClip: "text",
50        backgroundClip: "text",
51        color: "transparent",
52        ...(fontFamily ? { fontFamily } : {}),
53      }}
54    >
55      {text}
56    </span>
57  );
58};