Orbiting Circles

A collection of circles that move in orbit along a circular path. Each circle is positioned at equal angles around a central point. Use it to create a dynamic visual effect in a layout.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/orbiting-circles

npx layro-cli add @magicuidesign/orbiting-circles

npx layro-cli add @magicuidesign/orbiting-circles

bunx layro-cli add @magicuidesign/orbiting-circles

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React from "react"

import { cn } from "@/lib/utils"

export interface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children?: React.ReactNode
  reverse?: boolean
  duration?: number
  delay?: number
  radius?: number
  path?: boolean
  iconSize?: number
  speed?: number