Data Flow Pipes

Glowing data packets travel along SVG bezier pipes between system nodes, leaving fading trails.

A diagramming primitive for showing data moving through a system. Nodes are positioned absolutely; edges become SVG cubic-bezier paths with horizontally-pulled handles so the routes look like API/DB diagrams instead of straight wires. Each pulse is rendered as a bright dash that animates along the path via strokeDashoffset, with three faded ghost copies offset behind it to fake motion blur. Path arc length is sampled numerically (no DOM getTotalLength), so the math is fully render-deterministic.

Installation

$ pnpm dlx shadcn@latest add @remocn/data-flow-pipes

Usage

// 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}
  />
);

Props

Prop	Type	Default	Description
`nodes`	`DataFlowNode[]`	—	Array of `{ id, x, y, label }`. Coordinates are in the 1280×720 viewBox.
`edges`	`DataFlowEdge[]`	—	Array of `{ from, to, startFrame }`. Each edge becomes a static pipe plus an animated pulse.
`pipeColor`	`string`	`"#1f1f23"`	Color of the static pipe stroke.
`pulseColor`	`string`	`"#22d3ee"`	Color of the moving pulse and its glow.
`pulseLength`	`number`	`60`	Length of the bright dash in pixels.
`pulseDuration`	`number`	`36`	Frames a single pulse takes to traverse its edge.
`background`	`string`	`"#050505"`	Page background color.
`nodeColor`	`string`	`"#0a0a0a"`	Node card background color.
`textColor`	`string`	`"#fafafa"`	Node label color.
`speed`	`number`	`1`	Playback speed multiplier.
`className`	`string`	—	Optional className passed to the root container.

Notes

Stagger by `startFrame`

Each edge has its own startFrame. Stagger them in increments of 8–12 frames to create a chain reaction across the diagram.