1// AbsoluteFill, useCurrentFrame, interpolate, useVideoConfig
2// are automatically available (no need to import)
3
4const MyComposition = () => {
5  const frame = useCurrentFrame();
6
7  const opacity = interpolate(frame, [0, 30], [0, 1], {
8    extrapolateRight: 'clamp'
9  });
10
11  const scale = interpolate(frame, [0, 60], [0.5, 1], {
12    extrapolateRight: 'clamp'
13  });
14
15  return (
16    <AbsoluteFill
17      style={{
18        backgroundColor: '#4F46E5',
19        justifyContent: 'center',
20        alignItems: 'center',
21      }}
22    >
23      <div
24        style={{
25          opacity,
26          transform: `scale(${scale})`,
27          color: 'white',
28          fontSize: '60px',
29          fontWeight: 'bold',
30          textAlign: 'center',
31        }}
32      >
33        Welcome To Remotion.cool
34      </div>
35    </AbsoluteFill>
36  );
37};