Orbiting Circles

A ring of icons or avatars spaced evenly along a circular orbit. Several instances can be stacked into inner and outer orbits, each with its own radius, speed, and direction — a common way to express "a technology ecosystem around a core" or a set of integrations.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<OrbitingCircles />

Installation

npx shadcn@latest add https://webberui.com/r/orbiting-circles.json

Usage

children are distributed evenly around the circumference. Stack two instances to build inner and outer orbits, using reverse to send the outer ring the other way and startAngle to stagger the nodes.

import { OrbitingCircles } from "@/components/ui/orbiting-circles";

<div className="relative flex h-[360px] items-center justify-center">
  <OrbitingCircles radius={62} duration={16} iconSize={34} className="absolute">
    <Github />
    <Twitter />
    <Figma />
  </OrbitingCircles>

  <OrbitingCircles
    radius={122}
    duration={28}
    iconSize={42}
    reverse
    startAngle={20}
    className="absolute"
  >
    <Chrome />
    <Slack />
    <Cloud />
    <Database />
  </OrbitingCircles>
</div>

Props

Accessibility

• When the user has "reduce motion" enabled at the system level, the elements land at their static positions on the orbit with no circling animation
• The orbit path is marked aria-hidden and is decorative only