Revenue globePro
A dotted globe where live payments arc home to headquarters, with a replayable day.
Payments today
40 cities settling to San Francisco. Drag to spin, pick a city to fly there.
$3,941,092 revenue today from 178,412 payments as of 16:42 UTC. Americas $1.10M, EMEA $1.56M, APAC $1.29M. London leads.
| City | Region | Revenue | Payments |
|---|---|---|---|
| San Francisco | Americas | $132,472 | 5,153 |
| New York | Americas | $224,252 | 9,865 |
| Toronto | Americas | $87,604 | 4,136 |
| Chicago | Americas | $83,688 | 3,837 |
| Austin | Americas | $75,272 | 2,955 |
| Seattle | Americas | $67,840 | 3,195 |
| Los Angeles | Americas | $89,844 | 4,314 |
| Miami | Americas | $49,284 | 2,590 |
| Mexico City | Americas | $50,004 | 2,151 |
| Bogotá | Americas | $27,876 | 1,342 |
| Lima | Americas | $18,984 | 919 |
| São Paulo | Americas | $104,168 | 5,010 |
| Buenos Aires | Americas | $46,628 | 1,954 |
| Santiago | Americas | $38,088 | 1,435 |
| London | EMEA | $334,124 | 13,854 |
| Dublin | EMEA | $68,276 | 3,475 |
| Paris | EMEA | $168,752 | 8,276 |
| Berlin | EMEA | $169,548 | 7,601 |
| Amsterdam | EMEA | $112,208 | 5,168 |
| Stockholm | EMEA | $124,560 | 4,007 |
| Madrid | EMEA | $91,096 | 4,290 |
| Milan | EMEA | $79,476 | 3,971 |
| Istanbul | EMEA | $62,632 | 3,289 |
| Tel Aviv | EMEA | $90,888 | 4,345 |
| Dubai | EMEA | $90,280 | 4,434 |
| Lagos | EMEA | $40,580 | 2,305 |
| Nairobi | EMEA | $39,008 | 1,968 |
| Cape Town | EMEA | $84,524 | 1,932 |
| Tokyo | APAC | $197,804 | 9,726 |
| Seoul | APAC | $112,088 | 5,604 |
| Shanghai | APAC | $131,684 | 4,964 |
| Hong Kong | APAC | $92,996 | 4,541 |
| Singapore | APAC | $133,628 | 6,185 |
| Bengaluru | APAC | $127,408 | 6,468 |
| Mumbai | APAC | $113,076 | 4,539 |
| Jakarta | APAC | $66,432 | 3,523 |
| Manila | APAC | $56,044 | 2,461 |
| Sydney | APAC | $138,816 | 6,811 |
| Melbourne | APAC | $80,852 | 4,179 |
| Auckland | APAC | $38,308 | 1,640 |
- Revenue or operations overviews showing where payments come from right now.
- Showcase pages where a live globe with arcs and a day timeline adds impact.
- Use a table or bar-chart when exact regional numbers matter more than the view.
- Use customer-galaxy to explore accounts rather than transactions.
- 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 { RevenueGlobe } from 'animui/revenue-globe';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 operations overview to show where money comes from right now. Swap minuteTx in globe-data.ts for a query on your payments table; totals, arcs and replay all derive from it.
import { RevenueGlobe } from "animui/revenue-globe"; export default function RevenueOverview() { return ( <section> <RevenueGlobe /> </section> );}RevenueGlobe
A dotted canvas globe where payments arc into headquarters, with a scrubbable day timeline, replay and region and city breakdowns. Takes no props; cities, regions and the transaction stream are sample data in globe-data.ts.
No props.
- Arrow keys
- Spins the globe when it has focus.
- Escape
- Clears the selected city or region.
- Arrow keys (timeline)
- Moves the time by five minutes, or an hour with Shift.
- Page uporPage down
- Moves the time by an hour.
- HomeorEnd
- Jumps to midnight or back to live.
- The globe is a focusable region with a roledescription, instructions in its label and a text summary of revenue.
- The timeline is a role="slider" whose value text reads the UTC time.
- Region and city rows are aria-pressed buttons, and a polite live region announces changes.
- Payments draw as arcs to headquarters while the globe drifts; drags rubber-band past the latitude limit.
- The tooltip follows the pointer on a spring, and totals roll with the animated counter.
- Reduced motion stops the auto rotation, hides replay and play controls, and shows the current state as Now.
- Below an 880px container the panel moves under the globe and the globe height follows width with clamp.
- Below 600px the panel drops to one column; below 400px the clock takes its own row.
- The timeline slider uses touch-action none and pointer capture, so scrubbing works on touch.
- Draws on a 2D canvas with devicePixelRatio capped at 2.
- The animation 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 revenue or operations overview to show where money comes from right now.
- Swap minuteTx in globe-data.ts for a query on your payments table, and set HQ, CITIES and REGIONS to your own.
The full library index for assistants is at /llms.txt.