Multi Scene

1import {
2  AbsoluteFill,
3  Audio,
4  Img,
5  Sequence,
6  interpolate,
7  spring,
8  staticFile,
9  useCurrentFrame,
10  useVideoConfig,
11} from "remotion";
12
13const TitleScene = () => {
14  const frame = useCurrentFrame();
15  const { fps } = useVideoConfig();
16  const scale = spring({ frame, fps, config: { damping: 12, stiffness: 100, mass: 1 } });
17  return (
18    <AbsoluteFill
19      style={{
20        backgroundColor: "#0a0a0a",
21        justifyContent: "center",
22        alignItems: "center",
23        fontFamily: "Helvetica, Arial, sans-serif",
24      }}
25    >
26      <div
27        style={{
28          fontSize: 140,
29          fontWeight: 800,
30          color: "#ffffff",
31          transform: `scale(${scale})`,
32          letterSpacing: "0.05em",
33        }}
34      >
35        Welcome
36      </div>
37    </AbsoluteFill>
38  );
39};
40
41const ImageScene = () => {
42  const frame = useCurrentFrame();
43  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
44  const scale = interpolate(frame, [0, 60], [0.8, 1.0], { extrapolateRight: "clamp" });
45  return (
46    <AbsoluteFill
47      style={{
48        backgroundColor: "#0a0a0a",
49        justifyContent: "center",
50        alignItems: "center",
51      }}
52    >
53      <Img
54        src={staticFile("square.png")}
55        style={{
56          width: 200,
57          height: 200,
58          opacity,
59          transform: `scale(${scale})`,
60        }}
61      />
62    </AbsoluteFill>
63  );
64};
65
66const OutroScene = () => {
67  const frame = useCurrentFrame();
68  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
69  return (
70    <AbsoluteFill
71      style={{
72        backgroundColor: "#0a0a0a",
73        justifyContent: "center",
74        alignItems: "center",
75        fontFamily: "Helvetica, Arial, sans-serif",
76      }}
77    >
78      <div
79        style={{
80          fontSize: 100,
81          fontWeight: 600,
82          color: "#ffffff",
83          opacity,
84        }}
85      >
86        Goodbye
87      </div>
88    </AbsoluteFill>
89  );
90};
91
92export const MultiScene = () => (
93  <AbsoluteFill>
94    <Sequence from={0} durationInFrames={60}>
95      <TitleScene />
96    </Sequence>
97    <Sequence from={60} durationInFrames={60}>
98      <ImageScene />
99    </Sequence>
100    <Sequence from={120} durationInFrames={60}>
101      <OutroScene />
102    </Sequence>
103    <Audio src={staticFile("music.wav")} volume={0.5} />
104  </AbsoluteFill>
105);