Compositions
Core Primitives
Transitions
Typography
Customize
36
60
1
Installation
$ pnpm dlx shadcn@latest add @framecn/data-flow-pipes
Usage
import { DataFlowPipes } from "@/components/framecn/data-flow-pipes";<DataFlowPipes />API Reference
DataFlowPipes
| Prop | Type | Default |
|---|---|---|
nodes | DataFlowNode[] | DEFAULT_NODES |
edges | DataFlowEdge[] | DEFAULT_EDGES |
pipeColor | string | "#1f1f23" |
pulseColor | string | "#22d3ee" |
pulseLength | number | 60 |
pulseDuration | number | 36 |
background | string | "#050505" |
nodeColor | string | "#0a0a0a" |
textColor | string | "#fafafa" |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 180 |
width | number | 1280 |
height | number | 720 |
className | string | - |
Notes
Glowing data packets
Data packets with trailing tails fly along SVG pipe paths. Great for showing data pipelines or API flows.