Title Card

1import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
2
3export const TitleCard = () => {
4  const frame = useCurrentFrame();
5
6  // Fade in 0-15, hold 15-75, fade out 75-90.
7  const opacity = interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0], {
8    extrapolateLeft: "clamp",
9    extrapolateRight: "clamp",
10  });
11
12  return (
13    <AbsoluteFill
14      style={{
15        backgroundColor: "#0a0a0a",
16        justifyContent: "center",
17        alignItems: "center",
18        fontFamily: "Helvetica, Arial, sans-serif",
19      }}
20    >
21      <div
22        style={{
23          fontSize: 160,
24          fontWeight: 800,
25          color: "#ffffff",
26          opacity,
27          letterSpacing: "0.05em",
28        }}
29      >
30        HELLO
31      </div>
32    </AbsoluteFill>
33  );
34};