Flow chart
Signal Flow Chart
A live throughput board where curved channel cables carry flowing particles from a source bus to value-scaled sinks.
The chart is built from handcrafted SVG: bezier cables, a gradient fill that draws to each channel's throughput, one-pass particles and a focus-aware tooltip.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover, focus, tap or select a channel to spotlight its cable and reveal the throughput tooltip.
Usage
import { SignalFlowChart } from "@/registry/new-york-v4/ui/signal-flow-chart"
<SignalFlowChart data={channels} />Signal Flow
Live throughput across service channels with flowing particles