1import { spring } from "remotion";
2import {
3  AbsoluteFill,
4  interpolate,
5  Sequence,
6  useCurrentFrame,
7  useVideoConfig,
8} from "remotion";
9import { Logo } from "./HelloWorld/Logo";
10import { Subtitle } from "./HelloWorld/Subtitle";
11import { Title } from "./HelloWorld/Title";
12import { z } from "zod";
13import { zColor } from "@remotion/zod-types";
14
15export const myCompSchema = z.object({
16  titleText: z.string(),
17  titleColor: zColor(),
18  logoColor1: zColor(),
19  logoColor2: zColor(),
20});
21
22export const HelloWorld: React.FC<z.infer<typeof myCompSchema>> = ({
23  titleText: propOne,
24  titleColor: propTwo,
25  logoColor1,
26  logoColor2,
27}) => {
28  const frame = useCurrentFrame();
29  const { durationInFrames, fps } = useVideoConfig();
30
31  // Animate from 0 to 1 after 25 frames
32  const logoTranslationProgress = spring({
33    frame: frame - 25,
34    fps,
35    config: {
36      damping: 100,
37    },
38  });
39
40  // Move the logo up by 150 pixels once the transition starts
41  const logoTranslation = interpolate(
42    logoTranslationProgress,
43    [0, 1],
44    [0, -150],
45  );
46
47  // Fade out the animation at the end
48  const opacity = interpolate(
49    frame,
50    [durationInFrames - 25, durationInFrames - 15],
51    [1, 0],
52    {
53      extrapolateLeft: "clamp",
54      extrapolateRight: "clamp",
55    },
56  );
57
58  // A <AbsoluteFill> is just a absolutely positioned <div>!
59  return (
60    <AbsoluteFill style={{ backgroundColor: "white" }}>
61      <AbsoluteFill style={{ opacity }}>
62        <AbsoluteFill style={{ transform: `translateY(${logoTranslation}px)` }}>
63          <Logo logoColor1={logoColor1} logoColor2={logoColor2} />
64        </AbsoluteFill>
65        {/* Sequences can shift the time for its children! */}
66        <Sequence from={35}>
67          <Title titleText={propOne} titleColor={propTwo} />
68        </Sequence>
69        {/* The subtitle will only enter on the 75th frame. */}
70        <Sequence from={75}>
71          <Subtitle />
72        </Sequence>
73      </AbsoluteFill>
74    </AbsoluteFill>
75  );
76};
77