Orbiting Circles

Icons orbit a center on a circular path. Layer rings with different radii and directions for integration graphics. Pure CSS transforms.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/orbiting-circles

import { OrbitingCircles } from "@/components/orbiting-circles"

import { OrbitCenter } from "@/components/orbiting-circles"
import { Cloud, Database, Mail } from "lucide-react"

// The orbit centers on its nearest relative parent:
// <div className="relative h-[420px]">
//   <OrbitCenter>Logo</OrbitCenter>
//   <OrbitingCircles radius={90} reverse>...</OrbitingCircles>
//   <OrbitingCircles> ← this one is shown below
// </div>

export function Demo() {
  return (
    <OrbitingCircles
    
    >
      <Cloud />
      <Database />
      <Mail />
    </OrbitingCircles>
  )
}

Updates live as you change the controls. Only non-default props are included.