Orbiting Circles

A collection of circles which move in orbit along a circular path.

import { Icons } from '@/demos/shared/icons'
import { OrbitingCircles } from '@/registry/magicui/orbiting-circles'

export function OrbitingCirclesDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden
    "
    >
      <OrbitingCircles iconSize={40}>
        <Icons.whatsapp />
        <Icons.notion />
        <Icons.openai />
        <Icons.googleDrive />
        <Icons.whatsapp />
      </OrbitingCircles>
      <OrbitingCircles iconSize={30} radius={100} reverse speed={2}>
        <Icons.whatsapp />
        <Icons.notion />
        <Icons.openai />
        <Icons.googleDrive />
      </OrbitingCircles>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/orbiting-circles

bunx shadcn@latest add @magicui-solid/orbiting-circles

yarn dlx shadcn@latest add @magicui-solid/orbiting-circles

npx shadcn@latest add @magicui-solid/orbiting-circles

Import

import { OrbitingCircles } from '@/components/magicui/orbiting-circles'

Usage

<div class="relative h-[500px] w-full overflow-hidden">
  <OrbitingCircles>
    <div class="size-8 rounded-full bg-black/10 dark:bg-white/10" />
    <div class="size-8 rounded-full bg-black/10 dark:bg-white/10" />
    <div class="size-8 rounded-full bg-black/10 dark:bg-white/10" />
  </OrbitingCircles>
  <OrbitingCircles radius={100} reverse>
    <div class="size-8 rounded-full bg-black/10 dark:bg-white/10" />
    <div class="size-8 rounded-full bg-black/10 dark:bg-white/10" />
    <div class="size-8 rounded-full bg-black/10 dark:bg-white/10" />
  </OrbitingCircles>
</div>

Props

Prop	Type	Default	Description
`className`	`string`	`-`	Optional CSS class name to apply custom styles.
`children`	`JSX.Element`	`-`	The children nodes of the component.
`reverse`	`boolean`	`false`	If true, the animation plays in reverse.
`duration`	`number`	`20`	The duration of the animation in seconds.
`delay`	`number`	`-`	The delay before the animation starts in seconds.
`radius`	`number`	`160`	The radius of the orbit in pixels.
`path`	`boolean`	`true`	If true, a path is displayed for the orbit.
`iconSize`	`number`	`30`	The size of the icon in pixels.
`speed`	`number`	`1`	The speed of the animation.

Original:

magicui.design/docs/components/orbiting-circles