hero-device-assemble

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { DURATION } from "@/remotion/lib/motion-tokens";
5import { DeviceMockupZoom } from "@/remotion/scenes/device-mockup-zoom";
6import { TitleCard } from "@/remotion/scenes/title-card";
7 
8const SCENE_DURATIONS = {
9  title: 75,
10  device: 105,
11} as const;
12 
13const FADE = transitionFade({ durationInFrames: DURATION.fast });
14 
15export type HeroDeviceAssembleProps = {
16  title?: string;
17  subtitle?: string;
18};
19 
20export const HeroDeviceAssemble: React.FC<HeroDeviceAssembleProps> = ({
21  title = "Ship on every screen",
22  subtitle = "Device layers spring into frame",
23}) => {
24  return (
25    <AbsoluteFill style={{ background: "#080810" }}>
26      <TransitionSeries>
27        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.title}>
28          <TitleCard title={title} subtitle={subtitle} />
29        </TransitionSeries.Sequence>
30        <TransitionSeries.Transition {...FADE} />
31        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.device}>
32          <DeviceMockupZoom device="laptop" />
33        </TransitionSeries.Sequence>
34      </TransitionSeries>
35    </AbsoluteFill>
36  );
37};