browser-flow

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { DURATION } from "@/remotion/lib/motion-tokens";
5import { ChatToPreview } from "@/remotion/scenes/chat-to-preview";
6import { TitleCard } from "@/remotion/scenes/title-card";
7 
8const SCENE_DURATIONS = {
9  title: 60,
10  preview: 120,
11} as const;
12 
13const FADE = transitionFade({ durationInFrames: DURATION.fast });
14 
15export type BrowserFlowProps = {
16  url?: string;
17  title?: string;
18};
19 
20export const BrowserFlow: React.FC<BrowserFlowProps> = ({
21  url = "remotionui.com/docs",
22  title = "Browse the registry",
23}) => {
24  return (
25    <AbsoluteFill style={{ background: "#080810" }}>
26      <TransitionSeries>
27        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.title}>
28          <TitleCard title={title} subtitle={url} />
29        </TransitionSeries.Sequence>
30        <TransitionSeries.Transition {...FADE} />
31        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.preview}>
32          <ChatToPreview
33            messages={[{ role: "user", text: `Open ${url}` }]}
34            previewTitle="Docs preview"
35          />
36        </TransitionSeries.Sequence>
37      </TransitionSeries>
38    </AbsoluteFill>
39  );
40};