Browser Flow · remocn

Installation

$ pnpm dlx shadcn@latest add @remocn/browser-flow

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { BrowserFlow } from "@/components/remocn/browser-flow";

const BrowserFlowScene = () => (
  <BrowserFlow url="remocn.dev" />
);

export const RemotionRoot = () => (
  <Composition
    id="BrowserFlow"
    component={BrowserFlowScene}
    durationInFrames={270}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

import { Backdrop } from "@/components/remocn/backdrop";
import { BrowserFlow } from "@/components/remocn/browser-flow";

<Backdrop fill={{ type: "gradient", value: "radial-gradient(ellipse at center, #11141c 0%, #050505 75%)" }}>
  <BrowserFlow url="remocn.dev" />
</Backdrop>

Props

Prop	Type	Default	Description
`url`	`string`	`"remocn.dev"`	The URL typed into the address bar and used in the autocomplete suggestion
`speed`	`number`	`1`	Multiplier applied to the current frame to slow down or speed up the entire sequence
`className`	`string`	—	Optional className for the outer container