Graph Relayout

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

Installation

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

Props8

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

theme"dark" | "light"
Light or dark interface.
Default"dark"
accentstring
Accent color for edges and highlights.
catalogRecord<string, GraphNodeSpec>
Node specs by id: label, icons, tint, columns, input text.
DefaultDEFAULT_CATALOG
layoutsGraphLayout[]
Ordered layouts: title, node positions (0 to 1), edges, optional note.
DefaultDEFAULT_LAYOUTS
kickerstring
Small label shown above each layout title.
Default"Use case"
cursorNamestring
Name tag on the dragging cursor.
Default"Mia"
groundGshPresetId
Gradient shader preset for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.