Browser Flow

A full Safari/Chrome simulation from URL typing to scroll and click

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

Infinite Bento Pan

A hypnotic diagonal camera glide over an oversized grid of bento cards

AI Generation Canvas

A prompt input morphs into a dashboard header, then skeletons flip to reveal generated content