環繞軌道圖示 Orbiting Circles｜免費 React 元件

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

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

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add orbiting-circles

Orbiting Circles 是 React 的環繞軌道（orbit animation）元件，環繞動畫用 CSS @keyframes 與 CSS 變數完成，軌道線是 SVG，樣式以 Tailwind CSS 撰寫，只用 Motion 的 useReducedMotion 偵測減少動態效果設定。

Playground

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

軌道半徑radius

100

繞行一圈秒數duration

節點尺寸iconSize

起始角度startAngle

逆時針環繞reverse

顯示軌道虛線path

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<OrbitingCircles/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

SaaS 首頁的「整合」區塊：中央放產品 logo，周圍環繞支援串接的服務圖示。
技術架構或生態系示意，例如核心 API 周圍環繞 SDK、資料庫與雲端服務。
社群或團隊頁，用頭像圈表現成員與社群規模。
不適合：要同時展示幾十個圖示時，單一軌道會太擁擠，改用 Icon Cloud。

安裝

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

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

使用

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>

範例

中央 logo 搭配單層軌道

外層容器用 relative 置中，產品 logo 放在中間，OrbitingCircles 以 absolute 疊上去。

import { Cloud, Database, Mail, Server } from "lucide-react";
import { OrbitingCircles } from "@/components/ui/orbiting-circles";

export function IntegrationsOrbit() {
  return (
    <div className="relative flex h-[300px] items-center justify-center">
      <div className="flex size-16 items-center justify-center rounded-2xl bg-foreground text-sm font-semibold text-background">
        API
      </div>
      <OrbitingCircles radius={110} duration={24} iconSize={44} className="absolute">
        <Database className="size-6" />
        <Cloud className="size-6" />
        <Server className="size-6" />
        <Mail className="size-6" />
      </OrbitingCircles>
    </div>
  );
}

頭像圈、隱藏軌道線

path={false} 拿掉虛線軌道，children 可以放任何元素，例如圓形頭像圖片。

const members = ["/avatars/1.jpg", "/avatars/2.jpg", "/avatars/3.jpg", "/avatars/4.jpg", "/avatars/5.jpg"];

<OrbitingCircles radius={90} iconSize={48} duration={30} path={false}>
  {members.map((src) => (
    <img key={src} src={src} alt="" className="size-12 rounded-full object-cover ring-2 ring-background" />
  ))}
</OrbitingCircles>

用 `startAngle` 錯開同半徑的兩組元素

同一半徑疊兩個實例、方向相同時，把第二組的 startAngle 設成相鄰節點間距的一半，兩組節點會交錯排列。

<div className="relative flex h-[260px] items-center justify-center">
  <OrbitingCircles radius={100} duration={20} className="absolute">
    <Cloud />
    <Server />
    <Database />
  </OrbitingCircles>
  <OrbitingCircles radius={100} duration={20} startAngle={60} path={false} className="absolute">
    <Mail />
    <Cloud />
    <Server />
  </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 標記，僅作裝飾

常見問題

可以在 Next.js App Router 使用嗎？

可以。原始碼已有 "use client"，在 Server Component 頁面直接 import 即可。首次渲染與伺服器端輸出一致，掛載後才依減少動態效果設定切換成靜態版，不會產生 hydration 不一致。

怎麼調整速度與大小？

duration 是繞一圈的秒數，數字越大越慢；radius 控制軌道半徑，iconSize 控制每個元素的方塊邊長。元件的外框尺寸是 radius * 2 + iconSize，排版時可以用這個數字預留空間。

會不會很吃效能？

環繞動畫是 CSS @keyframes 的 transform，不需要 JavaScript 逐格計算，也沒有 requestAnimationFrame 迴圈。

怎麼改軌道線的顏色？

軌道線是 SVG <circle>，顏色寫在原始碼的 stroke-black/10 dark:stroke-white/15 class，直接修改複製下來的檔案即可；不需要軌道線就傳 path={false}。

使用者開啟減少動態效果時會怎樣？

元素直接停在軌道上的固定位置，不做環繞動畫。

Orbiting Circles

把這個效果裝進你的專案

本頁目錄