live-code-split

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { CodeReveal } from "@/remotion/scenes/code-reveal";
5import { DeviceMockupZoom } from "@/remotion/scenes/device-mockup-zoom";
6import { DURATION } from "@/remotion/lib/motion-tokens";
7 
8const SAMPLE = `export const Clip = () => (
9  <TitleCard title="Live preview" />
10);`;
11 
12const SCENE_DURATIONS = {
13  code: 90,
14  device: 90,
15} as const;
16 
17export type LiveCodeSplitProps = {
18  code?: string;
19};
20 
21export const LiveCodeSplit: React.FC<LiveCodeSplitProps> = ({
22  code = SAMPLE,
23}) => {
24  const fade = transitionFade({ durationInFrames: DURATION.fast });
25 
26  return (
27    <AbsoluteFill style={{ background: "#080810" }}>
28      <TransitionSeries>
29        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.code}>
30          <CodeReveal code={code} title="Composition.tsx" />
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};