App Orbit
Premium spatial orbit system for AI dashboards, product control planes, and connected app ecosystems.
Default
Cinematic AI control system with elliptical rings, depth, drift, parallax, focus dimming, and spring motion.
Sign in to view this example's source code.
Sign inDashboard
Production-style shell with KPI strip, orbit topology, and an inspector panel wired to node selection.
Production · us-east
Service topology
Live dependency map for the control plane. Click a node to inspect it in the side panel.
All regions nominalLast deploy · 12m ago
Requests / min
184k+6.2%
p99 latency
142 ms−4 ms
Error budget
98.4%SLO safe
Active sessions
42.1k+1.1%
Inspector
Selections from the orbit map mirror here for dashboard-style drill-down.
Select any node on the map - including the center - to show details, ownership notes, or runbooks in a real product shell.
Recent synthetic checks
- Checkout API healthpass
- Auth token mintpass
- Search index lagwarn
Sign in to view this example's source code.
Sign inFrom API
Load a JSON graph (mock fetch), map wire fields such as iconKey to Lucide icons, then hydrate AppOrbit.
API-fed orbit graph
Swap the mock loader for a real fetch that returns this JSON shape. Map each iconKey to a Lucide icon, then pass centerNode and orbitNodes into AppOrbit.
Loading topology from (mock) API…
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| centerNode | OrbitNode | Required | Primary node rendered at the center of the orbit system |
| orbitNodes | OrbitNode[] | Required | Nodes distributed across the orbit rings with label, icon, color, description, and status metadata |
| orbitSpeed | number | 1 | Base auto-rotation speed before focus and ring modifiers |
| ringCount | number | 2 | Number of elliptical perspective orbit rings |
| enableConnections | boolean | true | Draw spring-following connection lines from center to nodes |
| enableDragging | boolean | false | Allow pointer drag to rotate the orbit scene |
| autoRotate | boolean | true | Animate nodes around their rings when motion is allowed |
| onNodeClick | (node: OrbitNode) => void | undefined | Called when the center or orbiting nodes are selected |