Data Flow Pipes

// src/Root.tsx
import { Composition } from "remotion";
import { DataFlowPipes } from "@/components/remocn/data-flow-pipes";

const DataFlowPipesScene = () => (
  <DataFlowPipes
    nodes={[
      { id: "client", x: 140, y: 360, label: "Client" },
      { id: "api", x: 460, y: 200, label: "API" },
      { id: "db", x: 820, y: 360, label: "Database" },
    ]}
    edges={[
      { from: "client", to: "api", startFrame: 0 },
      { from: "api", to: "db", startFrame: 18 },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="DataFlowPipes"
    component={DataFlowPipesScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);