Premium & Brand

Orbit

Server Component

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

Import

tsx

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

bash

npx cooud-ui add orbit

Examples

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 cooud-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-gradient-primary text-primary-foreground shadow-glow">
    <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 cooud-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>

API Reference

Generated from the component's exported types.

OrbitProps

Extends HTMLAttributes<HTMLDivElement>

No own props — see the extended type above for available props.

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`.

OrbitItemProps

Extends HTMLAttributes<HTMLDivElement>

No own props — see the extended type above for available props.

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 cooud-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-gradient-primary text-primary-foreground shadow-glow">
    <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 cooud-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>