# Workflow Console
URL: https://remocn.dev/docs/templates/workflow-console

An independent release-automation film with typed commands, environment diagrams, and pipeline metrics

- Install: `npx shadcn@latest add @remocn/workflow-console`
- Vibe: tech
- Natural length: 1405f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/workflow-console
```

**Workflow Console** is an independent release-automation story in navy and ice blue.
A request becomes a checked release, a canary rollout, pipeline analysis, and a worker
scaling decision. Original node diagrams replace geographic imagery by default;
the final mark uses the same connected-block visual language.

The composition contains **18 scenes**, **2810 frames at 60 fps**, **1920×1080**
(**46.83 seconds**). Commands, logs, and metrics are fictional demo content. The
picture uses editable React and SVG, with bundled Inter and Roboto Mono.

## Usage

```tsx
import { Composition } from "remotion";
import {
  WorkflowConsole, WORKFLOW_FRAMES, WORKFLOW_FPS, WORKFLOW_WIDTH, WORKFLOW_HEIGHT,
} from "@/components/remocn/templates/workflow-console";

export const Root = () => (
  <Composition
    id="WorkflowConsole"
    component={WorkflowConsole}
    durationInFrames={WORKFLOW_FRAMES}
    fps={WORKFLOW_FPS}
    width={WORKFLOW_WIDTH}
    height={WORKFLOW_HEIGHT}
    defaultProps={{}}
  />
);
```

## Customize

```tsx
<WorkflowConsole
  productName="Your workflow"
  accentColor="#8ed8f8"
  backgroundColor="#0e1b2b"
  content={{
    command: "prepare the next release. run checks, then deploy to staging.",
    geography: "Release environments",
    campaign: "Release v3",
    terminalTitle: "workspace　~/releases/v3",
    chartTitle: "Completed jobs per hour",
    closing: "Keep your work moving",
  }}
  environments={[
    { label: "Preview", topology: "single" },
    { label: "Staging", topology: "parallel" },
    { label: "Production", topology: "cluster" },
    { label: "Canary", topology: "canary" },
  ]}
  bars={[
    { label: "Before", value: 24, detail: "24 jobs / h" },
    { label: "After", value: 72, detail: "72 jobs / h" },
  ]}
/>
```

`content` overrides every main title and response. Existing field names such as
`campaign`, `budgetLabel`, and `doubleCommand` are preserved for compatibility;
their defaults now describe releases, workers, and scaling. `tools` replaces
the execution-log labels. `terminalRows` accepts timed rows for `campaign`,
`launched`, and `stats`; each row has `at` (seconds relative to its scene),
`text`, optional `kind`, and optional `highlight`.

`environments` supports four code-native topologies: `single`, `parallel`,
`cluster`, and `canary`. Empty lists retain useful defaults.
The legacy `countries` prop still supports `USA`, `Brazil`, `UAE`, `India`,
`Japan`, and `China`. Explicit valid countries show the map carousel unless
valid environments are also supplied. No maps appear in the default film.

`bars` accepts up to eight nonnegative finite values. `logoSrc` replaces the
original node mark. `audioSrc` and `volume` add your own licensed soundtrack.
The default install is silent, self-contained, and needs no source MP4.

## Scene timing

| Chapters | Time |
| --- | --- |
| Introduction and release request | 0–6.40s |
| Context loading and analysis | 6.40–10.70s |
| Ship command and environments | 10.70–16.80s |
| Tool execution and rollout | 16.80–24.00s |
| Pipeline title, loading, and metrics | 24.00–31.40s |
| Recommendation and scaling command | 31.40–38.80s |
| Throughput chart | 38.80–40.80s |
| Closing title and mark | 40.80–46.83s |

All animation derives from the current frame. The 18 explicit sequences remain
individually visible in Studio. The 480×270 design space scales uniformly.

## Compatibility and preview

Install with the registry ID `workflow-console` and import `WorkflowConsole`.
The former X Ads MCP registry item has been renamed. The scene IDs remain stable.

```bash
bun run studio:workflow-console
bun run review:independent-templates --only=workflow-console
bun run render:independent-templates --only=workflow-console
```

The independent render writes `out/workflow-console.mp4`.

## Use when
- You want a complete 46.8-second CLI or automation demo with editable commands and results.
- Your story moves from a natural-language request to execution, analysis, and improvement.

## Don't use when
- You only need one scrolling command; use `terminal-cursor-zoom`.
- You want a photographic product montage; use `launch-anything`.