tracking-in

1import { spring, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { springSmooth } from "@/remotion/lib/springs";
4 
5export type TrackingInProps = {
6  text: string;
7  durationInFrames?: number;
8  delayInFrames?: number;
9  fromTracking?: number;
10  fontSize?: number;
11  color?: string;
12  fontWeight?: number;
13  fontFamily?: string;
14};
15 
16export const TrackingIn: React.FC<TrackingInProps> = ({
17  text,
18  durationInFrames = 28,
19  delayInFrames = 0,
20  fromTracking = 0.28,
21  fontSize: fontSizeProp,
22  color = "#f4f4f5",
23  fontWeight = 600,
24  fontFamily,
25}) => {
26  const frame = useCurrentFrame();
27  const { fps, width } = useVideoConfig();
28  const fontSize = fontSizeProp ?? scaleFont(84, width);
29  const progress = spring({
30    fps,
31    frame,
32    config: springSmooth,
33    delay: delayInFrames,
34    durationInFrames,
35  });
36  const letterSpacing = `${fromTracking * (1 - progress)}em`;
37  const blur = (1 - progress) * 6;
38  const opacity = Math.min(1, progress * 1.15);
39 
40  return (
41    <span
42      style={{
43        fontSize,
44        fontWeight,
45        color,
46        lineHeight: 1.15,
47        letterSpacing,
48        opacity,
49        filter: blur > 0.1 ? `blur(${blur}px)` : undefined,
50        ...(fontFamily ? { fontFamily } : {}),
51      }}
52    >
53      {text}
54    </span>
55  );
56};