Data Flow Pipes
A pipeline running end to end, with payloads hopping stage to stage.
SceneAdvanced
data-flow-pipes30fps · 960×540
Install
$ npx remotion-ui@latest add data-flow-pipesStages come up in dependency order, the pipes draw between them, and a stream of payloads travels hop by hop (lighting each stage as it lands, ticking that stage's tally, and filling its progress line) until the last stage drains and checks off.
stages takes two to five { label, detail } entries, packets sets how many
payloads are pushed through, and unit names what is being counted.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/data-flow-pipes- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: stages, unit, packets, accentColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { DataFlowPipes } from "@/remotion/scenes/data-flow-pipes";
<DataFlowPipes stages={[{ label: "Ingest" }, { label: "Deliver" }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| stages | PipeStage[] | - | Stages in order, each { label, detail }. Two to five read best. |
| unit | string | "clips" | Unit counted at each stage. |
| packets | number | 9 | Payloads pushed through the pipeline. |
| accentColor | string | "#2DD4BF" | Pipe, packet, and node colour. |
| backgroundColor | string | - | Overrides the page background. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |