Revenue globe
ProA 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
Pro source and install commands unlock with a Pro plan.
Usage
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 "@/components/arc/blocks/revenue-globe/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.