Signature / Moleculestable

Orbiting Circles

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

@glinui/uiComponent: orbiting-circles

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

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.

Basic$

TSX

1import { OrbitingCircles } from "@glinui/ui"
2import { Zap, Palette, Sparkles, Globe } from "lucide-react"
3
4export function OrbitingCirclesDemo() {
5return (
6  <div className="relative flex h-80 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
7    <Globe className="size-8 text-neutral-400" />
8    <OrbitingCircles radius={80} duration={16} delay={0} path>
9      <Zap className="size-4 text-neutral-700 dark:text-neutral-300" />
10    </OrbitingCircles>
11    <OrbitingCircles radius={80} duration={16} delay={5}>
12      <Palette className="size-4 text-neutral-700 dark:text-neutral-300" />
13    </OrbitingCircles>
14    <OrbitingCircles radius={80} duration={16} delay={10}>
15      <Sparkles className="size-4 text-neutral-700 dark:text-neutral-300" />
16    </OrbitingCircles>
17  </div>
18)
19}

Examples$

Glass Variant$

Orbiting elements render on translucent glass surfaces.

TSX

1import { OrbitingCircles } from "@glinui/ui"
2import { Zap, Palette, Sparkles, Globe } from "lucide-react"
3
4export function OrbitingCirclesGlassDemo() {
5return (
6  <div className="relative flex h-80 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
7    <Globe className="size-8 text-neutral-400" />
8    <OrbitingCircles variant="glass" iconSize={40} radius={90} duration={16} delay={0} path>
9      <Zap className="size-4 text-neutral-700 dark:text-neutral-300" />
10    </OrbitingCircles>
11    <OrbitingCircles variant="glass" iconSize={40} radius={90} duration={16} delay={5}>
12      <Palette className="size-4 text-neutral-700 dark:text-neutral-300" />
13    </OrbitingCircles>
14    <OrbitingCircles variant="glass" iconSize={40} radius={90} duration={16} delay={10}>
15      <Sparkles className="size-4 text-neutral-700 dark:text-neutral-300" />
16    </OrbitingCircles>
17  </div>
18)
19}

3D Variant$

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

TSX

1import { OrbitingCircles } from "@glinui/ui"
2import { GitBranch, Database, Cloud, Lock, Shield, Cpu } from "lucide-react"
3
4export function OrbitingCircles3DDemo() {
5return (
6  <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl bg-[linear-gradient(135deg,rgb(240_244_248),rgb(226_232_240))] dark:bg-[linear-gradient(135deg,rgb(15_23_42),rgb(30_41_59))]">
7    <div className="flex size-14 items-center justify-center rounded-2xl border border-white/30 [border-top-color:var(--glass-refraction-top)] bg-white/60 shadow-[0_0_0_1px_rgb(255_255_255_/_0.4)_inset,0_12px_32px_-8px_rgb(15_23_42_/_0.2)] backdrop-blur-xl dark:border-white/[0.14] dark:bg-white/[0.1] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.08)_inset,0_12px_32px_-8px_rgb(0_0_0_/_0.5)]">
8      <Cpu className="size-6 text-neutral-700 dark:text-neutral-200" />
9    </div>
10    {/* Inner ring */}
11    <OrbitingCircles variant="3d" iconSize={44} radius={80} duration={18} delay={0} path>
12      <GitBranch className="size-5 text-neutral-700 dark:text-neutral-200" />
13    </OrbitingCircles>
14    <OrbitingCircles variant="3d" iconSize={44} radius={80} duration={18} delay={6}>
15      <Database className="size-5 text-neutral-700 dark:text-neutral-200" />
16    </OrbitingCircles>
17    <OrbitingCircles variant="3d" iconSize={44} radius={80} duration={18} delay={12}>
18      <Cloud className="size-5 text-neutral-700 dark:text-neutral-200" />
19    </OrbitingCircles>
20    {/* Outer ring — reverse */}
21    <OrbitingCircles variant="3d" iconSize={40} radius={140} duration={26} delay={0} reverse path>
22      <Lock className="size-4 text-neutral-600 dark:text-neutral-300" />
23    </OrbitingCircles>
24    <OrbitingCircles variant="3d" iconSize={40} radius={140} duration={26} delay={8.5} reverse>
25      <Shield className="size-4 text-neutral-600 dark:text-neutral-300" />
26    </OrbitingCircles>
27    <OrbitingCircles variant="3d" iconSize={40} radius={140} duration={26} delay={17} reverse>
28      <Layers className="size-4 text-neutral-600 dark:text-neutral-300" />
29    </OrbitingCircles>
30  </div>
31)
32}

Reverse Direction with Dual Rings$

TSX

1import { OrbitingCircles } from "@glinui/ui"
2import { Moon, Star, Rocket, Flame, Box } from "lucide-react"
3
4export function OrbitingCirclesReverseDemo() {
5return (
6  <div className="relative flex h-80 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
7    <Box className="size-7 text-neutral-400" />
8    {/* Inner ring — forward */}
9    <OrbitingCircles variant="glass" iconSize={36} radius={70} duration={14} delay={0} path>
10      <Moon className="size-4 text-neutral-700 dark:text-neutral-300" />
11    </OrbitingCircles>
12    <OrbitingCircles variant="glass" iconSize={36} radius={70} duration={14} delay={7}>
13      <Star className="size-4 text-neutral-700 dark:text-neutral-300" />
14    </OrbitingCircles>
15    {/* Outer ring — reverse */}
16    <OrbitingCircles variant="glass" iconSize={36} radius={130} duration={22} delay={0} reverse path>
17      <Rocket className="size-4 text-neutral-700 dark:text-neutral-300" />
18    </OrbitingCircles>
19    <OrbitingCircles variant="glass" iconSize={36} radius={130} duration={22} delay={11} reverse>
20      <Flame className="size-4 text-neutral-700 dark:text-neutral-300" />
21    </OrbitingCircles>
22  </div>
23)
24}

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$

TSX

1import { 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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

OrbitingCirclesProps

`OrbitingCirclesProps`

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