127 Components
Globe Arcs
BackgroundsInteractive 3D dotted Canvas globe featuring glowing multi-point transaction flight arcs, traveling light pulses, drag-to-rotate interaction with inertia dampening, and global city routing nodes.
Global Transaction Arcs
Real-time inter-continental payment routing across Tier-1 datacenters
14,820 Settled
Focus Node:
Spin Speed:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/globe-arcs.json"
Props
TypeScript props supported by <GlobeArcs />.
| Prop | Type | Default | Description |
|---|---|---|---|
| autoRotateSpeed | number | 0.004 | Angular speed (radians per frame) for the continuous globe rotation. |
| initialRadius | number | 160 | Base spherical radius benchmark used for coordinate scaling. |
| className | string | — | Optional CSS classes to apply to the root container. |
| showHeader | boolean | — | Whether to render the telemetry title and status indicator header |
| showControls | boolean | — | Whether to show rotation speed and arc interaction sliders |
Key Features
- Lightweight Canvas 2D spherical projection with 800+ golden-angle dotted point cloud vertices.
- Elevated great-circle 3D bezier arcs connecting major financial hubs (SF, NYC, London, Tokyo, Singapore, Sydney).
- Traveling glowing light pulse heads and trail rendering on each active transaction route.
- Intuitive touch & pointer drag-to-rotate with physics-based inertia dampening and auto-rotation.
- Live interactive stage controls to adjust spin speed, emit pulses, reset angles, and select edge nodes.
Keyboard & Accessibility
- Fully pauseable auto-rotation via visible interactive toggle button.
- Handles reduced-motion preferences by maintaining static inspection without continuous spinning.
- Does not block keyboard focus order or document scrolling.