landing-code-showcase

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { CodeReveal } from "@/remotion/scenes/code-reveal";
5import { TitleCard } from "@/remotion/scenes/title-card";
6import { DURATION } from "@/remotion/lib/motion-tokens";
7 
8const CODE = `npx remotion-ui@latest add hero-loop
9pnpm remotion render src/index.ts HeroLoop out/hero.mp4`;
10 
11const SCENE_DURATIONS = {
12  title: 75,
13  code: 105,
14} as const;
15 
16export const LandingCodeShowcase: React.FC = () => {
17  const fade = transitionFade({ durationInFrames: DURATION.fast });
18 
19  return (
20    <AbsoluteFill style={{ background: "#080810" }}>
21      <TransitionSeries>
22        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.title}>
23          <TitleCard title="Install. Edit. Render." subtitle="Source you own" />
24        </TransitionSeries.Sequence>
25        <TransitionSeries.Transition {...fade} />
26        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.code}>
27          <CodeReveal code={CODE} title="install.sh" language="bash" />
28        </TransitionSeries.Sequence>
29      </TransitionSeries>
30    </AbsoluteFill>
31  );
32};