Terminal To Browser Deploy

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

A composition that pairs a build log with a celebratory reveal. The terminal types out a deploy sequence, and the moment the success line lands, the terminal scales down and blurs while a fully formed browser window springs out from exactly the URL that was just printed — making the deployed site feel like it physically emerged from the command that shipped it.

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.

Notes

The browser grows from the URL, not the screen center

The browser window's transform-origin is computed from the pixel position of the URL line inside the terminal body. As scale springs from 0 to 1, the window literally unfurls out of the success line — sell the gag by keeping the terminal visible (just blurred and dimmed) behind it.