MRR waterfallPro
An MRR bridge whose floating bars morph by period and open the accounts behind each move.
MRR movement
All plans · Jul 1 – Sep 30, 2025
Ending MRR on Sep 30
$465,650
+$53,270+12.9%since Jul 1
- Net revenue retention
- 97.7%
- Quick ratio
- 2.32
- Logo churn
- 9.5%
New business
+$55,800187 new accounts
- Granite Mutual+$6,400Sep · Enterprise, annual
- Northpeak Logistics+$5,200Aug · Enterprise, annual
- Halcyon Health+$4,800Jul · Enterprise, annual
- Orchard Health+$2,320Sep · Scale, 80 seats
- Kestrel Freight+$1,740Jul · Scale, 60 seats
- Other accounts+$35,340182 accounts
Select a bar or use the arrow keys to see its accounts
| Movement | Amount | Share of starting MRR | Accounts |
|---|---|---|---|
| Starting MRR | $412,380 | 100.0% | 1,241 |
| New business | +$55,800 | 13.5% | 187 |
| Expansion | +$31,060 | 7.5% | 123 |
| Reactivation | +$6,780 | 1.6% | 27 |
| Contraction | −$13,830 | 3.4% | 60 |
| Churn | −$26,540 | 6.4% | 118 |
| Ending MRR | $465,650 | 112.9% | 1,337 |
- Revenue or board reporting that explains how MRR moved from start to end of a period.
- Finance views where each movement should list the accounts behind it.
- Use revenue-explorer for MRR over many months.
- Use bar-chart for plain comparisons that do not build from a start value.
- Use cohort-retention for retention by cohort.
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 { MrrWaterfall } from 'animui/mrr-waterfall';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 on a revenue or board reporting page to explain how MRR moved. Replace the seeded months and accounts in mrr-data.ts with your billing movements; levels, axis, ratios and lists are computed from them.
import { MrrWaterfall } from "animui/mrr-waterfall"; export default function RevenuePage() { return ( <section> <MrrWaterfall /> </section> );}MrrWaterfall
An MRR bridge with floating bars per movement, a period switch and a panel listing the accounts behind the selected bar. Takes no props; periods, movements and accounts are sample data in mrr-data.ts.
No props.
- Arrow keys
- Moves the selection to the previous or next bar, wrapping at the ends.
- HomeorEnd
- Selects the first or last bar.
- Bars are a role="radiogroup" of radio buttons with roving tabindex; each label reads the movement, amount and account count.
- The chart SVG carries a text summary, and the accounts panel is labelled by the selected movement.
- A polite live region announces each newly selected bar.
- Bars morph to new levels when the period changes, and the account list reorders with layout animation.
- Headings and figures swap with a short rise, and totals roll with the animated counter.
- Reduced motion swaps values without movement.
- Below an 800px container the accounts panel moves under the chart.
- Below 560px the summary stats become a three column row with smaller figures.
- Hover previews apply only to mouse pointers; touch taps select a bar.
- A handful of SVG bars per period, sized by ResizeObserver; cheap at any size.
- Account lists are not virtualized, so cap or paginate large movements.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a revenue or board reporting page to explain how MRR moved between periods.
- Replace PERIODS in mrr-data.ts with your billing movements; levels, axis and lists are computed from them.
The full library index for assistants is at /llms.txt.