Journey flowPro
A 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { JourneyFlow } from 'animui/journey-flow';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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.