Service nodes circle a glowing core on three counter-rotating rings; pulses travel out along the links and the core breathes on a slow loop.
illustrationsvgnetworkorbitintegrationsheroloopapi
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/orbit-network
Usage
usage.tsx
1import { OrbitNetwork } from "@/components/illustrations/orbit-network";
2
3export function IntegrationsHero() {
4 return <OrbitNetwork label="API" rings={[3, 5, 7]} className="w-[360px]" />;
5}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rings | [number, number, number] | [3, 5, 7] | Nodes on the inner, middle and outer rings. |
speed | number | 1 | Speed multiplier for orbits and pulses. |
label | string | "API" | Two or three characters shown in the core. |
title | string | — | Accessible description of the scene. |
className | string | — | Classes for the SVG; set a width, height follows. |
Accessibility
- Rendered as a single SVG with role="img" and an aria-label you can override with `title`.
- Under prefers-reduced-motion the scene renders its key frame as a still image: no loops, no timers.
- Colours come from the GetUrUI tokens, so the scene follows light and dark themes automatically.