Skeleton Orchestra
骨架屏交響系統：載入完成時，骨架依版面位置以方向性波次逐一實體化為真實內容。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.1
<SkeletonOrchestra />
安裝
npx shadcn@latest add https://webberui.com/r/skeleton-orchestra.json或在 components.json 設定 registries 後，改用 @webberui/skeleton-orchestra 安裝。
安裝依賴後，開啟 skeleton-orchestra.json，將 files[0].content 的內容存成你的 components/ui/skeleton-orchestra.tsx：
npm install motion clsx tailwind-merge使用
import {
SkeletonOrchestra,
SkeletonSlot,
} from "@/components/ui/skeleton-orchestra";
<SkeletonOrchestra loading={isLoading} stagger={0.1} className="space-y-4">
<SkeletonSlot
skeleton={
<div className="size-10 rounded-full bg-neutral-200 dark:bg-neutral-800" />
}
>
<Avatar />
</SkeletonSlot>
<SkeletonSlot>
<h3>文章標題</h3>
</SkeletonSlot>
<SkeletonSlot>
<p>正文內容，預設骨架會依此內容的尺寸畫圓角灰塊。</p>
</SkeletonSlot>
<SkeletonSlot index={9}>
<p>指定 index 讓這段內容壓軸實體化。</p>
</SkeletonSlot>
</SkeletonOrchestra>;Props
SkeletonOrchestra
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
loading | boolean | — | 是否處於載入狀態；由 true 轉為 false 時觸發波次實體化 |
stagger | number | 0.1 | 相鄰波次的間隔（秒） |
children | React.ReactNode | — | 放入含 SkeletonSlot 的版面內容 |
className | string | — | 附加到容器的 class |
SkeletonSlot
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
index | number | — | 手動指定波次序（0 起算）；未指定時依 Slot 的掛載順序自動編號 |
skeleton | React.ReactNode | — | 自訂骨架形狀（如圓形頭像）；未指定時依 children 尺寸畫圓角灰塊 |
children | React.ReactNode | — | 真實內容 |
className | string | — | 附加到 Slot 外層的 class |
細節
- 波次順序：未指定
index時，依 Slot 的掛載順序（即 DOM 順序，通常是左上到右下）自動編號；每格延遲 = 波次序 ×stagger，形成方向性波次 - 同構骨架：預設骨架以隱形佔位渲染真實內容取得尺寸，灰塊與最終版面同構，實體化時不會跳版
- 交叉過渡：以
AnimatePresence mode="popLayout"讓骨架淡出縮小、內容以 scale/opacity 浮現，兩者交叉進行、逐格實體化 - 回到載入：
loading轉回true時骨架立即接手，不套波次延遲 - 減少動態效果：使用者系統開啟「減少動態效果」時，無波次、無縮放，骨架與內容直接切換，脈動動畫也一併停用；首次渲染仍與 SSR 輸出一致
- 可及性：容器帶
aria-busy，骨架區塊為aria-hidden，輔助科技只會讀到真實內容