Signature / Molecule

Orbiting Circles

CSS-driven orbital animation that keeps children upright via double-rotate.

pnpm dlx @glinui/cli@latest add orbiting-circles

40+ integrations

Plugs into the tools you already run

Connect your repository, hosting and framework once. Deploy hooks, status checks and preview comments appear where your team already works.

Installation$

Install from

pnpm dlx @glinui/cli@latest add orbiting-circles

Prefer the package?

Usage$

Place inside a relative container with a centered anchor element. Each OrbitingCircles instance wraps one child and orbits it around the center using the CSS double-rotate trick.

Examples$

Glass Variant$

Orbiting elements render on translucent glass surfaces.

import { OrbitingCircles } from "@glinui/ui"
import { Lightning, Palette, Sparkle, Globe } from "@phosphor-icons/react"


export function OrbitingCirclesGlassDemo() {
return (
  <div className="relative flex h-80 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--surface-1)]">
    <Globe className="size-8 text-neutral-400" />
    <OrbitingCircles variant="glass" iconSize={40} radius={90} duration={16} delay={0} path>
      <Lightning className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
    <OrbitingCircles variant="glass" iconSize={40} radius={90} duration={16} delay={5}>
      <Palette className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
    <OrbitingCircles variant="glass" iconSize={40} radius={90} duration={16} delay={10}>
      <Sparkle className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
  </div>
)
}

3D Variant$

Frosted glass orbs with deep shadows, inner glow, and elevated depth. Best against colored or gradient backgrounds.

import { OrbitingCircles } from "@glinui/ui"
import { GitBranch, Database, Cloud, Lock, Shield, Cpu } from "@phosphor-icons/react"


export function OrbitingCircles3DDemo() {
return (
  <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl bg-[linear-gradient(135deg,var(--surface-1),var(--surface-3))]">
    <div className="flex size-14 items-center justify-center rounded-2xl border border-[var(--glass-border)] [border-top-color:var(--glass-refraction-top)] bg-[var(--glass-readable)] [box-shadow:var(--glass-3-shadow)] backdrop-blur-xl">
      <Cpu className="size-6 text-[var(--color-foreground)]" />
    </div>
    {/* Inner ring */}
    <OrbitingCircles variant="3d" iconSize={44} radius={80} duration={18} delay={0} path>
      <GitBranch className="size-5 text-[var(--color-foreground)]" />
    </OrbitingCircles>
    <OrbitingCircles variant="3d" iconSize={44} radius={80} duration={18} delay={6}>
      <Database className="size-5 text-[var(--color-foreground)]" />
    </OrbitingCircles>
    <OrbitingCircles variant="3d" iconSize={44} radius={80} duration={18} delay={12}>
      <Cloud className="size-5 text-[var(--color-foreground)]" />
    </OrbitingCircles>
    {/* Outer ring, reverse */}
    <OrbitingCircles variant="3d" iconSize={40} radius={140} duration={26} delay={0} reverse path>
      <Lock className="size-4 text-[var(--color-muted)]" />
    </OrbitingCircles>
    <OrbitingCircles variant="3d" iconSize={40} radius={140} duration={26} delay={8.5} reverse>
      <Shield className="size-4 text-[var(--color-muted)]" />
    </OrbitingCircles>
    <OrbitingCircles variant="3d" iconSize={40} radius={140} duration={26} delay={17} reverse>
      <Stack className="size-4 text-[var(--color-muted)]" />
    </OrbitingCircles>
  </div>
)
}

Reverse Direction with Dual Rings$

import { OrbitingCircles } from "@glinui/ui"
import { Moon, Star, Rocket, Flame, Cube } from "@phosphor-icons/react"


export function OrbitingCirclesReverseDemo() {
return (
  <div className="relative flex h-80 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--surface-1)]">
    <Cube className="size-7 text-neutral-400" />
    {/* Inner ring, forward */}
    <OrbitingCircles variant="glass" iconSize={36} radius={70} duration={14} delay={0} path>
      <Moon className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
    <OrbitingCircles variant="glass" iconSize={36} radius={70} duration={14} delay={7}>
      <Star className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
    {/* Outer ring, reverse */}
    <OrbitingCircles variant="glass" iconSize={36} radius={130} duration={22} delay={0} reverse path>
      <Rocket className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
    <OrbitingCircles variant="glass" iconSize={36} radius={130} duration={22} delay={11} reverse>
      <Flame className="size-4 text-neutral-700 dark:text-neutral-300" />
    </OrbitingCircles>
  </div>
)
}

Engines$

The engine prop is not applicable. Endless css orbit rotation; continuous, not an entrance. It stays css only and still honors motion level none and reduced motion.

Accessibility$

Each OrbitingCircles wrapper is decorative and does not receive keyboard focus.
Icon children should include aria-hidden="true" if they convey no unique information.
If orbiting elements are meaningful, provide a visible label or aria-label on the container.

Reduced Motion$

The orbit animation is paused via motion-reduce:[animation:none]. All children remain visible at their startAngle position so the layout stays intact.

API Reference$

Prop	Type	Required	Default	Description
`delay`	`number`	No	`0`	Animation delay in seconds
`duration`	`number`	No	`20`	Full orbit duration in seconds
`iconSize`	`number`	No	`32`	Size of the orbiting container in px
`path`	`boolean`	No	`false`	Show orbit path ring
`radius`	`number`	No	`100`	Orbit radius in px
`reverse`	`boolean`	No	`false`	Reverse orbit direction
`startAngle`	`number`	No	`0`	Starting angle in degrees
`variant`	`"default" \| "glass" \| "3d"`	No	`"default"`	Visual variant

Source$

import { OrbitingCircles } from "@glinui/ui"

packages/ui/src/components/orbiting-circles.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/orbiting-circles.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

OrbitingCirclesProps