Journey flow
ProA Sankey of user journeys whose flows morph by channel and trace a cohort on hover.
Journeys to a paid plan
16,965 visits in August, followed from first session to plan
All users: 16,965 visits and 1,020 paid plans.
- Showing where users go between funnel stages, such as visit to signup to activation.
- Comparing flows across acquisition channels with a segment switch.
- Tracing one step to see which paths lead into and out of it.
- Use cohort-retention to show how groups retain over time.
- Use bar-chart for a simple linear funnel without branching paths.
- Use metrics-dashboard for a general KPI overview.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to show where users go between funnel steps on an analytics page. Replace the link counts in journey-flow-geometry.ts with your own; layout, tracing and rates are computed from them.
import { JourneyFlow } from "@/components/arc/blocks/journey-flow/journey-flow"; export default function FunnelPage() { return <JourneyFlow className="funnel" />;}JourneyFlow
A Sankey of trial journeys across funnel stages. A channel switch morphs every band, hovering a step or band traces that cohort through the whole journey with a tooltip, and selecting a step pins its breakdown in a side panel with rolling counts. A data table toggle shows the same numbers. Nodes, links, and per-segment counts are sample data in journey-flow-geometry.ts.
classNamestring–Appended to the root element.- Arrow keys
- In the segment switch, move between channels. On steps, Up/Down moves within a stage and Left/Right to the nearest step in the next or previous stage.
- HomeorEnd
- Jump to the first or last step.
- EnterorSpace
- Selects a step to trace its flows.
- Escape
- Clears the traced step.
- Segments form a role="radiogroup"; steps sit in a role="toolbar" with roving tabIndex and aria-pressed.
- The diagram is role="img" with a text summary; each step button's label includes its users and share of visitors.
- A polite live region announces visits and paid plans when the channel changes.
- The breakdown panel is a labelled aside, and the data table toggle exposes aria-expanded for a non-visual reading of the chart.
- Ribbons morph their widths on a spring slightly slower than a control when the segment changes; counts follow a beat later and never overshoot.
- Tracing dims everything outside the cohort; panel text settles with a short rise and digits roll in place.
- Reduced motion swaps the morph for an instant change with an opacity fade.
- From an 860px container the detail panel sits beside the chart at 280px; below that it moves under the chart.
- Below 560px the segment switch fills the width and padding tightens, and below 480px step labels shrink to 10 to 11px.
- A ResizeObserver feeds the chart width, so ribbons re-lay out on resize rather than scaling.
- Ribbons are SVG paths computed from 13 sample nodes; very large graphs with many stages will get crowded and slower to morph.
- Segment changes morph ribbon widths on springs, with no loop running at rest.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use to show where users go between funnel steps on an analytics page.
- Replace NODES, STAGES, LINKS and SEGMENTS in journey-flow-geometry.ts with your counts; layout, tracing and percentages are computed.
- No callbacks; selection is internal.
The full library index for assistants is at /llms.txt.