What it does
Sankey Flow Diagram shows where things come from and where they go — traffic sources to landing pages to sign-ups, budget to channels to results, customers through a journey. You only list the flows (From, To, Value). The component finds the nodes, sorts them into columns, sizes every ribbon by its value and draws smooth curved bands. No manual positioning, no nested frames.
Hover any node or ribbon and the whole path it belongs to lights up while everything else fades back.
Perfect for marketing reports, case studies, finance and budget pages, product analytics and investor decks built in Framer.
Customizable properties
- Links — From, To and Value for each flow (same name = same node)
- Direction — Horizontal, or Vertical for mobile layouts
- Labels — Name, Name + Value, Name + %, Name + Value + %, or None
- Link Color — Gradient (from node color to node color), From Node, To Node or Neutral
- Hover — Full Path, Direct Only or Off, plus Dim Opacity
- Align Ends — pull end nodes into the last column
- Tooltip — flow value and share on hover
- Prefix / Suffix — "$", "€", " visits" and more
- Node Width, Node Gap, Node Radius, Link Opacity, Padding
- Palette and per-node color overrides
- Label and Background colors, Font, Alt Text for screen readers
Why this component
- Built from a simple list: add a link and the layout updates itself, including columns and vertical order.
- Hover shows the entire path upstream and downstream, not just one ribbon. On touch, tap to pin it; on keyboard, Tab and Enter.
- Looks finished the moment you drop it in: sample data, gradient ribbons and clean labels are ready out of the box.
- Resizes by re-laying out (not by shrinking), so text stays readable on every screen.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
