Orbiting Circles

Place icons (or any nodes) on a circular path that rotates with pure CSS. Nest multiple rings for layered motion — flip reverse and tune speed / radius.

Animation keyframes ship in orbiting-circles.css next to the component — not in your global stylesheet. Respects prefers-reduced-motion.

Default

Two rings — outer clockwise and inner reverse at higher speed. Compose any children as orbiting nodes.

Loading…

Installation

CLI

npx @sonojs/ui@latest add orbiting-circles

Usage

page.tsx

"use client"

import {
  GitHubIcon,
  GoogleIcon,
  NextjsIcon,
  NotionIcon,
  OpenAIIcon,
  OrbitingCircles,
  ReactIcon,
  TypescriptIcon,
  VercelIcon,
} from "@/components/3d/orbiting-circles"

export default function OrbitingCirclesDemo() {
  return (
    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden">
      <OrbitingCircles iconSize={40}>
        <GitHubIcon />
        <GoogleIcon />
        <OpenAIIcon />
        <VercelIcon />
        <NotionIcon />
      </OrbitingCircles>
      <OrbitingCircles iconSize={30} radius={100} reverse speed={2}>
        <ReactIcon />
        <NextjsIcon />
        <TypescriptIcon />
        <GitHubIcon />
      </OrbitingCircles>
    </div>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	-	Orbiting nodes — evenly spaced around the ring.
radius	number	160	Orbit radius in pixels.
iconSize	number	30	Width/height of each orbiting slot in pixels.
duration	number	20	Base seconds per full rotation (before speed).
speed	number	1	Divides duration — higher is faster.
reverse	boolean	false	Reverse animation direction.
path	boolean	true	Draw the faint circular guide path.
className	string	-	Classes on each orbiting slot.