Cohort retentionPro
A cohort retention triangle that morphs into retention curves and rewashes by segment.
Cohort retention
Workspaces still active each month after signup. Data through Aug 31, 2026.
- Month 1 retention
- 76.2%+5.2 ptslatest 3 vs first 3 cohorts
- Month 6 retention
- 45.7%+3.4 ptslatest 3 vs first 3 cohorts
- New workspaces
- 5,199Signed up Aug 2025 to Jul 2026
Use the arrow keys to move between cohorts and months, Home and End to jump within a cohort, and Escape to clear.
| Cohort | Workspaces | Month 1 | Month 2 | Month 3 | Month 4 | Month 5 | Month 6 | Month 7 | Month 8 | Month 9 | Month 10 | Month 11 | Month 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Aug 2025 | 360 | 72.5% | 62.5% | 55.3% | 50.3% | 46.4% | 43.1% | 41.9% | 40.6% | 39.4% | 38.9% | 38.6% | 38.1% |
| Sep 2025 | 386 | 74.1% | 62.7% | 55.4% | 50.5% | 47.2% | 44.6% | 43.0% | 40.9% | 40.9% | 39.9% | 39.1% | Not yet measured |
| Oct 2025 | 402 | 74.1% | 63.7% | 55.7% | 51.0% | 46.5% | 43.8% | 43.0% | 42.0% | 40.0% | 39.3% | Not yet measured | Not yet measured |
| Nov 2025 | 416 | 74.5% | 64.7% | 57.2% | 52.6% | 47.6% | 46.2% | 44.5% | 42.3% | 40.6% | Not yet measured | Not yet measured | Not yet measured |
| Dec 2025 | 395 | 76.2% | 65.6% | 58.2% | 52.9% | 49.4% | 47.3% | 44.6% | 44.1% | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Jan 2026 | 398 | 71.6% | 62.8% | 56.8% | 51.5% | 48.5% | 46.0% | 43.7% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Feb 2026 | 461 | 76.6% | 67.0% | 58.8% | 54.0% | 50.3% | 48.2% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Mar 2026 | 434 | 76.7% | 67.5% | 59.9% | 53.9% | 50.7% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Apr 2026 | 459 | 78.6% | 68.2% | 60.6% | 54.7% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| May 2026 | 502 | 78.1% | 67.3% | 59.8% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Jun 2026 | 495 | 78.4% | 69.3% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Jul 2026 | 491 | 79.8% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Average | 5,199 | 76.2% | 65.8% | 57.9% | 52.5% | 48.4% | 45.7% | 43.5% | 42.0% | 40.3% | 39.4% | 38.9% | 38.1% |
- Growth or customer success dashboards comparing how signup cohorts retain month over month.
- Views that need both the cohort triangle and retention curves from the same data.
- Use journey-flow for paths between funnel steps.
- Use activity-heatmap for activity by day rather than by cohort.
- Use revenue-explorer for revenue over time.
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 { CohortRetention } from 'animui/cohort-retention';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 growth or customer success dashboard to compare how signup cohorts retain. Replace simulate() in cohort-data.ts with your cohort sizes and retained counts per month; rates, averages, headline figures and deltas are derived from them.
import { CohortRetention } from "animui/cohort-retention"; export default function GrowthPage() { return ( <section> <CohortRetention /> </section> );}CohortRetention
A cohort retention triangle that morphs into retention curves, with segment filters and a keyboard-navigable cell cursor. Cohort sizes and retained counts come from simulate() in cohort-data.ts.
No props.
- Arrow keys
- Move the cell cursor between cohorts (rows) and months (columns).
- HomeorEnd
- Jump to the first or last month of the current cohort.
- Escape
- Clears the cursor.
- The chart is a focusable role="group" with aria-describedby, and a polite live region reads the focused cohort, month and rate.
- Decorative cells and curves are aria-hidden; the legend is a labelled role="img".
- Cells morph into curves on the view switch and rewash their colour when the segment changes; headline figures roll with Animated counter.
- Reduced motion jumps values instantly and follows the pointer without springs.
- Chart geometry follows container width through a ResizeObserver.
- Below a 560px container padding tightens and the KPI context wraps.
- The chart uses touch-action pan-y, so touch scrubbing does not block vertical page scroll.
- The triangle is 12 cohorts by 12 months of SVG cells; much larger grids mean many more animated cells.
- Cell colour changes use CSS transitions with a stagger instead of JavaScript per cell.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a growth or customer success dashboard to compare how signup cohorts retain.
- Replace simulate() in cohort-data.ts with your cohort sizes and monthly retained counts; rates, averages and deltas are derived.
- Edit SEGMENTS in cohort-data.ts to match your segments. No props or callbacks.
- Composes animui Segmented control and Animated counter.
The full library index for assistants is at /llms.txt.