環形軌道時間軸
事件沿同心軌道環繞排列，選中事件展開詳情卡。
以年份為同心軌道（由內而外遞增），事件節點沿弧分佈並緩慢公轉，外圈轉速依距離放慢；點擊節點時全體停轉、中央彈出詳情卡，適合用行星系的隱喻敘述品牌或產品歷程。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
40
<OrbitTimeline />
安裝
npx shadcn@latest add https://webberui.com/r/orbit-timeline.json或在 components.json 設定 registries 後，改用 @webberui/orbit-timeline 安裝。
安裝依賴後，從 registry JSON（/r/orbit-timeline.json 的 files[0].content）複製 orbit-timeline.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { OrbitTimeline } from "@/components/ui/orbit-timeline";
<OrbitTimeline
events={[
{ year: 2022, title: "種子輪募資", detail: "完成募資，團隊擴編到八人。" },
{ year: 2023, title: "正式上線", detail: "首週登上技術社群熱門榜首。" },
{ year: 2024, title: "元件庫開源", detail: "核心動態元件庫正式開源。" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
events | OrbitTimelineEvent[] | — | 事件清單，依 year 分組成同心軌道 |
period | number | 40 | 最內圈公轉一圈所需秒數，外圈依距離逐圈放慢 |
autoRotate | boolean | true | 掛載後是否自動開始公轉 |
hint | string | "點擊節點查看詳情" | 尚未選取事件時中央顯示的提示文字 |
className | string | — | 透傳到外層容器 |
OrbitTimelineEvent 欄位：
| 欄位 | 型別 | 說明 |
|---|---|---|
year | number | 事件年份，相同年份落在同一條軌道 |
title | string | 事件標題，hover 與詳情卡都會顯示 |
detail | string | 詳情卡展開的說明文字 |
hue | number? | 節點色相 0–360，未提供時依軌道自動配色 |
可及性
- 使用者系統開啟「減少動態效果」時停止公轉並隱藏播放鈕，節點以靜態位置呈現，點擊展開詳情不受影響
- 每個節點皆為
role="button"，可以 Tab 聚焦、Enter 或空白鍵開合詳情，並以aria-pressed標示選中狀態 - 節點的
aria-label包含年份與標題（如「2023 年：正式上線」），詳情卡關閉鈕有明確的aria-label - 元件離開可視範圍時自動暫停 rAF 動畫迴圈，節省效能