Orbiting Circles

Orbiting Circles moves React children around a circular path using CSS keyframes. It suits an integration or ecosystem illustration with a clear centre and a small number of surrounding logos.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Interactive exampleReact Tailwind CSS

Practical React example

Use a central product label with surrounding integration names. This is a visual relationship diagram; it does not establish a live connection to any service.

Before you copy and paste

Add the OrbitingCircles component, cn utility and orbiting-circles.css from the Code tab. Include the CSS in your Tailwind setup; copying only the TSX leaves the orbit stationary.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

An integration orbit with a static motion alternative

import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
import "@/components/magicui/orbiting-circles.css";

const integrations = ["GitHub", "Linear", "Slack"];

export function IntegrationOrbit() {
  return (
    <figure className="relative flex h-80 w-full items-center justify-center overflow-hidden">
      <figcaption className="sr-only">Example product integrations</figcaption>
      <div aria-hidden="true" className="absolute inset-0 flex items-center justify-center motion-reduce:hidden">
        <span>Workspace</span>
        <OrbitingCircles radius={100} iconSize={56} duration={30} speed={1}>
          {integrations.map((name) => (
            <span key={name} className="rounded-full border bg-background p-2 text-xs">
              {name}
            </span>
          ))}
        </OrbitingCircles>
      </div>
      <ul className="sr-only motion-reduce:not-sr-only motion-reduce:flex motion-reduce:flex-wrap motion-reduce:gap-4">
        {integrations.map((name) => <li key={name}>{name}</li>)}
      </ul>
    </figure>
  );
}

A 100px radius and 56px icon size need at least 256px of usable space. The animated visual is decorative for screen readers, which receive one static list. The same list becomes visible when reduced motion is requested.

Customization

radius / iconSize: Both are pixel values. Budget at least twice the radius plus the icon size, with extra room for long labels; shrink the radius or switch to a list in narrow containers.
duration / speed: Duration is seconds per revolution; the implementation divides it by speed. Use finite positive values. A larger duration slows the orbit; speed=0 is not a pause control.
reverse / path: Reverse changes direction. Set path={false} to hide the circular guide. Multiple children are spaced evenly around the same circle.

Integration notes

The radius does not automatically follow container width. Test small screens and text zoom rather than assuming a fluid orbit.
The source has no built-in motion preference handling. Supply a static alternative as shown. It also has no implemented delay control, even though delay appears in its prop type.
Keep essential navigation outside a moving illustration. Use real accessible labels when replacing the example names with logo images.

Component source: Magic UI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.