Flow Builder

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

Installation

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

Props9

Prop	Type	Default
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	number1 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

nodesFlowNode[]
Graph nodes: id, title, subtitle, icon, color, duration, next ids
DefaultDEFAULT_NODES
titlestring
Workflow name in the window title bar
Default"Welcome new signups"
workspacestring
Workspace name in the breadcrumb
Default"remocn"
toaststring
Text of the confirmation toast after Publish
Default"Live · runs on every signup"
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters