Stargazed

1import { AbsoluteFill, Sequence } from "remotion";
2import { z } from "zod";
3import { TitleScene } from "./scenes/TitleScene";
4import { StatsScene } from "./scenes/StatsScene";
5import { OutroScene } from "./scenes/OutroScene";
6
7export const stargazedSchema = z.object({
8  title: z.string(),
9  subtitle: z.string(),
10  stats: z.array(
11    z.object({
12      label: z.string(),
13      value: z.number(),
14      color: z.string(),
15    }),
16  ),
17  outro: z.string(),
18});
19
20export const Stargazed: React.FC<z.infer<typeof stargazedSchema>> = ({
21  title,
22  subtitle,
23  stats,
24  outro,
25}) => (
26  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
27    <Sequence from={0} durationInFrames={90}>
28      <TitleScene title={title} subtitle={subtitle} />
29    </Sequence>
30    <Sequence from={90} durationInFrames={120}>
31      <StatsScene stats={stats} />
32    </Sequence>
33    <Sequence from={210} durationInFrames={90}>
34      <OutroScene text={outro} />
35    </Sequence>
36  </AbsoluteFill>
37);