Revenue globePro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/revenue-globe

• Markdown: https://ui.xzero.co.uk/components/blocks/revenue-globe/markdown

• Access: Xzero Pro

• Registry id: revenue-globe

• Source file: registry/blocks/revenue-globe/revenue-globe.tsx

• Built from: Animated counter

• Keywords: react globe, revenue globe, payments map animation, 3d globe canvas, live transactions map, dotted globe

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.

When to use

• 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.

When not to use

• 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

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/revenue-globe

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { RevenueGlobe } from "@/components/xzero/blocks/revenue-globe/revenue-globe";

export default function RevenueOverview() {
  return (
    <section>
      <RevenueGlobe />
    </section>
  );
}

API reference

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.

Keyboard interactions

Keys	Action
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 up / Page down	Moves the time by an hour.
Home / End	Jumps to midnight or back to live.

Accessibility

• 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.

Motion

• 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.

Responsive behavior

• 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.

Performance

• Draws on a 2D canvas with devicePixelRatio capped at 2.
• The animation loop pauses offscreen via IntersectionObserver and in hidden tabs.

Notes for AI

• 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.

Related

• Customer galaxy: 2,400 accounts as a drifting galaxy that spirals into clusters by plan, region or health.
• Activity terrain: A 3D terrain of hourly activity you can orbit, zoom, fly into and flatten into a heatmap.
• Animated counter: Give changing totals a clear sense of movement.
• Revenue explorer: A SaaS revenue chart you zoom with a brush while paths, axes and figures glide to the range.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt