Title Scene

1import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2
3interface Props {
4  title: string;
5  subtitle: string;
6}
7
8export const TitleScene: React.FC<Props> = ({ title, subtitle }) => {
9  const frame = useCurrentFrame();
10  const { fps } = useVideoConfig();
11
12  const titleScale = spring({
13    frame,
14    fps,
15    config: { damping: 12, stiffness: 100, mass: 1 },
16  });
17  const subtitleOpacity = interpolate(frame, [20, 40], [0, 1], {
18    extrapolateLeft: "clamp",
19    extrapolateRight: "clamp",
20  });
21
22  return (
23    <AbsoluteFill
24      style={{
25        justifyContent: "center",
26        alignItems: "center",
27        flexDirection: "column",
28        fontFamily: "Helvetica, Arial, sans-serif",
29      }}
30    >
31      <div
32        style={{
33          fontSize: 160,
34          fontWeight: 900,
35          color: "#ffffff",
36          letterSpacing: "0.05em",
37          transform: `scale(${titleScale})`,
38        }}
39      >
40        {title}
41      </div>
42      <div
43        style={{
44          fontSize: 36,
45          fontWeight: 400,
46          color: "#9ca3af",
47          marginTop: 24,
48          opacity: subtitleOpacity,
49        }}
50      >
51        {subtitle}
52      </div>
53    </AbsoluteFill>
54  );
55};