Orbiting Circles

沿圓形軌道環繞的圖示／頭像圈，可疊多層軌道、反向與不同轉速。

沿一條圓形軌道等距環繞的圖示或頭像圈。多個實例可疊成內外多層軌道，各自設定半徑、轉速與方向，常用來表現「以核心為中心的技術生態」或整合關係。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

軌道半徑radius

100

繞行一圈秒數duration

節點尺寸iconSize

起始角度startAngle

逆時針環繞reverse

顯示軌道虛線path

<OrbitingCircles />

安裝

npx shadcn@latest add https://webberui.com/r/orbiting-circles.json

或在 components.json 設定 registries 後，改用 @webberui/orbiting-circles 安裝。

安裝依賴後，從 registry JSON（/r/orbiting-circles.json 的 files[0].content）複製 orbiting-circles.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge lucide-react

使用

children 會沿圓周等距分佈。疊兩個實例即可做出內外雙軌，用 reverse 讓外圈反向、startAngle 錯開節點。

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

<div className="relative flex h-[360px] items-center justify-center">
  <OrbitingCircles radius={62} duration={16} iconSize={34} className="absolute">
    <Github />
    <Twitter />
    <Figma />
  </OrbitingCircles>

  <OrbitingCircles
    radius={122}
    duration={28}
    iconSize={42}
    reverse
    startAngle={20}
    className="absolute"
  >
    <Chrome />
    <Slack />
    <Cloud />
    <Database />
  </OrbitingCircles>
</div>

Props

Prop	型別	預設值	說明
`children`	`React.ReactNode`	—	沿軌道環繞的元素，會沿圓周等距分佈
`radius`	`number`	`100`	軌道半徑（px）
`duration`	`number`	`20`	繞行一圈的時長（秒），越大越慢
`reverse`	`boolean`	`false`	反向（逆時針）環繞
`iconSize`	`number`	`40`	單一元素的邊長（px）
`startAngle`	`number`	`0`	第一個元素的起始角度（度）
`path`	`boolean`	`true`	顯示淡淡的圓形軌道
`className`	`string`	—	透傳到最外層容器

可及性

使用者系統開啟「減少動態效果」時，元素直接落在軌道上的靜態位置，不做環繞動畫
軌道路徑以 aria-hidden 標記，僅作裝飾

Playground

安裝

使用

Props

可及性

On this page