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 entirely from handcrafted SVG: bezier cables, a gradient fill that draws to each channel's throughput, SMIL particle streams whose speed and count track the value, pulsing source and sink nodes and a focus-aware tooltip.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus a channel to spotlight its cable, glow the flowing particles 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