Terminal To Browser Deploy

A CLI deploy completes and the live site grows out of the URL printed in the console

Installation

$ pnpm dlx shadcn@latest add @remocn/terminal-to-browser-deploy

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { TerminalToBrowserDeploy } from "@/components/remocn/terminal-to-browser-deploy";

const TerminalToBrowserDeployScene = () => (
  <TerminalToBrowserDeploy
    siteUrl="https://app.example.com"
    accentColor="#22c55e"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="TerminalToBrowserDeploy"
    component={TerminalToBrowserDeployScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`siteUrl`	`string`	`"https://app.example.com"`	URL printed in the deploy success line and shown in the browser address bar
`accentColor`	`string`	`"#22c55e"`	Accent color used for the success line, CTA button, and ambient glow inside the browser
`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