# Flow Builder
URL: https://remocn.dev/docs/product-scenes/flow-builder

A workflow canvas drops nodes, connects them, runs a packet through, and publishes with a toast.

- Install: `npx shadcn@latest add @remocn/flow-builder`
- Vibe: clean
- Natural length: 186f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/flow-builder
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlowBuilder } from "@/components/remocn/flow-builder";

const FlowBuilderScene = () => (
  <FlowBuilder
    title="Welcome new signups"
    workspace="acme"
    toast="Live · runs on every signup"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="FlowBuilder"
    component={FlowBuilderScene}
    durationInFrames={205}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A workflow window drops in nodes one by one with connecting curves; the cursor presses Run, a packet travels through each node and its run time appears, then Publish is clicked and a toast confirms the flow is live. Pass `nodes` (id, title, subtitle, icon, color, duration and `next` ids) to define your own graph, plus `title` and `toast`. Ships light and dark.

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 |
|---|---|---|---|
| `nodes` | `FlowNode[]` | `DEFAULT_NODES` | Graph nodes: id, title, subtitle, icon, color, duration, next ids |
| `title` | `string` | `"Welcome new signups"` | Workflow name in the window title bar |
| `workspace` | `string` | `"remocn"` | Workspace name in the breadcrumb |
| `toast` | `string` | `"Live · runs on every signup"` | Text of the confirmation toast after Publish |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- An automation or workflow-builder launch where a graph must read as buildable in seconds.
- A beat that proves a flow actually runs: a packet passes, timings appear, then publish.
- A branching scenario where one node fans into two to explain conditional logic.

## Don't use when
- The graph is generated from a prompt with dotted trail lines — use `node-trail`.
- You want an existing graph to re-arrange itself — use `graph-relayout`.
- You want build logs and a deploy status — use `deploy-pipeline`.