Premium & Brand

Orbit

Server Component

Icons or avatars revolving around a nucleus on pure-CSS rings.

Import

tsx

import { Orbit, OrbitRing, OrbitItem } from "@cronus-ui/ui";

bash

npx cronus-ui add orbit

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component OrbitDefault layout:inline style:orbit {
  aria-label:"Orbit"
  label "Orbit"
  text "A"
  text "B"
  text "C"
}

page "/audit/orbit/default" type:custom {
  use OrbitDefault
}

API Reference

Generated from the component's exported types.

OrbitProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

OrbitRingProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`radius`*	`number`	—	Radius of the ring in pixels — the distance from the nucleus' centre to the centre of each orbiting item. The ring renders as a `2 × radius` circle absolutely centred on the stage.
`duration`	`number`	`DEFAULT_DURATION`	Seconds for one full revolution. Larger is calmer; concentric rings look best with distinct durations so their items never sync up. Defaults to `24`.
`reverse`	`boolean`	`false`	Revolve counter-clockwise instead of clockwise. Defaults to `false`.
`startAngle`	`number`	`0`	Angle of the first item's slot in degrees, measured clockwise from 12 o'clock. Remaining items stay evenly distributed after the offset. Use it to de-align concentric rings' starting positions. Defaults to `0`.
`guide`	`boolean`	`true`	Draw the faint circular guide (`border-border/40`). Defaults to `true`.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

OrbitItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

Integration constellation

Two counter-rotating rings of tool chips around a product core — the classic integrations hero. One shared CSS keyframe drives everything (zero JS per frame): hovering the stage pauses both rings so any chip can be clicked, and reduced-motion visitors get the same layout statically placed, every chip upright.

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add orbit

tsx

<Orbit aria-label="Tools orbiting the product core" className="size-80">
  <span className="grid size-14 place-items-center rounded-2xl bg-surface-overlay text-fg">
    <Zap className="size-6" />
  </span>
  <OrbitRing radius={72} duration={22}>
    {innerTools.map(({ label, icon: Icon }) => (
      <OrbitItem key={label}>
        <span
          role="img"
          aria-label={label}
          className="grid size-10 place-items-center rounded-full border border-border bg-surface-raised text-fg-secondary shadow-sm"
        >
          <Icon className="size-4" />
        </span>
      </OrbitItem>
    ))}
  </OrbitRing>
  <OrbitRing radius={128} duration={36} reverse startAngle={36}>
    {outerTools.map(({ label, icon: Icon }) => ( /* …same chip… */ ))}
  </OrbitRing>
</Orbit>

Team halo

A single guide-less ring puts faces around a live metric. `startAngle` rotates the whole formation off the 12 o'clock axis, and the built-in counter-rotation keeps every avatar upright for the full lap.

04on call

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add orbit

tsx

<Orbit aria-label="Teammates on call" className="size-64">
  <div className="flex flex-col items-center">
    <span className="font-display text-3xl font-semibold tabular-nums text-fg">04</span>
    <span className="text-xs text-fg-tertiary">on call</span>
  </div>
  <OrbitRing radius={96} duration={30} guide={false} startAngle={45}>
    {team.map((member) => (
      <OrbitItem key={member.name}>
        <span
          title={member.name}
          className="grid size-9 place-items-center rounded-full border border-border bg-surface-overlay text-xs font-medium text-fg-secondary shadow-xs"
        >
          {member.initials}
        </span>
      </OrbitItem>
    ))}
  </OrbitRing>
</Orbit>

Integration constellation

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add orbit

tsx

<Orbit aria-label="Tools orbiting the product core" className="size-80">
  <span className="grid size-14 place-items-center rounded-2xl bg-surface-overlay text-fg">
    <Zap className="size-6" />
  </span>
  <OrbitRing radius={72} duration={22}>
    {innerTools.map(({ label, icon: Icon }) => (
      <OrbitItem key={label}>
        <span
          role="img"
          aria-label={label}
          className="grid size-10 place-items-center rounded-full border border-border bg-surface-raised text-fg-secondary shadow-sm"
        >
          <Icon className="size-4" />
        </span>
      </OrbitItem>
    ))}
  </OrbitRing>
  <OrbitRing radius={128} duration={36} reverse startAngle={36}>
    {outerTools.map(({ label, icon: Icon }) => ( /* …same chip… */ ))}
  </OrbitRing>
</Orbit>

Team halo

04on call

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add orbit

tsx

<Orbit aria-label="Teammates on call" className="size-64">
  <div className="flex flex-col items-center">
    <span className="font-display text-3xl font-semibold tabular-nums text-fg">04</span>
    <span className="text-xs text-fg-tertiary">on call</span>
  </div>
  <OrbitRing radius={96} duration={30} guide={false} startAngle={45}>
    {team.map((member) => (
      <OrbitItem key={member.name}>
        <span
          title={member.name}
          className="grid size-9 place-items-center rounded-full border border-border bg-surface-overlay text-xs font-medium text-fg-secondary shadow-xs"
        >
          {member.initials}
        </span>
      </OrbitItem>
    ))}
  </OrbitRing>
</Orbit>