Runtime Orbit Diagram

Animated path diagram for workspace systems, flows, and runtime maps.

Components / Runtime Orbit Diagram

Layoutdiagramtopologyanimation

Animated workspace topology diagram with icon nodes and moving path marker.

Preview

Loading preview…

Usage

Animated path diagram for workspace systems, flows, and runtime maps.

<RuntimeOrbitDiagram
  nodes={nodes}
  pathOrder={["character", "site", "business", "automations", "operations"]}
/>

Files

components/steez/RuntimeOrbitDiagram.tsxcomponent

components/steez/RuntimeOrbitDiagram.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { RuntimeOrbitDiagram } from "@steez-ui/ui/blocks";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/runtime-orbit-diagram.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { RuntimeOrbitDiagram } from "<project-root>/components/steez/RuntimeOrbitDiagram";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/runtime-orbit-diagram.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Hexagon Grid

Animated hex field backdrop for avatars, launch surfaces, and atmospheric panels.

Marquee Strip

Continuous horizontal marquee for providers, extensions, or launch lanes.