權限波次解鎖

左側（窄容器時在上方）是管理者卡片與一個開關，右側是成員頭像網格，中間一層 SVG 線路把兩者接起來。開啟時主幹線先從開關右緣描繪出去，再依列序一條條分岔到每一列；支線抵達的那一刻，該列頭像由灰階、半透明加鎖頭的狀態，彈一下變成彩色並換上勾號徽章——一波接一波，直到所有人都拿到權限。關閉時反向：從最後一列開始往回收線，頭像依序回到鎖定。開關狀態支援受控／非受控雙模式。

Playground

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

import * as React from "react";

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

<PermissionWaveGrid/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/permission-wave-grid.json

使用

import { PermissionWaveGrid } from "@/components/ui/permission-wave-grid";

const members = [
  { id: "1", name: "王小明" },
  { id: "2", name: "林怡君" },
  { id: "3", name: "陳家豪", initials: "家豪", color: "#0f766e" },
];

<PermissionWaveGrid
  members={members}
  columns={6}
  switchLabel="允許所有成員檢視財務報表"
  onEnabledChange={(enabled) => console.log(enabled ? "已開放" : "已收回")}
/>

Props

PermissionWaveMember

另外具名匯出 getMemberInitials(name)，方便在其他地方用同一套縮寫規則。

細節

• 線路座標用實際量測的 DOM 位置計算：主幹從開關右緣出發往右，到網格左側的匯流點後分岔成每列一條直角折線支線，轉角帶 8px 圓角；容器變窄時版面改成上下排列，主幹改從開關下緣往下再轉入網格左側。ResizeObserver 會在版面變動時重算。
• 開啟的時間線：主幹描繪 trunkDuration → 第 r 列支線在 trunkDuration + r × waveDelay 開始描繪（300ms）→ 支線抵達後該列頭像以 0.9 → 1.06 → 1 的彈跳解鎖，列內每個頭像再錯開 30ms。關閉時由最後一列往回收線，最後才收主幹。
• 波次跑完後，若 pulse 開啟，每條路徑上會有一顆光點以 CSS offset-path 沿線移動；時長讀取 --wb-permission-wave-pulse（預設 1600ms）。開關滑塊的位移時長是 --wb-permission-wave-thumb（預設 150ms）。
• 快速連點時動畫會從當下狀態直接轉向，光點只在最新一次開啟完整跑完後才出現。

可及性

• 開關是 role="switch" 的原生按鈕，帶 aria-checked，以 aria-labelledby 指向 switchLabel；空白鍵與 Enter 皆可切換，並有 focus-visible 外框
• 成員網格是 role="list"，每個頭像的 aria-label 為「王小明：已授權」或「王小明：未授權」
• 波次完成後由 aria-live="polite" 區域宣告「已授權 24 位成員」（關閉時宣告已收回）
• SVG 線路層與光點皆設 aria-hidden，不干擾輔助科技
• 使用者系統開啟「減少動態效果」時，線路直接出現或消失、所有頭像同時以短淡入切換，不跑光點