# Deploy Pipeline
URL: https://remocn.dev/docs/product-scenes/deploy-pipeline

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

- Install: `npx shadcn@latest add @remocn/deploy-pipeline`
- Vibe: tech
- Natural length: 150f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `21` | 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` | `number` | `1` | 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. |

## Use when
- A developer-platform launch beat showing a deploy going from build to Ready.
- A CI or hosting demo where streaming build logs sell the speed of the pipeline.
- A release announcement that ends on a live site preview and a Visit button.

## Don't use when
- You want a typed terminal session instead of a deployment page — use `terminal-simulator`.
- The story is a pull request being merged — use `pr-merge`.
- You need a status page with uptime strips — use `status-page`.