Deploy Pipeline

A deployment page runs a build, streams logs and flips to Ready

Installation

$ pnpm dlx shadcn@latest add @remocn/deploy-pipeline

Usage

tsx

// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { DeployPipeline } from "@/components/remocn/deploy-pipeline";
 
const DeployPipelineScene = () => <DeployPipeline project="orbit-web" domain="orbit.app" commitMessage="feat: ship dashboard" preview={staticFile("site.png")} />;
 
export const RemotionRoot = () => (
  <Composition
    id="DeployPipeline"
    component={DeployPipelineScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A deployment page opens with the project, commit and branch, then build logs stream line by line while a build timer counts up. When the last line lands the status flips to Ready and a site preview and Visit button appear. Pass project, commitMessage, domain and logs; the preview image defaults to a staticFile("hero.png") that only exists in the Remocn repo, so pass your own screenshot as preview. It has a theme prop and ships light and dark (dark by default).

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props14

Prop	Type	Default
project	string"remocn-web" Project name shown in the deployment header.
deploymentId	string"7Hq2xKfaW" Deployment id shown in the summary.
commitMessage	string"feat: launch video components" Commit message shown under the deployment.
commitSha	string"a4f9c21" Short commit hash shown next to the branch.
branch	string"main" Git branch name.
domain	string"remocn-web.kitebase.app" Production domain shown in the summary and Visit link.
logs	(string \| DeployLogLine)[]DEFAULT_LOGS Build log lines; use `{ text, tone, wait }` to color or delay a line.
buildSeconds	number21 Duration the counter lands on, in seconds.
preview	string— Site screenshot shown once the deployment is ready.
accent	string"#3B5BFD" Accent color for links and highlights.
speed	number1 Playback speed multiplier.
theme	"light" \| "dark""dark" Light or dark palette.
ground	GshPresetId— Gradients.sh preset id for the background shader.
groundParams	Partial<GradientParams>— Overrides for the background shader parameters.

projectstring
Project name shown in the deployment header.
Default"remocn-web"
deploymentIdstring
Deployment id shown in the summary.
Default"7Hq2xKfaW"
commitMessagestring
Commit message shown under the deployment.
Default"feat: launch video components"
commitShastring
Short commit hash shown next to the branch.
Default"a4f9c21"
branchstring
Git branch name.
Default"main"
domainstring
Production domain shown in the summary and Visit link.
Default"remocn-web.kitebase.app"
logs(string | DeployLogLine)[]
Build log lines; use `{ text, tone, wait }` to color or delay a line.
DefaultDEFAULT_LOGS
buildSecondsnumber
Duration the counter lands on, in seconds.
Default21
previewstring
Site screenshot shown once the deployment is ready.
accentstring
Accent color for links and highlights.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"light" | "dark"
Light or dark palette.
Default"dark"
groundGshPresetId
Gradients.sh preset id for the background shader.
groundParamsPartial<GradientParams>
Overrides for the background shader parameters.