# Graph Relayout
URL: https://remocn.dev/docs/product-scenes/graph-relayout

A node graph rearranges itself through several layouts as nodes slide, appear and reconnect

- Install: `npx shadcn@latest add @remocn/graph-relayout`
- Vibe: tech
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/graph-relayout
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GraphRelayout } from "@/components/remocn/graph-relayout";

const GraphRelayoutScene = () => (
  <GraphRelayout theme="light" kicker="Workflow" cursorName="Sam" />
);

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

A graph starts with a prompt node and a short chain, then each layout step moves nodes into new positions while a named cursor drags one of them, with nodes entering, leaving and edges rewiring. Each layout carries a title that changes as the graph does. Pass `layouts` (positions and edges per step) with a `catalog` of node specs to describe your own pipeline; `kicker` and `cursorName` set the label and cursor tag. It ships light and dark through `theme`.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark interface. |
| `accent` | `string` | — | Accent color for edges and highlights. |
| `catalog` | `Record<string, GraphNodeSpec>` | `DEFAULT_CATALOG` | Node specs by id: label, icons, tint, columns, input text. |
| `layouts` | `GraphLayout[]` | `DEFAULT_LAYOUTS` | Ordered layouts: title, node positions (0 to 1), edges, optional note. |
| `kicker` | `string` | `"Use case"` | Small label shown above each layout title. |
| `cursorName` | `string` | `"Mia"` | Name tag on the dragging cursor. |
| `ground` | `GshPresetId` | — | Gradient shader preset for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A beat explaining how one prompt fans out into many outputs, with the pipeline reshaping at each step.
- A node-based workflow product showing the same graph adapting to different use cases.
- A feature video where a cursor drags nodes and the whole flow visibly re-lays itself out.

## Don't use when
- You only need one prompt trailing dotted lines into a fixed chain of steps — use `node-trail`.
- The nodes should be a build-it-yourself canvas rather than a re-layout — use `flow-builder`.
- The result should be an actual app being generated — use `prompt-to-app`.