Orbit Animation

Pro

CSS orbital rings with configurable items, radii, speeds, and reverse direction. Accepts any ReactNode as orbiting or center content.

Pro component — requires an active license. Get access →

✦

⚛️

🎨

⚡

🌊

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add orbit-animation

Usage

TSX

import { OrbitAnimation } from "@/components/ui/orbit-animation"

export default function Example() {
  return (
    <OrbitAnimation
      size={300}
      center={<div className="h-14 w-14 rounded-full border bg-card flex items-center justify-center text-2xl">⚛️</div>}
      items={[
        { content: <div className="h-9 w-9 rounded-full border bg-card flex items-center justify-center">🎨</div>, radius: 70, duration: 10 },
        { content: <div className="h-9 w-9 rounded-full border bg-card flex items-center justify-center">⚡</div>, radius: 110, duration: 16 },
        { content: <div className="h-9 w-9 rounded-full border bg-card flex items-center justify-center">🌊</div>, radius: 70, duration: 10, offset: 180 },
      ]}
    />
  )
}

Props

Prop	Type	Default	Required
center	React.ReactNode	—	no
items	OrbitItem[]	—	yes
size	number	`300`	no
showRings	boolean	`true`	no
className	string	—	no

Details

Source filecomponents/ui/orbit-animation.tsx

Typeui

Categoriesanimations

npm dependencies

Registry deps

Claude skill—