Customer galaxyPro
2,400 accounts as a drifting galaxy that spirals into clusters by plan, region or health.
Where your revenue lives
2,400 accounts, sized by MRR and colored by health.
Use left and right arrows to fly between clusters, up and down to step through accounts by MRR, plus and minus to zoom, and Escape to reset.
| Health | Accounts | MRR | Expanding accounts | Healthy accounts | Watch accounts | At risk accounts |
|---|---|---|---|---|---|---|
| Expanding | 207 | $869,637 | 207 | 0 | 0 | 0 |
| Healthy | 1,687 | $3,965,431 | 0 | 1,687 | 0 | 0 |
| Watch | 257 | $684,305 | 0 | 0 | 257 | 0 |
| At risk | 249 | $525,720 | 0 | 0 | 0 | 249 |
Showing all accounts in one cluster.
- Customer success or revenue pages to explore where MRR and risk concentrate.
- Showcase views that cluster thousands of accounts by plan, region, or health.
- Use customers-table when people need to find and act on specific accounts.
- Use semantic-zoom for hierarchical data like teams and projects.
- Use bar-chart for simple totals by segment.
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 { CustomerGalaxy } from 'animui/customer-galaxy';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 customer success or revenue page to explore where MRR and risk concentrate. Replace the seeded book in galaxy-data.ts with your accounts; clusters, totals and the side panel derive from it.
import { CustomerGalaxy } from "animui/customer-galaxy"; export default function CustomerSuccessPage() { return ( <section> <CustomerGalaxy /> </section> );}CustomerGalaxy
A canvas galaxy of about 2,400 accounts sized by MRR that spirals into clusters by plan, region or health, with pan, zoom and a totals panel. Takes no props; accounts are sample data in galaxy-data.ts.
No props.
- Arrow leftorArrow right
- On the grouping tabs, switches grouping; on the stage, flies between clusters by MRR.
- Arrow keys
- Steps through accounts when a single cluster is in view.
- +or-
- Zooms in or out.
- Escape
- Clears the selected account, then resets the view.
- 0orHome
- Fits all accounts.
- The stage is role="application" with a roledescription, a text summary label and a keyboard hint.
- Grouping uses a tablist and tabpanel; cluster rows are aria-pressed buttons with MRR and risk in their labels.
- Zoom buttons have labels, and a polite live region announces selections.
- Accounts drift, then spiral into clusters with spring physics when grouping changes; flying to a cluster eases the camera.
- The tab pill slides with a shared layout spring, and panel rows reorder with layout animation.
- Reduced motion is passed to the engine, which snaps to layouts, and UI transitions become instant.
- From an 880px container the totals panel sits beside the stage at 296px; below that it moves under it, and below 620px the stage is 440px tall.
- Touch uses pinch to zoom and double tap; the stage allows vertical page scroll until zoomed in.
- Mouse wheel zoom only takes over for ctrl or pinch gestures and mouse-like wheels, so trackpad scrolling still moves the page.
- Renders about 2,400 accounts on a 2D canvas with devicePixelRatio capped at 2.
- The loop pauses offscreen via IntersectionObserver and in hidden tabs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a customer success or revenue page to explore where MRR and risk concentrate.
- Replace the seeded accounts in galaxy-data.ts with your book, keeping plan, region, health and MRR fields.
The full library index for assistants is at /llms.txt.