Data Flow Pipes
A pipeline running end to end, with payloads hopping stage to stage.
SceneScenesAdvanced
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. |