deploy-reveal

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { DURATION } from "@/remotion/lib/motion-tokens";
5import { TerminalSimulator } from "@/remotion/scenes/terminal-simulator";
6import { DeviceMockupZoom } from "@/remotion/scenes/device-mockup-zoom";
7 
8const SCENE_DURATIONS = {
9  terminal: 90,
10  device: 90,
11} as const;
12 
13const FADE = transitionFade({ durationInFrames: DURATION.fast });
14 
15export const DeployReveal: React.FC = () => {
16  return (
17    <AbsoluteFill style={{ background: "#080810" }}>
18      <TransitionSeries>
19        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.terminal}>
20          {/* 90 frames — sped up so the prompt returns before the transition. */}
21          <TerminalSimulator
22            title="Deploy"
23            command="vercel deploy --prod"
24            steps={[
25              { text: "uploading build output", duration: "1.2s" },
26              { text: "assigning production domain", duration: "340ms" },
27            ]}
28            summary="live in 4.2s"
29            speed={1.7}
30          />
31        </TransitionSeries.Sequence>
32        <TransitionSeries.Transition {...FADE} />
33        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.device}>
34          <DeviceMockupZoom device="laptop" />
35        </TransitionSeries.Sequence>
36      </TransitionSeries>
37    </AbsoluteFill>
38  );
39};