intro

1import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
2import { FadeOut } from "@/remotion/primitives/fade-out";
3import { DELAY } from "@/remotion/lib/motion-tokens";
4import { TitleCard } from "@/remotion/scenes/title-card";
5 
6const COLORS = {
7  bg: "#080810",
8  accent: "#e8b86d",
9  subtitle: "#71717a",
10} as const;
11 
12export type IntroProps = {
13  title?: string;
14  subtitle?: string;
15  backgroundColor?: string;
16  accentColor?: string;
17};
18 
19export const Intro: React.FC<IntroProps> = ({
20  title = "Chapter open",
21  subtitle = "Name the topic before the walkthrough begins",
22  backgroundColor = COLORS.bg,
23  accentColor = COLORS.accent,
24}) => {
25  const { fps } = useVideoConfig();
26  const premountFor = Math.round(fps * 0.5) + DELAY.short;
27 
28  return (
29    <AbsoluteFill
30      style={{
31        backgroundColor,
32        backgroundImage:
33          "radial-gradient(ellipse 70% 55% at 50% 40%, rgba(232,184,109,0.08), transparent)",
34      }}
35    >
36      <Sequence durationInFrames={120} premountFor={premountFor}>
37        <TitleCard
38          title={title}
39          subtitle={subtitle}
40          backgroundColor={backgroundColor}
41          accentColor={accentColor}
42        />
43      </Sequence>
44      <Sequence from={120} durationInFrames={30} premountFor={premountFor}>
45        <FadeOut durationInFrames={30}>
46          <TitleCard
47            title={title}
48            subtitle={subtitle}
49            backgroundColor={backgroundColor}
50            accentColor={accentColor}
51          />
52        </FadeOut>
53      </Sequence>
54    </AbsoluteFill>
55  );
56};