Workflow Console

$ pnpm dlx 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

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

<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

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.

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.