Browser Flow · remocn

A complete browser interaction in one block. The address bar takes focus, the URL types itself in (with an autocomplete suggestion that follows along), the loading bar stalls at 15% before snapping to 100%, the page renders, and a virtual cursor arcs down toward a CTA — clicking it with a real scale dip and a synchronous press on the button. Every phase is frame-deterministic.

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}
  />
);

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.

Notes

The 15% stall is what sells it

Real browsers fake progress. The loading bar jumps to 15% on Enter, holds there for half a second of suspense, then races to 100%. Removing that pause makes the whole flow feel synthetic — keep it.