# OrbitingCircles

> Places its children on a circular orbit around the centre of the parent and spins them, with an optional faint ring for the path.

## Facts

- **Product**: Crew OS
- **Family**: Motion
- **Global**: `window.DigitalCrew.OrbitingCircles`
- **Source**: `digitalcrew-orchestrator: components/ui/orbiting-circle.tsx`
- **Import in the app**: `import { OrbitingCircles } from "@/components/ui/orbiting-circle";`
- **Live preview**: /design/components/orbiting-circles/preview.html
- **Page**: /design/components/orbiting-circles

## Guidelines

**Use it for** showing integrations or channels circling a product mark. Stack two with different radii and directions for depth.

**What you provide**: a `relative flex items-center justify-center` parent with a size, a centre element, and one `OrbitingCircles` per ring. Props: `children` (spread evenly around the ring), `radius` (px, default 160), `duration` (s per turn, default 20), `speed` (divides the duration, default 1), `reverse`, `path` (draw the ring, default true), `iconSize` (px box per child, default 30), `index` and `startAnimationDelay` (s, stagger the entrance), `once` (animate in only the first time), `className` (for the ring).

**Anatomy**: the ring is a circle of the given radius with a 1px border (`rgba(249,250,251,0.07)` in dark mode) and a top-down gradient from 5% black (3% white in dark mode) to transparent at 54.76%. Each child sits in a `size-[var(--icon-size)]` box with 4px padding, `rounded-full`, `z-20`; style the child itself.

**Behaviour**: when the ring enters the viewport it springs in (stiffness 120, damping 18, delay `index × 0.2s`); children pop in 0.6s later, 0.2s apart. Each child runs the CSS `orbit` keyframes, linear and infinite. Leaving the viewport unmounts them unless `once`. No reduced-motion branch.

**Don't** put more than about six items on one ring, or clickable items on a moving orbit.

## API

```ts
export interface OrbitingCirclesProps extends HTMLMotionProps<"div"> {
    className?: string;
    children?: React.ReactNode;
    reverse?: boolean;
    duration?: number;
    delay?: number;
    radius?: number;
    path?: boolean;
    iconSize?: number;
    speed?: number;
    index?: number;
    startAnimationDelay?: number;
    once?: boolean;
}
export declare function OrbitingCircles({ className, children, reverse, duration, radius, path, iconSize, speed, index, startAnimationDelay, once, ...props }: OrbitingCirclesProps): any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons, B = DC.BrandIcons;
  function chip(Icon, key, big) { return h("span", { key: key, className: "flex items-center justify-center rounded-full border bg-card shadow-sm " + (big ? "size-9" : "size-8") }, h(Icon, { className: "size-4" })); }
  function App() {
    return h("div", { className: "relative flex h-72 items-center justify-center overflow-hidden rounded-xl border" },
      h("span", { className: "bg-background z-10 flex size-14 items-center justify-center rounded-full border shadow-sm" }, h(B.logo, { className: "size-7 fill-foreground" })),
      h(DC.OrbitingCircles, { radius: 64, iconSize: 40, duration: 16 }, chip(I.Mail, "m"), chip(I.Linkedin, "l"), chip(I.Phone, "p")),
      h(DC.OrbitingCircles, { radius: 118, iconSize: 44, duration: 28, reverse: true, index: 1 }, chip(I.Calendar, "c", 1), chip(I.Target, "t", 1), chip(I.Users, "u", 1), chip(I.Bot, "b", 1)));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Motion

- [ActionFocusSession](/design/components/action-focus-session.md): The focus timebox for one task in the actions cockpit: a live billable clock with approve, start, pause, run and done, and a burst of sparkles on completion.
- [CardResize](/design/components/card-resize.md): A container that tweens its width and height when its content changes (`.t-resize`).
- [ChapterScrubber](/design/components/chapter-scrubber.md): A rail of ticks, one per chapter, that swell like a dock under the pointer, with a card previewing the hovered chapter.
- [ContainerScroll](/design/components/container-scroll.md): A hero block where a device-like frame starts tilted back in 3D and straightens as the page scrolls, with the title drifting up.
- [FeatureSlideshow](/design/components/feature-slideshow.md): A step-by-step feature explainer: an accordion of steps on the left that advances on a timer, a progress line on the open step, and a large media slot on the right.
- [FirstBentoAnimation](/design/components/first-bento-animation.md): A self-playing chat vignette for the bento grid: a user asks for a meeting slot, the Digital Crew avatar shows typing dots, then the reply streams in as a `Reasoning` block.
- [FourthBentoAnimation](/design/components/fourth-bento-animation.md): A scheduling vignette for the bento grid: a week ruler, three task bars that spring into place, and a time cursor that follows the pointer.
- [HyperText](/design/components/hyper-text.md): A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right.
- [InfiniteSlider](/design/components/infinite-slider.md): A JavaScript-driven endless strip (Framer Motion) that renders its children twice and slides them in a loop, optionally slowing on hover.
- [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md): A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness.
- [Lottie](/design/components/lottie.md): The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`).
- [Marquee](/design/components/marquee.md): An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables.
- [MotionScale](/design/components/motion-scale.md): The shared motion scale made visible: the same distance travelled on each duration token and each easing, with a Replay button.
- [NumberFlowCounter](/design/components/number-flow-counter.md): A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow).
- [ShimmerText](/design/components/shimmer-text.md): A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (`.t-shimmer`).
- [SignatureGradient](/design/components/signature-gradient.md): The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms.
- [SkeletonReveal](/design/components/skeleton-reveal.md): A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`).
- [StreamingText](/design/components/streaming-text.md): Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`).
- [ThirdBentoAnimation](/design/components/third-bento-animation.md): An insight vignette for the bento grid: a smooth area line draws itself, a dot pulses at its midpoint and a dark pill above it ticks through values.
- [UniboxMotion](/design/components/unibox-motion.md): The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.